/* ============================================================
   DOWNROAD — Design System
   ──────────────────────────────────────────────────────────
   COLOUR PALETTE
     Red (primary)
       --red-dark:      #490504   bg fills, pill backgrounds
       --red-bright:    #E20000   accents, active states, buttons
     Yellow (activity / background state)
       --yellow-dark:   #2E2200   activity toast background
       --yellow-bright: #E8A800   activity toast text & spinner
     Neutral
       --grey-muted:    #A1A1A1   placeholder, secondary text
       --white:         #FFFFFF   primary text
     Semantic
       --color-error:   #FF453A   error states & toasts
       --color-success: #30D158   success states, has-value ring
       --color-warning: #FFD60A   warning toasts
       --color-info:    #FFFFFF   info toasts (no icon)

  TYPOGRAPHY
    Font:    Ligconsolata Bold (monospace w/ ligatures, SIL OFL)
    Base:    14px / 700
    Scale:   11px meta · 12px chips/badges · 13px secondary
             14px body/buttons · 15px time inputs · 18px headings
    Punctuation rules:
      - NO em dashes (—) anywhere in UI text. Ever.
      - Use a colon (: ) for label/continuation pairs  e.g. "Ready: click Download"
      - Use a middle dot ( · ) to separate metadata items  e.g. "1080p · MP4"
      - Use a period (.) for sentence breaks
      - Use a plain hyphen (-) as a null/empty placeholder value

   ICONOGRAPHY
     Provider: Hugeicons only (rounded stroke set via hgi-stroke)
     Rule: Never use emoji, unicode symbols, or inline SVG for UI icons
     Pattern: use `icon(name)` in JS and `.ui-icon` utility classes in HTML/CSS

   BORDER RADIUS
     --radius-pill: 45px   URL bar, buttons, time inputs, quality bar
     --radius-card: 18px   video card, carousel card, toasts
     --radius-sm:   10px   queue items, small cards

   SPACING
     --gap: 12px            standard gap between stacked elements
     URL/controls width:    92%, max 900px, min 420px (centred)

   ANIMATION
     --spring: cubic-bezier(0.32, 1.05, 0.36, 1)   bouncy entrances
     --ease:   cubic-bezier(0.32, 0.72, 0, 1)       smooth exits
     Principles: scale · translate · opacity · box-shadow
                 no glow, no blur, no gradients on interactive elements

   STICKER SYSTEM
     /stickers/Default.avif   idle / default state
     /stickers/goodN.*        random pick on success outcomes
     /stickers/badN.*         random pick on error / warning outcomes
     /stickers/empty-queue.png  queue panel empty state
     Swap animation: scale(0.82)→scale(1) + opacity fade, 150ms out / 350ms in
     Reset: on URL clear → default; stays otherwise until next state change

   KEY COMPONENTS
     URL Row       white 2px border pill, max 900px, centred
     Download btn  red pill inside URL row, 10px inset margin, 38px tall
     Time inputs   dark-red pill, inset box-shadow ring (green=has value,
                   red=error, red-bright=focus), 112×48px
     Quality bar   dark-red pill, sliding red pill indicator, max 500px
     Activity toast  yellow-dark bg, yellow-bright text, bottom-centre
     Status toast    dark-red bg, coloured text, max 520px, wraps, copy btn on errors
     Sticker         220×220px above URL bar, object-fit:contain, pop animation
   ============================================================ */

:root {
  --red-dark:     #490504;
  --red-bright:   #E20000;
  --yellow-dark:  #2E2200;
  --yellow-bright: #E8A800;
  --grey-muted:  #A1A1A1;
  --white:       #FFFFFF;

  --color-error:   #FF453A;
  --color-success: #30D158;
  --color-warning: #FFD60A;
  --color-info:    #FFFFFF;

  --font: 'Ligconsolata', 'Menlo', ui-monospace, monospace;

  --radius-pill: 45px;
  --radius-card: 18px;
  --radius-sm:   10px;

  --gap: 12px;

  --spring: cubic-bezier(0.32, 1.05, 0.36, 1);
  --ease:   cubic-bezier(0.32, 0.72, 0, 1);
}

/* ============================================================
   Font
   ============================================================ */

@font-face {
  font-family: 'Ligconsolata';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Ligconsolata-Bold.woff') format('woff');
}

/* ============================================================
   Reset & Base
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  overflow: hidden;
}

input, button {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  outline: none;
  border: none;
  background: none;
}

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ui-icon--button { font-size: 18px; }
.ui-icon--help { font-size: 16px; }
.ui-icon--action { font-size: 12px; }
.ui-icon--sm { font-size: 15px; }
.ui-icon--xs { font-size: 13px; }

/* ============================================================
   App Shell
   ============================================================ */

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: 36px 28px 28px;
  -webkit-app-region: drag;
  position: relative;
  transition: filter 250ms var(--ease);
}

.app.blurred,
.app.blurred ~ .status-message,
.app.blurred ~ .activity-toast {
  filter: blur(28px) saturate(1.2) brightness(0.7);
  pointer-events: none;
}

.app > * {
  -webkit-app-region: no-drag;
  position: relative;
  z-index: 1;
}

.spacer {
  flex: 1;
}

/* ============================================================
   Download Queue — Fixed top-right button + dropdown panel
   ============================================================ */

.queue-anchor {
  position: fixed;
  top: 16px;
  right: 28px;
  z-index: 10;
  -webkit-app-region: no-drag;
}

.queue-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-dark);
  color: var(--red-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition:
    transform 250ms var(--spring),
    background 200ms var(--ease);
}

.queue-btn:hover {
  transform: scale(1.05);
}

.queue-btn:active {
  transform: scale(0.95);
}

.queue-btn.nudge .ui-icon {
  animation: arrowNudge 400ms var(--spring);
}

.queue-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  background: var(--red-bright);
  color: var(--white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  pointer-events: none;
}

.queue-badge.visible {
  display: flex;
  animation: slideDown 200ms var(--spring);
}

.queue-badge.pop {
  animation: badgePop 300ms var(--spring);
}

/* ---- Panel ---- */

.queue-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-height: 420px;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.92) translateY(-6px);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 350ms var(--spring);
  overflow: hidden;
}

.queue-panel.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.queue-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 8px;
  flex-shrink: 0;
}

.queue-panel__title {
  font-size: 13px;
  color: var(--red-bright);
}

.queue-panel__clear {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(226, 0, 0, 0.55);
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 999px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}

.queue-panel__clear:hover {
  color: var(--red-bright);
  background: rgba(226, 0, 0, 0.1);
}

/* ---- List ---- */

.queue-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ---- Empty state ---- */

.queue-panel__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px;
  gap: 8px;
}

.queue-panel__empty.visible {
  display: flex;
}

.queue-panel__empty-icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.queue-panel__empty-text {
  font-size: 13px;
  color: rgba(226, 0, 0, 0.6);
  text-align: center;
  line-height: 1.5;
}

/* ---- Queue item ---- */

.queue-item {
  background: rgba(226, 0, 0, 0.07);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: slideDown 250ms var(--ease);
}

.queue-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.queue-item__title {
  font-size: 13px;
  color: var(--red-bright);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.queue-item__project {
  font-size: 11px;
  color: var(--proj-bright, var(--red-bright));
  background: var(--proj-dark, var(--red-dark));
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-item__action {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(226, 0, 0, 0.1);
  color: rgba(226, 0, 0, 0.5);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}

.queue-item__action:hover {
  background: rgba(226, 0, 0, 0.2);
  color: var(--red-bright);
}

.queue-item.preparing .queue-item__action:hover,
.queue-item.downloading .queue-item__action:hover {
  background: rgba(255,69,58,0.2);
  color: var(--color-error);
}

/* ---- Item progress bar ---- */

.queue-item__bar {
  width: 100%;
  height: 4px;
  background: rgba(226, 0, 0, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.queue-item__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--proj-bright, var(--red-bright));
  position: relative;
  overflow: hidden;
}

.queue-item__fill.downloading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  animation: barShimmer 1.5s var(--ease) infinite;
}

.queue-item__fill.complete {
  background: var(--color-success);
}

.queue-item__fill.complete::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  animation: barShimmer 600ms var(--ease) 1;
}

.queue-item__fill.error {
  background: var(--color-error);
}

.queue-item__fill.cancelled {
  background: rgba(226, 0, 0, 0.35);
}

.queue-item__fill.downloading.processing {
  width: 100% !important;
  animation: processingPulse 1.8s var(--ease) infinite;
}

.queue-item__fill.downloading.processing::after {
  display: none;
}

/* ---- Item footer ---- */

.queue-item__detail {
  font-size: 12px;
  color: rgba(226, 0, 0, 0.65);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-item__detail.has-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}

.queue-item__detail-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.queue-item__detail-stats {
  flex-shrink: 0;
  opacity: 0.7;
}

.queue-item.complete .queue-item__detail {
  color: var(--red-bright);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 3px 0;
}

.queue-item.complete .queue-item__detail-msg {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-item.complete .queue-item__detail::before {
  content: none;
}

.queue-item.complete .queue-item__detail .ui-icon {
  color: var(--color-success);
  font-size: 12px;
}

.queue-item.complete .queue-item__quality {
  display: none;
}

.queue-item.error .queue-item__detail {
  color: var(--color-error);
}

.queue-item__quality {
  font-size: 11px;
  color: var(--red-bright);
  background: rgba(226, 0, 0, 0.18);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.queue-item__show-file {
  font-size: 12px;
  color: var(--red-dark);
  background: var(--red-bright);
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  transition: transform 200ms var(--spring);
}

.queue-item__show-file:hover {
  transform: scale(1.04);
}

.queue-item__show-file:active {
  transform: scale(0.96);
}

/* ---- Queue backdrop ---- */

.queue-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9;
  -webkit-app-region: no-drag;
}

.queue-backdrop.visible {
  display: block;
}

/* ============================================================
   Logo — Fixed bottom-center
   ============================================================ */

.logo-anchor {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  -webkit-app-region: no-drag;
}

.logo-text {
  height: 22px;
  width: auto;
  opacity: 0.85;
}

/* ============================================================
   Meme Sticker
   ============================================================ */

.sticker {
  height: 220px;
  width: 220px;
  object-fit: contain;
  margin-bottom: 8px;
  pointer-events: none;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
  transition: opacity 150ms ease, transform 150ms ease;
}

.sticker.swap-out {
  opacity: 0;
  transform: scale(0.88);
}

.sticker.swap-in {
  animation: stickerPop 350ms cubic-bezier(0.32, 1.05, 0.36, 1) forwards;
}

@keyframes stickerPop {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   Path Display (clickable, right-aligned)
   ============================================================ */

.path-display {
  font-size: 12px;
  color: var(--grey-muted);
  text-align: right;
  width: 92%;
  max-width: 900px;
  padding-right: 48px;
  margin-bottom: var(--gap);
  cursor: pointer;
  transition: color 200ms var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-display__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--red-bright);
}

.path-display:hover {
  color: var(--white);
}

/* ============================================================
   URL Row — Unified input + download button
   ============================================================ */

.url-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 92%;
  max-width: 900px;
  min-width: 420px;
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  background: transparent;
  margin-bottom: var(--gap);
  transition: border-color 300ms var(--ease);
}

