:root {
color-scheme: dark;
--bg: #101318;
--panel: #181d23;
--panel-2: #202832;
--line: #303944;
--text: #eef3f4;
--muted: #9ba8ad;
--accent: #65d4b1;
--accent-2: #f0b45f;
--danger: #ee7777;
--blue: #7fb8ff;
/* Surface / text tokens (dark theme values). These are remapped wholesale
by the light theme below — see [data-theme="light"]. */
--img-well: #0b0f13; /* image backdrops behind photos & thumbnails */
--stage: #0f1216; /* large viewing canvas / workspace */
--track: #0e1317; /* progress & ring tracks */
--bar: #4a5763; /* filled meter bars */
--field: #0f1419; /* form inputs & selects */
--surface: #10151a; /* raised base surface (cards, metrics) */
--surface-2: #161c22; /* secondary surface (toolbars, mid panels) */
--raised: #26313a; /* chips & markers */
--line-2: #3a4652; /* stronger borders / input outlines */
--text-2: #d6dde0; /* bright secondary text */
--on-accent: #07110e; /* dark text sitting on coloured/accent buttons */
--on-warm: #17110a; /* dark text on warm/light chips (yellow, cream) — stays dark in both themes */
/* Editorial serif for client-facing / gallery surfaces — leans on the elegant
macOS-native high-fashion serifs (Didot, Hoefler), with graceful fallbacks. */
--display-serif: "Didot", "Hoefler Text", "Cormorant Garamond", "Playfair Display",
"Iowan Old Style", Georgia, "Times New Roman", serif;
}
/* ===== Calm white theme — soft, neutral surfaces tuned for viewing photos.
Photo canvases use a gentle light grey rather than pure white so images
stay colour-accurate and easy on the eyes. ===== */
[data-theme="light"] {
color-scheme: light;
--bg: #f4f5f7;
--panel: #ffffff;
--panel-2: #eef0f3;
--line: #e1e4ea;
--text: #1d242c;
--muted: #6b7681;
--accent: #2bb894;
--accent-2: #d99327;
--danger: #d9534f;
--blue: #2f7fe0;
--img-well: #e9ebef;
--stage: #eef0f3;
--track: #dde1e7;
--bar: #aab3bd;
--field: #ffffff;
--surface: #ffffff;
--surface-2: #f6f7f9;
--raised: #e7eaef;
--line-2: #cfd5dd;
--text-2: #313b44;
--on-accent: #ffffff;
}
/* Sidebar & inspector share a hardcoded surface — map it per theme. */
[data-theme="light"] .sidebar,
[data-theme="light"] .inspector {
background: #fbfcfd;
}
/* Soften the strong drop shadows so they read on a light backdrop. */
[data-theme="light"] #editorImage {
box-shadow: 0 6px 24px rgba(15, 23, 30, 0.18);
}
/* ============================================================================
STUDIO LOOK — a genuinely distinct, minimal, modern macOS skin layered on top
of the existing three-panel layout. Selected via ;
Easy Mode (no attribute) is byte-for-byte untouched.
Strategy: the whole app already reads its colours from the CSS custom
properties defined in :root. Studio simply *remaps those tokens* to a new
calm-blue palette, so every panel, card, button and badge recolours at once.
Structural refinements (typography, radii, pill tabs, spacing, hidden-inset
traffic lights) are layered on top. A light variant remaps the same tokens.
============================================================================ */
[data-look="studio"] {
color-scheme: dark;
--bg: #0e0e11;
--panel: #17171b;
--panel-2: #1a1a1f;
--line: rgba(255, 255, 255, 0.07);
--line-2: rgba(255, 255, 255, 0.13);
--text: #f2f2f4;
--muted: #8a8a92;
--accent: #5b9dff; /* calm macOS blue — the Studio signature */
--accent-2: #e0a955;
--danger: #ff7a6b;
--blue: #5b9dff;
--img-well: #08080a;
--stage: #0e0e11;
--track: #2a2a30;
--bar: #4a4a52;
--field: #1a1a1f;
--surface: #17171b;
--surface-2: #1a1a1f;
--raised: #23232a;
--text-2: #cfcfd4;
--on-accent: #04183a; /* dark navy text on the blue accent */
--radius-lg: 14px;
--radius-md: 10px;
}
/* Calm "paper" light variant — soft neutral surfaces, deeper blue accent. */
[data-look="studio"][data-theme="light"] {
color-scheme: light;
--bg: #f5f6f8;
--panel: #ffffff;
--panel-2: #eef0f3;
--line: rgba(0, 0, 0, 0.08);
--line-2: rgba(0, 0, 0, 0.13);
--text: #16181d;
--muted: #6b6f78;
--accent: #2f7ff0;
--accent-2: #c8841f;
--danger: #db5547;
--blue: #2f7ff0;
--img-well: #e9ebef;
--stage: #eef0f3;
--track: #dfe2e8;
--bar: #aab1bb;
--field: #ffffff;
--surface: #ffffff;
--surface-2: #f5f6f8;
--raised: #eceef2;
--text-2: #2a2d34;
--on-accent: #ffffff;
}
/* ============================================================================
BRAND palette — the website identity (deep plum base, warm coral -> violet).
Layered on top of the Studio look: the renderer sets BOTH data-look="studio"
(for all the refined macOS chrome) AND data-palette="brand", which only
remaps the colour tokens below. Placed AFTER the Studio blocks so equal-
specificity selectors win by source order. See applyLook() in app.js.
============================================================================ */
[data-palette="brand"] {
color-scheme: dark;
--bg: #0b0a10;
--panel: #1c1925;
--panel-2: #241f30;
--line: rgba(255, 255, 255, 0.09);
--line-2: rgba(255, 255, 255, 0.16);
--text: #f3eef7;
--muted: #b6aec6;
--text-2: #d9d2e6;
--accent: #a06bff; /* brand violet — primary interactive */
--accent-2: #ff8a5c; /* warm coral — secondary accent */
--danger: #ff7a6b;
--blue: #6ea8ff;
--img-well: #08070c;
--stage: #0b0a10;
--track: #2a2533;
--bar: #5a5168;
--field: #221d2e;
--surface: #1c1925;
--surface-2: #241f30;
--raised: #2e2839;
--on-accent: #1a1020; /* deep plum text on the bright violet accent */
}
/* Light variant — soft violet-tinted paper, deeper violet accent for contrast. */
[data-palette="brand"][data-theme="light"] {
color-scheme: light;
--bg: #f6f4fa;
--panel: #ffffff;
--panel-2: #f0edf6;
--line: rgba(26, 16, 38, 0.08);
--line-2: rgba(26, 16, 38, 0.14);
--text: #1a1424;
--muted: #6c6480;
--text-2: #2c2440;
--accent: #6d3fff; /* deeper violet reads on white */
--accent-2: #e6663f;
--danger: #db5547;
--blue: #2f7fe0;
--img-well: #e9e6ef;
--stage: #efecf4;
--track: #e3deed;
--bar: #b3aac1;
--field: #ffffff;
--surface: #ffffff;
--surface-2: #f6f4fa;
--raised: #efebf5;
--on-accent: #ffffff; /* white text on the deep violet accent */
}
/* ============================================================================
LIGHTROOM LOOK — a charcoal skin that mirrors Adobe Lightroom Classic, so
photographers migrating from Lightroom feel at home. Selected via
. Like Studio it remaps the :root colour tokens
(here to LR's neutral charcoal + signature blue) and layers structural
refinements. It has NO light variant — it always renders dark, which is how
"lock to charcoal" is enforced. Fully self-contained: Easy/Studio/Brand are
untouched, and switching away restores the prior look exactly.
============================================================================ */
[data-look="lightroom"] {
color-scheme: dark;
--bg: #1e1e1e;
--panel: #2b2b2b;
--panel-2: #333333;
--line: #3a3a3a;
--line-2: #4a4a4a;
--text: #d4d4d4;
--muted: #9a9a9a;
--accent: #5a9fd4; /* the Lightroom blue — slider fills, active states */
--accent-2: #d99327;
--danger: #e0695f;
--blue: #5a9fd4;
--img-well: #141414; /* near-black photo backdrop, like LR's work area */
--stage: #1a1a1a;
--track: #3c3c3c;
--bar: #5a5a5a;
--field: #383838;
--surface: #2b2b2b;
--surface-2: #303030;
--raised: #3a3a3a;
--text-2: #e6e6e6;
--on-accent: #ffffff; /* white text on the blue accent */
--radius-lg: 4px; /* LR is nearly square */
--radius-md: 3px;
}
/* Neutral system sans, matching Lightroom's UI type. */
[data-look="lightroom"] body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif,
system-ui, "Segoe UI", sans-serif;
}
/* Flat charcoal side panels — no vibrancy, no rounded slabs. */
[data-look="lightroom"] .sidebar,
[data-look="lightroom"] .inspector {
background: var(--panel);
}
/* Square, flat cards. */
[data-look="lightroom"] .panel,
[data-look="lightroom"] .metrics,
[data-look="lightroom"] .sidebar-metrics div,
[data-look="lightroom"] .modal-card,
[data-look="lightroom"] .inspector-vision,
[data-look="lightroom"] .inspector-exif {
border-radius: var(--radius-md);
border-color: var(--line);
background: var(--surface);
}
[data-look="lightroom"] .toolbar {
background: var(--panel);
}
[data-look="lightroom"] .tool-btn,
[data-look="lightroom"] .panel button,
[data-look="lightroom"] input,
[data-look="lightroom"] select {
border-radius: var(--radius-md);
}
/* --- Develop panel: Lightroom-style collapsible sections (Basic / Color /
Detail / Effects …). The .develop-lr-group/.develop-lr-summary/.develop-lr-body
DOM is emitted by buildDevelopControls() only when this look is active. --- */
[data-look="lightroom"] .develop-lr-group {
border-top: 1px solid var(--line);
}
[data-look="lightroom"] .develop-lr-group:first-of-type {
border-top: 0;
}
[data-look="lightroom"] .develop-lr-summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 7px;
padding: 7px 2px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-2);
user-select: none;
}
[data-look="lightroom"] .develop-lr-summary::-webkit-details-marker { display: none; }
/* Disclosure triangle — points right when collapsed, down when open. */
[data-look="lightroom"] .develop-lr-summary::before {
content: "\25B8";
font-size: 9px;
color: var(--muted);
display: inline-block;
transition: transform 0.12s ease;
}
[data-look="lightroom"] .develop-lr-group[open] > .develop-lr-summary::before {
transform: rotate(90deg);
}
[data-look="lightroom"] .develop-lr-summary:hover { color: var(--accent); }
[data-look="lightroom"] .develop-lr-body {
display: flex;
flex-direction: column;
gap: 9px;
padding: 2px 2px 10px;
}
/* Reorder the right panel to match Lightroom Classic's Develop layout: histogram
first, then the tone/colour sliders (Basic…), then Tone Curve, HSL, and the
tools below. .develop-panel is a flex column, so `order` drives this without
touching the DOM — and only in this look. */
[data-look="lightroom"] .develop-scopes { order: 1; }
[data-look="lightroom"] .develop-header { order: 2; }
[data-look="lightroom"] .develop-auto { order: 3; }
[data-look="lightroom"] .develop-presets { order: 4; }
[data-look="lightroom"] .develop-controls { order: 5; }
[data-look="lightroom"] #developCurveSection { order: 6; }
[data-look="lightroom"] #developHslSection { order: 7; }
[data-look="lightroom"] .develop-masks { order: 8; }
[data-look="lightroom"] .develop-alignment { order: 9; }
[data-look="lightroom"] .develop-ai { order: 10; }
/* LR sliders: thin track with a small flat handle. The fill already uses
var(--accent) (now LR blue) via the base track gradient. */
[data-look="lightroom"] .develop-panel input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
}
[data-look="lightroom"] .develop-panel input[type="range"]::-webkit-slider-thumb {
width: 11px;
height: 11px;
margin-top: -4px;
background: #e8e8e8;
border: 1px solid #111;
box-shadow: none;
}
/* Filmstrip: darker strip, square thumbs — the Lightroom filmstrip look. */
[data-look="lightroom"] .editor-filmstrip {
background: var(--img-well);
}
[data-look="lightroom"] .filmstrip-item {
border-radius: 2px;
}
/* SF system type stack + tighter tracking + lighter heading weights. */
[data-look="studio"] body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
ui-sans-serif, system-ui, "Segoe UI", sans-serif;
letter-spacing: -0.01em;
-webkit-font-smoothing: antialiased;
}
[data-look="studio"] h1,
[data-look="studio"] h2,
[data-look="studio"] h3,
[data-look="studio"] .toolbar h2 {
font-weight: 500;
letter-spacing: -0.02em;
}
/* Hairline panel separators; the sidebar/inspector pick up a hint of vibrancy
through a slightly translucent surface so the native blur adds subtle depth. */
[data-look="studio"] .sidebar,
[data-look="studio"] .inspector {
background: color-mix(in srgb, var(--surface-2) 88%, transparent);
-webkit-backdrop-filter: saturate(150%) blur(18px);
backdrop-filter: saturate(150%) blur(18px);
}
/* Hidden-inset traffic lights overlay the sidebar's top-left — clear them and
make the top of the window draggable. */
[data-look="studio"] .sidebar {
padding-top: 30px;
-webkit-app-region: drag;
}
[data-look="studio"] .toolbar {
-webkit-app-region: drag;
}
[data-look="studio"] button,
[data-look="studio"] input,
[data-look="studio"] select,
[data-look="studio"] a,
[data-look="studio"] .panel,
[data-look="studio"] .photo-card,
[data-look="studio"] label {
-webkit-app-region: no-drag;
}
/* Generous, rounded cards with flat hairline borders (no heavy slabs). */
[data-look="studio"] .panel,
[data-look="studio"] .metrics,
[data-look="studio"] .sidebar-metrics div,
[data-look="studio"] .modal-card,
[data-look="studio"] .inspector-vision,
[data-look="studio"] .inspector-exif {
border-radius: var(--radius-lg);
border-color: var(--line);
}
[data-look="studio"] .brand-mark {
border-radius: 10px;
}
/* Quiet uppercase section labels in the sidebar/inspector. */
[data-look="studio"] .panel > label,
[data-look="studio"] .panel-head label,
[data-look="studio"] .inspector-subtitle {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10.5px;
color: var(--muted);
}
/* Buttons, inputs, selects: softly rounded, hairline outlines. */
[data-look="studio"] .tool-btn,
[data-look="studio"] .panel button,
[data-look="studio"] input,
[data-look="studio"] select,
[data-look="studio"] .nav-search input,
[data-look="studio"] .sort-control {
border-radius: 10px;
border-color: var(--line);
}
/* Filter tabs → segmented control inside the shared floating bar. Active =
bright neutral pill (reserving the blue accent for picks, scores and primary
actions). The bar chrome itself comes from the base .toolbar-actions rule, so
the nav reads the same across every look. */
[data-look="studio"] .filter-tabs button {
border-radius: 10px;
font-weight: 500;
color: var(--muted);
background: transparent;
}
[data-look="studio"] .filter-tabs button:hover {
color: var(--text);
}
[data-look="studio"] .filter-tabs button.active,
[data-look="studio"] .filter-tabs button[data-filter="collection"].active,
[data-look="studio"] .filter-tabs button[data-filter="slideshow"].active {
background: var(--text);
color: var(--bg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* Photo grid: rounder tiles, accent ring on the active selection. */
[data-look="studio"] .photo-card {
border-radius: var(--radius-lg);
}
[data-look="studio"] .photo-card.selected,
[data-look="studio"] .photo-card.active {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: transparent;
}
/* Primary accent buttons: solid blue, navy text, pill-soft. */
[data-look="studio"] .tool-btn.accent,
[data-look="studio"] .panel button.primary,
[data-look="studio"] .tool-btn.primary {
background: var(--accent);
color: var(--on-accent);
border-color: transparent;
}
/* Settings modal under Studio: tint the SF-symbol icon chips with the accent. */
[data-look="studio"] .settings-ico {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 15%, transparent);
}
/* ---- Studio bold pass: borderless, floating cards, airy photo-forward grid,
quieter stats, and a compact top-right search that expands on demand. ---- */
/* No lines: drop every hairline/border. Separation now comes from spacing,
subtle surface fills and soft shadows instead. (Focus rings still use accent.) */
[data-look="studio"] {
--line: transparent;
--line-2: transparent;
}
/* The chrome panels separate by their translucent fill, no edges. */
[data-look="studio"] .sidebar,
[data-look="studio"] .inspector,
[data-look="studio"] .toolbar {
border: none;
}
/* Floating photo cards — soft shadow + big radius instead of an outline. */
[data-look="studio"] .photo-card {
border: none;
border-radius: 18px;
background: var(--panel);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.22);
transition: box-shadow 0.16s ease, transform 0.16s ease;
}
[data-look="studio"] .photo-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32), 0 14px 32px rgba(0, 0, 0, 0.3);
}
[data-look="studio"] .photo-card.selected,
[data-look="studio"] .photo-card.selected-for-batch {
outline: 2px solid var(--accent);
outline-offset: 3px;
box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}
[data-look="studio"][data-theme="light"] .photo-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.09);
}
/* Tighter grid — images pack close together on a consistent rhythm. */
[data-look="studio"] .photo-grid {
gap: 12px;
padding: 16px;
}
[data-look="studio"] .thumb-wrap {
height: var(--thumb-h, 170px);
flex-basis: var(--thumb-h, 170px);
}
/* Group ("similar shots") containers are minimal — a faint neutral tint and a
hairline ring. Layout (subgrid spans, vertical-only padding) comes from the
base rules so member frames stay aligned to the standalone-card columns;
Studio only restyles the colours. */
[data-look="studio"] .dupe-band {
background: color-mix(in srgb, var(--surface-2) 45%, transparent);
box-shadow: inset 0 0 0 1px var(--line);
}
/* Minimal group header: small, muted, low-key compare affordance. */
[data-look="studio"] .dupe-band-head {
font-size: 11px;
font-weight: 500;
color: var(--muted);
}
[data-look="studio"] .dupe-band-dot {
width: 6px;
height: 6px;
background: var(--muted);
box-shadow: none;
}
[data-look="studio"] .dupe-band-compare {
padding: 3px 9px;
border: 1px solid var(--line-2);
border-radius: 7px;
color: var(--muted);
font-weight: 500;
opacity: 0.65;
transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
[data-look="studio"] .dupe-band:hover .dupe-band-compare {
opacity: 1;
color: var(--text-2);
}
[data-look="studio"] .dupe-band-compare:hover {
background: var(--raised);
}
/* Inside a band the per-frame "duplicate" pill is redundant with the group
chrome, so it softens to a quiet translucent chip; the keeper's ★ marker
stays legible. */
[data-look="studio"] .dupe-band .badge.duplicate {
background: color-mix(in srgb, var(--danger) 16%, transparent);
color: color-mix(in srgb, var(--danger) 90%, white);
}
/* Simplify badges + stats so the photos dominate (stats still toggle on). */
[data-look="studio"] .badge {
font-weight: 600;
font-size: 10px;
padding: 3px 7px;
border-radius: 7px;
}
[data-look="studio"] .score-chip {
font-weight: 600;
border-radius: 8px;
}
[data-look="studio"] .card-name {
font-weight: 600;
}
[data-look="studio"] .metric-k {
font-weight: 500;
color: var(--muted);
}
[data-look="studio"] .metric-v {
font-weight: 600;
color: var(--text-2);
}
[data-look="studio"] .metric-track {
background: var(--track);
}
/* The search lives inside the shared floating bar (see base .nav-search). It
reveals inward over the tabs on hover/focus; Studio just drops the field's
border for its flatter chrome. */
[data-look="studio"] .nav-search input {
border: none;
background: var(--raised);
}
[data-look="studio"] .nav-search .collection-run {
background: var(--accent);
color: var(--on-accent);
border: none;
}
/* Hide the search-options gear until the field is open. */
[data-look="studio"] .search-options-btn {
width: 0;
min-width: 0;
padding: 0;
opacity: 0;
overflow: hidden;
transition: width 0.22s ease, padding 0.22s ease, opacity 0.18s ease;
}
[data-look="studio"] .nav-search:hover .search-options-btn,
[data-look="studio"] .nav-search:focus-within .search-options-btn {
width: 32px;
min-width: 32px;
padding: 0 8px;
opacity: 1;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
body {
margin: 0;
min-width: 1100px;
min-height: 760px;
/* Lead with the native Apple UI face (SF Pro) — crisp at small sizes and
already on every Mac — then Inter / system fallbacks for other platforms. */
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "calt";
background: var(--bg);
color: var(--text);
letter-spacing: -0.006em;
}
button,
input,
select {
font: inherit;
}
.app-shell {
position: relative;
display: grid;
grid-template-columns: 260px 1fr 360px;
height: 100vh;
overflow: hidden;
/* Animate the first column to 0 when the side panel collapses, so the photo
grid grows smoothly instead of snapping. */
transition: grid-template-columns 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.app-shell.slideshow-mode {
grid-template-columns: 260px minmax(0, 1fr) 370px;
}
/* Dashboard takes the full width — drop the right inspector panel. */
.app-shell.dashboard-mode {
grid-template-columns: 260px minmax(0, 1fr);
}
.app-shell.dashboard-mode .inspector {
display: none;
}
/* Collapsed side panel: zero the left column in every layout mode and clip the
panel's contents away as it shrinks. */
.app-shell.sidebar-collapsed {
grid-template-columns: 0 1fr 360px;
}
.app-shell.sidebar-collapsed.slideshow-mode {
grid-template-columns: 0 minmax(0, 1fr) 370px;
}
.app-shell.sidebar-collapsed.dashboard-mode {
grid-template-columns: 0 minmax(0, 1fr);
}
.app-shell.sidebar-collapsed .sidebar {
padding-left: 0;
padding-right: 0;
border-right-color: transparent;
overflow: hidden;
opacity: 0;
}
.sidebar,
.inspector {
background: var(--surface-2);
border-color: var(--line);
overflow-y: auto;
}
.sidebar {
display: flex;
flex-direction: column;
border-right: 1px solid var(--line);
padding: 14px;
min-width: 0;
transition: opacity 0.18s ease, padding 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sidebar section order — decoupled from DOM order so the workflow leads:
Project → Beta Sprint → Import → My Taste, with history/provider below.
The Beta Sprint panel and licence banner are injected at runtime; their
order slots them into place wherever they mount. */
.sidebar > .brand { order: 0; }
.sidebar > #projectCard { order: 1; }
.sidebar > .sidebar-metrics { order: 2; }
.sidebar > .beta-sprint { order: 3; }
.sidebar > #importPanel { order: 4; }
.sidebar > #styleLearnPanel { order: 5; }
.sidebar > #historyPanel { order: 6; }
.sidebar > .photo-explorer { order: 9; }
.sidebar > #licenseBanner { order: 10; }
/* Hidden settings-only panels: pin last so they never jump to the top (order:0)
if shown inline in settings mode. */
.sidebar > #duplicateSettingsPanel,
.sidebar > #scoringSettingsPanel { order: 20; }
/* Compact the Project card — tight spacing; thumbnail picker kept, lightly trimmed. */
#projectCard { padding: 9px 11px; margin-bottom: 7px; }
#projectCard .card-head { margin-bottom: 7px; }
#projectCard > label { margin-bottom: 3px; font-size: 11.5px; }
#projectCard #projectName { height: 31px; margin-bottom: 7px; }
#projectCard .shoot-type-row { margin: 0 0 7px; }
#projectCard .shoot-type-select { height: 30px; margin-bottom: 0; }
#projectCard .project-picker .project-picker-btn { padding: 6px 9px; }
#projectCard .project-picker-thumb { width: 48px; height: 34px; }
#projectCard .project-autosave-note { margin-top: 5px; }
/* Compact the project counts (part of the project area). */
.sidebar-metrics { margin-bottom: 8px; }
.sidebar-metrics div { padding: 6px; }
.sidebar-metrics strong { font-size: 15px; }
/* Subtle "tuck away" button in the brand row. Muted by default; picks up the
warm brand coral on hover so it reads as part of the LightVision chrome. */
.sidebar-collapse-btn {
flex: none;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--muted);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sidebar-collapse-btn svg {
width: 18px;
height: 18px;
}
.sidebar-collapse-btn:hover {
color: #ff7a93;
background: rgba(255, 122, 147, 0.12);
border-color: rgba(255, 122, 147, 0.28);
}
.sidebar-collapse-btn:focus-visible {
outline: 2px solid #ff7a93;
outline-offset: 1px;
}
/* Branded reveal tab — a gradient prism pill on the left edge, shown only when
the panel is collapsed. The gradient matches the website coral -> violet. */
.sidebar-reveal-btn {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 40;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
width: 30px;
padding: 13px 0;
border: none;
border-radius: 0 13px 13px 0;
color: #fff;
background: linear-gradient(160deg, #ff9a5c 0%, #ff6f91 45%, #a06bff 100%);
box-shadow: 0 6px 18px rgba(160, 107, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.28);
cursor: pointer;
transition: width 0.18s ease, padding 0.18s ease, box-shadow 0.18s ease;
}
.app-shell.sidebar-collapsed .sidebar-reveal-btn {
display: inline-flex;
}
.sidebar-reveal-btn:hover {
width: 36px;
box-shadow: 0 8px 24px rgba(160, 107, 255, 0.5), 0 1px 3px rgba(0, 0, 0, 0.32);
}
.sidebar-reveal-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.sidebar-reveal-btn .reveal-prism {
width: 20px;
height: 20px;
}
.sidebar-reveal-btn .reveal-chev {
width: 13px;
height: 13px;
opacity: 0.92;
}
.app-shell.slideshow-mode .sidebar {
padding: 14px;
}
.inspector {
border-left: 1px solid var(--line);
padding: 22px;
}
.app-shell.slideshow-mode .inspector {
padding: 14px;
}
.brand {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.app-shell.slideshow-mode .brand {
gap: 10px;
margin-bottom: 14px;
}
/* The mark is a self-contained inline SVG (dark prism tile) — no CSS fill. */
.brand-mark {
flex: none;
width: 38px;
height: 38px;
border-radius: 8px;
}
.brand-name {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
/* "Vision" carries the website brand gradient (coral -> violet). */
.brand-name-accent {
background: linear-gradient(100deg, #ff9a5c 0%, #ff6f91 42%, #a06bff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.app-shell.slideshow-mode .brand-mark {
width: 38px;
height: 38px;
border-radius: 7px;
}
h1,
h2,
h3,
p {
margin: 0;
}
h1 {
font-size: 16px;
}
.brand p {
font-size: 12px;
line-height: 1.2;
}
.app-shell.slideshow-mode h1 {
font-size: 16px;
}
.app-shell.slideshow-mode .brand p {
font-size: 12px;
line-height: 1.2;
}
.brand p,
.hint,
.toolbar p,
.inspector-empty p,
.card-sub {
color: var(--muted);
}
.panel,
.metrics {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
}
.sidebar .settings-only {
display: none;
}
.settings-card .settings-only {
display: block;
}
.settings-modal-panel {
margin-bottom: 0;
}
.photo-explorer {
display: grid;
gap: 10px;
padding: 11px;
margin-bottom: 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: linear-gradient(180deg, var(--panel), var(--surface-2));
}
.app-shell.slideshow-mode .panel,
.app-shell.slideshow-mode .metrics,
.app-shell.slideshow-mode .photo-explorer {
padding: 11px;
margin-bottom: 10px;
}
.explorer-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.explorer-head strong {
font-size: 13px;
}
.explorer-head span {
color: var(--muted);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.explorer-sources {
display: flex;
gap: 7px;
overflow-x: auto;
padding-bottom: 2px;
}
.explorer-source {
flex: 0 0 112px;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 5px;
width: 100%;
min-height: 62px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--text);
text-align: left;
}
.explorer-source span {
display: grid;
min-width: 0;
gap: 1px;
}
.explorer-source strong,
.explorer-source em {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.explorer-source strong {
font-size: 12px;
}
.explorer-source em {
color: var(--muted);
font-size: 10px;
font-style: normal;
}
.explorer-source b {
justify-self: start;
min-width: 32px;
padding: 4px 7px;
border-radius: 999px;
background: var(--panel-2);
color: var(--blue);
font-size: 11px;
text-align: center;
}
.explorer-source:hover,
.explorer-source.drop-target,
.explorer-source.active {
border-color: var(--accent);
}
.explorer-source.active {
background: var(--surface-2);
}
.explorer-source.dragging {
opacity: 0.72;
}
.explorer-source.empty {
opacity: 0.5;
}
.explorer-empty {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.explorer-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
max-height: 45vh;
overflow-y: auto;
padding-right: 2px;
}
.explorer-thumb {
display: grid;
gap: 4px;
padding: 4px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--text);
text-align: left;
}
.explorer-thumb img,
.explorer-thumb > span {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 6px;
background: var(--img-well) center / cover no-repeat;
object-fit: cover;
}
.explorer-thumb em {
overflow: hidden;
color: var(--muted);
font-size: 9px;
font-style: normal;
white-space: nowrap;
text-overflow: ellipsis;
}
.explorer-thumb:hover,
.explorer-thumb.dragging {
border-color: var(--blue);
}
label {
display: block;
margin: 0 0 8px;
color: var(--text-2);
font-size: 13px;
font-weight: 700;
}
input[type="password"],
input[type="text"],
select {
width: 100%;
height: 40px;
border: 1px solid var(--line-2);
border-radius: 8px;
background: var(--field);
color: var(--text);
padding: 0 12px;
margin-bottom: 14px;
outline: none;
}
select {
appearance: none;
}
input:focus,
select:focus {
border-color: var(--accent);
}
button {
border: 0;
border-radius: 8px;
cursor: pointer;
}
.panel button {
width: 100%;
height: 36px;
margin-bottom: 7px;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--line-2);
font-weight: 800;
}
.app-shell.slideshow-mode .panel button {
height: 36px;
margin-bottom: 7px;
}
.panel button:hover {
border-color: var(--accent);
}
.panel button.primary {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.button-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.button-row button {
margin-bottom: 0;
}
button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.top-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(64px, 1fr));
gap: 7px;
flex: 0 0 min(300px, 32vw);
}
.metrics div,
.top-metrics div {
min-height: 52px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--line);
padding: 9px 10px;
}
.top-metrics div {
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 7px 11px;
}
.app-shell.slideshow-mode .metrics {
gap: 7px;
}
.app-shell.slideshow-mode .metrics div {
min-height: 52px;
padding: 9px;
}
.metrics strong,
.top-metrics strong {
display: block;
font-size: 21px;
}
.top-metrics strong {
font-size: 17px;
font-weight: 800;
line-height: 1.1;
}
.app-shell.slideshow-mode .metrics strong {
font-size: 21px;
}
.metrics span,
.top-metrics span {
color: var(--muted);
font-size: 12px;
}
.top-metrics span {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Sidebar metrics (moved from toolbar) */
.sidebar-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 0;
margin: 0 0 12px;
}
.sidebar-metrics div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 6px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--line);
}
.sidebar-metrics strong {
font-size: 17px;
font-weight: 800;
line-height: 1.1;
}
.sidebar-metrics span {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* Gallery toolbar — sits above the photo grid */
.gallery-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 20px;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.gallery-toolbar-left {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.gallery-toolbar-right {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.gallery-toolbar .selection-controls {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
}
.compact {
padding-bottom: 18px;
}
.threshold-row {
display: flex;
align-items: center;
justify-content: space-between;
}
output {
color: var(--accent-2);
font-weight: 900;
}
input[type="range"] {
width: 100%;
accent-color: var(--accent);
}
.hint {
font-size: 12px;
line-height: 1.45;
}
.workspace {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--stage);
position: relative;
}
.toolbar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: nowrap;
padding: 10px 20px;
/* The nav bar (.toolbar-actions) is position: fixed and out of flow, so
reserve its height here — otherwise the content below would slide up
underneath the floating bar. */
min-height: 58px;
border-bottom: 1px solid var(--line);
}
.toolbar-title {
display: none;
}
.toolbar-title #folderLabel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
letter-spacing: 0.01em;
}
.toolbar h2 {
margin-top: 2px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================================
Primary navigation — a single floating glass bar (tabs + search) pinned to
the window's horizontal centre.
It used to live in the workspace toolbar, so it drifted sideways whenever the
left panel collapsed or the Dashboard tab dropped the right inspector (the
middle workspace column resized underneath it). Fixing it to the viewport
centre keeps it rock-steady across every tab and layout change.
The search is part of THIS bar (not a separate element floating off to the
right), and it reveals INWARD over the tabs — so the bar never grows, never
shifts, and never overlaps anything outside itself.
`.toolbar-actions` is the bar; `.filter-tabs` is the tab group inside it; and
`.nav-search` (further below) is the overlay search that lives within it.
========================================================================== */
.toolbar-actions {
position: fixed;
top: 9px;
left: 50%;
transform: translateX(-50%);
transform-origin: top center;
z-index: 45;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 2px;
margin: 0;
max-width: calc(100vw - 40px);
padding: 5px;
border-radius: 15px;
background: color-mix(in srgb, var(--surface-2) 80%, transparent);
border: 1px solid color-mix(in srgb, var(--line-2) 55%, transparent);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 8px 28px rgba(0, 0, 0, 0.3),
0 2px 6px rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: saturate(160%) blur(20px);
backdrop-filter: saturate(160%) blur(20px);
transition: transform 0.24s cubic-bezier(0.34, 1.3, 0.5, 1),
opacity 0.2s ease, box-shadow 0.2s ease, top 0.2s ease;
}
.filter-tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
gap: 2px;
min-width: 0;
}
.filter-tabs::-webkit-scrollbar {
display: none;
}
.filter-tabs button {
height: 30px;
flex: 0 0 auto;
padding: 0 13px;
border-radius: 10px;
color: var(--muted);
background: transparent;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.005em;
white-space: nowrap;
transition: color 0.16s ease, background 0.16s ease, transform 0.1s ease;
}
.filter-tabs button:hover {
color: var(--text);
background: color-mix(in srgb, var(--text) 9%, transparent);
}
.filter-tabs button.active,
.filter-tabs button.active:hover {
color: var(--on-accent);
background: linear-gradient(
180deg,
color-mix(in srgb, var(--accent) 90%, white),
var(--accent)
);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.22) inset,
0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
.filter-tabs button.active:active {
transform: scale(0.96);
}
/* Editor (Develop) — the nav contracts to a quiet mini bar so it never competes
with the photo, then springs back to full size on hover. It stays pinned to
the top-centre because the scale grows downward from transform-origin. */
.app-shell.editor-open .toolbar-actions {
top: 6px;
transform: translateX(-50%) scale(0.72);
opacity: 0.5;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.app-shell.editor-open .toolbar-actions:hover {
transform: translateX(-50%) scale(1);
opacity: 1;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 10px 32px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.2);
}
.sort-control {
display: flex;
align-items: center;
gap: 7px;
height: 30px;
margin: 0;
padding: 0 8px 0 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface-2);
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.sort-control select {
width: auto;
min-width: 100px;
height: 26px;
margin: 0;
padding: 0 22px 0 8px;
border-color: var(--line);
border-radius: 6px;
background: var(--field);
color: var(--text);
font-size: 12px;
font-weight: 700;
}
.empty-state {
display: grid;
place-items: center;
align-content: center;
gap: 10px;
height: 100%;
padding: 32px;
text-align: center;
}
.empty-state h3 {
font-size: 30px;
}
.empty-state p {
max-width: 520px;
color: var(--muted);
line-height: 1.55;
}
/* Full-window overlay shown while dragging photo files over the app. */
.file-drop-overlay {
position: fixed;
inset: 0;
z-index: 9000;
display: grid;
place-items: center;
padding: 40px;
background: color-mix(in srgb, var(--bg) 78%, transparent);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.16s ease;
pointer-events: none; /* never intercept the drop itself */
}
.file-drop-overlay.is-visible { opacity: 1; }
.file-drop-card {
text-align: center;
padding: 40px 48px;
border-radius: 18px;
border: 2px dashed var(--accent);
background: var(--panel);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
max-width: 460px;
}
.file-drop-card h3 {
font-size: 26px;
margin-bottom: 8px;
color: var(--text);
}
.file-drop-card p {
color: var(--muted);
line-height: 1.5;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--card-size, 190px), 1fr));
/* Size rows to each card's full content so the stats panel is never clipped
(cards use overflow:hidden, which otherwise lets auto rows shrink them). */
grid-auto-rows: max-content;
align-content: start;
flex: 1;
min-height: 0;
gap: 8px;
padding: 12px;
overflow-y: auto;
position: relative;
}
.photo-card {
display: flex;
flex-direction: column;
width: 100%;
min-height: 242px;
min-width: 0;
padding: 0;
overflow: hidden;
text-align: left;
background: var(--panel);
color: var(--text);
border: 1px solid var(--line);
border-radius: 8px;
}
/* When near-duplicate bands are present the grid STAYS a uniform column grid
(it no longer flips to a packed flex flow, which made bands wider than single
cards and broke their column alignment). Each band spans an integer number of
columns and uses `subgrid`, so a band's member frames land on exactly the same
column lines as the standalone cards around them — dupes and non-dupes align.
`dense` backfill lets the single cards that follow a wide band slot into the
empty space beside a narrower band on the same row, so there are no large dead
gaps where a wide band couldn't fit and wrapped (a slight reshuffle of strict
chronological order is the trade-off, and well worth the tighter packing). */
.photo-grid.grouped-flow {
/* Fixed height a band spends on its "N similar shots" header. Shared by the
header itself and by the standalone-card offset below so thumbnails line up. */
--band-head-h: 28px;
grid-auto-flow: row dense;
align-items: start;
}
/* Standalone cards occupy a single column and top-align (so a tall band in the
same row never stretches its neighbours). The top margin reserves the same
space a band gives its header (+ the band's header row-gap), so a standalone
card's thumbnail starts at the same y as the band members' thumbnails. */
.photo-grid.grouped-flow > .photo-card {
align-self: start;
margin-top: calc(var(--band-head-h) + 8px);
}
.photo-card.selected {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Batch-selection highlight (distinct from the inspected `.selected` card). */
.photo-card.selected-for-batch {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent);
}
.thumb-wrap {
position: relative;
flex: 0 0 var(--thumb-h, 142px);
width: 100%;
height: var(--thumb-h, 142px);
background: var(--img-well);
overflow: hidden;
}
.thumb-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
}
.thumb-loading {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: var(--muted);
}
.badge {
position: absolute;
top: 7px;
left: 7px;
padding: 2.5px 6px;
border-radius: 6px;
color: #f4f1ea;
background: rgba(10, 13, 16, 0.62);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* Keepers/picks stay solid so the best shots pop; the everyday statuses
(review / alternate / duplicate) read as quiet tinted-text pills. */
.badge.pick {
color: var(--on-accent);
background: var(--accent);
border-color: transparent;
}
.badge.alternate {
color: var(--blue);
}
.badge.duplicate {
color: var(--danger);
}
/* Overall score, right-aligned in the card header. Colour mirrors the metric
tone scale so quality reads at a glance. */
.score-chip {
flex: 0 0 auto;
min-width: 34px;
height: 26px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
font-size: 15px;
font-weight: 900;
font-variant-numeric: tabular-nums;
color: var(--on-accent);
background: var(--accent-2);
}
.score-chip.strong {
background: var(--accent);
color: var(--on-accent);
}
.score-chip.okay {
background: var(--blue);
color: var(--on-accent);
}
.score-chip.weak {
background: var(--danger);
color: #fff1f1;
}
.score-chip.neutral {
background: var(--raised);
color: var(--text-2);
}
.raw-badge {
position: absolute;
right: 7px;
bottom: 7px;
padding: 2px 5px;
border-radius: 5px;
color: #ece7dc;
background: rgba(10, 13, 16, 0.58);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.04em;
}
/* On-image eye-openness badge (icon + %). Sits bottom-left so it never
overlaps the select box / subject-priority badge in the top-right corner
(the RAW badge occupies the bottom-right). */
.eye-badge {
position: absolute;
bottom: 7px;
left: 7px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 5px;
border-radius: 5px;
background: rgba(10, 13, 16, 0.58);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
color: #ece7dc;
font-size: 9px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
pointer-events: none;
}
.eye-badge svg {
width: 11px;
height: 11px;
}
.eye-badge svg {
display: block;
}
.eye-badge.strong {
color: #8be4a6;
}
.eye-badge.okay {
color: #ffd778;
}
.eye-badge.weak {
color: #ff9d9d;
}
/* On-image pet badge (cat icon + count) — pet-photography shoots only. Shares
the eye badge's bottom-left corner; when an eye badge is present on the same
card the pet badge stacks above it. */
.pet-badge {
position: absolute;
bottom: 7px;
left: 7px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 5px;
border-radius: 5px;
background: rgba(10, 13, 16, 0.58);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
color: #f0c88f;
font-size: 9px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
pointer-events: none;
}
.pet-badge svg {
width: 11px;
height: 11px;
display: block;
}
.eye-badge ~ .pet-badge {
bottom: 30px;
}
/* Pet crops reuse the face-crop strip styling; the caption's inline cat icon
just needs to sit on the text baseline. */
.pet-crop figcaption svg {
width: 10px;
height: 10px;
vertical-align: -1px;
}
/* Inline eye icon used in the inspector breakdown + compare overlay; inherits
tone colour, no pill. */
.eye-inline {
display: inline-flex;
vertical-align: middle;
}
.eye-inline.strong {
color: var(--accent);
}
.eye-inline.okay {
color: var(--blue);
}
.eye-inline.weak {
color: var(--danger);
}
.card-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px 10px;
}
.card-head {
display: flex;
align-items: center;
gap: 8px;
}
.card-head-text {
min-width: 0;
flex: 1;
}
.card-name {
display: block;
font-size: 13px;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-sub {
display: block;
margin-top: 2px;
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Metric mini-bars: a tidy auto-fitting grid that reads as data, not chips. */
.card-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
gap: 6px 8px;
}
.metric-cell {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.metric-k {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.metric-v {
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--text-2);
line-height: 1;
}
.metric-track {
height: 3px;
border-radius: 2px;
background: var(--panel);
overflow: hidden;
}
.metric-track i {
display: block;
height: 100%;
border-radius: 2px;
background: var(--bar);
}
.metric-cell.strong .metric-v { color: var(--accent); }
.metric-cell.strong .metric-track i { background: var(--accent); }
.metric-cell.okay .metric-v { color: var(--blue); }
.metric-cell.okay .metric-track i { background: var(--blue); }
.metric-cell.weak .metric-v { color: var(--danger); }
.metric-cell.weak .metric-track i { background: var(--danger); }
.metric-cell.neutral .metric-v { color: var(--muted); }
/* Contextual flags: subtle, outlined pills kept visually quieter than metrics. */
.card-flags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.flag {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
color: var(--text-2);
background: transparent;
border: 1px solid var(--line);
}
.flag.okay {
color: var(--blue);
border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
}
.flag.weak {
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}
.flag.good {
color: var(--accent, #3fa66a);
border-color: color-mix(in srgb, var(--accent, #3fa66a) 60%, var(--line));
background: color-mix(in srgb, var(--accent, #3fa66a) 12%, transparent);
}
.inspector-markers {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.marker {
display: inline-flex;
align-items: center;
max-width: 100%;
min-height: 19px;
padding: 2px 6px;
border-radius: 6px;
background: var(--raised);
color: var(--text-2);
border: 1px solid var(--line-2);
font-size: 10px;
font-weight: 800;
line-height: 1.1;
white-space: nowrap;
}
.marker.strong {
color: var(--on-accent);
background: var(--accent);
border-color: var(--accent);
}
.marker.okay {
color: var(--on-accent);
background: var(--blue);
border-color: var(--blue);
}
.marker.weak {
color: var(--on-accent);
background: var(--danger);
border-color: var(--danger);
}
.marker.neutral {
color: var(--text-2);
background: var(--raised);
}
.marker.focus {
color: var(--on-warm);
background: #ffd66b;
border-color: #ffd66b;
}
.score-bar {
height: 4px;
margin-top: auto;
background: var(--track);
}
.score-bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
/* "Stats off" view: cards collapse to clean thumbnails (status badge + overlays
only), so the grid reads as a pure contact sheet. */
.photo-grid.no-stats .card-body,
.photo-grid.no-stats .score-bar {
display: none;
}
.photo-grid.no-stats .photo-card {
min-height: 0;
}
/* Toolbar view controls (mirror the .sort-control pill styling) */
.view-toggle,
.size-control {
display: flex;
align-items: center;
gap: 8px;
height: 30px;
margin: 0;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface-2);
color: var(--muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
user-select: none;
}
.view-toggle input {
width: 15px;
height: 15px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.size-control input[type="range"] {
width: 72px;
height: 4px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.size-ico {
font-size: 13px;
line-height: 1;
color: var(--muted);
}
.inspector-empty {
display: grid;
place-items: center;
align-content: center;
min-height: 70vh;
gap: 8px;
text-align: center;
}
#inspectorImage {
width: 100%;
height: 280px;
object-fit: contain;
border-radius: 8px;
background: var(--img-well);
margin-bottom: 16px;
}
#inspectorName {
font-size: 18px;
overflow-wrap: anywhere;
}
.score-ring {
display: grid;
place-items: center;
width: 116px;
height: 116px;
margin: 22px auto;
border-radius: 50%;
background:
radial-gradient(circle at center, var(--surface-2) 58%, transparent 59%),
conic-gradient(var(--accent), var(--accent-2), var(--line-2) 72%);
}
.score-ring span {
font-size: 30px;
font-weight: 900;
}
.score-breakdown {
display: grid;
gap: 12px;
}
.score-breakdown div {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"label value"
"meter meter";
column-gap: 10px;
row-gap: 5px;
align-items: center;
color: var(--text-2);
font-size: 13px;
}
.score-breakdown div meter { grid-area: meter; }
.score-breakdown div strong {
grid-area: value;
justify-self: end;
}
.score-breakdown .inspector-markers {
display: flex;
grid-template-columns: none;
gap: 7px;
align-items: flex-start;
margin-top: 4px;
}
meter {
width: 100%;
height: 8px;
}
#inspectorNotes {
margin-top: 20px;
padding: 14px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
color: var(--text-2);
line-height: 1.5;
}
.profile-banner {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 12px 9px 11px;
margin: 0 0 2px;
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent) 13%, var(--surface)),
color-mix(in srgb, var(--accent) 6%, var(--surface)));
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
border-radius: 10px;
font-size: 12px;
color: var(--text);
animation: bannerSlideIn 0.3s ease-out;
}
@keyframes bannerSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.profile-banner-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.profile-banner-icon svg { width: 17px; height: 17px; }
.profile-banner-text { flex: 1; line-height: 1.4; font-weight: 500; }
.profile-banner-details {
background: none;
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: 5px;
color: var(--accent);
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
}
.profile-banner-details:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.profile-banner-dismiss {
background: none;
border: none;
color: var(--text-2);
font-size: 18px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.profile-banner-dismiss:hover { color: var(--text); }
/* Relink banner — same layout/tokens as the profile banner, tinted with
--danger to flag that some originals are offline (non-alarming, inline). */
.relink-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
margin: 0 0 2px;
background: color-mix(in srgb, var(--danger) 10%, var(--surface));
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
border-radius: 8px;
font-size: 12px;
color: var(--text);
animation: bannerSlideIn 0.3s ease-out;
}
.relink-banner-icon { font-size: 16px; flex-shrink: 0; }
.relink-banner-text { flex: 1; line-height: 1.4; }
.relink-banner-check {
background: none;
border: 1px solid color-mix(in srgb, var(--text-2) 35%, transparent);
border-radius: 5px;
color: var(--text-2);
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
}
.relink-banner-check:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.relink-banner-action {
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 5px;
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 3px 12px;
cursor: pointer;
}
.relink-banner-action:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.relink-banner-dismiss {
background: none;
border: none;
color: var(--text-2);
font-size: 18px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
}
.relink-banner-dismiss:hover { color: var(--text); }
.profile-details-panel {
margin: 0 0 4px;
padding: 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 12px;
color: var(--text);
animation: bannerSlideIn 0.2s ease-out;
}
.profile-details-content { line-height: 1.55; }
.pf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 10px;
}
.pf-card {
background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
border: 1px solid var(--line);
border-radius: 10px;
padding: 11px 12px 12px;
}
.pf-card-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 9px;
}
.pf-card-ic {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 7px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.pf-card-ic svg { width: 14px; height: 14px; }
.pf-card-label {
font-weight: 600;
color: var(--text-2);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
.pf-card-body { display: flex; flex-direction: column; gap: 4px; }
.pf-row {
position: relative;
padding-left: 13px;
color: var(--text);
font-size: 12px;
}
.pf-row::before {
content: "";
position: absolute;
left: 2px;
top: 7px;
width: 4px;
height: 4px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.pf-row-lead { font-weight: 600; }
.pf-note {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--line);
color: var(--text-2);
opacity: 0.85;
font-size: 11px;
line-height: 1.4;
}
.pf-arrow { color: var(--accent); margin: 0 2px; font-weight: 600; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; padding-left: 13px; }
.pf-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.2px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.pf-row .positive,
.pf-row .negative {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
}
.pf-row .positive {
color: #2f9e6b;
background: color-mix(in srgb, #34a853 16%, transparent);
}
.pf-row .negative {
color: #d9663b;
background: color-mix(in srgb, #ea4335 15%, transparent);
}
.shoot-type-row {
display: flex;
align-items: center;
gap: 8px;
margin: 6px 0 2px;
}
/* Unified spine line under the shoot-type dropdown: type → style profile + nurture. */
.shoot-type-spine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 0.72rem; }
.shoot-type-spine .sts-lead { color: var(--muted, #999); font-weight: 600; }
.shoot-type-spine .sts-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,0.12)); color: var(--text, #ccc); background: rgba(255,255,255,0.03); }
.shoot-type-spine .sts-nurture { border-color: color-mix(in srgb, var(--accent, #c9a36b) 45%, transparent); color: color-mix(in srgb, var(--accent, #c9a36b) 90%, #fff); background: color-mix(in srgb, var(--accent, #c9a36b) 10%, transparent); }
.shoot-type-spine .sts-muted { color: var(--muted, #888); opacity: 0.8; }
/* Custom shoot-type manager (Studio plan) modal. */
.cst-card { max-width: 460px; }
.cst-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 240px; overflow-y: auto; }
.cst-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line, rgba(255,255,255,0.1)); border-radius: 9px; }
.cst-row .cst-name { font-weight: 600; }
.cst-row .cst-mkt { color: var(--muted, #999); font-size: 0.8rem; flex: 1; }
.cst-row .cst-del { margin-left: auto; }
.cst-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cst-add .cst-label { flex: 1; min-width: 0; margin: 0; }
.cst-add .cst-market { max-width: 46%; }
.shoot-type-row label {
font-size: 11px;
color: var(--text-2);
white-space: nowrap;
}
.shoot-type-select {
flex: 1;
min-width: 0;
font-size: 11px;
padding: 3px 6px;
}
.inspector-cull-explain {
margin-top: 8px;
padding: 8px 12px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
border-radius: 6px;
color: var(--accent);
font-size: 11px;
line-height: 1.4;
}
.polish-panel {
margin-top: 16px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);
overflow: hidden;
}
.polish-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: 0;
background: transparent;
color: var(--text);
cursor: pointer;
text-align: left;
}
.polish-toggle:hover {
background: var(--surface);
}
.polish-toggle-text {
display: grid;
gap: 3px;
}
.polish-toggle-title {
font-size: 14px;
font-weight: 600;
}
.polish-toggle-status {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
}
.polish-chevron {
color: var(--muted);
transition: transform 0.15s ease;
}
.polish-toggle[aria-expanded="true"] .polish-chevron {
transform: rotate(90deg);
}
.polish-body {
padding: 4px 14px 14px;
border-top: 1px solid var(--line);
}
.polish-tool {
display: grid;
gap: 8px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.polish-tool-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
}
.polish-tool-row label {
font-weight: 600;
color: var(--text);
}
.polish-val {
font-variant-numeric: tabular-nums;
}
.polish-tool input[type="range"] {
width: 100%;
accent-color: var(--accent);
}
.polish-message {
color: var(--muted);
font-size: 12px;
line-height: 1.4;
min-height: 18px;
margin-top: 10px;
}
.polish-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 12px;
}
.polish-actions.secondary {
margin-top: 12px;
}
.polish-actions .tool-btn {
min-height: 36px;
padding: 0 8px;
}
/* Before/after comparison slider */
.polish-compare {
margin: 0 0 12px;
display: grid;
gap: 6px;
}
.compare-frame {
position: relative;
width: 100%;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
user-select: none;
touch-action: none;
cursor: ew-resize;
line-height: 0;
}
.compare-frame img {
display: block;
width: 100%;
height: auto;
pointer-events: none;
}
.compare-after-wrap {
position: absolute;
inset: 0;
width: var(--compare-pos, 50%);
overflow: hidden;
}
.compare-after-wrap .compare-after {
position: absolute;
top: 0;
left: 0;
width: var(--compare-frame-w, 100%);
max-width: none;
}
.compare-divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--compare-pos, 50%);
width: 2px;
background: rgba(255, 255, 255, 0.9);
transform: translateX(-1px);
pointer-events: none;
}
.compare-handle {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 2px solid var(--accent);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.compare-tag {
position: absolute;
bottom: 8px;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
border-radius: 6px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
pointer-events: none;
}
.compare-tag-before { left: 8px; }
.compare-tag-after { right: 8px; }
.compare-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
}
.link-btn {
border: 0;
background: none;
color: var(--accent);
cursor: pointer;
font-size: 11px;
padding: 0;
}
.link-btn:hover {
text-decoration: underline;
}
.polish-outputs {
display: grid;
gap: 8px;
margin-top: 10px;
}
.polish-output {
display: grid;
gap: 2px;
width: 100%;
padding: 9px 10px;
text-align: left;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.polish-output strong {
font-size: 12px;
}
.polish-output span {
overflow-wrap: anywhere;
color: var(--muted);
font-size: 11px;
}
.polish-output:hover {
border-color: var(--accent);
}
@media (max-width: 1180px) {
.app-shell {
grid-template-columns: 260px 1fr 320px;
}
/* Compact the floating nav on narrow windows so it clears the collapsed
search icon in the tightest layout. */
.filter-tabs button {
padding: 0 8px;
font-size: 12.5px;
}
}
/* Progress bar */
.progress-wrap {
margin-top: 8px;
}
.progress-bar {
height: 8px;
border-radius: 4px;
background: var(--track);
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
border-radius: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transition: width 0.3s ease;
}
.progress-label {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--muted);
text-align: center;
}
/* Unified background-task loader (top panel) */
.bg-loader-wrap {
position: relative;
flex: 0 0 auto;
}
.bg-loader {
display: flex;
align-items: center;
gap: 9px;
max-width: 280px;
padding: 4px 13px 4px 4px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel-2);
color: var(--text);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.bg-loader:hover {
border-color: var(--accent);
background: var(--panel);
}
.bg-loader-ring {
position: relative;
flex: 0 0 auto;
width: 26px;
height: 26px;
}
.bg-loader-ring svg {
width: 26px;
height: 26px;
transform: rotate(-90deg);
}
.bg-ring-track {
fill: none;
stroke: var(--track);
stroke-width: 3.5;
}
.bg-ring-fill {
fill: none;
stroke: var(--accent);
stroke-width: 3.5;
stroke-linecap: round;
stroke-dasharray: 97.39;
stroke-dashoffset: 97.39;
transition: stroke-dashoffset 0.3s ease;
}
.bg-loader-ring.indeterminate svg {
animation: bg-spin 0.9s linear infinite;
}
.bg-loader-ring.indeterminate .bg-ring-fill {
stroke-dasharray: 24 74;
stroke-dashoffset: 0;
transition: none;
}
@keyframes bg-spin {
to { transform: rotate(270deg); }
}
.bg-loader-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 8.5px;
font-weight: 600;
color: var(--muted);
}
.bg-loader-info {
display: flex;
flex-direction: column;
min-width: 0;
text-align: left;
}
.bg-loader-label {
font-size: 11px;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bg-loader-detail {
font-size: 10px;
color: var(--muted);
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bg-loader-detail:empty {
display: none;
}
.bg-loader-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 60;
width: 330px;
max-height: 380px;
overflow-y: auto;
padding: 8px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel);
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.bg-loader-popover-head {
padding: 4px 8px 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.bg-task-row {
padding: 8px 10px;
border-radius: 8px;
}
.bg-task-row + .bg-task-row {
margin-top: 2px;
}
.bg-task-row:hover {
background: var(--panel-2);
}
.bg-task-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.bg-task-label {
font-size: 12px;
font-weight: 600;
}
.bg-task-cancel {
flex: 0 0 auto;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 11px;
cursor: pointer;
}
.bg-task-cancel:hover {
border-color: var(--danger);
color: var(--danger);
}
.bg-task-detail {
margin-top: 2px;
font-size: 11px;
color: var(--muted);
}
.bg-task-detail:empty {
display: none;
}
.bg-task-bar {
height: 4px;
margin-top: 6px;
border-radius: 2px;
background: var(--track);
overflow: hidden;
}
.bg-task-bar > span {
display: block;
height: 100%;
width: 0%;
border-radius: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
transition: width 0.3s ease;
}
.bg-task-bar.indeterminate > span {
width: 35%;
animation: bg-indet 1.1s ease-in-out infinite;
}
@keyframes bg-indet {
0% { margin-left: -35%; }
100% { margin-left: 100%; }
}
/* Selection controls */
/* (.toolbar-actions is the floating nav bar — see the Primary navigation block
far above. It is intentionally NOT restyled here.) */
.toolbar-tools {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.view-controls {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
.selection-controls {
display: flex;
align-items: center;
flex-wrap: nowrap;
flex: 0 0 auto;
gap: 8px;
}
.tool-btn {
height: 30px;
padding: 0 12px;
font-size: 12px;
font-weight: 700;
border-radius: 6px;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--line-2);
}
.tool-btn:hover {
border-color: var(--accent);
}
.tool-btn.accent {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.tool-btn.primary {
background: var(--blue);
color: var(--on-accent);
border-color: var(--blue);
}
.tool-btn.accent:disabled {
opacity: 0.45;
}
.selection-count {
font-size: 12px;
color: var(--muted);
font-weight: 600;
}
/* Selection checkbox on photo cards */
.photo-card .select-check {
position: absolute;
top: 7px;
right: 7px;
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid rgba(255,255,255,0.7);
background: rgba(10, 13, 16, 0.5);
cursor: pointer;
z-index: 8;
display: grid;
place-items: center;
/* Hidden until the card is hovered or already part of a selection, so the
default grid reads as a clean contact sheet rather than a sea of checkboxes. */
opacity: 0;
transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.photo-card:hover .select-check,
.photo-card.selected .select-check,
.photo-card.selected-for-batch .select-check,
.photo-card .select-check.checked,
.photo-card .select-check:focus-visible {
opacity: 1;
}
.photo-card .select-check:hover {
border-color: var(--accent);
background: rgba(10, 13, 16, 0.85);
transform: scale(1.08);
}
.photo-card .select-check.checked {
background: var(--accent);
border-color: var(--accent);
}
.photo-card .select-check.checked::after {
content: "✓";
color: var(--on-accent);
font-size: 13px;
font-weight: 900;
line-height: 1;
}
/* Drag marquee (rubber-band) selection rectangle */
.marquee-box {
position: absolute;
z-index: 5;
pointer-events: none;
border: 1px solid var(--accent);
background: color-mix(in srgb, var(--accent) 18%, transparent);
border-radius: 3px;
}
/* Auto-rotation — applied at canvas level during thumbnail generation */
/* Loupe / fullscreen detail view */
.loupe-overlay {
position: fixed;
inset: 0;
z-index: 1400;
display: flex;
flex-direction: column;
background: rgba(7, 9, 12, 0.97);
backdrop-filter: blur(4px);
}
.loupe-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 22px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.loupe-name {
font-size: 16px;
font-weight: 800;
color: var(--text);
}
.loupe-hint {
font-size: 12px;
color: var(--muted);
}
.loupe-stage {
flex: 1;
min-height: 0;
display: grid;
place-items: center;
overflow: hidden;
padding: 20px;
touch-action: none;
}
.loupe-stage img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 6px;
cursor: zoom-in;
transform-origin: 0 0;
will-change: transform;
user-select: none;
-webkit-user-drag: none;
}
.loupe-stage.zoomed,
.loupe-stage.zoomed img {
cursor: grab;
}
.loupe-stage.panning,
.loupe-stage.panning img {
cursor: grabbing;
}
.loupe-stage img.loupe-loading {
opacity: 0.4;
}
/* EXIF capture-settings panel in inspector */
.inspector-exif {
margin: 12px 0 4px;
}
.exif-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.exif-chip {
display: inline-flex;
align-items: center;
padding: 4px 9px;
border-radius: 7px;
background: var(--panel-2);
border: 1px solid var(--line-2);
color: var(--text-2);
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.exif-gear {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
overflow-wrap: anywhere;
}
.exif-tech {
font-size: 12px;
color: var(--accent);
font-weight: 600;
}
/* measured vs AI source tags on metric rows */
.src-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
border-radius: 5px;
font-size: 9px;
font-style: normal;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
vertical-align: middle;
}
.src-tag.measured {
background: color-mix(in srgb, var(--accent) 22%, transparent);
color: var(--accent);
}
.src-tag.ai {
background: color-mix(in srgb, var(--blue) 22%, transparent);
color: var(--blue);
}
.src-tag.blend {
background: color-mix(in srgb, var(--accent-2) 22%, transparent);
color: var(--accent-2);
}
/* Native Apple Vision readout in the inspector.
Scoped under .score-breakdown so this flex layout beats the more-specific
`.score-breakdown div` grid rule — otherwise the chips get crammed into the
metric-row grid columns and the last one ("Shoot percentile…") clips. */
.score-breakdown .inspector-vision {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
.score-breakdown .inspector-vision span {
font-size: 11px;
font-weight: 700;
color: var(--muted);
padding: 3px 8px;
border-radius: 7px;
background: var(--surface);
border: 1px solid var(--raised);
}
/* Face / eye close-up strip in the inspector */
.inspector-faces {
margin: 14px 0 4px;
}
.inspector-subtitle {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
margin-bottom: 8px;
}
.face-crop-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.face-crop {
margin: 0;
width: 92px;
cursor: zoom-in;
}
.face-crop-img {
width: 92px;
height: 92px;
border-radius: 8px;
background: var(--img-well) center / cover no-repeat;
border: 1px solid var(--line-2);
}
.face-crop:hover .face-crop-img {
border-color: var(--accent);
}
.face-crop figcaption {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 5px;
font-size: 11px;
font-weight: 700;
color: var(--text-2);
}
.face-crop figcaption .eyes {
font-style: normal;
font-size: 10px;
font-weight: 800;
}
.face-crop figcaption .eyes.strong {
color: var(--accent);
}
.face-crop figcaption .eyes.okay {
color: var(--blue);
}
.face-crop figcaption .eyes.weak {
color: var(--danger);
}
.face-crop figcaption .eyes.neutral {
color: var(--muted);
}
/* Scoring weights + calibration panel */
.checkbox-row {
display: flex;
align-items: center;
gap: 9px;
margin: 6px 0 6px;
font-size: 13px;
font-weight: 700;
color: var(--text-2);
cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
.weight-details {
margin-top: 10px;
border-top: 1px solid var(--line);
padding-top: 10px;
}
.weight-details summary {
cursor: pointer;
font-size: 12px;
font-weight: 800;
color: var(--accent);
list-style: none;
user-select: none;
}
.weight-details summary::-webkit-details-marker {
display: none;
}
.weight-details summary::before {
content: "▸ ";
}
.weight-details[open] summary::before {
content: "▾ ";
}
.weight-group {
margin-top: 12px;
}
.weight-group h4 {
margin: 0 0 8px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.weight-sliders {
display: grid;
gap: 8px;
}
.weight-row {
display: grid;
grid-template-columns: 88px 1fr 34px;
gap: 8px;
align-items: center;
}
.weight-row label {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--text-2);
}
.weight-row input[type="range"] {
width: 100%;
margin: 0;
}
.weight-row output {
font-size: 12px;
color: var(--accent-2);
font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: right;
}
.weight-details .tool-btn {
margin-top: 12px;
width: 100%;
}
.score-breakdown div span {
grid-area: label;
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 3px;
min-width: 0;
}
.score-breakdown div span .eye-inline {
margin-right: 4px;
}
/* Smart Collections */
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.panel-head label {
margin-bottom: 8px;
}
.panel-badge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 6px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.04em;
color: var(--on-accent);
background: var(--blue);
}
.collection-search {
display: flex;
flex-direction: column;
gap: 0;
}
.collections-panel .collection-run {
width: 100%;
height: 42px;
margin-bottom: 6px;
color: var(--on-accent);
background: var(--blue);
border: 1px solid var(--blue);
font-weight: 800;
}
.collections-panel .collection-run:hover {
filter: brightness(1.06);
}
.collections-panel .collection-run:disabled {
opacity: 0.55;
cursor: progress;
}
.collection-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.collection-chip {
max-width: 100%;
padding: 5px 10px;
border-radius: 14px;
background: var(--panel-2);
border: 1px solid var(--line-2);
color: var(--text-2);
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.collection-chip:hover {
border-color: var(--accent);
color: var(--text);
}
.collection-result {
margin-top: 14px;
padding: 12px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--line);
}
#collectionResultLabel {
display: block;
margin-bottom: 10px;
font-size: 12px;
font-weight: 700;
color: var(--accent);
overflow-wrap: anywhere;
}
.collection-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.collection-actions .tool-btn {
width: 100%;
height: 32px;
font-size: 12px;
}
.filter-tabs button[data-filter="collection"].active {
background: var(--accent-2);
}
.filter-tabs button[data-filter="slideshow"].active {
background: var(--blue);
color: var(--on-accent);
}
/* Saved collection name input + save */
.collection-save-row {
display: flex;
gap: 8px;
margin-top: 10px;
}
.collection-save-row input {
flex: 1 1 auto;
min-width: 0;
height: 32px;
margin-bottom: 0;
font-size: 12px;
}
.collection-save-row .tool-btn {
flex: 0 0 auto;
}
/* Saved collections list */
.saved-collections {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 14px;
max-height: 240px;
overflow-y: auto;
padding-right: 2px;
}
.saved-collections-title {
position: sticky;
top: 0;
z-index: 1;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
padding: 4px 0 6px;
background: var(--panel);
}
.saved-collection {
display: flex;
align-items: stretch;
gap: 6px;
}
.saved-collection-open {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 9px 11px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--raised);
color: var(--text);
text-align: left;
cursor: pointer;
overflow: hidden;
}
.saved-collection.active .saved-collection-open {
border-color: var(--accent);
box-shadow: inset 2px 0 0 var(--accent);
}
.saved-collection-open strong {
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.saved-collection-open span {
font-size: 11px;
color: var(--muted);
}
.saved-collection-open:hover {
border-color: var(--accent);
}
.saved-collection-del {
flex: 0 0 auto;
width: 34px;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--raised);
color: var(--muted);
font-weight: 800;
cursor: pointer;
}
.saved-collection-del:hover {
border-color: var(--danger);
color: var(--danger);
}
/* Custom slim scrollbars for inner scroll areas */
.saved-collections::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.inspector::-webkit-scrollbar,
.photo-grid::-webkit-scrollbar {
width: 10px;
}
.saved-collections::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.inspector::-webkit-scrollbar-thumb,
.photo-grid::-webkit-scrollbar-thumb {
background: var(--raised);
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
}
.saved-collections::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.inspector::-webkit-scrollbar-thumb:hover,
.photo-grid::-webkit-scrollbar-thumb:hover {
background: var(--line-2);
background-clip: content-box;
}
/* ===== Collections in the main workspace ===== */
.collections-header {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 24px 12px;
border-bottom: 1px solid var(--line);
}
.collections-search {
display: flex;
gap: 10px;
}
.collections-search input {
flex: 1 1 auto;
min-width: 0;
height: 42px;
margin: 0;
}
.collections-search .collection-run {
flex: 0 0 auto;
width: auto;
min-width: 150px;
height: 42px;
margin: 0;
padding: 0 18px;
color: var(--on-accent);
background: var(--blue);
border: 1px solid var(--blue);
font-weight: 800;
}
.collections-search .collection-run:hover {
filter: brightness(1.06);
}
.collections-search .collection-run:disabled {
opacity: 0.55;
cursor: progress;
}
.collections-header .collection-chips {
margin-top: 0;
}
/* Indeterminate loading bar while a collection search runs */
.collection-progress {
height: 4px;
border-radius: 3px;
background: var(--track);
overflow: hidden;
position: relative;
}
.collection-progress span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
border-radius: 3px;
background: linear-gradient(90deg, var(--blue), var(--accent));
animation: collection-indeterminate 1.1s ease-in-out infinite;
}
@keyframes collection-indeterminate {
0% { left: -40%; width: 40%; }
50% { left: 30%; width: 55%; }
100% { left: 100%; width: 40%; }
}
.collection-progress.determinate span {
animation: none;
left: 0;
transition: width 0.2s ease;
}
.collection-mode {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
}
.collection-mode input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
/* Breadcrumb shown when a collection folder is open */
.collection-crumb {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 12px 24px;
border-bottom: 1px solid var(--line);
}
.collection-crumb-title {
flex: 1 1 auto;
min-width: 0;
font-weight: 800;
font-size: 14px;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.collection-crumb-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
/* Stacked folder browser */
.collections-browser {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 18px 26px 28px;
}
.folder-grid {
--folder-thumb-h: clamp(118px, 8.5vw, 146px);
display: grid;
grid-auto-flow: column;
grid-auto-columns: clamp(218px, 18vw, 264px);
grid-template-rows: max-content;
align-items: start;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
padding: 0 2px 12px;
margin: 0 -2px;
}
.folder-grid::-webkit-scrollbar {
height: 7px;
}
.folder-grid::-webkit-scrollbar-track {
background: transparent;
}
.folder-grid::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 6px;
border: 1px solid transparent;
background-clip: content-box;
}
.folder-section:hover .folder-grid {
scrollbar-color: color-mix(in srgb, var(--line-2, var(--line)) 70%, transparent) transparent;
}
.folder-section:hover .folder-grid::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--line-2, var(--line)) 70%, transparent);
}
.folder-card {
position: relative;
display: flex;
align-self: start;
min-width: 0;
scroll-snap-align: start;
background: color-mix(in srgb, var(--panel) 92%, #fff 2%);
border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 24px -22px rgba(0, 0, 0, 0.75);
transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.folder-card.active {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.folder-card.live {
border-color: var(--accent-2);
}
.folder-card:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.9);
}
.folder-open,
.ai-open {
flex: 1;
display: flex;
flex-direction: column;
padding: 0;
background: transparent;
border: 0;
text-align: left;
color: var(--text);
cursor: pointer;
min-width: 0;
}
.folder-open:hover,
.ai-open:hover {
background: var(--panel);
}
.folder-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
height: var(--folder-thumb-h);
flex: 0 0 var(--folder-thumb-h);
gap: 2px;
background: var(--img-well);
}
/* Balanced layouts so thumbnails always fill the frame for any count. */
.folder-mosaic.m1 .folder-tile {
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.folder-mosaic.m2 {
grid-template-rows: 1fr;
}
.folder-mosaic.m3 .folder-tile:first-child {
grid-row: 1 / -1;
}
.folder-tile {
background: var(--surface);
min-height: 0;
min-width: 0;
overflow: hidden;
}
.folder-tile img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Autosave hint replacing the old manual Save button. */
.project-autosave-note {
margin: 9px 2px 0;
font-size: 11px;
color: var(--muted);
display: flex;
align-items: center;
gap: 6px;
}
.project-autosave-note::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex: 0 0 auto;
}
/* --- Visual project picker (sidebar "Saved projects") --- */
.project-picker { position: relative; }
/* Scoped under .project-picker so it overrides the global `.panel button`
rule (which forces height:36px — too short for the cover thumbnail and made
it spill past the chip's rounded border). */
.project-picker .project-picker-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: auto; /* grow to fit the thumbnail; beats .panel button */
margin: 0;
/* Equal inset on all sides so the cover thumbnail nests evenly inside the
rounded border instead of crowding the left edge. */
padding: 9px 11px;
border-radius: 12px;
border: 1px solid var(--line-2, var(--line));
background: var(--field);
color: var(--text);
cursor: pointer;
text-align: left;
font: inherit;
transition: border-color 0.12s, box-shadow 0.12s;
}
.project-picker .project-picker-btn:hover,
.project-picker .project-picker-btn.open {
border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2, var(--line)));
}
.project-picker-thumb {
flex: 0 0 auto;
/* Landscape box (photos are wide) so the cover has room to breathe instead of
cropping to a tight square. */
width: 56px;
height: 40px;
border-radius: 8px; /* inner radius nests inside the 12px chip corner */
overflow: hidden;
background: var(--img-well);
}
.project-picker-thumb.is-empty { background: var(--raised); }
.project-picker-thumb .project-thumb {
width: 100%;
height: 100%;
border-radius: 8px;
}
/* Single cover-image thumbnail (chip + cards). */
.project-thumb {
display: block;
overflow: hidden;
background: var(--img-well);
}
.project-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.project-thumb-empty {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
}
.project-picker-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1 1 auto;
}
.project-picker-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-picker-meta {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-picker-chevron {
flex: 0 0 auto;
color: var(--muted);
font-size: 13px;
transition: transform 0.15s ease;
}
.project-picker-btn.open .project-picker-chevron { transform: rotate(180deg); }
/* Dropdown panel with scrollable thumbnail cards. */
.project-picker-panel {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 40;
border-radius: 12px;
border: 1px solid var(--line-2, var(--line));
background: var(--surface, var(--field));
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.project-picker-list {
max-height: 366px;
overflow-y: auto;
padding: 6px;
display: flex;
flex-direction: column;
gap: 3px;
}
.project-picker-empty {
margin: 0;
padding: 16px;
text-align: center;
font-size: 12px;
color: var(--muted);
}
/* ===================== Next session (booking → project) ===================== */
/* A live button beside Saved projects, pre-labelled with the next booking, that
starts a new project straight from it — plus the Session card that rides along
while you work. Ties a booking → its gallery → its nurture journey together. */
.next-session { position: relative; margin-top: 10px; }
.next-session-btn {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
height: auto; /* grow to fit the avatar; beats .panel button */
margin: 0;
padding: 9px 11px;
border-radius: 12px;
border: 1px solid var(--line-2, var(--line));
background: var(--field);
color: var(--text);
cursor: pointer;
text-align: left;
font: inherit;
transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.next-session-btn:hover,
.next-session-btn.open { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2, var(--line))); }
/* A real upcoming booking gets a warm accent edge so it reads as "live". */
.next-session-btn.has-booking {
background: color-mix(in srgb, var(--accent) 8%, var(--field));
border-color: color-mix(in srgb, var(--accent) 34%, var(--line-2, var(--line)));
}
.next-session-btn .ns-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.next-session-btn .ns-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-session-btn .ns-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-badge {
flex: 0 0 auto;
min-width: 18px;
padding: 1px 5px;
border-radius: 9px;
background: color-mix(in srgb, var(--accent) 22%, transparent);
color: color-mix(in srgb, var(--accent) 82%, var(--text));
font-size: 11px;
font-weight: 700;
text-align: center;
}
.ns-chevron { flex: 0 0 auto; color: var(--muted); font-size: 13px; transition: transform 0.15s ease; }
.next-session-btn.open .ns-chevron { transform: rotate(180deg); }
/* The client avatar: a cropped face when we have one, else a coloured monogram. */
.session-avatar {
flex: 0 0 auto;
width: 34px; height: 34px;
border-radius: 50%;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--raised);
}
.session-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.session-avatar.is-initials {
background: hsl(var(--av-h, 210) 46% 44%);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
}
.session-avatar.is-empty {
background: transparent;
border: 1px dashed var(--line-2, var(--line));
color: var(--muted);
font-size: 17px;
font-weight: 400;
}
.session-avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.session-avatar.lg { width: 46px; height: 46px; font-size: 15px; }
/* Drop-down of every upcoming session (same footprint as the project picker). */
.next-session-panel {
position: absolute;
top: calc(100% + 6px);
left: 0; right: 0;
z-index: 40;
border-radius: 12px;
border: 1px solid var(--line-2, var(--line));
background: var(--surface, var(--field));
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
max-height: 60vh;
overflow-y: auto;
padding: 6px;
}
.ns-panel-head { padding: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ns-empty { margin: 0; padding: 14px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
.ns-row {
padding: 9px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--field);
display: flex;
flex-direction: column;
gap: 6px;
}
.ns-row + .ns-row { margin-top: 6px; }
.ns-row-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ns-row-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ns-row-info b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-row-info small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-email { font-size: 11.5px; color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-email:hover { text-decoration: underline; }
.ns-msg { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); font-style: italic; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ns-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ns-chip {
height: auto;
margin: 0;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid var(--line-2, var(--line));
background: transparent;
color: var(--muted);
font: inherit;
font-size: 11px;
cursor: default;
white-space: nowrap;
}
button.ns-chip { cursor: pointer; }
.ns-chip.is-on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-2, var(--line))); color: color-mix(in srgb, var(--accent) 85%, var(--text)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ns-chip.is-off { opacity: 0.72; }
.ns-start {
width: 100%;
height: auto;
margin: 2px 0 0;
padding: 8px 10px;
border-radius: 9px;
border: 1px solid transparent;
background: var(--accent);
color: #08110d;
font: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
.ns-start:hover { filter: brightness(1.06); }
/* Session card — the human panel that rides along while a booking-linked project
is open. Connects this shoot to the client's gallery + nurture journey. */
.session-card {
margin: 12px 0 0;
padding: 12px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line-2, var(--line)));
background: color-mix(in srgb, var(--accent) 7%, var(--panel));
display: flex;
flex-direction: column;
gap: 7px;
}
.session-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.session-head { display: flex; align-items: center; gap: 10px; }
.session-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.session-who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-who small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-unlink {
flex: 0 0 auto;
width: 22px; height: 22px;
margin: 0; padding: 0;
border: none;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.session-unlink:hover { background: var(--raised); color: var(--text); }
.session-email { font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-email:hover { text-decoration: underline; }
.session-msg { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); font-style: italic; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.session-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1px; }
.session-link {
height: auto;
margin: 0;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid var(--line-2, var(--line));
background: var(--field);
color: var(--text);
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
button.session-link:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2, var(--line))); }
.session-link.is-off { color: var(--muted); background: transparent; cursor: default; opacity: 0.8; }
/* Scoped under .project-picker so these beat the global `.panel button` rule
(height:36px / margin / fill / 800 weight) — otherwise each card is squeezed
to 36px and the 48px thumbnail overflows into the neighbouring rows. */
.project-picker .project-card {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: auto; /* grow to fit the thumbnail; beats .panel button's 36px */
margin-bottom: 0; /* row spacing comes from the list's flex gap */
padding: 6px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--text);
cursor: pointer;
text-align: left;
font: inherit;
transition: background 0.1s, border-color 0.1s;
}
.project-picker .project-card:hover { background: var(--field); border-color: transparent; }
.project-picker .project-card.active {
border-color: var(--accent);
background: var(--field);
}
.project-card .project-thumb {
flex: 0 0 auto;
width: 64px;
height: 48px;
border-radius: 8px;
}
.project-card-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.project-card-name {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-card-meta {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Action history log (collapsible left-sidebar card) --- */
.history-panel {
margin-bottom: 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);
overflow: hidden;
}
/* Collapsed, it's just a compact "History" row with a count + chevron. */
.history-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 9px 11px;
cursor: pointer;
list-style: none;
user-select: none;
}
.history-summary::-webkit-details-marker { display: none; }
.history-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.history-summary-right {
display: flex;
align-items: center;
gap: 7px;
}
.history-count {
font-size: 10px;
font-weight: 700;
color: var(--text-2, var(--muted));
background: var(--field);
border-radius: 10px;
padding: 1px 7px;
min-width: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.history-count:empty { display: none; }
.history-chevron {
font-size: 11px;
color: var(--muted);
transition: transform 0.15s ease;
}
.history-panel[open] .history-chevron { transform: rotate(180deg); }
.history-body {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 11px 11px;
}
.history-actions {
display: flex;
gap: 6px;
}
#historyUndoBtn,
#historyRedoBtn {
width: auto;
height: 26px;
padding: 0 9px;
margin: 0;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
}
#historyUndoBtn:disabled,
#historyRedoBtn:disabled {
opacity: 0.35;
cursor: default;
}
#historyUndoBtn .btn-ic,
#historyRedoBtn .btn-ic {
width: 13px;
height: 13px;
}
.history-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
max-height: 200px;
overflow-y: auto;
}
.history-item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
border-radius: 7px;
cursor: pointer;
font-size: 12px;
color: var(--text);
transition: background 0.1s;
}
.history-item:hover { background: var(--field); }
.history-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--line-2, var(--line));
flex: 0 0 auto;
}
.history-item.latest .history-dot { background: var(--accent); }
/* Redoable (undone) steps: dimmed, hollow dot — they sit above the present and
step forward when clicked. */
.history-item.undone { opacity: 0.5; }
.history-item.undone .history-dot {
background: transparent;
box-shadow: inset 0 0 0 1px var(--line-2, var(--line));
}
.history-item.undone .history-label { font-style: italic; }
.history-label {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.history-when {
flex: 0 0 auto;
font-size: 10px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.history-empty {
margin: 0;
font-size: 11px;
line-height: 1.4;
color: var(--muted);
}
.folder-info {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 56px;
padding: 11px 13px 12px;
justify-content: center;
}
.folder-info strong {
font-size: 13.5px;
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.folder-count {
font-size: 11.5px;
line-height: 1.2;
color: var(--muted);
}
.folder-card.live .folder-count {
color: var(--accent-2);
font-weight: 700;
}
.folder-del {
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
border-radius: 7px;
background: rgba(10, 13, 16, 0.82);
border: 1px solid var(--line-2);
color: var(--text-2);
font-weight: 800;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease;
}
.folder-card:hover .folder-del {
opacity: 1;
}
.folder-del:hover {
border-color: var(--danger);
color: var(--danger);
}
.folder-slideshow {
position: absolute;
right: 44px;
top: 8px;
height: 28px;
padding: 0 10px;
border-radius: 7px;
background: rgba(10, 13, 16, 0.82);
border: 1px solid var(--line-2);
color: var(--text-2);
font-size: 12px;
font-weight: 800;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease;
}
.folder-card:hover .folder-slideshow {
opacity: 1;
}
.folder-slideshow:hover {
border-color: var(--blue);
color: var(--blue);
}
/* ===== Slideshow creator ===== */
.slideshow-view {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
overflow: hidden;
}
.slideshow-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 16px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
}
.slideshow-head h3 {
font-size: 20px;
}
.slideshow-source {
margin-bottom: 4px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.slideshow-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.slideshow-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 14px;
min-height: 0;
flex: 1;
}
.app-shell.slideshow-mode .slideshow-layout {
grid-template-columns: minmax(0, 1fr);
}
.slideshow-main,
.slideshow-panel {
min-height: 0;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 8px;
}
.slideshow-main {
display: flex;
flex-direction: column;
overflow: hidden;
}
.slideshow-stage {
position: relative;
flex: 1;
min-height: 320px;
background: var(--img-well);
overflow: hidden;
}
.slideshow-stage img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform-origin: center;
}
.slideshow-stage img.fit {
object-fit: contain;
}
.slideshow-stage[data-style="cinematic"] img {
animation: slideshowDrift var(--slide-duration, 5s) ease-in-out both;
}
.slideshow-stage[data-style="editorial"] img {
animation: slideshowEditorial var(--slide-duration, 4s) ease both;
}
.slideshow-stage[data-style="dynamic"] img {
animation: slideshowPunch var(--slide-duration, 3s) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.slideshow-stage[data-motion="1"] img {
transform-origin: 36% 48%;
}
.slideshow-stage[data-motion="2"] img {
transform-origin: 66% 44%;
}
.slideshow-stage[data-motion="3"] img {
transform-origin: 50% 62%;
}
@keyframes slideshowDrift {
from { transform: scale(1.035) translate3d(-1.4%, 0, 0); }
to { transform: scale(1.11) translate3d(1.4%, -0.8%, 0); }
}
@keyframes slideshowEditorial {
from { transform: scale(1.02); filter: contrast(1.02); }
45% { transform: scale(1.045); filter: contrast(1.06); }
to { transform: scale(1.065); filter: contrast(1.03); }
}
@keyframes slideshowPunch {
from { transform: scale(1.01); }
12% { transform: scale(1.085); }
to { transform: scale(1.13); }
}
@keyframes slideshowTextFade {
from { opacity: 0; transform: var(--caption-transform) scale(0.99); }
to { opacity: 1; transform: var(--caption-transform) scale(1); }
}
@keyframes slideshowTextRise {
from { opacity: 0; transform: var(--caption-transform) translateY(14px); }
to { opacity: 1; transform: var(--caption-transform) translateY(0); }
}
@keyframes slideshowTextPop {
from { opacity: 0; transform: var(--caption-transform) scale(0.92); }
to { opacity: 1; transform: var(--caption-transform) scale(1); }
}
.slideshow-caption {
position: absolute;
left: 50%;
bottom: 38px;
max-width: min(820px, calc(100% - 72px));
--caption-transform: translateX(-50%);
transform: var(--caption-transform);
padding: 12px 18px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.56);
color: white;
font-size: 24px;
font-weight: 800;
line-height: 1.25;
text-align: center;
overflow-wrap: anywhere;
text-wrap: balance;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
pointer-events: none;
}
.slideshow-caption[data-text-position="top"] {
top: 34px;
bottom: auto;
}
.slideshow-caption[data-text-position="center"] {
top: 50%;
bottom: auto;
--caption-transform: translate(-50%, -50%);
}
.slideshow-caption[data-text-position="lower-left"] {
left: 34px;
right: auto;
bottom: 34px;
--caption-transform: none;
text-align: left;
}
.slideshow-caption[data-text-position="lower-right"] {
left: auto;
right: 34px;
bottom: 34px;
--caption-transform: none;
text-align: right;
}
.slideshow-caption[data-text-style="pill"] {
border-radius: 999px;
padding: 13px 22px;
font-size: clamp(17px, 2vw, 28px);
}
.slideshow-caption[data-text-style="lower-third"] {
border-left: 5px solid currentColor;
border-radius: 6px;
padding: 14px 22px;
max-width: min(640px, calc(100% - 68px));
font-size: clamp(17px, 1.9vw, 26px);
letter-spacing: 0;
}
.slideshow-caption[data-text-style="title"] {
max-width: min(920px, calc(100% - 70px));
padding: 16px 24px;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.22);
font-size: clamp(30px, 5vw, 72px);
line-height: 1.04;
font-weight: 900;
}
.slideshow-caption[data-text-style="quote"] {
max-width: min(760px, calc(100% - 76px));
padding: 18px 24px;
background: rgba(250, 248, 242, 0.9);
color: var(--on-warm);
font-size: clamp(21px, 3vw, 42px);
font-weight: 750;
font-style: italic;
text-shadow: none;
}
.slideshow-caption[data-text-style="minimal"] {
background: transparent;
box-shadow: none;
padding: 0;
font-size: clamp(16px, 1.8vw, 24px);
}
.slideshow-caption[data-text-palette="cream"] {
color: #fff3d6;
background: rgba(27, 22, 14, 0.5);
}
.slideshow-caption[data-text-palette="black"] {
color: #121212;
background: rgba(255, 255, 255, 0.72);
text-shadow: none;
}
.slideshow-caption[data-text-palette="gold"] {
color: #ffd66b;
background: rgba(15, 12, 6, 0.54);
}
.slideshow-caption[data-text-palette="rose"] {
color: #ffd1dc;
background: rgba(28, 10, 18, 0.54);
}
.slideshow-caption[data-text-palette="sky"] {
color: #cde9ff;
background: rgba(5, 20, 32, 0.56);
}
.slideshow-caption[data-text-style="minimal"][data-text-palette],
.slideshow-caption[data-text-style="title"][data-text-palette] {
background: transparent;
}
.slideshow-caption[data-text-style="quote"][data-text-palette="cream"],
.slideshow-caption[data-text-style="quote"][data-text-palette="gold"],
.slideshow-caption[data-text-style="quote"][data-text-palette="rose"],
.slideshow-caption[data-text-style="quote"][data-text-palette="sky"] {
color: var(--on-warm);
background: rgba(250, 248, 242, 0.9);
}
.slideshow-caption[data-text-animation="fade"] {
animation: slideshowTextFade 420ms ease both;
}
.slideshow-caption[data-text-animation="rise"] {
animation: slideshowTextRise 520ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}
.slideshow-caption[data-text-animation="pop"] {
animation: slideshowTextPop 420ms cubic-bezier(0.18, 0.85, 0.24, 1.2) both;
}
.slideshow-empty {
position: absolute;
inset: 0;
display: grid;
place-content: center;
gap: 8px;
padding: 28px;
text-align: center;
}
.slideshow-empty h3 {
font-size: 28px;
}
.slideshow-empty p {
color: var(--muted);
}
.slideshow-player {
display: grid;
grid-template-columns: 80px minmax(0, 1fr) 110px;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-top: 1px solid var(--line);
}
.slideshow-player input {
width: 100%;
}
.slideshow-player span {
color: var(--muted);
font-size: 12px;
font-variant-numeric: tabular-nums;
text-align: right;
}
.slideshow-timeline {
display: flex;
gap: 10px;
min-height: 128px;
padding: 12px 14px;
overflow-x: auto;
border-top: 1px solid var(--line);
}
.slideshow-thumb {
flex: 0 0 124px;
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
border: 1px solid var(--raised);
border-radius: 8px;
background: var(--surface);
color: var(--text);
text-align: left;
cursor: pointer;
}
.slideshow-thumb.active {
border-color: var(--blue);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 25%, transparent);
}
.slideshow-thumb.disabled {
opacity: 0.45;
}
.slideshow-thumb-img {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
background: var(--img-well) center / cover no-repeat;
}
.slideshow-focus-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
}
.slideshow-focus-star {
min-width: 0;
height: 22px;
padding: 0;
border: 1px solid var(--line-2);
border-radius: 6px;
background: var(--img-well);
color: var(--muted);
font-size: 10px;
font-weight: 900;
cursor: pointer;
}
.slideshow-focus-star:hover,
.slideshow-focus-star.active {
border-color: #ffd66b;
background: #ffd66b;
color: var(--on-warm);
}
.slideshow-subject-badge {
top: 5px;
right: 5px;
padding: 3px 5px;
font-size: 9px;
border-radius: 6px;
}
.slideshow-thumb span:last-child {
overflow: hidden;
color: var(--muted);
font-size: 11px;
white-space: nowrap;
text-overflow: ellipsis;
}
.slideshow-thumb em {
color: var(--blue);
font-size: 10px;
font-style: normal;
font-weight: 800;
}
.slideshow-panel {
overflow-y: auto;
padding: 16px;
}
.app-shell.slideshow-mode .slideshow-panel {
min-height: auto;
overflow: visible;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.app-shell.slideshow-mode .slideshow-head {
align-items: center;
}
.app-shell.slideshow-mode .slideshow-stage {
min-height: 430px;
}
.slideshow-view.drop-target .slideshow-main,
.slideshow-stage.drop-target,
.slideshow-timeline.drop-target {
border-color: var(--accent);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.slideshow-grid-controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.slideshow-folder-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 64px;
gap: 8px;
align-items: center;
}
.slideshow-folder-row input {
margin-bottom: 0;
}
.slideshow-export-progress {
display: grid;
gap: 7px;
margin: 14px 0;
padding: 12px;
border: 1px solid var(--raised);
border-radius: 8px;
background: var(--surface);
}
.slideshow-export-bar {
height: 9px;
overflow: hidden;
border-radius: 999px;
background: var(--img-well);
}
.slideshow-export-bar span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent), var(--blue));
transition: width 0.18s ease;
}
.slideshow-export-progress strong {
font-size: 12px;
color: var(--text);
}
.slideshow-export-progress > span {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
}
.slideshow-music-player {
display: grid;
grid-template-columns: 78px minmax(0, 1fr) 92px;
align-items: center;
gap: 8px;
margin: 10px 0 14px;
padding: 10px;
border: 1px solid var(--raised);
border-radius: 8px;
background: var(--surface);
}
.slideshow-music-player .tool-btn {
height: 34px;
padding: 0 10px;
}
.slideshow-music-player input {
width: 100%;
margin-bottom: 0;
}
.slideshow-music-player span {
color: var(--muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.slideshow-music-lab {
display: grid;
gap: 9px;
margin: 10px 0 14px;
padding: 12px;
border: 1px solid var(--raised);
border-radius: 8px;
background: var(--surface);
}
.slideshow-lab-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 116px;
gap: 8px;
align-items: center;
}
.slideshow-lab-head strong {
font-size: 12px;
}
.slideshow-lab-head select,
.slideshow-music-lab textarea,
.slideshow-music-lab input {
margin-bottom: 0;
}
.slideshow-music-chat {
display: grid;
gap: 6px;
max-height: 260px;
overflow-y: auto;
padding: 8px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--img-well);
}
.slideshow-music-empty,
.slideshow-music-msg {
color: var(--muted);
font-size: 12px;
line-height: 1.35;
white-space: pre-wrap;
}
.slideshow-music-msg {
padding: 7px 8px;
border-radius: 8px;
background: var(--surface-2);
}
.slideshow-music-msg.user {
color: var(--text);
background: var(--panel-2);
}
.slideshow-music-msg.assistant {
border-left: 3px solid var(--accent);
}
.slideshow-music-note {
margin-bottom: 8px;
color: var(--muted);
}
.slideshow-prompt-card,
.slideshow-music-asset {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--stage);
}
.slideshow-prompt-card-head,
.slideshow-library-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.slideshow-prompt-card-head strong,
.slideshow-library-head strong {
color: var(--text);
font-size: 12px;
}
.slideshow-prompt-card-head span {
color: var(--muted);
font-size: 11px;
white-space: nowrap;
}
.slideshow-prompt-caption {
color: var(--text);
font-size: 12px;
line-height: 1.4;
}
.slideshow-prompt-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.slideshow-prompt-tags span {
padding: 3px 6px;
border: 1px solid var(--line);
border-radius: 999px;
color: #bcd6ea;
background: var(--stage);
font-size: 10px;
}
.slideshow-prompt-lyrics {
max-height: 92px;
overflow: auto;
margin: 0;
padding: 8px;
border: 1px solid var(--raised);
border-radius: 6px;
color: var(--muted);
background: var(--img-well);
font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
white-space: pre-wrap;
}
.slideshow-prompt-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.slideshow-music-library {
display: grid;
gap: 7px;
max-height: 238px;
overflow-y: auto;
padding: 8px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--img-well);
}
.slideshow-music-asset {
grid-template-columns: 48px minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px;
padding: 8px;
}
.slideshow-music-asset.chat-preview {
grid-template-columns: 48px minmax(0, 1fr) auto;
}
.slideshow-asset-play {
height: 32px;
border: 1px solid var(--line);
border-radius: 7px;
color: var(--text);
background: var(--surface-2);
cursor: pointer;
}
.slideshow-asset-info {
min-width: 0;
display: grid;
gap: 3px;
}
.slideshow-asset-info strong,
.slideshow-asset-info span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.slideshow-asset-info strong {
color: var(--text);
font-size: 12px;
}
.slideshow-asset-info span {
color: var(--muted);
font-size: 11px;
}
.tool-btn.danger {
border-color: #5a2d34;
color: #ffb3bd;
}
.slideshow-value-row {
display: flex;
justify-content: space-between;
margin: 6px 0 14px;
color: var(--muted);
font-size: 12px;
}
.slideshow-value-row strong {
color: var(--text);
font-variant-numeric: tabular-nums;
}
.slideshow-panel hr {
border: 0;
border-top: 1px solid var(--line);
margin: 14px 0;
}
.slideshow-slide-controls {
display: flex;
flex-direction: column;
gap: 8px;
}
.slideshow-text-presets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.slideshow-text-presets .tool-btn {
min-width: 0;
padding-inline: 8px;
font-size: 11px;
}
.slideshow-control-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.slideshow-control-grid label {
display: block;
margin-bottom: 4px;
}
.slideshow-control-grid select {
width: 100%;
}
.collections-empty {
display: grid;
place-items: center;
align-content: center;
gap: 8px;
height: 100%;
min-height: 200px;
text-align: center;
color: var(--muted);
}
.collections-empty h3 {
font-size: 20px;
color: var(--text);
}
.collections-empty p {
max-width: 440px;
line-height: 1.5;
}
.collections-browser::-webkit-scrollbar {
width: 10px;
}
.collections-browser::-webkit-scrollbar-thumb {
background: var(--raised);
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
}
/* Native cleanup (IOPaint) modal */
.cleanup-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
flex-direction: column;
background: rgba(6, 10, 14, 0.94);
backdrop-filter: blur(4px);
}
.cleanup-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
border-bottom: 1px solid var(--line);
}
.cleanup-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.cleanup-controls {
display: flex;
align-items: center;
gap: 10px;
}
.cleanup-brush {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
.cleanup-brush input[type="range"] {
accent-color: var(--accent);
}
.cleanup-controls .tool-btn {
min-height: 32px;
padding: 0 12px;
}
.cleanup-stage {
flex: 1;
display: grid;
place-items: center;
overflow: auto;
padding: 18px;
}
.cleanup-canvas-wrap {
position: relative;
line-height: 0;
max-width: 100%;
max-height: 100%;
}
.cleanup-canvas-wrap img {
display: block;
max-width: 100%;
max-height: calc(100vh - 160px);
width: auto;
height: auto;
user-select: none;
-webkit-user-drag: none;
}
#cleanupCanvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: crosshair;
touch-action: none;
}
.cleanup-message {
min-height: 18px;
margin: 0;
padding: 0 18px 14px;
text-align: center;
font-size: 12px;
color: var(--muted);
}
/* Develop / RAW editing mode */
.editor-view {
position: absolute;
inset: 0;
z-index: 30;
display: flex;
flex-direction: column;
background: var(--img-well);
}
.editor-canvas-wrap {
flex: 1;
display: grid;
place-items: center;
overflow: hidden;
padding: 18px;
min-height: 0;
}
#editorImage {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
/* Develop stage: zoomable before/after compare */
.editor-stage {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
touch-action: none;
}
.editor-compare {
position: absolute;
inset: 0;
}
.editor-img {
position: absolute;
top: 0;
left: 0;
width: var(--ew, 100%);
height: var(--eh, 100%);
object-fit: contain;
transform-origin: 0 0;
transform: translate(var(--ex, 0px), var(--ey, 0px)) scale(var(--es, 1));
pointer-events: none;
user-select: none;
}
.editor-after-clip {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: var(--divider, 50%);
overflow: hidden;
}
.editor-divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--divider, 50%);
width: 2px;
background: rgba(255, 255, 255, 0.9);
transform: translateX(-1px);
cursor: ew-resize;
z-index: 3;
}
.editor-handle {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 2px solid var(--accent);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.editor-stage.zoomed { cursor: grab; }
.editor-stage.panning { cursor: grabbing; }
.editor-tag {
position: absolute;
top: 10px;
padding: 2px 9px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 6px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
z-index: 3;
pointer-events: none;
}
.editor-tag-after { left: 10px; }
.editor-tag-before { right: 10px; }
.editor-zoom-hint {
font-size: 11px;
color: var(--muted);
}
.editor-magnifier {
position: fixed;
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
background-color: #000;
background-repeat: no-repeat;
pointer-events: none;
z-index: 40;
}
/* Non-blocking render indicator: a small spinner shown in the corner of the
stage while a photo's preview is still rendering. Never intercepts pointer
events, so panning/zooming/comparing stay fully interactive. */
.editor-busy {
position: absolute;
top: 14px;
right: 14px;
z-index: 42;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 8px 14px 8px 11px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 140ms ease;
max-width: 62%;
}
/* Collapse to a compact circle when there is no stage label to show. */
.editor-busy:not(:has(.editor-busy-stage:not(:empty))) {
gap: 0;
padding: 7px;
border-radius: 50%;
}
.editor-busy-stage {
color: #fff;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.editor-busy-stage:empty { display: none; }
.editor-busy:not([hidden]) {
opacity: 1;
}
.editor-busy-spinner {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2.5px solid rgba(255, 255, 255, 0.25);
border-top-color: var(--accent, #fff);
animation: editor-busy-spin 0.7s linear infinite;
}
@keyframes editor-busy-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.editor-busy-spinner { animation-duration: 1.6s; }
}
.tool-btn.active {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
/* Crop overlay */
.editor-crop {
position: absolute;
inset: 0;
z-index: 5;
}
/* Live control-point fine-tune warp overlay (canvas + draggable handles). */
.warp-canvas {
position: absolute;
z-index: 7;
pointer-events: none;
}
.editor-warp {
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
}
.warp-handle {
position: absolute;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: rgba(90, 200, 255, 0.55);
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
cursor: grab;
pointer-events: auto;
touch-action: none;
transition: transform 90ms ease, background 90ms ease;
}
.warp-handle:hover { transform: scale(1.25); background: rgba(90, 200, 255, 0.85); }
.warp-handle.dragging { cursor: grabbing; transform: scale(1.25); background: var(--accent, #5ac8ff); }
.warp-handle.region-mouth { background: rgba(255, 150, 90, 0.55); }
.warp-handle.region-mouth:hover { background: rgba(255, 150, 90, 0.85); }
.face-box {
position: absolute;
border: 2px solid rgba(255, 80, 80, 0.9);
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
}
.face-box::after {
content: "off";
position: absolute;
top: -16px;
left: 0;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
color: rgba(255, 120, 120, 0.95);
}
.face-box.sel {
border-color: var(--accent);
background: rgba(46, 204, 150, 0.12);
}
.face-box.sel::after {
content: "enhance";
color: var(--accent);
}
.face-box.guide {
border-color: rgba(46, 204, 150, 0.7);
border-style: dashed;
pointer-events: none;
}
.face-box.guide::after { content: ""; }
.editor-remove-canvas {
position: absolute;
z-index: 8;
cursor: none;
touch-action: none;
}
.mask-overlay-canvas {
position: absolute;
z-index: 7;
cursor: crosshair;
touch-action: none;
/* The zoom/pan transform is set inline by JS (updateMaskOverlayTransform) so
the mask tint, handles, and brush coordinates stay attached to the image. */
transform-origin: 0 0;
}
/* Live brush-size preview ring for the mask brush — follows the cursor and is
sized to the on-screen brush diameter (set in JS). */
.mask-brush-cursor {
position: absolute;
z-index: 10;
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
background: rgba(255, 60, 60, 0.18);
}
.mask-brush-cursor.erasing {
background: rgba(120, 180, 255, 0.18);
}
.sky-mask-canvas {
position: absolute;
z-index: 9;
cursor: none;
touch-action: none;
transform-origin: 0 0;
}
.sky-mask-cursor {
position: absolute;
z-index: 10;
border: 1.5px solid rgba(255, 255, 255, 0.94);
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.58);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
background: rgba(70, 220, 255, 0.2);
}
.sky-mask-cursor.protect {
background: rgba(255, 72, 155, 0.22);
}
.sky-mask-cursor.erase {
background: rgba(255, 255, 255, 0.12);
border-style: dashed;
}
.editor-remove-cursor {
position: absolute;
z-index: 10;
border: 1.5px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
background: rgba(255, 60, 60, 0.18);
}
/* ⌥ held in Heal/Clone: the brush ring becomes a source-picker crosshair styled
like the green source pin, so "you're picking a source now" reads at the cursor. */
.editor-remove-cursor.picker {
border: 2px solid #2bd49a;
background: rgba(43, 212, 154, 0.15);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.editor-remove-cursor.picker::before,
.editor-remove-cursor.picker::after {
content: "";
position: absolute;
background: #2bd49a;
}
.editor-remove-cursor.picker::before { left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -0.5px; }
.editor-remove-cursor.picker::after { top: 50%; left: 3px; right: 3px; height: 1px; margin-top: -0.5px; }
.editor-remove-tools {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9;
display: flex;
align-items: center;
gap: 10px;
background: rgba(20, 26, 32, 0.92);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px;
backdrop-filter: blur(6px);
}
.editor-remove-title {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
/* AI Generate prompt: type what to add in the painted area; blank = erase. */
.editor-remove-prompt {
flex: 1 1 240px;
min-width: 190px;
font-size: 12px;
color: #e8edf2;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 9px;
outline: none;
}
.editor-remove-prompt:focus {
border-color: #6aa3ff;
background: rgba(255, 255, 255, 0.09);
}
.editor-remove-prompt::placeholder {
color: var(--muted);
}
/* Text-to-select control (third selection method) inside the Add/Remove toolbar.
Compact so it sits beside Smart select without crowding out the add prompt. */
.editor-remove-textsel {
display: flex;
align-items: center;
gap: 6px;
}
.editor-remove-textsel-input {
flex: 0 1 170px;
min-width: 120px;
}
/* AI Extend (outpaint) panel */
.develop-extend-dirs {
flex-wrap: wrap;
gap: 6px;
}
.extend-dir.active {
border-color: #6aa3ff;
background: rgba(106, 163, 255, 0.18);
color: #cfe0ff;
}
.develop-extend-prompt {
width: 100%;
margin: 6px 0;
}
.develop-extend-fast {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
cursor: pointer;
}
.develop-extend-fast-text {
display: flex;
flex-direction: column;
line-height: 1.25;
font-size: 12px;
}
.develop-extend-fast-text small {
color: var(--muted, #8a8a99);
font-size: 11px;
}
.editor-remove-brush-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
.editor-remove-brush-label input[type="range"] {
width: 80px;
}
.editor-remove-val {
min-width: 24px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.editor-remove-layer {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9;
display: flex;
align-items: center;
gap: 12px;
background: rgba(20, 26, 32, 0.92);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px;
backdrop-filter: blur(6px);
}
.editor-remove-choices {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9;
display: grid;
gap: 8px;
background: rgba(20, 26, 32, 0.94);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
backdrop-filter: blur(6px);
max-width: 90%;
}
.editor-remove-choices-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.editor-remove-choices-grid {
display: flex;
gap: 8px;
}
/* AI Remove layers panel */
.remove-layers {
margin-top: 10px;
}
.remove-layers-list {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.remove-layer-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 7px;
border: 1px solid var(--line);
background: var(--surface);
cursor: pointer;
font-size: 12px;
color: var(--text);
}
.remove-layer-item.selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent) inset;
}
.remove-layer-item.is-off { opacity: 0.55; }
.remove-layer-item .layer-eye {
border: none;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 0 1px;
}
.remove-layer-item .layer-eye:hover { color: var(--text); }
.remove-layer-item .layer-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.remove-layer-item .layer-edit-mask,
.remove-layer-item .layer-delete {
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
}
.remove-layer-item .layer-edit-mask {
border: 1px solid var(--line);
border-radius: 5px;
padding: 3px 7px;
font-size: 11px;
white-space: nowrap;
}
.remove-layer-item .layer-edit-mask:hover {
border-color: var(--accent);
color: var(--accent);
}
.remove-layer-item .layer-delete {
font-size: 15px;
line-height: 1;
padding: 0 2px;
}
.remove-layer-item .layer-delete:hover {
color: var(--danger);
}
.layer-controls {
margin-top: 8px;
}
.layer-mask-actions {
margin-top: 8px;
}
/* Selected-layer bounding box (drag to move) */
.editor-layer-move {
position: absolute;
border: 1.5px dashed var(--accent);
border-radius: 3px;
cursor: move;
z-index: 6;
touch-action: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.editor-remove-error {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 320px;
padding: 4px 2px;
}
.editor-remove-error-msg {
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--danger);
overflow-wrap: anywhere;
}
.editor-remove-error .tool-btn {
align-self: flex-start;
}
.editor-remove-choice {
position: relative;
width: 96px;
height: 72px;
border-radius: 6px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
background: #000;
padding: 0;
}
.editor-remove-choice img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.editor-remove-choice.selected {
border-color: var(--accent);
}
.editor-remove-choice.pending {
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--muted);
}
.editor-remove-choice .editor-remove-choice-num {
position: absolute;
top: 3px;
left: 5px;
font-size: 11px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.crop-rect {
position: absolute;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
cursor: move;
touch-action: none;
}
.crop-rect::before,
.crop-rect::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.35);
pointer-events: none;
}
.crop-rect::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,0.35); border-right: 1px solid rgba(255,255,255,0.35); background: none; }
.crop-rect::after { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,0.35); border-bottom: 1px solid rgba(255,255,255,0.35); background: none; }
.crop-h {
position: absolute;
width: 14px;
height: 14px;
background: #fff;
border: 1px solid var(--accent);
border-radius: 2px;
touch-action: none;
z-index: 2; /* above the extend band's stripes */
}
.crop-h.tl { left: -7px; top: -7px; cursor: nwse-resize; }
.crop-h.tr { right: -7px; top: -7px; cursor: nesw-resize; }
.crop-h.bl { left: -7px; bottom: -7px; cursor: nesw-resize; }
.crop-h.br { right: -7px; bottom: -7px; cursor: nwse-resize; }
/* Edge handles: drag inward to crop a single side, or PAST the photo edge to
mark an AI Extend band on that side. */
.crop-e {
position: absolute;
background: #fff;
border: 1px solid var(--accent);
border-radius: 3px;
touch-action: none;
z-index: 2; /* above the extend band's stripes */
}
.crop-e.t { left: 50%; top: -5px; width: 26px; height: 8px; margin-left: -13px; cursor: ns-resize; }
.crop-e.b { left: 50%; bottom: -5px; width: 26px; height: 8px; margin-left: -13px; cursor: ns-resize; }
.crop-e.l { top: 50%; left: -5px; width: 8px; height: 26px; margin-top: -13px; cursor: ew-resize; }
.crop-e.r { top: 50%; right: -5px; width: 8px; height: 26px; margin-top: -13px; cursor: ew-resize; }
/* AI Extend band: the part of the crop box outside the photo — the area the AI
will generate. Dashed accent outline + faint stripes so it reads as "not yet
real pixels". */
.crop-extend-band {
position: absolute;
box-sizing: border-box;
border: 1.5px dashed var(--accent);
background: repeating-linear-gradient(
-45deg,
color-mix(in srgb, var(--accent) 16%, transparent) 0 8px,
color-mix(in srgb, var(--accent) 6%, transparent) 8px 16px
);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 1;
}
.crop-extend-band-label {
font-size: 11px;
font-weight: 600;
color: #fff;
background: rgba(20, 26, 32, 0.8);
border-radius: 6px;
padding: 3px 8px;
white-space: nowrap;
}
/* While the AI paints the band, it becomes a prism shimmer — spectral colours
flowing continuously across the area being generated (on brand: the
LightVision prism). Two crossing gradient layers + a slow hue-cycle give it a
fluid, liquid-light feel; the ::after is a soft travelling glint; the
JS-spawned .prism-spark stars twinkle on top. */
.crop-extend-band.generating {
overflow: hidden;
border-style: solid;
border-color: rgba(255, 255, 255, 0.72);
background:
linear-gradient(115deg,
rgba(255, 99, 132, 0.5),
rgba(255, 177, 90, 0.5),
rgba(250, 233, 110, 0.5),
rgba(126, 217, 156, 0.5),
rgba(110, 168, 254, 0.5),
rgba(178, 122, 255, 0.5),
rgba(255, 99, 132, 0.5)),
linear-gradient(245deg,
rgba(178, 122, 255, 0.32),
rgba(110, 168, 254, 0.32),
rgba(126, 217, 156, 0.32),
rgba(255, 177, 90, 0.32),
rgba(178, 122, 255, 0.32));
background-size: 220% 220%, 260% 260%;
box-shadow: 0 0 18px rgba(180, 140, 255, 0.35), inset 0 0 26px rgba(255, 255, 255, 0.16);
animation: prismSweep 5.2s linear infinite, prismHue 8s linear infinite;
}
.crop-extend-band.generating::after {
content: "";
position: absolute;
inset: -25%;
background: linear-gradient(115deg,
transparent 38%,
rgba(255, 255, 255, 0.5) 50%,
transparent 62%);
background-size: 260% 260%;
mix-blend-mode: screen;
animation: prismGlint 3.6s ease-in-out infinite;
}
/* Continuous one-directional flow: the two layers drift in opposite directions
so colours seem to fold through each other like light through glass. The end
colour of each gradient equals its start, so the loop is seamless. */
@keyframes prismSweep {
0% { background-position: 0% 50%, 100% 50%; }
100% { background-position: 220% 50%, -160% 50%; }
}
@keyframes prismHue {
0% { filter: hue-rotate(0deg) saturate(1.05); }
100% { filter: hue-rotate(360deg) saturate(1.05); }
}
@keyframes prismGlint {
0% { background-position: 130% 50%; opacity: 0.55; }
50% { opacity: 0.9; }
100% { background-position: -30% 50%; opacity: 0.55; }
}
/* Twinkling sparkle field — small 4-point stars that float up, spin, and fade.
Spawned/cleared by beginExtendGenerating/endExtendGenerating. */
.prism-sparkles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.prism-spark {
position: absolute;
width: var(--sz, 7px);
height: var(--sz, 7px);
margin: calc(var(--sz, 7px) / -2) 0 0 calc(var(--sz, 7px) / -2);
background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.85) 26%, transparent 68%);
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
opacity: 0;
transform: translateY(5px) scale(0) rotate(0deg);
animation-name: sparkTwinkle;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes sparkTwinkle {
0% { opacity: 0; transform: translateY(6px) scale(0) rotate(0deg); }
35% { opacity: 1; transform: translateY(0) scale(1) rotate(30deg); }
60% { opacity: 0.9; transform: translateY(-3px) scale(0.92) rotate(48deg); }
100% { opacity: 0; transform: translateY(-8px) scale(0) rotate(72deg); }
}
@media (prefers-reduced-motion: reduce) {
.crop-extend-band.generating,
.crop-extend-band.generating::after { animation: none; }
.prism-sparkles { display: none; }
}
/* Reusable prism "AI is working" loader — a translucent spectral scrim over the
photo (so it still shows through) with the same flowing shimmer + sparkles as
the extend band, plus a centered glass label pill. Shared by Face AI, AI
Generate/Erase, and the text/smart mask-select tools. */
.prism-loader {
position: absolute;
overflow: hidden;
pointer-events: none; /* never blocks the floating tool bars above it */
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background:
linear-gradient(115deg,
rgba(255, 99, 132, 0.32),
rgba(255, 177, 90, 0.32),
rgba(250, 233, 110, 0.32),
rgba(126, 217, 156, 0.32),
rgba(110, 168, 254, 0.32),
rgba(178, 122, 255, 0.32),
rgba(255, 99, 132, 0.32)),
linear-gradient(245deg,
rgba(178, 122, 255, 0.22),
rgba(110, 168, 254, 0.22),
rgba(126, 217, 156, 0.22),
rgba(255, 177, 90, 0.22),
rgba(178, 122, 255, 0.22));
background-size: 220% 220%, 260% 260%;
box-shadow: inset 0 0 44px rgba(255, 255, 255, 0.12);
animation: prismSweep 5.2s linear infinite, prismHue 8s linear infinite;
}
.prism-loader[hidden] { display: none; }
.prism-loader-label {
position: relative;
z-index: 2; /* above the sparkle layer */
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
color: #fff;
background: rgba(18, 22, 28, 0.74);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
padding: 7px 15px;
max-width: 82%;
text-align: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.prism-loader-label:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
.prism-loader { animation: none; }
}
/* While generating, quiet the crop chrome: no handles or thirds guides — the
frozen box + prism band are the whole story. */
.editor-crop.generating .crop-h,
.editor-crop.generating .crop-e,
.editor-crop.generating .crop-rect::before,
.editor-crop.generating .crop-rect::after { display: none; }
.editor-crop.generating .crop-rect { cursor: default; }
/* Floating apply bar for the overlay-driven extend (mirrors .editor-remove-tools). */
.crop-extend-bar {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9;
display: flex;
align-items: center;
gap: 10px;
background: rgba(20, 26, 32, 0.92);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px;
backdrop-filter: blur(6px);
}
/* Filmstrip */
.editor-filmstrip {
display: flex;
gap: 8px;
padding: 8px 12px;
overflow-x: auto;
overflow-y: hidden;
border-top: 1px solid var(--line);
background: var(--stage);
scrollbar-width: thin;
}
.filmstrip-item {
flex: 0 0 auto;
width: 96px;
height: 64px;
border-radius: 6px;
overflow: hidden;
border: 2px solid transparent;
background: var(--surface);
cursor: pointer;
padding: 0;
position: relative;
}
.filmstrip-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.filmstrip-item.current {
border-color: var(--accent);
}
.filmstrip-item .filmstrip-check {
position: absolute;
top: 3px;
left: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.7);
background: rgba(8, 11, 15, 0.45);
opacity: 0;
transition: opacity 0.12s ease;
pointer-events: none;
}
.filmstrip-item.selected-for-batch {
border-color: var(--accent-2);
}
.filmstrip-item.selected-for-batch .filmstrip-check {
opacity: 1;
border-color: var(--accent-2);
background: var(--accent-2);
}
.filmstrip-item.selected-for-batch .filmstrip-check::after {
content: "✓";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--stage);
}
.filmstrip-item .raw-badge {
position: absolute;
bottom: 2px;
right: 2px;
font-size: 8px;
padding: 1px 3px;
}
.filmstrip-item .filmstrip-subject {
top: 3px;
right: 3px;
padding: 2px 4px;
font-size: 8px;
border-radius: 5px;
}
.editor-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
border-top: 1px solid var(--line);
background: var(--panel);
}
.editor-name {
font-size: 13px;
font-weight: 600;
overflow-wrap: anywhere;
}
.editor-footer-actions {
display: flex;
align-items: center;
gap: 10px;
}
.editor-orig-toggle {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--muted);
user-select: none;
}
.develop-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.develop-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
}
.develop-header h3 {
margin: 0;
font-size: 15px;
line-height: 1.1;
font-weight: 700;
}
.develop-name {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
#developResetAll {
flex: 0 0 auto;
width: auto;
height: 30px;
padding: 0 10px;
margin: 0;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
}
.develop-controls {
display: flex;
flex-direction: column;
gap: 6px;
}
.develop-group-title {
margin: 10px 0 2px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
/* ============================================================================
Tabbed Develop panel: pinned histogram + tab bar on top, scrolling body below.
When the develop panel is showing, the inspector hands its full height to the
panel and stops scrolling itself, so the sticky header can stay put while only
the sliders scroll.
========================================================================== */
.inspector:has(#developPanel:not([hidden])) {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.develop-panel {
height: 100%;
flex: 1 1 auto;
min-height: 0;
gap: 0;
}
.develop-sticky {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 16px 0;
background: var(--surface-2);
border-bottom: 1px solid var(--line);
z-index: 2;
}
.develop-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px 24px;
}
.develop-tabpanel {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.develop-tabpanel[hidden] { display: none; }
/* In the sticky zone the header is compact and the histogram sits flush. */
.develop-sticky .develop-header h3 { font-size: 14px; }
/* Tool tabs (Adjust / Crop / Mask / AI / Remove) */
.develop-tabs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding-bottom: 10px;
}
.develop-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 0 6px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: var(--muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.develop-tab svg {
width: 18px;
height: 18px;
display: block;
}
/* "Crop & Extend" is the longest label — let it wrap to two centered lines
instead of overflowing its 1fr grid column. */
.develop-tab span {
text-align: center;
line-height: 1.15;
max-width: 100%;
}
.develop-tab:hover {
color: var(--text);
background: var(--field);
}
.develop-tab.active {
color: var(--accent);
background: var(--field);
border-color: var(--line-2, var(--line));
}
/* Remove tab — Pixieset-style sub-tool selector (Heal / AI Erase / AI Generate)
and the Heal-only controls. */
.develop-remove-hub { display: flex; flex-direction: column; gap: 10px; }
.remove-submodes {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
background: var(--field);
border: 1px solid var(--line);
border-radius: 9px;
padding: 3px;
}
.remove-submode {
appearance: none;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--muted);
font-size: 11px;
font-weight: 600;
padding: 7px 4px;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.remove-submode:hover { color: var(--text); }
.remove-submode.active {
color: var(--accent);
background: var(--bg, var(--panel));
border-color: var(--line-2, var(--line));
}
.develop-heal-controls { display: flex; flex-direction: column; gap: 10px; }
.develop-heal-controls[hidden] { display: none; }
/* Heal manual-source controls in the result fine-tune bar. */
.editor-heal-source-row { display: inline-flex; align-items: center; gap: 6px; }
.editor-heal-source-row[hidden] { display: none; }
/* Large-area swap suggestion (Heal ↔ AI Erase) in the result bar. */
.editor-heal-swap-row {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 3px 8px;
border-radius: 7px;
background: rgba(244, 180, 64, 0.14);
border: 1px solid rgba(244, 180, 64, 0.4);
}
.editor-heal-swap-row[hidden] { display: none; }
.editor-heal-swap-text { font-size: 11px; color: #f4d28a; white-space: nowrap; }
/* "Auto-use AI Erase for large areas" toggle in the Heal side panel. */
.heal-auto-erase { font-size: 12px; }
.heal-auto-erase input { margin-right: 6px; }
/* On-image Heal source pin (drag to choose the donor), destination ring, and the
link line between them. The pin is grabbable; the ring + line are decorative. */
.editor-heal-source {
position: absolute;
width: 22px;
height: 22px;
margin: -11px 0 0 -11px; /* centre on its (left, top) point */
border-radius: 50%;
border: 2px solid #2bd49a;
background: rgba(43, 212, 154, 0.18);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
cursor: grab;
z-index: 11;
touch-action: none;
}
.editor-heal-source::before,
.editor-heal-source::after {
content: "";
position: absolute;
background: #2bd49a;
}
.editor-heal-source::before { left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -0.5px; }
.editor-heal-source::after { top: 50%; left: 3px; right: 3px; height: 1px; margin-top: -0.5px; }
.editor-heal-source:active { cursor: grabbing; }
.editor-heal-source[hidden] { display: none; }
/* Destination/target handle — drag to move where the heal lands. */
.editor-heal-dest {
position: absolute;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.92);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
cursor: grab;
z-index: 11;
touch-action: none;
}
.editor-heal-dest::before,
.editor-heal-dest::after {
content: "";
position: absolute;
background: rgba(255, 255, 255, 0.92);
}
.editor-heal-dest::before { left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -0.5px; }
.editor-heal-dest::after { top: 50%; left: 3px; right: 3px; height: 1px; margin-top: -0.5px; }
.editor-heal-dest:active { cursor: grabbing; }
.editor-heal-dest[hidden] { display: none; }
.editor-heal-link {
position: absolute;
height: 0;
border-top: 1px dashed rgba(43, 212, 154, 0.85);
transform-origin: 0 50%;
pointer-events: none;
z-index: 10;
}
.editor-heal-link[hidden] { display: none; }
/* Unified Layers hub — collapsible list pinned under the histogram, reachable
from every Develop tab. The old per-tab lists it replaces are hidden via
.legacy-layers-ui below. */
.layers-hub {
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--field);
overflow: hidden;
}
.layers-hub[hidden] { display: none; }
.layers-hub-toggle {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
padding: 7px 9px;
border: none;
background: transparent;
color: var(--text);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
}
.layers-hub-toggle:hover { background: var(--raised); }
.layers-hub-chevron {
font-size: 10px;
color: var(--muted);
transition: transform 0.12s ease;
}
.layers-hub.open .layers-hub-chevron { transform: rotate(90deg); }
.layers-hub-title { flex: 1; text-align: left; }
.layers-hub-count {
min-width: 18px;
padding: 1px 6px;
border-radius: 9px;
background: var(--raised);
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0;
text-align: center;
}
.layers-hub-list {
list-style: none;
margin: 0;
padding: 0 6px 6px;
display: flex;
flex-direction: column;
gap: 3px;
max-height: 220px;
overflow-y: auto;
}
.layers-hub-list[hidden] { display: none; }
.layers-hub-item {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
font-size: 12px;
color: var(--text);
cursor: pointer;
}
.layers-hub-item:hover { border-color: var(--line-2, var(--accent)); }
.layers-hub-item.selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent) inset;
}
.layers-hub-item.is-off { opacity: 0.55; }
.layers-hub-eye {
border: none;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 11px;
line-height: 1;
padding: 0 1px;
}
.layers-hub-eye:hover { color: var(--text); }
.layers-hub-eye.is-static { cursor: default; opacity: 0.5; }
.layers-hub-ic {
display: flex;
color: var(--muted);
}
.layers-hub-svg { width: 14px; height: 14px; display: block; }
.layers-hub-item.selected .layers-hub-ic { color: var(--accent); }
.layers-hub-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.layers-hub-name em {
color: var(--muted);
font-style: normal;
font-size: 11px;
}
.layers-hub-del {
border: none;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 0 2px;
}
.layers-hub-del:hover { color: var(--danger); }
/* The per-tab Mask list and AI Layers list are superseded by the unified hub. */
.legacy-layers-ui { display: none !important; }
/* Collapsible slider groups (Light / Color / Detail / Effects …) — modern cards. */
/* Borderless groups: no boxy card — just a header with a thin top divider, so
the panel reads as one clean stack (Lightroom-style). */
.develop-group {
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
.develop-tabpanel > .develop-group:first-of-type {
border-top: 0;
}
.develop-group-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 11px 2px 7px;
cursor: pointer;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
list-style: none;
user-select: none;
}
.develop-group-summary::-webkit-details-marker { display: none; }
.develop-group-chevron {
font-size: 10px;
color: var(--muted);
transition: transform 0.15s ease;
}
.develop-group[open] > .develop-group-summary .develop-group-chevron {
transform: rotate(90deg);
}
.develop-group-body {
display: flex;
flex-direction: column;
gap: 11px;
padding: 2px 2px 12px;
}
/* Crop-tab "start crop" action */
.crop-tab-actions { display: flex; }
.crop-tab-actions .tool-btn { flex: 1; min-height: 34px; }
/* The section blocks that now live inside their own tab panel shouldn't carry the
old top divider that separated them in the long single scroll. */
.develop-tabpanel > .develop-masks,
.develop-tabpanel > .develop-alignment,
.develop-tabpanel > .develop-ai {
border-top: 0;
padding-top: 0;
}
/* Histogram + clipping indicators */
.develop-scopes {
position: relative;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--field);
padding: 4px;
}
.develop-histogram {
display: block;
width: 100%;
height: 92px;
border-radius: 5px;
}
.histogram-clip {
position: absolute;
top: 7px;
left: 7px;
right: 7px;
display: flex;
justify-content: space-between;
pointer-events: none;
}
.hist-clip-pip {
width: 11px;
height: 11px;
padding: 0;
border: 1px solid transparent;
border-radius: 50%;
background: var(--raised);
opacity: 0.5;
cursor: pointer;
pointer-events: auto;
transition: background 0.15s, opacity 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.hist-clip-pip:hover {
opacity: 0.95;
}
.hist-clip-pip.clipping {
opacity: 1;
}
/* "Armed" = the on-image clipping overlay for this end is toggled on. */
.hist-clip-pip.armed {
opacity: 1;
border-color: var(--text, #fff);
}
#histClipShadow.armed {
box-shadow: 0 0 0 2px rgba(80, 130, 255, 0.5);
}
#histClipHighlight.armed {
box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.5);
}
#histClipShadow.clipping {
background: var(--blue);
box-shadow: 0 0 6px var(--blue);
}
#histClipShadow.clipping.armed {
box-shadow: 0 0 6px var(--blue), 0 0 0 2px rgba(80, 130, 255, 0.6);
}
#histClipHighlight.clipping {
background: var(--danger);
box-shadow: 0 0 6px var(--danger);
}
#histClipHighlight.clipping.armed {
box-shadow: 0 0 6px var(--danger), 0 0 0 2px rgba(255, 80, 80, 0.6);
}
/* On-image clipping warning overlay: tracks the "after" image pixel-for-pixel
(same .editor-img sizing/transform), painting crushed shadows blue and blown
highlights red. */
.editor-clip-overlay {
z-index: 2;
image-rendering: pixelated;
}
/* GPU develop preview canvas (webgl-live-develop): inherits .editor-img so it
sits exactly over #editorAfter with the same size/transform. Layered above
the ![]()
(z-index 1) but below the clip overlay (z-index 2). Visibility is
toggled per frame — canvas shown on GPU frames, the ![]()
shown on Python
frames; hidden by default so Python frames render unchanged. */
.editor-after-gl {
z-index: 1;
}
/* Tone curve / Color mixer / Sky — borderless, matching the slider groups so
the whole Develop panel reads as one clean stack (no boxy cards). */
.develop-curve-section {
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
.develop-curve-section > summary {
cursor: pointer;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text);
list-style: none;
padding: 11px 2px 7px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.develop-curve-section > summary::-webkit-details-marker {
display: none;
}
.develop-curve-section > summary::after {
content: "\25B8";
font-size: 10px;
color: var(--muted);
transition: transform 0.15s ease;
}
.develop-curve-section[open] > summary::after {
transform: rotate(90deg);
}
.develop-curve-wrap,
.develop-hsl-wrap {
padding: 0 2px 12px;
}
.develop-curve-wrap {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.develop-curve {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--field);
cursor: crosshair;
touch-action: none;
}
/* Tone curve channel tabs (RGB / R / G / B) */
.curve-channels {
display: flex;
gap: 4px;
}
.curve-channel-tab {
flex: 1;
padding: 4px 0;
font-size: 11px;
font-weight: 700;
color: var(--muted);
background: var(--field);
border: 1px solid var(--line);
border-radius: 6px;
cursor: pointer;
position: relative;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.curve-channel-tab:hover {
color: var(--text);
}
.curve-channel-tab.active {
color: var(--tab-color, var(--accent));
border-color: var(--tab-color, var(--accent));
background: var(--raised);
}
/* Small dot marking a channel whose curve has been modified. */
.curve-channel-tab.modified::after {
content: "";
position: absolute;
top: 3px;
right: 4px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--tab-color, var(--accent));
}
/* Color Mixer (HSL) */
.develop-hsl-wrap {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.hsl-band-row {
display: flex;
align-items: center;
gap: 6px;
}
.hsl-band-picker {
display: flex;
gap: 5px;
flex: 1;
}
/* Eyedropper: sample a colour from the photo to jump to its hue band. */
.hsl-eyedropper {
flex: 0 0 auto;
width: 26px;
height: 22px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line-2);
border-radius: 5px;
background: var(--raised);
cursor: pointer;
transition: transform 0.1s, border-color 0.1s;
}
.hsl-eyedropper:hover {
transform: translateY(-1px);
border-color: var(--accent);
}
/* A small conic "colour wheel" dot so the control reads as a colour picker. */
.hsl-eyedropper-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
#e0413c, #e08a2e, #d7c43a, #4caf50,
#33b5b0, #3d7fd6, #8a5fd0, #cf4baf, #e0413c
);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.hsl-band-swatch {
flex: 1;
height: 22px;
padding: 0;
border: 2px solid transparent;
border-radius: 5px;
cursor: pointer;
position: relative;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
transition: transform 0.1s, border-color 0.1s;
}
.hsl-band-swatch:hover {
transform: translateY(-1px);
}
.hsl-band-swatch.active {
border-color: var(--text, #fff);
}
/* Dot marking a color band that has a non-zero adjustment. */
.hsl-band-swatch.modified::after {
content: "";
position: absolute;
top: 2px;
right: 2px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.hsl-sliders {
display: flex;
flex-direction: column;
gap: 8px;
}
.hsl-active-label {
margin: 0;
}
.sky-panel {
display: grid;
gap: 10px;
}
.develop-ai .sky-section {
border-top: 1px solid var(--line);
padding-top: 0;
}
/* Sky body inset so it matches the other collapsible sections. */
.develop-ai .sky-section .sky-panel {
padding: 0 2px 12px;
}
.sky-toolbar {
display: flex;
gap: 8px;
align-items: center;
}
.sky-toolbar .tool-btn.active {
border-color: var(--accent);
color: var(--accent);
}
.sky-refine-panel {
display: grid;
gap: 8px;
padding: 9px;
border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
border-radius: 8px;
background: color-mix(in srgb, var(--field) 88%, var(--accent) 12%);
}
.sky-refine-panel[hidden] {
display: none;
}
.sky-refine-modes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
.sky-refine-modes .tool-btn {
min-width: 0;
padding-inline: 7px;
}
.sky-refine-modes .tool-btn.active {
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 13%, var(--field));
}
.sky-refine-key {
display: inline-block;
width: 9px;
height: 9px;
margin-right: 3px;
border-radius: 50%;
vertical-align: -1px;
}
.sky-refine-key.add {
background: rgb(70, 220, 255);
}
.sky-refine-key.protect {
background: rgb(255, 72, 155);
}
.sky-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.sky-card {
display: grid;
gap: 6px;
padding: 6px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--field);
color: var(--text);
cursor: pointer;
text-align: left;
}
.sky-card:hover,
.sky-card.active {
border-color: var(--accent);
}
.sky-thumb {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 6px;
background-size: cover;
background-position: center;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.sky-name {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
color: var(--muted);
}
.sky-import-hint {
margin: -2px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.35;
}
.sky-controls {
display: grid;
gap: 8px;
}
.sky-check {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 12px;
}
/* Local adjustments / masks */
.develop-masks {
display: flex;
flex-direction: column;
gap: 8px;
}
.mask-add-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.mask-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.mask-item {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 7px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--field);
font-size: 12px;
}
.mask-item.active {
border-color: var(--accent);
background: var(--raised);
}
.mask-item .mask-name {
flex: 1;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mask-item .mask-name em {
color: var(--muted);
font-style: normal;
font-size: 11px;
}
.mask-item .mask-eye,
.mask-item .mask-del {
border: none;
background: none;
color: var(--muted);
cursor: pointer;
font-size: 12px;
padding: 0 2px;
}
.mask-item .mask-eye:hover,
.mask-item .mask-del:hover {
color: var(--text);
}
.mask-controls {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 4px;
border-top: 1px solid var(--line);
}
.mask-invert {
font-size: 12px;
}
.develop-slider {
display: grid;
gap: 4px;
}
/* Minimal auto controls: one compact block without the bulky card treatment. */
.develop-auto {
display: grid;
gap: 7px;
padding: 8px 0 10px;
border: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
.develop-exif-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.develop-exif-chip {
display: inline-flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border-radius: 6px;
background: var(--field);
border: 1px solid var(--line-2, var(--line));
color: var(--text-2, var(--muted));
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.develop-auto-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
gap: 6px;
}
.develop-auto-field {
display: grid;
gap: 2px;
min-width: 0;
}
.develop-auto-field--wide {
grid-column: auto;
}
.develop-auto-tag {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.develop-auto .develop-select {
height: 32px;
margin: 0;
font-size: 12px;
padding: 0 28px 0 9px;
border-radius: 8px;
background-color: var(--field);
}
.develop-slider-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
}
.develop-slider-row label {
color: var(--text);
}
.develop-slider-row .develop-slider-val {
color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* --- Look chip (unified Look control) --- */
.look-chip {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--line-2, var(--line));
background: var(--field);
cursor: pointer;
text-align: left;
font: inherit;
color: var(--text);
}
.look-chip:hover { border-color: var(--accent, #5b8af5); }
.look-chip-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.look-chip-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-chip-meta { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.look-chip-chevron { font-size: 14px; color: var(--muted); margin-left: 6px; flex-shrink: 0; }
/* --- Look picker grid --- */
.look-picker-panel {
margin-top: 4px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--field);
overflow: hidden;
}
.look-picker-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
padding: 6px;
}
.look-picker-card {
border-radius: 6px;
border: 2px solid transparent;
overflow: hidden;
cursor: pointer;
background: var(--bg, #1a1d21);
transition: border-color 0.12s;
}
.look-picker-card:hover { border-color: var(--line-2, var(--line)); }
.look-picker-card.active { border-color: var(--accent, #5b8af5); }
.look-picker-card .look-preview {
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--bg, #1a1d21);
}
.look-picker-card .look-preview img,
.look-picker-card .look-preview canvas {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.look-picker-card .look-card-label {
font-size: 10px;
padding: 3px 4px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--muted);
}
.look-picker-card.active .look-card-label { color: var(--accent, #5b8af5); font-weight: 600; }
.look-picker-card .look-learned-badge {
position: absolute;
top: 2px;
left: 2px;
font-size: 8px;
padding: 1px 4px;
border-radius: 3px;
background: rgba(0,0,0,0.5);
color: #ccc;
}
/* --- Scene correction row (inside picker) --- */
.look-picker-scene {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-top: 1px solid var(--line);
font-size: 10px;
}
.look-picker-scene-label { color: var(--muted); white-space: nowrap; }
.look-picker-scene .develop-select {
flex: 1;
height: 26px;
margin: 0;
font-size: 10px;
}
/* --- Learning status line --- */
.look-learn-status {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
padding: 6px 8px;
border-radius: 6px;
background: rgba(91, 138, 245, 0.08);
color: var(--accent, #5b8af5);
font-size: 10px;
}
.look-learn-status .learn-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
color: var(--accent);
}
.look-learn-status .learn-icon svg { width: 13px; height: 13px; }
/* --- Two-column Optimize + Advanced row --- */
.develop-auto-grid--two {
grid-template-columns: 1fr 1fr;
}
.develop-advanced-details { min-width: 0; }
.develop-advanced-details summary {
cursor: pointer;
list-style: none;
user-select: none;
}
.develop-advanced-details summary::-webkit-details-marker { display: none; }
.develop-auto-tag--clickable { cursor: pointer; }
.develop-auto-tag--clickable:hover { color: var(--text); }
/* --- Pro strip: Strength segmented control + Raw Profile --- */
.develop-prostrip {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.strength-seg {
display: flex;
height: 32px;
padding: 3px;
gap: 2px;
border: 1px solid var(--line-2, var(--line));
border-radius: 8px;
background: var(--field);
}
.strength-seg button {
flex: 1;
min-width: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--muted);
font: inherit;
font-size: 11px;
font-weight: 600;
cursor: pointer;
padding: 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.strength-seg button:hover { color: var(--text); }
.strength-seg button.active {
background: var(--accent, #5b8af5);
color: var(--on-accent, #fff);
}
/* --- Look picker category headers --- */
.look-picker-section {
grid-column: 1 / -1;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
padding: 5px 2px 0;
}
/* --- Saved Looks strip --- */
.saved-looks-strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
}
.saved-look-card {
flex: 0 0 auto;
width: 60px;
cursor: pointer;
border: 0;
padding: 0;
background: transparent;
color: var(--muted);
font: inherit;
display: grid;
gap: 3px;
text-align: center;
}
.saved-look-card .saved-look-thumb {
position: relative;
display: block;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
background: var(--field);
}
.saved-look-card:hover .saved-look-thumb { border-color: var(--line-2, var(--line)); }
.saved-look-card.active .saved-look-thumb { border-color: var(--accent, #5b8af5); }
.saved-look-card .saved-look-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.saved-look-card .saved-look-name {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.saved-look-card.active .saved-look-name { color: var(--accent, #5b8af5); }
.saved-look-add .saved-look-plus {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 8px;
border: 1px dashed var(--line-2, var(--line));
color: var(--accent, #5b8af5);
font-size: 20px;
line-height: 1;
}
.saved-look-add:hover .saved-look-plus { border-color: var(--accent, #5b8af5); }
.saved-look-delete {
position: absolute;
top: 2px;
right: 2px;
width: 16px;
height: 16px;
border: 0;
border-radius: 4px;
background: rgba(0, 0, 0, 0.55);
color: #ddd;
font-size: 11px;
line-height: 1;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
padding: 0;
}
.saved-look-card:hover .saved-look-delete { display: flex; }
.saved-look-delete:hover { background: rgba(180, 40, 40, 0.85); color: #fff; }
@media (max-width: 1180px) {
.develop-auto-grid {
grid-template-columns: 1fr 1fr;
}
.look-picker-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Modern, thin develop sliders (every slider in the develop panel — global
adjustments, HSL, masks, Face AI, layers): a 3px line track with the "active
range" filled in the accent colour (the fill runs from the adjustment's origin
— 0 for bipolar sliders, the min for one-sided ones — to the thumb, via the
--lo/--hi percentages set in JS by paintRange), and a small round thumb. No
chunky native fill. */
.develop-panel input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 16px;
margin: 2px 0;
background: transparent;
cursor: pointer;
/* Visible unfilled track on any theme: a 32% mix of the text colour (white on
dark looks, near-black on light) so the slider's full range always reads. */
--dev-track: color-mix(in srgb, var(--text) 32%, transparent);
--dev-tick: color-mix(in srgb, var(--text) 26%, transparent);
}
/* Faint ruler tick marks along the track, revealed on hover. Painted on the
input's own background (behind the 3px track), in a short centred band so they
read as graduations flanking the line — like Lightroom/Pixieset. */
.develop-panel input[type="range"]:hover {
background-image: repeating-linear-gradient(
to right,
var(--dev-tick) 0, var(--dev-tick) 1px,
transparent 1px, transparent 7px
);
background-repeat: no-repeat;
background-size: 100% 9px;
background-position: center;
}
.develop-panel input[type="range"]::-webkit-slider-runnable-track {
height: 3px;
border-radius: 3px;
background: linear-gradient(
90deg,
var(--dev-track) 0 var(--lo, 0%),
var(--accent) var(--lo, 0%) var(--hi, 0%),
var(--dev-track) var(--hi, 0%) 100%
);
}
/* Hollow triangle handle — a nod to the LightVision prism mark (replaces the
round thumb). An inline SVG outline keeps the centre open; drop-shadow gives
it depth against the track. */
.develop-panel input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 14px;
margin-top: -5.5px; /* centre the triangle over the 3px track */
border: none;
border-radius: 0;
background: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M8 1.4 14.7 12.7 1.3 12.7Z' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
transition: transform 0.08s ease;
}
.develop-panel input[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.18);
}
/* Colour-aware tracks for Temperature/Tint (and Saturation) and the tinted mask
sliders: the representative gradient (set inline via --track-gradient) IS the
track, so it replaces the accent fill while keeping the same thin profile. */
.develop-panel input[type="range"].tinted::-webkit-slider-runnable-track {
background: var(--track-gradient, var(--track));
}
/* Inline button icons (mask types, AI Remove, Face AI). currentColor keeps them
in step with the button label in both looks. */
.btn-ic {
width: 14px;
height: 14px;
flex: 0 0 auto;
display: inline-block;
vertical-align: -2px;
}
/* Mask add row: icon + label, four to a row. */
.mask-add-row .tool-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
/* Type icon shown on each mask list row. */
.mask-type-ic {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: var(--muted);
}
.mask-item.active .mask-type-ic {
color: var(--accent);
}
.develop-presets {
border-top: 1px solid var(--line);
padding-top: 12px;
display: grid;
gap: 8px;
}
.preset-actions {
display: flex;
gap: 8px;
}
.preset-actions .tool-btn {
flex: 1;
min-height: 32px;
}
/* Light-mask preset chips: five short labels — wrap instead of squeezing. */
.light-preset-row {
flex-wrap: wrap;
}
.light-preset-row .tool-btn {
flex: 0 1 auto;
padding: 4px 10px;
white-space: nowrap;
}
/* ReLight tab: multi-light scenes live in their own group; chips render a
little roomier than the quick-light row but otherwise match. */
.relight-scenes .tool-btn {
padding: 6px 12px;
}
.develop-relight .mask-list {
margin-top: 10px;
}
.preset-name {
flex: 1;
min-width: 0;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12px;
}
.sample-threshold-label {
flex: 1;
min-width: 0;
align-self: center;
font-size: 12px;
color: var(--muted, var(--text));
}
.sample-threshold {
width: 84px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12px;
}
.develop-ai {
border-top: 1px solid var(--line);
padding-top: 12px;
display: grid;
gap: 8px;
}
.develop-ai-heading {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.develop-face,
.develop-portrait {
display: grid;
gap: 8px;
}
/* AI Generate (moved here from the Remove tab): first section under the AI
heading, so it separates itself with a bottom rule instead of the usual top. */
.develop-generate {
display: grid;
gap: 8px;
border-bottom: 1px solid var(--line);
padding-bottom: 12px;
}
.develop-generate .tool-btn { width: 100%; }
.develop-portrait {
border-top: 1px solid var(--line);
padding-top: 12px;
}
.develop-remove {
border-top: 1px solid var(--line);
padding-top: 12px;
display: grid;
gap: 8px;
}
.develop-face-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
}
.develop-tool-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
}
.develop-face input[type="range"] {
width: 100%;
accent-color: var(--accent);
}
.develop-face-expression {
border-top: 1px solid var(--line);
padding-top: 12px;
display: grid;
gap: 6px;
}
.develop-face-expression input[type="range"] {
width: 100%;
accent-color: var(--accent);
}
.develop-face-expression-heading {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
/* Dedicated "Fix Eyes" area in the AI tab — one-click open-closed-eyes ladder. */
.develop-eyefix {
border-top: 1px solid var(--line);
padding-top: 12px;
display: grid;
gap: 6px;
}
.develop-eyefix-heading {
font-size: 12px;
font-weight: 600;
color: var(--text);
}
.develop-eyefix .besttake-btn { width: 100%; }
.develop-eyefix #developFixEyes:disabled { opacity: 0.55; }
.develop-message {
min-height: 18px;
font-size: 12px;
color: var(--muted);
}
/* Conversational Develop Agent — "Ask" command row. */
.develop-agent {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 4px;
}
.develop-agent-row {
display: flex;
gap: 6px;
align-items: center;
}
.develop-agent-input {
flex: 1;
min-width: 0;
height: 32px;
padding: 0 10px;
font-size: 12px;
color: var(--text);
background-color: var(--field);
border: 1px solid var(--line);
border-radius: 8px;
}
.develop-agent-input:focus {
outline: none;
border-color: var(--accent, #8a5fd0);
}
.develop-agent-run {
flex-shrink: 0;
height: 32px;
}
.develop-agent-run[disabled] { opacity: 0.5; cursor: default; }
.develop-agent-status {
margin: 0;
font-size: 11px;
color: var(--muted);
}
.develop-agent-status.is-error { color: var(--danger, #d8504f); }
/* Preview bar — proposed edit awaiting Keep / Undo. */
.develop-agent-preview {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
border: 1px solid var(--accent, #8a5fd0);
border-radius: 8px;
background: color-mix(in srgb, var(--accent, #8a5fd0) 10%, transparent);
}
.develop-agent-preview-text {
flex: 1;
min-width: 0;
font-size: 11px;
color: var(--text);
line-height: 1.3;
}
.develop-agent-preview-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.develop-agent-preview .tool-btn { height: 28px; padding: 0 12px; }
.develop-agent-apply {
background: var(--accent, #8a5fd0);
color: #fff;
border-color: var(--accent, #8a5fd0);
}
.develop-select {
width: 100%;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font-size: 12px;
}
.editor-footer-actions .develop-select {
width: auto;
}
.export-options {
display: grid;
gap: 8px;
margin: 8px 0;
}
.export-option-row {
display: grid;
gap: 4px;
font-size: 12px;
color: var(--muted);
}
.export-quality-control {
display: flex;
align-items: center;
gap: 8px;
}
.export-quality-control input[type="range"] {
flex: 1;
accent-color: var(--accent);
}
.export-quality-control output {
min-width: 26px;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--text);
}
/* --- Photo context menu --- */
.context-menu {
position: fixed;
z-index: 9000;
min-width: 184px;
padding: 6px;
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
font-size: 13px;
user-select: none;
}
.context-menu-item {
position: relative;
padding: 7px 10px;
border-radius: 6px;
color: var(--text);
cursor: pointer;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.context-menu-item:hover {
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.context-menu-item.danger {
color: var(--danger);
}
.context-menu-item.danger:hover {
background: color-mix(in srgb, var(--danger) 22%, transparent);
}
.context-menu-item.disabled {
color: var(--muted);
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.context-menu-item.has-submenu::after {
content: "›";
margin-left: auto;
color: var(--muted);
font-size: 15px;
}
.context-menu-sep {
height: 1px;
margin: 5px 6px;
background: var(--line);
}
.context-submenu {
position: absolute;
top: -7px;
left: 100%;
margin-left: 2px;
display: none;
max-height: 320px;
overflow-y: auto;
}
.context-submenu.flip-left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 2px;
}
.context-menu-item.has-submenu:hover > .context-submenu {
display: block;
}
/* --- Prompt modal --- */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 9100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 11, 15, 0.62);
}
.modal-card {
width: 320px;
padding: 20px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.modal-card h3 {
margin: 0 0 12px;
font-size: 15px;
}
.modal-input {
width: 100%;
padding: 9px 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--text);
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
/* --- People coverage panel --- */
.people-coverage-card {
width: 460px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
}
.people-coverage-card .hint.warn {
color: #ffb454;
}
.people-coverage-min {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted, var(--muted));
margin: 4px 0 12px;
}
.people-coverage-min select {
padding: 5px 8px;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--surface);
color: var(--text);
}
.people-coverage-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
margin: 4px 0 12px;
}
.people-coverage-controls .people-coverage-min {
margin: 0;
}
.people-coverage-empty {
margin: 8px 2px;
font-size: 13px;
line-height: 1.5;
color: var(--muted, var(--muted));
}
.people-coverage-list {
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 60px;
}
.people-coverage-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--text);
cursor: pointer;
text-align: left;
}
.people-coverage-row:hover {
border-color: var(--accent, #4a9eff);
}
.people-coverage-row.is-missing {
border-color: rgba(255, 140, 60, 0.55);
background: rgba(255, 140, 60, 0.08);
}
.people-coverage-face {
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--stage) center / cover no-repeat;
border: 1px solid var(--line);
}
.people-coverage-meta {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
}
.people-coverage-meta strong {
font-size: 13px;
}
.people-coverage-row.is-missing .people-coverage-meta strong {
color: #ffb454;
}
.people-coverage-meta em {
font-style: normal;
font-size: 11px;
color: var(--muted, var(--muted));
}
.people-coverage-go {
flex: 0 0 auto;
font-size: 12px;
color: var(--muted, var(--muted));
}
/* --- People hub (Coverage / Best shots / Shot list) --- */
.people-hub-card {
width: 560px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 72px);
display: flex;
flex-direction: column;
gap: 0;
}
.people-hub-head h3 { margin: 0 0 2px; }
.people-hub-head .hint { margin: 0 0 12px; }
.people-hub-head .hint.warn { color: #ffb454; }
.people-hub-tabs {
display: flex;
gap: 4px;
padding: 3px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 9px;
margin-bottom: 12px;
}
.people-hub-tab {
flex: 1 1 0;
height: 28px;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.people-hub-tab:hover { color: var(--text); }
.people-hub-tab.is-active {
background: var(--accent);
color: var(--on-accent);
}
.people-hub-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-bottom: 12px;
}
.people-hub-hint {
flex: 1 1 160px;
font-size: 11px;
color: var(--muted);
}
.people-hub-body {
overflow-y: auto;
min-height: 80px;
flex: 1 1 auto;
}
.people-hub-body .people-coverage-list { min-height: 0; }
/* Inline role pill on a named person (mirrors the .badge.pick recipe). */
.vip-role-badge {
display: inline-block;
margin-left: 7px;
padding: 1px 6px;
border-radius: 5px;
background: var(--accent);
color: var(--on-accent);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
vertical-align: 1px;
}
/* Best shots grid */
.people-best-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.people-best-card {
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
background: var(--surface);
}
.people-best-card.is-pick { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.people-best-frame {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 2;
border: 0;
padding: 0;
cursor: pointer;
overflow: hidden;
background: var(--img-well, var(--stage));
}
/* Blurred fill behind the frame so portrait + landscape both show in full
(object-fit: contain) without the head-chopping a cover-crop would cause. */
.people-best-frame::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--frame-bg);
background-position: center;
background-size: cover;
filter: blur(16px) brightness(0.55);
transform: scale(1.15);
}
.people-best-frame img {
position: relative;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.people-best-cap {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
}
.people-best-cap .people-coverage-face { width: 32px; height: 32px; }
.people-best-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1 1 auto;
min-width: 0;
}
.people-best-text strong {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.people-best-text em { font-style: normal; font-size: 10px; color: var(--muted); }
.people-best-add {
flex: 0 0 auto;
height: 26px;
padding: 0 9px;
font-size: 11px;
}
/* Shot-list rows */
.shotlist-row { gap: 10px; cursor: default; }
.shotlist-faces {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.shotlist-chip {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--stage) center / cover no-repeat;
border: 2px solid var(--panel);
margin-left: -10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
color: var(--muted);
}
.shotlist-chip:first-child { margin-left: 0; }
.shotlist-actions {
flex: 0 0 auto;
display: flex;
gap: 6px;
}
.shotlist-actions .tool-btn { height: 26px; padding: 0 9px; font-size: 11px; }
/* Shot-list editor */
.shotlist-editor-card {
width: 420px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
}
.shotlist-people {
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
margin: 6px 0 4px;
min-height: 60px;
}
.shotlist-pick {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--surface);
color: var(--text);
cursor: pointer;
text-align: left;
}
.shotlist-pick:hover { border-color: var(--accent); }
.shotlist-pick.is-on {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.shotlist-pick .people-coverage-face { width: 34px; height: 34px; }
.shotlist-pick-name { display: flex; flex-direction: column; font-size: 13px; }
.shotlist-pick-name em { font-style: normal; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.shotlist-pick.is-on::after {
content: "✓";
margin-left: auto;
color: var(--accent);
font-weight: 800;
}
/* --- Send shot list to phone (offline QR) --- */
.checklist-send-card {
width: 380px;
max-width: calc(100vw - 48px);
text-align: center;
}
.checklist-send-body { padding: 6px 0 2px; min-height: 120px; }
.checklist-send-status { color: var(--muted); font-size: 14px; padding: 24px 0; }
.qr-box {
display: inline-block;
padding: 12px;
background: #fff;
border-radius: 12px;
border: 1px solid var(--line);
margin: 4px auto 10px;
}
.qr-box svg { display: block; width: 240px; height: auto; max-width: 100%; }
.checklist-send-scan { font-size: 13px; color: var(--text); margin: 0 0 12px; }
.checklist-send-link { display: flex; gap: 8px; align-items: center; }
.checklist-send-link input {
flex: 1;
min-width: 0;
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px 10px;
font-size: 12px;
background: var(--surface);
color: var(--muted);
}
.checklist-send-tip { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.45; }
.checklist-send-hint { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.checklist-send-err { color: var(--danger, #c0392b); font-size: 14px; margin: 10px 0; }
.slr-onday { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
/* --- Dashboard: Shot lists section --- */
.sl-lead { margin: 0 0 16px; max-width: 640px; }
.sl-empty { max-width: 560px; margin-top: 8px; }
.sl-list { display: flex; flex-direction: column; gap: 12px; }
.sl-card {
display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--line);
border-radius: 12px; padding: 14px 18px;
}
.sl-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sl-info strong { font-size: 15px; }
.sl-meta { font-size: 12.5px; color: var(--muted); }
.sl-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; width: fit-content; }
.sl-badge.ok { color: var(--accent); }
.sl-badge.wait { color: var(--muted); }
.sl-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* --- Settings panel --- */
.settings-btn {
font-size: 16px;
line-height: 1;
padding: 6px 10px;
}
.settings-card {
width: 840px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 64px);
overflow-y: auto;
}
.settings-live-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 8px 0 16px;
}
.settings-live-controls .settings-modal-panel:first-child {
grid-column: 1 / -1;
}
.settings-section {
padding: 14px 0;
border-top: 1px solid var(--line);
}
.settings-section:first-of-type {
border-top: none;
}
.settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* SF-Symbols-style leading icon + stacked text in each settings row. */
.settings-label {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.settings-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-top: 1px;
border-radius: 8px;
color: var(--muted);
background: var(--surface-2);
}
.settings-ico svg {
width: 18px;
height: 18px;
display: block;
}
.settings-label-text {
min-width: 0;
}
.settings-label strong {
font-size: 13px;
}
/* Appearance segmented controls. */
.appearance-controls {
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
}
.look-segment,
.theme-segment {
flex: 0 0 auto;
display: inline-flex;
padding: 2px;
gap: 2px;
border-radius: 9px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.look-segment .look-opt,
.theme-segment .theme-opt {
appearance: none;
border: 0;
background: transparent;
color: var(--muted);
font-size: 12px;
font-weight: 600;
padding: 5px 12px;
white-space: nowrap;
border-radius: 7px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.look-segment .look-opt:hover,
.theme-segment .theme-opt:hover {
color: var(--text);
}
.look-segment .look-opt.active,
.theme-segment .theme-opt.active {
background: var(--accent);
color: var(--on-accent);
}
.look-relaunch {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
padding: 8px 10px;
border-radius: 8px;
background: var(--surface-2);
border: 1px solid var(--line);
}
.look-relaunch .settings-hint {
margin: 0;
}
.settings-hint {
margin: 2px 0 0;
font-size: 12px;
color: var(--muted, var(--muted));
}
.settings-explainer {
margin-top: 10px;
}
.settings-explainer p {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.5;
color: var(--muted, var(--muted));
}
.settings-explainer p:last-child {
margin-bottom: 0;
}
/* --- Drag & drop states --- */
.photo-card.dragging,
.filmstrip-item.dragging {
opacity: 0.4;
}
.photo-card[draggable="true"] {
cursor: grab;
}
.folder-card.drop-target {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* --- Near-duplicate group bands (All tab) --- */
/* In the All tab each group of near-duplicates is wrapped in a full-width band
with a coloured border, so they read as one group while every frame stays
visible and individually gradable (not stacked). */
.dupe-band {
/* Span exactly as many columns as the group has frames (set on the element as
--band-cols by renderGrid). `subgrid` then maps the band's own tracks onto
the parent grid's columns, so member cards align with the standalone cards. */
grid-column: span var(--band-cols, 2);
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: max-content;
align-self: start;
/* Vertical padding only — any horizontal padding would inset the subgrid
tracks and knock the member frames off the outer column lines. */
padding: 0 0 6px;
row-gap: 8px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent-2) 5%, transparent);
/* Hairline ring drawn as an inset shadow so it adds no layout box (a real
border would shift the subgrid by its width and break alignment). */
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 15%, transparent);
}
.dupe-band-head {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 7px;
/* Fixed height (matches the standalone-card top offset) so a band's frames and
the standalone cards beside them share one thumbnail baseline. */
height: var(--band-head-h, 28px);
padding: 0 2px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.01em;
color: color-mix(in srgb, var(--accent-2) 80%, var(--text-2));
}
.dupe-band-head > span:nth-child(2) {
flex: 1;
}
.dupe-band-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent-2);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 26%, transparent);
}
.dupe-band-compare {
padding: 3.5px 10px;
border: 1px solid color-mix(in srgb, var(--accent-2) 45%, transparent);
border-radius: 7px;
background: transparent;
color: var(--accent-2);
font-size: 10px;
font-weight: 700;
cursor: pointer;
}
.dupe-band-compare:hover {
background: color-mix(in srgb, var(--accent-2) 18%, transparent);
}
/* The inner frame row re-subgrids onto the band's columns (which are the parent
grid's columns), so each member card fills one outer column — identical width
to a standalone card. Extra frames beyond the available columns wrap onto a
new aligned row. Column gap is inherited from the parent grid for exact
alignment; only the wrap row-gap is set here. */
.dupe-band-grid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: max-content;
row-gap: 8px;
}
.dupe-band-grid .photo-card {
align-self: start;
}
/* --- Near-duplicate group stacks (Duplicates tab) --- */
.photo-grid.dupe-groups-mode {
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
/* Size rows to each card's content. Without this, the grid's auto rows
collapse (the card uses overflow:hidden, so the grid lets the row shrink),
squashing the stack to a sliver after a project reopen. */
grid-auto-rows: max-content;
}
.dupe-empty {
grid-column: 1 / -1;
align-self: start;
padding: 48px 24px;
text-align: center;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.dupe-group {
display: flex;
flex-direction: column;
background: var(--panel);
color: var(--text);
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.dupe-group:hover {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.dupe-stack {
position: relative;
height: 168px;
/* Never let the flex column shrink the stack: its children are all
absolutely positioned, so it contributes ~0 intrinsic height and would
otherwise collapse to a sliver inside a height-constrained card. */
flex: 0 0 168px;
margin: 16px 16px 8px;
}
.dupe-stack .dupe-layer,
.dupe-stack .dupe-top {
position: absolute;
inset: 0;
border-radius: 8px;
background-color: var(--img-well);
background-size: cover;
background-position: center;
border: 2px solid var(--img-well);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.dupe-stack .dupe-layer.l1 { transform: translate(11px, 9px) rotate(2.5deg); filter: brightness(0.68); }
.dupe-stack .dupe-layer.l2 { transform: translate(-9px, 6px) rotate(-3deg); filter: brightness(0.58); }
.dupe-stack .dupe-layer.l3 { transform: translate(5px, 14px) rotate(1.4deg); filter: brightness(0.5); }
.dupe-stack .dupe-top { z-index: 5; }
.dupe-stack .group-star,
.photo-card .group-star {
position: absolute;
top: 8px;
left: 8px;
z-index: 6;
min-width: 26px;
height: 26px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
border-radius: 13px;
background: var(--accent);
color: var(--on-accent);
font-size: 15px;
font-weight: 900;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.group-star b {
font-size: 12px;
}
.dupe-count {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 6;
padding: 4px 9px;
border-radius: 8px;
background: rgba(10, 13, 16, 0.82);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #f6f1e7;
font-size: 11px;
font-weight: 900;
}
.dupe-group-meta {
padding: 6px 16px 2px;
min-width: 0;
}
.dupe-group-meta strong {
display: block;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dupe-group-meta span {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--muted);
}
.dupe-compare {
margin: 8px 16px 16px;
}
/* "+N similar" chip on the keeper's normal grid card */
.similar-chip {
position: absolute;
bottom: 7px;
left: 7px;
z-index: 6;
padding: 2.5px 6px;
border-radius: 5px;
background: rgba(10, 13, 16, 0.62);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
color: #ece7dc;
font-size: 9px;
font-weight: 700;
cursor: pointer;
}
.similar-chip:hover {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.subject-badge {
position: absolute;
top: 7px;
right: 36px;
z-index: 7;
padding: 2px 6px;
border-radius: 5px;
background: rgba(255, 214, 107, 0.9);
border: 1px solid rgba(255, 255, 255, 0.24);
color: var(--on-accent);
font-size: 9px;
font-weight: 800;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
/* --- Side-by-side comparison overlay --- */
.compare-overlay {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
flex-direction: column;
background: rgba(7, 9, 12, 0.97);
backdrop-filter: blur(4px);
}
.compare-toolbar {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 22px;
border-bottom: 1px solid var(--line);
flex: 0 0 auto;
}
.compare-title {
font-size: 16px;
font-weight: 800;
color: var(--text);
}
.compare-hint {
flex: 1;
font-size: 12px;
color: var(--muted);
}
/* Key/control legend across the top of the compare view. */
.compare-legend {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
font-size: 12px;
color: var(--muted);
}
.compare-key {
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.compare-legend kbd {
font: inherit;
font-weight: 700;
color: var(--text);
background: var(--panel);
border: 1px solid var(--line);
border-radius: 5px;
padding: 1px 6px;
min-width: 14px;
text-align: center;
}
.compare-zoom-controls {
display: flex;
align-items: center;
gap: 6px;
}
.compare-zoom-btn {
min-width: 30px;
font-size: 16px;
font-weight: 800;
line-height: 1;
padding: 6px 8px;
}
.compare-zoom-level {
min-width: 42px;
text-align: center;
font-size: 12px;
font-weight: 700;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.compare-stage {
flex: 1;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
display: flex;
gap: 16px;
padding: 20px;
align-items: stretch;
}
.compare-item {
margin: 0;
flex: 1 1 0;
min-width: 280px;
max-width: 660px;
display: flex;
flex-direction: column;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
}
.compare-item.is-keeper {
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.compare-img-wrap {
position: relative;
flex: 1;
min-height: 0;
background: var(--img-well);
display: grid;
place-items: center;
overflow: hidden;
cursor: zoom-in;
}
.compare-img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
will-change: transform;
-webkit-user-drag: none;
user-select: none;
}
/* When zoomed, the whole stage is in pan mode: grab to drag every frame. */
.compare-stage.is-zoomed .compare-img-wrap { cursor: grab; }
.compare-stage.is-panning .compare-img-wrap { cursor: grabbing; }
.compare-stage.is-panning img { user-select: none; }
.compare-best-tag {
position: absolute;
top: 10px;
left: 10px;
padding: 5px 10px;
border-radius: 8px;
background: var(--accent);
color: var(--on-accent);
font-size: 12px;
font-weight: 900;
}
.compare-faces {
position: absolute;
bottom: 8px;
left: 8px;
display: flex;
gap: 6px;
}
.cmp-face {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.cmp-face-img {
width: 48px;
height: 48px;
border-radius: 6px;
background-color: var(--img-well);
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.cmp-face em {
font-style: normal;
font-size: 10px;
font-weight: 800;
padding: 1px 4px;
border-radius: 4px;
background: rgba(10, 13, 16, 0.82);
color: var(--text-2);
}
.cmp-face em.strong { color: var(--accent); }
.cmp-face em.okay { color: var(--blue); }
.cmp-face em.weak { color: var(--danger); }
.compare-item figcaption {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 9px;
}
.compare-item figcaption strong {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compare-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.compare-stats .cs {
padding: 3px 7px;
border-radius: 7px;
background: var(--raised);
border: 1px solid var(--line-2);
color: var(--text-2);
font-size: 11px;
font-weight: 800;
}
.compare-stats .cs.strong { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.compare-stats .cs.okay { color: var(--on-accent); background: var(--blue); border-color: var(--blue); }
.compare-stats .cs.weak { color: var(--on-accent); background: var(--danger); border-color: var(--danger); }
.compare-star.active {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
/* Keeper card that hides stacked near-duplicate alternates behind it */
.photo-card.stacked {
box-shadow:
4px 5px 0 -1px var(--surface), 4px 5px 0 0 var(--line),
9px 10px 0 -1px var(--surface), 9px 10px 0 0 var(--raised);
}
.photo-card.stacked.selected {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent),
4px 5px 0 -1px var(--surface), 4px 5px 0 0 var(--line),
9px 10px 0 -1px var(--surface), 9px 10px 0 0 var(--raised);
}
/* Inline-expanded group: keeper + its members get a linking accent edge */
.photo-card.group-keeper {
border-color: var(--accent);
}
.photo-card.group-member {
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.photo-card .similar-chip {
bottom: 9px;
left: 9px;
}
/* Set export progress overlay */
.export-overlay {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(7, 9, 12, 0.78);
backdrop-filter: blur(4px);
}
.export-dialog {
width: min(440px, 90vw);
display: flex;
flex-direction: column;
gap: 14px;
padding: 24px;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--panel, var(--surface));
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.export-dialog strong {
font-size: 16px;
font-weight: 800;
color: var(--text);
}
.export-bar {
height: 10px;
overflow: hidden;
border-radius: 999px;
background: var(--img-well);
}
.export-bar span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent), var(--blue));
transition: width 0.18s ease;
}
.export-detail {
font-size: 13px;
color: var(--muted, var(--muted));
min-height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.export-actions {
display: flex;
justify-content: flex-end;
}
.export-modal-head {
display: flex;
align-items: center;
gap: 12px;
}
.export-spinner {
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.18);
border-top-color: var(--accent);
animation: bg-spin 0.8s linear infinite;
}
.export-spinner.done {
border-color: var(--accent);
animation: none;
position: relative;
}
.export-spinner.done::after {
content: "";
position: absolute;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ===== Advanced Alignment Tool (Lightroom-style) ===== */
.develop-alignment {
border-top: 1px solid var(--line);
padding-top: 12px;
margin-top: 12px;
}
.develop-alignment .develop-tool-row {
margin-bottom: 6px;
}
.develop-alignment .alignment-grid-toggle {
margin: 8px 0;
}
.develop-alignment .checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
cursor: pointer;
user-select: none;
}
.develop-alignment .checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.develop-alignment .develop-slider-val {
font-size: 11px;
color: var(--accent);
font-weight: 600;
min-width: 40px;
text-align: right;
}
.develop-alignment input[type="range"] {
width: 100%;
margin: 4px 0 10px 0;
accent-color: var(--accent);
cursor: pointer;
}
.develop-alignment .hint {
margin-top: 8px;
font-size: 11px;
line-height: 1.4;
}
/* Alignment overlay canvas on the editor */
#alignmentOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
/* Grid overlay styles */
.grid-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 11;
}
.grid-overlay .grid-line-h {
position: absolute;
left: 0;
right: 0;
height: 1px;
background: rgba(255, 255, 255, 0.25);
}
.grid-overlay .grid-line-v {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(255, 255, 255, 0.25);
}
.grid-overlay .grid-level-arc {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
}
.grid-overlay .grid-level-dot {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 6px rgba(101, 212, 177, 0.6);
}
.grid-overlay .grid-level-line {
position: absolute;
left: 50%;
top: 50%;
width: 120px;
height: 1px;
background: var(--accent);
transform-origin: left center;
}
/* Transform preview indicator */
.transform-indicator {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: var(--accent);
padding: 4px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
pointer-events: none;
z-index: 12;
white-space: nowrap;
}
/* Alignment overlay canvas */
.alignment-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
display: none;
}
.alignment-overlay.visible {
display: block;
}
/* --- Setup Wizard --- */
.setup-wizard-overlay {
z-index: 9200;
background: rgba(8, 11, 15, 0.85);
backdrop-filter: blur(8px);
}
.setup-wizard {
width: 560px;
max-width: calc(100vw - 48px);
max-height: calc(100vh - 64px);
overflow-y: auto;
padding: 40px 36px 32px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(101, 212, 177, 0.08);
animation: setupFadeIn 0.35s ease-out;
}
@keyframes setupFadeIn {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.setup-wizard-header {
text-align: center;
margin-bottom: 28px;
}
.setup-wizard-logo {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.setup-wizard-header h2 {
margin: 0 0 6px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.3px;
}
.setup-wizard-subtitle {
margin: 0;
font-size: 13px;
color: var(--muted);
}
.setup-wizard-checks {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 24px;
border-radius: 10px;
overflow: hidden;
}
.setup-check-placeholder {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 32px 16px;
background: var(--panel-2);
border-radius: 10px;
color: var(--muted);
font-size: 13px;
}
.setup-spinner {
width: 18px;
height: 18px;
border: 2px solid var(--line);
border-top-color: var(--accent);
border-radius: 50%;
animation: setupSpin 0.7s linear infinite;
}
@keyframes setupSpin {
to { transform: rotate(360deg); }
}
/* Eye-fix (burst fusion) progress overlay — rendering the keeper + donor frames and fusing
takes a few seconds, so show a clear centered spinner so the user knows it's working. */
.fusion-loader-overlay {
position: fixed; inset: 0; z-index: 9999;
display: grid; place-items: center;
background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px);
}
.fusion-loader-overlay[hidden] { display: none; }
.fusion-loader-card {
display: flex; align-items: center; gap: 14px;
padding: 18px 24px; border-radius: 14px;
background: var(--panel); border: 1px solid var(--line-strong, var(--line));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
color: var(--text); font-size: 14px; font-weight: 600;
}
.fusion-loader-card .setup-spinner { width: 22px; height: 22px; border-width: 3px; }
/* Donor-picker pop-up: a grid of every shot with the blinking person (Develop > Fix Eyes). */
.donor-picker-card { width: min(880px, 92vw); max-height: 86vh; display: flex; flex-direction: column; }
.donor-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.donor-picker-head h3 { margin: 0; }
.donor-picker-close {
border: none; background: transparent; color: var(--muted, var(--text));
font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.donor-picker-close:hover { background: var(--panel-2); color: var(--text); }
.donor-picker-sub { margin: 4px 0 14px; color: var(--muted, var(--text)); font-size: 13px; }
.donor-picker-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px; overflow-y: auto; padding: 2px;
}
.donor-card {
display: flex; flex-direction: column; gap: 0; padding: 0; text-align: left;
border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
cursor: pointer; overflow: hidden; transition: border-color 0.12s, transform 0.12s;
}
.donor-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.donor-thumb {
position: relative; display: block; width: 100%; aspect-ratio: 3 / 2;
background: var(--panel); overflow: hidden;
}
.donor-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.donor-eyes {
position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px;
font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, 0.6); color: #fff;
}
.donor-eyes.open { background: rgba(28, 140, 70, 0.85); }
.donor-eyes.closed { background: rgba(150, 60, 60, 0.8); }
.donor-name {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 6px 8px 8px; font-size: 12px; color: var(--text);
}
.donor-tag {
padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700;
background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}
.donor-picker-more { margin: -10px 0 12px; font-size: 12px; opacity: 0.8; }
.donor-empty { color: var(--muted, var(--text)); font-size: 13px; padding: 20px 4px; }
/* LightVision eye mark on the eye-fix controls (replaces the old 👁 emoji). */
.eye-ico { display: inline-flex; align-items: center; vertical-align: -0.18em; margin-right: 5px; }
.eye-ico-svg { width: 1.1em; height: 1.1em; }
/* Expression face-picker: thumbnails to pick which face(s) the Expression sliders retarget. */
.expr-face-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.expr-face {
position: relative; padding: 0; line-height: 0; cursor: pointer; overflow: hidden;
border: 2px solid var(--line); border-radius: 10px; background: var(--panel-2);
transition: border-color 0.12s, transform 0.12s;
}
.expr-face:hover { transform: translateY(-1px); }
.expr-face.selected { border-color: var(--accent); }
.expr-face-thumb { display: block; width: 54px; height: 54px; background: var(--panel) center/cover no-repeat; }
.expr-face-num {
position: absolute; left: 4px; top: 4px; min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; background: rgba(0, 0, 0, 0.6); color: #fff;
font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.expr-face.selected .expr-face-num { background: var(--accent); color: #06231a; }
.setup-check-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
background: var(--panel-2);
transition: background 0.15s;
}
.setup-check-item:hover {
background: color-mix(in srgb, var(--panel-2) 85%, white);
}
.setup-check-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.setup-check-item.pass .setup-check-icon {
background: color-mix(in srgb, var(--accent) 18%, transparent);
color: var(--accent);
}
.setup-check-item.fail .setup-check-icon {
background: color-mix(in srgb, var(--danger) 18%, transparent);
color: var(--danger);
}
.setup-check-item.warn .setup-check-icon {
background: color-mix(in srgb, var(--accent-2) 18%, transparent);
color: var(--accent-2);
}
.setup-check-item.skip .setup-check-icon {
background: color-mix(in srgb, var(--muted) 15%, transparent);
color: var(--muted);
}
.setup-check-body strong {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 2px;
}
.setup-check-body p {
margin: 0;
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
.setup-wizard-footer {
text-align: center;
}
.setup-wizard-note {
margin: 0 0 14px;
font-size: 12px;
color: var(--muted);
min-height: 16px;
}
.setup-wizard-actions {
display: flex;
justify-content: center;
gap: 10px;
}
.setup-wizard-actions .tool-btn {
min-width: 120px;
padding: 9px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
}
/* ---------------------------------------------------------------------------
Fullscreen Cull mode
--------------------------------------------------------------------------- */
.cull-start-btn {
font-weight: 700;
}
.cull-overlay {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
flex-direction: column;
background: rgba(5, 7, 10, 0.985);
backdrop-filter: blur(6px);
user-select: none;
}
.cull-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 22px;
flex: 0 0 auto;
}
.cull-context {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--muted);
}
.cull-view-label {
font-weight: 800;
color: var(--text);
}
.cull-position {
font-variant-numeric: tabular-nums;
}
.cull-rating-dots {
display: flex;
gap: 4px;
font-size: 18px;
}
.cull-dot {
color: color-mix(in srgb, var(--text) 22%, transparent);
transition: color 0.12s ease, transform 0.12s ease;
}
.cull-dot.on {
color: #ffcf4a;
transform: scale(1.05);
}
.cull-top-actions {
display: flex;
gap: 8px;
}
.cull-btn {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--raised);
color: var(--text);
font-size: 16px;
cursor: pointer;
display: grid;
place-items: center;
}
.cull-btn:hover {
border-color: var(--accent);
}
.cull-stage {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 8px 64px;
position: relative;
}
.cull-stage img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: 6px;
-webkit-user-drag: none;
transition: opacity 0.12s ease;
}
.cull-stage img.cull-loading {
opacity: 0.6;
}
/* Detected-face close-ups in the cull stage's black side gutters. Offset past
the nav arrows (which sit at the very edges) so they never overlap, vertically
centered, and scrollable when a frame has many faces. */
/* Positioned against the overlay (cull-overlay is position:fixed), centered over
the full height. Offset past the 48px nav arrows (at 8px) so they never clash.
The panel itself is click-through; only the cards capture clicks. The JS caps
the face count per side so it never needs to scroll, keeping it clip-proof. */
.cull-faces {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
box-sizing: border-box;
width: 150px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
pointer-events: none;
}
.cull-faces-left { left: 64px; align-items: flex-start; }
.cull-faces-right { right: 64px; align-items: flex-end; }
.cull-face {
box-sizing: border-box;
width: 100%;
background: rgba(20, 24, 30, 0.72);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
pointer-events: auto; /* panel is click-through; cards are clickable */
transition: border-color 0.12s ease, transform 0.12s ease;
}
.cull-face:hover { border-color: var(--accent); transform: translateY(-1px); }
.cull-face.is-zoomed { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cull-face-img {
width: 100%;
aspect-ratio: 1 / 1;
background: #0c0f13 center / cover no-repeat;
}
.cull-face-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 5px 8px;
font-size: 11px;
}
/* Label may truncate, but the eyes-open value must never be clipped. */
.cull-face-meta span {
color: var(--muted);
font-weight: 700;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cull-face-meta .eyes {
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
white-space: nowrap;
font-style: normal;
font-variant-numeric: tabular-nums;
}
.cull-face-meta .eyes svg { display: block; }
.cull-face-meta .eyes.strong { color: #8be4a6; }
.cull-face-meta .eyes.okay { color: #ffd778; }
.cull-face-meta .eyes.weak { color: #ff9d9d; }
.cull-face-meta .eyes.neutral { color: var(--text); }
.cull-name {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: var(--muted);
background: rgba(0, 0, 0, 0.45);
padding: 3px 10px;
border-radius: 20px;
pointer-events: none;
}
.cull-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 48px;
height: 96px;
border: none;
background: transparent;
color: var(--text);
font-size: 44px;
line-height: 1;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.12s ease;
}
.cull-nav:hover {
opacity: 1;
}
.cull-nav:disabled {
opacity: 0.12;
cursor: default;
}
.cull-nav-prev { left: 8px; }
.cull-nav-next { right: 8px; }
.cull-bottombar {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 22px 22px;
}
.cull-rating-bar {
display: flex;
gap: 8px;
}
.cull-rate-btn {
min-width: 46px;
height: 46px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--raised);
color: var(--text);
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.cull-rate-btn:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.cull-rate-btn.active {
background: #ffcf4a;
border-color: #ffcf4a;
color: #1a1407;
}
.cull-rate-clear {
min-width: 64px;
font-size: 13px;
color: var(--muted);
}
.cull-hint {
font-size: 12px;
color: var(--muted);
}
.cull-hint b {
color: var(--text);
}
/* First-run controls dialog */
.cull-help {
position: absolute;
inset: 0;
z-index: 5;
display: grid;
place-items: center;
background: rgba(5, 7, 10, 0.6);
backdrop-filter: blur(2px);
}
.cull-help-card {
width: min(440px, 90vw);
background: var(--surface, #14181f);
border: 1px solid var(--line);
border-radius: 16px;
padding: 26px 28px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.cull-help-card h2 {
margin: 0 0 8px;
font-size: 22px;
}
.cull-help-card p {
margin: 0 0 14px;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
.cull-help-keys {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.cull-help-keys li {
display: flex;
align-items: center;
gap: 14px;
font-size: 14px;
color: var(--text);
}
.cull-keys {
display: flex;
gap: 4px;
flex: 0 0 130px;
}
.cull-help-keys kbd {
display: inline-grid;
place-items: center;
min-width: 26px;
height: 26px;
padding: 0 6px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--raised);
font-size: 12px;
font-weight: 700;
}
.cull-help-note {
font-size: 13px !important;
}
.cull-help-dont {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted);
margin-bottom: 18px;
cursor: pointer;
}
.cull-help-card .primary {
width: 100%;
}
/* --- Cull mode: world-class HUD / verdict / burst / reticle / toast ------- */
/* Thin progress bar pinned to the very top of the overlay. */
.cull-progress {
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: rgba(255, 255, 255, 0.06); z-index: 4;
}
.cull-progress-fill {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, var(--accent), var(--blue, #6aa9ff));
transition: width 0.25s ease;
}
.cull-remaining { color: var(--muted); font-variant-numeric: tabular-nums; }
.cull-queue-filter {
height: 34px; padding: 0 10px; border-radius: 8px;
border: 1px solid var(--line); background: var(--raised); color: var(--text);
font-size: 13px; cursor: pointer;
}
.cull-btn.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--raised)); }
/* Eyes / Sharpness HUD — top-left of the stage. */
.cull-hud {
position: absolute; top: 14px; left: 18px; z-index: 3;
display: flex; gap: 8px; pointer-events: none;
}
.cull-hud-chip {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 10px; font-size: 12px;
background: rgba(10, 13, 16, 0.74); border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
}
.cull-hud-chip b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cull-hud-chip i { font-style: normal; color: var(--muted); font-size: 11px; }
.cull-hud-chip svg { display: block; }
.cull-hud-chip.strong { color: #8be4a6; }
.cull-hud-chip.okay { color: #ffd778; }
.cull-hud-chip.weak { color: #ff9d9d; }
.cull-hud-chip.neutral { color: var(--text); }
/* Big unmissable blink banner. */
.cull-blink {
position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
padding: 7px 16px; border-radius: 10px; font-weight: 900; letter-spacing: 0.08em;
color: #fff; background: rgba(214, 64, 64, 0.92); border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 30px rgba(214, 64, 64, 0.4); animation: cullBlinkPulse 1s ease-in-out infinite;
pointer-events: none;
}
@keyframes cullBlinkPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* Auto "best of burst" verdict — top-right of the stage. */
.cull-verdict {
position: absolute; top: 14px; right: 18px; z-index: 3; max-width: 320px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 12px; border-radius: 12px; font-size: 12px;
background: rgba(10, 13, 16, 0.78); border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
}
.cull-verdict.is-lead { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.cull-verdict-tag { font-weight: 800; color: #ffcf4a; }
.cull-verdict.is-alt .cull-verdict-tag { color: var(--muted); }
.cull-verdict-why { color: var(--text); }
.cull-verdict-why b { color: var(--accent); }
.cull-verdict-meter { flex: 1 1 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.cull-verdict-meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #8be4a6); }
.cull-fix-eyes {
flex: 1 1 100%; margin-top: 2px; padding: 6px 10px; border-radius: 9px; cursor: pointer;
font-size: 12px; font-weight: 700; color: #0a0d10; border: none;
background: linear-gradient(90deg, #ffcf4a, #8be4a6);
}
.cull-fix-eyes:hover { filter: brightness(1.06); }
.cull-fix-eyes:disabled { opacity: 0.6; cursor: default; }
/* Non-ready states read as a softer hint, not the bright primary action. */
.cull-fix-eyes.state-no-prints,
.cull-fix-eyes.state-no-donor,
.cull-fix-eyes.state-no-engine {
background: rgba(255, 255, 255, 0.10);
color: var(--text);
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Best-Take "fix blink" button inside the Compare grid (one per frame). */
.compare-fix-eyes {
display: block; width: 100%; margin-top: 6px; padding: 6px 8px; border-radius: 8px;
cursor: pointer; font-size: 11px; font-weight: 700; color: #0a0d10; border: none;
background: linear-gradient(90deg, #ffcf4a, #8be4a6);
}
.compare-fix-eyes:hover { filter: brightness(1.06); }
.compare-fix-eyes.state-no-prints,
.compare-fix-eyes.state-no-donor,
.compare-fix-eyes.state-no-engine {
background: rgba(255, 255, 255, 0.10);
color: var(--text);
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Donor-pick mode: every frame becomes a clickable donor target. */
.compare-item.is-donor-pick { cursor: pointer; }
.compare-item.is-donor-pick .compare-img-wrap { outline: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
.compare-item.is-donor-pick:hover .compare-img-wrap { outline-color: var(--accent); }
.compare-donor-hint {
position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 8px; border-radius: 7px;
font-size: 11px; font-weight: 700; color: #0a0d10; background: var(--accent);
}
/* "Eyes fixed" badge + undo button — a baked fusion is visible and reversible. */
.compare-fixed-tag {
position: absolute; right: 8px; top: 8px; z-index: 2; padding: 3px 8px; border-radius: 7px;
font-size: 11px; font-weight: 700; color: #0a0d10; background: #8be4a6;
}
.cull-fix-eyes.state-fixed,
.compare-fix-eyes.state-fixed {
background: rgba(139, 228, 178, 0.16);
color: var(--text);
border: 1px solid color-mix(in srgb, #8be4a6 55%, transparent);
}
/* Focus-peaking reticle over the zoomed face. */
.cull-reticle {
position: absolute; z-index: 2; border: 2px solid var(--accent); border-radius: 8px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.cull-reticle.peak-strong { border-color: #57e08c; box-shadow: 0 0 14px rgba(87, 224, 140, 0.6); }
.cull-reticle.peak-okay { border-color: #ffd166; }
.cull-reticle.peak-weak { border-color: #ff6b6b; box-shadow: 0 0 14px rgba(255, 107, 107, 0.5); }
.cull-reticle.peak-neutral { border-color: rgba(255, 255, 255, 0.6); }
/* Inline burst filmstrip (eyes across the burst). */
.cull-burst {
flex: 0 0 auto; display: flex; gap: 8px; justify-content: center; align-items: center;
padding: 8px 12px; overflow-x: auto;
}
.cull-burst-cell {
position: relative; width: 78px; height: 78px; flex: 0 0 auto;
border-radius: 8px; border: 2px solid transparent; background: var(--raised);
padding: 0; cursor: pointer; overflow: hidden;
}
.cull-burst-cell.cur { border-color: var(--accent); }
.cull-burst-cell.keeper { box-shadow: inset 0 0 0 2px #ffcf4a; }
.cull-burst-thumb { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.cull-burst-star { position: absolute; top: 3px; left: 4px; color: #ffcf4a; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.cull-burst-eye {
position: absolute; bottom: 3px; right: 4px; display: flex; align-items: center; gap: 2px;
font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 6px;
background: rgba(10, 13, 16, 0.8);
}
.cull-burst-eye.strong { color: #8be4a6; } .cull-burst-eye.okay { color: #ffd778; } .cull-burst-eye.weak { color: #ff9d9d; }
.cull-burst-eye svg { display: block; }
/* Decision toast with one-tap undo. */
.cull-toast {
position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 6;
display: flex; align-items: center; gap: 12px;
padding: 8px 10px 8px 16px; border-radius: 12px; font-size: 13px; color: var(--text);
background: rgba(18, 22, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.cull-toast-undo {
border: 1px solid var(--accent); background: transparent; color: var(--accent);
border-radius: 8px; padding: 4px 12px; font-weight: 700; cursor: pointer;
}
.cull-toast-undo:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
/* Pick / reject action buttons in the rating bar. */
.cull-rate-btn.cull-act-pick { color: #ffcf4a; font-weight: 800; }
.cull-rate-btn.cull-act-pick.active { background: #ffcf4a; color: #2a2300; border-color: #ffcf4a; }
.cull-rate-btn.cull-act-reject { color: #ff8a8a; }
.cull-rate-btn.cull-act-reject.active { background: var(--danger); color: #fff; border-color: var(--danger); }
.cull-rate-btn.cull-rate-clear { font-size: 12px; color: var(--muted); }
/* Rating collection folders */
.folder-section + .folder-section {
margin-top: 20px;
}
.folder-section-head {
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted) 85%, transparent);
margin: 0 0 11px 2px;
}
/* AI Selection: the shoot-aware area at the top of Collections. */
.folder-subhead {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.085em;
text-transform: uppercase;
color: color-mix(in srgb, var(--muted) 72%, transparent);
margin: 15px 0 8px 2px;
}
.folder-subhead:first-of-type {
margin-top: 4px;
}
.folder-section.ai-selection .folder-section-head {
color: #ffcf4a;
}
.folder-tile.ai-moment-tile {
display: grid;
place-items: center;
font-size: 34px;
color: #ffcf4a;
background: var(--raised);
}
.folder-card.system {
border-color: color-mix(in srgb, #d5b767 34%, var(--line));
}
.folder-card.system .folder-info strong {
color: #e8c864;
letter-spacing: 0.035em;
}
.folder-tile.project-tile {
display: grid;
place-items: center;
font-size: 40px;
background: var(--raised);
}
.folder-card.library-project .folder-info strong {
color: var(--text);
}
/* Star rating badge on grid cards */
.rating-badge {
position: absolute;
bottom: 7px;
left: 7px;
padding: 1.5px 6px;
border-radius: 20px;
background: rgba(0, 0, 0, 0.5);
color: #ffcf4a;
font-size: 10px;
letter-spacing: 0.5px;
line-height: 1;
pointer-events: none;
}
/* ---------------------------------------------------------------------------
Nav search (relocated from the Collection header)
--------------------------------------------------------------------------- */
/* Semantic search — part of the nav bar, opening OUTWARD to the right.
At rest only the magnifier button shows at the right end of the bar; on
hover/focus the field slides open to the RIGHT, into the empty toolbar space
beside the bar — so it never covers the tabs and the bar never moves (the
field is absolutely positioned, so it adds no width to the bar). The
magnifier sits at the field's left like a standard search icon. */
.nav-search {
display: flex;
align-items: center;
flex: 0 0 auto;
margin-left: 4px; /* small gap between the last tab and the search button */
}
.nav-search input {
position: absolute;
top: 5px;
bottom: 5px;
left: calc(100% + 7px); /* start just past the bar's right edge */
width: 0;
opacity: 0;
pointer-events: none;
margin: 0; /* kill the global input margin-bottom that made the field ride high */
padding: 0;
border-radius: 11px;
border: 1px solid color-mix(in srgb, var(--line-2) 55%, transparent);
background: color-mix(in srgb, var(--surface-2) 90%, transparent);
-webkit-backdrop-filter: saturate(160%) blur(20px);
backdrop-filter: saturate(160%) blur(20px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18);
color: var(--text);
font-size: 13px;
line-height: normal;
overflow: hidden;
transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
padding 0.2s ease, opacity 0.18s ease;
}
.nav-search:hover input,
.nav-search:focus-within input {
width: 250px;
/* Stop the field at the window's right edge if space is tight (50% = half the
bar's own width, since the bar is centred). */
max-width: calc(50vw - 50% - 20px);
padding: 0 14px;
opacity: 1;
pointer-events: auto;
}
.nav-search input:focus {
outline: none;
border-color: var(--accent);
}
.nav-search input::placeholder {
color: var(--muted);
}
.nav-search .collection-run {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
height: 30px;
min-width: 30px;
padding: 0 9px;
border-radius: 10px;
border: none;
background: var(--accent);
color: var(--on-accent);
font-size: 15px;
line-height: 1;
cursor: pointer;
}
/* In-flight search: keep the glyph, just pulse it (the old code swapped in a
"Searching…" text label that no longer fits the compact button). */
.nav-search .collection-run.searching {
animation: navSearchPulse 0.9s ease-in-out infinite;
}
@keyframes navSearchPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.search-options-btn {
height: 32px;
min-width: 32px;
padding: 0 8px;
}
.search-options-pop {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 40;
width: 320px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--surface, #14181f);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
gap: 10px;
}
.search-options-pop .collection-mode {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 12.5px;
color: var(--muted);
cursor: pointer;
}
.search-options-note {
margin: 0 0 2px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
font-size: 12px;
line-height: 1.45;
color: var(--muted);
}
/* ---------------------------------------------------------------------------
Gallery (cross-project file explorer)
--------------------------------------------------------------------------- */
.gallery-view {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.gallery-crumb {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-bottom: 1px solid var(--line);
}
.gallery-crumb .collection-crumb-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 10px;
}
.gallery-hint {
font-size: 12px;
color: var(--muted);
}
.client-gallery-studio {
margin: 16px;
padding: 30px 32px 28px;
border: 1px solid var(--line);
border-radius: 14px;
background:
radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 55%),
linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 60%, var(--panel)) 0%, var(--panel) 60%);
}
.client-gallery-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding-bottom: 24px;
border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.client-gallery-head .eyebrow {
display: block;
margin-bottom: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--accent);
}
.client-gallery-head h3 {
margin: 0;
max-width: 18ch;
font-family: var(--display-serif);
font-weight: 400;
font-size: 34px;
line-height: 1.12;
letter-spacing: 0.005em;
color: var(--text);
}
.client-gallery-head p {
max-width: 56ch;
margin: 12px 0 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.6;
}
.client-gallery-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
padding-top: 6px;
}
.client-workflow {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 26px;
}
.client-workflow div {
display: grid;
grid-template-columns: 34px 1fr;
gap: 13px;
align-items: center;
min-height: 64px;
padding: 15px 16px;
border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--surface) 70%, transparent);
transition: border-color 0.18s ease, transform 0.18s ease;
}
.client-workflow div:hover {
border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
transform: translateY(-1px);
}
.client-workflow strong {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
font-family: var(--display-serif);
font-weight: 400;
font-size: 16px;
}
.client-workflow span {
color: var(--text-2);
font-size: 12.5px;
line-height: 1.45;
}
.client-cloud-settings {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 16px;
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.client-cloud-settings label {
display: grid;
gap: 8px;
min-width: min(430px, 100%);
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.client-cloud-settings input,
.client-cloud-settings select,
.client-gallery-controls select {
height: 40px;
border: 1px solid var(--line);
border-radius: 9px;
background: var(--field);
color: var(--text);
padding: 0 13px;
font-size: 13px;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
letter-spacing: normal;
text-transform: none;
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.client-cloud-settings input:focus,
.client-cloud-settings select:focus,
.client-gallery-controls select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.client-cloud-settings span {
margin-bottom: 9px;
color: var(--muted);
font-size: 12px;
}
.client-connect-row {
display: flex;
align-items: center;
gap: 12px;
height: 40px;
}
.client-connect-status {
font-size: 12px;
letter-spacing: normal;
text-transform: none;
font-weight: 400;
color: var(--muted);
}
.client-connect-status.ok {
color: var(--accent);
font-weight: 600;
}
.client-platform-advanced {
margin-top: 16px;
}
.client-platform-advanced > summary {
cursor: pointer;
width: max-content;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.client-platform-advanced > summary:hover {
color: var(--text-2);
}
.client-platform-advanced .client-cloud-settings {
margin-top: 14px;
padding-top: 14px;
}
.client-deploy-note {
margin: 18px 0 0;
padding: 14px 16px;
border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--surface) 55%, transparent);
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
.client-deploy-note code {
padding: 1px 6px;
border-radius: 5px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--text-2);
font-size: 11px;
}
.client-gallery-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 16px;
margin-top: 22px;
}
.client-gallery-empty {
margin-top: 22px;
padding: 40px 20px;
border: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
border-radius: 12px;
color: var(--muted);
text-align: center;
font-family: var(--display-serif);
font-size: 16px;
letter-spacing: 0.01em;
}
.client-gallery-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface-2);
box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.7);
transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.client-gallery-card:hover {
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
transform: translateY(-2px);
box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.78);
}
.client-preview {
--cg-bg: #fff;
--cg-ink: #222;
--cg-soft: #f2f2f2;
--cg-accent: #333;
padding: 14px;
background: var(--cg-bg);
color: var(--cg-ink);
}
.client-preview.device-mobile {
max-width: 245px;
margin: 0 auto;
padding: 10px;
border-radius: 18px;
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}
.client-preview.tone-charcoal,
.client-preview.tone-ink,
.client-preview.tone-dark {
--cg-bg: #191919;
--cg-ink: #f7f4ed;
--cg-soft: #252525;
--cg-accent: #515151;
}
.client-preview.tone-sage,
.client-preview.tone-olive {
--cg-bg: #f5f5f2;
--cg-ink: #2f3028;
--cg-soft: #e8e8e4;
--cg-accent: #9fa282;
}
.client-preview.tone-rose {
--cg-bg: #fbf6f5;
--cg-ink: #342929;
--cg-soft: #f2eceb;
--cg-accent: #aa817f;
}
.client-preview.tone-linen,
.client-preview.tone-sand {
--cg-bg: #f4efeb;
--cg-ink: #332d28;
--cg-soft: #e7e1de;
--cg-accent: #a79587;
}
.client-preview.tone-gallery-white,
.client-preview.tone-light {
--cg-bg: #fff;
--cg-ink: #222;
--cg-soft: #f2f2f2;
--cg-accent: #333;
}
.client-preview.tone-champagne,
.client-preview.tone-gold {
--cg-bg: #fffefb;
--cg-ink: #322b20;
--cg-soft: #faf4ec;
--cg-accent: #ab9368;
}
.client-preview.tone-terracotta {
--cg-bg: #fbf5f2;
--cg-ink: #35271f;
--cg-soft: #eee5df;
--cg-accent: #a97a5f;
}
.client-preview.tone-agave {
--cg-bg: #f4f6f4;
--cg-ink: #26322e;
--cg-soft: #e8ece9;
--cg-accent: #8aa69b;
}
.client-preview.tone-sea {
--cg-bg: #fbfbfc;
--cg-ink: #272933;
--cg-soft: #e3e4e7;
--cg-accent: #9698a6;
}
.client-preview-hero {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 8;
border-radius: 4px;
background: var(--cg-soft);
}
.client-preview.device-mobile .client-preview-hero {
aspect-ratio: 4 / 5;
border-radius: 12px 12px 4px 4px;
}
.client-preview-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ════════════════════════════════════════════════════════════════
CLIENT-GALLERY COVER STYLES — in-app live preview
Ten distinct, gallery-grade cover compositions. The stored keys
are unchanged; the styles read as: Atelier (center) · Masthead
(left) · Overture (novel) · Archive (vintage) · Passe-Partout
(frame) · Banderole (stripe) · Diptych (divider) · Cinemascope
(journal) · Portfolio (split) · Salon (panorama).
════════════════════════════════════════════════════════════════ */
.client-preview-hero {
--cg-serif: Georgia, "Times New Roman", serif;
}
/* ── Atelier (center): pristine bright photo, centred serif title
floating over a soft vignette with a hairline above ── */
.client-preview.cover-center .client-preview-hero img { filter: brightness(0.95) saturate(1.02); }
.client-preview.cover-center .client-preview-hero::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(115% 75% at 50% 50%, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 60%);
}
.client-preview.cover-center .client-preview-title { inset: 0; transform: none; justify-content: center; z-index: 2; }
.client-preview.cover-center .client-preview-title strong {
font-family: var(--cg-serif); font-weight: 400; font-size: 21px;
letter-spacing: 0.02em; text-transform: capitalize; text-shadow: 0 1px 16px rgba(0,0,0,0.45);
}
.client-preview.cover-center .client-preview-title span {
order: -2; margin: 0 0 8px; font-size: 8.5px; letter-spacing: 0.3em; opacity: 0.95;
text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.client-preview.cover-center .client-preview-title::before {
content: ""; order: -1; width: 34px; height: 1px; background: rgba(255,255,255,0.85); margin-bottom: 9px;
}
/* ── Masthead (left): bright photo, directional corner scrim,
caps title flush bottom-left behind a short accent rule ── */
.client-preview.cover-left .client-preview-hero img { filter: brightness(0.98); }
.client-preview.cover-left .client-preview-hero::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(102deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 46%, rgba(0,0,0,0) 64%);
}
.client-preview.cover-left .client-preview-title {
inset: auto auto 16px 22px; transform: none; align-items: flex-start; text-align: left;
padding-left: 12px; border-left: 2px solid var(--cg-accent); z-index: 2;
}
.client-preview.cover-left .client-preview-title strong { font-weight: 700; font-size: 18px; letter-spacing: 0.03em; }
.client-preview.cover-left .client-preview-title span { order: -1; margin: 0 0 6px; letter-spacing: 0.26em; font-size: 8px; }
/* ── Overture (novel): even dark wash, large centred serif title,
date set between two short hairlines like a frontispiece ── */
.client-preview.cover-novel .client-preview-hero { background: var(--cg-soft); }
.client-preview.cover-novel .client-preview-hero img { filter: brightness(0.56) saturate(0.92); }
.client-preview.cover-novel .client-preview-title { inset: 0; transform: none; justify-content: center; }
.client-preview.cover-novel .client-preview-title strong {
font-family: var(--cg-serif); font-weight: 400; font-size: 27px; letter-spacing: 0.01em; text-transform: capitalize;
}
.client-preview.cover-novel .client-preview-title span {
order: -1; margin: 0 0 11px; font-size: 8px; letter-spacing: 0.34em; opacity: 0.95;
display: inline-flex; align-items: center; gap: 9px;
}
.client-preview.cover-novel .client-preview-title span::before,
.client-preview.cover-novel .client-preview-title span::after {
content: ""; width: 22px; height: 1px; background: rgba(255,255,255,0.6);
}
/* ── Archive (vintage): warm light film tone, fine inner keyline,
serif title with an em-dash flanked date ── */
.client-preview.cover-vintage .client-preview-hero img { filter: sepia(0.24) contrast(0.96) brightness(0.8) saturate(0.84); }
.client-preview.cover-vintage .client-preview-hero::after {
content: ""; position: absolute; inset: 9px; border: 1px solid rgba(247,240,228,0.72); z-index: 1; pointer-events: none;
}
.client-preview.cover-vintage .client-preview-title { inset: auto 0 17px; transform: none; justify-content: flex-end; z-index: 2; }
.client-preview.cover-vintage .client-preview-title strong {
font-family: var(--cg-serif); font-weight: 400; font-size: 20px; letter-spacing: 0.04em; text-transform: capitalize;
}
.client-preview.cover-vintage .client-preview-title span { margin-top: 7px; font-size: 7.5px; letter-spacing: 0.22em; opacity: 0.92; }
.client-preview.cover-vintage .client-preview-title span::before { content: "—\00a0\00a0"; }
.client-preview.cover-vintage .client-preview-title span::after { content: "\00a0\00a0—"; }
/* ── Passe-Partout (frame): a fine keyline floating inside the
photo, title centred, date pinned to the bottom inner edge ── */
.client-preview.cover-frame .client-preview-hero img { filter: brightness(0.64); }
.client-preview.cover-frame .client-preview-hero::after {
content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,0.82); z-index: 1; pointer-events: none;
}
.client-preview.cover-frame .client-preview-title { inset: 0; transform: none; justify-content: center; }
.client-preview.cover-frame .client-preview-title strong { font-weight: 500; font-size: 15px; letter-spacing: 0.22em; }
.client-preview.cover-frame .client-preview-title span {
position: absolute; bottom: 21px; left: 0; right: 0; margin: 0; font-size: 7px; letter-spacing: 0.3em; opacity: 0.9;
}
/* ── Banderole (stripe): a solid ink ribbon across the lower photo
carrying a reversed, heavily tracked caps title ── */
.client-preview.cover-stripe .client-preview-hero img { filter: brightness(0.92); }
.client-preview.cover-stripe .client-preview-title {
inset: auto 0 0; transform: none; justify-content: center; align-items: center;
padding: 10px 14px; background: var(--cg-ink); color: var(--cg-bg);
}
.client-preview.cover-stripe .client-preview-title strong { font-weight: 600; font-size: 13px; letter-spacing: 0.3em; }
.client-preview.cover-stripe .client-preview-title span { display: none; }
/* ── Diptych (divider): a true 50/50 split — photo on the left, a
solid paper panel on the right with a centred serif title ── */
.client-preview.cover-divider .client-preview-hero { background: var(--cg-soft); }
.client-preview.cover-divider .client-preview-hero img { width: 50%; height: 100%; filter: brightness(0.97); }
.client-preview.cover-divider .client-preview-title {
inset: 0 0 0 50%; transform: none; justify-content: center; background: var(--cg-soft); color: var(--cg-ink);
border-left: 1px solid color-mix(in srgb, var(--cg-ink) 14%, transparent);
}
.client-preview.cover-divider .client-preview-title strong {
font-family: var(--cg-serif); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; text-transform: capitalize;
}
.client-preview.cover-divider .client-preview-title::before {
content: ""; order: -1; width: 26px; height: 1px; background: var(--cg-accent); margin-bottom: 9px;
}
.client-preview.cover-divider .client-preview-title span { margin-top: 8px; font-size: 7.5px; letter-spacing: 0.22em; opacity: 0.7; }
/* ── Cinemascope (journal): an ultra-wide letterbox with near-black
bars top & bottom, airy title-card type set on the bars ── */
.client-preview.cover-journal .client-preview-hero { background: #0c0c0c; }
.client-preview.cover-journal .client-preview-hero img {
position: absolute; top: 50%; left: 0; transform: translateY(-50%); height: 64%; filter: brightness(0.84);
}
.client-preview.cover-journal .client-preview-title { inset: 0; transform: none; justify-content: space-between; padding: 8px 0; }
.client-preview.cover-journal .client-preview-title strong { font-weight: 400; font-size: 12px; letter-spacing: 0.42em; padding-left: 0.42em; }
.client-preview.cover-journal .client-preview-title span { order: -1; margin: 0; font-size: 7px; letter-spacing: 0.42em; padding-left: 0.42em; opacity: 0.85; }
/* ── Portfolio (split): a portrait photo as the minority beside a
dominant paper column of top-aligned stacked serif type ── */
.client-preview.cover-split .client-preview-hero { background: var(--cg-bg); }
.client-preview.cover-split .client-preview-hero img { width: 42%; height: 100%; filter: brightness(0.98); }
.client-preview.cover-split .client-preview-title {
inset: 0 14px 0 46%; transform: none; align-items: flex-start; justify-content: flex-start;
text-align: left; padding-top: 16px; color: var(--cg-ink); background: var(--cg-bg);
}
.client-preview.cover-split .client-preview-title strong {
order: 0; font-family: var(--cg-serif); font-weight: 400; font-size: 18px; line-height: 1.14; letter-spacing: 0.01em; text-transform: capitalize;
}
.client-preview.cover-split .client-preview-title::after {
content: ""; order: 1; width: 30px; height: 1px; background: var(--cg-accent); margin: 10px 0;
}
.client-preview.cover-split .client-preview-title span { order: 2; margin: 0; font-size: 7.5px; letter-spacing: 0.24em; opacity: 0.7; }
/* ── Salon (panorama): a floated exhibition plate with even margins,
a 1px keyline + the faintest cast shadow, and a credit line ── */
.client-preview.cover-panorama .client-preview-hero {
background: var(--cg-bg); padding: 11px 13px;
}
.client-preview.cover-panorama .client-preview-hero img {
height: calc(100% - 26px); border: 1px solid color-mix(in srgb, var(--cg-ink) 12%, transparent);
box-shadow: 0 8px 22px rgba(0,0,0,0.13);
}
.client-preview.cover-panorama .client-preview-title {
inset: auto 0 7px; transform: none; flex-direction: row; gap: 8px; align-items: baseline; justify-content: center;
color: var(--cg-ink); text-transform: none;
}
.client-preview.cover-panorama .client-preview-title strong {
font-family: var(--cg-serif); font-weight: 400; font-size: 12px; letter-spacing: 0.04em; text-transform: capitalize;
}
.client-preview.cover-panorama .client-preview-title span { margin: 0; font-size: 7.5px; letter-spacing: 0.2em; opacity: 0.6; text-transform: uppercase; }
.client-preview.cover-panorama .client-preview-title span::before { content: "·\00a0\00a0"; }
/* ── Mobile (4/5 preview) fallbacks for the structural splits ── */
.client-preview.device-mobile.cover-journal .client-preview-hero img { height: 50%; }
.client-preview.device-mobile.cover-divider .client-preview-hero img,
.client-preview.device-mobile.cover-split .client-preview-hero img { width: 100%; }
.client-preview.device-mobile.cover-divider .client-preview-title,
.client-preview.device-mobile.cover-split .client-preview-title {
inset: auto 0 0; padding: 26px 16px 16px; background: linear-gradient(0deg, rgba(0,0,0,0.66), rgba(0,0,0,0));
color: #fff; align-items: center; text-align: center; border: 0;
}
.client-preview.device-mobile.cover-divider .client-preview-title strong,
.client-preview.device-mobile.cover-split .client-preview-title strong { color: #fff; }
.client-preview.device-mobile.cover-split .client-preview-title { padding-top: 26px; }
.client-preview.device-mobile.cover-split .client-preview-title::after { margin: 8px auto; }
.client-preview.device-mobile.cover-panorama .client-preview-hero img { height: calc(100% - 24px); }
.client-preview-title {
position: absolute;
inset: 50% 22px auto;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.client-preview-title strong {
font-size: 22px;
font-weight: 500;
letter-spacing: 0.02em;
}
.client-preview.device-mobile .client-preview-title strong {
font-size: 16px;
}
.client-preview.type-classic .client-preview-title strong,
.client-preview.type-serif .client-preview-title strong,
.client-preview.type-timeless .client-preview-title strong {
font-family: var(--display-serif);
font-weight: 400;
font-size: 25px;
letter-spacing: 0.04em;
text-transform: none;
}
.client-preview.type-modern .client-preview-title strong {
font-weight: 500;
}
.client-preview.type-minimal .client-preview-title strong,
.client-preview.type-subtle .client-preview-title strong {
font-size: 15px;
font-weight: 600;
letter-spacing: 0.08em;
}
.client-preview.type-bold .client-preview-title strong {
font-size: 22px;
font-weight: 900;
}
.client-preview-title span {
margin-top: 5px;
font-size: 10px;
opacity: 0.85;
}
.client-preview-grid {
display: block;
column-count: 5;
column-gap: 6px;
margin-top: 8px;
}
.client-preview.device-mobile .client-preview-grid {
column-count: 2;
column-gap: 4px;
}
.client-preview.grid-vertical .client-preview-grid {
column-count: 4;
}
.client-preview.grid-horizontal .client-preview-grid {
column-count: 5;
}
.client-preview.thumb-large.grid-vertical .client-preview-grid {
column-count: 3;
}
.client-preview.thumb-large.grid-horizontal .client-preview-grid {
column-count: 4;
}
.client-preview.spacing-large .client-preview-grid {
column-gap: 16px;
}
.client-preview-tile {
position: relative;
overflow: hidden;
display: block;
break-inside: avoid;
margin: 0 0 6px;
background: var(--cg-soft);
}
.client-preview-tile img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.client-preview.spacing-large .client-preview-tile {
margin-bottom: 16px;
}
.client-preview.ordering .client-preview-tile {
cursor: grab;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
.client-preview.ordering .client-preview-tile:active {
cursor: grabbing;
}
/* The lifted source tile: dim, shrink a touch and float above the grid. The live +
drop FLIP applies its own inline transform, which overrides this scale while the
tile travels — exactly what we want. A short transition on transform/opacity gives
the lift/settle a polished feel. */
.client-preview.ordering .client-preview-tile.dragging {
opacity: 0.4;
transform: scale(0.96);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), inset 0 0 0 2px var(--accent);
z-index: 3;
transition: opacity 140ms ease, transform 140ms ease;
}
/* Reduced motion: no lift scaling, instant settle. flipClientPreview also early-
returns under this query so neighbors snap rather than glide. */
@media (prefers-reduced-motion: reduce) {
.client-preview.ordering .client-preview-tile.dragging {
transition: none;
transform: none;
}
}
/* Legacy edge-glow insertion indicators are no longer toggled during the drag —
tiles physically move now (the moved tile IS the indicator) — but the classes are
kept harmlessly inert in case any code path still sets them. */
.client-preview.ordering .client-preview-tile.drop-before {
box-shadow: inset 4px 0 0 var(--accent), -4px 0 12px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}
.client-preview.ordering .client-preview-tile.drop-after {
box-shadow: inset -4px 0 0 var(--accent), 4px 0 12px -3px color-mix(in srgb, var(--accent) 70%, transparent);
}
.client-preview-tile em {
position: absolute;
left: 5px;
top: 5px;
min-width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(0, 0, 0, 0.72);
color: #fff;
font-size: 10px;
font-style: normal;
font-weight: 800;
}
.client-preview-tile.t2,
.client-preview-tile.t4 {
grid-row: auto;
}
.client-preview.grid-vertical .client-preview-tile,
.client-preview.grid-horizontal .client-preview-tile {
grid-column: span 1;
grid-row: auto;
}
.client-gallery-body {
padding: 16px 16px 14px;
}
.client-gallery-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.client-gallery-title-row > div:first-child {
flex: 1;
min-width: 0;
}
.client-gallery-title-row strong,
.client-gallery-title-row span {
display: block;
}
.client-gallery-title-row strong {
font-family: var(--display-serif);
font-size: 19px;
font-weight: 500;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.client-gallery-title-row span {
margin-top: 4px;
color: var(--muted);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.client-gallery-controls {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 10px;
margin-top: 16px;
}
.client-gallery-controls label {
display: grid;
gap: 6px;
color: var(--muted);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.client-gallery-actions-row {
display: flex;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.client-gallery-actions-row .tool-btn {
flex: 1;
}
.client-gallery-share {
margin-top: 12px;
padding: 9px 11px;
border-radius: 8px;
background: var(--surface);
color: var(--muted);
font-size: 12px;
letter-spacing: 0.01em;
overflow-wrap: anywhere;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.cg-pass-badge {
flex: none;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.cg-pass-badge.cg-pass-on {
color: #2f9e6b;
background: rgba(47, 158, 107, 0.14);
}
.cg-pass-badge.cg-pass-off {
color: var(--muted);
background: rgba(180, 140, 60, 0.14);
}
/* Visual shop builder (photographer side) */
.shop-builder {
margin-top: 14px;
padding: 14px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border, rgba(255,255,255,0.08));
}
.shop-builder-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
}
.shop-discount {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin: 12px 0 4px;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--accent, #c9a36b) 32%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--accent, #c9a36b) 9%, transparent);
}
.shop-disc-field {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--muted, #aaa);
}
.shop-disc-field input {
background: var(--panel, #1a1a1a);
border: 1px solid var(--line, rgba(255,255,255,0.14));
border-radius: 6px;
color: var(--fg, #eee);
padding: 5px 8px;
font: inherit;
font-size: 12px;
}
.shop-disc-field input[type="number"] { width: 56px; }
.shop-disc-label { flex: 1 1 220px; }
.shop-disc-label input { flex: 1; min-width: 160px; }
.shop-disc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; flex-basis: 100%; margin-top: 2px; }
.shop-disc-presetgroup { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #999); }
.chip-btn {
font: inherit; font-size: 12px; line-height: 1;
padding: 5px 11px; border-radius: 999px; cursor: pointer;
color: var(--fg, #eee); background: var(--panel, #1c1c1c);
border: 1px solid var(--line, rgba(255,255,255,0.16));
transition: background 0.12s, border-color 0.12s;
}
.chip-btn:hover { background: color-mix(in srgb, var(--accent, #c9a36b) 22%, var(--panel, #1c1c1c)); border-color: var(--accent, #c9a36b); }
.shop-disc-email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex-basis: 100%; margin-top: 2px; }
.shop-disc-status { font-size: 12px; color: var(--muted, #999); flex: 1 1 240px; min-width: 200px; }
.shop-builder-toggle,
.shop-builder-markup {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--muted);
}
.shop-builder-markup input {
width: 64px;
padding: 5px 7px;
border-radius: 6px;
border: 1px solid var(--border, rgba(255,255,255,0.14));
background: var(--bg, #1b1b1b);
color: inherit;
}
.shop-builder-count {
margin-left: auto;
font-size: 12px;
color: var(--muted);
}
.shop-builder-hint {
margin: 10px 0 12px;
font-size: 12px;
color: var(--muted);
}
.shop-builder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.shop-build-item {
border: 1px solid var(--border, rgba(255,255,255,0.10));
border-radius: 9px;
overflow: hidden;
cursor: pointer;
background: var(--bg, #1b1b1b);
transition: border-color 0.16s, transform 0.16s;
}
.shop-build-item:hover { transform: translateY(-2px); border-color: var(--accent, #7c6cff); }
.shop-build-item.included { border-color: var(--accent, #7c6cff); box-shadow: 0 0 0 1px var(--accent, #7c6cff) inset; }
.shop-build-mock {
position: relative;
width: 100%;
aspect-ratio: 1;
background: #efece6;
}
.shop-build-check {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 14px;
font-weight: 700;
color: #fff;
background: rgba(0,0,0,0.45);
}
.shop-build-item.included .shop-build-check { background: var(--accent, #7c6cff); }
.shop-build-meta {
padding: 9px 10px 11px;
display: flex;
flex-direction: column;
gap: 3px;
}
.shop-build-meta strong { font-size: 12.5px; }
.shop-build-size { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.shop-build-blurb { font-size: 10.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.shop-build-price {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 5px;
}
.shop-build-cost { font-size: 10.5px; color: var(--muted); }
.shop-build-priceinput {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 12px;
font-weight: 600;
}
.shop-build-priceinput input {
width: 62px;
padding: 4px 6px;
border-radius: 6px;
border: 1px solid var(--border, rgba(255,255,255,0.14));
background: var(--surface);
color: inherit;
font: inherit;
}
.shop-build-priceinput input:disabled { opacity: 0.4; }
.client-fullscreen {
position: fixed;
inset: 0;
z-index: 3000;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: #f5f5f5;
color: #222;
}
/* ── Inline full-width Client Gallery builder (replaces the pop-up overlay) ──── */
.cg-gallery-rail {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
margin-bottom: 16px; flex-wrap: wrap;
}
.cg-rail-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 auto; }
.cg-rail-left .eyebrow { white-space: nowrap; }
.cg-rail-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; min-width: 0; }
.cg-rail-chip {
display: flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px;
border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 999px;
background: rgba(255,255,255,0.03); color: var(--text, #e8e8e8); cursor: pointer; white-space: nowrap; flex: none;
transition: border-color 0.15s, background 0.15s;
}
.cg-rail-chip:hover { border-color: var(--accent, #c9a36b); }
.cg-rail-chip.is-active { border-color: var(--accent, #c9a36b); background: color-mix(in srgb, var(--accent, #c9a36b) 18%, transparent); }
.cg-chip-thumb { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: rgba(127,127,127,0.2); flex: none; }
.cg-chip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cg-chip-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.cg-chip-meta strong { font-size: 0.86rem; }
.cg-chip-meta span { font-size: 0.7rem; color: var(--muted, #9aa0a6); }
.cg-rail-empty { color: var(--muted, #9aa0a6); font-size: 0.86rem; }
/* "+" new-gallery affordance: a dashed chip beside the gallery chips that opens
* a small source menu (Picks / Collection / Folder). Lives OUTSIDE the scrolling
* .cg-rail-chips so its dropdown isn't clipped by that container's overflow. */
.cg-add { position: relative; flex: none; }
.cg-add-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px 7px 11px;
border: 1px dashed color-mix(in srgb, var(--accent, #c9a36b) 55%, var(--border, rgba(255,255,255,0.18)));
border-radius: 999px;
background: color-mix(in srgb, var(--accent, #c9a36b) 8%, transparent);
color: var(--text, #e8e8e8); cursor: pointer; white-space: nowrap;
font-size: 0.84rem; font-weight: 600;
transition: border-color 0.15s, background 0.15s;
}
.cg-add-chip:hover { border-color: var(--accent, #c9a36b); background: color-mix(in srgb, var(--accent, #c9a36b) 16%, transparent); }
.cg-add-plus { font-size: 1.05rem; line-height: 1; }
.cg-add-menu {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
min-width: 248px;
display: flex; flex-direction: column; gap: 2px;
padding: 8px;
border: 1px solid var(--border, rgba(255,255,255,0.14));
border-radius: 12px;
background: var(--panel-2, #1c1f24);
box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.cg-add-head {
padding: 4px 8px 6px; font-size: 0.68rem; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--muted, #9aa0a6);
}
.cg-add-opt {
display: flex; flex-direction: column; gap: 1px; text-align: left;
padding: 8px 10px; border: 0; border-radius: 8px;
background: transparent; color: var(--text, #e8e8e8); cursor: pointer;
}
.cg-add-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--accent, #c9a36b) 16%, transparent); }
.cg-add-opt strong { font-size: 0.86rem; font-weight: 600; }
.cg-add-opt span { font-size: 0.72rem; color: var(--muted, #9aa0a6); }
.cg-add-opt:disabled { opacity: 0.45; cursor: not-allowed; }
/* Visual saved-collection picker (New gallery → Collection). */
.cg-pick-modal { width: min(680px, 92vw); max-width: 680px; }
.cg-pick-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px; margin: 6px 0 4px;
max-height: 56vh; overflow-y: auto; padding: 2px;
}
.cg-pick-card {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--border, rgba(255,255,255,0.14));
border-radius: 12px; overflow: hidden;
background: rgba(255,255,255,0.03); color: var(--text, #e8e8e8);
cursor: pointer; text-align: left;
transition: border-color 0.15s, transform 0.1s;
}
.cg-pick-card:hover { border-color: var(--accent, #c9a36b); transform: translateY(-1px); }
.cg-pick-thumb {
display: block; aspect-ratio: 4 / 3; background: rgba(127,127,127,0.18);
}
.cg-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-pick-meta { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px 11px; }
.cg-pick-meta strong { font-size: 0.88rem; font-weight: 600; line-height: 1.2; }
.cg-pick-meta span { font-size: 0.72rem; color: var(--muted, #9aa0a6); }
/* The overlay chrome, neutralized to flow in the page as a light builder card. */
/* ===== Two-pane gallery builder: options sidebar (left) + preview (right) ===== */
.client-fullscreen.cg-inline {
position: static; inset: auto; z-index: auto;
display: grid; grid-template-columns: 360px minmax(0, 1fr); align-items: stretch;
height: clamp(620px, 78vh, 940px);
border-radius: 16px; overflow: hidden;
border: 1px solid #e6e6e6;
box-shadow: 0 24px 60px rgba(0,0,0,0.22); margin: 0 0 14px;
background: #fff;
}
/* ---- Left options sidebar ---- */
.cg-sidebar {
position: relative; min-width: 0; min-height: 0;
display: flex; flex-direction: column;
background: #fff; border-right: 1px solid #ececec;
}
/* Brand prism hairline along the very top of the sidebar. */
.cg-sidebar::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
background: linear-gradient(100deg, #ff9a5c 0%, #ff6f91 42%, #a06bff 100%);
}
.cg-sidebar-id { padding: 16px 20px 13px; border-bottom: 1px solid #f0f0f0; }
.cg-sidebar-id strong { display: block; font-size: 15px; color: #111; line-height: 1.25; }
.cg-sidebar-id span {
display: block; margin-top: 3px; font-size: 12px; color: #8a8a8a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cg-sidebar-tabs {
position: sticky; top: 0; z-index: 3; background: #fff;
display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #ececec;
}
.cg-side-tab {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
height: 60px; padding: 0 4px; border: 0; background: transparent;
color: #8a8a8a; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.cg-side-tab-ic { display: grid; place-items: center; }
.cg-side-tab-ic svg { width: 19px; height: 19px; }
.cg-side-tab:hover { color: #444; background: #fafafa; }
.cg-side-tab.active { color: #111; }
.cg-side-tab.active::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px;
background: linear-gradient(100deg, #ff9a5c 0%, #ff6f91 42%, #a06bff 100%);
}
.cg-sidebar-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.cg-sidebar-actions {
display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
border-top: 1px solid #ececec; background: #fff;
}
.cg-sidebar-actions .cg-act { flex: 1; min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.cg-sidebar-actions .cg-act.accent { flex-basis: 100%; }
/* ---- Design pills (was the vertical pixie nav) ---- */
.cg-design-pills {
position: sticky; top: 0; z-index: 2; display: flex; gap: 6px;
padding: 14px 16px 6px; background: #fff;
}
.cg-design-pills button {
flex: 1; height: 34px; padding: 0 6px; border: 1px solid #e6e6e6; border-radius: 999px;
background: #fff; color: #666; font-size: 13px; font-weight: 600; cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cg-design-pills button:hover { color: #222; border-color: #d6d6d6; }
.cg-design-pills button.active {
color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, #e6e6e6);
background: color-mix(in srgb, var(--accent) 10%, #fff);
}
/* ---- Generic sidebar sections (Sharing / Sell / Advanced) ---- */
.cg-rail-section { padding: 16px 20px; border-bottom: 1px solid #f2f2f2; }
.cg-rail-section:last-child { border-bottom: 0; }
.cg-rail-head { margin-bottom: 12px; }
.cg-rail-head strong,
.cg-rail-eyebrow {
font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #9b9b9b;
}
.cg-rail-eyebrow { display: block; margin-bottom: 5px; }
.cg-rail-hint { margin-top: 10px; font-size: 12px; line-height: 1.5; color: #8c8c8c; }
.cg-rail-hint strong { color: #555; font-weight: 700; }
.cg-share-row { margin-bottom: 12px; }
.cg-share-url {
display: block; font-size: 12px; color: #333; background: #f6f6f7; border: 1px solid #ededed;
border-radius: 8px; padding: 8px 10px; word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cg-share-url.muted { color: #9b9b9b; font-family: inherit; }
.cg-access-badge {
display: block; font-size: 12.5px; font-weight: 600; line-height: 1.4;
padding: 9px 12px; border-radius: 9px; border: 1px solid;
}
.cg-access-badge.ok { color: #1f7a4d; background: #edf7f1; border-color: #cde9da; }
.cg-access-badge.warn { color: #9a6a16; background: #fdf6ea; border-color: #f0e2c4; }
/* Gallery password control (lives in Sharing, under the access badge) */
.cg-pass-field { display: block; margin-top: 12px; }
.cg-pass-row { display: flex; gap: 8px; margin-top: 6px; }
.cg-pass-input {
flex: 1; min-width: 0; height: 38px; padding: 0 10px;
border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #222; font-size: 13px;
}
.cg-pass-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cg-pass-gen {
flex: none; height: 38px; padding: 0 14px; border-radius: 8px; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--accent) 35%, #fff);
background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent);
font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
}
.cg-pass-gen:hover { background: color-mix(in srgb, var(--accent) 18%, #fff); border-color: var(--accent); }
/* Click-to-copy share link + "send to client" button (Sharing panel) */
.cg-share-url.is-copyable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.cg-share-url.is-copyable:hover { border-color: color-mix(in srgb, var(--accent) 50%, #ededed); background: color-mix(in srgb, var(--accent) 6%, #f6f6f7); }
.cg-share-send {
display: block; width: 100%; margin-top: 14px; height: 40px; border-radius: 9px; cursor: pointer;
border: 1px solid var(--accent); background: var(--accent); color: #fff;
font-size: 13px; font-weight: 700; transition: filter 0.15s;
}
.cg-share-send:hover { filter: brightness(1.05); }
/* iOS-style toggle rows */
.cg-toggle-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; cursor: pointer; border-top: 1px solid #f2f2f2; }
.cg-toggle-row:first-of-type { border-top: 0; padding-top: 2px; }
.cg-toggle-text { flex: 1; min-width: 0; }
.cg-toggle-label { display: block; font-size: 14px; font-weight: 600; color: #2a2a2a; }
.cg-toggle-hint { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: #9a9a9a; }
.cg-switch { flex: none; position: relative; width: 44px; height: 26px; margin-top: 1px; }
.cg-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cg-switch-track { position: absolute; inset: 0; border-radius: 999px; background: #d6d6da; transition: background 0.18s; }
.cg-switch-track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.18s;
}
.cg-switch input:checked + .cg-switch-track { background: var(--accent); }
.cg-switch input:checked + .cg-switch-track::after { transform: translateX(18px); }
.cg-switch input:focus-visible + .cg-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Sell trigger cards */
.cg-sell-card {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
padding: 14px; margin-bottom: 10px; border: 1px solid #e6e6e6; border-radius: 12px;
background: #fff; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cg-sell-card:hover { border-color: #d2d2d2; box-shadow: 0 3px 12px rgba(0,0,0,0.07); }
.cg-sell-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); }
.cg-sell-ic {
flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent);
}
.cg-sell-ic svg { width: 22px; height: 22px; }
.cg-sell-meta { flex: 1; min-width: 0; }
.cg-sell-meta strong { display: block; font-size: 14.5px; color: #1f1f1f; }
.cg-sell-meta span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #8c8c8c; }
.cg-sell-go { flex: none; font-size: 12px; font-weight: 700; color: var(--accent); }
/* Advanced sidebar fields — scoped to .cg-sidebar so they never leak into the
overlay's card .cg-field (which is a different flex/child-combinator component). */
.cg-sidebar .cg-field { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 600; color: #555; }
.cg-field-hint { font-weight: 400; color: #9b9b9b; }
.cg-sidebar .cg-field input, .cg-sidebar .cg-field select {
display: block; width: 100%; margin-top: 6px; height: 38px; padding: 0 10px;
border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #222; font-size: 13px; font-weight: 400;
}
.cg-sidebar .cg-field input:focus, .cg-sidebar .cg-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cg-rail-section .client-connect-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; height: auto; margin-top: 6px; }
.cg-rail-section .client-connect-status { font-size: 12px; color: #9a6a16; }
.cg-rail-section .client-connect-status.ok { color: #1f7a4d; }
/* ---- Design panel overrides: it now lives in a 360px rail, not a 700px column ---- */
.cg-sidebar .client-options-panel { display: block; width: 100%; padding: 0; border: 0; background: transparent; overflow: visible; }
.cg-sidebar .client-options-title { display: none; }
.cg-sidebar .client-option-section { padding: 8px 16px 18px; }
.cg-sidebar .client-option-section-head strong { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #9b9b9b; }
.cg-sidebar .client-option-section-head span { font-size: 12px; }
.cg-sidebar .client-option-grid { gap: 16px 12px; }
.cg-sidebar .client-option-thumb { height: 116px; }
.cg-sidebar .client-grid-setting { padding-bottom: 20px; }
.cg-sidebar .client-option-card > span:last-child { font-size: 13px; }
.cg-sidebar .client-grid-setting .client-option-card > span:last-child { font-size: 13px; }
.cg-sidebar .cover-brand-input { width: 100%; }
.cg-sidebar .cover-photo-strip { gap: 6px; }
/* Compact icon-style layout-option graphics (Pixieset-style dark glyphs). The card
is short with the glyph centered — no wasted whitespace. */
.cg-sidebar .client-grid-setting .client-option-thumb.cg-sch-thumb {
height: 78px; display: grid; place-items: center; padding: 0; background: #fff;
border: 1px solid #ececec; box-shadow: none;
}
.cg-ico { --d: #2f3033; display: flex; }
.cg-ico i { display: block; background: var(--d); border-radius: 1.5px; }
.client-option-card:hover .cg-ico { --d: #1d1e20; }
.client-option-card.active .cg-ico { --d: var(--accent); }
/* grid style — vertical favours a tall (portrait) tile; horizontal a wide one */
.cg-ico-v { gap: 4px; }
.cg-ico-v .tall { width: 15px; height: 34px; }
.cg-ico-v .col { display: flex; flex-direction: column; gap: 4px; }
.cg-ico-v .col i { width: 15px; height: 15px; }
.cg-ico-h { flex-direction: column; gap: 4px; }
.cg-ico-h .wide { width: 34px; height: 15px; }
.cg-ico-h .row { display: flex; gap: 4px; }
.cg-ico-h .row i { width: 15px; height: 15px; }
/* thumbnail size + spacing */
.cg-ico-grid { display: grid; }
.cg-ico-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.cg-ico-grid.g2 { grid-template-columns: repeat(2, 1fr); }
.cg-ico-grid.g3 i { width: 9px; height: 9px; }
.cg-ico-grid.g2 i { width: 15px; height: 15px; }
.cg-ico-grid:not(.wide-gap) { gap: 4px; }
.cg-ico-grid.wide-gap { gap: 8px; }
/* navigation — empty box vs box with "A" (matches what it does to the gallery nav) */
.cg-ico-nav { width: 30px; height: 26px; border: 2px solid var(--d); border-radius: 4px; display: grid; place-items: center; }
.cg-ico-nav b { font: 800 14px ui-sans-serif, system-ui, sans-serif; color: var(--d); }
.cg-sidebar .cover-focal-picker { max-width: 100%; }
/* ---- Right preview pane ---- */
/* Right pane = a static device toolbar ABOVE the preview (no longer floating over
it, so it can't cover the top of the gallery) + the stage filling the rest. */
.cg-preview-pane {
position: relative; min-width: 0; min-height: 0;
display: flex; flex-direction: column; background: #f4f4f5;
}
.client-fullscreen.cg-inline .client-fullscreen-stage {
flex: 1; min-height: 0; position: relative; background: #f4f4f5;
}
.cg-preview-toolbar {
flex: none; z-index: 6;
display: flex; align-items: center; justify-content: center; gap: 4px;
padding: 8px 10px; background: #fff; border-bottom: 1px solid #ececec;
}
.cg-preview-toolbar .wpv-devices { display: flex; gap: 2px; }
.cg-toolbar-sep { width: 1px; height: 20px; background: #e2e2e2; margin: 0 3px; }
/* Full-cover overlay hosting the shop / selling panels over the preview. */
.cg-main-overlay { position: absolute; inset: 0; z-index: 9; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
/* The shop & selling panels are theme-token based; the builder is a LIGHT surface
regardless of the app theme, so remap the neutral tokens to light values inside
the overlay. Without this, the dark-theme near-white text/fields render invisible
on the white overlay. (Accent is left alone — it reads fine on either.) */
.cg-main-overlay {
color-scheme: light;
--bg: #ffffff; --panel: #ffffff; --panel-2: #f2f3f5;
--line: #e4e6ec; --line-2: #d3d8e0; --border: #e4e6ec;
--text: #1d242c; --text-2: #313b44; --muted: #6b7681;
--field: #ffffff; --surface: #ffffff; --surface-2: #f6f7f9; --raised: #eef0f3;
--stage: #f2f3f5; --img-well: #e9ebef; --track: #dde1e7; --bar: #aab3bd;
color: #222;
}
.cg-main-overlay-head {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 20px; border-bottom: 1px solid #ececec; background: #fff;
}
.cg-main-overlay-head strong { font-size: 16px; color: #1f1f1f; }
.cg-main-overlay-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }
/* ===== Shop & Selling "setting card" design system (inside the overlay) ===== */
/* Centered calm column; neutralise the legacy wrapper chrome so all weight is on cards. */
.cg-cards { max-width: 720px; margin: 0 auto; background: none; border: 0; padding: 0; }
.cg-main-overlay .shop-builder,
.cg-main-overlay .selling-panel { margin: 0 auto; padding: 0; border: 0; background: none; }
.cg-card {
background: #fff; border: 1px solid #ececec; border-radius: 12px;
padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.cg-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cg-card-titles { min-width: 0; }
.cg-card-title { display: block; font-size: 15px; font-weight: 700; color: #1f1f1f; line-height: 1.3; }
.cg-card-why { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #8c8c8c; }
.cg-card-headright { flex: none; display: flex; align-items: center; gap: 12px; }
.cg-card-status { font-size: 11.5px; color: #9b9b9b; white-space: nowrap; }
.cg-card-foot { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: #9a9a9a; }
.cg-card-foot strong { color: #555; font-weight: 700; }
.cg-card-body { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
/* A master cg-switch in a card header collapses the whole body when off. */
.cg-card:has(> .cg-card-head .cg-switch input:not(:checked)) > .cg-card-body { display: none; }
/* Warm tint for the timed-sale card. */
.cg-card--sale { border-color: color-mix(in srgb, var(--accent) 30%, #ececec); background: color-mix(in srgb, var(--accent) 4%, #fff); }
/* Nested reveal: a toggle-row whose fields appear only when it is on. */
.cg-reveal { display: block; }
.cg-reveal + .cg-reveal, .cg-reveal + .cg-toggle-row { border-top: 1px solid #f2f2f2; margin-top: 12px; padding-top: 12px; }
.cg-reveal-body { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.cg-reveal:has(> .cg-toggle-row .cg-switch input:not(:checked)) > .cg-reveal-body { display: none; }
/* Labelled field + number + money chrome. */
.cg-field, .cg-num-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #6b6b6b; }
.cg-num-field { display: inline-flex; }
.cg-field > input, .cg-field > select {
width: 100%; box-sizing: border-box; height: 38px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #111; font: inherit; padding: 0 11px;
}
.cg-grow { flex: 1; }
.cg-num { width: 92px; height: 38px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; color: #111; font: inherit; padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; }
.cg-field > input:focus, .cg-field > select:focus, .cg-num:focus {
outline: 0; border-color: color-mix(in srgb, var(--accent) 55%, #e0e0e0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.cg-money { display: inline-flex; align-items: center; height: 38px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; padding-left: 10px; width: 124px; }
.cg-money:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, #e0e0e0); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.cg-money-sym { color: #9b9b9b; font-size: 13px; pointer-events: none; user-select: none; }
.cg-money-sym:empty { display: none; }
.cg-money input { border: 0; outline: 0; background: transparent; font: inherit; color: #111; width: 100%; padding: 0 10px 0 4px; text-align: right; font-variant-numeric: tabular-nums; }
.cg-field-money { gap: 5px; }
/* Field rows. */
.cg-row2, .cg-row3 { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cg-row2 > *, .cg-row3 > * { flex: 1 1 0; min-width: 120px; }
.cg-store-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cg-fullbtn { width: 100%; }
.cg-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.cg-sub-head strong { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #9b9b9b; }
/* Segmented selector skinning a real