/* ============================================================
   PhotoCore Web Tools: demo widget stylesheet
   Design language: "Apple Liquid Glass", tokens ported 1:1 from
   the macOS app (source/PhotoCore/docs/CLAUDE.md §5).
   Scope: everything lives under .pcd (PhotoCore Demo) to avoid
   collisions with the marketing stylesheet.
   ============================================================ */

.pcd {
  /* palette, APP tokens (authoritative), not the marketing site */
  --pcd-accent: #6E6BE6;
  --pcd-accent-soft: rgba(110, 107, 230, 0.15);
  --pcd-border-accent: rgba(110, 107, 230, 0.55);
  --pcd-grad: linear-gradient(135deg, #6E6BE6 0%, #8E8CEA 100%);
  --pcd-grad-soft: linear-gradient(135deg, rgba(110,107,230,.18) 0%, rgba(142,140,234,.18) 100%);
  --pcd-green: #34d399;
  --pcd-orange: #E9834E;  /* Coral */
  --pcd-red: #f87171;
  --pcd-yellow: #fbbf24;

  --pcd-r-window: 12px;
  --pcd-r-lg: 14px;
  --pcd-r-md: 10px;
  --pcd-r-sm: 7px;
  --pcd-r-xs: 5px;

  --pcd-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pcd-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --pcd-spring: cubic-bezier(0.32, 0.72, 0, 1);

  /* light theme (default) */
  --pcd-bg-window: rgba(245, 245, 248, 0.82);
  --pcd-bg-toolbar: rgba(240, 240, 244, 0.78);
  --pcd-bg-sheet: rgba(248, 248, 252, 0.92);
  --pcd-bg-popover: rgba(252, 252, 254, 0.96);
  --pcd-surface-1: rgba(0, 0, 0, 0.03);
  --pcd-surface-2: rgba(0, 0, 0, 0.06);
  --pcd-surface-3: rgba(0, 0, 0, 0.09);
  --pcd-text-1: rgba(0, 0, 0, 0.92);
  --pcd-text-2: rgba(0, 0, 0, 0.62);
  --pcd-text-3: rgba(0, 0, 0, 0.42);
  --pcd-text-4: rgba(0, 0, 0, 0.28);
  --pcd-border-1: rgba(0, 0, 0, 0.06);
  --pcd-border-2: rgba(0, 0, 0, 0.10);
  --pcd-border-3: rgba(0, 0, 0, 0.16);
  --pcd-page-halo: radial-gradient(1200px 500px at 50% -10%, rgba(139,109,240,.10), transparent 70%);
  --pcd-shadow-window: 0 40px 90px -30px rgba(30, 28, 90, 0.40), 0 12px 30px rgba(0, 0, 0, 0.10);
  --pcd-shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.18);
  --pcd-cell-bg: rgba(0, 0, 0, 0.05);

  font-family: var(--pcd-font);
  color: var(--pcd-text-1);
}

/* the widget toggles visibility via the hidden attribute, make sure it
   always wins over display:flex/grid component rules */
.pcd [hidden] { display: none !important; }
.pcd-qchip svg { width: 12px; height: 12px; }

.pcd[data-pcd-theme="dark"] {
  --pcd-bg-window: rgba(22, 22, 26, 0.78);
  --pcd-bg-toolbar: rgba(28, 28, 32, 0.72);
  --pcd-bg-sheet: rgba(38, 38, 44, 0.88);
  --pcd-bg-popover: rgba(44, 44, 50, 0.92);
  --pcd-surface-1: rgba(255, 255, 255, 0.045);
  --pcd-surface-2: rgba(255, 255, 255, 0.075);
  --pcd-surface-3: rgba(255, 255, 255, 0.11);
  --pcd-text-1: rgba(255, 255, 255, 0.95);
  --pcd-text-2: rgba(255, 255, 255, 0.66);
  --pcd-text-3: rgba(255, 255, 255, 0.42);
  --pcd-text-4: rgba(255, 255, 255, 0.28);
  --pcd-border-1: rgba(255, 255, 255, 0.06);
  --pcd-border-2: rgba(255, 255, 255, 0.10);
  --pcd-border-3: rgba(255, 255, 255, 0.16);
  --pcd-accent-soft: rgba(139, 109, 240, 0.20);
  --pcd-page-halo: radial-gradient(1200px 500px at 50% -10%, rgba(139,109,240,.14), transparent 70%);
  --pcd-shadow-window: 0 50px 100px -30px rgba(0, 0, 0, 0.85), 0 12px 30px rgba(0, 0, 0, 0.6);
  --pcd-cell-bg: rgba(255, 255, 255, 0.06);
}