.url-row:focus-within {
  border-color: var(--red-bright);
}

.url-row.error {
  border-color: var(--color-error);
}

.url-row.error.shake {
  animation: shake 400ms var(--ease);
}

.url-input {
  flex: 1;
  height: 56px;
  padding: 0 10px 0 28px;
  background: transparent;
  color: var(--white);
  font-size: 14px;
  min-width: 0;
  text-overflow: ellipsis;
}

.url-input:focus {
  text-overflow: clip;
}

.url-input::placeholder {
  color: var(--grey-muted);
}

.url-input-clear {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--red-dark);
  color: var(--red-bright);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 20px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
  transition:
    transform 250ms var(--spring),
    opacity 200ms var(--ease);
}

.url-input-clear .ui-icon {
  font-size: 14px;
  line-height: 1;
}

.url-input-clear.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.btn-download {
  height: 38px;
  padding: 0 36px;
  margin: 10px 10px 10px 0;
  background: var(--red-bright);
  color: var(--red-dark);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 250ms var(--spring),
    opacity 200ms var(--ease);
}

.btn-download:hover:not(:disabled) {
  transform: scale(1.03);
}

.btn-download:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-download:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-download:disabled.shake {
  animation: shake 0.5s linear;
}

.btn-download.kick {
  animation: btnKick 350ms var(--spring);
}

.btn-download.url-row-hidden {
  display: none;
}

.btn-hint {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--white);
  color: #1a1a1a;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  opacity: 0;
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
}

.btn-hint.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   URL Hint
   ============================================================ */

.url-hint {
  font-size: 13px;
  color: var(--grey-muted);
  height: 20px;
  margin-bottom: var(--gap);
  text-align: center;
  width: 92%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease),
    color 200ms var(--ease);
  pointer-events: none;
}

.url-hint.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.url-hint.clipboard {
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 5px;
}

.url-hint.clipboard .url-hint__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  background: var(--color-success);
  border-radius: 50%;
  color: #ffffff;
  font-size: 9px;
  line-height: 1;
}

/* ============================================================
   Controls Row — Time inputs (left) + Quality bar (right)
   ============================================================ */

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 92%;
  max-width: 900px;
  min-width: 420px;
  margin-bottom: var(--gap);
}

/* Elevate controls-row above the quality backdrop (z-index 190) when dropdown is open */
.controls-row:has(.quality-dropdown.visible) {
  z-index: 195;
}

/* ============================================================
   Clip Range — Time inputs
   ============================================================ */

.clip-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.time-input-wrap {
  display: flex;
  align-items: center;
  background: var(--red-dark);
  border-radius: var(--radius-pill);
  height: 48px;
  width: 118px;
  box-shadow: inset 0 0 0 2px transparent;
  transition:
    box-shadow 250ms var(--ease),
    opacity 200ms var(--ease);
}

.time-input-wrap:has(.time-input:focus) {
  box-shadow: inset 0 0 0 2px var(--red-bright);
}

.time-input-wrap:has(.time-input.has-value) {
  box-shadow: inset 0 0 0 2px var(--color-success);
}

.time-input-wrap:has(.time-input.has-value:focus) {
  box-shadow: inset 0 0 0 2px var(--color-success);
}

.time-input-wrap:has(.time-input.error) {
  box-shadow: inset 0 0 0 2px var(--color-error);
}

.time-input-wrap:has(.time-input.auto-filled) {
  box-shadow: inset 0 0 0 2px var(--color-success);
}

.time-input-wrap:has(.time-input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

.time-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 15px;
  color: var(--red-bright);
  text-align: center;
}

.time-input:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.time-input::placeholder {
  color: var(--grey-muted);
}

.time-input.error.shake {
  animation: shake 400ms var(--ease);
}

.time-input-clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  max-width: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--red-dark);
  color: var(--red-bright);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  margin-right: 0;
  transition:
    max-width 220ms var(--spring),
    margin-right 220ms var(--spring),
    opacity 180ms var(--ease),
    transform 220ms var(--spring);
}

.time-input-clear .ui-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.time-input-wrap:has(.time-input.has-value) .time-input-clear {
  max-width: 22px;
  margin-right: 10px;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.time-input-wrap:has(.time-input:disabled) .time-input-clear {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
}

.clip-range__separator {
  color: var(--grey-muted);
  font-size: 15px;
}

/* ============================================================
   Quality Bar — Compact pill selector
   ============================================================ */

.quality-anchor {
  position: relative;
  flex: 0 1 41%;
  max-width: 375px;
  display: flex;
  justify-content: flex-end;
  transition: max-width 450ms var(--spring);
}

.quality-anchor:has(.quality-bar.compact) {
  max-width: 180px;
}

.quality-bar {
  display: flex;
  position: relative;
  width: 100%;
  background: var(--red-dark);
  border-radius: var(--radius-pill);
  padding: 6px;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}

.quality-bar.compact {
  pointer-events: none;
}

.pill-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  background: var(--red-bright);
  border-radius: var(--radius-pill);
  z-index: 0;
  transition:
    transform 450ms var(--spring),
    width 450ms var(--spring),
    opacity 250ms var(--ease);
  will-change: transform, width;
}

.quality-bar.compact .pill-indicator {
  opacity: 0;
}

.quality-bar.compact .quality-option.active {
  color: var(--red-bright);
}

.quality-option {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  cursor: pointer;
  color: var(--red-bright);
  background: transparent;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  padding: 0 12px;
  overflow: hidden;
  transition:
    flex-grow 450ms var(--spring),
    padding 450ms var(--spring),
    opacity 250ms var(--ease),
    color 300ms var(--ease),
    background 300ms var(--ease);
}

.quality-option.active {
  color: var(--red-dark);
}

.quality-option.collapsed {
  flex: 0 0 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.quality-chevron {
  font-size: 16px;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition:
    opacity 200ms var(--ease),
    width 200ms var(--ease),
    transform 200ms var(--ease);
  flex-shrink: 0;
}

.quality-chevron.visible {
  opacity: 1;
  width: 20px;
}

.quality-chevron.open {
  transform: rotate(180deg);
}

/* ============================================================
   Quality Dropdown
   ============================================================ */

.quality-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 190;
  -webkit-app-region: no-drag;
}

.quality-backdrop.visible {
  display: block;
}

.quality-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 200px;
  background: #490504;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-card);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 200;
  opacity: 0;
  transform: scale(0.85) translateY(8px);
  transform-origin: bottom left;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 350ms var(--spring);
}

.quality-dropdown.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.quality-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quality-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 150ms var(--ease);
  gap: 8px;
}

.quality-dropdown__item:hover {
  background: rgba(226,0,0,0.15);
}

.quality-dropdown__item.active {
  background: rgba(226,0,0,0.25);
  color: var(--red-bright);
}

.quality-dropdown__item-label {
  flex: 1;
}

.quality-dropdown__item-check {
  flex-shrink: 0;
  font-size: 12px;
  opacity: 0;
}

.quality-dropdown__item.active .quality-dropdown__item-check {
  opacity: 1;
}

/* ============================================================
   Video Card (below controls)
   ============================================================ */

.video-card {
  display: none;
  width: 92%;
  max-width: 900px;
  gap: 12px;
  padding: 12px;
  margin-bottom: var(--gap);
  background: var(--proj-dark, var(--red-dark));
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: background 300ms var(--ease);
}

.video-card.visible {
  display: flex;
  align-items: center;
  animation: slideDown 350ms var(--ease);
}

.video-card__thumb-wrap {
  width: 80px;
  height: 45px;
  border-radius: 8px;
  background: rgba(226,0,0,0.06);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.video-card__thumb {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.video-card__thumb.loaded {
  opacity: 1;
}

.video-card__info {
  flex: 1;
  min-width: 0;
}

.video-card__title {
  font-size: 13px;
  color: var(--proj-bright, var(--white));
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 300ms var(--ease);
}

.video-card__meta {
  font-size: 12px;
  color: var(--proj-bright-sub, var(--grey-muted));
  margin-top: 3px;
  transition: color 300ms var(--ease);
}

.video-card__qualities {
  font-size: 12px;
  color: var(--proj-bright-sub, var(--grey-muted));
  margin-top: 2px;
  transition: color 300ms var(--ease);
}

.video-card__action {
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
}

.video-card.loading .video-card__action {
  display: none;
}

.video-card__action .btn-download {
  margin: 0;
  white-space: nowrap;
}

.video-card__action .btn-hint {
  right: 0;
  left: auto;
  transform: translateY(4px);
}

.video-card__action .btn-hint.visible {
  transform: translateY(0);
}

/* ============================================================
   Carousel Card (Instagram multi-image picker)
   ============================================================ */

.carousel-card {
  display: none;
  width: 92%;
  max-width: 900px;
  padding: 16px;
  margin-bottom: var(--gap);
  background: var(--red-dark);
  border-radius: var(--radius-card);
}

.carousel-card.visible {
  display: block;
  animation: slideDown 350ms var(--ease);
}

.carousel-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.carousel-card__title {
  font-size: 12px;
  color: var(--white);
}

.carousel-card__select-all {
  font-size: 11px;
  color: var(--red-bright);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(226,0,0,0.12);
  transition: transform 200ms var(--spring);
}

.carousel-card__select-all:hover {
  transform: scale(1.03);
}

.carousel-card__grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 2px 10px;
}

.carousel-card__grid::-webkit-scrollbar {
  height: 4px;
}

.carousel-card__grid::-webkit-scrollbar-thumb {
  background: var(--red-bright);
  border-radius: 999px;
}

.carousel-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  opacity: 0.5;
  transition:
    border-color 200ms var(--ease),
    opacity 200ms var(--ease),
    transform 200ms var(--spring);
}

.carousel-thumb:hover {
  transform: scale(1.05);
}

.carousel-thumb.selected {
  border-color: var(--red-bright);
  opacity: 1;
}

.carousel-thumb.loading {
  background-color: rgba(226,0,0,0.08);
  background-size: 200% 100%;
  background-image: linear-gradient(90deg, rgba(226,0,0,0.06) 25%, rgba(226,0,0,0.14) 50%, rgba(226,0,0,0.06) 75%);
  animation: shimmer 1.5s infinite;
}

.carousel-thumb__check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red-bright);
  color: var(--white);
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.carousel-thumb.selected .carousel-thumb__check {
  display: flex;
}

.carousel-thumb__type {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  color: var(--white);
  background: rgba(0,0,0,0.6);
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

.carousel-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  position: relative;
}

.carousel-card__footer .btn-download {
  margin: 0;
  white-space: nowrap;
}

.carousel-card__footer .btn-hint {
  right: 0;
  left: auto;
  transform: translateY(4px);
}

.carousel-card__footer .btn-hint.visible {
  transform: translateY(0);
}

.carousel-card__count {
  font-size: 13px;
  color: var(--grey-muted);
}

/* ============================================================
   Platform Badge (history entries)
   ============================================================ */

.history-entry__platform {
  font-size: 12px;
  color: var(--grey-muted);
  background: rgba(255,255,255,0.08);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Retry button now uses shared .status-action-btn class */

/* ============================================================
   Activity Toast — Subtle bottom-center background task indicator
   ============================================================ */

.activity-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--yellow-dark);
  font-size: 12px;
  color: var(--yellow-bright);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  -webkit-app-region: no-drag;
  transition:
    opacity 220ms var(--ease),
    transform 380ms var(--spring);
}

