/* Lensdump gallery bundle (docs/gallery-redesign.md): profile, album, image viewer and upload redesign.
   Loaded on every page from the theme head hook. Every rule is scoped to our own ld- classes. */

/* 1g · Settings › Profile: Default album view */
.ld-view-pref { margin: 18px 0 6px; padding: 16px; border: 1px solid rgba(14, 229, 155, .3); border-radius: 12px; background: rgba(14, 229, 155, .04); }
.ld-view-pref legend { padding: 0 6px; font: 600 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: inherit; }
.ld-view-pref-note { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; opacity: .75; }
.ld-view-pref-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ld-view-pref-option { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(127, 127, 127, .3); border-radius: 12px; cursor: pointer; }
.ld-view-pref-option:has(input:checked) { border-color: #0ee59b; box-shadow: 0 0 0 1px #0ee59b inset; }
.ld-view-pref-option input { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; margin: 0; accent-color: #0ee59b; }
.ld-view-pref-art { display: block; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, .25); color: #9aa3ad; }
.ld-view-pref-art svg { display: block; width: 100%; height: auto; }
.ld-view-pref-text { padding-left: 26px; font-size: 12.5px; opacity: .85; }
.ld-view-pref-text strong { opacity: 1; }
@media (max-width: 560px) { .ld-view-pref-options { grid-template-columns: 1fr; } }

/* 1a · Profile (section 1). The cover frame: 220px; the member's focal point and zoom come from lensdump_user_cover_position
   as --ld-cover-x/-y/-zoom on #background-cover (inline, so there is no jump on load). */
.ld-ico { width: 16px; height: 16px; flex: none; }
.ld-cover, #background-cover.ld-cover, #background-cover.ld-cover.no-background { height: 220px; min-height: 0; max-height: none; }
#background-cover.ld-cover.no-background, .ld-profile-cover.ld-cover { background: linear-gradient(135deg, #2a2d33, #15171b); }
#background-cover.ld-cover #background-cover-wrap { padding: 0; }
#background-cover.ld-cover #background-cover-src { background-size: cover; background-position: var(--ld-cover-x, 50%) var(--ld-cover-y, 50%);
  transform: scale(var(--ld-cover-zoom, 1)); transform-origin: var(--ld-cover-x, 50%) var(--ld-cover-y, 50%); }
#background-cover.ld-cover.no-background #background-cover-src { height: 100%; }
/* The cover fades into the page at the bottom (mock 1a), with no accent line. */
#background-cover.ld-cover #background-cover-wrap::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 11, 0) 45%, var(--bodyBackground, #07080b)); }
#background-cover.ld-cover, .ld-profile-cover.ld-cover { border-bottom: 0 !important; }
.ld-cover-tools { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3; }
.ld-cover-tools .pop-box { min-width: 210px; }
#background-cover.ld-cover #change-background-cover { position: static; }
.ld-gp-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border: 1px solid rgba(127, 127, 127, .35);
  border-radius: 9px; background: transparent; color: inherit; font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer; text-decoration: none; white-space: nowrap; }