/* ---------- window frame ---------- */
.pcd-stage {
  position: relative;
  padding: clamp(0.2rem, 2vw, 1.4rem);
  background-image: var(--pcd-page-halo);
}
.pcd-window {
  position: relative;
  border-radius: var(--pcd-r-window);
  background: var(--pcd-bg-window);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 0.5px solid var(--pcd-border-2);
  box-shadow: var(--pcd-shadow-window);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 175px);
  height: calc(100dvh - 175px);
  min-height: 560px;
  max-height: 1300px;
}

/* fullscreen mode (button in the title bar) */
.pcd-stage:fullscreen { padding: 0; background: var(--pcd-bg-popover); }
.pcd-stage:fullscreen .pcd-window {
  width: 100%; height: 100%; max-height: none;
  border-radius: 0; border: 0;
}
.pcd-titlebar-fs {
  width: 26px; height: 26px; padding: 0; border: 0;
  background: transparent; color: var(--pcd-text-3);
  border-radius: var(--pcd-r-xs);
  display: grid; place-items: center; cursor: pointer;
}
.pcd-titlebar-fs:hover { background: var(--pcd-surface-2); color: var(--pcd-text-1); }
.pcd-titlebar-fs svg { width: 14px; height: 14px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pcd-window { background: var(--pcd-bg-popover); }
}