.activity-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.activity-toast.done {
  /* inherits --yellow-bright from base rule; icon swap communicates completion */
}

.activity-toast__spinner {
  font-size: 14px;
  color: var(--yellow-bright);
  animation: activity-spin 700ms linear infinite;
  flex-shrink: 0;
}

.activity-toast.done .activity-toast__spinner {
  animation: none;
}

@keyframes activity-spin {
  to { transform: rotate(360deg); }
}

.activity-toast__text {
  white-space: nowrap;
}

/* Skeleton */
.video-card.loading .video-card__thumb-wrap,
.video-card.loading .video-card__title,
.video-card.loading .video-card__meta {
  background: var(--proj-shimmer-lo, rgba(226,0,0,0.08));
  border-radius: 6px;
  color: transparent;
  animation: shimmer 1.5s infinite;
  background-size: 200% 100%;
  background-image: linear-gradient(90deg,
    var(--proj-shimmer-lo, rgba(226,0,0,0.06)) 25%,
    var(--proj-shimmer-hi, rgba(226,0,0,0.14)) 50%,
    var(--proj-shimmer-lo, rgba(226,0,0,0.06)) 75%);
}

.video-card.loading .video-card__title { width: 80%; height: 14px; }
.video-card.loading .video-card__meta { width: 50%; height: 10px; }

/* ============================================================
   Settings — Fixed top-right, left of queue button
   ============================================================ */

.settings-anchor {
  position: fixed;
  top: 16px;
  right: 76px;
  z-index: 12;
  -webkit-app-region: no-drag;
}

.settings-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-dark);
  color: var(--red-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 250ms var(--spring),
    background 200ms var(--ease);
}

.settings-btn:hover {
  transform: scale(1.05);
}

.settings-btn:active {
  transform: scale(0.95);
}

.settings-btn .ui-icon {
  transition: transform 350ms var(--spring);
}

.settings-anchor.open .settings-btn .ui-icon {
  transform: rotate(90deg);
}

/* Settings backdrop — full screen invisible hit target for click-outside dismiss */
.settings-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 11;
  -webkit-app-region: no-drag;
}

.settings-backdrop.visible {
  display: block;
}

/* ============================================================
   Settings Popover
   ============================================================ */

.settings-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  opacity: 0;
  transform: scale(0.85) translateY(-8px);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 350ms var(--spring);
}

.settings-popover.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-label {
  font-size: 13px;
  color: var(--red-bright);
  cursor: default;
}

/* ============================================================
   Tooltip
   ============================================================ */

.ui-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 210px;
  padding: 7px 11px;
  background: rgba(30, 30, 30, 0.96);
  color: #e8e8e8;
  font-size: 11px;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 130ms var(--ease),
    transform 130ms var(--ease);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.ui-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

html.light-mode .ui-tooltip {
  background: rgba(30, 30, 30, 0.92);
  color: #f0f0f0;
}

.settings-divider {
  height: 1px;
  background: rgba(226,0,0,0.15);
}

/* Toggle switch */
.toggle {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: rgba(226,0,0,0.25);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 250ms var(--ease);
}

.toggle.active {
  background: var(--red-bright);
}

.toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--red-bright);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), background 250ms var(--ease);
  pointer-events: none;
}

.toggle.active .toggle__knob {
  background: var(--red-dark);
  transform: translateX(16px);
}

/* Stacked settings row — label on top, control full-width below */
.settings-row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Sliding pill — shared by mode-switcher and theme-toggle */
.seg-pill {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  background: var(--red-bright);
  border-radius: var(--radius-pill);
  z-index: 0;
  pointer-events: none;
  transition:
    transform 450ms var(--spring),
    width 450ms var(--spring),
    background 200ms var(--ease);
  will-change: transform, width;
}


/* Mode switcher — 3-segment control */
.mode-switcher {
  display: flex;
  position: relative;
  background: rgba(226,0,0,0.18);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.mode-switcher__btn {
  flex: 1;
  position: relative;
  z-index: 1;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: rgba(226,0,0,0.75);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  padding: 5px 4px;
  cursor: pointer;
  transition: color 200ms var(--ease);
  white-space: nowrap;
  line-height: 1;
}

.mode-switcher__btn.active {
  color: var(--red-dark);
}

/* ---- Settings Update Banner ---- */

.settings-update-banner {
  width: 100%;
  padding: 8px 10px;
  background: var(--red-dark);
  color: var(--white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  animation: badgePop 300ms var(--spring);
}

.settings-update-banner__text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.settings-update-banner__btn {
  height: 26px;
  padding: 0 14px;
  background: var(--red-bright);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 150ms ease, transform 150ms var(--spring);
}

.settings-update-banner__btn:hover {
  opacity: 0.85;
}

.settings-update-banner__btn:active {
  transform: scale(0.95);
}

/* ---- Settings Gear Dot Indicator ---- */

.settings-btn {
  position: relative;
}

.settings-btn__dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  pointer-events: none;
  animation: badgePop 300ms var(--spring);
}

/* ---- Settings About Block ---- */

.settings-about {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.settings-about__versions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
  font-size: 11px;
  color: var(--grey-muted);
  line-height: 1.3;
}

.settings-about__sep {
  color: var(--grey-muted);
}

.settings-about__version {
  font-size: 11px;
  color: var(--grey-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-about__check-btn {
  width: 100%;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(226, 0, 0, 0.12);
  color: var(--red-bright);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 200ms var(--spring), background 150ms ease, opacity 150ms ease;
}

.settings-about__check-btn:hover {
  background: rgba(226, 0, 0, 0.2);
  transform: scale(1.02);
}

.settings-about__check-btn:active {
  transform: scale(0.98);
}

.settings-about__check-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.settings-about__check-btn.spinning,
.settings-about__check-btn.spinning:disabled {
  opacity: 1;
  cursor: default;
  animation: updateBtnPulse 1.4s ease-in-out infinite;
}

.settings-about__check-btn.spinning .ui-icon {
  animation: spin 800ms linear infinite;
  color: var(--red-bright);
}

@keyframes updateBtnPulse {
  0%, 100% { background: rgba(226, 0, 0, 0.14); }
  50%       { background: rgba(226, 0, 0, 0.28); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---- Update Status (shared) ---- */

.update-status-row {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 14px;
  padding: 0 2px;
}

.update-status-row.active {
  display: flex;
}

.update-status__spinner {
  flex-shrink: 0;
  color: var(--yellow-bright);
  animation: spin 800ms linear infinite;
}

.update-status {
  display: block;
  font-size: 11px;
  color: var(--grey-muted);
  min-height: 14px;
  line-height: 1.35;
  transition: opacity 300ms ease, color 300ms ease;
}

.update-status:empty {
  display: none;
}

.update-status.progress {
  color: var(--yellow-bright);
}

.update-status.error {
  color: var(--color-error);
}

.update-status.success {
  color: var(--color-success);
}

/* ---- Update Dialog (standalone, not reusing delete-dialog) ---- */

.update-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms var(--ease);
  -webkit-app-region: no-drag;
}

.update-dialog-overlay.visible {
  opacity: 1;
}

.update-dialog-panel {
  width: min(340px, calc(100vw - 40px));
  box-sizing: border-box;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 24px 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px color-mix(in srgb, var(--red-bright) 24%, transparent);
  transform: scale(0.92) translateY(8px);
  transition: transform 250ms var(--spring);
}

.update-dialog-overlay.visible .update-dialog-panel {
  transform: scale(1) translateY(0);
}

.update-dialog__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--red-bright);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--red-bright) 32%, transparent);
}

.update-dialog__icon .ui-icon {
  font-size: 24px;
}

.update-dialog__title {
  font-size: 18px;
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
}

.update-dialog__subtitle {
  max-width: 280px;
  font-size: 13px;
  color: var(--grey-muted);
  line-height: 1.5;
}

.update-dialog__actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.update-dialog__btn {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 200ms var(--spring);
}

.update-dialog__btn:hover {
  transform: scale(1.02);
}

.update-dialog__btn:active {
  transform: scale(0.97);
}

.update-dialog__btn--primary {
  background: var(--red-bright);
  color: var(--white);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--red-bright) 24%, transparent);
}

.update-dialog__btn-label {
  font-size: 14px;
  font-weight: 700;
}

.update-dialog__btn-sub {
  font-size: 11px;
  opacity: 0.78;
}

.update-dialog__cancel {
  width: 100%;
  height: 36px;
  background: color-mix(in srgb, var(--white) 8%, transparent);
  border: none;
  border-radius: var(--radius-pill);
  color: var(--grey-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 150ms ease,
    background 150ms ease,
    transform 200ms var(--spring);
}

.update-dialog__cancel:hover {
  color: var(--white);
  background: color-mix(in srgb, var(--white) 14%, transparent);
  transform: scale(1.02);
}

.update-dialog__cancel:active {
  transform: scale(0.98);
}

/* ============================================================
   Help / Supported Services — Fixed bottom-left
   ============================================================ */

.help-anchor {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 12;
  -webkit-app-region: no-drag;
}

.help-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red-dark);
  color: var(--red-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 250ms var(--spring),
    background 200ms var(--ease);
}

.help-btn:hover {
  transform: scale(1.08);
}

.help-btn:active {
  transform: scale(0.92);
}

.help-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 220px;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  opacity: 0;
  transform: scale(0.85) translateY(8px);
  transform-origin: bottom left;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 350ms var(--spring);
}

.help-popover.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.help-popover__heading {
  font-size: 13px;
  color: var(--white);
}

.help-popover__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.help-chip {
  font-size: 12px;
  color: var(--white);
  background: rgba(255,255,255,0.08);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.help-chip--secret {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  animation: slideDown 300ms var(--spring);
}

.help-popover__disclaimer {
  font-size: 11px;
  color: var(--grey-muted);
  line-height: 1.45;
}

/* ============================================================
   Status Toast — Fixed center-top pill
   ============================================================ */

.status-message {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 12px;
  width: max-content;
  max-width: min(520px, calc(100vw - 48px));
  white-space: normal;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-14px);
  -webkit-app-region: no-drag;
  transition:
    opacity 220ms var(--ease),
    transform 380ms var(--spring);
}

.status-message.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.status-message.error   { background: #3a0a08; color: var(--color-error); }
.status-message.success { background: #0a2e15; color: var(--color-success); }
.status-message.warning { background: #2e2500; color: var(--color-warning); }
.status-message.info    { background: #1a1a2e; color: var(--color-info); }
.status-message.update  { background: var(--red-dark); color: var(--red-bright); }

.status-message__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.status-message__text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.status-action-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  color: var(--red-bright);
  border: 1.5px solid rgba(226,0,0,0.3);
  border-radius: var(--radius-pill);
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-app-region: no-drag;
  transition: background 150ms var(--ease), transform 150ms var(--spring);
}

.status-action-btn:hover {
  background: rgba(226,0,0,0.1);
}

.status-action-btn:active {
  transform: scale(0.94);
}

.status-action-btn .ui-icon {
  font-size: 12px;
}

/* Update toast action button inherits brand colour from .update class */
.status-message.update .status-action-btn {
  color: var(--red-bright);
  border-color: rgba(226,0,0,0.35);
}

.status-message.update .status-action-btn:hover {
  background: rgba(226,0,0,0.15);
}

.status-dismiss-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: currentColor;
  opacity: 0.45;
  cursor: pointer;
  padding: 0;
  font-size: 11px;
  -webkit-app-region: no-drag;
  transition: opacity 150ms var(--ease), transform 150ms var(--spring);
}

.status-dismiss-btn:hover {
  opacity: 1;
}

.status-dismiss-btn:active {
  transform: scale(0.88);
}

/* ============================================================
   Drop Overlay
   ============================================================ */

.drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(73,5,4,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  align-items: center;
  justify-content: center;
  animation: fadeIn 200ms var(--ease);
}

.drop-overlay.visible { display: flex; }

.drop-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 28px;
  border: 2px dashed var(--red-bright);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--red-bright);
  font-size: 16px;
}

