/* ====================================================================
 * Portfolio Upload Modal — Phase 7.10
 * Visual contract: designs/portfolio-modal/portfolio-upload-modal-B-v4.html
 * ====================================================================
 *   - Scrim + 820×680 modal (full-screen sheet < 640px)
 *   - Drop zone + video link input (empty state)
 *   - 4-col preview grid (2-col mobile) + add-more tile
 *   - Bulk metadata footer (Category | Album | Date / Pin As + Featured)
 *   - Inline per-item edit drawer below the grid
 *   - Featured cap soft warning + progress bar during upload
 * ==================================================================== */

/* ─── Scrim ─────────────────────────────────────────────────────────── */
.lm-pf-scrim {
  position: fixed;
  inset: 0;
  background: rgba(8, 16, 20, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* High z-index so the backdrop sits above any site chrome (header,
     sidebar, sticky footers) — was 1000 which let some elements bleed
     through. */
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lm-pf-modal { z-index: 9999; position: relative; }
.lm-pf-scrim[hidden] { display: none !important; }
/* Phase 7.10 R3 — fix HTML `hidden` attribute on flex/grid children.
   `.lm-pf-album-create { display: flex }` was beating the UA
   `[hidden] { display: none }` rule, so element.hidden = true had no
   visual effect (Cancel button stayed visible after album save, etc).
   Scoped to .lm-pf-scrim so we don't leak the !important elsewhere. */
.lm-pf-scrim [hidden] { display: none !important; }

/* ─── Modal frame ───────────────────────────────────────────────────── */
.lm-pf-modal {
  background: var(--lm-bg, #ffffff);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
  width: 820px;
  max-width: 100%;
  /* Phase 7.10 R8e — bumped from 90vh to 96vh so two rows of 4/5
     thumbnails fit without the body scrolling. Header/meta/footer
     are fixed-height; the body (.lm-pf-body) flexes between them. */
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Phase 2.9 — visual reorder via flex `order` so the meta block
   (Category / Date / Album dropdowns) sits ABOVE the body (photo grid)
   without rewriting the template. Dropdowns now open downward into
   the body with plenty of room. Default order is 0 for unannotated
   children, so explicit orders here. */
.lm-pf-modal > .lm-pf-head     { order: 1; }
.lm-pf-modal > .lm-pf-meta     { order: 2; }
.lm-pf-modal > .lm-pf-body     { order: 3; }
.lm-pf-modal > .lm-pf-vlink-bar{ order: 4; }
.lm-pf-modal > .lm-pf-foot     { order: 5; }
/* Mobile drag handle — hidden on desktop, grab bar at the top of the sheet. */
.lm-pf-grab { display: none; }
@media (max-width: 640px) {
  /* Bottom sheet sized to its content (was a forced full-height 100vh modal that
     left a big empty gap below the dropzone) + rounded top like the other mobile
     sheets, so it doesn't take more space than it needs. */
  .lm-pf-scrim { padding: 0; align-items: flex-end; }
  .lm-pf-modal { width: 100%; height: auto; max-height: 94vh; border-radius: 18px 18px 0 0; }
  .lm-pf-grab {
    display: block; order: 0; flex: none;
    width: 38px; height: 4px; margin: 9px auto 1px;
    border-radius: 999px; background: var(--lm-border, #cbd5e1);
  }
  .lm-pf-body { min-height: 0; }
  /* Footer stacks: "{n} items · {size} total" on its own row, Cancel + Upload
     full-width on the next row (was cramped side-by-side, clipping the buttons). */
  .lm-pf-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .lm-pf-foot-left { text-align: left; }
  .lm-pf-foot-actions { width: 100%; }
  .lm-pf-foot-actions .lm-pf-btn { flex: 1 1 0; }
}

/* ─── Header ────────────────────────────────────────────────────────── */
.lm-pf-head {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--lm-border-2, #eef2f6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: none;
}
.lm-pf-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--lm-text, #0f172a);
}
.lm-pf-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--lm-surface, #f8fafc);
  border: none;
  display: grid;
  place-items: center;
  color: var(--lm-muted, #64748b);
  cursor: pointer;
  transition: background .12s;
}
.lm-pf-close:hover { background: var(--lm-surface-2, #f1f5f9); color: var(--lm-text, #0f172a); }

/* ─── Body (scrollable) ─────────────────────────────────────────────── */
.lm-pf-body {
  /* Phase 7.10 R8e — tighter padding (was 18px 22px) gives the grid
     ~12px more vertical room so a second thumbnail row fits without
     scrolling on a typical laptop viewport. */
  padding: 12px 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Empty state: drop zone + video link ───────────────────────────── */
.lm-pf-drop {
  border: 2px dashed var(--lm-border, #e2e8f0);
  border-radius: 12px;
  background: var(--lm-surface, #f8fafc);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--lm-text-secondary, #475569);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.lm-pf-drop:hover,
.lm-pf-drop.is-drag {
  border-color: var(--lm-client, #00363f);
  background: var(--lm-client-soft, #eef5f6);
}
.lm-pf-drop-glyph {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  display: grid;
  place-items: center;
  color: var(--lm-client, #00363f);
}
.lm-pf-drop h3 {
  margin: 6px 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lm-text, #0f172a);
  letter-spacing: -0.01em;
}
.lm-pf-drop-hint {
  font-size: 12.5px;
  color: var(--lm-muted, #64748b);
  line-height: 1.5;
}
/* Each hint sits on its own line: row 2 = "or click to browse", row 3 = size limits. */
.lm-pf-drop-hint-line { display: block; }
.lm-pf-drop-hint strong { color: var(--lm-text, #0f172a); font-weight: 600; }
.lm-pf-drop-accept {
  margin-top: 4px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--lm-muted-2, #94a3b8);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lm-pf-or {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--lm-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 6px 0 4px;
}
.lm-pf-or::before, .lm-pf-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lm-border-2, #eef2f6);
}
.lm-pf-vlink {
  display: flex;
  align-items: stretch;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}
.lm-pf-vlink-icon {
  padding: 0 10px;
  background: var(--lm-surface, #f8fafc);
  border-right: 1px solid var(--lm-border, #e2e8f0);
  display: grid;
  place-items: center;
  color: var(--lm-muted, #64748b);
}
.lm-pf-vlink-input {
  flex: 1 1 auto;
  min-width: 0;            /* allow the input to shrink so the Attach button is never clipped */
  border: none;
  background: transparent;
  outline: none;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--lm-text, #0f172a);
}
.lm-pf-vlink-btn {
  flex: 0 0 auto;          /* keep full button width; never shrink/clip */
  white-space: nowrap;
  border: none;
  background: var(--lm-client, #00363f);
  color: #fff;
  padding: 0 14px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}
.lm-pf-vlink-btn:hover { background: var(--lm-client-strong, #012a31); }

/* ─── Filled state: preview grid ────────────────────────────────────── */
.lm-pf-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) { .lm-pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .lm-pf-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.lm-pf-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Critical: grid items default to min-width:auto which means the cell
     can't shrink below its content width. With a large image inside,
     the cell ignores the 1fr template and stretches to the image's
     natural width — blowing up the aspect-ratio'd thumbnail. */
  min-width: 0;
}
.lm-pf-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #475569, #1e293b);
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
}
.lm-pf-thumb:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .15); }
.lm-pf-thumb.is-editing { outline: 2.5px solid var(--lm-client, #00363f); outline-offset: 2px; }
.lm-pf-thumb img,
.lm-pf-thumb video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lm-pf-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

/* Category chip on the upload-preview thumbnail.
   Phase 2.9 — moved from top-left to BOTTOM-left so it mirrors the
   date chip on the right and matches the grid-thumbnail layout. */
.lm-pf-cat-chip {
  position: absolute;
  bottom: 6px; left: 6px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* Top-right action stack on each thumbnail: [★ Featured] [✕ Remove].
   .lm-pf-actions positions the cluster; siblings sit side-by-side. */
.lm-pf-actions {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  display: flex;
  gap: 4px;
}

/* Featured star — icon only, no text. Now sits inside .lm-pf-actions
   (position:static), the absolute positioning lives on the parent. */
.lm-pf-star-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  /* Sits over the uploaded photo (any brightness), so the pill must be a
     FULLY OPAQUE dark chip (no alpha, no backdrop-filter frosting) with a
     light ring + drop shadow — stays readable on a pure-white image as
     well as a dark one, in either theme. */
  background: #111827;
  border: 1px solid rgba(255, 255, 255, .55);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  transition: background .15s, color .15s, box-shadow .15s;
}
.lm-pf-star-btn svg { width: 14px; height: 14px; }
.lm-pf-star-btn:hover { background: #1f2937; color: #fff; }
.lm-pf-star-btn.is-on {
  background: #111827;
  border-color: var(--lm-gold, #C6A15B);
  color: var(--lm-gold, #C6A15B);
  box-shadow: 0 2px 8px rgba(198, 161, 91, .4);
}
.lm-pf-star-btn.is-on svg { fill: var(--lm-gold, #C6A15B); }
.lm-pf-star-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Remove (✕) button — same chrome as the star, turns red on hover so
   the destructive intent reads clearly. Sits to the RIGHT of the star. */
.lm-pf-del-btn {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, .55);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  transition: background .15s, color .15s, border-color .15s;
  padding: 0;
}
.lm-pf-del-btn svg { width: 13px; height: 13px; }
.lm-pf-del-btn:hover {
  background: rgba(192, 57, 43, .85);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

/* Album label (bottom-left) — stacked-cards icon + album name */
.lm-pf-album-mark {
  position: absolute;
  left: 6px; bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .65);
  color: #fff;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.lm-pf-album-mark svg { width: 10px; height: 10px; flex: none; }
.lm-pf-album-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Video play overlay */
.lm-pf-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  color: rgba(255, 255, 255, .9);
  z-index: 1;
}
.lm-pf-play svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* Provider badge (overrides chip styling for video links) */
.lm-pf-provider-badge { position: absolute; bottom: 6px; right: 6px; z-index: 2; opacity: .9; }

/* Filename under thumbnail */
.lm-pf-thumb-name {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--lm-text-secondary, #475569);
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
  line-height: 1.2;
}

/* Add-more tile */
.lm-pf-add {
  aspect-ratio: 4 / 5;
  border: 2px dashed var(--lm-border, #e2e8f0);
  border-radius: 10px;
  background: var(--lm-surface, #f8fafc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--lm-muted, #64748b);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
}
.lm-pf-add:hover { background: var(--lm-client-soft, #eef5f6); border-color: var(--lm-client, #00363f); color: var(--lm-text, #0f172a); }
.lm-pf-add .plus {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  display: grid; place-items: center;
  color: var(--lm-text-secondary, #475569);
}

/* ─── Per-item edit drawer ──────────────────────────────────────────── */
.lm-pf-edit {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--lm-surface, #f8fafc);
  border: 1px solid var(--lm-client, #00363f);
  border-radius: 12px;
  margin-top: 8px;
}
.lm-pf-edit-thumb {
  width: 80px; height: 100px;
  flex: none;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
  position: relative;
}
/* Video items get a small play glyph centred on the drawer thumbnail
   so the user can tell at a glance that the selected item is a video,
   not a static image. */
.lm-pf-edit-thumb.is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.5) 0 22px, transparent 22px),
    /* play triangle */
    linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  pointer-events: none;
}
.lm-pf-edit-thumb.is-video::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  pointer-events: none;
  z-index: 1;
}
.lm-pf-edit-form { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lm-pf-edit-head {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lm-muted, #64748b);
}
.lm-pf-edit-head .lm-pf-edit-name { color: var(--lm-text, #0f172a); margin-left: 6px; }
.lm-pf-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lm-pf-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
  .lm-pf-edit { flex-direction: column; }
  .lm-pf-edit-thumb { width: 100%; height: 140px; }
}

/* ─── Featured cap soft warning ─────────────────────────────────────── */
.lm-pf-limit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--lm-surface, #f8fafc);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-left: 3px solid var(--lm-danger, #c0392b);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--lm-text-secondary, #475569);
}
.lm-pf-limit svg { color: var(--lm-danger, #c0392b); margin-top: 1px; flex: none; }
.lm-pf-limit strong { color: var(--lm-text, #0f172a); font-weight: 700; }

/* ─── Bulk metadata footer ──────────────────────────────────────────── */
.lm-pf-meta {
  padding: 14px 22px;
  background: var(--lm-surface, #f8fafc);
  border-top: 1px solid var(--lm-border-2, #eef2f6);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}
.lm-pf-meta.is-disabled { opacity: .55; pointer-events: none; }

.lm-pf-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
@media (max-width: 640px) {
  .lm-pf-meta-row { grid-template-columns: 1fr; }
}
.lm-pf-meta-cell { display: flex; flex-direction: column; min-width: 0; }
.lm-pf-meta-cell > label {
  margin: 0 0 5px;
  font-size: 10.5px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  color: var(--lm-muted, #64748b);
  letter-spacing: .08em;
  font-weight: 700;
}
.lm-pf-meta-sub {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  color: var(--lm-muted-2, #94a3b8);
}
.lm-pf-album-create {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
/* Input grows to fill the row; Cancel button sits inline on the right
   (NOT wrapped to the next line). min-width:0 lets the input shrink. */
.lm-pf-album-create > .lm-pf-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.lm-pf-album-create > .lm-pf-btn { flex: 0 0 auto; }
.lm-pf-album-err {
  flex: 0 0 100%;          /* error message wraps to its OWN row below */
  font-size: 11.5px;
  color: var(--lm-danger, #c0392b);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

/* Row 2: Pin As · Counter · Featured toggle */
.lm-pf-meta-row2 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--lm-border, #e2e8f0);
}
.lm-pf-spacer { flex: 1; }

.lm-pf-pin-as {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.lm-pf-pin-label {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lm-muted, #64748b);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lm-pf-pin-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--lm-text, #0f172a);
  cursor: pointer;
  font-weight: 500;
}
.lm-pf-pin-opt input[type="radio"] {
  width: 14px; height: 14px;
  accent-color: var(--lm-client, #00363f);
  margin: 0;
}
.lm-pf-pin-count {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--lm-muted-2, #94a3b8);
}

.lm-pf-counter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--lm-border, #e2e8f0);
  color: var(--lm-text-secondary, #475569);
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
}
.lm-pf-counter svg { color: var(--lm-gold, #C6A15B); }
.lm-pf-counter.is-maxed {
  background: var(--lm-danger-soft, #fef2f2);
  border-color: #fecaca;
  color: var(--lm-danger, #c0392b);
}
.lm-pf-counter.is-maxed svg { color: var(--lm-danger, #c0392b); }

.lm-pf-featured-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.lm-pf-star { color: var(--lm-gold, #C6A15B); display: inline-flex; }
.lm-pf-toggle {
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--lm-border, #e2e8f0);
  border: 0;
  padding: 0;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background .15s;
}
.lm-pf-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: left .15s;
}
.lm-pf-toggle[aria-pressed="true"] { background: var(--lm-gold, #C6A15B); }
.lm-pf-toggle[aria-pressed="true"]::after { left: 16px; }
.lm-pf-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Form atoms ────────────────────────────────────────────────────── */
.lm-pf-input {
  padding: 9px 12px;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 7px;
  font-family: inherit;
  font-size: 13px;
  color: var(--lm-text, #0f172a);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.lm-pf-input:focus {
  outline: none;
  border-color: var(--lm-client, #00363f);
  box-shadow: 0 0 0 3px rgba(0, 54, 63, .12);
}
.lm-pf-input.is-error { border-color: var(--lm-danger, #c0392b); background: #fffbfb; }
select.lm-pf-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px;
  padding-right: 30px;
}

/* ─── Footer ────────────────────────────────────────────────────────── */
.lm-pf-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--lm-border-2, #eef2f6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex: none;
  background: var(--lm-bg, #fff);
}
.lm-pf-foot-left {
  font-size: 12.5px;
  color: var(--lm-muted, #64748b);
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  letter-spacing: .02em;
}
.lm-pf-foot-left strong { color: var(--lm-text, #0f172a); font-weight: 700; }
.lm-pf-foot-actions { display: flex; gap: 8px; align-items: center; }

.lm-pf-foot-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 16px;
}
.lm-pf-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--lm-surface-2, #f1f5f9);
  overflow: hidden;
}
.lm-pf-progress-fill {
  height: 100%;
  background: var(--lm-client, #00363f);
  width: 0%;
  transition: width .2s;
}
.lm-pf-progress-text {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--lm-muted, #64748b);
}

/* Buttons (scoped to modal to avoid global leak) */
.lm-pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  background: transparent;
  color: var(--lm-text, #0f172a);
  transition: background .12s, border-color .12s, color .12s;
}
.lm-pf-btn-primary {
  background: var(--lm-client, #00363f);
  color: #fff;
}
.lm-pf-btn-primary:hover { background: var(--lm-client-strong, #012a31); }
.lm-pf-btn-primary:disabled {
  background: var(--lm-surface-2, #f1f5f9);
  color: var(--lm-muted, #64748b);
  cursor: not-allowed;
}
.lm-pf-btn-ghost {
  background: transparent;
  color: var(--lm-text-secondary, #475569);
}
.lm-pf-btn-ghost:hover { background: var(--lm-surface, #f8fafc); }

/* Rate-limit / featured-cap upgrade CTA banner inside foot-left area */
.lm-pf-upsell {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--lm-danger, #c0392b);
  font-weight: 700;
}

/* ─── Dark theme ────────────────────────────────────────────────────── */
html[data-lm-theme="dark"] .lm-pf-modal {
  background: var(--lm-surface, #161b22);
  color: var(--lm-text, #e6edf3);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
html[data-lm-theme="dark"] .lm-pf-head,
html[data-lm-theme="dark"] .lm-pf-foot { background: var(--lm-surface, #161b22); border-color: var(--lm-border, #30363d); }
html[data-lm-theme="dark"] .lm-pf-meta { background: rgba(255, 255, 255, .02); border-color: var(--lm-border, #30363d); }
html[data-lm-theme="dark"] .lm-pf-input { background: var(--lm-surface, #0d1117); border-color: var(--lm-border, #30363d); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-pf-drop { background: rgba(255, 255, 255, .03); border-color: var(--lm-border, #30363d); color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-pf-drop-glyph { background: var(--lm-surface, #0d1117); border-color: var(--lm-border, #30363d); color: #6ee7a8; }
html[data-lm-theme="dark"] .lm-pf-add { background: rgba(255, 255, 255, .03); border-color: var(--lm-border, #30363d); }
/* Dark hover/drag — the dark BASE rules above outrank the plain `.lm-pf-drop:hover`
   (0,2,1 vs 0,2,0), so without these the highlight is dead in dark mode. Mint
   (#6ee7a8) instead of the light-theme teal, which disappears on a dark surface. */
html[data-lm-theme="dark"] .lm-pf-drop:hover,
html[data-lm-theme="dark"] .lm-pf-drop.is-drag {
  border-color: #6ee7a8;
  background: rgba(110, 231, 168, .08);
}
html[data-lm-theme="dark"] .lm-pf-add:hover {
  border-color: #6ee7a8;
  background: rgba(110, 231, 168, .08);
  color: #6ee7a8;
}
html[data-lm-theme="dark"] .lm-pf-edit { background: rgba(255, 255, 255, .03); border-color: var(--lm-client, #45a8b8); }
html[data-lm-theme="dark"] .lm-pf-limit { background: rgba(255, 255, 255, .03); border-color: var(--lm-border, #30363d); border-left-color: #f87171; color: var(--lm-text-secondary, #8b949e); }
html[data-lm-theme="dark"] .lm-pf-vlink { background: var(--lm-surface, #0d1117); border-color: var(--lm-border, #30363d); }
html[data-lm-theme="dark"] .lm-pf-vlink-icon { background: rgba(255, 255, 255, .04); border-color: var(--lm-border, #30363d); }

/* ────────────────────────────────────────────────────────────────────
 * Custom dropdown (.lm-pf-cd) — replaces native <select> for the
 * Category / Album / Date pickers in the bulk metadata row. Native
 * selects open UPWARD when near the modal bottom (overflowing the
 * modal frame); this custom variant always opens downward (auto-flips
 * only if there's truly no room below).
 * ──────────────────────────────────────────────────────────────────── */
.lm-pf-cd { position: relative; width: 100%; }
.lm-pf-cd-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  color: var(--lm-text, #0f172a);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, box-shadow .12s;
}
.lm-pf-cd-btn:hover { border-color: var(--lm-muted-2, #cbd5e1); }
.lm-pf-cd.is-open .lm-pf-cd-btn,
.lm-pf-cd-btn:focus-visible {
  outline: none;
  border-color: var(--lm-client, #00363f);
  box-shadow: 0 0 0 3px rgba(0, 54, 63, .12);
}
.lm-pf-cd-btn > svg:last-of-type {
  margin-left: auto;
  opacity: .7;
  transition: transform .12s;
}
.lm-pf-cd.is-open .lm-pf-cd-btn > svg:last-of-type { transform: rotate(180deg); }
.lm-pf-cd-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm-pf-cd-label[data-placeholder="1"] { color: var(--lm-muted-2, #94a3b8); }

.lm-pf-cd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--lm-bg, #fff);
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .2);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
}
/* Auto-flip when room below is short (JS adds the class). */
.lm-pf-cd.is-up .lm-pf-cd-menu { top: auto; bottom: calc(100% + 4px); }

.lm-pf-cd-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--lm-text, #0f172a);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.lm-pf-cd-item:hover {
  background: var(--lm-client-soft, #eef5f6);
  border-color: rgba(0, 54, 63, .25);
}
.lm-pf-cd-item.is-active {
  background: var(--lm-client-soft, #eef5f6);
  color: var(--lm-client, #00363f);
  font-weight: 600;
}
.lm-pf-cd-item-sentinel {
  border-top: 1px dashed var(--lm-border, #e2e8f0);
  margin-top: 4px;
  padding-top: 10px;
  color: var(--lm-client, #00363f);
  font-weight: 600;
}

html[data-lm-theme="dark"] .lm-pf-cd-btn,
html[data-lm-theme="dark"] .lm-pf-cd-menu {
  background: var(--lm-surface, #0d1117);
  border-color: var(--lm-border, #30363d);
  color: var(--lm-text, #e6edf3);
}
html[data-lm-theme="dark"] .lm-pf-cd-item { color: var(--lm-text, #e6edf3); }
html[data-lm-theme="dark"] .lm-pf-cd-item:hover {
  background: rgba(46, 161, 111, .18);
  border-color: rgba(46, 161, 111, .5);
}
html[data-lm-theme="dark"] .lm-pf-cd-item.is-active {
  background: rgba(46, 161, 111, .25);
  color: #6ee7a8;
}

/* Date overlay badge on the thumbnail (bottom-left, alongside album mark
   when both are present). Shown only when the item has a captured date. */
.lm-pf-date-mark {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .65);
  color: #fff;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.lm-pf-date-mark svg { width: 9px; height: 9px; flex: none; opacity: .85; }

/* Album-create row: ensure Save / Cancel buttons sit inline next to the
   input (one line). Save is the primary action; Cancel is the ghost. */
.lm-pf-album-create > [data-lm-pf-album-save],
.lm-pf-album-create > [data-lm-pf-album-cancel] { flex: 0 0 auto; }

/* ──────────────────────────────────────────────────────────────────────
 * Phase 7.10 R4 — restructured metadata panel.
 * Section A = Album (own row), B = Apply-to-all (Category+Date+counter),
 * C = helper tip, D = Pin-as radios (conditional).
 * ──────────────────────────────────────────────────────────────────── */

.lm-pf-meta-section {
  padding: 12px 0 4px;
  border-top: 1px dashed var(--lm-border, #e2e8f0);
}
.lm-pf-meta-section:first-child { border-top: 0; padding-top: 0; }

.lm-pf-section-h {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  color: var(--lm-muted, #64748b);
  letter-spacing: .08em;
  font-weight: 700;
}
.lm-pf-section-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 8px;
}
/* Phase 8.4.16 — Pin Album to About INLINE pill. Sits on the same row as
   the album dropdown, right of the trash icon. Compact pin-icon + label
   in a single rounded pill. Toggles via the hidden checkbox. */
.lm-pf-album-pin-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;          /* matches .lm-pf-album-clear (the X button) */
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid var(--lm-border, #e5e7eb);
  background: var(--lm-bg, #fff);
  color: var(--lm-text-secondary, #475569);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex: none;
  align-self: flex-start;
  transition: background .15s, border-color .15s, color .15s;
}
/* Phase 8.4.16 — invisible label spacer above the pin pill. The LEFT
   cell of the album row has a real "ALBUM · optional" label above its
   dropdown — this spacer reserves the SAME vertical space in the right
   cell so the pin pill sits on the same horizontal line as the
   dropdown, not above it next to where the label would be. */
.lm-pf-album-pin-spacer {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
/* Wrapper around the pin pill — mirrors .lm-pf-album-cell's flex
   row (display:flex + align-items:center) so the 36px pill vertically
   centers within the dropdown's ~39px row height. Result: pin pill's
   border sits at the same Y as the borders around the X / trash. */
.lm-pf-album-pin-wrap {
  display: flex;
  align-items: center;
  min-height: 39.5px;
}
/* When the inline album-create form is visible, hide the pin-pill wrap so
   the create input sits on the SAME row as the album dropdown (not pushed
   to a second row by the wrap's 39.5px min-height). */
.lm-pf-right-cell:has(.lm-pf-album-create:not([hidden])) .lm-pf-album-pin-wrap {
  display: none;
}
.lm-pf-album-pin-inline:hover { border-color: var(--lm-gold, #C6A15B); }
.lm-pf-album-pin-inline input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--lm-gold, #C6A15B);
}
.lm-pf-album-pin-inline svg { color: var(--lm-muted, #94a3b8); flex: none; transition: color .15s; }
.lm-pf-album-pin-inline:has(input:checked) {
  background: var(--lm-gold-soft, #fef3c7);
  border-color: var(--lm-gold, #C6A15B);
  color: var(--lm-gold-strong, #92400e);
}
.lm-pf-album-pin-inline:has(input:checked) svg { color: var(--lm-gold, #C6A15B); }
html[data-lm-theme="dark"] .lm-pf-album-pin-inline {
  background: rgba(255, 255, 255, .02);
  border-color: var(--lm-border, #2a3038);
  color: var(--lm-text-secondary, #94a3b8);
}
html[data-lm-theme="dark"] .lm-pf-album-pin-inline:has(input:checked) {
  background: rgba(198, 161, 91, .12);
  border-color: var(--lm-gold, #C6A15B);
  color: #f5deb3;
}
/* When the trash button is in "Confirm delete?" pending state it grows
   absolute-positioned across the rest of the row — hide the pin pill so
   it doesn't visually collide with the wide red pill. */
.lm-pf-album-cell:has(.lm-pf-album-trash.is-pending) .lm-pf-album-pin-inline {
  display: none !important;
}
/* Phase 8.4.15 — explicit margin-right on tier-badge so it can't
   sit flush against the Pinned counter. Was relying on parent gap +
   space-between which collapsed at narrow widths and visually
   overlapped Premium under the Pinned chip. */
.lm-pf-section-head .lm-pf-tier-badge {
  margin-right: 4px;
  flex-shrink: 0;
}
.lm-pf-section-head .lm-pf-counter {
  flex-shrink: 0;
}
.lm-pf-section-head .lm-pf-section-h { margin: 0; }

/* Album section spans full width — one column, dropdown takes 100%. */
.lm-pf-section-album .lm-pf-cd { width: 100%; }
.lm-pf-section-album .lm-pf-album-cd { max-width: 100%; }

/* Bulk grid — Category + Date side-by-side, stack on mobile. */
.lm-pf-bulk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  .lm-pf-bulk-grid { grid-template-columns: 1fr; }
}

/* Inline labels for the bulk cells (no separate <h5>, just a tight label
   above each select). */
.lm-pf-bulk-grid .lm-pf-meta-cell > label {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  color: var(--lm-muted, #64748b);
  letter-spacing: .04em;
  font-weight: 600;
}

/* Helper tip — explains the per-item star toggle. */
.lm-pf-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  border-radius: 7px;
  background: var(--lm-client-soft, #eef5f6);
  color: var(--lm-text-secondary, #475569);
  font-size: 12px;
  line-height: 1.4;
}
.lm-pf-tip em { font-style: italic; }
.lm-pf-tip-emoji { font-style: normal; flex: none; }
html[data-lm-theme="dark"] .lm-pf-tip {
  background: rgba(255, 255, 255, .04);
  color: var(--lm-text-secondary, #8b949e);
}

/* Pin As row when present — sits below the tip, slightly indented look. */
.lm-pf-pin-as {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 0 4px;
  margin-top: 6px;
  border-top: 1px dashed var(--lm-border, #e2e8f0);
}

/* Album-create row — ENFORCE single horizontal line.
   Save + Cancel are auto-width; input takes the remaining space.
   Error message wraps to its own row below if rendered. */
.lm-pf-album-create {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.lm-pf-album-create > .lm-pf-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.lm-pf-album-create > [data-lm-pf-album-save],
.lm-pf-album-create > [data-lm-pf-album-cancel] { flex: 0 0 auto; }
.lm-pf-album-create > .lm-pf-album-err {
  flex: 0 0 100%;
  order: 99;  /* wraps to its own row below the input/buttons */
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--lm-danger, #c0392b);
  font-weight: 600;
}

/* Per-item drawer Category override hint — small italic label above
   each select inside the drawer row. */
.lm-pf-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lm-pf-edit-label {
  font-size: 10.5px;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  color: var(--lm-muted, #64748b);
  letter-spacing: .04em;
  font-weight: 600;
}
.lm-pf-edit-label .lm-pf-meta-sub {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--lm-muted-2, #94a3b8);
  font-weight: 500;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────────
 * Phase 7.10 R4 — compact metadata panel + always-visible video-link bar.
 * Replaces the cushier R4 paddings with tighter spacing per user request
 * ("сделай покомпактнее"). The vlink bar sits OUTSIDE the scrollable
 * body so a tall grid can't push it below the fold.
 * ──────────────────────────────────────────────────────────────────── */

/* Compact meta panel. */
.lm-pf-meta {
  padding: 10px 18px 12px;
  gap: 6px;
}
.lm-pf-meta-section { padding: 8px 0 2px; }
.lm-pf-meta-section:first-child { padding-top: 0; }
.lm-pf-section-h { margin: 0 0 6px; }
.lm-pf-section-head { margin: 0 0 6px; }
.lm-pf-tip {
  padding: 6px 10px;
  margin-top: 6px;
  font-size: 11.5px;
}
.lm-pf-pin-as { padding: 6px 0 2px; margin-top: 4px; }

/* Drop the dashed dividers — they added visual weight without grouping
   value. The whitespace + section headers already separate clearly. */
.lm-pf-meta-section { border-top: 0; }
.lm-pf-pin-as { border-top: 0; }

/* Video-link bar — its own thin row between body and meta. */
.lm-pf-vlink-bar {
  padding: 8px 18px;
  background: var(--lm-bg, #fff);
  border-top: 1px solid var(--lm-border-2, #eef2f6);
  flex: none;
}
html[data-lm-theme="dark"] .lm-pf-vlink-bar {
  background: var(--lm-surface, #161b22);
  border-top-color: var(--lm-border, #30363d);
}
/* In empty state, body already shows drop zone + the user knows to drop
   a file — give the vlink bar a tiny "OR" hint above to make the input
   purpose unmistakable. (The huge :before/after dashes from the old
   .lm-pf-or are dropped — too noisy for a permanent bar.) */
.lm-pf-vlink-bar .lm-pf-vlink { margin: 0; }

/* Phase 7.10 R5 — 3-column bulk grid (Album | Category | Date in one row). */
.lm-pf-bulk-grid.lm-pf-bulk-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 768px) {
  .lm-pf-bulk-grid.lm-pf-bulk-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lm-pf-bulk-grid.lm-pf-bulk-grid-3 { grid-template-columns: 1fr; }
}
.lm-pf-bulk-grid-3 .lm-pf-meta-cell > label .lm-pf-meta-sub {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  color: var(--lm-muted-2, #94a3b8);
}

/* ────────────────────────────────────────────────────────────────────
 * Phase 7.10 R6 — collapsible "More options" + clearer counter / tip.
 * ──────────────────────────────────────────────────────────────────── */

/* 1-column grid for when Category sits alone above the "More options"
   toggle. 2-col for the Album+Date pair inside the collapsible panel. */
.lm-pf-bulk-grid.lm-pf-bulk-grid-1 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lm-pf-bulk-grid.lm-pf-bulk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) {
  .lm-pf-bulk-grid.lm-pf-bulk-grid-2 { grid-template-columns: 1fr; }
}

/* "More options" toggle — flat link-style button with caret that rotates. */
.lm-pf-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  margin: 6px 0 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lm-text-secondary, #475569);
  cursor: pointer;
  text-align: left;
}
.lm-pf-more-toggle:hover { color: var(--lm-client, #00363f); }
.lm-pf-more-caret { transition: transform .15s ease; flex: none; }
.lm-pf-more-toggle.is-open .lm-pf-more-caret { transform: rotate(90deg); }
.lm-pf-more-hint {
  margin-left: 4px;
  font-weight: 500;
  color: var(--lm-muted-2, #94a3b8);
  font-size: 11.5px;
}

/* Collapsible panel — kept simple (no smooth height anim) because the
   content has variable height that browsers can't transition cleanly
   without JS-measured pixel values. Just hide/show. */
.lm-pf-more-panel {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Counter row — own line above the helper tip. */
.lm-pf-counter-row {
  display: flex;
  margin-top: 4px;
}
.lm-pf-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--lm-border, #e2e8f0);
  background: var(--lm-bg, #fff);
  font-size: 12px;
  color: var(--lm-text-secondary, #475569);
  cursor: help;
  transition: background .15s, border-color .15s;
}
.lm-pf-counter svg { color: var(--lm-gold, #C6A15B); flex: none; }
.lm-pf-counter strong { color: var(--lm-text, #0f172a); font-weight: 700; }
.lm-pf-counter-sep { color: var(--lm-muted-2, #94a3b8); }
.lm-pf-counter.is-maxed {
  background: var(--lm-danger-soft, #fef2f2);
  border-color: #fecaca;
  color: var(--lm-danger, #c0392b);
}
.lm-pf-counter.is-maxed svg { color: var(--lm-danger, #c0392b); }
.lm-pf-counter.is-maxed strong { color: var(--lm-danger, #c0392b); }

/* +1 / -1 pulse animation fires when the counter number changes
   (added via JS, then removed for next pulse cycle). */
@keyframes lm-pf-counter-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(46, 161, 111, .35); }
  35%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(46, 161, 111, .0); }
  100% { transform: scale(1); }
}
.lm-pf-counter.is-pulse { animation: lm-pf-counter-pulse .42s ease-out; }

/* Helper tip — heavier, more visible. */
.lm-pf-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--lm-client-soft, #eef5f6);
  color: var(--lm-text, #0f172a);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}
.lm-pf-tip em { font-style: normal; }
.lm-pf-tip-emoji { font-size: 15px; flex: none; line-height: 1.2; }
html[data-lm-theme="dark"] .lm-pf-tip {
  background: rgba(46, 161, 111, .12);
  color: var(--lm-text, #e6edf3);
}

/* Pin As — descriptive labels need a bit more room. */
.lm-pf-pin-opt { gap: 8px; }

/* ────────────────────────────────────────────────────────────────────
 * Phase 7.10 R7 — tier-aware pin cap + audience-aware tooltip +
 * upgrade CTA + first-time toast.
 * ──────────────────────────────────────────────────────────────────── */

/* Counter row now hosts the pin counter + the upgrade CTA on its right. */
.lm-pf-counter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.lm-pf-upgrade {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--lm-client, #00363f);
  text-decoration: none;
  letter-spacing: .02em;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--lm-client-soft, #eef5f6);
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.lm-pf-upgrade:hover {
  background: var(--lm-client, #00363f);
  color: #fff;
}
html[data-lm-theme="dark"] .lm-pf-upgrade {
  background: rgba(46, 161, 111, .14);
  color: #6ee7a8;
}
html[data-lm-theme="dark"] .lm-pf-upgrade:hover {
  background: rgba(46, 161, 111, .28);
}

/* First-time tip toast — slides up from the bottom-left of the modal,
   non-blocking, auto-dismisses after 8s OR persists-dismissed on ✕. */
.lm-pf-toast {
  position: absolute;
  left: 18px;
  bottom: 76px;   /* clears the footer height */
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 380px;
  padding: 10px 12px 10px 14px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.4;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, .35);
  animation: lm-pf-toast-in .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes lm-pf-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lm-pf-toast-msg { flex: 1; min-width: 0; }
.lm-pf-toast-x {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
  border: 0;
  color: rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: background .12s;
}
.lm-pf-toast-x:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Phase 7.10 R7b — Pin As inline with the counter (pushed right via
   margin-left:auto inside .lm-pf-counter-row). Old standalone-row
   styles dropped: no top border, no separate padding. */
.lm-pf-pin-as {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  padding: 0;
  border-top: 0;
  font-size: 12.5px;
}
.lm-pf-pin-as .lm-pf-pin-label {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lm-muted, #64748b);
  font-weight: 700;
}
.lm-pf-counter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Upgrade CTA: when Pin-As is also present, sit after it; when only
   counter is on the row, push to the far right. */
.lm-pf-counter-row > .lm-pf-upgrade { margin-left: auto; }
.lm-pf-counter-row > .lm-pf-pin-as + .lm-pf-upgrade { margin-left: 12px; }
@media (max-width: 640px) {
  .lm-pf-pin-as { margin-left: 0; }
}

/* ────────────────────────────────────────────────────────────────────
 * Phase 7.10 R7c — counter + tip in section head; Pin As is the
 * right-column sibling of the Album dropdown.
 * ──────────────────────────────────────────────────────────────────── */

/* Section head — DETAILS h5 + counter + inline tip on ONE row. */
.lm-pf-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
/* Section head layout (left → right):
     DETAILS  ............  [TIER BADGE]  📌 Pinned · N/M
   The TIER BADGE carries `margin-left: auto` to push itself + the
   counter against the right edge; counter follows it directly. */
.lm-pf-section-head .lm-pf-counter { flex: none; margin-left: 0; }
.lm-pf-section-head .lm-pf-tier-badge { margin-left: auto; }
.lm-pf-headline-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lm-text-secondary, #475569);
  font-style: italic;
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.lm-pf-headline-tip span:not([aria-hidden]) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bulk grid-2 — slightly wider gap so the Pin-As cell breathes from
   the Album dropdown on the left. */
.lm-pf-bulk-grid.lm-pf-bulk-grid-2 { gap: 18px; }
.lm-pf-pin-as-cell { padding-left: 4px; }
@media (max-width: 640px) {
  .lm-pf-bulk-grid.lm-pf-bulk-grid-2 { gap: 10px; }
  .lm-pf-pin-as-cell { padding-left: 0; }
}
@media (max-width: 640px) {
  .lm-pf-section-head .lm-pf-counter { margin-left: 0; }
}

/* Pin As cell inside the Album row — same shape as a meta-cell.
   The row of radios sits where a dropdown would, so they align
   vertically with the album dropdown value. */
.lm-pf-pin-as-cell .lm-pf-pin-as-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 38px;     /* matches .lm-pf-cd-btn height for alignment */
  padding: 0 2px;
}
.lm-pf-pin-as-cell .lm-pf-pin-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

/* Standalone upgrade CTA row — own line below the album+pin-as row,
   only visible when at cap. */
.lm-pf-upgrade-row {
  display: inline-block;
  margin-top: 2px;
  align-self: flex-start;
}

/* ────────────────────────────────────────────────────────────────────
 * Phase 7.10 R8 — counter dark hover tooltip + tier membership badge.
 * ──────────────────────────────────────────────────────────────────── */

/* Styled hover tooltip on the counter (replaces native `title` so the
   look matches the rest of the LM tooltips + appears instantly, no OS
   delay). Triggered by data-lm-pf-tip attribute set by JS. */
.lm-pf-counter-tip { position: relative; }
.lm-pf-counter-tip::after {
  content: attr(data-lm-pf-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #0f172a;
  color: #fff;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  font-style: normal !important;
  letter-spacing: .01em;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: 8px;
  /* Wider + nowrap so the tooltip text always sits on a single line
     ("📌  Pinned items appear in your About tab.") — no awkward 2-line
     wrap. */
  max-width: 540px;
  width: max-content;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  text-align: left;
  text-transform: none;
}
.lm-pf-counter-tip:hover::after,
.lm-pf-counter-tip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
html[data-lm-theme="dark"] .lm-pf-counter-tip::after {
  background: #1f2937;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .55);
}

/* Phase 7.10 P3 — tier-badge rendering DELEGATED to the canonical
   .lm-tier / .lm-tier-{slug} rules in lm-profile.css. The modal JS
   stamps the same markup as _lm_tier_inline.tpl, so the badge looks
   identical to every other tier surface (sidebar, hero, etc.). The
   fake `.lm-pf-tier-badge.lm-pf-tier-*` colour variants were removed
   so they can't shadow the real palette. .lm-pf-counter-tip stays on
   the wrapper so the hover-tooltip ::after still fires.

   Defensive re-statement of the canonical palette below — scoped to
   .lm-pf-modal + !important so no surrounding modal rule (defensive
   overrides, button greens, etc.) can shadow the tier colours. The
   palette is a duplicate of the lm-profile.css block; keep them in
   lockstep if the canonical version is ever redesigned. */
.lm-pf-tier-badge { flex: none; }
.lm-pf-modal .lm-tier {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 7px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  font-family: var(--lm-font-mono, ui-monospace, monospace) !important;
  line-height: 1 !important;
  /* Phase 8.4.16 — clipping fix. Without these the PREMIUM word was
     truncating to "PREM" in some flex contexts (section-head) where
     a sibling with its own `flex: none` was crowding the badge into
     a too-small allocation, and the implicit `min-width: auto` did
     not protect it. Force the badge to its content size in every
     direction so nothing can shrink/clip it. */
  white-space: nowrap !important;
  min-width: max-content !important;
  width: max-content !important;
  flex: 0 0 max-content !important;
  overflow: visible !important;
}
.lm-pf-modal .lm-tier-pro {
  background: #3b82f6 !important;
  border: 1px solid #2563eb !important;
  color: #fff !important;
}
.lm-pf-modal .lm-tier-vip {
  background: linear-gradient(135deg, #fef7d6, #f5deb3) !important;
  border: 1px solid #d4a93f !important;
  color: #6e4a04 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(180, 83, 9, 0.15) !important;
}
.lm-pf-modal .lm-tier-vip svg { color: #6e4a04 !important; fill: #6e4a04 !important; }
.lm-pf-modal .lm-tier-elite {
  background: linear-gradient(135deg, #1f2937, #0f172a) !important;
  border: 1px solid #d4a93f !important;
  color: #f5deb3 !important;
}
.lm-pf-modal .lm-tier-elite svg { color: #f5deb3 !important; fill: #f5deb3 !important; }
.lm-pf-modal .lm-tier-verified {
  background: var(--lm-primary-soft, #d8f3e7) !important;
  border: 1px solid var(--lm-primary-soft-2, #b6e6cf) !important;
  color: var(--lm-primary-strong, #0a6b46) !important;
}
.lm-pf-modal .lm-tier-business {
  background: rgba(0, 54, 63, 0.10) !important;
  border: 1px solid rgba(0, 54, 63, 0.30) !important;
  color: #00363f !important;
}
/* Premium = canonical change-plan look; diamond is the inline SVG in the
   span (no ::before, no extra left padding). */
.lm-pf-modal .lm-tier-premium {
  background: #14161C !important;
  color: #D4A93F !important;
  border: 1px solid #EAD9A8 !important;
}

/* Phase 7.10 R8c — "+ Add to album" pill button (replaces checkbox).
   Click once → hides; album row reveals. Stays expanded until the
   modal is reset.
   align-self:flex-start keeps the pill at its content width inside
   .lm-pf-meta's flex column (which otherwise stretches children full
   row width). */
.lm-pf-add-album-btn {
  display: inline-flex;
  align-self: flex-start;
  width: auto;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px dashed var(--lm-client, #00363f);
  background: transparent;
  color: var(--lm-client, #00363f);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-style .12s;
}
.lm-pf-add-album-btn:hover {
  background: var(--lm-client-soft, #eef5f6);
  border-style: solid;
}
.lm-pf-add-album-btn svg { flex: none; }
html[data-lm-theme="dark"] .lm-pf-add-album-btn {
  border-color: #6ee7a8;
  color: #6ee7a8;
}
html[data-lm-theme="dark"] .lm-pf-add-album-btn:hover {
  background: rgba(46, 161, 111, .14);
}

/* Phase 7.10 R8d — album-create row: input + Save + Cancel on ONE line.
   Phase 7.10 P3 — the right cell sits inside .lm-pf-bulk-grid-2 (a CSS
   grid). Push the album-create row to the BOTTOM of its grid cell with
   align-self/justify-content so the input's baseline matches the Album
   dropdown's baseline on the left (both end up flush against the cell's
   bottom edge). The previous padding-top:22px was eyeballed against the
   label height and drifted out of sync. */
.lm-pf-album-create {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}
.lm-pf-album-create-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}
.lm-pf-album-create-row > .lm-pf-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  /* Match .lm-pf-cd-btn dimensions exactly so the input baselines line up
     with the album dropdown on the left cell — same padding, same font,
     same border = identical row height. */
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.2;
}
.lm-pf-album-create-row > .lm-pf-btn {
  flex: 0 0 auto;
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.2;
}
.lm-pf-album-create > .lm-pf-album-err {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--lm-danger, #c0392b);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────
 * Phase 7.10 P3 — defensive overrides so the modal's interactive chrome
 * (dropdowns, buttons, pill, Attach) is clearly visible even when global
 * theme rules (lm-profile.css, lm-typography.css) win cascade and flatten
 * inherited button styling. All rules scoped to .lm-pf-scrim so we never
 * leak outside the modal. !important is reserved for the handful of
 * properties whose absence makes the control read as plain text.
 * ────────────────────────────────────────────────────────────────────── */

/* Dropdown buttons — stronger border so the field reads as a field. */
.lm-pf-scrim .lm-pf-cd-btn {
  border: 1px solid #cbd5e1 !important;
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
  min-height: 38px;
}
.lm-pf-scrim .lm-pf-cd-btn:hover { border-color: #94a3b8 !important; }
.lm-pf-scrim .lm-pf-cd.is-open .lm-pf-cd-btn,
.lm-pf-scrim .lm-pf-cd-btn:focus-visible {
  border-color: var(--lm-client, #00363f) !important;
  box-shadow: 0 0 0 3px rgba(0, 54, 63, .14) !important;
}

/* Ghost (Cancel) — give it a real border so it reads as a button, not a
   link. Subtle so it doesn't compete with the primary CTA next to it. */
.lm-pf-scrim .lm-pf-btn-ghost {
  background: #fff !important;
  color: var(--lm-text, #0f172a) !important;
  border: 1px solid #cbd5e1 !important;
  padding: 9px 18px !important;
}
.lm-pf-scrim .lm-pf-btn-ghost:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

/* Primary (Upload, Save) — guarantee dark teal bg + white text even if
   a global button rule strips background. */
.lm-pf-scrim .lm-pf-btn-primary {
  background: var(--lm-client, #00363f) !important;
  color: #fff !important;
  border: 1px solid var(--lm-client, #00363f) !important;
  padding: 9px 20px !important;
  box-shadow: 0 1px 2px rgba(0, 54, 63, .18);
}
.lm-pf-scrim .lm-pf-btn-primary:hover {
  background: var(--lm-client-strong, #012a31) !important;
  border-color: var(--lm-client-strong, #012a31) !important;
}
.lm-pf-scrim .lm-pf-btn-primary:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  box-shadow: none;
  cursor: not-allowed;
}
/* Dark-mode parity for disabled Save — slate-700 bg + slate-500 text
   so it reads as a "disabled" affordance against the dark modal. */
html[data-lm-theme="dark"] .lm-pf-scrim .lm-pf-btn-primary:disabled {
  background: #334155 !important;
  color: #64748b !important;
  border-color: #334155 !important;
}

/* Thumbnail action buttons (📌 pin / ✕ remove) — the global reset
   `.lm-profile-page button { background:none; color:inherit; border:0 }`
   (lm-profile.css) has specificity (0,1,1) and beats the single-class
   `.lm-pf-star-btn` rule, flattening these into transparent icons that
   vanish over both light and dark photos. Re-assert the opaque dark chip
   here, scoped to .lm-pf-scrim + !important, exactly like the CTA buttons
   above. Stays readable on a pure-white image as well as a dark one. */
.lm-pf-scrim .lm-pf-star-btn,
.lm-pf-scrim .lm-pf-del-btn {
  background: #111827 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .55) !important;
}
.lm-pf-scrim .lm-pf-star-btn:hover { background: #1f2937 !important; }
.lm-pf-scrim .lm-pf-star-btn.is-on {
  background: #111827 !important;
  border-color: var(--lm-gold, #C6A15B) !important;
  color: var(--lm-gold, #C6A15B) !important;
}
.lm-pf-scrim .lm-pf-del-btn:hover {
  background: #c0392b !important;
  border-color: rgba(255, 255, 255, .55) !important;
  color: #fff !important;
}

/* "+ Add to album" pill — dashed teal pill, full visibility. */
.lm-pf-scrim .lm-pf-add-album-btn {
  border: 1.5px dashed var(--lm-client, #00363f) !important;
  color: var(--lm-client, #00363f) !important;
  background: transparent !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 12.5px;
}
.lm-pf-scrim .lm-pf-add-album-btn:hover {
  background: rgba(0, 54, 63, .06) !important;
  border-style: solid !important;
}

/* Video-link Attach — same dark-teal solid as the primary button so
   the call-to-action reads consistently across the modal. */
.lm-pf-scrim .lm-pf-vlink-btn {
  background: var(--lm-client, #00363f) !important;
  color: #fff !important;
  padding: 0 18px !important;
  border-radius: 0 7px 7px 0;
  font-weight: 600;
  min-height: 38px;
}
.lm-pf-scrim .lm-pf-vlink-btn:hover { background: var(--lm-client-strong, #012a31) !important; }

/* Video-link bar wrapper — match the dropdown borders so the input
   field reads as a field. */
.lm-pf-scrim .lm-pf-vlink {
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px;
  background: #fff !important;
  overflow: hidden;
}
.lm-pf-scrim .lm-pf-vlink-input { padding: 9px 12px !important; font-size: 13px; }

/* Make sure the "+ Add to album" button has a usable click target even
   when align-self drops it to a 0-width column in some flex contexts. */
.lm-pf-scrim .lm-pf-add-album-btn[hidden] { display: none !important; }

/* Dark theme parity — repaint the surfaces so the borders don't look
   pasted onto a dark background. */
html[data-lm-theme="dark"] .lm-pf-scrim .lm-pf-cd-btn,
html[data-lm-theme="dark"] .lm-pf-scrim .lm-pf-btn-ghost,
html[data-lm-theme="dark"] .lm-pf-scrim .lm-pf-vlink {
  background: var(--lm-surface, #0d1117) !important;
  border-color: var(--lm-border, #30363d) !important;
  color: var(--lm-text, #e6edf3) !important;
}
html[data-lm-theme="dark"] .lm-pf-scrim .lm-pf-btn-ghost:hover {
  background: rgba(255, 255, 255, .04) !important;
}
html[data-lm-theme="dark"] .lm-pf-scrim .lm-pf-add-album-btn {
  border-color: #6ee7a8 !important;
  color: #6ee7a8 !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * Phase 7.10 P3 — Edit-mode UI for the LM Portfolio modal.
 *
 *   .lm-pf-modal[data-mode="edit"]        — root scope when modal is editing
 *   .lm-pf-edit-panel                     — top-of-body single-item card
 *   data-mode="edit" hides upload chrome  — drop, grid, vlink bar
 *
 * The bulk metadata row (category/date/album/pin counter) is reused as the
 * per-field editor — same data semantics, no second markup tree.
 * ────────────────────────────────────────────────────────────────────── */

/* Hide upload-only chrome when editing */
.lm-pf-modal[data-mode="edit"] [data-lm-pf-empty],
.lm-pf-modal[data-mode="edit"] [data-lm-pf-filled],
.lm-pf-modal[data-mode="edit"] .lm-pf-vlink-bar,
.lm-pf-modal[data-mode="edit"] [data-lm-pf-foot-count],
.lm-pf-modal[data-mode="edit"] [data-lm-pf-foot-size],
.lm-pf-modal[data-mode="edit"] .lm-pf-foot-left {
  display: none !important;
}

/* Hide the "+ Add to album" pill in edit mode — the album dropdown is
   always present and live in the meta row. Pill is a discovery affordance
   for new-upload flows only. */
.lm-pf-modal[data-mode="edit"] [data-lm-pf-add-album-toggle] { display: none !important; }
.lm-pf-modal[data-mode="edit"] [data-lm-pf-album-row]        { display: block !important; }

/* Edit-mode panel — sits at the top of .lm-pf-body. Two-column layout
   on desktop (media left, fields right); stacks on small viewports. */
.lm-pf-edit-panel {
  display: flex;
  gap: 16px;
  padding: 14px;
  margin: 0 0 18px;
  background: var(--lm-surface, #f8fafc);
  border: 1px solid var(--lm-border-2, #eef2f6);
  border-radius: 12px;
}
.lm-pf-edit-panel-media {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  /* No fixed height + no aspect-ratio. The cell adapts to whatever
     natural height the image has (capped at 380px so a very tall
     portrait can't blow out the modal). Photo is NEVER cropped. */
  max-height: 380px;
  border-radius: 8px;
  overflow: hidden;
  background: #0f172a;
  display: grid;
  place-items: center;
}
.lm-pf-edit-panel-media img,
.lm-pf-edit-panel-media video {
  display: block;
  /* Native size with caps — fits inside the 240×380 box both ways.
     width:auto + height:auto + max-width/max-height guarantees the
     image renders at its real aspect ratio with zero cropping. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
}
.lm-pf-edit-panel-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  background: rgba(0, 0, 0, .25);
  pointer-events: none;
}
.lm-pf-edit-panel-vlink {
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  color: #fff;
  padding: 10px;
}
.lm-pf-edit-panel-vlink-url {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  opacity: .85;
  word-break: break-all;
  line-height: 1.3;
  max-width: 100%;
}

.lm-pf-edit-panel-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lm-pf-edit-panel-label {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lm-text-secondary, #475569);
  font-weight: 700;
}
.lm-pf-edit-panel-text {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  background: #fff !important;
}
.lm-pf-edit-panel-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lm-text, #0f172a);
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.lm-pf-edit-panel-pin input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--lm-client, #00363f);
  cursor: pointer;
}
.lm-pf-edit-panel-pin-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lm-pf-edit-panel-pin-label svg {
  /* Clean gold stroke pushpin — same look as the PINNED counter
     elsewhere in the modal (no fill, just outline strokes). */
  color: var(--lm-gold, #C6A15B);
  flex: none;
}
html[data-lm-theme="dark"] .lm-pf-edit-panel-pin-label svg {
  color: #f4cf72;
}

/* In edit mode the upload button shouldn't carry the trailing arrow icon
   (Save action is a "commit", not a "go forward"). */
.lm-pf-modal[data-mode="edit"] [data-lm-pf-upload] > svg { display: none; }

/* Migration 076 — Title input matches caption textarea styling so they
   read as a coherent two-field block. */
.lm-pf-edit-panel-title-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--lm-border, #e5e7eb);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  margin-bottom: 8px;
}
.lm-pf-edit-panel-title-input:focus {
  outline: 2px solid var(--lm-gold, #C6A15B);
  outline-offset: 0;
  border-color: var(--lm-gold, #C6A15B);
}
html[data-lm-theme="dark"] .lm-pf-edit-panel-title-input {
  background: var(--lm-surface, #0d1117);
  border-color: var(--lm-border, #30363d);
  color: var(--lm-text, #e6edf3);
}

/* Migration 076 — Pin + album-cover checkboxes share one row in the edit
   panel. flex-wrap keeps them readable on narrow viewports. */
.lm-pf-edit-panel-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 6px;
}
.lm-pf-edit-panel-toggles .lm-pf-edit-panel-pin {
  margin: 0;
  padding: 0;
}

/* Migration 076 — read-only video URL row inside the edit panel.
   Lives right under the Pin checkbox so the user sees the URL is a
   separate field from the Caption above. The input is `readonly` so
   the browser still allows selection/copy without inviting edits. */
.lm-pf-edit-panel-vurl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--lm-border, #e5e7eb);
}
.lm-pf-edit-panel-vurl-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lm-muted, #6b7280);
}
.lm-pf-edit-panel-vurl-label svg {
  flex: none;
  color: var(--lm-muted, #6b7280);
}
.lm-pf-edit-panel-vurl-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.lm-pf-edit-panel-vurl-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--lm-border, #e5e7eb);
  border-radius: 7px;
  background: var(--lm-surface-alt, #f8fafc);
  color: var(--lm-muted, #475569);
  font: inherit;
  font-size: 12px;
  cursor: text;
  user-select: text;
}
.lm-pf-edit-panel-vurl-input:focus { outline: 2px solid var(--lm-gold, #C6A15B); outline-offset: 0; }
.lm-pf-edit-panel-vurl-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--lm-border, #e5e7eb);
  border-radius: 7px;
  background: #fff;
  color: var(--lm-muted, #475569);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lm-pf-edit-panel-vurl-open:hover {
  color: var(--lm-client, #00363f);
  border-color: var(--lm-client, #00363f);
}
html[data-lm-theme="dark"] .lm-pf-edit-panel-vurl { border-top-color: var(--lm-border, #30363d); }
html[data-lm-theme="dark"] .lm-pf-edit-panel-vurl-input {
  background: rgba(255,255,255,.04);
  border-color: var(--lm-border, #30363d);
  color: var(--lm-text, #e6edf3);
}
html[data-lm-theme="dark"] .lm-pf-edit-panel-vurl-open {
  background: rgba(255,255,255,.02);
  border-color: var(--lm-border, #30363d);
  color: var(--lm-text, #e6edf3);
}

/* Migration 076 — Destructive Delete button in the footer (edit mode
   only). margin-left:auto pushes it to the FAR RIGHT edge of the actions
   row so it sits opposite Cancel + Save changes (which stay grouped on
   the left). Visually mirrors the X close button in the modal header. */
.lm-pf-btn-danger {
  background: #fff !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}
.lm-pf-btn-danger:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}
.lm-pf-btn-danger:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.lm-pf-btn-danger svg { color: currentColor; flex: none; }
html[data-lm-theme="dark"] .lm-pf-btn-danger {
  background: rgba(239, 68, 68, .08) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, .35) !important;
}
html[data-lm-theme="dark"] .lm-pf-btn-danger:hover {
  background: rgba(239, 68, 68, .18) !important;
  border-color: rgba(239, 68, 68, .55) !important;
  color: #fecaca !important;
}

/* Dark theme */
html[data-lm-theme="dark"] .lm-pf-edit-panel {
  background: rgba(255, 255, 255, .02);
  border-color: var(--lm-border, #30363d);
}
html[data-lm-theme="dark"] .lm-pf-edit-panel-text {
  background: var(--lm-surface, #0d1117) !important;
  border-color: var(--lm-border, #30363d) !important;
  color: var(--lm-text, #e6edf3);
}

/* Small viewport — stack media above fields */
@media (max-width: 640px) {
  .lm-pf-edit-panel { flex-direction: column; }
  .lm-pf-edit-panel-media { width: 100%; flex: 0 0 auto; height: 200px; }
}

/* Phase 2.9 — cover indicator. Per user direction (the crown button
   was illegible): the SELECTED cover thumb gets a thick dark ring
   around the photo + a tiny "Cover" pill bottom-left. No per-thumb
   button anymore — clicking any thumb in album+stacked mode promotes
   it to cover. First thumb auto-becomes cover when files are added. */
.lm-pf-thumb.is-cover {
  /* box-shadow with spread = real border that doesn't get cut off by
     the rounded image inside (outline + outline-offset was getting
     hidden by the img filling the thumb completely). Spread:3px gold
     ring sits outside the thumb's bounds — very visible. */
  box-shadow: 0 0 0 3px var(--lm-client, #00363f), 0 4px 12px rgba(0, 54, 63, .35);
  border-radius: 12px;
}
html[data-lm-theme="dark"] .lm-pf-thumb.is-cover {
  box-shadow: 0 0 0 3px #f5deb3, 0 4px 12px rgba(245, 222, 179, .25);
}
.lm-pf-cover-mark {
  position: absolute;
  /* Phase 2.9 — moved to TOP-left so it doesn't collide with the
     category chip (which now lives bottom-left, next to the date). */
  left: 6px;
  top: 6px;
  z-index: 3;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--lm-text, #0f172a);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
/* Hover hint on non-cover thumbs (when modal is in album+stacked
   cover-pick mode) — soft dashed outline tells user the click is
   meaningful. Mode flag set on .lm-pf-modal by the JS state machine. */
.lm-pf-modal[data-cover-pick="1"] .lm-pf-thumb:not(.is-cover) { cursor: pointer; }
.lm-pf-modal[data-cover-pick="1"] .lm-pf-thumb:not(.is-cover):hover {
  outline: 2px dashed rgba(15, 23, 42, .4);
  outline-offset: -2px;
  border-radius: 12px;
}
html[data-lm-theme="dark"] .lm-pf-thumb.is-cover {
  outline-color: #f5deb3;       /* cream-gold reads on dark photos */
}
html[data-lm-theme="dark"] .lm-pf-cover-mark {
  background: #f5deb3;
  color: #0f172a;
}

/* Phase 2.9 — Album cell: dropdown + ✕ + 🗑 in one flex row,
   stays in its 1fr column of the parent grid. */
.lm-pf-album-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.lm-pf-album-cell > .lm-pf-cd { flex: 1 1 auto; min-width: 0; }

/* When the trash button enters PENDING state, the pill grows into a
   wider "Delete album + N photos?" button. Anchor it via position:absolute
   to the RIGHT edge of the album cell so it extends RIGHTWARD into the
   empty right grid column (where the create-form would be — they're
   mutually exclusive). Dropdown + ✕ stay exactly where they were. */
.lm-pf-album-cell { position: relative; }
.lm-pf-album-cell, .lm-pf-meta-cell { overflow: visible; }
.lm-pf-album-trash.is-pending {
  position: absolute !important;
  /* Anchor pill's LEFT at the trash icon's natural position (right
     edge of cell minus trash width), so it visually replaces the
     icon and extends to the right into the empty right cell. */
  left: calc(100% - 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

/* ✕ clear button — always-available "cancel album" affordance. */
.lm-pf-album-clear {
  flex: none;
  width: 32px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 7px;
  color: var(--lm-text-secondary, #64748b);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.lm-pf-album-clear:hover {
  background: rgba(192, 57, 43, .08);
  border-color: var(--lm-danger, #c0392b);
  color: var(--lm-danger, #c0392b);
}
html[data-lm-theme="dark"] .lm-pf-album-clear {
  border-color: var(--lm-border, #30363d);
  color: var(--lm-text-secondary, #8b949e);
}
html[data-lm-theme="dark"] .lm-pf-album-clear:hover {
  background: rgba(220, 38, 38, .12);
  border-color: #dc2626;
  color: #fca5a5;
}

/* Phase 2.9 — Trash button: delete the selected album. Same shape as
   the ✕ clear button, danger-color hover, pulses red while waiting
   for the confirm-click in the two-step pattern. */
.lm-pf-album-trash {
  flex: none;
  width: 32px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--lm-border, #e2e8f0);
  border-radius: 7px;
  color: var(--lm-text-secondary, #64748b);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.lm-pf-album-trash:hover {
  background: rgba(192, 57, 43, .1);
  border-color: var(--lm-danger, #c0392b);
  color: var(--lm-danger, #c0392b);
}
/* Pending state — expands into a wider pill with explicit "Delete this
   album?" label so the affordance change is unmistakable (the small
   pulsing icon alone was easy to miss). Same pattern as the per-card
   X "Confirm delete?" state. */
.lm-pf-album-trash.is-pending {
  width: auto !important;
  padding: 0 12px !important;
  background: var(--lm-danger, #c0392b) !important;
  color: #fff !important;
  border-color: var(--lm-danger, #c0392b) !important;
  animation: lm-pf-trash-pulse 1.1s ease-in-out infinite;
}
.lm-pf-album-trash.is-pending svg { display: none !important; }
.lm-pf-album-trash.is-pending::before {
  /* Dynamic — JS sets data-pending-text to either:
       "Delete album + N photos?" (when N > 0)
       "Delete this empty album?" (when empty) */
  content: attr(data-pending-text);
  color: #fff;
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes lm-pf-trash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(192, 57, 43, 0); }
}
html[data-lm-theme="dark"] .lm-pf-album-trash {
  border-color: var(--lm-border, #30363d);
  color: var(--lm-text-secondary, #8b949e);
}
html[data-lm-theme="dark"] .lm-pf-album-trash:hover {
  background: rgba(220, 38, 38, .12);
  border-color: #dc2626;
  color: #fca5a5;
}

/* ── LM 2026-06-10: lock the modal while a batch uploads — no "Add more",
   no dropzone, no video-link attach mid-flight (queue desync). The JS also
   guards addFiles/attachVideoLink; this is the visual half. ── */
#lm-pf-scrim.is-uploading [data-lm-pf-grid],
#lm-pf-scrim.is-uploading .lm-pf-attach-row,
#lm-pf-scrim.is-uploading [data-lm-pf-vattach],
#lm-pf-scrim.is-uploading [data-lm-pf-vurl],
#lm-pf-scrim.is-uploading .lm-pf-dropzone {
  pointer-events: none;
  opacity: .55;
}

/* ── LM 2026-06-10 mobile footer: compact Cancel + one-line "Upload N items"
   (they rendered as two tall wrapped slabs). ── */
@media (max-width: 600px) {
  .lm-pf-foot-actions { display: flex; gap: 10px; align-items: stretch; }
  .lm-pf-foot-actions .lm-pf-btn-ghost { flex: 0 0 auto; padding: 11px 16px; white-space: nowrap; }
  .lm-pf-foot-actions .lm-pf-btn-primary { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding: 11px 12px; justify-content: center; }
}