.pcd-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  background: var(--pcd-bg-toolbar);
  border-bottom: 0.5px solid var(--pcd-border-1);
  flex: none;
}
.pcd-traffic { display: inline-flex; gap: 7px; }
.pcd-traffic i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--pcd-surface-3);
}
.pcd-traffic i:nth-child(1) { background: #ff5f57; }
.pcd-traffic i:nth-child(2) { background: #febc2e; }
.pcd-traffic i:nth-child(3) { background: #28c840; }
.pcd-titlebar-title {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pcd-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- top bar ---------- */
.pcd-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  background: var(--pcd-bg-toolbar);
  border-bottom: 0.5px solid var(--pcd-border-1);
  flex: none;
  flex-wrap: wrap;
}
.pcd-folder-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--pcd-r-md);
  background: var(--pcd-surface-2);
  border: 0.5px solid var(--pcd-border-2);
  cursor: pointer;
  font: inherit;
  color: var(--pcd-text-1);
  max-width: 220px;
  transition: background 180ms ease-out;
}
/* the demo album name plus its marker needs a little more room, but only
   where the topbar can spare it: below this the toolbar would wrap */
@media (min-width: 1001px) {
  .pcd-folder-chip.is-demo { max-width: 280px; }
}
.pcd-folder-chip:hover { background: var(--pcd-surface-3); }
.pcd-folder-chip .pcd-folder-ico {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--pcd-r-sm);
  background: var(--pcd-grad);
  display: grid; place-items: center; color: #fff;
}
.pcd-folder-ico svg { width: 15px; height: 15px; }
.pcd-folder-meta { text-align: left; min-width: 0; flex: 1; overflow: hidden; }
.pcd-folder-name {
  font-size: 13px; font-weight: 600; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcd-folder-count {
  display: block;
  max-width: 100%;
  font-size: 11px; color: var(--pcd-text-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcd-folder-count .pcd-dot-ok {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pcd-green);
  margin-right: 4px; vertical-align: 1px;
}

.pcd-searchwrap {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  height: 38px;
  border-radius: var(--pcd-r-md);
  background: var(--pcd-surface-2);
  border: 0.5px solid var(--pcd-border-2);
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.pcd-searchwrap:focus-within {
  border-color: var(--pcd-border-accent);
  box-shadow: 0 0 0 3px var(--pcd-accent-soft);
}
.pcd-searchwrap svg { width: 15px; height: 15px; color: var(--pcd-text-3); flex: none; }
.pcd-search {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13.5px;
  color: var(--pcd-text-1);
}
.pcd-search::placeholder { color: var(--pcd-text-3); }
.pcd-search:disabled { color: var(--pcd-text-4); }
.pcd-search-clear {
  border: 0; background: var(--pcd-surface-3); color: var(--pcd-text-2);
  width: 18px; height: 18px; border-radius: 50%;
  display: none; place-items: center; cursor: pointer; flex: none;
  font-size: 11px; line-height: 1; padding: 0;
}
.pcd-searchwrap.has-text .pcd-search-clear { display: grid; }

.pcd-topbar-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }

/* pills & buttons */
.pcd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 13px;
  border-radius: var(--pcd-r-sm);
  border: 0.5px solid var(--pcd-border-2);
  background: var(--pcd-surface-1);
  color: var(--pcd-text-1);
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background 180ms ease-out, transform 180ms var(--pcd-spring);
  text-decoration: none;
  white-space: nowrap;
}
.pcd-pill:hover { background: var(--pcd-surface-3); }
.pcd-pill:active { transform: scale(0.97); }
.pcd-pill svg { width: 14px; height: 14px; }
.pcd-pill--primary {
  background: var(--pcd-grad);
  border: 0;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(123, 108, 246, 0.35);
}
.pcd-pill--primary:hover { background: var(--pcd-grad); filter: brightness(1.06); }
.pcd-pill--big { height: 42px; padding: 0 20px; font-size: 14px; border-radius: 9px; }
.pcd-pill:disabled { opacity: 0.45; cursor: default; }
.pcd-iconbtn {
  width: 32px; height: 32px; padding: 0; justify-content: center;
}

.pcd-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: var(--pcd-r-xs);
  font-size: 11px; font-weight: 600;
  background: var(--pcd-accent-soft);
  color: var(--pcd-accent);
  white-space: nowrap;
}
.pcd-badge--green { background: rgba(52, 211, 153, 0.16); color: #0d9e6e; }
.pcd[data-pcd-theme="dark"] .pcd-badge--green { color: var(--pcd-green); }
.pcd-badge--orange { background: rgba(251, 146, 60, 0.16); color: #c2611b; }
.pcd[data-pcd-theme="dark"] .pcd-badge--orange { color: var(--pcd-orange); }

/* ---------- content area ---------- */
.pcd-content {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.pcd-content > [data-ref="galleryZone"] { flex: 1; }

/* empty state / drop zone */
.pcd-empty {
  flex: 1;
  min-height: 380px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 14px;
  border: 1.5px dashed var(--pcd-border-3);
  border-radius: var(--pcd-r-lg);
  padding: 32px 20px;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.pcd-empty.pcd-dragover {
  border-color: var(--pcd-border-accent);
  background: var(--pcd-accent-soft);
}
.pcd-empty-ico {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--pcd-grad-soft);
  display: grid; place-items: center;
  color: var(--pcd-accent);
}
.pcd-empty-ico svg { width: 30px; height: 30px; }
.pcd-empty h3 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.pcd-empty p { margin: 0; font-size: 13.5px; color: var(--pcd-text-2); max-width: 420px; line-height: 1.5; }
.pcd-empty-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* sample album */
.pcd-empty-demo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 2px;
  font-size: 12.5px; color: var(--pcd-text-3);
}
.pcd-pill--demo {
  border-color: var(--pcd-border-accent);
  color: var(--pcd-accent);
  background: var(--pcd-accent-soft);
  font-weight: 600;
}
.pcd-pill--demo:hover { background: var(--pcd-accent-soft); filter: brightness(1.06); }
/* marker inside the folder chip: says "these are sample photos" at every
   width without adding a topbar element that would wrap the toolbar */
.pcd-demo-mark { color: var(--pcd-accent); font-weight: 600; }
.pcd-privacy-note {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--pcd-text-2);
  background: var(--pcd-surface-1);
  border: 0.5px solid var(--pcd-border-1);
  padding: 6px 12px; border-radius: 99px;
}
.pcd-privacy-note svg { width: 13px; height: 13px; color: var(--pcd-green); flex: none; }

/* example query chips */
.pcd-examples {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 2px 12px;
}
.pcd-examples span { font-size: 12px; color: var(--pcd-text-3); align-self: center; }
.pcd-qchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--pcd-accent-soft);
  color: var(--pcd-accent);
  border: 0.5px solid transparent;
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: border-color 180ms ease-out;
}
.pcd-qchip:hover { border-color: var(--pcd-border-accent); }