.drop-overlay__icon {
  font-size: 32px;
  opacity: 0.8;
}

/* ============================================================
   Animations
   ============================================================ */

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  8%, 41%  { transform: translateX(-10px); }
  25%, 58% { transform: translateX(10px); }
  75%      { transform: translateX(-5px); }
  92%      { transform: translateX(5px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.8; }
}

@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes barShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes processingPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes btnKick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes confirmPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes arrowNudge {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--red-bright); border-radius: 999px; }

/* ============================================================
   Settings Action Button (History)
   ============================================================ */

.settings-action-btn {
  width: 100%;
  height: 34px;
  background: var(--red-bright);
  color: var(--red-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 200ms var(--spring);
}

.settings-action-btn:hover {
  transform: scale(1.02);
}

.settings-action-btn:active {
  transform: scale(0.97);
}


/* ============================================================
   History View — Full-screen overlay (sits outside .app)
   ============================================================ */

.history-view {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  flex-direction: column;
  padding: 0;
  background: transparent;
  -webkit-app-region: drag;
  overflow: hidden;
}

.history-view.visible {
  display: flex;
  animation: fadeIn 200ms var(--ease);
}

.history-view > * {
  -webkit-app-region: no-drag;
}

/* ---- Header ---- */

.history-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 48px 28px 0;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.history-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red-dark);
  color: var(--red-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 250ms var(--spring), background 200ms var(--ease);
}

.history-back:hover {
  transform: scale(1.08);
}

.history-back:active {
  transform: scale(0.92);
}

.history-title {
  font-size: 18px;
  color: var(--white);
  flex: 1;
}

.history-export-btn {
  font-size: 13px;
  color: var(--red-bright);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(226,0,0,0.12);
  border: 1.5px solid rgba(226,0,0,0.25);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 200ms var(--spring), background 200ms var(--ease), border-color 200ms var(--ease);
}

.history-export-btn:hover {
  background: rgba(226,0,0,0.2);
  border-color: rgba(226,0,0,0.45);
  transform: scale(1.03);
}

.history-export-btn:active {
  transform: scale(0.97);
}

.history-export-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.history-clear-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--red-bright);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--red-dark);
  transition: transform 200ms var(--spring), color 200ms var(--ease);
}

.history-clear-btn:hover {
  color: var(--color-error);
  transform: scale(1.03);
}

.history-clear-btn:active {
  transform: scale(0.97);
}

/* ---- Toolbar (search + filters) ---- */

.history-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.history-search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 22px 0 20px;
  background: var(--red-dark);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  transition: border-color 300ms var(--ease);
  gap: 10px;
}

.history-search-wrap:focus-within {
  border-color: var(--red-bright);
}

.history-search__icon {
  flex-shrink: 0;
  color: var(--red-bright);
  pointer-events: none;
  font-size: 15px;
  line-height: 1;
}

.history-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
}

.history-search::placeholder {
  color: rgba(226, 0, 0, 0.55);
}

.history-search:focus {
  outline: none;
}

.history-filters {
  display: flex;
  position: relative;
  background: var(--red-dark);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 0;
  flex-shrink: 0;
}

.history-filter-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--red-bright);
  border-radius: var(--radius-pill);
  z-index: 0;
  pointer-events: none;
  transition: transform 450ms var(--spring), width 450ms var(--spring);
  will-change: transform, width;
}

.history-filter {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  cursor: pointer;
  color: var(--red-bright);
  transition: color 200ms var(--ease);
}

.history-filter[data-filter].active {
  background: transparent;
  color: var(--red-dark);
}

.history-filter:not([data-filter]).active {
  background: var(--proj-dark, var(--red-bright));
  color: var(--proj-bright, var(--white));
}

.history-filter:not(.active):hover {
  color: var(--white);
}

/* ---- Sort row ---- */

.history-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.history-count {
  font-size: 13px;
  color: var(--red-bright);
}

.history-sort-wrap {
  position: relative;
}

.history-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--red-bright);
  cursor: pointer;
  transition: color 200ms var(--ease);
}

.history-sort-btn:hover,
.history-sort-btn.active {
  color: var(--white);
}

.history-sort-btn__chevron {
  font-size: 11px;
  opacity: 0.6;
}

.history-sort-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 172px;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 6px;
  z-index: 300;
  flex-direction: column;
  gap: 2px;
  /* opacity / transform / visibility handled by WAAPI in renderer.js */
}

.history-sort-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 150ms var(--ease);
}

.history-sort-menu__item:hover {
  background: rgba(226, 0, 0, 0.12);
}

.history-sort-menu__item.active {
  background: var(--red-bright);
  color: #fff;
}

/* ---- List ---- */

.history-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 28px 28px;
}

/* ---- Entry card ---- */

.history-entry {
  background: var(--proj-dark, var(--red-dark));
  border-radius: var(--radius-card);
  overflow: hidden;
  flex-shrink: 0;
  animation: slideDown 250ms var(--ease);
}

.history-entry__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background 150ms var(--ease);
}

.history-entry__header:hover {
  background: rgba(226,0,0,0.06);
}

.history-entry__info {
  flex: 1;
  min-width: 0;
}

.history-entry__title {
  font-size: 14px;
  color: var(--proj-pill-text, var(--red-bright));
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-entry__meta {
  font-size: 13px;
  color: var(--proj-bright-sub, rgba(226,0,0,0.55));
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-entry__quality {
  font-size: 12px;
  color: var(--proj-bright, var(--red-bright));
  background: var(--proj-subtle, rgba(226,0,0,0.12));
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.history-entry__date {
  font-size: 12px;
  color: var(--proj-bright-sub, var(--red-bright));
  flex-shrink: 0;
  white-space: nowrap;
}

.history-entry__sort-badge {
  font-size: 12px;
  color: var(--proj-bright-sub, var(--grey-muted));
  flex-shrink: 0;
  white-space: nowrap;
}

.history-entry__chevron {
  color: var(--proj-bright-sub, var(--red-bright));
  flex-shrink: 0;
  transition: transform 250ms var(--spring);
  display: flex;
  align-items: center;
}

.history-entry.expanded .history-entry__chevron {
  transform: rotate(90deg);
}

/* ---- Detail (expanded) ---- */

/* Height is driven by WAAPI in JS — starts at 0, no layout footprint when closed */
.history-entry__detail {
  height: 0;
  overflow: hidden;
}

.history-entry__detail-inner {
  padding: 0 16px 16px;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}

.history-entry.expanded .history-entry__detail-inner {
  opacity: 1;
  transition: opacity 300ms var(--ease) 80ms;
}

.history-entry__detail.is-closing .history-entry__detail-inner {
  opacity: 0;
  transition: opacity 160ms var(--ease);
}

.history-entry__detail-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin-bottom: 14px;
}

.history-detail-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px 16px;
  font-size: 13px;
  align-items: center;
}

.history-detail-grid dt {
  color: var(--proj-bright-sub, var(--red-bright));
  white-space: nowrap;
  align-self: center;
}

/* dd is a flex row: text truncates on the left, copy btn trails immediately after */
.history-detail-grid dd {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--proj-pill-text, var(--red-bright));
  align-self: center;
}

.history-dd-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.history-view .history-dd-text {
  user-select: text;
  cursor: text;
}

/* File-link paths should be pointer-clickable, not text-selectable —
   user-select: text was preventing reliable click events in Electron */
.history-view dd.file-link .history-dd-text {
  cursor: pointer;
  user-select: none;
}

.history-copy-row-btn {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: transparent;
  color: var(--red-bright);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0;
  transition:
    opacity 150ms var(--ease),
    background 150ms var(--ease),
    color 150ms var(--ease),
    transform 150ms var(--spring);
  border: none;
  padding: 0;
}

.history-entry__detail-inner:hover .history-copy-row-btn {
  opacity: 0.3;
}

.history-copy-row-btn:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  transform: scale(1.1);
}

.history-copy-row-btn:active {
  transform: scale(0.9);
}

.history-copy-row-btn.copied {
  opacity: 1 !important;
  color: var(--color-success);
}

.history-copy-row-btn--empty {
  pointer-events: none;
  cursor: default;
}

/* ---- Expandable detail rows ---- */

.history-expand-row-btn {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: transparent;
  color: var(--red-bright);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  opacity: 0.35;
  transition:
    opacity 150ms var(--ease),
    background 150ms var(--ease),
    color 150ms var(--ease),
    transform 200ms var(--spring);
  border: none;
  padding: 0;
}

.history-expand-row-btn.visible {
  display: flex;
}

.history-expand-row-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.08);
  color: var(--white);
  transform: scale(1.1);
}

.history-expand-row-btn:active {
  transform: scale(0.9);
}

.history-expand-row-btn[aria-expanded="true"] {
  transform: rotate(180deg);
}

.history-expand-row-btn[aria-expanded="true"]:hover {
  transform: rotate(180deg) scale(1.1);
}

.history-expand-row-btn[aria-expanded="true"]:active {
  transform: rotate(180deg) scale(0.9);
}

.history-dd--expanded .history-dd-text {
  white-space: normal;
  word-break: break-word;
  text-overflow: clip;
  overflow: visible;
}

.history-dd--expanded {
  flex-wrap: wrap;
  align-items: flex-start;
}

.history-detail-grid dt:has(+ .history-dd--expanded) {
  align-self: start;
  padding-top: 2px;
}

.history-detail-grid dd.muted {
  color: var(--proj-bright-sub, var(--red-bright));
}

.history-detail-grid dd.file-link {
  color: var(--proj-bright, var(--red-bright));
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 200ms var(--ease), color 200ms var(--ease);
}

.history-detail-grid dd.file-link:hover {
  text-decoration-color: var(--proj-bright, var(--red-bright));
}

.history-detail-grid dd.file-link.missing {
  color: var(--red-bright);
  text-decoration: line-through;
  text-decoration-color: var(--red-bright);
  cursor: default;
}

/* ---- Detail actions ---- */

.history-entry__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.history-entry__actions::-webkit-scrollbar {
  display: none;
}

.history-action-btn {
  height: 32px;
  padding: 0 13px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition:
    transform 200ms var(--spring),
    background 150ms var(--ease),
    color 150ms var(--ease),
    border-color 150ms var(--ease);
}

.history-action-btn:hover {
  transform: scale(1.03);
}

.history-action-btn:active {
  transform: scale(0.97);
}

/* Tier 1 — Primary: solid red, dark red text (not white) */
.history-action-btn--redownload {
  background: var(--red-bright);
  color: var(--red-dark);
}

