:root {
  --bg: #121417;
  --panel: #1b1e23;
  --line: #2b3038;
  --text: #e6e8eb;
  --muted: #8b939e;
  --heading: #b3bac4; /* section titles: lighter than subsection titles */
  --accent: #c8cdd5; /* light grey that sits with the dark toolbar */
  --accent-text: #15171b;
  --key-selected: #4da3ff; /* selected keyframes: clear blue, not yellow */
  --live: #4b98e5; /* the playhead, auto key and a keyframe at the playhead */
  --slider-track: 2px;
  --slider-thumb-w: 12px;
  --slider-thumb-h: 6px;
  --slider-height: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Scrollbars in the app's greys: a slim thumb on the panel color. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: #3a414b; }
::-webkit-scrollbar-button { display: none; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { display: flex; flex-direction: column; }

button, select, input { font: inherit; color: inherit; }
input[type=checkbox] { accent-color: var(--accent); }

button {
  background: #262a31;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: #4a515c; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary, a.button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.active, button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

select { background: #262a31; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; width: 100%; }

.hint { color: var(--muted); font-size: 12.5px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.toolbar h1 { font-size: 16px; margin: 0 12px 0 0; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; }
.toolbar h1 .logo { width: 22px; height: 22px; flex: none; }
#camera-status.connected { color: var(--accent); }

main { flex: 1; display: flex; min-height: 0; }

.library, .controls {
  background: var(--panel);
  overflow-y: auto;
  padding: 10px 12px;
}
.library { width: 210px; border-right: 1px solid var(--line); }
.controls { width: 308px; border-left: 1px solid var(--line); }
/* The right sidebar's left edge: drag to resize it. */
.side-resize { flex: none; width: 8px; margin: 0 -4px; position: relative; z-index: 3; cursor: ew-resize; touch-action: none; }
.side-resize:hover, .side-resize.dragging { background: linear-gradient(to right, transparent 3px, var(--muted) 3px, var(--muted) 5px, transparent 5px); }

h2 { font-size: 13px; font-weight: 600; color: var(--heading); margin: 14px 0 8px; }
/* Sections in the right sidebar are spaced by a gap, so the first visible
   heading lines up with "Photos" whichever sections are hidden. */
.controls { display: flex; flex-direction: column; gap: 0; }
.library h2 { margin-top: 0; }

/* Collapsible sidebar sections. */
.panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary h2 { margin: 0; line-height: 20px; }
.panel[open] > summary { margin-bottom: 6px; }
/* Chevron left of the title: points right when closed, down when open. */
.panel > summary::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin: 0 2px 0 1px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.12s;
}
.panel:not([open]) > summary::before { transform: rotate(-45deg); }
.panel > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
#histogram { display: block; width: 100%; height: 80px; border-radius: 6px; background: #0b0c0e; border: 1px solid var(--line); }

#library-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#library-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px; border-radius: 6px; cursor: pointer; border: 1px solid transparent;
}
#library-list li { position: relative; }
#library-list li:hover { background: #22262c; }
#library-list li.current { border-color: var(--accent); }
#library-list img, #library-list .noimg { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; background: #2a2e35; flex: none; }
#library-list span { font-size: 12.5px; word-break: break-all; }

.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* Album grid: takes the place of the picture and its controls. */
.stage.grid > :not(.grid-view) { display: none; }
.grid-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0f1114; }
.grid-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.grid-bar h2 { margin: 0; font-size: 14px; }
.thumb-size { display: flex; align-items: center; gap: 4px; }
.thumb-size input { width: 120px; }
.photo-grid {
  --thumb: 180px;
  flex: 1; overflow-y: auto; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--thumb), 1fr)); gap: 14px; align-content: start;
}
.photo-grid .tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; min-width: 0; }
.photo-grid .tile:hover { background: #1c2026; }
.photo-grid .tile.current { border-color: var(--accent); }
.photo-grid .tile:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.photo-grid .frame { aspect-ratio: 3 / 2; border-radius: 5px; background: #20242a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.photo-grid .frame img { width: 100%; height: 100%; object-fit: contain; }
.photo-grid .name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-grid .more { position: absolute; top: 10px; right: 10px; background: rgba(18, 20, 23, 0.85); border-radius: 4px; }
.photo-grid .tile:hover > .more { opacity: 1; }
#grid-empty { padding: 24px 16px; margin: 0; }

.viewer {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  background: #0b0c0e;
}
.viewer.dragover { outline: 2px dashed var(--accent); outline-offset: -8px; }
#view { position: absolute; left: 0; top: 0; touch-action: none; }
#view.pannable { cursor: grab; }
#view.panning { cursor: grabbing; }
#view.hidden { visibility: hidden; }
.version { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
#spread-overlay { position: absolute; pointer-events: none; opacity: 0.5; }
.placeholder { position: absolute; color: var(--muted); text-align: center; padding: 20px; }

.notice {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(20, 22, 26, 0.92); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 8px 8px 12px; display: flex; gap: 10px; align-items: flex-start; max-width: min(460px, calc(100% - 28px));
}
.notice p { margin: 0; }
.notice .hint { margin-top: 2px; }
.notice button { padding: 0 4px; font-size: 16px; line-height: 1; }

.progress {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(20, 22, 26, 0.92); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; display: flex; gap: 10px; align-items: center; min-width: 320px;
}
.progress .bar { flex: 1; height: 6px; background: #2a2e35; border-radius: 3px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.15s; }

.modes-row, .transport {
  display: flex; gap: 6px; padding: 8px 12px; align-items: center;
  border-top: 1px solid var(--line); background: var(--panel); flex-wrap: wrap;
}
.modes { display: flex; gap: 6px; }
/* Above the picture: the line goes below it instead. */
.modes-row.top { border-top: 0; border-bottom: 1px solid var(--line); padding-block: 4px; }
.transport-buttons { display: flex; gap: 2px; }
.transport-buttons .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; padding: 6px 0; }
.transport-buttons .icon-btn.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.transport input[type=range] { flex: 1; min-width: 120px; }
.zoom { display: flex; gap: 2px; align-items: center; }
.zoom button { padding: 6px 9px; min-width: 32px; }
#zoom-label { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

label { display: block; margin: 4px 0; font-size: 13px; }
label input[type=range] { display: block; width: 100%; margin-top: 4px; }
label.check { display: flex; gap: 6px; align-items: center; }
label.check input { margin: 0; }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.plain:disabled { opacity: 0.45; }
label output { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Keyframe controls in a column of their own at the right of the settings
   (as in DaVinci Resolve's Inspector): ◀ ◆ ▶. The diamond is the keyframe
   editor's: hollow when the setting is not animated, filled when it is, blue
   with a keyframe at the playhead; an arrow shows when there is a keyframe
   that way. */
/* Only settings showing keyframe controls leave room for the column;
   other sliders keep the full width. */
label:has(> .key-nav:not([hidden])) { position: relative; padding-right: 46px; }
.key-nav { position: absolute; right: -4px; top: -1px; display: flex; align-items: center; gap: 4px; height: 18px; }
.key-nav button {
  width: 12px; height: 18px; padding: 0; border: 0; background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.key-nav button:hover:not(:disabled) { color: var(--text); }
.key-nav .key-step { visibility: hidden; width: 9px; }
.key-nav.on .key-step { visibility: visible; }
/* An arrow shows only when there is a keyframe that way. */
.key-nav .key-step:disabled { visibility: hidden; }
.key-diamond {
  width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg);
  border: 1.5px solid currentColor; background: transparent;
}
.key-toggle.on { color: var(--text); }
.key-toggle.on .key-diamond { background: currentColor; }
.key-toggle.here { color: var(--live); }
/* A collapsed section or subsection holding keyframed settings shows the
   keyframe diamond at the right of its title row, in line with the
   sliders' keyframe buttons. */
.panel.keyed:not([open]) > summary::after,
.subpanel.keyed:not([open]) > summary::after {
  content: ''; width: 6px; height: 6px; margin: 0 12px 0 auto; border-radius: 1px;
  transform: rotate(45deg); background: var(--text); flex: none;
}
.row { display: flex; gap: 6px; flex-wrap: wrap; }

dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; }
dt { color: var(--muted); }
dd { margin: 0; word-break: break-word; }

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; width: min(900px, 92vw); max-height: 86vh; padding: 16px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog form { display: flex; flex-direction: column; gap: 10px; max-height: calc(86vh - 32px); }
dialog h2 { margin: 0; }
dialog menu { display: flex; gap: 8px; padding: 0; margin: 0; }
#quick-export-dialog { width: min(480px, 94vw); }
/* One column: a heading per group, then one row per setting (name on the
   left, control on the right). */
.qe-list { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding-right: 4px; }
.qe-list h3 { margin: 14px 0 4px; padding-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-bottom: 1px solid var(--line); }

.qe-kind { padding-bottom: 4px; font-weight: 600; }
.qe-row > output { white-space: nowrap; }
.qe-check { margin: 0; padding: 6px 0; font-size: 13px; }
.qe-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5.5em; align-items: center; gap: 10px; margin: 0; padding: 5px 0; font-size: 13px; }
.qe-row > :nth-child(2) { grid-column: 2; justify-self: stretch; }
.qe-row > input[type=checkbox] { justify-self: start; margin: 0; }
.qe-row > input[type=range] { margin: 0; }
.qe-row > output { float: none; text-align: right; }
.qe-row > button { justify-self: start; }
.spacer { flex: 1; }
.camera-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; overflow-y: auto; }
.camera-grid label { margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px; cursor: pointer; }
.camera-grid label:has(input:checked) { border-color: var(--accent); }
.camera-grid img, .camera-grid .noimg { width: 100%; aspect-ratio: 704 / 480; object-fit: cover; border-radius: 4px; background: #2a2e35; display: block; }
.camera-grid .name { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; }

@media (max-width: 900px) {
  main { flex-direction: column; overflow-y: auto; }
  .library, .controls { width: auto !important; border: 0; }
  .side-resize { display: none; }
  .viewer { min-height: 50vh; }
}

/* Subsections sit a little in from their section's title. */
.subpanel { border-top: 1px solid var(--line); margin-left: 6px; }
.subpanel:first-of-type { border-top: 0; }
.subpanel > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  user-select: none;
}
.subpanel > summary::-webkit-details-marker { display: none; }
.subpanel > summary h3 { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
/* Chevron left of the label, like the sections': right when closed, down when open. */
.subpanel > summary::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0 2.5px 0 1.5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.12s;
}
.subpanel:not([open]) > summary::before { transform: rotate(-45deg); }
.subpanel > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.subpanel[open] { padding-bottom: 6px; }
.subpanel[open] > :last-child,
.subpanel[open] > :has(+ [hidden]:last-child) { margin-bottom: 0; }
/* A section ending in a subsection (open or collapsed): the subsection's
   own spacing is enough, like every other subsection. */
.controls > .panel[open]:has(> .subpanel:last-child) { padding-bottom: 0; }

/* Sliders (all of them share these sizes): a 2px channel and a square
   handle, drawn with fills only. */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: var(--slider-height);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: var(--slider-track);
  background: var(--channel, var(--line));
  border: 0;
  border-radius: 0;
}
input[type=range]::-moz-range-track {
  height: var(--slider-track);
  background: var(--channel, var(--line));
  border: 0;
  border-radius: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--slider-thumb-w);
  height: var(--slider-thumb-h);
  margin-top: calc((var(--slider-track) - var(--slider-thumb-h)) / 2);
  background: var(--accent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
input[type=range]::-moz-range-thumb {
  width: var(--slider-thumb-w);
  height: var(--slider-thumb-h);
  background: var(--accent);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
input[type=range]:hover::-webkit-slider-runnable-track { background: var(--channel, var(--muted)); }
input[type=range]:hover::-moz-range-track { background: var(--channel, var(--muted)); }

/* Channels that show what the slider does. */
#wb-temperature { --channel: linear-gradient(to right, #3d7bff, #ffd23d); }
#wb-tint { --channel: linear-gradient(to right, #2fd14a, #f030f0); }
#hue-red { --channel: linear-gradient(to right, #000, #ff3030); }
#hue-yellow { --channel: linear-gradient(to right, #000, #ffe030); }
#hue-green { --channel: linear-gradient(to right, #000, #30e050); }
#hue-cyan { --channel: linear-gradient(to right, #000, #30e0e0); }
#hue-blue { --channel: linear-gradient(to right, #000, #3060ff); }
#hue-magenta { --channel: linear-gradient(to right, #000, #f030f0); }
input[type=range]:disabled { --channel: var(--line); }
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { background: var(--text); }
input[type=range]:focus-visible::-moz-range-thumb { background: var(--text); }
input[type=range]:disabled { cursor: default; }
.color-panel label:has(input[type=range]:disabled),
.details-panel label:has(input[type=range]:disabled),
[data-panel=camera] label:has(input[type=range]:disabled),
#fringe-controls:not(:disabled) label:has(input[type=range]:disabled) { opacity: 0.45; }
input[type=range]:disabled::-webkit-slider-thumb { background: var(--muted); }
input[type=range]:disabled::-moz-range-thumb { background: var(--muted); }
button.wide { display: block; width: 100%; }
.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.stack > * { margin: 0; }

.icon-only {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; background: none; border: 0; border-radius: 4px;
  color: var(--muted); cursor: pointer;
}
.icon-only:hover { background: none; color: var(--text); }
.icon-only:active { color: var(--accent); }
.icon-only:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.icon-only[aria-expanded="true"] { color: var(--accent); }
#settings-dialog, #about-dialog { width: min(520px, calc(100vw - 32px)); }
#about-dialog p { margin: 0; line-height: 1.5; }
#about-dialog .links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#about-dialog .links a { color: var(--text); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 2px; }
#about-dialog .links a:hover { text-decoration-color: var(--text); }
#about-dialog .credits h3 { margin: 4px 0 4px; font-size: 13px; }
#about-dialog .credits h3.credit-extra { margin-top: 20px; }
#about-dialog .about-copyright { margin-top: 6px; }
#about-dialog .about-intro a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 2px; }
#about-dialog .about-intro a:hover { text-decoration-color: var(--text); }
#about-dialog .about-copyright a { color: inherit; text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 2px; }
#about-dialog .about-copyright a:hover { color: var(--text); text-decoration-color: var(--text); }
#about-dialog .about-last { margin-bottom: 18px; }
/* Same as the top bar: the logo left of the app name. */
#about-dialog h2 { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: bold; letter-spacing: 0.02em; color: var(--text); }
#about-dialog h2 .logo { width: 22px; height: 22px; flex: none; }
a.button {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 6px;
  background: #262a31; border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
a.button:hover { border-color: #4a515c; }
.setting h3 { margin: 0 0 6px; font-size: 13px; }
.setting .path { margin: 0 0 6px; font-size: 13px; word-break: break-all; color: var(--text); }
.setting .path.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
/* Divider lines between the right sidebar's sections. */
.controls > .panel { padding: 8px 0; }
/* The first title lines up with "Photos" in the left sidebar. */
.controls > .panel:first-child { padding-top: 0; }
/* Both sidebars start their first title 8px below the top bar, the same
   space a title has between dividers. */
.controls, .library { padding-top: 8px; }
.controls > .panel + .panel { border-top: 1px solid var(--line); }
/* Render, Auto render and Save PNG: always shown, below the Render section. */
.render-actions { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 8px; border-top: 1px solid var(--line); }
.render-actions label.check { margin: 0; }
/* A dropdown under its label, with room before the next control. */
label select { display: block; margin-top: 4px; }
label:has(select) { margin-bottom: 10px; }

.wb-row { align-items: center; justify-content: space-between; margin: 4px 0; }
.wb-row label.check { margin: 0; }
.icon-only[aria-pressed="true"] { color: var(--accent); }
.modes .icon-only.active { color: var(--accent); background: none; }
.modes .icon-only:disabled { opacity: 0.35; }
#view.picking { cursor: crosshair; }

/* Checkboxes side by side. */
.check-row { gap: 20px; margin: 4px 0; }
.check-row label.check { margin: 0; }
.check-row label.check:has(input:disabled) { opacity: 0.45; }

/* Name and version share a baseline (the logo is centered beside them). */
.app-name { display: inline-block; line-height: 1; }
.app-name .version { vertical-align: baseline; }

/* Library sidebar: albums above the photo list. */
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; }
.albums { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.albums li { display: flex; align-items: center; border-radius: 5px; border: 1px solid transparent; }
.albums li:hover { background: #22262c; }
.albums li.current { background: #262b33; }
.albums li.drop { border-color: var(--accent); }
.albums .album {
  flex: 1; min-width: 0; display: flex; gap: 6px; align-items: baseline;
  background: none; border: 0; padding: 4px 6px; text-align: left; font-size: 12.5px;
}
.albums .album .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.albums .album .count { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.albums input { flex: 1; min-width: 0; margin: 2px; padding: 3px 5px; font-size: 12.5px; background: #0f1114; border: 1px solid var(--accent); border-radius: 4px; }
.more {
  flex: none; padding: 0 6px; line-height: 20px; font-size: 14px; letter-spacing: 1px;
  background: none; border: 0; color: var(--muted); opacity: 0; transition: opacity 0.12s;
}
.more:hover { color: var(--text); }
li:hover > .more, .more:focus-visible, .more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .more { opacity: 1; } }
.link-button { background: none; border: 0; padding: 4px 6px; color: var(--muted); font-size: 12.5px; text-align: left; }
.link-button:hover { color: var(--text); }
#library-list .more { position: absolute; top: 4px; right: 4px; background: rgba(18, 20, 23, 0.85); border-radius: 4px; }
#library-list li[draggable="true"] { -webkit-user-drag: element; }

/* Pop-up menus (photo and album actions). */
.menu {
  position: fixed; z-index: 50; min-width: 180px; max-width: 280px; padding: 4px;
  background: #1b1e23; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain;
}
.menu button {
  background: none; border: 0; border-radius: 5px; padding: 5px 8px; text-align: left; font-size: 12.5px;
  display: flex; gap: 8px; align-items: center;
}
.menu button:hover, .menu button:focus-visible { background: #2a2f37; outline: none; }
.menu button .tick { width: 12px; flex: none; color: var(--accent); }
.menu button.danger { color: #ff8a80; }
.menu .menu-heading { margin: 4px 8px 2px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 3px 4px; width: auto; }
.menu p { margin: 4px 8px; font-size: 12.5px; line-height: 1.45; }
.menu .menu-row { display: flex; gap: 6px; justify-content: flex-end; padding: 4px; }
.menu .menu-row button { border: 1px solid var(--line); }
.menu .menu-row button.danger { border-color: #8a3a35; }
.albums li { position: relative; }
.albums .album { padding-right: 8px; }
.albums .more { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.albums li:hover .more ~ * , .albums li:hover .album:has(+ .more) .count { visibility: hidden; }
.library #photos-title { margin-top: 16px; }
/* Camera: the connected camera's photos, above the library. */
.camera-section { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.camera-section h2 { margin: 0; }
.camera-section .hint { margin: 0; }
.camera-section .albums { margin: 0; }
.tile.imported .name::after { content: ' ✓'; color: var(--accent); }
#grid-camera-choose-row { padding: 0 16px; margin: 0; }

/* Crop, straighten and orientation. */
.geometry-row { align-items: center; margin: 2px 0 6px; }
#crop-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.crop-box {
  position: absolute; z-index: 3; cursor: move; touch-action: none;
  outline: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.crop-grid {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% - 0.5px), rgba(255, 255, 255, 0.35) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px), transparent calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% - 0.5px), rgba(255, 255, 255, 0.35) calc(66.67% + 0.5px), transparent calc(66.67% + 0.5px));
}
.crop-box [data-h] { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.crop-box [data-h="n"], .crop-box [data-h="s"] { width: 22px; height: 6px; margin: -3px 0 0 -11px; }
.crop-box [data-h="e"], .crop-box [data-h="w"] { width: 6px; height: 22px; margin: -11px 0 0 -3px; }
.crop-box [data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.crop-box [data-h="n"] { left: 50%; top: 0; cursor: ns-resize; }
.crop-box [data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.crop-box [data-h="e"] { left: 100%; top: 50%; cursor: ew-resize; }
.crop-box [data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.crop-box [data-h="s"] { left: 50%; top: 100%; cursor: ns-resize; }
.crop-box [data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.crop-box [data-h="w"] { left: 0; top: 50%; cursor: ew-resize; }

/* Tone curve graph. */
.curve-canvas { display: block; width: 100%; aspect-ratio: 1; max-width: 100%; margin: 4px 0 8px; touch-action: none; cursor: crosshair; }

/* Custom color matrix: output rows, camera columns. */
.ccm-grid { display: grid; grid-template-columns: 14px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: center; margin: 2px 0 8px; font-size: 11.5px; color: var(--muted); text-align: center; }
.ccm-grid input { width: 100%; min-width: 0; padding: 3px 4px; background: #0f1114; border: 1px solid var(--line); border-radius: 4px; font-variant-numeric: tabular-nums; text-align: right; }

/* Local adjustments. */
.mask-add { margin: 2px 0 8px; }
.mask-add { gap: 4px; }
.mask-add .mask-icon { padding: 5px; border-radius: 6px; }
.mask-add .mask-icon svg { width: 20px; height: 20px; display: block; }
.mask-add .mask-icon:hover:not(:disabled) { background: #22262c; }
.mask-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mask-list li { display: flex; align-items: center; border-radius: 5px; border: 1px solid transparent; }
.mask-list li.current { border-color: var(--accent); }
.mask-list li.off .mask-name { color: var(--muted); text-decoration: line-through; }
.mask-name { flex: 1; text-align: left; background: none; border: 0; padding: 4px 6px; font-size: 12.5px; }
.mask-fx-title { margin: 8px 0 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.mask-del { padding: 4px 6px; color: var(--muted); }
.mask-rename { padding: 4px 6px; color: var(--muted); }
.mask-rename:hover { color: var(--text); }
.mask-list li input[type=text] { flex: 1; min-width: 0; margin: 2px; padding: 3px 6px; font-size: 12.5px; }
.mask-del:hover { color: #ff8a80; }
.mask-delete { margin-top: 8px; color: #ff8a80; }

/* Animation keyframes. */
.key-buttons { margin: 4px 0 6px; }
.key-buttons button { flex: 1; }
.key-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.key-list li { display: flex; align-items: center; gap: 6px; }
.key-time { width: 40px; flex: none; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.key-go { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 3px 4px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-go:hover { background: #22262c; }

/* Animation length, beside the play bar. */
.fps-custom { display: flex; align-items: center; gap: 6px; }
.fps-custom input { width: 80px; }
.anim-length { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.anim-length input { width: 58px; padding: 4px 6px; background: #0f1114; border: 1px solid var(--line); border-radius: 5px; font-variant-numeric: tabular-nums; text-align: right; }

/* Keyframe timeline: one row per property. */
.timeline { flex: none; border-top: 1px solid var(--line); background: var(--panel); padding: 6px 12px 8px; position: relative; display: flex; flex-direction: column; gap: 6px; }
.tl-resize { position: absolute; left: 0; right: 0; top: -4px; height: 8px; cursor: ns-resize; z-index: 2; touch-action: none; }
/* The same line as the sidebar's edge while hovered or dragged. */
.tl-resize:hover, .tl-resize.dragging { background: linear-gradient(to bottom, transparent 3px, var(--muted) 3px, var(--muted) 5px, transparent 5px); }
/* Resized by the user: the tracks scroll and the curves fill the height. */
.timeline.sized .tl-main { height: var(--tl-h); align-items: stretch; overflow: hidden; }
.timeline.collapsed .tl-main { display: none; }
.timeline.collapsed { padding-bottom: 6px; }
.timeline.sized .tl-grid-wrap { min-height: 0; }
.timeline.sized .tl-grid { overflow-y: auto; overflow-x: hidden; align-content: start; }
.timeline.sized .tl-curves { flex: 1; min-height: 0; height: auto; }
.timeline.sized .tl-channels { overflow-y: auto; overflow-x: hidden; }
.timeline.sized .tl-plot { height: 100%; min-height: 0; }
.tl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-bar button { padding: 4px 10px; font-size: 12.5px; }
.tl-ease { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.tl-ease select { width: auto; margin: 0; padding: 3px 6px; }
.tl-time { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.tl-main { display: flex; gap: 10px; align-items: flex-start; }
.tl-autokey { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tl-autokey input { margin: 0; accent-color: var(--live); }
.tl-autokey:has(input:checked) { color: var(--live); }
.tl-filter { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tl-filter input { margin: 0; }
.tl-filter:has(input:checked) { color: var(--text); }
.tl-views { display: inline-flex; }
.tl-views button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 9px; }
/* One control in two halves: shared middle edge, the chosen half filled. */
.tl-views button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tl-views button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.tl-views button.active { position: relative; z-index: 1; background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tl-curves { display: grid; grid-template-columns: 132px 1fr; grid-template-rows: minmax(0, 1fr); min-width: 0; height: var(--tl-natural, 150px); }
.tl-channels { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; font-size: 11.5px; line-height: 14px; color: var(--muted); overflow-y: auto; overflow-x: hidden; }
.tl-channel { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; white-space: nowrap; }
.tl-channel input { margin: 0; width: 12px; height: 12px; }
.tl-swatch { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.tl-channel.empty { opacity: 0.45; }
.tl-plot { display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; background: #15181c; border-radius: 3px; cursor: crosshair; touch-action: none; }
.tl-grid-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.timeline input.tl-scroll { display: block; margin: 0 0 0 140px; width: calc(100% - 146px); }
.tl-zoom button { padding: 2px 8px; font-size: 12px; min-width: 0; }
.tl-zoom #tl-zoom-label { min-width: 46px; font-variant-numeric: tabular-nums; }
.tl-grid { position: relative; flex: 1; min-width: 0; padding-right: 6px; display: grid; grid-template-columns: 132px 1fr; row-gap: 2px; column-gap: 8px; user-select: none; }
.tl-label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); height: 20px; min-width: 0; overflow: hidden; white-space: nowrap; }
.tl-label button { padding: 0 4px; line-height: 16px; font-size: 11px; background: none; border: 1px solid transparent; color: var(--muted); }
.tl-label button:hover { color: var(--text); border-color: var(--line); }
.tl-track { position: relative; height: 20px; background: #15181c; border-radius: 3px; cursor: pointer; }
.tl-ruler { position: relative; height: 16px; cursor: pointer; }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-size: 10px; color: var(--muted); padding-left: 3px; }
.tl-key {
  position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--text); transform: rotate(45deg); border-radius: 1px; cursor: ew-resize;
}
.tl-key.selected { background: var(--key-selected); box-shadow: 0 0 0 1.5px #fff; z-index: 1; }
.tl-key.hold { border-radius: 0; background: var(--muted); }
.tl-key.hold.selected { background: var(--key-selected); }
.tl-label.tl-sub { padding-left: 14px; }
.tl-label.tl-group.tl-section { padding-left: 12px; font-weight: 500; }
.tl-label.tl-sub.tl-deep { padding-left: 26px; }
.tl-label.tl-group { color: var(--text); font-weight: 600; gap: 2px; }
.tl-group-name { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-chevron { display: inline-flex; align-items: center; justify-content: center; padding: 0 2px; background: none; border: 0; color: var(--muted); }
.tl-chevron svg { transition: transform 0.12s; }
.open > .tl-chevron svg { transform: rotate(90deg); }
.tl-track.tl-summary { background: #1b1f24; }
.tl-key.tl-sum { background: var(--muted); }
.tl-box { position: absolute; border: 1px dashed rgba(200, 205, 213, 0.7); background: rgba(200, 205, 213, 0.08); pointer-events: none; z-index: 3; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--live); pointer-events: none; }
/* A grip either side of the line: drag the playhead from any row. */
.tl-playhead::before { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; pointer-events: auto; cursor: ew-resize; }
.tl-curve { flex: none; }
.tl-curve-canvas { display: block; width: 150px; height: 150px; touch-action: none; cursor: crosshair; }

/* Everything inside a section is indented like its subsections. */
.controls > .panel > :not(summary) { margin-left: 6px; }
.controls > .panel > :is(canvas, button.wide) { width: calc(100% - 6px); }
.mask-filter { width: auto; padding: 3px 6px; font-size: 12px; }

/* Number fields: plain arrows instead of the browser's spinner. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.num { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.num input { padding-right: 18px !important; width: 100%; }
.num-arrows { position: absolute; right: 3px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.num-arrows button { background: none; border: 0; padding: 1px 2px; line-height: 0; color: var(--muted); cursor: pointer; }
.num-arrows button:hover, .num-arrows button:hover:not(:disabled) { background: none; color: var(--text); }
.anim-length .num { width: 64px; }
.ccm-grid .num { width: 100%; }

/* Rendering: room between a checkbox and the field below it. */
#depth-hq-row, #stereo-on-row { margin-bottom: 10px; }

/* A disabled mask shows only its Enabled checkbox and Delete button. */
#mask-editor.off > :not(.check-row):not(.mask-delete) { display: none; }
#mask-editor.off .check-row > label:not(:has(#mask-on)) { display: none; }

/* The time ruler stays in view while the tracks scroll. */
.tl-ruler, .tl-ruler-label { position: sticky; top: 0; z-index: 4; background: var(--panel); }

/* Process > LUT */
.lut-film { width: 100%; margin-bottom: 8px; }
.lut-row { display: flex; align-items: center; gap: 8px; }
label.lut-amount { margin-top: 14px; }
.lut-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }

/* About: third-party credits sit apart from the developer's links. */
.credit-extra { margin-top: 18px; }

/* Group headings look the same in the Curves channel list as in the tracks. */
.tl-channels .tl-label.tl-group { flex: none; line-height: normal; }

/* An on/off checkbox above the slider it controls. */
[data-panel=camera] label.check:has(#pivot-on, #tilt-on) { margin-bottom: 10px; }

/* Rendering: Video size above the export buttons. */

/* Lenslets: the full sensor sampling of the part of the sensor shown. */
.lens-side { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #000; border-radius: 4px; }
.lens-side-title { margin: 6px 0 4px; font-size: 12px; color: var(--muted); }

/* No photo open: the sidebar's settings are shown disabled. */
.controls.no-photo > .panel > :not(summary), .controls.no-photo > .render-actions { opacity: 0.45; }

#desktop-only-dialog { max-width: 480px; }