/* results header */
.pcd-results-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 2px 12px;
  font-size: 13px; color: var(--pcd-text-2);
}
.pcd-results-head b { color: var(--pcd-text-1); }

/* ---------- justified gallery ---------- */
.pcd-gallery { display: flex; flex-direction: column; gap: 10px; }
.pcd-row { display: flex; gap: 10px; }
.pcd-cell {
  position: relative;
  border-radius: var(--pcd-r-md);
  overflow: hidden;
  background: var(--pcd-cell-bg);
  cursor: default;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
  flex: none;
}
.pcd-cell img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pcd-cell:hover { transform: scale(1.03); box-shadow: var(--pcd-shadow-soft); z-index: 2; }
.pcd-cell .pcd-score {
  position: absolute; left: 6px; bottom: 6px;
  padding: 2px 7px;
  border-radius: var(--pcd-r-xs);
  background: rgba(20, 20, 26, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--pcd-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em;
}
.pcd-cell .pcd-score.is-top { background: var(--pcd-accent); }
.pcd-cell-name {
  position: absolute; inset: auto 0 0 0;
  padding: 18px 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  color: #fff; font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 180ms ease-out;
  pointer-events: none;
}
.pcd-cell:hover .pcd-cell-name { opacity: 1; }

/* ---------- status bar ---------- */
.pcd-statusbar {
  display: flex; align-items: center; gap: 12px;
  min-height: 30px;
  padding: 4px 14px;
  border-top: 0.5px solid var(--pcd-border-1);
  background: var(--pcd-bg-toolbar);
  font-size: 11.5px;
  color: var(--pcd-text-3);
  flex: none;
  flex-wrap: wrap;
}
.pcd-statusbar .pcd-spacer { flex: 1; }
.pcd-status-device { font-family: var(--pcd-mono); font-size: 10.5px; }

/* ---------- progress sheet (glass overlay) ---------- */
.pcd-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(10, 10, 16, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 10;
  padding: 18px;
}
.pcd-sheet {
  width: min(420px, 100%);
  border-radius: var(--pcd-r-lg);
  background: var(--pcd-bg-sheet);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 0.5px solid var(--pcd-border-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 24px;
  text-align: center;
  animation: pcd-sheet-in 450ms var(--pcd-spring);
}
@keyframes pcd-sheet-in {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.pcd-sheet h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.pcd-sheet .pcd-sheet-sub { font-size: 12.5px; color: var(--pcd-text-2); margin: 0 0 18px; line-height: 1.45; }

.pcd-ring { position: relative; width: 84px; height: 84px; margin: 0 auto 14px; }
.pcd-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.pcd-ring circle { fill: none; stroke-width: 6; }
.pcd-ring .pcd-ring-track { stroke: var(--pcd-surface-3); }
.pcd-ring .pcd-ring-fill {
  stroke: url(#pcdGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset 240ms ease-out;
}
.pcd-ring .pcd-ring-label {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--pcd-mono);
  font-size: 15px; font-weight: 700;
}
.pcd-sheet-stats {
  display: flex; justify-content: center; gap: 18px;
  margin: 0 0 16px;
  font-size: 12px; color: var(--pcd-text-2);
}
.pcd-sheet-stats b { display: block; font-size: 15px; color: var(--pcd-text-1); font-family: var(--pcd-mono); }
.pcd-sheet-note { font-size: 11px; color: var(--pcd-text-3); margin: 10px 0 0; }

/* ---------- toast ---------- */
.pcd-toast {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  background: var(--pcd-bg-popover);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 0.5px solid var(--pcd-border-2);
  border-radius: var(--pcd-r-md);
  box-shadow: var(--pcd-shadow-soft);
  padding: 9px 16px;
  font-size: 12.5px;
  z-index: 12;
  max-width: 90%;
  animation: pcd-sheet-in 300ms var(--pcd-spring);
}

/* ---------- footnote under window ---------- */
.pcd-under {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  padding: 14px 6px 2px;
  font-size: 12.5px; color: var(--pcd-text-2);
  text-align: center;
}
.pcd-under a { color: var(--pcd-accent); font-weight: 600; text-decoration: none; }

/* ---------- compatibility banner ---------- */
.pcd-compat {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--pcd-r-md);
  background: rgba(251, 146, 60, 0.12);
  border: 0.5px solid rgba(251, 146, 60, 0.35);
  color: var(--pcd-text-1);
  font-size: 12.5px;
  line-height: 1.45;
  display: none;
}
.pcd-compat.is-visible { display: block; }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .pcd-stage { padding: 0; }
  .pcd-window {
    border-radius: var(--pcd-r-md);
    height: calc(100vh - 120px);
    height: calc(100dvh - 120px);
    min-height: 480px;
  }
  .pcd-topbar { gap: 8px; padding: 8px 10px; }
  .pcd-folder-chip { max-width: 46vw; }
  .pcd-searchwrap { flex-basis: 100%; order: 3; }
  .pcd-topbar-actions { margin-left: auto; }
  .pcd-content { padding: 10px; }
  .pcd-empty { min-height: 320px; }
  .pcd-gallery, .pcd-row { gap: 6px; }
  .pcd-statusbar { padding: 4px 10px; }
  .pcd-hide-mobile { display: none !important; }
}
@media (hover: none) {
  .pcd-cell-name { opacity: 1; }
  .pcd-cell:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pcd * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Tool-specific components (organizer / duplicates / constellation
   / bridge / best shot): added with the full tool suite.
   ============================================================ */

.pcd-toolslot {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
@media (max-width: 720px) {
  .pcd-toolslot { flex-basis: 100%; order: 3; }
}

/* slider control (granularity / tolerance / diversity) */
.pcd-sliderwrap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  height: 38px;
  border-radius: var(--pcd-r-md);
  background: var(--pcd-surface-2);
  border: 0.5px solid var(--pcd-border-2);
  font-size: 11.5px;
  color: var(--pcd-text-3);
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.pcd-sliderwrap b { color: var(--pcd-text-2); font-weight: 600; font-size: 11.5px; }
.pcd-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  min-width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--pcd-surface-3);
  outline: none;
}
.pcd-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  border: 0.5px solid var(--pcd-border-3);
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  cursor: pointer;
}
.pcd-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 0.5px solid var(--pcd-border-3);
  box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}