/* Tier 2 — same dim ghost style as Open Original */
.history-action-btn--reveal,
.history-action-btn--copyinfo {
  background: transparent;
  color: var(--proj-bright-sub, rgba(226, 0, 0, 0.5));
  border: 1.5px solid color-mix(in srgb, var(--proj-bright-sub, rgba(226,0,0,1)) 22%, transparent);
}

.history-action-btn--reveal:hover,
.history-action-btn--copyinfo:hover {
  color: var(--proj-bright, var(--red-bright));
  border-color: color-mix(in srgb, var(--proj-bright-sub, rgba(226,0,0,1)) 50%, transparent);
  background: color-mix(in srgb, var(--proj-bright-sub, rgba(226,0,0,1)) 8%, transparent);
}

/* Tier 3 — subtle outlined, project sub-colour */
.history-action-btn--open {
  background: transparent;
  color: var(--proj-bright-sub, rgba(226, 0, 0, 0.5));
  border: 1.5px solid color-mix(in srgb, var(--proj-bright-sub, rgba(226,0,0,1)) 22%, transparent);
}

.history-action-btn--open:hover {
  color: var(--proj-bright, var(--red-bright));
  border-color: color-mix(in srgb, var(--proj-bright-sub, rgba(226,0,0,1)) 50%, transparent);
  background: color-mix(in srgb, var(--proj-bright-sub, rgba(226,0,0,1)) 8%, transparent);
}

/* Tier 4 — Destructive: always bright red, dark red fill on hover */
.history-action-btn--delete {
  background: transparent;
  color: var(--red-bright);
  border: 1.5px solid rgba(226, 0, 0, 0.25);
  margin-left: auto;
}

.history-action-btn--delete:hover {
  background: var(--red-dark);
  border-color: var(--red-bright);
  color: var(--red-bright);
}

.pop {
  animation: confirmPop 250ms var(--spring);
}

/* ---- Clickable file path in detail grid ---- */

.history-detail-grid .file-link {
  color: var(--proj-bright, var(--red-bright));
  cursor: pointer;
  transition: opacity 200ms var(--ease);
}

.history-detail-grid .file-link:hover {
  opacity: 0.75;
}

.history-detail-grid .file-link.missing {
  color: var(--red-bright);
  text-decoration: line-through;
  cursor: default;
}

/* ---- Clear All confirm state ---- */

.history-clear-btn.confirm {
  color: var(--color-error);
  background: rgba(255,69,58,0.15);
}

/* ============================================================
   History view toggles
   ============================================================ */

.history-view-toggles {
  display: flex;
  align-items: center;
  gap: 2px;
}

.history-view-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red-bright);
  cursor: pointer;
  transition: color 150ms var(--ease), background 150ms var(--ease);
}

.history-view-btn:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.history-view-btn.active {
  color: var(--red-dark);
  background: var(--red-bright);
}

/* ============================================================
   Thumbnail shared — all views
   ============================================================ */

.history-thumb--placeholder {
  background: var(--proj-dark, var(--red-dark));
}

.history-thumb__icon {
  font-size: inherit;
  color: var(--proj-bright, var(--red-bright));
  opacity: 0.5;
}

.history-thumb__carousel-badge {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.history-thumb__carousel-badge .hgi-stroke {
  font-size: 12px;
  opacity: 0.9;
}

/* ============================================================
   List view — thumbnail strip
   ============================================================ */

.history-list--list .history-entry {
  /* existing card, no layout change */
}

.history-entry__thumb {
  width: 56px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--red-bright);
}

.history-entry__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Grid view
   ============================================================ */

.history-list--grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(176px, 100%), 1fr));
  gap: 12px;
  align-content: start;
  flex-direction: unset;
  padding-top: 14px;
  overflow-x: hidden;
}

.history-grid-card {
  background: var(--proj-dark, var(--red-dark));
  border-radius: var(--radius-card);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  animation: slideDown 250ms var(--ease);
  transition: transform 160ms var(--spring), box-shadow 160ms var(--ease);
  will-change: transform;
}

.history-grid-card:hover {
  transform: translateY(2px) scale(1.025);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

.history-grid-card:active {
  transform: scale(0.97);
}

.history-grid-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--red-bright);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
}

.history-grid-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-grid-card__sort-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.history-grid-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.history-grid-card__title {
  font-size: 13px;
  color: var(--proj-pill-text, var(--white));
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
}

.history-grid-card__meta {
  font-size: 12px;
  color: var(--proj-bright-sub, var(--red-bright));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 7px;
}

.history-grid-card__quality {
  font-size: 11px;
  color: var(--proj-bright, var(--red-bright));
  background: var(--proj-subtle, rgba(226,0,0,0.12));
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.history-grid-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 7px;
}

/* Scale down the shared pill/ghost styles for compact grid use */
.history-grid-card__project.history-entry__project {
  font-size: 11px;
  padding: 2px 8px;
  max-width: 100px;
}

.history-grid-card__project.history-entry__add-project {
  font-size: 11px;
  padding: 1px 8px;
}

/* Grid card delete button */
.history-grid-card__delete {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  font-size: 14px;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--spring);
  z-index: 2;
}

.history-grid-card:hover .history-grid-card__delete {
  opacity: 1;
}

.history-grid-card__delete:hover {
  background: var(--red-bright);
  transform: scale(1.1);
}

.history-grid-card__delete:active {
  transform: scale(0.92);
}

/* ============================================================
   Compact view
   ============================================================ */

.history-list--compact {
  gap: 2px !important;
}

.history-compact-row {
  background: var(--proj-dark, var(--red-dark));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  animation: slideDown 200ms var(--ease);
  transition: background 130ms var(--ease);
}

.history-compact-row:hover {
  background: color-mix(in srgb, var(--proj-dark, var(--red-dark)) 80%, rgba(255,255,255,0.15) 20%);
}

.history-compact-row:active {
  transform: scale(0.995);
}

.history-compact-row__thumb {
  width: 40px;
  height: 28px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--red-bright);
}

.history-compact-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.history-compact-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.history-compact-row__title {
  font-size: 13px;
  color: var(--proj-pill-text, var(--white));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.history-compact-row__channel {
  font-size: 12px;
  color: var(--proj-bright-sub, var(--red-bright));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 28%;
}

.history-compact-row__quality {
  font-size: 11px;
  color: var(--proj-bright, var(--red-bright));
  background: var(--proj-subtle, rgba(226,0,0,0.12));
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Scale down shared pill for compact row */
.history-compact-row__project.history-entry__project {
  font-size: 11px;
  padding: 2px 8px;
  max-width: 90px;
  flex-shrink: 0;
}

.history-compact-row__project.history-entry__add-project {
  font-size: 11px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.history-compact-row__date {
  font-size: 11px;
  color: var(--proj-bright-sub, var(--red-bright));
  flex-shrink: 0;
  white-space: nowrap;
}

/* Compact row delete button */
.history-compact-row__delete {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--grey-muted);
  cursor: pointer;
  opacity: 0;
  font-size: 14px;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease), transform 0.15s var(--spring);
}

.history-compact-row:hover .history-compact-row__delete {
  opacity: 1;
}

.history-compact-row__delete:hover {
  color: var(--color-error);
  background: rgba(255, 69, 58, 0.15);
  transform: scale(1.1);
}

.history-compact-row__delete:active {
  transform: scale(0.9);
}

/* ============================================================
   Detail modal (grid + compact)
   ============================================================ */

.history-detail-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  padding: 28px 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.history-detail-modal-backdrop.visible {
  opacity: 1;
}

.history-detail-modal-panel {
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  transform: translateY(14px);
  transition: transform 300ms var(--spring);
  scrollbar-width: thin;
}

.history-detail-modal-backdrop.visible .history-detail-modal-panel {
  transform: translateY(0);
}

/* Close button sits on the backdrop (not inside the panel) so it
   remains visible regardless of how far the user scrolls the panel */
.history-detail-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--red-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--spring);
}

.history-detail-modal-close:hover {
  background: rgba(226,0,0,0.5);
  color: var(--white);
  transform: scale(1.08);
}

/* Inside modal: force entry expanded, no chevron */
.history-detail-modal-panel .history-entry__chevron {
  display: none;
}

.history-detail-modal-panel .history-entry {
  animation: none;
}

/* ---- History delete dialog ---- */

.delete-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.delete-dialog-overlay.visible {
  opacity: 1;
}

.delete-dialog {
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 24px 20px 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transform: scale(0.9) translateY(8px);
  transition: transform 0.25s var(--spring);
}

.delete-dialog-overlay.visible .delete-dialog {
  transform: scale(1) translateY(0);
}

.delete-dialog__title {
  font-size: 18px;
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
}

.delete-dialog__subtitle {
  font-size: 12px;
  color: var(--grey-muted);
  margin-top: -10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delete-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.delete-dialog__btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  font-family: inherit;
}

.delete-dialog__btn:hover {
  opacity: 0.85;
  transform: scale(0.98);
}

.delete-dialog__btn:active {
  transform: scale(0.96);
}

.delete-dialog__btn--safe {
  background: rgba(255, 255, 255, 0.12);
}

.delete-dialog__btn--danger {
  background: var(--red-bright);
}

.delete-dialog__btn-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
}

.delete-dialog__btn-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.delete-dialog__btn--danger .delete-dialog__btn-sub {
  color: rgba(255, 255, 255, 0.8);
}

.delete-dialog__cancel {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--grey-muted);
  padding: 4px 0;
  text-align: center;
  transition: color 0.15s var(--ease);
}

.delete-dialog__cancel:hover {
  color: var(--white);
}

/* ---- Empty state ---- */

.history-empty {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--red-bright);
  font-size: 14px;
  padding-bottom: 60px;
}

.history-empty.visible {
  display: flex;
}

.history-empty__sticker {
  width: 220px;
  height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
}

/* ============================================================
   Path Row — path display + project selector
   ============================================================ */

.path-row {
  display: flex;
  align-items: flex-end;
  width: 92%;
  max-width: 900px;
  margin-bottom: 6px;
  padding: 0 28px;
  gap: 8px;
  box-sizing: border-box;
}

.path-row .path-display {
  margin-bottom: 0;
  padding-right: 0;
  width: auto;
  max-width: none;
  text-align: left;
}

.path-row__spacer {
  flex: 1;
}

/* ============================================================
   Project Selector
   ============================================================ */

.path-row.project-open {
  z-index: 200;
}

.project-anchor {
  position: relative;
  flex-shrink: 0;
}

.project-btn {
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--red-dark);
  color: var(--red-bright);
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: background 200ms var(--ease), color 200ms var(--ease);
  white-space: nowrap;
}

.project-btn:hover {
  background: rgba(226,0,0,0.15);
  color: var(--red-bright);
}

.project-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--proj-dark, var(--red-dark));
  color: var(--proj-bright, var(--red-bright));
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  animation: badgePop 300ms var(--spring);
}

.project-pill__name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}

.project-pill__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--proj-bright, var(--red-bright));
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  transition: opacity 150ms var(--ease);
}

.project-pill__clear .ui-icon {
  font-size: 12px;
}

.project-pill__clear:hover {
  opacity: 0.7;
}

.project-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  -webkit-app-region: no-drag;
}