.ld-gp-btn:hover { border-color: rgba(127, 127, 127, .6); }
.ld-gp-btn.is-glass { border-color: rgba(255, 255, 255, .18); background: rgba(10, 12, 16, .62); color: #fff; backdrop-filter: blur(6px); }
.ld-gp-btn.is-primary { border-color: #0ee59b; background: #0ee59b; color: #06231a !important; }
.ld-gp-btn.is-primary:hover { background: #37f0ae; }
/* Not on the Fit · Large toggle: its lit word shows the mode, and it looks the same in both. */
.ld-gp-btn[aria-pressed="true"]:not(.ld-iv-fit) { border-color: #0ee59b; background: #0c1d17; }
.ld-gp-btn.hidden, .ld-cover-menu.hidden { display: none; }

/* Adjust position (mock 1a): a green frame with thirds, "Drag to reposition" top left, the controls top right, and a
   dashed band for what a phone shows (placed by gallery.js from a 390 x 150 frame). Above the identity block, which
   overlaps the cover's bottom edge. */
.ld-cover-adjust { position: absolute; inset: 0; z-index: 600; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 2px #0ee59b; }
.ld-cover-adjust[hidden] { display: none; }
.ld-cover-adjust.is-dragging { cursor: grabbing; }
.ld-cover-thirds { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 0 33.3% / 100% 1px no-repeat,
              linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) 0 66.6% / 100% 1px no-repeat; }
.ld-cover-guide { position: absolute; box-sizing: border-box; border: 1.5px dashed rgba(255, 255, 255, .8);
  background: rgba(14, 229, 155, .06); pointer-events: none; }
/* An edge the phone's part runs past is left open (owner, 2 Oct 2026: the guide shows both axes). */
.ld-cover-guide.is-open-top { border-top-color: transparent; }
.ld-cover-guide.is-open-bottom { border-bottom-color: transparent; }
.ld-cover-guide.is-open-left { border-left-color: transparent; }
.ld-cover-guide.is-open-right { border-right-color: transparent; }
.ld-cover-guide[hidden] { display: none; }
.ld-cover-guide span { position: absolute; padding: 2px 8px; border-radius: 999px; background: rgba(7, 8, 11, .75); color: #fff;
  font-size: 11px; white-space: nowrap; }
.ld-cover-guide .ld-cover-guide-label { bottom: 52px; left: 8px; }
/* The phone preview: a 390 x 150 frame at half size, the picture as the cover shows it. */
.ld-cover-phone { position: absolute; right: 16px; bottom: 14px; width: 195px; height: 75px; overflow: hidden; border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 4px 16px rgba(0, 0, 0, .45); pointer-events: none; background: #15171b; }
.ld-cover-phone[hidden] { display: none; }
.ld-cover-phone-src { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; }
.ld-cover-phone span { position: absolute; left: 6px; bottom: 5px; padding: 1px 7px; border-radius: 999px; background: rgba(7, 8, 11, .75); color: #fff; font-size: 10.5px; }
@media (max-width: 720px) { .ld-cover-phone { display: none; } }
.ld-cover-hint { position: absolute; left: 24px; top: 16px; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: rgba(7, 8, 11, .78); color: #fff; font: 400 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; }
.ld-cover-hint .ld-ico { width: 14px; height: 14px; }
.ld-cover-adjust-bar { position: absolute; right: 20px; top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
  max-width: calc(100% - 40px); padding: 6px 6px 6px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(15, 18, 23, .94);
  color: #e6e8ea; cursor: default; font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-cover-zoom { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #cfd4d9; }
.ld-cover-zoom .ld-ico { width: 14px; height: 14px; }
.ld-cover-zoom input { width: 110px; accent-color: #0ee59b; }
.ld-cover-zoom output { width: 36px; font-size: 11.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ld-cover-btn { height: 30px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: transparent; color: #e6e8ea;
  font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-cover-btn:hover { background: rgba(255, 255, 255, .06); }
.ld-cover-btn[aria-pressed="true"] { background: #0c1d17; border-color: rgba(14, 229, 155, .4); }
.ld-cover-btn.is-quiet { border-color: transparent; color: #8b929a; }
.ld-cover-btn.is-primary { border-color: #0ee59b; background: #0ee59b; color: #04130c; font-weight: 700; }
.ld-cover-btn.is-primary:hover { background: #37f0ae; }
.ld-cover-btn:disabled { opacity: .5; cursor: default; }
body.ld-cover-adjusting .ld-cover-tools { visibility: hidden; }

/* Identity group on the left (avatar with the tier ring, name and emblem, chip, counts), actions on the right. */
#top-user.ld-gp { position: relative; z-index: 501; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px; margin: -56px 0 0; padding: 0;
  min-height: 0; text-align: left; }
.ld-gp-avatar { position: relative !important; inset: auto !important; flex: none; display: block; width: 116px; height: 116px; margin: 0 !important; }
.ld-gp-avatar .user-image { display: block; width: 116px !important; height: 116px !important; margin: 0 !important; border: 4px solid #0b0d13 !important;
  border-radius: 50%; object-fit: cover; font-size: 108px; background: #0b0d13; float: none; }
.ld-gp-id, .ld-gp-actions, .ld-gp-chiprow { position: static !important; inset: auto !important; }
.ld-gp-id { flex: 1 1 260px; min-width: 0; padding-bottom: 4px; }
#top-user.ld-gp h1 { margin: 0 0 6px; font: 700 26px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#top-user.ld-gp h1 a { display: inline-flex; align-items: center; color: inherit; }
#top-user.ld-gp h1 .ld-name-emblem { width: 24px; height: 24px; margin-left: 8px; } /* owner, 3 Oct 2026: 24px (was 20), phones too */
.ld-gp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }
.ld-gp-meta .ld-profile-chip { margin: 0; }
.ld-gp-count { color: inherit; opacity: .8; text-decoration: none; }
.ld-gp-count b { font-weight: 600; opacity: 1; }
.ld-gp-private { opacity: .75; }
.ld-gp-meta .user-social-networks { display: inline-flex; gap: 10px; margin: 0; }
.ld-gp-bio { margin: 8px 0 0; max-width: 640px; font-size: 13.5px; line-height: 1.5; opacity: .9; }
.ld-gp-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 6px; }
.ld-gp-actions .btn { margin: 0; }
/* Follow (Chevereto's own button, its two states) in the look of the profile's other buttons, with its words: on phones a
   full-width row like the owner's Edit profile / New album (owner, 2 Oct 2026: a lone icon looked out of place). */
.ld-gp-actions .btn-follow .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 16px;
  border-radius: 9px; font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-transform: none; }
.ld-gp-actions .btn-follow .btn-unfollowed { border: 1px solid #0ee59b; background: #0ee59b; color: #06231a; }
.ld-gp-actions .btn-follow .btn-followed { border: 1px solid rgba(127, 127, 127, .35) !important; background: transparent !important; color: #e8ebef !important; }
.ld-gp-actions .btn-follow, .ld-gp-actions .btn-follow * { text-decoration: none !important; }
.ld-gp-actions .btn-follow .btn-unfollowed, .ld-gp-actions .btn-follow .btn-unfollowed * { color: #06231a !important; }
.ld-gp-actions .btn-follow .btn-icon { margin: 0; font-size: 13px; }
.ld-gp-actions .btn-follow:not([data-followed="1"]) .btn-followed, .ld-gp-actions .btn-follow[data-followed="1"] .btn-unfollowed { display: none !important; }
/* Hover stays solid (owner, 3 Oct 2026: "it goes translucent"; Chevereto's hover swapped in its dark background): a lighter
   green, as the profile's other green buttons. */
.ld-gp-actions .btn-follow .btn-unfollowed:hover { border-color: #37f0ae; background: #37f0ae; }
.ld-gp-actions .btn-follow .btn-followed:hover { border-color: rgba(127, 127, 127, .6) !important; }
/* Phones: the same green rectangle, a little smaller, centred under the (centred) avatar group (owner, 3 Oct 2026; not
   the full-width bar of 2 Oct, nor the grey pill that replaced it). */
@media (max-width: 720px) {
  .ld-gp-actions:has(> .btn-follow:only-child) { justify-content: center; }
  .ld-gp-actions .btn-follow { display: inline-flex; }
  .ld-gp-actions .btn-follow .btn { min-height: 38px; padding: 6px 22px; border-radius: 9px; font-size: 13px; }
  .ld-gp-actions .btn-follow .btn-followed { border-color: rgba(255, 255, 255, .14) !important; color: #9aa3ad !important; }
}

/* One tab bar: Albums / Files / Liked, then search, Sort and Select. */
.ld-gp-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin: 22px 0 14px;
  border-bottom: 1px solid rgba(127, 127, 127, .25); }
.ld-gp-tabs { display: flex; gap: 6px; }
.ld-gp-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 11px; border-bottom: 2px solid transparent; color: inherit;
  font: 600 15px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; opacity: .7; text-decoration: none; }
.ld-gp-tabs a:hover { opacity: 1; }
.ld-gp-tabs a.is-current { border-bottom-color: #0ee59b; opacity: 1; }
.ld-gp-n { padding: 1px 7px; border-radius: 9px; background: rgba(127, 127, 127, .2); font-size: 11.5px; font-weight: 600; }
.ld-gp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 8px; }
.ld-gp-search { position: relative; display: flex; align-items: center; margin: 0; }
.ld-gp-search .ld-ico { position: absolute; left: 11px; opacity: .6; pointer-events: none; }
.ld-gp-search input:focus { border-color: rgba(14, 229, 155, .55); outline: none; box-shadow: none; }
.ld-gp-search input { width: 230px; min-height: 36px; padding: 7px 12px 7px 34px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 9px;
  background: rgba(127, 127, 127, .08); color: inherit; font-size: 13px; }
.ld-gp-sort { position: relative; }
.ld-gp-sort[hidden], .ld-gp-btn[hidden] { display: none; }
.ld-gp-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 600; min-width: 190px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid rgba(127, 127, 127, .3); border-radius: 10px; background: #12151b; color: #e8ebef; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.ld-gp-menu[hidden] { display: none; }
.ld-gp-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 7px; background: none;
  color: inherit; font: 500 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; cursor: pointer; }
.ld-gp-menu button:hover, .ld-gp-menu button:focus-visible { background: rgba(255, 255, 255, .08); }
.ld-gp-menu button[aria-checked="true"] { color: #0ee59b; }
.ld-gp-subtabs .content-tabs-container { margin-bottom: 10px; }
/* A profile's Liked has two sub-tabs (Files, Albums): on phones too they stay one row as on desktop, never Chevereto's
   collapsed tab menu (owner, 2 Oct 2026: Liked follows the new design). */
@media (max-width: 991px) {
  .ld-gp-subtabs [data-action=tab-menu], .ld-gp-subtabs .content-tabs-shade { display: none !important; }
  .ld-gp-subtabs .content-tabs-container, .ld-gp-subtabs .content-tabs-wrap { display: block !important; position: static !important; height: auto !important;
    max-height: none !important; overflow: visible !important; background: none !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
    visibility: visible !important; }
  .ld-gp-subtabs .content-tabs { display: flex !important; flex-wrap: nowrap; gap: 4px; position: static !important; margin: 0 !important; padding: 0 !important;
    background: none !important; box-shadow: none !important; border: 0 !important; }
  .ld-gp-subtabs .content-tabs > li { display: block !important; float: none !important; width: auto !important; border: 0 !important; }
}
.ld-gp-explore { margin-top: 14px; }
/* Chevereto elements our pages replace but its scripts still need (sort tabs, selection tools): never shown. Hidden here,
   in the head stylesheet, so they never paint; the server marks them (.ld-native-hidden), not a script. */
.ld-native-hidden { display: none !important; }
.ld-gp-menu a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-radius: 7px; color: inherit;
  font: 500 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; }
.ld-gp-menu a:hover, .ld-gp-menu a:focus-visible { background: rgba(255, 255, 255, .08); }
.ld-gp-menu a[aria-checked="true"] { color: #0ee59b; }
.ld-gp-menu a[aria-checked="true"]::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* Select (mock 1a): a tap selects instead of opening; the bottom bar carries Chevereto's actions (and Download). */
body.ld-selecting #content-listing-tabs .list-item { cursor: pointer; }
.ld-select-bar { position: fixed; left: 50%; bottom: 22px; z-index: 1200; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px);
  padding: 6px 6px 6px 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: #141820; color: #e6e8ea;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55); transform: translateX(-50%); font: 500 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap; overflow-x: auto; }
.ld-select-bar[hidden] { display: none; }
.ld-select-count { margin-right: 8px; color: #fff; font-weight: 700; }
.ld-select-item { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px; background: transparent; color: #e6e8ea; font: 500 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-select-item:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.ld-select-item:disabled { opacity: .4; cursor: default; }
.ld-select-item.is-p { border-color: #0ee59b; background: #0ee59b; color: #04130c; font-weight: 700; }
.ld-select-item.is-p:hover:not(:disabled) { background: #37f0ae; }
.ld-select-item.is-d { color: #ef8a9c; }
.ld-select-item.is-g { border-color: transparent; color: #8b929a; }
.ld-select-short { display: none; }
.ld-select-item kbd { padding: 1px 5px; border-radius: 4px; background: #1f242c; color: #8b929a; box-shadow: none; font: 600 10px ui-monospace, Menlo, monospace; }
.ld-select-item.is-p kbd { background: rgba(4, 19, 12, .18); color: #04130c; }

@media (max-width: 720px) {
  #top-user.ld-gp { margin-top: -48px; gap: 8px 14px; }
  .ld-gp-avatar, .ld-gp-avatar .user-image { width: 96px !important; height: 96px !important; }
  #top-user.ld-gp h1 { font-size: 22px; }
  .ld-gp-actions { width: 100%; }
  .ld-gp-actions .ld-gp-btn { flex: 1; justify-content: center; min-height: 44px; }
  .ld-gp-tabs { width: 100%; }
  .ld-gp-tabs a { flex: 1; justify-content: center; padding-inline: 6px; }
  .ld-gp-tools { width: 100%; }
  .ld-gp-search input { width: 100%; min-height: 44px; }
  .ld-gp-tools .ld-gp-btn, .ld-gp-sort > .ld-gp-btn { min-height: 44px; }
  .ld-select-bar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; padding: 6px 6px 6px 12px; }
  .ld-select-item { min-width: 44px; height: 44px; justify-content: center; padding: 0 8px; border-color: transparent; border-radius: 10px; font-size: 11px; font-weight: 600; }
  .ld-select-label, .ld-select-item kbd { display: none; }
  .ld-select-short { display: inline; }
  .ld-cover-zoom input { width: 110px; }
}

/* Download as zip (the confirm dialog inside Chevereto's modal). */
.ld-zip-dialog { padding: 4px 2px; font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-zip-title { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
.ld-zip-what { margin: 0 0 8px; font-size: 15px; }
.ld-zip-left { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(245, 166, 35, .12); color: #f5b041; font-size: 13px; }
.ld-zip-limit { margin: 0 0 14px; font-size: 12.5px; opacity: .7; }
.ld-zip-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Tiles (owner QA pass, 2 Oct 2026, item 0; mocks 1a, 1b, 1d). Rendered on the server by our tpl_list_item overrides
   (.ld-tile) and laid out here as a CSS grid. Chevereto's columnizer still writes inline sizes onto .list-item; these rules
   win over them, so nothing moves after the first paint. */
/* Chevereto keeps a listing transparent until its columnizer has run (.js .content-listing, then .jsly); ours need no
   columnizer, so they show from the first paint, and so does their empty state. */
.js .ld-gp-listing .content-listing.visible, .js .ld-album .content-listing.visible, .js .content-listing:has(.ld-tile) { opacity: 1 !important; }
#content-listing-tabs .content-listing:has(.ld-tile) { overflow: visible; }
/* Chevereto pulls its listing 10px past the content on each side; ours line up with the tab bar (mock 1a, 1b). */
.ld-gp-listing #content-listing-tabs.tabbed-listing, .ld-album #content-listing-tabs.tabbed-listing { margin-left: 0; margin-right: 0; }
/* Search results (QA 1.4): the same tiles in the same grid, in place of the listing while a search is typed. */
.ld-search-results[hidden], #content-listing-tabs[hidden] { display: none !important; }
.ld-search-none { margin: 30px 0; color: #8b929a; font-size: 13.5px; text-align: center; }
.ld-search-grid { display: grid; grid-template-columns: repeat(var(--ld-cols, 5), minmax(0, 1fr)); gap: 26px 20px; padding: 4px 0 40px; }
.ld-search-grid:has(> .ld-tile--file) { gap: 22px 14px; }
#content-listing-tabs .pad-content-listing:has(> .ld-tile) { position: static !important; display: grid !important; grid-template-columns: repeat(var(--ld-cols, 5), minmax(0, 1fr));
  gap: 26px 20px; width: auto !important; height: auto !important; margin: 0; padding: 4px 0 0; }
#content-listing-tabs .pad-content-listing:has(> .ld-tile--file) { gap: 22px 14px; }
.list-item.ld-tile { position: relative !important; inset: auto !important; display: flex !important; flex-direction: column; gap: 10px; width: auto !important;
  height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; transform: none !important;
  opacity: 1 !important; visibility: visible !important; overflow: visible !important; background: none !important; box-shadow: none !important; color: #e6e8ea; }
.list-item.ld-tile .list-item-image.ld-tile-media { position: relative; display: block; width: auto !important; height: auto !important; min-height: 0 !important;
  max-height: none !important; aspect-ratio: 4 / 3; margin: 0; overflow: visible; border-radius: 10px; background: #141820; }
.ld-tile-pic { position: absolute !important; inset: 0; display: block !important; width: auto !important; height: auto !important; overflow: hidden;
  border-radius: 10px; background: #141820 !important; }
.ld-tile-pic img { position: absolute !important; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important;
  max-height: none !important; margin: 0 !important; object-fit: cover; }
.ld-tile-pic.--bodyEmpty::after { content: ""; position: absolute; inset: 0; margin: auto; width: 34px; height: 34px; opacity: .35;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6e8ea' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 16 5-5 4 4 3-3 6 6'/%3E%3C/svg%3E"); }
/* An album with sub-albums: two sheets peek out behind the cover (mock 1a). */
.ld-tile-media:has(> .ld-tile-stack) { box-shadow: 5px -5px 0 -1px #262b33, 10px -10px 0 -3px #181c22; }
.ld-tile-stack { display: none; }
.ld-tile-chip { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(7, 8, 11, .72); color: #e6e8ea; font: 500 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; }
/* Chevereto's hover tools, privacy icon and share go (quiet tiles); they stay in the page for its selection scripts. */
.ld-tile .list-item-image-tools, .ld-tile .list-item-privacy, .ld-tile .list-item-share { display: none !important; }
.ld-tile .list-item-duration { display: flex !important; top: auto !important; bottom: 10px; left: 10px; padding: 3px 7px; border-radius: 999px;
  background: rgba(7, 8, 11, .6); font-size: 11px; }
.ld-tile-desc.list-item-desc { position: static !important; display: block !important; height: auto !important; margin: 0; padding: 0 !important;
  background: none !important; opacity: 1 !important; transform: none !important; }
.ld-tile-name.list-item-desc-title-link { display: block; overflow: hidden; color: #fff !important; font: 700 14.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-overflow: ellipsis; white-space: nowrap; text-decoration: none; text-shadow: none; }
.ld-tile--file .ld-tile-name.list-item-desc-title-link { font-size: 13.5px; font-weight: 600; }
.ld-tile-meta { margin-top: 3px; color: #8b929a; font-size: 12px; }
a.ld-tile-path { display: flex; align-items: center; gap: 5px; margin-top: 2px; min-width: 0; color: #8b929a !important; font-size: 12px; text-decoration: none; }
a.ld-tile-path:hover { color: #0ee59b !important; }
a.ld-tile-path .ld-ico { width: 12px; height: 12px; }
a.ld-tile-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The ♡ count on a file (Chevereto's like button stays the thing pressed; its font icons are hidden behind our SVG). */
.ld-tile-likes { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 21px;
  border-radius: 999px; background: rgba(7, 8, 11, .6); color: #e6e8ea; font-size: 11px; line-height: 1.3; }
.ld-tile-likes::before { content: ""; position: absolute; left: 7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='none' stroke='%23e6e8ea' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ld-tile[data-liked="1"] .ld-tile-likes::before, .ld-tile.liked .ld-tile-likes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='%230ee59b'/%3E%3C/svg%3E"); }
.ld-tile-likes .list-item-like { position: absolute !important; inset: 0; display: block !important; margin: 0 !important; padding: 0 !important; border-radius: 999px;
  background: none !important; cursor: pointer; }
.ld-tile-likes .list-item-like .btn-icon { display: none !important; }
/* Select (mock 1a): a check circle on each tile, a green outline on what's chosen. Albums: top right; files: top left. */
.ld-tile-check { position: absolute; top: 10px; right: 10px; z-index: 3; display: none; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid #fff;
  border-radius: 50%; background: rgba(7, 8, 11, .35); }
.ld-tile--file .ld-tile-check { right: auto; left: 10px; }
body.ld-selecting .ld-tile-check { display: block; }
/* The files' Select is for the files (owner, 3 Oct 2026): sub-albums show no circle then; they have their own Select once
   Show all is open (LD.album.subsSelect), which shows theirs. */
body.ld-selecting .ld-subs .ld-tile-check { display: none; }
.ld-subs.is-selecting .ld-tile-check { display: block; }
.ld-subs.is-selecting .ld-sub-more, .ld-subs.is-selecting .ld-sub-create { pointer-events: none; opacity: .45; }
/* The narrowest phones: with Show all open the head holds Select, Show less and New sub-album; the first and last keep
   just their icons (their names stay in title and aria-label), so nothing runs off the screen. */
@media (max-width: 400px) { .ld-subs-select > span, .ld-subs-new > span { display: none; } }
.ld-tile.selected .ld-tile-check { background: #0ee59b; }
.ld-tile.selected .ld-tile-check::after { content: ""; position: absolute; left: 5px; top: 4px; width: 8px; height: 4px; border: solid #04130c; border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg); }
/* Chevereto shrinks a selected tile's picture to half and greys its box; ours keep the picture and show the outline. */
.ld-tile .ld-tile-pic, .ld-tile.selected .ld-tile-pic, .ld-tile.ui-selecting .ld-tile-pic { transform: none !important; }
/* Selected (owner, 2 Oct 2026, M5): one ring on the picture itself, the same rounded rectangle (an outline follows its
 * border-radius), never a square around a rounded picture and no band between them. */
.ld-tile.selected .ld-tile-media, .ld-tile.ui-selecting .ld-tile-media { outline: 3px solid #0ee59b; outline-offset: 2px; }
/* Chevereto's .list-item-image has contain: content, whose paint containment would clip that ring; and Peafowl rounds the
 * selected picture itself by .5em (32px here) on its own layer, so it no longer matched the tile's corners. */
.ld-tile .list-item-image.ld-tile-media { contain: layout style; }
.ld-tile.selected .ld-tile-pic img, .ld-tile.ui-selecting .ld-tile-pic img { border-radius: 0 !important; transform: none !important; }
body.ld-selecting .ld-tile { cursor: pointer; }
body.ld-selecting .ld-tile-chip { left: 10px; }
/* The owner's "+ New album" tile, last in the albums grid (mock 1a). */
.ld-tile-new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4 / 3; padding: 0;
  border: 1.5px dashed rgba(255, 255, 255, .16); border-radius: 10px; background: transparent; color: #8b929a; cursor: pointer;
  font: 400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-tile-new:hover, .ld-tile-new:focus-visible { border-color: #0ee59b; color: #0ee59b; }
.ld-tile-new .ld-ico { width: 22px; height: 22px; }
/* 1d · Phones: square albums; files edge to edge, picture only. How many to a row is Chevereto's Listings setting for the
   device (--ld-cols, printed in the head by the module's hook). */
@media (max-width: 720px) {
  #content-listing-tabs .pad-content-listing:has(> .ld-tile--album) { gap: 16px 10px; }
  .list-item.ld-tile--album .list-item-image.ld-tile-media, .ld-tile-new { aspect-ratio: 1; }
  .ld-tile--album .ld-tile-chip { display: none; }
  .ld-tile--album .ld-tile-check { width: 24px; height: 24px; top: 8px; right: 8px; }
  .ld-tile--album .ld-tile-name.list-item-desc-title-link { font-size: 13.5px; }
  .ld-tile--album .ld-tile-meta { margin-top: 2px; font-size: 11.5px; }
  #content-listing-tabs .pad-content-listing:has(> .ld-tile--file) { gap: 3px; }
  .ld-gp-listing #content-listing-tabs.tabbed-listing:has(.ld-tile--file) { margin-left: -10px; margin-right: -10px; }
  /* Phones (owner, 2 Oct 2026; 1c): Stream is full width minus 16px gutters (the page's own 10px plus 6px). */
  :is(.ld-album, .ld-explore).is-stream #content-listing-tabs.tabbed-listing { margin-left: 6px; margin-right: 6px; }
  .ld-tile--file.list-item { gap: 0; }
  .list-item.ld-tile--file .list-item-image.ld-tile-media { aspect-ratio: 1; border-radius: 0; }
  .ld-tile--file .ld-tile-pic { border-radius: 0; }
  .ld-tile--file .ld-tile-desc, .ld-tile--file .ld-tile-likes { display: none !important; }
  .ld-tile--file .ld-tile-check { left: auto; right: 6px; top: 6px; }
  /* Square tiles 3px apart: the ring goes inside, drawn above the picture (an inset outline would sit under it). */
  .ld-tile--file.selected .ld-tile-media, .ld-tile--file.ui-selecting .ld-tile-media { outline: none; }
  .ld-tile--file.selected .ld-tile-media::after, .ld-tile--file.ui-selecting .ld-tile-media::after { content: ""; position: absolute; inset: 0; z-index: 2;
    border: 3px solid #0ee59b; border-radius: inherit; pointer-events: none; }
}
/* The album tree's sheet on phones (a browse panel, not a menu: menus use LD.sheet). */
.ld-sheet-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, .5); }

/* 1d · Profile on a phone. */
@media (max-width: 720px) {
  .ld-cover, #background-cover.ld-cover, #background-cover.ld-cover.no-background { height: 150px; }
  /* Chevereto's `.phone #background-cover:not(.no-background) { height: 20vh; min-height: 150px }` outranks the rule above
     on real phones (169px at 844px), and the cover adjust's phone guide is drawn for 390 x 150 (owner, 3 Oct 2026). */
  body #background-cover.ld-cover:not(.ld-cover-none) { height: 150px; min-height: 0; max-height: none; }
  .ld-cover-tools { top: 10px; inset-inline-end: 10px; }
  .ld-cover-tools .ld-gp-btn.is-glass { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .ld-cover-tools .ld-gp-btn.is-glass > span, .ld-cover-tools .ld-gp-btn.is-glass > .ld-ico:last-child:not(:first-child) { display: none; }
  #top-user.ld-gp { flex-wrap: wrap; align-items: flex-end; }
  .ld-gp-id { flex: 1 1 0; min-width: 0; }
  .ld-gp-meta .ld-profile-chip { order: 9; }
  .ld-gp-bar.is-sticky { position: sticky; top: var(--ld-top, 50px); z-index: 450; margin-left: -10px; margin-right: -10px; padding: 0 10px;
    background: var(--ld-bg, #0b0d13); }
  .ld-gp-tools { flex-wrap: nowrap; }
  .ld-gp-search { flex: 1 1 auto; min-width: 0; }
  /* Sort (owner, 2 Oct 2026, M4): one icon, the current sort, the chevron, as tall as Search and Select. */
  .ld-gp-sort > .ld-gp-btn { width: auto; max-width: 150px; gap: 6px; padding: 0 10px; }
  .ld-gp-sort > .ld-gp-btn > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
  /* The owner's album toolbar fits a phone (owner, 2 Oct 2026: the avatar sheet was half off-screen because Arrange pushed
     the row 21px past a 390px screen, widening the page): Arrange is its icon (the name stays for screen readers) and the
     sort's label gives way first. */
  .ld-gp-tools > .ld-gp-sort { min-width: 0; }
  .ld-gp-sort > .ld-gp-btn { max-width: 100%; }
  .ld-gp-tools > [data-ld-arrange] { width: 44px; padding: 0; justify-content: center; flex: none; }
  .ld-gp-tools > [data-ld-arrange] > .ld-ico { width: 20px; height: 20px; stroke-width: 3.4; } /* the grip alone, legible */
  .ld-gp-tools > [data-ld-arrange] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 1b · The album page (section 2): the tree on the left, the album on the right. */
.ld-album { margin-top: 18px; }
.ld-album.has-tree { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.ld-album.has-tree.tree-collapsed { grid-template-columns: minmax(0, 1fr); }
.ld-album.tree-collapsed .ld-tree { display: none; }
.ld-album-main { min-width: 0; }
.ld-tree { position: sticky; top: calc(var(--ld-top, 50px) + 12px); max-height: calc(100vh - var(--ld-top, 50px) - 24px); overflow: auto;
  padding: 12px; border: 1px solid rgba(127, 127, 127, .2); border-radius: 12px; font: 400 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ld-tree-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: inherit; font-weight: 600; text-decoration: none; }
.ld-tree-owner .user-image { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: 30px; line-height: 30px; }
.ld-tree-collapse { display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .7; cursor: pointer; }
.ld-tree-collapse:hover { opacity: 1; background: rgba(127, 127, 127, .15); }
.ld-tree-search { position: relative; display: flex; align-items: center; margin: 0 0 8px; }
.ld-tree-search .ld-ico { position: absolute; left: 10px; opacity: .6; pointer-events: none; }
.ld-tree-search input { width: 100%; min-height: 36px; padding: 6px 10px 6px 32px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 9px;
  background: rgba(127, 127, 127, .08); color: inherit; font-size: 13px; }
.ld-tree-back { display: flex; align-items: center; gap: 6px; padding: 6px 4px; color: inherit; opacity: .75; text-decoration: none; }
.ld-tree-back:hover { opacity: 1; }
.ld-tree-label { display: flex; justify-content: space-between; margin: 10px 4px 6px; font: 700 10.5px ui-monospace, Menlo, monospace; letter-spacing: .08em;
  text-transform: uppercase; opacity: .6; }
.ld-tree-label span:last-child { font-weight: 400; letter-spacing: 0; text-transform: none; font-family: inherit; }
.ld-tree-list { margin: 0; padding: 0; list-style: none; }
.ld-tree-node { display: flex; align-items: center; padding-left: calc(var(--depth, 0) * 16px); border-radius: 8px; }
.ld-tree-toggle { display: inline-flex; flex: none; width: 22px; height: 22px; padding: 3px; border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; }
.ld-tree-toggle[aria-expanded="true"] .ld-ico { transform: rotate(90deg); }
.ld-tree-toggle .ld-ico { width: 14px; height: 14px; transition: transform .15s; }
.ld-tree-toggle.is-leaf { cursor: default; }
.ld-tree-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.ld-tree-link:hover, .ld-tree-node.is-active .ld-tree-link { background: rgba(127, 127, 127, .14); }
.ld-tree-node.is-current .ld-tree-link { background: rgba(14, 229, 155, .12); color: #0ee59b; }
.ld-tree-link .ld-ico { width: 15px; height: 15px; opacity: .7; }
.ld-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-tree-name mark { background: none; color: #0ee59b; font-weight: 700; }
.ld-tree-in { overflow: hidden; flex: 1; min-width: 0; font-size: 11.5px; opacity: .55; text-overflow: ellipsis; white-space: nowrap; }
.ld-tree-count { margin-left: auto; padding-left: 6px; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }
.ld-tree-empty { padding: 8px 4px; font-size: 13px; }
.ld-tree-empty p { margin: 0 0 8px; opacity: .75; }
.ld-tree-new { display: flex; width: 100%; align-items: center; gap: 8px; margin-top: 10px; padding: 8px; border: 0; border-radius: 8px; background: none;
  color: inherit; opacity: .75; cursor: pointer; font: inherit; }
.ld-tree-new:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.ld-tree-open { position: fixed; left: 16px; bottom: 16px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; background: #12151b; color: #e8ebef; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font: 700 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-tree-open[hidden] { display: none; }
.ld-album:not(.tree-collapsed) .ld-tree-open { display: none; }
.ld-gp-btn.is-outline { border-color: rgba(14, 229, 155, .45); color: #0ee59b; }

.ld-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; font-size: 13px; opacity: .85; }
.ld-crumbs a { color: inherit; opacity: .75; text-decoration: none; }
.ld-crumbs a:hover { opacity: 1; text-decoration: underline; }
.ld-crumb-sep { opacity: .45; }
/* The name has its line to itself, whole, however long; the stats line under it carries the actions at its end (owner,
 * 2 Oct 2026: "the album title uninterrupted"). */
.ld-album-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.ld-album-head > .ld-album-titles { grid-column: 1 / -1; grid-row: 1; }
.ld-album-head > .ld-album-meta { grid-column: 1; grid-row: 2; margin: 0; }
.ld-album-head > .ld-album-actions { grid-column: 2; grid-row: 2; justify-content: flex-end; }
.ld-album-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ld-album-title { margin: 0; font: 600 28px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-wrap: anywhere; text-wrap: balance; }
/* A long name stays whole and steps down a size (owner, 2 Oct 2026; names are at most 100 characters). */
.ld-album-title.is-long { font-size: 24px; }
.ld-album-title.is-longer { font-size: 21px; }
.ld-album-title a { color: inherit; text-decoration: none; }
.ld-album-title { order: 0 !important; }
.ld-album-chip { position: static; order: 1; pointer-events: auto; }
.ld-album-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ld-album-actions .btn-like .btn { margin: 0; }
.ld-album-more .pop-box { min-width: 220px; }
.ld-album-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 12px; font-size: 13px; opacity: .7; }
.ld-album-meta > span + span::before { content: "·"; margin-right: 14px; opacity: .7; }
.ld-album-cta:empty { display: none; }
.ld-album-desc { margin: 0 0 16px; max-width: 760px; font-size: 14px; line-height: 1.55; opacity: .9; }
/* In the album's toolbar row: the description on the left, the tools at the end of its line (owner, 2 Oct 2026). */
.ld-album-bar { align-items: center; }
.ld-album-bar > .ld-album-desc { flex: 1 1 280px; margin: 0; }
.ld-album-bar > .ld-gp-tools { margin-left: auto; }

.ld-subs { margin: 6px 0 18px; }
.ld-subs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ld-subs-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #fff; font: 700 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-subs-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ld-subs-all { display: none; min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.ld-subs-new { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent;
  color: #0ee59b; font: 600 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-subs-new:hover { background: rgba(14, 229, 155, .08); }
.ld-subs-new .ld-ico { width: 14px; height: 14px; }
/* Sub-album tiles: our album tiles, small (mock 1b: 112px pictures, 13px names, no privacy chip). */
/* Sub-album cards are the phone's size everywhere (owner, 2 Oct 2026): at least 150px wide, a 112px picture, and the row
 * fills the width edge to edge with as many as fit, tree open or closed (in the row and in Show all; head.php places
 * "+N more" for the row's own width). */
.ld-subs { container: ldsubs / inline-size; }
.ld-subs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
.ld-subs-row > .list-item.ld-tile { gap: 8px; cursor: pointer; }
.ld-subs-row > .list-item.ld-tile .list-item-image.ld-tile-media { aspect-ratio: auto; height: 112px !important; border-radius: 9px; }
.ld-subs-row .ld-tile-pic { border-radius: 9px; }
.ld-subs-row .ld-tile-chip { display: none; }
.ld-subs-row .ld-tile-name.list-item-desc-title-link { font-size: 13px; font-weight: 600; cursor: pointer; }
.ld-subs-row .ld-tile-meta { margin-top: 2px; font-size: 11.5px; }
.ld-subs-row > .ld-tile:hover .ld-tile-media { outline: 2px solid #0ee59b; outline-offset: 2px; }
.ld-sub-more { display: none; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.ld-sub-mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 112px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 9px; background: #11141a; }
.ld-sub-mosaic > span { background: #141820 center / cover; opacity: .45; }
.ld-sub-mosaic b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(7, 8, 11, .45); color: #fff; font-size: 20px; }
.ld-sub-more:hover .ld-sub-mosaic { outline: 2px solid #0ee59b; outline-offset: 2px; }
.ld-sub-more-name { color: #fff; font-size: 13px; font-weight: 600; }
.ld-sub-more-meta { margin-top: -6px; color: #8b929a; font-size: 11.5px; }
.ld-sub-more b > span, .ld-sub-more-name > span { display: none; }
.ld-subs.is-all .ld-subs-all { display: inline-flex; }
/* Tiles past the last full row, while more sub-albums are still to load (gallery.js subs: whole rows only). */
.ld-subs.is-all .ld-subs-row > .ld-tile.is-held { display: none !important; }
/* Phones: one row that scrolls sideways; Show all makes it two columns. */
@media (max-width: 767px) {
  .ld-subs:not(.is-all) .ld-subs-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  /* Every card the same size, all on the screen (owner, 2 Oct 2026): 150px in the row however long its name; in Show all
     two equal columns that never grow past the screen; 4:3 pictures in both; long names wrap, never stretch a card. */
  .ld-subs:not(.is-all) .ld-subs-row > .ld-tile { flex: 0 0 150px; width: 150px; min-width: 0; max-width: 150px; scroll-snap-align: start; }
  .ld-subs.is-all .ld-subs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-subs-row > .ld-tile { min-width: 0; }
  .ld-subs-row > .list-item.ld-tile .list-item-image.ld-tile-media { height: auto !important; aspect-ratio: 4 / 3; }
  .ld-subs-row .ld-tile-name.list-item-desc-title-link { white-space: normal; overflow-wrap: anywhere; }
  .ld-subs .ld-sub-more { display: none !important; }
  .ld-subs-row > .ld-tile { display: flex !important; }
  .ld-subs:has(.ld-subs-row > .ld-tile:nth-child(3)) .ld-subs-all { display: inline-flex; }
}
.ld-subs-none { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 6px 0 18px; padding: 10px 14px; border: 1.5px dashed rgba(127, 127, 127, .4);
  border-radius: 12px; font-size: 13px; }
.ld-subs-none > span { flex: 1 1 240px; opacity: .8; }
.ld-subs-none .ld-gp-btn { margin-left: auto; }

.ld-album-bar { margin-top: 4px; }
.ld-view-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 10px; }
.ld-view-switch[hidden] { display: none; }
.ld-view-switch button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 7px; background: none;
  color: inherit; opacity: .7; font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-view-switch button[aria-pressed="true"] { background: #e8ebef; color: #0b0d13; opacity: 1; }
/* Chevereto's own pagination and Load more give way to our "Load 20 more" (rendered by the album view). */
.ld-album .content-listing-pagination, .ld-album .content-listing .content-listing-more:not(.ld-more),
.ld-gp-listing .content-listing-pagination, .ld-gp-listing .content-listing .content-listing-more:not(.ld-more),
.ld-gp-listing .content-listing-loading, .ld-album .content-listing-loading { display: none !important; }
.ld-more { display: flex; justify-content: center; margin: 18px 0 30px; }
.ld-more .ld-gp-btn { min-width: 180px; justify-content: center; min-height: 42px; }

/* Stream (mock 1b): one file per row, up to 1000px, the title (and "n / N") above, the picture at its own shape, the
   description, ♡, views and "Open ›" below. The same server markup as Grid; only these rules differ. */
.ld-stream-foot, .ld-stream-n { display: none; }
.ld-album #content-listing-tabs .content-listing[data-list="images"] .pad-content-listing { counter-reset: ld-file; }
.ld-album #content-listing-tabs .ld-tile--file { counter-increment: ld-file; }
:is(.ld-album, .ld-explore).is-stream #content-listing-tabs .pad-content-listing:has(> .ld-tile--file) { display: block !important; }
:is(.ld-album, .ld-explore).is-stream #content-listing-tabs .list-item.ld-tile--file { max-width: 1160px; margin: 0 auto 34px !important; gap: 0; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-tile-desc.list-item-desc { order: -1; display: flex !important; align-items: baseline; gap: 12px; padding: 0 0 10px !important; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-tile-name.list-item-desc-title-link { flex: 1; min-width: 0; font: 500 18px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
:is(.ld-album, .ld-explore).is-stream .ld-tile-desc .ld-stream-n { display: inline; flex: none; color: #8b929a; font-size: 12px; }
:is(.ld-album, .ld-explore).is-stream .ld-stream-n::after { content: counter(ld-file) " / " var(--ld-total, ""); }
:is(.ld-album, .ld-explore).is-stream .list-item.ld-tile--file .list-item-image.ld-tile-media { aspect-ratio: var(--ld-ratio, 4 / 3); border-radius: 10px; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-tile-pic img { object-fit: contain; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-tile-likes { display: none; }
:is(.ld-album, .ld-explore).is-stream .ld-stream-foot { display: block; padding: 12px 0 0; }
.ld-stream-desc { margin: 0 0 10px; color: #cfd4d9; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.ld-stream-desc:empty { display: none; }
.ld-album[data-ld-can-edit].is-stream .ld-stream-desc:empty { display: block; color: #8b929a; font-style: italic; }
.ld-album[data-ld-can-edit].is-stream .ld-stream-desc:empty::before { content: "Add a description"; }
.ld-stream-stats { display: flex; align-items: center; gap: 14px; color: #8b929a; font-size: 12px; }
/* Stream's ♡ is a real like (owner, 2 Oct 2026): Chevereto's own data-action="like" (it posts, and sends visitors to sign
   in); the heart fills in the like colour once liked. */
.ld-stream-likes { display: inline-flex; align-items: center; gap: 5px; margin: -6px -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none;
  color: inherit; font: inherit; cursor: pointer; }
.ld-stream-likes:hover { background: rgba(255, 255, 255, .06); color: #e8ebef; }
/* A little bigger than the stats beside it (owner, 2 Oct 2026). */
.ld-stream-stats .ld-stream-likes { gap: 6px; font-size: 14px; font-weight: 600; min-height: 36px; }
.ld-stream-stats .ld-stream-likes::before { width: 19px !important; height: 19px !important; }
.ld-tile[data-liked="1"] .ld-stream-likes { color: #0ee59b; }
.ld-tile[data-liked="1"] .ld-stream-likes::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='%230ee59b'/%3E%3C/svg%3E") !important; }
.ld-stream-likes::before { content: ""; width: 13px; height: 13px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='none' stroke='%238b929a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ld-stream-stats .ld-stream-n { display: none; }
.ld-stream-open { margin-left: auto; color: #0ee59b !important; font-weight: 600; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
img.ld-fade { animation: ld-fade-in .45s ease; }
@keyframes ld-fade-in { from { opacity: .55; } to { opacity: 1; } }

/* 1c · The album on a phone (and narrow screens): the tree is a bottom sheet opened by "Browse <album>". */
@media (max-width: 1023px) {
  .ld-album.has-tree { display: block; }
  .ld-album .ld-tree { display: none; }
  .ld-album .ld-tree-open, .ld-album:not(.tree-collapsed) .ld-tree-open { display: inline-flex; left: 50%; transform: translateX(-50%); }
  .ld-album.tree-sheet .ld-tree-open { display: none; }
  .ld-album.tree-sheet .ld-tree { display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 1301; max-height: 80vh;
    border-radius: 16px 16px 0 0; background: #12151b; color: #e8ebef; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.ld-selecting .ld-tree-open { display: none; }
}
@media (max-width: 720px) {
  .ld-album-title { font-size: 22px; line-height: 1.25; }
  .ld-album-title.is-long { font-size: 20px; }
  .ld-album-title.is-longer { font-size: 18px; }
  .ld-album-actions { width: 100%; }
  .ld-album-actions > .ld-gp-btn { flex: 1; justify-content: center; min-height: 44px; }
  .ld-view-switch button span { display: none; }
  .ld-view-switch button { min-height: 38px; }
  :is(.ld-album, .ld-explore).is-stream .list-item.ld-tile--file .list-item-image.ld-tile-media, :is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-tile-pic { border-radius: 0; }
  :is(.ld-album, .ld-explore).is-stream .ld-stream-stats .ld-stream-n { display: inline; }
  :is(.ld-album, .ld-explore).is-stream .ld-tile-desc .ld-stream-n { display: none; }
  :is(.ld-album, .ld-explore).is-stream #content-listing-tabs .list-item.ld-tile--file { margin-bottom: 26px !important; }
  :is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-tile-desc.list-item-desc, :is(.ld-album, .ld-explore).is-stream .ld-stream-foot { padding-left: 2px !important; padding-right: 2px !important; }
}
.ld-privacy-note { margin: 6px 0 0; font-size: 12.5px; opacity: .75; }
.ld-privacy-apply { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(245, 166, 35, .1);
  font-size: 12.5px; line-height: 1.45; cursor: pointer; }
.ld-privacy-apply[hidden] { display: none; }
.ld-privacy-apply input { margin-top: 2px; accent-color: #0ee59b; }

/* Album pickers in Chevereto's dialogs: a tree of radio buttons over its own list. */
select.ld-pick-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.ld-pick { border: 1px solid rgba(127, 127, 127, .3); border-radius: 10px; overflow: hidden; }
.ld-pick-filter { display: block; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-bottom: 1px solid rgba(127, 127, 127, .25);
  background: rgba(127, 127, 127, .06); color: inherit; font-size: 13px; }
.ld-pick-list { max-height: 260px; margin: 0; padding: 4px; overflow: auto; list-style: none; }
.ld-pick-list li { padding-left: calc(var(--depth, 0) * 16px); }
.ld-pick-list li[hidden] { display: none; }
/* Searching (owner, 2 Oct 2026): the matches, best first, flat, each with its place in small type. */
.ld-pick-list li.is-context .ld-pick-row { opacity: .5; } /* a parent shown only as the way to a match */
.ld-pick-list li.is-best .ld-pick-row { box-shadow: inset 2px 0 0 #0ee59b; } /* Enter takes this one */
#fullscreen-modal .ld-pick label.ld-pick-row, .ld-pick label.ld-pick-row { display: flex !important; align-items: center; gap: 8px; width: auto; margin: 0 !important;
  padding: 7px 8px; border-radius: 7px; font-size: 13.5px; font-weight: 400; cursor: pointer; }
#fullscreen-modal .ld-pick-name { font-weight: 600; }
.ld-pick-row:hover { background: rgba(127, 127, 127, .12); }
.ld-pick-row:has(input:checked) { background: rgba(14, 229, 155, .12); }
.ld-pick-row.is-disabled { opacity: .45; cursor: not-allowed; }
.ld-pick-row input { margin: 0; accent-color: #0ee59b; }
.ld-pick-name { overflow: hidden; flex: 1; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.ld-pick-privacy, .ld-pick-here { flex: none; font-size: 11.5px; opacity: .6; }
.ld-pick-here { padding: 1px 6px; border-radius: 6px; background: rgba(14, 229, 155, .15); color: #0ee59b; opacity: 1; }
.ld-cover-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; }
.ld-cover-strip button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: rgba(127, 127, 127, .12);
  overflow: hidden; cursor: pointer; }
.ld-cover-strip button[aria-checked="true"] { border-color: #0ee59b; }
.ld-cover-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Edit in place (Stream, owner). */
.ld-album[data-ld-can-edit].is-stream .ld-tile--file .list-item-desc-title-link, .ld-album[data-ld-can-edit].is-stream .ld-stream-desc { cursor: text; border-radius: 6px; }
.ld-album[data-ld-can-edit].is-stream .ld-tile--file .list-item-desc-title-link:hover, .ld-album[data-ld-can-edit].is-stream .ld-stream-desc:hover { background: rgba(127, 127, 127, .1); }
.ld-stream-desc.is-empty { font-style: italic; opacity: .5; }
.ld-editing { outline: 2px solid #0ee59b; outline-offset: 3px; background: rgba(14, 229, 155, .06) !important; white-space: pre-wrap; text-decoration: none !important; }
.ld-inplace-done { margin-left: 8px; min-height: 36px; }

/* Custom order: Arrange. */
body.ld-arranging #content-listing-tabs .list-item[data-type="image"] { cursor: grab; touch-action: pan-y; user-select: none; }
body.ld-arranging #content-listing-tabs .list-item[data-type="image"] img { -webkit-user-drag: none; pointer-events: none; }
body.ld-arranging #content-listing-tabs .list-item-image-tools, body.ld-arranging #content-listing-tabs .list-item-desc a { pointer-events: none; }
.list-item.ld-dragging { opacity: .45; }
.list-item.ld-drop-before .list-item-image { box-shadow: inset 4px 0 0 #0ee59b; }
.list-item.ld-drop-after .list-item-image { box-shadow: inset -4px 0 0 #0ee59b; }
.ld-arr { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 6px; }
.ld-arr-btn { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(10, 12, 16, .78); color: #fff; font: 700 18px -apple-system, sans-serif; cursor: pointer; }
.ld-arr-btn:hover { background: #0ee59b; color: #06231a; }
@media (pointer: fine) { .ld-arr { opacity: 0; transition: opacity .15s; } .list-item:hover .ld-arr, .ld-arr:focus-within { opacity: 1; } }
.ld-gp-btn[data-ld-arrange][aria-pressed="true"] { border-color: #0ee59b; color: #0ee59b; }

/* The Randomizer dialog. */
.ld-random-lead { margin: 6px 0 14px; font-size: 13.5px; opacity: .8; }
.ld-random-subs { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 13.5px; cursor: pointer; }
.ld-random-subs input { accent-color: #0ee59b; }
.ld-random-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(127, 127, 127, .08); }
.ld-random-preview img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; object-fit: contain; }

/* 1e · The image page (section 4): the image first, a 360px details pane beside it. */
.ld-iv { display: grid; grid-template-columns: minmax(0, 1fr) 360px; min-height: calc(100vh - var(--ld-top, 50px)); }
.ld-iv.is-wide { grid-template-columns: minmax(0, 1fr); }
.ld-iv.is-wide .ld-iv-pane { display: none; }
.ld-iv-stage { position: relative; display: flex; flex-direction: column; min-width: 0; background: #050608; }
.ld-iv-top { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #e8ebef; }
.ld-iv-top .ld-crumbs { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ld-iv-back { display: none; align-items: center; gap: 6px; min-width: 0; color: inherit; text-decoration: none; font-size: 14px; }
.ld-iv-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-iv-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ld-iv-pos { font-size: 13px; opacity: .7; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ld-iv-pos-short { display: none; }
.ld-iv-tools .ld-gp-btn { min-height: 32px; padding: 5px 10px; font-size: 12.5px; color: #e8ebef; border-color: rgba(255, 255, 255, .18); }
.ld-iv-fit-sep { opacity: .5; }
/* Fit · Large is one toggle again (owner, 3 Oct 2026: two options, so a toggle instead of a selection), as mock 1e's
   "Fit · 100%" / "100% · Fit": the current mode is lit and comes first; each press switches. */
.ld-iv-fit { display: inline-flex; align-items: center; gap: 5px; }
.ld-iv-fit [data-zl] { opacity: .5; }
.ld-iv-fit[data-zoom="fit"] [data-zl="fit"], .ld-iv-fit[data-zoom="large"] [data-zl="large"] { opacity: 1; }
.ld-iv-fit [data-zl="fit"], .ld-iv-fit[data-zoom="large"] [data-zl="large"] { order: 1; }
.ld-iv-fit .ld-iv-fit-sep { order: 2; }
.ld-iv-fit [data-zl="large"], .ld-iv-fit[data-zoom="large"] [data-zl="fit"] { order: 3; }
/* Fit (owner QA pass, item 4.2): the picture sits wholly inside the viewing area at any size - the screen less the site
   bar, this bar and the filmstrip (none without an album); the pane is the grid's other column. The box has a fixed
   height (no flex growth), so a tall file can never stretch it. */
.ld-iv-media { position: relative; flex: none; display: flex; min-height: 320px; height: calc(100vh - var(--ld-top, 50px) - 52px - 84px); }
.ld-iv-stage:not(:has(.ld-iv-strip)) .ld-iv-media { height: calc(100vh - var(--ld-top, 50px) - 52px); }
.ld-iv #image-viewer { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; width: 100%; height: 100% !important;
  min-height: 0; max-height: none; margin: 0; padding: 0; background: transparent; overflow: hidden; }
.ld-iv #image-viewer > img.media, .ld-iv #image-viewer > video, .ld-iv #image-viewer .media { max-width: 100% !important; max-height: 100% !important; width: auto !important;
  height: auto !important; object-fit: contain; margin: auto; }
/* Fit | Large (owner, 3 Oct 2026; LD.zoomSize sets the picture's box). Until that runs: Fit from the file's size (--ld-w,
 * --ld-h, printed on the picture): a box no larger than the stage or the file, the picture contained in it. Large is centred on any axis it doesn't fill (auto margins in a scrolling
 * flex box: centred when smaller, scrollable from its true edge when larger), dragged to look around, no scrollbars. */
.ld-iv #image-viewer > img.media { width: min(100%, var(--ld-w, 100%)) !important; height: min(100%, var(--ld-h, 100%)) !important; object-fit: contain; }
.ld-iv.is-actual #image-viewer, .ld-lv[data-ld-zoom] .viewer-content { scrollbar-width: none; }
.ld-iv.is-actual #image-viewer::-webkit-scrollbar, .ld-lv[data-ld-zoom] .viewer-content::-webkit-scrollbar { display: none; }
.ld-iv.is-actual #image-viewer { display: flex; align-items: flex-start; justify-content: flex-start; overflow: auto; cursor: grab; }
.ld-iv.is-actual #image-viewer.is-panning { cursor: grabbing; }
.ld-iv.is-actual #image-viewer:not(.can-pan) { cursor: default; }
.ld-iv.is-actual #image-viewer > img.media { flex: none; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; margin: auto; }
.ld-iv-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 3; } /* above Chevereto's #image-viewer .media (z-index 1), or the picture takes the clicks (owner, 2 Oct 2026) */
.ld-iv-arrows a { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(10, 12, 16, .7); color: #fff !important; pointer-events: auto; text-decoration: none; }
.ld-iv-arrows a.left-0 { left: 16px; }
.ld-iv-arrows a.right-0 { right: 16px; }
.ld-iv-arrows a:hover { background: #0ee59b; color: #06231a !important; }
.ld-iv-strip { padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, .07); background: #050608; }
.ld-iv-strip .panel-thumb-list { display: flex; gap: 6px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.ld-iv-strip .panel-thumb-list li { flex: none; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; outline: 2px solid transparent; outline-offset: -2px; box-shadow: none !important; }
.ld-iv-strip .panel-thumb-list li.current { outline-color: #0ee59b; }
/* Centred when the thumbnails don't fill the strip (owner, 2 Oct 2026); auto margins keep it scrollable from its start
 * when they do (justify-content: center would cut off the first ones). */
.ld-iv-strip .panel-thumb-list > li:first-child { margin-inline-start: auto; }
.ld-iv-strip .panel-thumb-list > li:last-child { margin-inline-end: auto; }
.ld-iv-strip .panel-thumb-list li a, .ld-iv-strip .panel-thumb-list img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-iv-strip .panel-thumb-list li.more-link a { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); color: #e8ebef; }
.ld-iv-pane { position: sticky; top: var(--ld-top, 50px); align-self: start; max-height: calc(100vh - var(--ld-top, 50px)); overflow: auto; padding: 18px 20px 28px;
  border-left: 1px solid rgba(127, 127, 127, .2); }
.ld-iv-owner { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ld-iv-avatar .user-image { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; font-size: 44px; line-height: 44px; }
.ld-iv-owner-text { display: flex; flex-direction: column; min-width: 0; }
.ld-iv-owner-text a { color: inherit; font-weight: 600; text-decoration: none; }
.ld-iv-owner-age { font-size: 12px; opacity: .6; }
.ld-iv-title { margin: 0 0 4px !important; font: 600 22px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; float: none !important; }
.ld-iv-title a { color: inherit; }
.ld-iv-title.is-untitled { opacity: .7; }
.ld-iv-file { margin-bottom: 8px; font-size: 12.5px; opacity: .55; word-break: break-all; }
.ld-iv-path { display: none; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; font-size: 13px; }
.ld-iv-path a, .ld-iv-chip-album a { color: inherit; text-decoration: none; }
.ld-iv-path a:hover, .ld-iv-chip-album a:hover { text-decoration: underline; }
.ld-iv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 16px; }
.ld-iv-actions .btn-like { display: inline-flex; }
.ld-iv-actions .btn-like .ld-gp-btn { gap: 6px; }
.ld-iv-actions .btn-like[data-liked="1"] .btn-unliked, .ld-iv-actions .btn-like[data-liked="0"] .btn-liked { display: none; }
.ld-iv-actions .btn-like[data-liked="1"] .btn-liked { color: #ff6b81; border-color: rgba(255, 107, 129, .5); }
.ld-iv-more .pop-box { min-width: 230px; }
.ld-iv-more .btn-album-cover[data-cover="1"] .ld-cover-set, .ld-iv-more .btn-album-cover[data-cover="0"] .ld-cover-is { display: none; }
.ld-iv-tabs .content-tabs-container { margin: 0; }
.ld-iv-tabcol { width: 100%; }
.ld-iv-desc { font-size: 14px; line-height: 1.55; white-space: normal; }
.ld-iv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.ld-iv-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; background: rgba(127, 127, 127, .14); color: inherit;
  font-size: 12.5px; text-decoration: none; }
.ld-iv-chip-album { color: #0ee59b; }
.ld-iv-chip .ld-ico { width: 14px; height: 14px; }
.ld-iv .panel-share-input-label .title, .ld-iv .panel-share-input-label .grid-columns { width: 100% !important; float: none !important; }
.ld-iv .tabbed-content-list li span.c5 { width: 40%; }

/* 1f · The image page on a phone (and narrow screens): image, filmstrip, then the details; actions docked at the bottom. */
@media (max-width: 1023px) {
  .ld-iv, .ld-iv.is-wide { display: block; }
  .ld-iv.is-wide .ld-iv-pane { display: block; }
  .ld-iv-top { position: sticky; top: var(--ld-top, 50px); z-index: 40; background: #050608; }
  .ld-iv-back { display: inline-flex; flex: 1; }
  .ld-iv-top .ld-crumbs, .ld-iv-details-btn, .ld-iv-fit { display: none !important; }
  .ld-iv-pos-long { display: none; }
  .ld-iv-pos-short { display: inline; }
  .ld-iv-media { height: auto; min-height: 0; }
  .ld-iv #image-viewer { height: auto !important; min-height: 40vh; max-height: 70vh; }
  .ld-iv #image-viewer > img.media { height: auto !important; max-height: 70vh !important; }
  .ld-iv-arrows { display: none; }
  .ld-iv-pane { position: static; max-height: none; overflow: visible; display: flex; flex-direction: column; border-left: 0; padding: 14px 16px 90px; }
  .ld-iv-title { order: 1; font-size: 20px !important; }
  .ld-iv-path { order: 2; display: flex; }
  .ld-iv-owner { order: 3; margin: 6px 0 12px; }
  .ld-iv-file { display: none; }
  .ld-iv-pane > * { order: 4; }
  .ld-iv-pane > .ld-iv-title { order: 1; } .ld-iv-pane > .ld-iv-path { order: 2; } .ld-iv-pane > .ld-iv-owner { order: 3; }
  .ld-iv-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #0b0d13; border-top: 1px solid rgba(255, 255, 255, .08); }
  .ld-iv-actions .ld-gp-btn, .ld-iv-actions .btn-like .ld-gp-btn { width: 100%; height: 46px; justify-content: center; color: #e8ebef; }
  .ld-iv-actions > .ld-gp-btn > span:not(.btn-icon):not(.btn-text), .ld-iv-actions .ld-iv-more > .ld-gp-btn { font-size: 0; }
  .ld-iv-actions > .ld-gp-btn > .ld-ico { width: 18px; height: 18px; }
  .ld-iv-actions .ld-iv-more { position: static; }
  .ld-iv-actions .ld-iv-more .pop-box { bottom: 60px; top: auto !important; right: 8px; }
  .ld-iv-actions .btn-like, .ld-iv-actions .ld-iv-more { display: block; }
}

/* 2a–2e · Upload: one queue, the page and the panel. Chevereto's own box stays in the page (it does the uploading). */
/* Containment and a transform also hold the box's fixed-position children (Chevereto's phone layout), which overflow alone does not clip. */
body#upload #anywhere-upload, body.ld-up-ready #anywhere-upload { position: absolute !important; left: -10000px !important; top: 0 !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; contain: strict !important; transform: translateX(0) !important; visibility: hidden !important; }
.ld-up-page { padding-top: 20px; padding-bottom: 60px; }
.ld-up-page[hidden] { display: none; }
.ld-up-drop { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1.5px dashed rgba(127, 127, 127, .45); border-radius: 14px; }
.ld-up-drop .ld-ico { width: 34px; height: 34px; color: #0ee59b; flex: none; }
.ld-up-drop a { color: #0ee59b; }
.ld-up-drop small { display: block; margin-top: 4px; font-size: 12px; opacity: .65; }
.ld-up-drop.is-big { flex-direction: column; justify-content: center; min-height: 62vh; text-align: center; }
.ld-up-drop.is-big .ld-ico { width: 64px; height: 64px; }
.ld-up-drop.is-big h2 { margin: 6px 0 4px; font: 500 26px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-up-drop.is-big p { margin: 0; opacity: .8; }
.ld-up-choose { min-height: 46px !important; padding: 10px 26px !important; font-size: 15px !important; }
.ld-up-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ld-up-chips span { padding: 6px 12px; border: 1px solid rgba(127, 127, 127, .35); border-radius: 16px; font-size: 13px; }
body.ld-up-dragging .ld-up-drop { border-color: #0ee59b; background: rgba(14, 229, 155, .06); }
.ld-up-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.ld-up-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ld-up-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.ld-up-head-tools { display: flex; align-items: center; gap: 10px; }
.ld-up-head-tools select { width: auto; min-height: 36px; }
.ld-up-label { font-size: 12.5px; opacity: .7; }
.ld-up-link { border: 0; background: none; color: inherit; opacity: .75; cursor: pointer; font: inherit; padding: 4px; }
.ld-up-link:hover { opacity: 1; color: #0ee59b; }
.ld-up-list { position: relative; }
.ld-up-row { position: absolute; left: 0; right: 0; top: 0; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(127, 127, 127, .22);
  border-radius: 12px; background: rgba(127, 127, 127, .05); will-change: transform; }
.ld-up-row.is-bad, .ld-up-row.is-mute { opacity: .62; }
.ld-up-row.is-sel { border-color: #0ee59b; }
.ld-up-row.is-dragging { z-index: 10; opacity: .9; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.ld-up-dropline { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: #0ee59b; z-index: 9; }
.ld-up-handle { cursor: grab; opacity: .5; touch-action: none; }
.ld-up-handle .ld-ico { width: 16px; height: 16px; }
.ld-up-pos { width: 26px; text-align: right; font-size: 12px; opacity: .55; font-variant-numeric: tabular-nums; }
.ld-up-preview { flex: none; width: 62px; height: 62px; padding: 0; border: 0; border-radius: 8px; background: rgba(127, 127, 127, .14); overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: inherit; }
.ld-up-preview img { width: 100%; height: 100%; object-fit: cover; }
/* A camera thumbnail (EXIF) is stored unrotated: its orientation tag turns it the right way (upload.js exifThumb). */
.ld-up-preview img.is-o2 { transform: scaleX(-1); }
.ld-up-preview img.is-o3 { transform: rotate(180deg); }
.ld-up-preview img.is-o4 { transform: scaleY(-1); }
.ld-up-preview img.is-o5 { transform: rotate(90deg) scaleX(-1); }
.ld-up-preview img.is-o6 { transform: rotate(90deg); }
.ld-up-preview img.is-o7 { transform: rotate(-90deg) scaleX(-1); }
.ld-up-preview img.is-o8 { transform: rotate(-90deg); }
/* The reused file picker (upload.js openPicker): never on screen, whatever the theme does to file inputs. */
.ld-up-picker { position: fixed !important; left: -10000px !important; top: 0 !important; width: 1px !important; height: 1px !important;
    opacity: 0 !important; pointer-events: none !important; }
.ld-up-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* QA 5.4 (mock 2a): the title 600 13.5px, the description 12.5px, the file line 11.5px; the row grows to fit them. */
.ld-up-title, .ld-up-desc { box-sizing: border-box; width: 100%; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #fff;
  font: 600 13.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-up-desc { height: 22px; font-weight: 400; font-size: 12.5px; color: #c3c9d0; }
.ld-up-title:focus, .ld-up-desc:focus { border-color: #0ee59b !important; background: #11141a; }
.ld-up-title:hover, .ld-up-desc:hover, .ld-up-title:focus, .ld-up-desc:focus { border-color: rgba(127, 127, 127, .35); outline: none; }
.ld-up-title:disabled, .ld-up-desc:disabled { opacity: .8; }
.ld-up-meta { margin-top: 1px; padding: 0 6px; overflow: hidden; font-size: 11.5px; opacity: .55; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
a.ld-up-meta { color: #0ee59b; opacity: .9; }
.ld-up-chip { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 12px; font-size: 11.5px; white-space: nowrap;
  background: rgba(127, 127, 127, .14); }
.ld-up-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ld-up-chip.is-ok { color: #0ee59b; background: rgba(14, 229, 155, .1); }
.ld-up-chip.is-bad { color: #ff8a9a; background: rgba(255, 107, 129, .1); }
.ld-up-chip.is-busy { color: #7cc4ff; background: rgba(80, 160, 255, .12); }
.ld-up-chip.is-wait { color: #f5b041; background: rgba(245, 166, 35, .1); }
.ld-up-tools { display: flex; gap: 4px; }
.ld-up-tool { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: none;
  color: inherit; opacity: .6; cursor: pointer; font-size: 15px; }
.ld-up-tool:hover:not(:disabled) { opacity: 1; background: rgba(127, 127, 127, .14); }
.ld-up-tool:disabled { opacity: .2; cursor: default; }
.ld-up-tool .ld-ico { width: 15px; height: 15px; }
.ld-up-sel { margin: 0; accent-color: #0ee59b; }
.ld-up-side { position: sticky; top: calc(var(--ld-top, 50px) + 14px); display: flex; flex-direction: column; gap: 14px; }
.ld-up-limits { padding: 14px; border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.ld-up-limits-head { display: flex; justify-content: space-between; gap: 8px; }
.ld-up-limits-head span:last-child { opacity: .6; font-size: 12px; }
.ld-up-tier { font-weight: 600; }
.ld-up-meter-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ld-up-meter-label .is-full { color: #f5b041; }
.ld-up-bar { position: relative; display: flex; height: 6px; border-radius: 3px; background: rgba(127, 127, 127, .2); overflow: hidden; }
.ld-up-bar-used { background: rgba(160, 166, 175, .7); }
.ld-up-bar-add { background: #0ee59b; }
.ld-up-bar-add.is-full { background: #f5b041; }
.ld-up-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ld-up-field { display: flex; flex-direction: column; gap: 4px; grid-column: 1 / -1; margin: 0; }
.ld-up-field.is-half { grid-column: auto; }
.ld-up-field select, .ld-up-field input, .ld-up-field textarea { width: 100%; }
.ld-up-field .ld-pick-row input { width: auto; flex: none; } /* not the album list's radios: they took the names' room */
.ld-up-check { display: flex; align-items: center; gap: 6px; grid-column: 1 / -1; margin: 0; font-size: 13px; cursor: pointer; }
.ld-up-check input { accent-color: #0ee59b; }
.ld-up-note { margin: 0; font-size: 12px; opacity: .65; grid-column: 1 / -1; }
.ld-up-skip { padding: 12px 14px; border: 1px solid rgba(245, 166, 35, .45); border-radius: 12px; background: rgba(245, 166, 35, .08); color: #f5c87a; font-size: 13px; line-height: 1.5; }
.ld-up-skip p { margin: 0; }
.ld-up-upgrade { display: inline-block; margin-top: 6px; color: #0ee59b; font-weight: 600; text-decoration: none; }
.ld-up-skip.is-compact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 8px 12px; }
.ld-up-skip.is-compact .ld-up-upgrade { margin: 0; }
.ld-up-go { width: 100%; justify-content: center; min-height: 48px !important; font-size: 15px !important; }
.ld-up-go:disabled { opacity: .45; cursor: not-allowed; }
.ld-up-run { display: flex; flex-direction: column; gap: 8px; }
.ld-up-bar.is-run { height: 8px; }
.ld-up-run-line { font-size: 13px; opacity: .85; }
.ld-up-run-btns { display: flex; gap: 8px; }
.ld-up-run-btns .ld-gp-btn { flex: 1; justify-content: center; }
/* A video's preview is its frame with a small mark (owner, 2 Oct 2026). */
.ld-up-preview { position: relative; }
.ld-up-vmark { position: absolute; left: 4px; bottom: 4px; display: inline-flex; padding: 2px 4px; border-radius: 5px; background: rgba(0, 0, 0, .65); color: #fff; line-height: 0; }
.ld-up-vmark svg { width: 14px; height: 14px; }
.ld-up-edit-frame video { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: 8px; background: #000; }
/* The panel's list: the upload page's rows, in normal flow, scrolling inside the panel (owner, 2 Oct 2026). */
.ld-up-panel-list { display: flex; flex-direction: column; gap: 6px; max-height: min(46vh, 420px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.ld-up-panel-list .ld-up-row { position: relative; transform: none !important; }
.ld-up-panel-list .ld-up-handle { display: none; }
.ld-up-done { padding: 12px 14px; border: 1px solid rgba(14, 229, 155, .4); border-radius: 12px; background: rgba(14, 229, 155, .06); font-size: 13.5px; }
.ld-up-done-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.ld-up-done-links a { color: #0ee59b; }
.ld-up-bulk { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid rgba(127, 127, 127, .25); border-radius: 12px; }
.ld-up-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-up-tabs button { padding: 5px 10px; border: 1px solid rgba(127, 127, 127, .3); border-radius: 14px; background: none; color: inherit; font-size: 12.5px; cursor: pointer; }
.ld-up-tabs button[aria-selected="true"] { border-color: #0ee59b; color: #0ee59b; }
.ld-up-bulk-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-up-bulk-acts .ld-gp-btn { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.ld-up-optsum { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid rgba(127, 127, 127, .3); border-radius: 12px; background: none;
  color: inherit; font: 500 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; text-align: left; }
.ld-up-optsum span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-up-optsum strong { color: #0ee59b; }
.ld-up-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1301; max-height: 85vh; overflow: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 16px 16px 0 0; background: #12151b; color: #e8ebef; }
.ld-up-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* Edit file */
.ld-up-edit-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 10px; }
.ld-up-edit-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.ld-up-edit-frame { display: flex; align-items: center; justify-content: center; min-height: 220px; max-height: 50vh; border-radius: 10px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.ld-up-edit-frame canvas { max-width: 100%; max-height: 50vh; }
.ld-up-edit-frame .ld-ico { width: 48px; height: 48px; opacity: .6; }
.ld-up-edit-nav { display: flex; gap: 8px; margin-top: 10px; }
.ld-up-edit-fields { display: flex; flex-direction: column; gap: 10px; }
.ld-up-resize { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-up-danger { color: #ff8a9a !important; margin-left: auto; }
/* The panel (2b, 2e) */
.ld-up-panel-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .45); }
.ld-up-panel { position: fixed; top: calc(var(--ld-top, 50px) + 8px); left: 50%; z-index: 1101; width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto;
  transform: translateX(-50%); padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: #12151b; color: #e8ebef;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 12px; }
.ld-up-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ld-up-panel-head > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.ld-up-panel-links { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ld-up-panel-links a { color: #0ee59b; }
.ld-up-drop.is-panel { padding: 18px 22px; }
.ld-up-drop.is-panel > div { flex: 1; }
.ld-up-more { flex: none; align-self: center; padding: 0 12px; color: #0ee59b; }
.ld-up-panel-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ld-up-panel-row .ld-up-opts.is-compact { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; }
/* Album and Auto delete the same width, wide enough for "No album" and "Don't auto delete"; the free room stays between them
   and the Upload button (owner, 2 Oct 2026). Phones (below) stack them full width. */
@media (min-width: 721px) {
  .ld-up-panel-row .ld-up-opts.is-compact .ld-up-album-row > .ld-pick,
  .ld-up-panel-row .ld-up-opts.is-compact .is-expiry > .ld-pick { flex: none; width: 200px; }
}
.ld-up-panel-row .ld-up-opts.is-compact .ld-up-field { grid-column: auto; }
.ld-up-panel-row .ld-up-go, .ld-up-panel-row .ld-up-run { width: auto; min-width: 180px; }
@media (max-width: 900px) {
  .ld-up-grid { display: flex; flex-direction: column-reverse; }
  .ld-up-side { position: static; width: 100%; }
}
@media (max-width: 720px) {
  .ld-up-row { flex-wrap: wrap; align-content: flex-start; padding: 10px; }
  .ld-up-handle { display: none; }
  .ld-up-pos { position: absolute; top: 14px; left: 14px; z-index: 2; width: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: rgba(10, 12, 16, .8); color: #fff; opacity: 1; text-align: center; }
  .ld-up-text { flex: 1 1 calc(100% - 80px); } /* the rest of line one: the chip and buttons go to line two */
  .ld-up-row > .ld-up-chip { order: 5; margin-top: 8px; }
  .ld-up-tools { order: 6; margin: 8px 0 0 auto; gap: 6px; }
  .ld-up-tool { width: 44px; height: 44px; border: 1px solid rgba(127, 127, 127, .3); }
  .ld-up-grid { flex-direction: column; }
  .ld-up-side { order: -1; position: static; }
  .ld-up-side > .ld-up-limits { order: -1; }
  .ld-up-side > .ld-up-optsum, .ld-up-side > .ld-up-skip, .ld-up-side > .ld-up-go, .ld-up-side > .ld-up-run, .ld-up-side > .ld-up-done { order: 2; }
  .ld-up-page { padding-bottom: 210px; }
  .ld-up-side > .ld-up-go, .ld-up-side > .ld-up-run { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 900; width: auto; }
  .ld-up-side > .ld-up-run { padding: 10px; border-radius: 12px; background: #12151b; }
  .ld-up-side > .ld-up-optsum { position: fixed; left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 900; width: auto; background: #12151b; }
  /* Done, with nothing more to send (owner, 2 Oct 2026): the result takes the bottom bar where the person's thumb is,
     with its links to the album and their files, instead of a disabled button they'd have to scroll away from. */
  .ld-up-side:has(> .ld-up-done):has(> .ld-up-go:disabled) > .ld-up-go,
  .ld-up-side:has(> .ld-up-done):has(> .ld-up-go:disabled) > .ld-up-optsum { display: none; }
  .ld-up-side:has(> .ld-up-go:disabled) > .ld-up-done { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 900;
    width: auto; background: #0f1b17; box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }
  .ld-up-side:has(> .ld-up-go:disabled) > .ld-up-done .ld-up-done-links a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
  .ld-up-edit-body { grid-template-columns: 1fr; }
  .ld-up-panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; transform: none; border-radius: 16px 16px 0 0; max-height: 85vh; }
  .ld-up-panel-row .ld-up-opts.is-compact { grid-template-columns: 1fr; }
  .ld-up-panel-row .ld-up-go { width: 100%; }
  .ld-up-panel-row { flex-direction: column; align-items: stretch; } /* options above, the button or progress below */
  .ld-up-panel-row .ld-up-run { width: 100%; min-width: 0; }
}

/* The album dialogs (owner QA pass, item 1.5; mock 1a New album, 1b Edit album). Chevereto's own modal and form; arranged:
   an SVG icon beside the title, Inside | Privacy side by side, a line on what the privacy means, and the actions on the
   right (keys, Cancel, the main button). */
#fullscreen-modal .ld-modal-title { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 20px; line-height: 1.2; }
#fullscreen-modal .ld-modal-title .ld-ico { width: 22px; height: 22px; flex: none; }
.ld-album-dialog .ld-na-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ld-album-dialog .ld-na-row > .input-label { margin: 0; overflow: visible; }
.ld-album-dialog .ld-na-row .c8.grid-columns { width: auto; float: none; margin: 0; }
.ld-album-dialog .ld-na-row select.text-input { width: 100%; }
.ld-album-dialog label .optional { font-weight: 400; font-size: 11.5px; color: #8b929a; }
#fullscreen-modal .ld-na-hint { margin: 6px 0 0; color: #8b929a; font-size: 12px; line-height: 1.4; }
#fullscreen-modal .btn-container.ld-na-actions { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.ld-na-keys { margin-left: auto; color: #5a616a; font-size: 11.5px; }
.ld-na-cancel { height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: #8b929a; font: 400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-na-cancel:hover { color: #e6e8ea; }
.ld-na-actions [data-action=submit] { display: inline-flex; align-items: center; gap: 7px; }
.ld-na-actions [data-action=submit] .ld-ico { width: 16px; height: 16px; color: #04130c; }
/* Inside as a dropdown: the searchable tree opens below it. */
.ld-pick.is-compact { position: relative; border: 0; border-radius: 0; overflow: visible; }
.ld-pick-button { display: flex; width: 100%; height: 36px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 11px; border: 1px solid transparent;
  border-radius: 6px; background: var(--inputBackground, #2a2f37); color: var(--inputText, #e6e8ea); font: 400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left; cursor: pointer; }
.ld-pick-button .ld-pick-current { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.ld-pick-button .ld-ico { width: 14px; height: 14px; opacity: .7; }
.ld-pick-pop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  background: #141820; box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.ld-pick-pop[hidden] { display: none; }
.ld-pick-pop.is-up { top: auto; bottom: calc(100% + 4px); } /* no room below: opens upward */
.ld-pick.is-plain .ld-pick-row { padding-left: 12px; }
.ld-pick.is-plain .ld-pick-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* the row's highlight shows the choice */
.ld-pick.is-plain .ld-pick-row:has(input:focus-visible) { outline: 2px solid #0ee59b; outline-offset: -2px; }
.ld-pick-pop .ld-pick-list { max-height: 240px; }
@media (max-width: 560px) {
  .ld-album-dialog .ld-na-row { grid-template-columns: 1fr; }
  .ld-na-keys { display: none; }
}
.ld-album-dialog .text-input, .ld-album-dialog .ld-pick-button { color: #e6e8ea; }

/* Empty tabs (owner QA pass, item 1.7; the mock's empty Liked tab): a dashed box with an icon, a line and the next step. */
#content-listing-tabs .content-empty.ld-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0 40px; padding: 48px 20px;
  border: 1.5px dashed rgba(255, 255, 255, .12); border-radius: 12px; text-align: center; }
.ld-empty .ld-empty-ico { width: 30px; height: 30px; color: #3a414a; stroke-width: 1.8; }
#content-listing-tabs .ld-empty h2 { margin: 0; color: #fff; font: 700 14px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#content-listing-tabs .ld-empty p { max-width: 360px; margin: 0; color: #8b929a; font-size: 12.5px; line-height: 1.5; }
.ld-empty .ld-gp-btn { margin-top: 4px; }

/* 1d · The identity block on phones (owner QA pass, item 1.9; owner, 2 Oct 2026): beside the avatar, exactly its height,
   top to top and bottom to bottom: the name, @username, the follow counts and, under them, the tier chip. Then the
   buttons. A chip too wide for the column ends in "…" (320 px). */
.ld-gp-chiprow { display: none; }
@media (max-width: 720px) {
  #top-user.ld-gp { row-gap: 0; }
  .ld-gp-chiprow { display: none !important; }
  /* As tall as the avatar's ring (88px + 4px each side; owner, 2 Oct 2026: "align them all"), its four lines evenly
     spaced (19 + 16 + 16 + 22 = 73px of lines, 23px of space: three equal gaps); the text ~19px clear of the ring (the
     chip's outline, 11px further out, ~8px). */
  .ld-gp-id { --ld-id-gap: calc((96px - 73px) / 3); align-self: flex-end; height: 96px; margin: 0 0 -4px -2px !important; padding-bottom: 0;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2px; box-sizing: border-box; } /* fewer lines (no chip): spread the same way */
  .ld-gp-id > * { margin: 0 !important; }
  /* The name's descenders (g, y, p) below its 19px line stay visible (owner, 3 Oct 2026: "g of spark to angel is slightly
     cut off"): 4px more box to clip at, taken back by the margin, so the lines keep their places. */
  #top-user.ld-gp .ld-gp-id h1 { font-size: 19px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-bottom: 4px; margin-bottom: -4px !important; padding-top: 3px; margin-top: -3px !important; }
  /* The 24px emblem (20 × 1.2, as desktop) on the 19px line: it overhangs the line equally above and below (the h1's 3px
     and 4px of padding above keep it unclipped), so the name keeps its line and its place. */
  #top-user.ld-gp .ld-gp-id h1 .ld-name-emblem { margin-top: -2.5px; margin-bottom: -2.5px; }
  .ld-gp-id .ld-gp-handle { margin: 0; font-size: 12.5px; line-height: 16px; }
  /* The counts on one line, the chip under them: a grid, so the block is as wide as its widest line (it is centred). */
  .ld-gp-id .ld-gp-meta { display: grid; grid-template-columns: max-content 1fr; justify-content: start; justify-items: start; gap: var(--ld-id-gap) 12px; font-size: 12.5px; line-height: 16px; }
  .ld-gp-id .ld-gp-meta .ld-profile-chip { display: inline-block; grid-row: 2; grid-column: 1 / -1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    box-sizing: border-box; padding-top: 2px; padding-bottom: 2px; font-size: 11px; line-height: 16px; }
  .ld-gp-id .ld-gp-meta .user-social-networks:empty, .ld-gp-id .ld-gp-meta .user-social-networks:not(:has(*)) { display: none; }
  .ld-gp-id .ld-gp-meta .user-social-networks:has(*), .ld-gp-id .ld-gp-meta .ld-gp-private { grid-column: 1 / -1; }
  #top-user.ld-gp .ld-gp-actions { margin-top: 16px; padding-bottom: 0; }
  /* The avatar and its block sit centred as one (owner, 2 Oct 2026); the text in the block stays left-aligned. */
  #top-user.ld-gp { justify-content: center; }
  .ld-gp-id { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 100px); }
}
/* Wider screens (owner, 2 Oct 2026): the identity block ends on the avatar's bottom edge. */
@media (min-width: 721px) { .ld-gp-id { padding-bottom: 0; } }
/* Desktop and tablets (owner, 3 Oct 2026): the identity block centred on the avatar, not on its bottom edge. */
/* Its first lines then sit on the cover's lower edge: a soft shadow keeps them clear on a bright cover. */
@media (min-width: 721px) { #top-user.ld-gp > .ld-gp-id { align-self: center; }
  #top-user.ld-gp > .ld-gp-id h1 { text-shadow: 0 1px 8px rgba(0, 0, 0, .55); } }
/* The chip's inset (owner, 2 Oct 2026): on phones @username and the counts start where the chip's own words do, its
   padding plus its border in from the block's edge. */
.ld-gp-id { --ld-chip-in: 11px; }
.ld-gp-meta .ld-profile-chip { padding-left: 10px !important; padding-right: 10px !important; border-width: 1px; }
/* The name itself always starts on the block's edge (owner, 3 Oct 2026: phones first, then desktop too), not at the
   chip's inset. */
@media (max-width: 720px) {
  .ld-gp-id:has(.ld-gp-meta .ld-profile-chip) .ld-gp-handle, .ld-gp-id:has(.ld-gp-meta .ld-profile-chip) .ld-gp-meta .ld-gp-count:first-of-type { padding-left: var(--ld-chip-in); }
  /* The chip's words start where the name does (owner, 3 Oct 2026), its outline out to the left: at the chip's height,
     as at the name's, the avatar's circle has curved away. */
  .ld-gp-id .ld-gp-meta .ld-profile-chip { margin-left: calc(-1 * var(--ld-chip-in)); max-width: calc(100% + var(--ld-chip-in)); }
}

/* New sub-album in place (owner QA pass, item 2.6; mock 1b): the first place in the sub-albums row. */
.ld-sub-create { display: flex; flex-direction: column; gap: 7px; align-self: start; box-sizing: border-box; height: 112px; padding: 10px; border: 1.5px solid #0ee59b;
  border-radius: 9px; background: #0c1d17; }
.ld-sub-create-in { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; color: #8b929a; font-size: 11px; }
.ld-sub-create-in > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-sub-create-in b { color: #e6e8ea; }
.ld-sub-create input { height: 32px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; background: #07080b; color: #fff; font-size: 13px; outline: 0; }
.ld-sub-create input:focus { border-color: rgba(14, 229, 155, .6); }
.ld-sub-create-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ld-sub-create-row button { height: 26px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: #8b929a; font: 400 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-sub-create-more { flex: none; height: auto; padding: 0; border: 0; background: none; color: #0ee59b; font: 400 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-sub-create-row .ld-sub-create-go { padding: 0 10px; background: #0ee59b; color: #04130c; font-weight: 700; }
.ld-sub-create-row button:disabled { opacity: .5; }
.ld-subs-none.is-creating > *:not(.ld-sub-create) { display: none; }
.ld-subs-none.is-creating { padding: 0; border: 0; }
.ld-subs-none .ld-sub-create { flex: 1 1 100%; max-width: 360px; }
@media (max-width: 767px) { .ld-subs:not(.is-all) .ld-subs-row > .ld-sub-create { flex: 0 0 220px; } }

/* The album's privacy chip beside its title (mock 1b): a small bordered pill. */
.ld-album-titles .ld-album-chip.ld-tile-chip { position: static; display: inline-flex; padding: 2px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: #1a1e24; color: #cfd4d9; font-size: 11.5px; }
.ld-album-titles { gap: 8px 10px; }
.ld-album-title.viewer-title { width: auto; max-width: 100%; flex: 0 1 auto; padding: 0; }
/* Any name length (owner, 2 Oct 2026): the privacy chip follows the name's last word instead of taking a line of its own,
   and the stats stay on one line (tighter dots; the date gives way with an ellipsis) so ♡ and ⋯ keep their place. */
.ld-album-head .ld-album-titles { display: block; }
.ld-album-head .ld-album-titles > .ld-album-title.viewer-title { display: inline; }
.ld-album-head .ld-album-titles > .ld-album-chip.ld-tile-chip { margin-left: 4px; vertical-align: middle; position: relative; top: -2px; }
.ld-album-head .ld-album-meta { flex-wrap: nowrap; gap: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.ld-album-head .ld-album-meta > span { flex: none; }
.ld-album-head .ld-album-meta > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ld-album-head .ld-album-meta > span + span::before { margin: 0 8px; }
/* Stream: a tall file is no taller than most of the screen; the title sits over the picture's own width (mock 1b). */
/* Stream width (owner, 2 Oct 2026): up to 1160px, centred; a tall file may be up to 1.2 screens tall before it narrows,
 * so portraits fill most of the column instead of a third of it. */
:is(.ld-album, .ld-explore).is-stream #content-listing-tabs .list-item.ld-tile--file { max-width: min(1160px, 100%, calc(120vh * var(--ld-w, 4) / var(--ld-h, 3))); }

/* The listing viewer (owner QA pass, item 2.5; mock 1b, 1c): Chevereto's viewer, our template and look. */
.viewer.ld-lv { background: #000; }
.ld-lv .viewer-content { position: absolute !important; top: 58px; right: 0; bottom: 58px; left: 0; width: auto !important; height: auto !important; }
.ld-lv .viewer-src { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: 100% !important;
  max-height: 100% !important; margin: auto !important; object-fit: contain; transform: none !important; transition: filter .6s ease; }
.ld-lv[data-cover="0"] .viewer-src { max-width: none !important; max-height: none !important; }
.ld-lv.is-loading .viewer-content .viewer-src:last-of-type { filter: blur(6px); }
/* Large (owner, 3 Oct 2026; LD.lvZoom): the picture's box from LD.zoomSize, scrolling inside the stage, centred when
 * smaller, dragged with the mouse to look around. */
.ld-lv-zoom { flex: none; min-height: 34px; padding: 0 12px; background: rgba(0, 0, 0, .45); color: #e8ebef; border-color: rgba(255, 255, 255, .16); }
.ld-lv[data-ld-zoom] .viewer-content { display: flex; overflow: auto !important; overscroll-behavior: contain; cursor: grab; }
.ld-lv[data-ld-zoom] .viewer-content.is-panning { cursor: grabbing; }
.ld-lv[data-ld-zoom] .viewer-src { position: relative !important; inset: auto !important; flex: none; max-width: none !important; max-height: none !important; margin: auto !important; }
@media (max-width: 720px) { .ld-lv-zoom { display: none !important; } }
.ld-lv-loading { position: absolute; left: 14px; top: 66px; z-index: 3; display: none; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .7); color: #cfd4d9; font: 400 11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; pointer-events: none; }
.ld-lv-loading i { width: 7px; height: 7px; border-radius: 50%; background: #fbb01f; }
.ld-lv.is-loading .ld-lv-loading { display: inline-flex; }
.ld-lv-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; gap: 8px; height: 58px; box-sizing: border-box;
  padding: 8px 10px 8px 20px; background: linear-gradient(180deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); }
.ld-lv-titles { flex: 1; min-width: 0; }
.ld-lv-title { display: block; overflow: hidden; color: #fff !important; font: 700 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none;
  text-overflow: ellipsis; white-space: nowrap; }
.ld-lv-title:hover { color: #0ee59b !important; }
.ld-lv-pos { overflow: hidden; color: #8b929a; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.ld-lv .ld-lv-tools.viewer-tools { position: static !important; display: flex; align-items: center; gap: 0; margin: 0; padding: 0; opacity: 1 !important; visibility: visible !important;
  transform: none !important; background: none; }
.ld-lv .ld-lv-tools .list-tool { position: relative; display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0;
  border-radius: 9px; background: transparent; color: #fff; cursor: pointer; opacity: 1 !important; }
.ld-lv .ld-lv-tools .list-tool:hover { background: rgba(255, 255, 255, .1); }
.ld-lv .ld-lv-tools .list-tool > * { display: none !important; }
.ld-lv .list-tool::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ld-lv .list-tool[data-action="delete"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 7h14M10 7V5h4v2M7 7l1 12h8l1-12%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 7h14M10 7V5h4v2M7 7l1 12h8l1-12%27/%3E%3C/svg%3E"); }
.ld-lv .list-tool[data-action="create-album"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 7h6l2 2h10v10H3zM12 12v5M9.5 14.5h5%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 7h6l2 2h10v10H3zM12 12v5M9.5 14.5h5%27/%3E%3C/svg%3E"); }
.ld-lv .list-tool[data-action="move"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 8h14l-3.5-3.5M20 16H6l3.5 3.5%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 8h14l-3.5-3.5M20 16H6l3.5 3.5%27/%3E%3C/svg%3E"); }
.ld-lv .list-tool[data-action="edit"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3z%27/%3E%3C/svg%3E"); }
.ld-lv .list-tool[data-action="flag"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 21V4h11l-2 4 2 4H6%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 21V4h11l-2 4 2 4H6%27/%3E%3C/svg%3E"); }
.ld-lv .list-tool[data-action="approve"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12l4.5 4.5L19 7%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12l4.5 4.5L19 7%27/%3E%3C/svg%3E"); }
.ld-lv .list-tool[data-action="select"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 5h14v14H5z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 5h14v14H5z%27/%3E%3C/svg%3E"); }
.ld-lv.selected .list-tool[data-action="select"] { color: #0ee59b; }
.ld-lv.selected .list-tool[data-action="select"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 5h14v14H5zM8.5 12l2.5 2.5 4.5-5%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 5h14v14H5zM8.5 12l2.5 2.5 4.5-5%27/%3E%3C/svg%3E"); }
.ld-lv[data-flag="unsafe"] .list-tool[data-action="flag"] { color: #fbb01f; }
.ld-lv-close { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin-left: 4px; border-radius: 9px; color: #fff; cursor: pointer; }
.ld-lv.has-tools .ld-lv-close::before { content: ""; position: absolute; left: -4px; top: 9px; width: 1px; height: 22px; background: rgba(255, 255, 255, .2); }
.ld-lv-close:hover { background: rgba(255, 255, 255, .1); }
.ld-lv-close .ld-ico { width: 18px; height: 18px; }
.ld-lv .ld-lv-wheel { position: static; display: block !important; opacity: 1 !important; }
.ld-lv .ld-lv-wheel > div { position: absolute; top: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px;
  border-radius: 50%; background: rgba(20, 22, 28, .7); color: #fff; cursor: pointer; opacity: 1 !important; transform: none !important; }
.ld-lv .ld-lv-wheel .viewer-wheel-prev { left: 16px; right: auto; }
.ld-lv .ld-lv-wheel .viewer-wheel-next { right: 16px; left: auto; }
.ld-lv .ld-lv-wheel .ld-ico { width: 20px; height: 20px; }
.ld-lv:not(.viewer--nav-prev) .viewer-wheel-prev, .ld-lv:not(.viewer--nav-next) .viewer-wheel-next { display: none; }
.ld-lv-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 58px;
  padding: 10px 16px 12px 20px; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); font: 400 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-lv-spacer { flex: 1; }
.ld-lv-open, .ld-lv-actions, .ld-lv .ld-lv-like.list-item-like { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: transparent; color: #fff !important; font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none; cursor: pointer; }
.ld-lv .ld-lv-like.list-item-like { position: static !important; inset: auto !important; width: auto; margin: 0; opacity: 1 !important; transform: none !important; font-weight: 400; }
.ld-lv .ld-lv-like .ld-ico { width: 15px; height: 15px; }
.ld-lv[data-liked="1"] .ld-lv-like { border-color: rgba(14, 229, 155, .6); }
.ld-lv[data-liked="1"] .ld-lv-like .ld-ico { fill: #0ee59b; stroke: #0ee59b; }
.ld-lv-actions { display: none; }
.ld-lv .viewer-foot, .ld-lv .viewer-top, .ld-lv .list-item-privacy { display: none !important; }
@media (max-width: 720px) {
  .ld-lv-top { padding-left: 14px; }
  .ld-lv .ld-lv-tools.viewer-tools { display: none; }
  .ld-lv.has-tools .ld-lv-actions { display: inline-flex; height: 40px; border-radius: 9px; }
  .ld-lv .ld-lv-wheel { display: none !important; }
  .ld-lv-foot { padding: 10px 12px 18px; }
  .ld-lv.has-tools .ld-lv-close::before { display: none; }
}

/* 1e · Button states (owner QA pass, item 4.3): hover, pressed and on, as in the mock. */
.ld-iv-tools .ld-gp-btn { min-height: 28px; height: 28px; padding: 0 10px; border-color: rgba(255, 255, 255, .12); border-radius: 7px; background: transparent; font-size: 12px; }
.ld-iv-tools .ld-gp-btn:hover, .ld-iv-actions .ld-gp-btn:hover, .ld-iv-more > .ld-gp-btn:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }
.ld-iv-tools .ld-gp-btn:active, .ld-iv-actions .ld-gp-btn:active, .ld-iv-more > .ld-gp-btn:active, .ld-embed-copy:active { background: rgba(255, 255, 255, .12); transform: translateY(1px); }
.ld-iv-details-btn[aria-expanded] { color: #e6e8ea; }
.ld-iv-actions .ld-gp-btn, .ld-iv-more > .ld-gp-btn { height: 36px; min-height: 36px; padding: 0 13px; border-color: rgba(255, 255, 255, .14); border-radius: 8px; background: transparent;
  color: #e6e8ea; font-size: 12.5px; font-weight: 600; }
.ld-iv-more > .ld-gp-btn { width: 36px; padding: 0; justify-content: center; }
.ld-iv-more.pop-btn-show > .ld-gp-btn, .ld-iv-more.opened > .ld-gp-btn { background: rgba(255, 255, 255, .1); }
/* ♡: an SVG heart, filled green when on (mock 1e). Chevereto's own like control and count stay. */
.ld-iv-actions .btn-like .btn-icon { display: none !important; }
.ld-iv-actions .btn-like .ld-gp-btn::before { content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ld-iv-actions .btn-like .btn-liked::before { background: #0ee59b;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 017-2.6A4 4 0 0119 10c0 5.6-7 10-7 10z' fill='black'/%3E%3C/svg%3E"); }
.ld-iv-actions .btn-like[data-liked="1"] .btn-liked { color: #e6e8ea; border-color: rgba(14, 229, 155, .5); }
/* The ⋯ menu: a dark list, keys on the right, Delete in red. */
.ld-iv-more .pop-box { min-width: 210px; padding: 5px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: #141820; box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.ld-iv-more .pop-box.arrow-box::before, .ld-iv-more .pop-box.arrow-box::after { display: none; }
.ld-iv-more .pop-box-menu ul { margin: 0; padding: 0; }
.ld-iv-more .pop-box-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 7px; color: #e6e8ea;
  font: 400 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-iv-more .pop-box-menu li a:hover { background: rgba(255, 255, 255, .06); }
.ld-iv-more .pop-box-menu li .btn-icon { display: none; }
.ld-iv-more .pop-box-menu li a kbd { margin-left: auto; padding: 0; background: none; box-shadow: none; color: #6b7279; font: 600 10px ui-monospace, Menlo, monospace; }
.ld-iv-more .pop-box-menu li a[data-action="delete"] { color: #ef8a9c; }
/* Tabs: text only, the current one white with a green underline. */
.ld-iv-tabs .content-tabs-container { border: 0; }
.ld-iv-tabs .content-tabs { display: flex; gap: 4px; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ld-iv-tabs .content-tabs li { margin: 0; padding: 0; border: 0 !important; background: none !important; }
.ld-iv-tabs .content-tabs li a { display: block; padding: 9px 10px; border: 0; background: none !important; color: #8b929a !important; box-shadow: none;
  font: 600 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.ld-iv-tabs .content-tabs li a:hover { color: #e6e8ea !important; }
.ld-iv-tabs .content-tabs li.current a { color: #fff !important; box-shadow: inset 0 -2px #0ee59b; }
.ld-iv-tabs .content-tabs li a .btn-icon { display: none; }
/* Embed codes: the label, then the code and Copy (mock 1e); Copy says "Copied" for a moment. */
.ld-iv-pane .panel-share-item { margin: 0 0 14px; }
.ld-iv-pane .panel-share-item .pre-title { margin: 6px 0 8px; color: #6b7279; font: 700 10.5px ui-monospace, Menlo, monospace; letter-spacing: .08em; text-align: left; text-transform: uppercase; border: 0; }
.ld-iv-pane .ld-embed-row { display: block; margin: 0 0 9px; }
.ld-iv-pane .ld-embed-row .title { display: block; width: auto; float: none; margin-bottom: 4px; color: #8b929a; font-size: 11.5px; font-weight: 600; text-align: left; }
.ld-iv-pane .ld-embed-row .title a { display: inline-flex; align-items: center; gap: 4px; color: #8b929a; }
.ld-iv-pane .ld-embed-row .title .ld-ico { width: 12px; height: 12px; }
.ld-embed-field { display: flex; gap: 6px; }
.ld-embed-field .text-input { flex: 1; min-width: 0; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: #1a1e24 !important; color: #cfd4d9 !important;
  font: 12px ui-monospace, Menlo, monospace; }
.ld-embed-copy { flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: #22272f; color: #e6e8ea; font: 400 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.ld-embed-copy:hover { background: #2a3039; }
.ld-embed-copy.is-copied { background: #0c1d17; color: #0ee59b; box-shadow: inset 0 0 0 1px rgba(14, 229, 155, .45); }
.ld-iv-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2000; padding: 10px 16px; border: 1px solid rgba(14, 229, 155, .45); border-radius: 10px; background: #0c1d17;
  color: #e6e8ea; font: 400 12.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s; pointer-events: none; }
.ld-iv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ld-iv-actions .btn-like { text-decoration: none; }
.ld-iv-actions .btn-like .ld-gp-btn { display: inline-flex !important; align-items: center; gap: 7px; text-decoration: none; }
.ld-iv-actions .btn-like[data-liked="1"] .btn-unliked, .ld-iv-actions .btn-like:not([data-liked="1"]) .btn-liked { display: none !important; }
.ld-iv-actions .btn-like .btn-text { text-decoration: none; }
.ld-iv-tabs .content-tabs-container, .ld-iv-tabs .content-tabs-wrap, .ld-iv-tabs .content-tabs { width: 100%; }
.ld-iv-tabs .content-tabs li a { height: auto !important; line-height: 1.3 !important; }
@media (max-width: 1023px) {
  /* 1f · The dock's buttons stay 46px tall and share the width. */
  .ld-iv-actions .ld-gp-btn, .ld-iv-actions .btn-like .ld-gp-btn, .ld-iv-actions .ld-iv-more > .ld-gp-btn { width: 100%; height: 46px; min-height: 46px; justify-content: center; }
}

/* Chevereto's dialogs open above our panels, sheets and bars (owner QA pass, item 5.2: Edit file from the upload panel). */
#fullscreen-modal.--show { z-index: 1400; }

/* Album and "+ New album" side by side (QA 5.3). */
.ld-up-album-row { display: flex; gap: 6px; }
.ld-up-album-row select { flex: 1; min-width: 0; }
/* The searchable picker takes the select's place: it fills the row, and its list spans the whole row ("+ New album"
   included) so album names have room (owner, 2 Oct 2026). */
.ld-up-album-row { position: relative; }
.ld-up-album-row > .ld-pick { flex: 1; min-width: 0; }
.ld-up-album-row > .ld-pick.is-compact { position: static; }
/* The floating panel and the phone options sheet scroll (overflow: auto), which would clip the open list: let it out while it is open. */
.ld-up-panel:has(.ld-pick-pop:not([hidden])), .ld-up-sheet:has(.ld-pick-pop:not([hidden])) { overflow: visible; }
.ld-up-newalbum { flex: none; min-height: 36px; white-space: nowrap; }
.ld-up-newalbum:disabled { opacity: .45; cursor: default; }
.ld-up-na .modal-form .input-label { margin-bottom: 12px; }
.ld-up-na textarea.text-input { min-height: 70px; }
/* Chevereto's input styles must not stretch the row's fields (QA 5.4; mock 2a: 26px title, 22px description, 56 x 42
   picture). */
.ld-up-row .ld-up-title { height: 26px !important; min-height: 0 !important; margin: 0 !important; line-height: 24px; box-shadow: none; }
.ld-up-row .ld-up-desc { height: 22px !important; min-height: 0 !important; margin: 0 !important; line-height: 20px; box-shadow: none; }
.ld-up-row .ld-up-text { gap: 0; }
@media (min-width: 721px) { .ld-up-row .ld-up-preview { width: 56px; height: 42px; border-radius: 6px; } }

/* NSFW the listing leaves out for this person (owner, 2 Oct 2026; Tiles::nsfwNotice): one line above the files. */
.ld-nsfw-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid rgba(127, 127, 127, .3); background: rgba(127, 127, 127, .08); font-size: 13px; line-height: 1.4; }
.ld-nsfw-note > .ld-ico { width: 18px; height: 18px; flex: none; opacity: .75; }
.ld-nsfw-note > span { flex: 1 1 220px; min-width: 0; }
.ld-nsfw-note > .ld-gp-btn { flex: none; }

/* The header's bottom edge in the member's tier colour, with a soft glow, on every signed-in page (owner, 2 Oct 2026: as
 * the signed-in homepage has it, home-member.css). --ld-accent and data-ld-tier are on <body> from the header's
 * membership plumbing; grey for free members. The registration page keeps its own plain line (a more specific rule). */
body[data-ld-tier] .top-bar--main { border-bottom: 1px solid rgba(var(--ld-accent, 122, 130, 140), .4);
    box-shadow: 0 1px 14px rgba(var(--ld-accent, 122, 130, 140), .22); }

/* Menus (owner, 2 Oct 2026).
 * - Desktop: the album's ⋯ drop-down in mock 1b's style (a 190px panel, plain rows, Delete in rose; A3).
 * - Phones (#17): every menu sheet is Chevereto's own pop-box sheet, as the avatar menu: its header (icon, title, ×),
 *   a two-column grid of icon + label, its sizes. Nothing here restyles it. Our buttons only give Peafowl the
 *   header's icon and title (.ld-sheet-icon, .ld-sheet-title), which stay hidden on the button itself. */
html:not(.phone):not(.phablet) .ld-album-more .pop-box { width: auto; min-width: 190px; padding: 5px; margin-top: 6px !important; border-radius: 10px;
    background: #141820; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
html:not(.phone):not(.phablet) .ld-album-more .pop-box.arrow-box::before,
html:not(.phone):not(.phablet) .ld-album-more .pop-box.arrow-box::after { display: none !important; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-inner, html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu { background: transparent !important;
    border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu ul { margin: 0; padding: 0; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu li { padding: 0; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu li a { display: block; padding: 9px 10px !important; border-radius: 7px; font-size: 12.5px;
    line-height: 1.35; color: #e6e8ea !important; background: transparent; cursor: pointer; white-space: nowrap; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu li a:hover,
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu li a:focus-visible { background: rgba(255, 255, 255, .06) !important; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu li.ld-menu-danger a { color: #ef8a9c !important; }
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu .btn-icon,
html:not(.phone):not(.phablet) .ld-album-more .pop-box-menu kbd { display: none !important; }
.pop-btn > .ld-sheet-icon, .pop-btn > .ld-sheet-title { display: none !important; }

/* Cover adjust on phones (owner, 2 Oct 2026, M8 + M9): the controls leave the cover for a bar at the bottom of the screen,
 * so the whole cover is free to drag; no phone guide or preview (the person is looking at the phone view). */
@media (max-width: 720px) {
  .ld-cover-adjust-bar { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; z-index: 1400; display: flex; flex-wrap: wrap; justify-content: stretch; gap: 8px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; background: #141820; border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); cursor: default; touch-action: manipulation; }
  .ld-cover-adjust-bar .ld-cover-zoom { flex: 1 1 100%; }
  .ld-cover-adjust-bar .ld-cover-zoom input { flex: 1; width: auto; min-height: 32px; }
  .ld-cover-adjust-bar .ld-cover-btn { flex: 1; height: 44px; }
  .ld-cover-guide, .ld-cover-adjust [data-ld-cover-phone], .ld-cover-phone { display: none !important; }
  .ld-cover-hint { left: 10px; top: 10px; }
  body.ld-cover-adjusting { padding-bottom: 120px; }
}

/* Phone header (owner, 2 Oct 2026, M1). No transform on the bell: it would trap Chevereto's fixed sheet inside it. For members the hamburger's menu held only Notifications: the bell takes the
 * left slot instead (a 44px target, its unread count kept; Chevereto's own notifications box opens, a sheet on
 * phones), and the menu is never built. Guests keep the hamburger (Sign in, Create account, language); its overlay now
 * fully covers the page and locks scrolling. Lives here (loaded on every page) until the next re-publication moves it
 * into the header overlay (runtime-change-runbook.md, "Pending for the next re-publication"). */
html.phone body[data-ld-tier] [data-action="top-bar-menu-full"] { display: none !important; }
html.phone body[data-ld-tier] #top-bar .top-bar-notifications.phone-hide { display: block !important; position: absolute; left: 4px; top: 3px; margin: 0; }
html.phone body[data-ld-tier] #top-bar .top-bar-notifications > .top-btn-text { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 50px; padding: 0; } /* the bar's height: centred with Upload and the avatar (owner, 3 Oct 2026) */
html.phone body[data-ld-tier] #top-bar .top-bar-notifications .menu-fullscreen-show { display: none !important; }
html.phone body[data-ld-tier] #top-bar .top-bar-notifications .menu-fullscreen-hide { display: flex !important; align-items: center; position: relative; }
html.menu-fullscreen-visible, html.menu-fullscreen-visible body { overflow: hidden !important; }
#menu-fullscreen { z-index: 1500; }
#menu-fullscreen > .fullscreen { background: #0b0d13 !important; }

/* The album dialogs as the mock draws them (owner, 2 Oct 2026: New album "exactly as 1a"): a 640px box 70px from the
 * top over a 70% shade, 20px padding, #0b0d11, a faint edge; 36px fields; both selects alike; the green button first.
 * On phones the same box is a bottom sheet. */
#fullscreen-modal.ld-album-dialog { background: rgba(0, 0, 0, .7) !important; align-items: start !important; overflow-y: auto; }
#fullscreen-modal.ld-album-dialog #fullscreen-modal-box { width: 640px; max-width: calc(100vw - 32px); margin: 70px auto 40px !important; top: auto !important;
    padding: 20px !important; box-sizing: border-box; border-radius: 10px; background: #0b0d11 !important; border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
#fullscreen-modal.ld-album-dialog #fullscreen-modal-body { padding: 0 !important; }
#fullscreen-modal.ld-album-dialog .modal-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
#fullscreen-modal.ld-album-dialog .modal-form > .input-label, #fullscreen-modal.ld-album-dialog .ld-na-row > .input-label { margin: 0 !important; padding: 0 !important; }
#fullscreen-modal.ld-album-dialog label { display: block; margin: 0 0 7px; color: #fff; font-size: 13px; font-weight: 700; }
#fullscreen-modal.ld-album-dialog .text-input, #fullscreen-modal.ld-album-dialog select.text-input { height: 36px; padding: 0 11px; border: 1px solid transparent !important;
    border-radius: 6px; background-color: #2a2f37 !important; color: #e6e8ea; font-size: 13px; box-shadow: none !important; }
#fullscreen-modal.ld-album-dialog textarea.text-input { height: 70px; min-height: 70px; padding: 9px 11px; resize: vertical; }
#fullscreen-modal.ld-album-dialog select.text-input { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23e6e8ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 14px !important; }
#fullscreen-modal.ld-album-dialog .ld-na-hint { margin: 6px 0 0; }
#fullscreen-modal.ld-album-dialog .btn-container.ld-na-actions { margin: 16px 0 0 !important; padding: 0 !important; }
#fullscreen-modal.ld-album-dialog #form-privacy-combo:not(:has(:not([hidden]):not(.hidden))) { display: none; }
#fullscreen-modal.ld-album-dialog .ld-na-actions [data-action=submit] { height: 36px; padding: 0 16px; border: 0; border-radius: 6px; background: #0ee59b; color: #04130c;
    font-size: 13px; font-weight: 700; }
#fullscreen-modal.ld-album-dialog .close-modal { width: 28px; height: 28px; top: 18px !important; right: 16px !important; display: flex; align-items: center; justify-content: center; font-size: 15px; }
@media (max-width: 720px) {
  #fullscreen-modal.ld-album-dialog #fullscreen-modal-box { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; width: 100%; max-width: none;
    margin: 0 !important; max-height: 92vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)) !important; }
  #fullscreen-modal.ld-album-dialog .ld-na-actions [data-action=submit] { flex: 1; justify-content: center; height: 44px; }
  #fullscreen-modal.ld-album-dialog .ld-na-cancel { height: 44px; }
}
#fullscreen-modal.ld-album-dialog #fullscreen-modal-body > h1.ld-modal-title { margin: 0; padding-right: 36px; font-weight: 400; }
.ld-pick-button.ld-inside-fixed { cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 36px; }

/* Swipe on the image page (owner, 2 Oct 2026): sideways is ours, up and down still scroll, pinch still zooms. */
.ld-iv:not(.is-actual) #image-viewer { touch-action: pan-y pinch-zoom; }

/* The listing viewer opens and closes in place (owner, 2 Oct 2026, M15): nothing changes the page's overflow (hiding the
 * scrollbar shifted and re-scrolled it); the viewer stops wheel and touch scrolling from reaching the page instead
 * (gallery.js), and the page's scroll is put back on close. The viewer fades in and out (Chevereto removes it 250ms
 * after --hide). */
body.--viewer-shown { overflow: visible !important; }
.viewer.ld-lv { overscroll-behavior: contain; }
/* Scrolling locked while it's open (owner, #18). Set only once the viewer is opaque (gallery.js): Chrome drops the root
 * scrollbar's room under overflow:hidden whatever scrollbar-gutter says. */
html.ld-viewer-on { overflow: hidden !important; }
.viewer.ld-lv { transition: opacity .15s ease-out; }
.viewer.ld-lv.viewer--hide { opacity: 0 !important; pointer-events: none; }
@starting-style { .viewer.ld-lv.viewer--show { opacity: 0; } }

/* The listing viewer's loading (owner, 2 Oct 2026, V1): a spinner in the middle of the picture, never text. The .md shows
 * under it, fitted to the final size and softly blurred, until the full size is in. */
.ld-lv .ld-lv-loading { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 48px; height: 48px; padding: 0 !important;
    border-radius: 50%; background: rgba(0, 0, 0, .45) !important; align-items: center; justify-content: center; pointer-events: none; }
.ld-spin { width: 26px; height: 26px; box-sizing: border-box; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
    animation: ld-spin .8s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ld-spin { animation-duration: 2.4s; } }

/* The album's head on phones (owner, 2 Oct 2026): the whole name on its own lines, never "…" (it is the article's title in
 * Stream); under it the stats, with ♡ and ⋯ at the end of that line as 44px targets; the owner's Upload here (and Share)
 * take a full-width row below. */
@media (max-width: 720px) {
  .ld-album-head { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 4px; }
  .ld-album-head .ld-album-titles { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; min-width: 0; }
  .ld-album-head .ld-album-title { min-width: 0; overflow: visible; white-space: normal; }
  .ld-album-head > .ld-album-meta { grid-column: 1; grid-row: 2; align-self: center; }
  .ld-album-head .ld-album-chip { flex: none; }
  .ld-album-head .ld-album-actions { display: contents; }
  .ld-album-head .ld-album-actions > .btn-like { grid-column: 2; grid-row: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; }
  .ld-album-head .ld-album-actions > .ld-album-more { grid-column: 3; grid-row: 2; }
  .ld-album-head .ld-album-actions > .ld-album-more > .ld-gp-btn { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .ld-album-head .ld-album-actions > .ld-gp-btn { grid-column: 1 / -1; grid-row: auto; width: 100%; min-height: 44px; justify-content: center; }
}

.ld-subs-loadmore { display: flex; justify-content: center; margin: 16px 0 0; }
.ld-subs:not(.is-all) .ld-subs-loadmore { display: none; }

/* Room under the album page for the floating "Browse …" pill (owner, 2 Oct 2026): at the end of the page, Load more and
 * the last files scroll clear of it. The pill shows on phones and tablets, and on desktop when the tree is collapsed. */
.ld-album.has-tree.tree-collapsed { padding-bottom: 76px; }
@media (max-width: 1023px) { .ld-album.has-tree { padding-bottom: 76px; } }

/* The Select bar on phones (owner, 2 Oct 2026, M7): Move, Download, Delete and More; the others are in More's sheet. */
.ld-select-bar .ld-select-overflow { display: none !important; }
.ld-select-more { display: inline-flex; align-items: center; gap: 6px; }

/* Long-press selects on grid tiles (M6): no image callout or text selection there on touch screens. */
.ld-gp-listing #content-listing-tabs .list-item, .ld-album:not(.is-stream) #content-listing-tabs .list-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ld-gp-listing #content-listing-tabs .list-item img, .ld-album:not(.is-stream) #content-listing-tabs .list-item img { -webkit-user-drag: none; }

/* Page numbers under an album's Grid (owner, 2 Oct 2026): ‹ Page [N] of M ›; Stream keeps Load more. */
.ld-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 8px; font-size: 13px; color: #aeb4bb; }
.ld-pager .ld-pager-step { width: 40px; height: 40px; padding: 0; justify-content: center; }
.ld-pager .ld-pager-step.is-off { opacity: .35; pointer-events: none; }
.ld-pager-at { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ld-pager-at input { width: 64px; height: 36px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: #12151b; color: #fff;
    font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: center; -moz-appearance: textfield; }
.ld-pager-at input::-webkit-outer-spin-button, .ld-pager-at input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:is(.ld-album, .ld-explore).is-stream .ld-pager { display: none; }
.ld-album:not(.is-stream) .ld-album-listing .ld-more { display: none; }

/* The image page while the full size loads (I2): the .md behind it at the same fit, softly blurred; the full fades in. */
.ld-iv #image-viewer.ld-iv-loading::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--ld-md) center / contain no-repeat;
    filter: blur(6px); transform: scale(1.01); pointer-events: none; }
.ld-iv #image-viewer.ld-iv-loading::before { background-size: contain; }
/* In the picture's own box (LD.ivSize's --ld-md-w/h), drawn a little larger and clipped there, so the blur never spills
 * past the picture's edges as a ghost (owner, 3 Oct 2026: "ghosting and artifact in image viewer page"). */
.ld-iv #image-viewer.ld-iv-sharp::before { filter: none; } /* a full file already in: only its decode is waited for */
.ld-iv #image-viewer.ld-iv-loading[style*="--ld-md-w"]::before { inset: 0; margin: auto; width: var(--ld-md-w); height: var(--ld-md-h);
    background-size: calc(100% + 24px) calc(100% + 24px); transform: none; clip-path: inset(0); }
.ld-iv #image-viewer > img.media { position: relative; z-index: 1; transition: opacity .3s ease; }
.ld-iv #image-viewer.ld-iv-loading > img.media[style*="opacity: 0"] { transition: none; }

/* The profile's identity on phones (owner, 2 Oct 2026, M3; mock 1d): an 88px avatar with the tier's ring over the cover's
 * fade; beside it the name and emblem, @username, the follow counts; the tier line and the buttons below. */
/* @username under the name on desktop too (owner, 3 Oct 2026: "just like mobile view"), in the phone's grey. */
.ld-gp-handle { display: block; margin: -2px 0 8px; color: #8b929a; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .ld-gp-avatar, .ld-gp-avatar .user-image { width: 88px !important; height: 88px !important; }
  /* The tier's ring is the badges' own (.ld-ring's shadow); the border is the gap inside it, as on wider screens. A tier
     coloured border here drew a second ring (owner, 2 Oct 2026). */
  .ld-gp-avatar .user-image { border: 3px solid #0b0d13 !important; box-sizing: border-box; overflow: hidden;
    font-size: 82px; line-height: 82px; text-align: center; } /* the default avatar is a glyph: sized to the box, not 108px */
  .ld-gp-handle { display: block; margin: 1px 0 4px; color: #8b929a; font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #top-user.ld-gp h1 { font-size: 21px; line-height: 1.2; }
}

/* "Select all N in this album" (A2 step 2). */
.ld-select-album { color: #0ee59b; }
.ld-select-note { color: #8b929a; font-size: 11.5px; padding: 0 6px; max-width: 220px; line-height: 1.3; }
@media (max-width: 720px) { .ld-select-note { display: none; } }

/* A file in the upload panel's strip, held to move it (touch). */

/* The upload page scrolls (owner, 2 Oct 2026, U1): Chevereto's uploader, shown behind our page, puts overflow-hidden on
 * <html>; that lock stays only while a sheet or a dialog is actually open. */
html.overflow-hidden:has(body#upload):not(:has(body.pop-box-show)):not(:has(#fullscreen-modal.--show)) { overflow: visible !important; overflow-y: auto !important; }
/* The Upload button when there's nothing left to send (U4): solid, never see-through over the queue. */
.ld-up-go:disabled { opacity: 1; background: #1c2027 !important; border-color: rgba(255, 255, 255, .1) !important; color: #8b929a !important; cursor: default; }
.ld-up-go:disabled .ld-ico { opacity: .7; }

/* Sign-in and sign-up: the homepage's warm light behind the lens (owner, 2 Oct 2026). auth.css hides the drawing's own
 * background rects there (no square edges, 30 Sep), and the glow went with them; this paints the same light (the
 * drawing's ldh-back gradient, at its place on the drawing) on the art's box, whose mask already fades it left and down.
 * The drawing sits at right 3%, top 7%, 88% tall, 2560×1200: its light is at (1670, 260), radius 1100. Phones show the
 * drawing's own rects, so this is for wider screens. Belongs in auth.css: moves there at the next re-publication
 * (runtime-change-runbook.md, "Pending for the next re-publication"). */
.ld-auth-art { container-type: size; }
.ld-auth-art::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 80.67cqh at calc(97cqw - 65.26cqh) 26.07cqh, rgba(138, 130, 114, .30) 0, rgba(90, 85, 76, .10) 35%, rgba(0, 0, 0, 0) 100%); }
@media (max-width: 600px) { .ld-auth-art::before { display: none; } }
/* Sign-up's plan picker: the same light (owner, 2 Oct 2026). There the drawing is 560px tall, 120px past the right edge
 * and vertically centred, which leaves its own light off-screen; so, as on sign-in, its background rects give way to
 * the light painted behind it at the drawing's (1670, 260): 295px in from the right, 159px above the middle, 513px
 * radius, faded at the box's left so nothing has an edge. Phones keep the drawing as it is. Moves to registration.css
 * at the next re-publication, with the sign-in rules above. */
@media (min-width: 721px) {
  .ld-registration .ld-picker-art { container-type: size; }
  .ld-registration .ld-picker-art svg > rect { display: none; }
  .ld-registration .ld-picker-art::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle 513px at calc(100cqw - 295px) calc(50cqh - 159px), rgba(138, 130, 114, .30) 0, rgba(90, 85, 76, .10) 35%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%); mask-image: linear-gradient(90deg, transparent 0, #000 35%);
    z-index: 1; mix-blend-mode: screen; } /* over the lens, as light: the lens fills this short box, so behind it nothing showed */
}

/* The site footer on every page (owner, 2 Oct 2026; footer.php): the homepage's (home-guest.css .ld-home-foot). */
.ld-site-foot { margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .06); }
.ld-site-foot-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto;
  padding: 22px 72px; font: 400 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #6f7883; }
.ld-site-foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ld-site-foot a { color: #6f7883 !important; }
.ld-site-foot a:hover { color: #c3c9d0 !important; }
@media (max-width: 720px) {
  .ld-site-foot-in { flex-direction: column-reverse; gap: 10px; padding: 20px 20px 28px; text-align: center; }
  .ld-site-foot nav { gap: 18px; justify-content: center; }
}
/* Where the floating "Browse <album>" pill shows (narrow screens), the footer ends above it. */
@media (max-width: 1023px) { body:has(.ld-tree-open) .ld-site-foot-in { padding-bottom: 88px; } }

/* A member with no picture shows their letters (owner, 2 Oct 2026; Avatar.php, LD.initials): the name's first and last
 * word, or the username's first letter. The glyph waits unseen until the letters are in (never a flash of it), and
 * comes back where no name can be found ([data-ld-initials=""]) or without JavaScript. */
html.js .default-user-image:not([data-ld-initials]) > *,
.default-user-image[data-ld-initials]:not([data-ld-initials=""]) > * { visibility: hidden; }
.default-user-image[data-ld-initials]:not([data-ld-initials=""]) { position: relative; container-type: size; }
/* The bell's list places its avatars itself (Chevereto: absolute, beside the text); "relative" above took a member's
   initials avatar out of that place, above its text and over the next row (owner, 3 Oct 2026). */
.top-bar-notifications-list li .default-user-image[data-ld-initials]:not([data-ld-initials=""]) { position: absolute; }
.default-user-image[data-ld-initials]:not([data-ld-initials=""])::after { content: attr(data-ld-initials); position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 50%; background: #1b2027; color: #c3c9d0; font: 700 40cqh/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .02em; }

/* Hide a file's title in Stream (owner, 2 Oct 2026; FileDisplay, Tiles::titles, LD.titles). Only Stream: Grid, the image
 * page, search, alt text and embed codes keep the title. */
.ld-title-toggle { display: none; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle { display: inline-flex; align-self: center; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 1px solid rgba(127, 127, 127, .28); border-radius: 8px; background: transparent; color: #8b929a; cursor: pointer;
  font: 400 11.5px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; } /* small and quiet (owner, 2 Oct 2026) */
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle .ld-ico { width: 14px; height: 14px; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle:hover { border-color: rgba(255, 255, 255, .45); color: #fff; }
:is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle.is-hidden { background: #221a08; border-color: #fbb01f; color: #fbb01f; }
body.ld-selecting :is(.ld-album, .ld-explore).is-stream .ld-title-toggle { display: none; }
/* Whoever may edit sees a hidden title faded, with the reason (clicking it still opens the editor). */
:is(.ld-album, .ld-explore).is-stream .ld-tile--file.is-title-hidden .ld-tile-name.list-item-desc-title-link:not(.ld-editing) { color: #8b929a !important; font: italic 400 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; align-self: center; } /* small, grey, italic (owner, 2 Oct 2026) */
:is(.ld-album, .ld-explore).is-stream .ld-tile--file.is-title-hidden .ld-tile-name:not(.ld-editing)::before,
.ld-lv.is-title-hidden .ld-lv-title::before { content: "Title hidden from visitors · "; padding-left: 20px; background: no-repeat 0 50% / 14px 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3c9d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.1A10.4 10.4 0 0 1 12 6c5 0 9 4.5 10 6-.4.6-1.3 1.8-2.6 3M6.4 6.5C4.3 7.9 2.7 10 2 12c1 1.5 5 6 10 6 1.7 0 3.3-.5 4.6-1.3'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.1 4.1'/%3E%3C/svg%3E"); }
.ld-lv.is-title-hidden .ld-lv-title { color: #8b929a !important; font: italic 400 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
/* Everyone else: no title row at all, the picture starts where it was; and none in the viewer's header. */
:is(.ld-album, .ld-explore).is-stream .ld-tile--file.is-title-gone .ld-tile-desc.list-item-desc { display: none !important; }
.ld-lv.is-title-gone .ld-lv-title { display: none; }
@media (max-width: 720px) {
  :is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 10px; }
  :is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle > span { display: none; }
  :is(.ld-album, .ld-explore).is-stream .ld-tile--file .ld-title-toggle .ld-ico { width: 18px; height: 18px; }
  :is(.ld-album, .ld-explore).is-stream .ld-tile--file.is-title-hidden .ld-tile-name:not(.ld-editing) { font-size: 0 !important; }
  :is(.ld-album, .ld-explore).is-stream .ld-tile--file.is-title-hidden .ld-tile-name:not(.ld-editing)::before { content: "Title hidden from visitors"; font-size: 12px; line-height: 1.4; }
}

/* The shared sheet with SVG icons (settings, 2 Oct 2026): sized like its Font Awesome ones; an amber dot for unsaved changes. */
.pop-box.ld-sheet .ld-sheet-svg { display: inline-flex; align-items: center; justify-content: center; }
.pop-box.ld-sheet .ld-sheet-svg svg { width: 18px; height: 18px; }
.pop-box.ld-sheet .ld-sheet-dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #fbb01f; vertical-align: middle; }

/* Avatar emblems, site-wide (owner, 2 Oct 2026): no dark disc behind the emblem; a thin black outline that follows the
 * emblem's own shape, so it reads apart from the accent ring and still as an emblem. Overrides badges.css until the next
 * re-publication moves it there (runtime-change-runbook.md, "Pending"). */
.ld-avatar .ld-avatar-emblem, .ld-avatar.is-large .ld-avatar-emblem { border-radius: 0; background: none !important; }
.ld-avatar .ld-avatar-emblem img { width: 100%; height: 100%;
  filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000); }

/* Someone else's file or album in a tile (Explore, search, a profile's Liked): the owner under the title, @username with
   its tier emblem (badges.js); Free members a plain grey dot. An album's line: owner · "N files". */
.ld-tile-owner { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; overflow: hidden; color: #9aa1a9 !important; font-size: 12.5px;
    text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.ld-tile-owner:hover { color: #e6e8ea !important; }
.ld-tile-owner:not(.is-plain):not(:has(.ld-name-emblem))::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #5b626b; }
.ld-tile-owner .ld-name-emblem { order: -1; }
.ld-x-meta, .ld-tile-meta:has(> .ld-tile-owner) { display: flex; align-items: center; gap: 6px; min-width: 0; color: #8b929a; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.ld-x-meta > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.ld-tile-meta > .ld-tile-owner { flex: 0 1 auto; }
.ld-x-dot { opacity: .6; }

/* A profile's Liked (owner, 3 Oct 2026; docs/liked-redesign.md; mock 1a / 1d, Liked tab): one row with the Files | Albums
   switch (white for the current one, a count pill on each), "Only you can see your likes", then search, sort, Select. */
.ld-liked-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 6px 0 18px; }
.ld-liked-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: #0c0e13; }
.ld-liked-switch a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 9px;
  color: #c9ced4 !important; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.ld-liked-switch a:hover { color: #fff !important; }
.ld-liked-switch a.is-current { background: #fff; color: #07080b !important; }
.ld-liked-switch a:focus-visible { outline: 2px solid #0ee59b; outline-offset: 1px; }
.ld-liked-n { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11.5px; font-weight: 600; }
.ld-liked-switch a.is-current .ld-liked-n { background: #e6e8ea; color: #07080b; }
.ld-liked-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #8b929a; font-size: 12.5px; }
.ld-liked-note .ld-ico { width: 13px; height: 13px; }
/* The ♡ pill on a liked file or album is the unlike button (Chevereto's like endpoint; gallery.js LD.liked). */
.ld-tile-likes.ld-tile-unlike { padding: 3px 8px; gap: 5px; border: 0; font: inherit; font-size: 11.5px; cursor: pointer; }
.ld-tile-likes.ld-tile-unlike::before { display: none; }
.ld-tile-unlike .ld-ico { width: 13px; height: 13px; color: #0ee59b; }
.ld-tile-unlike:hover { background: rgba(7, 8, 11, .85); }
.ld-tile-unlike:focus-visible { outline: 2px solid #0ee59b; outline-offset: 1px; }
.ld-tile--album .ld-tile-unlike { right: 10px; bottom: 10px; }
/* Under the title: the owner, then " · album" (muted). */
.ld-tile-by { margin-top: 2px; }
.ld-tile-by .ld-tile-aname { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #6f767e !important; text-decoration: none; }
.ld-tile-by .ld-tile-aname:hover { color: #0ee59b !important; }
/* Unliked: the tile fades out, and comes back on Undo. */
.ld-tile.is-ld-unliking { opacity: 0; transform: scale(.97); transition: opacity .22s ease, transform .22s ease; }
.ld-tile.is-ld-unliked { display: none !important; }
.ld-undo { position: fixed; left: 50%; bottom: 24px; z-index: 2000; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px;
  border: 1px solid rgba(14, 229, 155, .45); border-radius: 10px; background: #0c1d17; color: #e6e8ea; font: 400 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.ld-undo button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: #0ee59b; color: #04140e; font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
body.ld-selecting .ld-undo { bottom: 88px; }
@media (max-width: 720px) {
  /* Phones (mock 1d, Liked): the switch, full width, two buttons; then the note. */
  .ld-liked-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
  .ld-liked-switch { display: grid; grid-template-columns: 1fr 1fr; }
  .ld-liked-switch a { min-height: 40px; }
  /* The phone grid (as Files): the ♡ pill stays, bottom left; the video length gives it the corner. */
  .ld-gp-listing:has(> .ld-liked-bar) .ld-tile--file .ld-tile-likes { display: flex !important; left: 6px; right: auto; bottom: 6px; }
  .ld-gp-listing:has(> .ld-liked-bar) .ld-tile--file .list-item-duration { display: none !important; }
  .ld-undo { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .ld-undo button { min-height: 44px; padding: 0 16px; }
}


/* Signup's plan picker a little wider (owner, 3 Oct 2026: "cards look squeezed together"; keep space on both sides): the
   page's frame grows from 1280px to 1520px, so each of the five cards gains about 50px; wide screens keep their side
   margins. registration.css is pinned: at the next re-publication this moves there (runtime-change-runbook.md). */
.ld-registration:not(.ld-membership-plans) .ld-wrap { max-width: 1520px; }

/* One ring and one emblem size everywhere (owner, 3 Oct 2026: "uniform emblem and accent ring width throughout the
   website"; the phone menu's emblem was half the avatar). Every tier ring is a 2px dark gap and a 3px ring, at any avatar
   size (the profile's large one keeps its glow); every avatar emblem is a third of the avatar's width (at least 18px:
   owner, 3 Oct 2026, the header's 14px was too small), its centre on the ring's centre line at the lower right (45°):
   the line is half the avatar plus 3.5px (the 2px gap and half the 3px ring) from the centre, so the emblem's centre is
   0.14645 × the avatar − 2.475px in from the avatar's right and bottom edges. Overrides badges.css (pinned; runbook
   "Pending") and the per-page sizes that drifted (Explore cards, Settings, the profile's own border inside the ring). */
.ld-avatar > .ld-ring, .ld-avatar.is-large > .ld-ring { box-shadow: 0 0 0 2px #0b0d13, 0 0 0 5px rgb(var(--ld-tier)) !important; }
.ld-avatar.is-large > .ld-ring { box-shadow: 0 0 0 2px #0b0d13, 0 0 0 5px rgb(var(--ld-tier)), 0 0 40px rgba(var(--ld-tier), .32) !important; }
.ld-gp-avatar .user-image.ld-ring { border-width: 0 !important; }
.ld-avatar .ld-avatar-emblem, .ld-avatar.is-large .ld-avatar-emblem, .ld-x-user-av .ld-avatar-emblem, #ld-settings .ld-set-avatar-pic.ld-avatar.is-large .ld-avatar-emblem {
  --ld-em: max(18px, calc(var(--ld-avatar, 32px) / 3)); width: var(--ld-em) !important; height: var(--ld-em) !important;
  right: calc(var(--ld-avatar, 32px) * 0.14645 - 2.475px - var(--ld-em) / 2) !important;
  bottom: calc(var(--ld-avatar, 32px) * 0.14645 - 2.475px - var(--ld-em) / 2) !important; }

/* The profile's avatar ring as the server draws it (views/user.php; owner, 3 Oct 2026, no flicker): badges.js measured
   its size and added is-large (the glow) on wider screens; here the screen width decides: 116px with the glow, 88px on
   phones without. */
.ld-gp-avatar > .ld-avatar { --ld-avatar: 116px; }
@media (min-width: 721px) {
  .ld-gp-avatar > .ld-avatar > .ld-ring { box-shadow: 0 0 0 2px #0b0d13, 0 0 0 5px rgb(var(--ld-tier)), 0 0 40px rgba(var(--ld-tier), .32) !important; }
}
@media (max-width: 720px) { .ld-gp-avatar > .ld-avatar { --ld-avatar: 88px; } }

/* Sign-in family: the logo exactly where the site header has it (owner, 3 Oct 2026: "it changes position on those
   pages"): 13px down in a 50px row, 10px in from Chevereto's content width (which centres at 1800px and 2440px wide).
   Phones keep the banner's height. Belongs in auth.css: moves there at the next re-publication
   (runtime-change-runbook.md). */
body.ld-auth-page .ld-auth-top { box-sizing: border-box; width: 100%; height: 50px; margin: 0 auto; padding: 13px 10px; }
@media (min-width: 992px) and (max-width: 1920px) { body.ld-auth-page .ld-auth-top { max-width: 1800px; } }
@media (min-width: 1921px) and (max-width: 2560px) { body.ld-auth-page .ld-auth-top { max-width: 2440px; } }
@media (min-width: 3840px) { body.ld-auth-page .ld-auth-top { max-width: 3720px; } }
@media (max-width: 600px) { body.ld-auth-page .ld-auth-top { height: 200px; padding: 13px 10px; align-items: flex-start; } }

/* Skeleton loading (owner, 3 Oct 2026: "dynamically generated skeleton loading animation on every listing page …
   profile page", not the homepage). One look everywhere: the dark box the content will fill, with a soft light passing
   over it. html.ld-skel is set in <head> (head.php) on every page but the homepage, so it is there at the first paint.
   - A tile's picture: the light runs under the picture until it has loaded (gallery.js marks it .is-ld-in, then the light
     stops); a cached picture covers it at once, so nothing flashes.
   - Content on its way (Load more, sub-albums, profile search): placeholder tiles shaped like the listing's own
     (LD.skel.tiles: the last tile's picture proportions and text lines), shown only if the wait passes 150 ms.
   - Explore's in-place tabs, pages and search: the listing's own items turn into skeletons where they stand.
   - A profile cover still loading. */
@keyframes ld-skel-pass { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes ld-skel-sweep { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
.ld-skel .ld-tile-pic::before, .ld-skel-box::before, .ld-skel-cover::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .09) 50%, transparent 80%); transform: translateX(-100%);
  animation: ld-skel-pass 1.4s ease-in-out infinite; }
.ld-skel .ld-tile-pic.is-ld-in::before { content: none; }
.ld-skel-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; pointer-events: none; }
.ld-skel-box { position: relative; overflow: hidden; border-radius: 10px; background: #141820; }
.ld-skel-pic { width: 100%; aspect-ratio: 4 / 3; }
.ld-skel-line { width: 78%; height: 12px; border-radius: 6px; }
.ld-skel-line.is-short { width: 46%; }
.ld-skel-cover { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Explore, loading another tab, page or search (after 150 ms; explore.js): the items keep their place and size. */
.ld-explore.is-skel .ld-x-listing { opacity: 1; }
.ld-explore.is-skel .ld-x-listing .ld-tile-pic > *, .ld-explore.is-skel .ld-x-listing .ld-tile-media > :not(.ld-tile-pic) { visibility: hidden; }
.ld-explore.is-skel .ld-x-listing .ld-tile-pic::before { content: ""; }
.ld-explore.is-skel .ld-x-listing .ld-tile-desc > * { border-radius: 5px; background: #141820; }
.ld-explore.is-skel .ld-x-listing .ld-tile-desc * { color: transparent !important; border-color: transparent !important; }
.ld-explore.is-skel .ld-x-listing .ld-tile-desc img, .ld-explore.is-skel .ld-x-listing .ld-tile-desc svg { visibility: hidden; }
.ld-explore.is-skel .ld-x-listing .list-item:not(.ld-tile) { position: relative; }
.ld-explore.is-skel .ld-x-listing .list-item:not(.ld-tile) > * { visibility: hidden; }
.ld-explore.is-skel .ld-x-listing .list-item:not(.ld-tile)::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .09) 50%, transparent 80%) 0 0 / 200% 100% no-repeat, #141820;
  animation: ld-skel-sweep 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ld-skel .ld-tile-pic::before, .ld-skel-box::before, .ld-skel-cover::before, .ld-explore.is-skel .ld-x-listing .ld-tile-pic::before { animation: none; transform: none; background: rgba(255, 255, 255, .03); }
  .ld-explore.is-skel .ld-x-listing .list-item:not(.ld-tile)::after { animation: none; }
}

/* /signup › Create your account: the 30-minute notice as wide as the form under it (owner, 3 Oct 2026), not the page.
   registration.css is pinned: moves there (.ld-registration .ld-claim) at the next re-publication (runbook). */
.ld-registration .ld-claim { max-width: 440px; box-sizing: border-box; }

/* The billing country as a searchable dropdown (LD.pick.countries; owner, 3 Oct 2026): its button in the billing form's
   own field look, the placeholder ("Select country") quieter, red when the browser flags it as required and empty. */
.ld-billing-field .ld-pick-button { height: auto; min-height: 44px; padding: 10px 12px; border: 1px solid #68778a; border-radius: 8px; background: #0f1216;
  color: #f4f5f7; font: inherit; }
.ld-billing-field .ld-pick.is-empty .ld-pick-current { color: #8b929a; }
.ld-billing-field .ld-pick.is-invalid .ld-pick-button { border-color: #e0899a; }
.ld-billing-field .ld-pick-button:focus-visible { outline: 2px solid #0ee59b; outline-offset: 1px; }
.ld-pick.is-flat .ld-pick-row { padding-left: 12px; }
/* Inside the billing form, its rule for every input (.ld-billing-fields .ld-billing-field input: full width, 44px tall,
   bordered) reached the picker's own radios and search box: the radios became full-width boxes and the names went out of
   sight (owner, 3 Oct 2026, /signup). Undone here; a flat list shows its choice by the row's highlight, as the plain
   lists do. */
.ld-billing-field .ld-pick .ld-pick-row input[type=radio] { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0;
  border: 0; opacity: 0; pointer-events: none; }
.ld-billing-field .ld-pick .ld-pick-row:has(input:focus-visible) { outline: 2px solid #0ee59b; outline-offset: -2px; }
.ld-billing-field .ld-pick .ld-pick-filter { min-height: 40px; padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(127, 127, 127, .25);
  border-radius: 0; background: transparent; box-shadow: none; }
.ld-billing-field .ld-pick .ld-pick-name { color: #e6e8ea; }
/* The page's focus ring (signup's 3px amber outline) showed only as a line under the search box, clipped by the list's
   edge: the box marks its focus with its own green bottom edge instead. */
.ld-billing-field .ld-pick .ld-pick-filter:focus, .ld-billing-field .ld-pick .ld-pick-filter:focus-visible { outline: none; border-bottom-color: #0ee59b; }

/* Grid | Stream switching to a new page (gallery.js LD.album.switching, owner 3 Oct 2026): the tiles give way at once to
   placeholders shaped like the view that is loading. */
.pad-content-listing.ld-switching > .list-item { display: none !important; }
:is(.ld-album, .ld-explore).is-stream .pad-content-listing.ld-switching { display: block !important; }
:is(.ld-album, .ld-explore).is-stream .ld-skel-tile.is-switch { max-width: 1160px; margin: 0 auto 34px; }

/* The private-album note in the image page's Embed codes tab (Chevereto's growl; owner 3 Oct 2026: it ran past the pane
   in Chevereto's mint): our note card, the pane's width, with the "hidden" icon. Chevereto shows and hides it by its
   display, so the card stays a block and the icon is placed, not laid out. Empty (a public album): nothing. */
.ld-iv-pane #tab-embeds .c24:has(> .growl[data-content="privacy-private"]) { width: auto !important; max-width: 100%; margin: 0 !important; }
.ld-iv-pane #tab-embeds .growl[data-content="privacy-private"] {
  position: relative; inset: auto !important; transform: none !important; width: auto !important; max-width: 100% !important;
  margin: 0 0 18px !important; padding: 10px 12px 10px 36px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: 10px !important; box-shadow: none !important;
  background: rgba(255, 255, 255, .035) !important; color: #c3c9d0 !important; text-align: left !important;
  font: 400 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; overflow-wrap: anywhere;
}
.ld-iv-pane #tab-embeds .growl[data-content="privacy-private"]::before {
  content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; background: #8b929a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='m2 2 20 20'/%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 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ld-iv-pane #tab-embeds .growl[data-content="privacy-private"]:empty { display: none !important; }

/* Loading without text or spinners (owner, 3 Oct 2026): the listing viewer's full size arrives under the skeleton's passing
   light (LD.skel.sweep, a see-through box above the preview), not the spinner; while a picture is on its way its alt
   text (the file's title) never shows, on the image page or in the viewer: the skeleton box is what shows. */
.ld-lv .ld-lv-loading { display: none !important; }
.ld-skel-box.ld-skel-sweep { position: absolute; z-index: 2; background: transparent !important; border-radius: 6px; pointer-events: none; overflow: hidden; }
#image-viewer img, .ld-lv .viewer-src { color: transparent; }

/* The image page reached by Next / Previous (owner, 3 Oct 2026; LD.iv.go, image.php's flag): the picture slides in from the
 * side it came from, as the phone's swipe sends it out. */
/* From the 35% the last page's picture was left at (LD.iv.go), so the hand-over has no dark frame. */
@keyframes ld-iv-in-next { from { transform: translateX(40%); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes ld-iv-in-prev { from { transform: translateX(-40%); opacity: .35; } to { transform: none; opacity: 1; } }
/* The listing viewer's entrance (LD.viewerDrag.enter): the whole stage from 40% over 200 ms, once the picture is in
 * (ld-iv-in-wait). The stage moves, not the pictures in it: Chevereto copies them when it swaps in the full file, and a
 * copy would start the animation again (owner, 3 Oct 2026: "ghosting … image jumping around"). */
.ld-iv #image-viewer.ld-iv-in-wait { opacity: 0; }
.ld-iv #image-viewer.ld-iv-in-next { animation: ld-iv-in-next .2s ease-out both; }
.ld-iv #image-viewer.ld-iv-in-prev { animation: ld-iv-in-prev .2s ease-out both; }
.ld-iv-media:has(#image-viewer.ld-iv-in-next), .ld-iv-media:has(#image-viewer.ld-iv-in-prev), .ld-iv-media:has(#image-viewer.ld-iv-out) { overflow: hidden; }