/* segmented control (bridge steps 3·5·7) */
.pcd-segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--pcd-r-sm);
  background: var(--pcd-surface-2);
  border: 0.5px solid var(--pcd-border-2);
}
.pcd-segmented button {
  border: 0; background: transparent;
  color: var(--pcd-text-2);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 11px;
  border-radius: 5px;
  cursor: pointer;
}
.pcd-segmented button.is-active {
  background: var(--pcd-accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(123,108,246,.4);
}

/* section header (organizer groups / dupes / bestshot) */
.pcd-sect {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 2px 10px;
  flex-wrap: wrap;
}
.pcd-sect:first-child { padding-top: 2px; }
.pcd-sect h4 {
  margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
}
.pcd-sect .pcd-sect-count { font-size: 12px; color: var(--pcd-text-3); }
.pcd-summary {
  padding: 2px 2px 10px;
  font-size: 13px; color: var(--pcd-text-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pcd-summary b { color: var(--pcd-text-1); }

/* selection (bridge) */
.pcd-cell.is-selected { outline: 2.5px solid var(--pcd-accent); outline-offset: -2.5px; }
.pcd-ab {
  position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pcd-accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.pcd-cell .pcd-tag {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 7px;
  border-radius: var(--pcd-r-xs);
  font-size: 10px; font-weight: 700;
  color: #fff; background: rgba(20,20,26,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pcd-cell .pcd-tag--green { background: var(--pcd-green); color: #063; }
.pcd-cell .pcd-tag--red { background: var(--pcd-red); color: #fff; }
.pcd-cell .pcd-tag--orange { background: var(--pcd-orange); color: #542; }

/* bridge path */
.pcd-bridge-wrap { padding: 8px 0 4px; }
.pcd-bridge-path {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 2.5vw, 26px);
  padding: 26px 8px;
  flex-wrap: wrap;
}
.pcd-bridge-path::before {
  content: '';
  position: absolute; left: 6%; right: 6%; top: 50%;
  height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, #6E6BE6, #8E8CEA);
  opacity: .55;
}
.pcd-bnode { position: relative; text-align: center; z-index: 1; }
.pcd-bnode img {
  width: clamp(74px, 11vw, 130px); height: clamp(74px, 11vw, 130px);
  object-fit: cover;
  border-radius: var(--pcd-r-md);
  border: 2.5px solid var(--pcd-accent);
  box-shadow: var(--pcd-shadow-soft);
  display: block;
  background: var(--pcd-cell-bg);
  cursor: pointer;
}
.pcd-bnode.is-endpoint img {
  width: clamp(92px, 13vw, 156px); height: clamp(92px, 13vw, 156px);
  border-width: 3px;
}
.pcd-bnode .pcd-ab { position: absolute; top: -9px; right: -9px; }
.pcd-bnode .pcd-aff {
  margin: 7px auto 0;
  width: 70%; height: 4px; border-radius: 2px;
  background: var(--pcd-surface-3);
  overflow: hidden;
}
.pcd-bnode .pcd-aff i {
  display: block; height: 100%;
  background: var(--pcd-green);
}
.pcd-bridge-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  padding: 4px 0 10px;
  font-size: 12.5px; color: var(--pcd-text-2);
}
.pcd-bridge-meta .pcd-avg {
  font-family: var(--pcd-mono); font-weight: 700; font-size: 15px;
  color: var(--pcd-accent);
}

/* best shot */
.pcd-bs-group {
  border: 0.5px solid var(--pcd-border-2);
  border-radius: var(--pcd-r-lg);
  background: var(--pcd-surface-1);
  padding: 14px;
  margin-bottom: 14px;
}
.pcd-bs-flex { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.pcd-bs-winner { position: relative; flex: 0 1 340px; min-width: 220px; }
.pcd-bs-winner img {
  width: 100%; border-radius: var(--pcd-r-md); display: block;
  border: 2.5px solid var(--pcd-green);
}
.pcd-bs-side { flex: 1 1 260px; min-width: 220px; }
.pcd-bs-side h5 {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pcd-text-3);
}
.pcd-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.pcd-reason {
  padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600;
  background: rgba(52, 211, 153, 0.16); color: #0d9e6e;
}
.pcd[data-pcd-theme="dark"] .pcd-reason { color: var(--pcd-green); }
.pcd-alt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pcd-alt {
  position: relative; cursor: pointer;
  border-radius: var(--pcd-r-md); overflow: hidden;
  width: 92px; height: 92px;
  background: var(--pcd-cell-bg);
  transition: transform 180ms ease-out;
}
.pcd-alt:hover { transform: scale(1.03); }
.pcd-alt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcd-alt .pcd-alt-tags {
  position: absolute; inset: auto 0 0 0;
  padding: 12px 5px 4px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  display: flex; gap: 3px; flex-wrap: wrap;
}
.pcd-alt .pcd-alt-tags span {
  font-size: 9px; font-weight: 700; color: #fff;
  background: rgba(248,113,113,.85);
  padding: 1px 5px; border-radius: 4px;
}

/* constellation canvas */
.pcd-map-wrap { position: relative; flex: 1; min-height: 380px; }
.pcd-map-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: var(--pcd-r-md);
  background:
    radial-gradient(600px 400px at 30% 20%, rgba(139,109,240,.07), transparent 60%),
    radial-gradient(500px 400px at 75% 80%, rgba(59,130,246,.06), transparent 60%);
  cursor: grab;
  touch-action: none;
}
.pcd-map-canvas.is-dragging { cursor: grabbing; }
.pcd-map-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-size: 11px; color: var(--pcd-text-3);
  background: var(--pcd-bg-popover);
  border: 0.5px solid var(--pcd-border-1);
  padding: 4px 12px; border-radius: 99px;
  pointer-events: none; white-space: nowrap;
  max-width: 94%; overflow: hidden; text-overflow: ellipsis;
}

/* lightbox */
.pcd-lightbox {
  position: absolute; inset: 0; z-index: 14;
  background: rgba(8, 8, 14, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center;
  padding: 24px;
  cursor: zoom-out;
}
.pcd-lightbox img {
  max-width: 92%; max-height: 86%;
  border-radius: var(--pcd-r-lg);
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.pcd-lightbox figcaption {
  margin-top: 10px; text-align: center;
  color: #fff; font-size: 12.5px; opacity: .85;
}

/* ============================================================
   Constellation: app-faithful radial layout (hub + cluster nodes
   + connection arcs with affinity/time badges)
   ============================================================ */

.pcd-cst {
  position: relative;
  flex: 1;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--pcd-r-md);
  background:
    radial-gradient(480px 380px at 50% 50%, rgba(139,109,240,.09), transparent 70%);
}
.pcd-cst-arcs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.pcd-cst-arcs path { transition: opacity 180ms ease-out; }
.pcd-cst-nodes { position: absolute; inset: 0; }

/* central hub */
.pcd-cst-hub {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--pcd-accent-soft);
  border: 2.5px solid var(--pcd-border-accent);
  box-shadow: 0 0 0 14px rgba(139, 109, 240, 0.08), 0 0 0 28px rgba(139, 109, 240, 0.04);
  display: grid; place-items: center;
  text-align: center;
  pointer-events: none;
}
.pcd-cst-hub span {
  font-size: 13px; font-weight: 600;
  color: var(--pcd-accent);
  max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* cluster node */
.pcd-cst-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: var(--cst-size, 80px);
  height: var(--cst-size, 80px);
  padding: 0; border: 0; background: none;
  cursor: pointer;
  transition: left 450ms var(--pcd-spring), top 450ms var(--pcd-spring);
}
.pcd-cst-node img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cst-color, var(--pcd-accent));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  background: var(--pcd-cell-bg);
  display: block;
  transition: transform 180ms ease-out;
}
.pcd-cst-node:hover img { transform: scale(1.06); }
.pcd-cst-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px;
  background: var(--cst-color, var(--pcd-accent));
  color: #fff;
  font-family: var(--pcd-mono);
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pcd-cst-label {
  position: absolute; left: 50%; top: calc(100% + 5px);
  transform: translateX(-50%);
  font-size: 11.5px; font-weight: 600;
  color: var(--pcd-text-2);
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis;
  background: var(--pcd-bg-popover);
  border: 0.5px solid var(--pcd-border-1);
  padding: 1px 8px; border-radius: 99px;
}

/* arc badges */
.pcd-cst-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 8px;
  border-radius: var(--pcd-r-xs);
  background: rgba(24, 24, 30, 0.82);
  color: #fff;
  font-family: var(--pcd-mono);
  font-size: 10px; font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  transition: left 450ms var(--pcd-spring), top 450ms var(--pcd-spring);
}