.project-backdrop.visible {
  display: block;
}

.project-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: #490504;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 200;
  opacity: 0;
  transform: scale(0.85) translateY(8px);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 350ms var(--spring);
}

.project-dropdown.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.project-dropdown__input {
  height: 36px;
  padding: 0 12px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  outline: none;
  transition: border-color 200ms var(--ease);
}

.project-dropdown__input:focus {
  border-color: var(--red-bright);
}

.project-dropdown__input::placeholder {
  color: var(--grey-muted);
}

.project-dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}

.project-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 150ms var(--ease);
}

.project-dropdown__item:hover {
  background: var(--proj-hover, rgba(226,0,0,0.12));
  color: var(--proj-bright, var(--white));
}

.project-dropdown__item.active {
  background: var(--proj-dark, var(--red-dark));
  color: var(--proj-bright, var(--red-bright));
}

.project-dropdown__item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-dropdown__item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-dropdown__item-count {
  font-size: 11px;
  color: var(--grey-muted);
  flex-shrink: 0;
}

.project-dropdown__item.active .project-dropdown__item-count {
  color: rgba(255,255,255,0.6);
}

.project-dropdown__item-subfolder {
  flex-shrink: 0;
  opacity: 0;
  padding: 2px;
  margin-left: 4px;
  border-radius: 4px;
  color: var(--grey-muted);
  cursor: pointer;
  transition: opacity 150ms var(--ease), color 150ms var(--ease);
}

.project-dropdown__item-subfolder.active {
  color: var(--red-bright);
}

.project-dropdown__item:hover .project-dropdown__item-subfolder {
  opacity: 0.6;
}

.project-dropdown__item-subfolder:hover {
  opacity: 1 !important;
}

.project-dropdown__item-delete {
  flex-shrink: 0;
  opacity: 0;
  padding: 2px;
  margin-left: 4px;
  border-radius: 4px;
  color: var(--grey-muted);
  cursor: pointer;
  transition: opacity 150ms var(--ease), color 150ms var(--ease);
}

.project-dropdown__item:hover .project-dropdown__item-delete {
  opacity: 0.6;
}

.project-dropdown__item-delete:hover {
  opacity: 1 !important;
  color: var(--red-bright);
}

.project-dropdown__hint {
  font-size: 11px;
  color: var(--grey-muted);
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-dropdown__empty {
  font-size: 12px;
  color: var(--grey-muted);
  text-align: center;
  padding: 16px 8px;
}

/* ============================================================
   History — Project Badge
   ============================================================ */

.history-entry__project {
  font-size: 12px;
  color: var(--proj-bright, var(--red-bright));
  background: var(--proj-subtle, rgba(226,0,0,0.12));
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    filter 150ms var(--ease),
    transform 100ms var(--ease);
}

.history-entry__project:hover {
  filter: brightness(1.2);
}

.history-entry__project:active {
  transform: scale(0.95);
}

/* Ghost pill — shown on hover for entries without a project */
.history-entry__add-project {
  font-size: 12px;
  color: var(--red-bright);
  background: transparent;
  border: 1.5px dashed rgba(226, 0, 0, 0.35);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.5;
  pointer-events: auto;
  transition:
    opacity 150ms var(--ease),
    color 150ms var(--ease),
    border-color 150ms var(--ease);
}

.history-entry:hover .history-entry__add-project,
.history-grid-card:hover .history-entry__add-project,
.history-compact-row:hover .history-entry__add-project {
  opacity: 1;
}

.history-entry__add-project:hover {
  color: var(--white);
  border-color: rgba(226, 0, 0, 0.75);
}

/* ============================================================
   History — Project Reassign Popover
   ============================================================ */

.history-reassign-popover {
  position: fixed;
  z-index: 9000;
  min-width: 180px;
  max-width: 240px;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: scale(0.92) translateY(-4px);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 180ms var(--ease),
    transform 220ms var(--spring);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.48),
    0 2px 8px rgba(0, 0, 0, 0.32);
}

.history-reassign-popover.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.history-reassign-popover__remove {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--red-bright);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.history-reassign-popover__remove:hover {
  background: rgba(255, 69, 58, 0.12);
  color: var(--color-error);
}

.history-reassign-popover__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 8px;
  flex-shrink: 0;
}

.history-reassign-popover__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 150ms var(--ease);
}

.history-reassign-popover__item:hover {
  background: var(--proj-hover, rgba(226, 0, 0, 0.12));
}

.history-reassign-popover__item.active {
  background: var(--proj-dark, var(--red-dark));
  color: var(--proj-bright, var(--white));
}

.history-reassign-popover__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--proj-bright, var(--red-bright));
  flex-shrink: 0;
}

.history-reassign-popover__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--red-bright);
  text-align: center;
}

.history-reassign-popover__new-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(226, 0, 0, 0.55);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.history-reassign-popover__new-btn:hover {
  background: rgba(226, 0, 0, 0.1);
  color: var(--red-bright);
}

.history-reassign-popover__new-wrap {
  padding: 6px 8px 4px;
}

.history-reassign-popover__new-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(226, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  color: var(--white);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 200ms var(--ease);
}

.history-reassign-popover__new-input::placeholder {
  color: rgba(226, 0, 0, 0.4);
}

.history-reassign-popover__new-input:focus {
  border-color: var(--red-bright);
}

/* ============================================================
   History — Project Filter
   ============================================================ */

.history-project-filter {
  position: relative;
  margin-left: 4px;
}

.history-project-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.history-project-filter-btn__icon {
  font-size: 12px;
}

.history-project-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--red-dark);
  border-radius: var(--radius-card);
  padding: 6px;
  z-index: 300;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 200ms var(--ease),
    transform 250ms var(--spring);
}

.history-project-menu.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.history-project-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 150ms var(--ease);
}

.history-project-menu__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.history-project-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-project-menu__delete {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  color: rgba(226, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease);
  margin-left: auto;
}

.history-project-menu__item:hover .history-project-menu__delete {
  opacity: 1;
}

.history-project-menu__delete:hover {
  background: rgba(255, 69, 58, 0.15);
  color: var(--color-error);
}

.history-project-filter-btn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.history-project-menu__item:hover {
  background: var(--proj-hover, rgba(226,0,0,0.12));
}

.history-project-menu__item.active {
  background: var(--proj-dark, var(--red-bright));
  color: var(--proj-bright, var(--white));
}

/* ============================================================
   Accessibility
   ============================================================ */

.phone-access-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  -webkit-app-region: no-drag;
}

.phone-access-overlay[hidden] {
  display: none;
}

.phone-access-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 460px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--red-dark);
  color: var(--white);
}

.phone-access-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.phone-access-panel__header h2 {
  font-size: 18px;
}

.phone-access-panel__close,
.phone-access-panel__remove {
  display: flex;
  border: none;
  background: transparent;
  color: var(--grey-muted);
  cursor: pointer;
}

.phone-access-panel__text,
.phone-access-panel__label,
.phone-access-panel__empty {
  font-size: 13px;
  color: var(--grey-muted);
  list-style: none;
}

.phone-access-panel__error {
  font-size: 13px;
  color: var(--color-error);
}

.phone-access-panel__input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 2px solid var(--grey-muted);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 13px;
  outline: none;
  user-select: text;
}

.phone-access-panel__input:focus {
  border-color: var(--red-bright);
}

.phone-access-panel__code {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
  word-break: break-all;
  user-select: text;
}

.phone-access-panel__add {
  display: flex;
  gap: 8px;
}

.phone-access-panel__btn {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--red-bright);
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  transition: scale 150ms var(--ease);
}

.phone-access-panel__btn:active {
  scale: 0.96;
}

.phone-access-panel__invite {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phone-access-panel__invite[hidden] {
  display: none;
}

.phone-access-panel__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  list-style: none;
}

.phone-access-panel__friend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Theme Toggle — dark / auto / light icon-button group
   ============================================================ */

.theme-toggle {
  display: flex;
  position: relative;
  gap: 2px;
  background: rgba(226,0,0,0.18);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.settings-row--stacked .theme-toggle {
  width: 100%;
}

.theme-btn {
  flex: 1;
  position: relative;
  z-index: 1;
  height: 28px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(226,0,0,0.75);
  cursor: pointer;
  transition:
    color 200ms var(--ease),
    transform 150ms var(--spring);
}

.theme-btn:hover:not(.active) {
  color: var(--red-bright);
  background: rgba(226,0,0,0.2);
}

.theme-btn:active {
  transform: scale(0.88);
}

.theme-btn.active {
  color: var(--red-dark);
}

/* Light mode overrides for the toggle */
html.light-mode .theme-toggle {
  background: rgba(0, 0, 0, 0.08);
}

html.light-mode .theme-btn:hover:not(.active) {
  color: var(--red-bright);
}

html.light-mode .theme-btn.active {
  color: #ffffff;
}

/* ============================================================
   Light Mode — override transparent-background elements only
   Has zero effect in dark mode.
   ============================================================ */

/* ---- Light mode — applied via html.light-mode class (see renderer.js applyTheme) ---- */

/* Override core brand variables so every var(--red-dark) surface
   becomes warm pastel pink, and muted text stays readable. */
html.light-mode {
  --red-dark:   hsl(0, 68%, 80%);
  --grey-muted: hsl(0, 25%, 44%);
}

/* ---- White text that now sits on the pink containers ---- */
html.light-mode .settings-label { color: var(--red-bright); }
html.light-mode .settings-about__version,
html.light-mode .settings-about__sep {
  color: color-mix(in srgb, var(--red-bright) 48%, var(--grey-muted));
}

html.light-mode .settings-about__check-btn {
  color: var(--red-bright);
  background: color-mix(in srgb, var(--red-bright) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red-bright) 22%, transparent);
}

html.light-mode .settings-about__check-btn:hover {
  background: color-mix(in srgb, var(--red-bright) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red-bright) 34%, transparent);
}
html.light-mode .settings-about__check-btn.spinning,
html.light-mode .settings-about__check-btn.spinning:disabled { animation: updateBtnPulseLight 1.4s ease-in-out infinite; }
html.light-mode .settings-about__check-btn.spinning .ui-icon { color: var(--red-bright); }