/* legend */
.pcd-cst-legend {
  position: absolute; right: 12px; bottom: 10px;
  display: flex; gap: 8px;
  font-size: 11px; color: var(--pcd-text-2);
}
.pcd-cst-legend span {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--pcd-bg-popover);
  border: 0.5px solid var(--pcd-border-1);
  padding: 3px 10px; border-radius: 99px;
}
.pcd-cst-legend i { width: 14px; height: 2.5px; border-radius: 2px; display: inline-block; }

/* group panel (opened from a node) */
.pcd-cst-panel {
  width: min(800px, 94%);
  max-height: 84%;
  overflow-y: auto;
  border-radius: var(--pcd-r-lg);
  background: var(--pcd-bg-sheet);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border: 0.5px solid var(--pcd-border-2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 16px;
  cursor: default;
  animation: pcd-sheet-in 450ms var(--pcd-spring);
}
@media (max-width: 720px) {
  .pcd-cst-hub { width: 90px; height: 90px; }
  .pcd-cst-hub span { font-size: 11px; max-width: 70px; }
  .pcd-cst-legend { left: 12px; right: auto; flex-direction: column; gap: 4px; align-items: flex-start; }
  .pcd-cst-label { font-size: 10px; max-width: 90px; }
}

/* official PhotoCore profiles in the minimal tool-page footer */
.foot-social a { color: inherit; text-decoration: none; }
.foot-social a:hover { text-decoration: underline; }