@keyframes updateBtnPulseLight {
  0%, 100% { background: color-mix(in srgb, var(--red-bright) 10%, transparent); }
  50%       { background: color-mix(in srgb, var(--red-bright) 20%, transparent); }
}
html.light-mode .settings-update-banner { background: var(--red-dark); color: var(--white); }
html.light-mode .settings-update-banner__btn { background: var(--red-bright); color: #fff; }
html.light-mode .update-dialog-overlay { background: rgba(0, 0, 0, 0.4); }
html.light-mode .update-dialog-panel {
  background: color-mix(in srgb, var(--red-dark) 88%, var(--white));
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px color-mix(in srgb, var(--red-bright) 20%, transparent);
}
html.light-mode .update-dialog__icon {
  background: var(--red-bright);
  color: var(--white);
}
html.light-mode .update-dialog__title { color: var(--red-bright); }
html.light-mode .update-dialog__subtitle { color: var(--grey-muted); }
html.light-mode .update-dialog__btn--primary { background: var(--red-bright); color: #fff; }
html.light-mode .update-dialog__cancel {
  color: var(--red-bright);
  background: color-mix(in srgb, var(--red-bright) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red-bright) 20%, transparent);
}
html.light-mode .update-dialog__cancel:hover {
  color: var(--red-bright);
  background: color-mix(in srgb, var(--red-bright) 15%, transparent);
}
html.light-mode .settings-btn__dot { background: var(--color-success); }
html.light-mode .queue-panel__title { color: var(--red-bright); }
html.light-mode .queue-panel__clear { color: var(--red-bright); }
html.light-mode .queue-panel__clear:hover {
  color: var(--red-bright);
  background: rgba(0, 0, 0, 0.07);
}
html.light-mode .queue-item__title { color: var(--proj-light-text, #111111); }
html.light-mode .help-popover__heading { color: var(--red-bright); }

/* ---- rgba-white subtle bg → rgba-black ---- */
html.light-mode .settings-divider { background: rgba(0, 0, 0, 0.1); }
html.light-mode .toggle { background: rgba(226,0,0,0.22); }
html.light-mode .toggle.active { background: var(--red-bright); }
html.light-mode .toggle__knob { background: var(--red-bright); }
html.light-mode .toggle.active .toggle__knob { background: #fff; }
html.light-mode .mode-switcher { background: rgba(226,0,0,0.15); }
html.light-mode .mode-switcher__btn { color: rgba(226,0,0,0.7); }
html.light-mode .mode-switcher__btn.active { color: #fff; }
html.light-mode .theme-toggle { background: rgba(226,0,0,0.15); }
html.light-mode .theme-btn { color: rgba(226,0,0,0.7); }
html.light-mode .theme-btn.active { color: #fff; }
html.light-mode .queue-item { background: rgba(0, 0, 0, 0.05); }
html.light-mode .queue-item__bar { background: rgba(0, 0, 0, 0.08); }
html.light-mode .queue-item__action {
  background: rgba(0, 0, 0, 0.06);
  color: var(--red-bright);
}
html.light-mode .queue-item__action:hover {
  background: rgba(0, 0, 0, 0.13);
  color: var(--red-bright);
}
html.light-mode .queue-item__detail {
  color: var(--proj-light-text, #555555);
}
html.light-mode .queue-item__quality {
  color: var(--proj-light-text, var(--red-bright));
  background: color-mix(in srgb, var(--proj-light-text, var(--red-bright)) 12%, transparent);
}
html.light-mode .queue-item__project {
  color: var(--proj-light-text, #6b0000);
  background: var(--proj-light-bg, rgba(226, 0, 0, 0.35));
}

/* ---- Help chips ---- */
html.light-mode .help-chip {
  background: rgba(0, 0, 0, 0.08);
  color: var(--red-bright);
}

/* ---- Quality dropdown (hardcoded background) ---- */
html.light-mode .quality-dropdown {
  background: hsl(0, 68%, 80%);
  border-color: rgba(0, 0, 0, 0.08);
}

html.light-mode .quality-dropdown__item { color: #111111; }

html.light-mode .quality-dropdown__item:hover {
  background: rgba(0, 0, 0, 0.08);
}

html.light-mode .quality-dropdown__item.active {
  background: rgba(0, 0, 0, 0.12);
  color: var(--red-bright);
}

/* ---- Status toasts — light tint bg, darkened text for contrast (WCAG AA) ---- */
html.light-mode .status-message.error   { background: rgba(255,  69, 58, 0.12); color: hsl(  3, 75%, 30%); }
html.light-mode .status-message.success { background: rgba( 48, 209, 88, 0.12); color: hsl(140, 65%, 22%); }
html.light-mode .status-message.warning { background: rgba(255, 214, 10, 0.14); color: hsl( 38, 100%, 25%); }
html.light-mode .status-message.info    { background: rgba(  0,   0,  0, 0.07); color: #111111; }
html.light-mode .status-message.update  { background: var(--red-dark); color: var(--proj-light-text, var(--red-bright)); }
html.light-mode .status-message.update .status-action-btn { color: var(--proj-light-text, var(--red-bright)); border-color: color-mix(in srgb, var(--proj-light-text, var(--red-bright)) 35%, transparent); }
html.light-mode .status-message.update .status-action-btn:hover { background: rgba(0,0,0,0.08); }

/* URL row border: white is invisible on a light vibrancy bg */
html.light-mode .url-row {
  border-color: rgba(0, 0, 0, 0.75);
}

html.light-mode .url-row:focus-within {
  border-color: var(--red-bright);
}

/* URL input text */
html.light-mode .url-input {
  color: #111111;
}

html.light-mode .url-input::placeholder {
  color: #888888;
}

/* Secondary text sitting on the transparent app background */
html.light-mode .path-display {
  color: #444444;
}

html.light-mode .url-hint {
  color: #555555;
}

html.light-mode .url-hint.clipboard {
  color: #111111;
}

html.light-mode .clip-range__separator {
  color: #555555;
}

html.light-mode .time-input-clear {
  background: var(--red-bright);
  color: var(--red-dark);
}

html.light-mode .time-input-wrap:has(.time-input.has-value),
html.light-mode .time-input-wrap:has(.time-input.has-value:focus),
html.light-mode .time-input-wrap:has(.time-input.auto-filled) {
  box-shadow: inset 0 0 0 2px rgba(48, 209, 88, 0.5);
}

/* Logo is all-red — no backing pill needed in light mode */

/* ---- Controls & video card ---- */

/* Video card — solid project colour (same token as history cards) */
html.light-mode .video-card {
  background: var(--proj-light-bg, var(--red-dark));
}

/* ---- Project selector ---- */

/* "No project" button */
html.light-mode .project-btn {
  background: rgba(226, 0, 0, 0.1);
  color: var(--red-bright);
  border: 1px solid rgba(226, 0, 0, 0.22);
}

html.light-mode .project-btn:hover {
  background: rgba(226, 0, 0, 0.18);
  color: var(--red-bright);
}

/* Active project pill — pastel fill, dark saturated text (matches reference) */
html.light-mode .project-pill {
  background: var(--proj-light-bg, rgba(226, 0, 0, 0.35));
  color: var(--proj-light-text, #6b0000);
}

html.light-mode .project-pill__clear {
  color: var(--proj-light-text, #6b0000);
}

/* Project dropdown panel */
html.light-mode .project-dropdown {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

html.light-mode .project-dropdown__input {
  background: rgba(0, 0, 0, 0.05);
  color: #111111;
  border-color: rgba(0, 0, 0, 0.12);
}

html.light-mode .project-dropdown__input:focus {
  border-color: var(--red-bright);
}

html.light-mode .project-dropdown__input::placeholder {
  color: #888888;
}

html.light-mode .project-dropdown__item {
  color: #111111;
}

html.light-mode .project-dropdown__item:hover {
  background: var(--proj-hover, rgba(226, 0, 0, 0.1));
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .project-dropdown__item.active {
  background: var(--proj-light-bg, rgba(226, 0, 0, 0.2));
  color: var(--proj-light-text, #6b0000);
}

html.light-mode .project-dropdown__item-count {
  color: #777777;
}

html.light-mode .project-dropdown__item.active .project-dropdown__item-count {
  color: rgba(0, 0, 0, 0.45);
}

html.light-mode .project-dropdown__hint {
  color: #777777;
}

html.light-mode .project-dropdown__empty {
  color: #777777;
}

/* ---- History view ---- */

html.light-mode .history-view {
  background: rgba(245, 245, 245, 0.97);
}

/* Header */
html.light-mode .history-back {
  background: rgba(0, 0, 0, 0.07);
  color: #111111;
}

html.light-mode .history-back:hover {
  background: rgba(0, 0, 0, 0.13);
}

html.light-mode .history-title {
  color: #111111;
}

html.light-mode .history-export-btn {
  color: var(--red-bright);
  background: rgba(226, 0, 0, 0.08);
  border-color: rgba(226, 0, 0, 0.22);
}

html.light-mode .history-export-btn:hover {
  background: rgba(226, 0, 0, 0.14);
  border-color: rgba(226, 0, 0, 0.38);
}

html.light-mode .history-clear-btn {
  background: rgba(0, 0, 0, 0.06);
  color: var(--red-bright);
}

html.light-mode .history-clear-btn:hover {
  color: var(--color-error);
}

html.light-mode .history-clear-btn.confirm {
  color: var(--color-error);
  background: rgba(255, 69, 58, 0.12);
}

/* Toolbar */
html.light-mode .history-search-wrap {
  background: rgba(0, 0, 0, 0.06);
  border-color: transparent;
}

html.light-mode .history-search-wrap:focus-within {
  border-color: var(--red-bright);
}

html.light-mode .history-search {
  color: #111111;
}

html.light-mode .history-search::placeholder {
  color: rgba(226, 0, 0, 0.45);
}

html.light-mode .history-filters {
  background: rgba(0, 0, 0, 0.07);
}

html.light-mode .history-filter {
  color: var(--red-bright);
}

html.light-mode .history-filter:not(.active):hover {
  color: #111111;
}

html.light-mode .history-filter[data-filter].active {
  background: transparent;
  color: hsl(0, 100%, 84%);
}

html.light-mode .history-filter:not([data-filter]).active {
  background: var(--proj-light-bg, var(--red-bright));
  color: var(--proj-light-text, #ffffff);
}

/* Sort row */
html.light-mode .history-count {
  color: var(--red-bright);
}

html.light-mode .history-sort-btn {
  color: var(--red-bright);
}

html.light-mode .history-sort-btn:hover,
html.light-mode .history-sort-btn.active {
  color: #111111;
}

html.light-mode .history-sort-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

html.light-mode .history-sort-menu__item {
  color: #111111;
}

html.light-mode .history-sort-menu__item:hover {
  background: rgba(0, 0, 0, 0.05);
}

html.light-mode .history-sort-menu__item.active {
  background: var(--red-bright);
  color: #fff;
}

/* Entry cards — use project pastel bg when available, white fallback */
html.light-mode .history-entry {
  background: var(--proj-light-bg, #ffffff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

html.light-mode .history-entry__header:hover {
  background: rgba(0, 0, 0, 0.04);
}

html.light-mode .history-entry__title {
  color: var(--proj-light-text, #111111);
}

html.light-mode .history-entry__meta {
  color: var(--proj-light-text, #666666);
  opacity: 0.75;
}

html.light-mode .history-entry__quality {
  color: var(--proj-light-text, var(--red-bright));
  background: rgba(0, 0, 0, 0.1);
}

html.light-mode .history-entry__project {
  color: var(--proj-light-text, #333333);
  background: color-mix(in srgb, var(--proj-light-text, #333333) 14%, transparent);
}

html.light-mode .history-entry__date {
  color: var(--proj-light-text, #888888);
  opacity: 0.65;
}

html.light-mode .history-entry__sort-badge {
  color: var(--grey-muted);
}

html.light-mode .history-entry__chevron {
  color: var(--proj-light-text, #999999);
  opacity: 0.5;
}

html.light-mode .history-entry__platform {
  background: rgba(0, 0, 0, 0.07);
  color: var(--proj-light-text, #666666);
}

/* Expanded detail */
html.light-mode .history-entry__detail-divider {
  background: rgba(0, 0, 0, 0.08);
}

html.light-mode .history-detail-grid dt {
  color: var(--proj-light-text, #777777);
  opacity: 0.65;
}

html.light-mode .history-detail-grid dd {
  color: var(--proj-light-text, #111111);
}

html.light-mode .history-detail-grid dd.muted {
  color: var(--proj-light-text, #888888);
  opacity: 0.6;
}

html.light-mode .history-detail-grid dd.file-link {
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .history-detail-grid dd.file-link.missing {
  color: #aaaaaa;
  text-decoration-color: #aaaaaa;
}

html.light-mode .history-copy-row-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: #111111;
}

html.light-mode .history-expand-row-btn {
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .history-expand-row-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: #111111;
}

/* Detail action buttons — light-mode */

/* Tier 2 + 3 — same ghost style on pastel bg */
html.light-mode .history-action-btn--reveal,
html.light-mode .history-action-btn--copyinfo,
html.light-mode .history-action-btn--open {
  color: var(--proj-light-text, rgba(226, 0, 0, 0.5));
  border-color: color-mix(in srgb, var(--proj-light-text, rgba(226,0,0,1)) 25%, transparent);
}

html.light-mode .history-action-btn--reveal:hover,
html.light-mode .history-action-btn--copyinfo:hover,
html.light-mode .history-action-btn--open:hover {
  color: var(--proj-light-text, var(--red-bright));
  border-color: color-mix(in srgb, var(--proj-light-text, rgba(226,0,0,1)) 50%, transparent);
  background: color-mix(in srgb, var(--proj-light-text, rgba(226,0,0,1)) 6%, transparent);
}

/* Tier 4 — destructive: bright red always, dark red fill on hover */
html.light-mode .history-action-btn--delete {
  color: var(--red-bright);
  border-color: rgba(226, 0, 0, 0.25);
}

html.light-mode .history-action-btn--delete:hover {
  background: rgba(226, 0, 0, 0.1);
  border-color: rgba(226, 0, 0, 0.4);
  color: var(--red-bright);
}

/* Empty state */
html.light-mode .history-empty {
  color: #888888;
}

/* Project filter dropdown */
html.light-mode .history-project-menu {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

html.light-mode .history-project-menu__item {
  color: #111111;
}

html.light-mode .history-project-menu__item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #111111;
}

html.light-mode .history-project-menu__item.active {
  background: var(--proj-light-bg, var(--red-bright));
  color: var(--proj-light-text, #ffffff);
}

html.light-mode .history-project-menu__delete {
  color: rgba(0, 0, 0, 0.3);
}

html.light-mode .history-project-menu__delete:hover {
  background: rgba(255, 69, 58, 0.1);
  color: var(--color-error);
}

/* Scrollbar inside history list */
html.light-mode .history-list::-webkit-scrollbar-thumb {
  background: var(--red-bright);
}

/* ---- View toggle buttons ---- */
html.light-mode .history-view-btn {
  color: var(--red-bright);
}

html.light-mode .history-view-btn:hover {
  color: #111111;
  background: rgba(0, 0, 0, 0.07);
}

html.light-mode .history-view-btn.active {
  color: hsl(0, 68%, 80%);
  background: var(--red-bright);
}

/* ---- List view thumbnail ---- */
html.light-mode .history-entry__thumb {
  background: rgba(0, 0, 0, 0.06);
}

html.light-mode .history-entry__thumb.history-thumb--placeholder {
  background: var(--proj-light-bg, var(--red-dark));
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .history-thumb--placeholder .history-thumb__icon {
  color: var(--proj-light-text, hsl(0, 72%, 28%));
}

/* ---- Grid view ---- */
html.light-mode .history-grid-card {
  background: var(--proj-light-bg, #ffffff);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

html.light-mode .history-grid-card__thumb {
  background: rgba(0, 0, 0, 0.06);
}

html.light-mode .history-grid-card__thumb.history-thumb--placeholder {
  background: var(--proj-light-bg, var(--red-dark));
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .history-grid-card__title {
  color: var(--proj-light-text, #111111);
}

html.light-mode .history-grid-card__meta {
  color: var(--proj-light-text, #666666);
  opacity: 0.75;
}

html.light-mode .history-grid-card__quality {
  color: var(--proj-light-text, var(--red-bright));
  background: rgba(0, 0, 0, 0.09);
}

/* ---- Compact view ---- */
html.light-mode .history-compact-row {
  background: var(--proj-light-bg, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

html.light-mode .history-compact-row:hover {
  background: color-mix(in srgb, var(--proj-light-bg, #ffffff) 80%, rgba(0,0,0,0.1) 20%);
}

html.light-mode .history-compact-row__thumb {
  background: rgba(0, 0, 0, 0.06);
}

html.light-mode .history-compact-row__thumb.history-thumb--placeholder {
  background: var(--proj-light-bg, var(--red-dark));
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .history-compact-row__title {
  color: var(--proj-light-text, #111111);
}

html.light-mode .history-compact-row__channel {
  color: var(--proj-light-text, #666666);
  opacity: 0.7;
}

html.light-mode .history-compact-row__quality {
  color: var(--proj-light-text, var(--red-bright));
  background: rgba(0, 0, 0, 0.09);
}

html.light-mode .history-compact-row__date {
  color: var(--proj-light-text, #888888);
  opacity: 0.65;
}

html.light-mode .history-grid-card__delete {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}

html.light-mode .history-grid-card__delete:hover {
  background: var(--red-bright);
}

html.light-mode .history-compact-row__delete {
  color: rgba(0, 0, 0, 0.45);
}

html.light-mode .history-compact-row__delete:hover {
  color: var(--color-error);
  background: rgba(255, 69, 58, 0.12);
}

/* ---- Detail modal ---- */
html.light-mode .history-detail-modal-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

html.light-mode .history-detail-modal-close {
  background: rgba(0, 0, 0, 0.1);
  color: #555555;
}

html.light-mode .history-detail-modal-close:hover {
  background: rgba(0, 0, 0, 0.18);
  color: #111111;
}

/* ---- History delete dialog (light) ---- */
html.light-mode .delete-dialog-overlay {
  background: rgba(0, 0, 0, 0.4);
}

html.light-mode .delete-dialog {
  background: var(--red-dark);
}

html.light-mode .delete-dialog__title {
  color: var(--red-bright);
}

html.light-mode .delete-dialog__subtitle {
  color: var(--grey-muted);
}

html.light-mode .delete-dialog__btn--safe {
  background: rgba(0, 0, 0, 0.08);
}

html.light-mode .delete-dialog__btn--safe .delete-dialog__btn-label {
  color: #111;
}

html.light-mode .delete-dialog__btn--safe .delete-dialog__btn-sub {
  color: rgba(0, 0, 0, 0.5);
}

html.light-mode .delete-dialog__btn--danger .delete-dialog__btn-label {
  color: #fff;
}

html.light-mode .delete-dialog__cancel {
  color: var(--grey-muted);
}

html.light-mode .delete-dialog__cancel:hover {
  color: #111;
}

/* ---- Global scrollbar ---- */
html.light-mode ::-webkit-scrollbar-thumb {
  background: var(--red-bright);
}

/* ---- Elements with white text on --red-bright backgrounds ---- */
/* Use light salmon so there's no white-on-saturated-red in light mode */
html.light-mode .btn-download,
html.light-mode .quality-option.active,
html.light-mode .settings-action-btn,
html.light-mode .history-action-btn--redownload,
html.light-mode .queue-badge {
  color: hsl(0, 100%, 84%);
}

/* ---- btn-hint — dark pill so it pops on light vibrancy bg ---- */
html.light-mode .btn-hint {
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
}

/* ---- Video card text — light-mode tokens, not dark-mode accent colours ---- */
html.light-mode .video-card__title {
  color: var(--proj-light-text, var(--red-bright));
}

html.light-mode .video-card__meta,
html.light-mode .video-card__qualities {
  color: var(--proj-light-text, rgba(226,0,0,0.45));
  opacity: 1;
}

/* ---- Shimmer skeleton — red tint on pale card when no project, project text colour otherwise ---- */
html.light-mode .video-card.loading .video-card__thumb-wrap,
html.light-mode .video-card.loading .video-card__title,
html.light-mode .video-card.loading .video-card__meta {
  background-color: color-mix(in srgb, var(--proj-light-text, rgb(226,0,0)) 14%, transparent);
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--proj-light-text, rgb(226,0,0)) 10%, transparent) 25%,
    color-mix(in srgb, var(--proj-light-text, rgb(226,0,0)) 22%, transparent) 50%,
    color-mix(in srgb, var(--proj-light-text, rgb(226,0,0)) 10%, transparent) 75%);
}

/* ---- Carousel card — white text on pastel pink bg ---- */
html.light-mode .carousel-card__title {
  color: #111111;
}

html.light-mode .carousel-card__count {
  color: var(--grey-muted);
}

/* ---- Queue show-file badge — stand out on pink panel bg ---- */
html.light-mode .queue-item__show-file {
  background: var(--red-bright);
  color: hsl(0, 68%, 80%);
}

html.light-mode .queue-item.complete .queue-item__detail {
  color: var(--proj-light-text, #111111);
}

/* ---- Drop overlay — lighter tinted scrim ---- */
html.light-mode .drop-overlay {
  background: rgba(226, 0, 0, 0.4);
}

/* ---- Activity toast — light amber instead of near-black ---- */
html.light-mode .activity-toast {
  background: hsl(42, 90%, 88%);
  color: hsl(42, 100%, 26%);
}

html.light-mode .activity-toast__spinner {
  color: hsl(42, 100%, 26%);
}

html.light-mode .activity-toast.done {
  /* inherits hsl(42,100%,26%) from light-mode base rule */
}

html.light-mode .activity-toast.done .activity-toast__spinner {
  /* inherits hsl(42,100%,26%) from light-mode base rule */
}

/* ---- History project reassign popover ---- */
html.light-mode .history-reassign-popover {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
}

html.light-mode .history-reassign-popover__remove {
  color: #888888;
}

html.light-mode .history-reassign-popover__remove:hover {
  background: rgba(255, 69, 58, 0.08);
  color: var(--color-error);
}

html.light-mode .history-reassign-popover__divider {
  background: rgba(0, 0, 0, 0.08);
}

html.light-mode .history-reassign-popover__item {
  color: #111111;
}

html.light-mode .history-reassign-popover__item:hover {
  background: rgba(0, 0, 0, 0.05);
}

html.light-mode .history-reassign-popover__item.active {
  background: var(--proj-light-bg, var(--red-bright));
  color: var(--proj-light-text, #111111);
}

html.light-mode .history-reassign-popover__new-btn {
  color: rgba(0, 0, 0, 0.4);
}

html.light-mode .history-reassign-popover__new-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #111111;
}

html.light-mode .history-reassign-popover__new-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: #111111;
}

html.light-mode .history-reassign-popover__new-input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

html.light-mode .history-reassign-popover__new-input:focus {
  border-color: var(--red-bright);
}

html.light-mode .history-entry__add-project {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.35);
}

html.light-mode .history-entry__add-project:hover {
  color: #111111;
  border-color: rgba(0, 0, 0, 0.5);
}

html.light-mode .phone-access-panel,
html.light-mode .phone-access-panel__input {
  color: var(--red-bright);
}

html.light-mode .phone-access-panel__code {
  background: rgba(0, 0, 0, 0.08);
  color: var(--red-bright);
}