/* LYRC design-token skin for Photo Enhance.
 * Revert: remove `lyrc-app` from <body class> OR delete the <link> in photo-enhance.html.
 * Tokens come from cutflux-tokens.css (--cf-*). Approach mirrors beat-timeline-lyrc.css:
 * redefine the page's own variables first, then restyle components.
 * Visual layer only - no layout, geometry, order or behaviour changes.
 * Preset swatches (.p-swatch) are colour previews of each grade, not controls,
 * so their gradients are left alone on purpose. */

body.lyrc-app {
  /* Page variables -> LYRC tokens (green accent collapses to the one blue accent) */
  --bg: var(--cf-canvas);
  --bg-1: var(--cf-bg);
  --bg-2: var(--cf-panel);
  --surface: var(--cf-surface);
  --surface-2: var(--cf-card);
  --surface-3: var(--cf-raised);
  --tile: var(--cf-raised);
  --tile-2: var(--cf-hover);
  --line: var(--cf-border-subtle);
  --line-2: var(--cf-border);
  --line-3: var(--cf-border-strong);
  --text: var(--cf-text);
  --text-2: var(--cf-text-2);
  --muted: var(--cf-text-3);
  --accent: var(--cf-accent);
  --accent-2: var(--cf-accent);
  --accent-deep: var(--cf-accent-active);
  --accent-soft: var(--cf-accent-soft);
  --accent-glow: none;
  --grad: var(--cf-accent);
  --ok: var(--cf-ok);
  --warn: var(--cf-warn);

  background: var(--cf-canvas) !important;
  color: var(--cf-text);
  font-family: var(--cf-font);
}

/* Flat static background: no glow orbs, no grain */
body.lyrc-app .bg { background: var(--cf-canvas); }
body.lyrc-app .bg .orb,
body.lyrc-app .bg .grain { display: none; }

/* One font (Inter) and weights 400/500/600/700 only */
body.lyrc-app .pick-formats,
body.lyrc-app .section h3 .badge,
body.lyrc-app .pv-bar .info,
body.lyrc-app .slider-label .val,
body.lyrc-app .progress-text,
body.lyrc-app .pe-export-pct {
  font-family: var(--cf-font);
  font-variant-numeric: tabular-nums;
}
body.lyrc-app .hdr-title em,
body.lyrc-app .pick h1 em {
  font-family: var(--cf-font);
  font-style: normal;
}
body.lyrc-app .hdr-title,
body.lyrc-app .hdr-title strong,
body.lyrc-app .hdr-export,
body.lyrc-app .pick h1,
body.lyrc-app .pick h1 em,
body.lyrc-app .pe-intro-badge,
body.lyrc-app .pe-intro-n,
body.lyrc-app .hint-drag,
body.lyrc-app .lbl,
body.lyrc-app .section h3,
body.lyrc-app .preset-caption strong,
body.lyrc-app .exp-btn.primary,
body.lyrc-app .pe-export-h,
body.lyrc-app .pe-export-pct {
  font-weight: 700;
}
body.lyrc-app .pe-intro-steps li b { font-weight: 600; }
body.lyrc-app .hdr-title em { font-weight: 500; color: var(--cf-text-3); }
body.lyrc-app .pick h1 em { color: var(--cf-accent); }

/* Transitions: tokens only */
body.lyrc-app button,
body.lyrc-app .icon-btn,
body.lyrc-app .pick,
body.lyrc-app .preset,
body.lyrc-app .tune-toggle,
body.lyrc-app .exp-btn,
body.lyrc-app .pe-intro-x {
  transition: transform var(--cf-t-fast), background-color var(--cf-t-fast),
    border-color var(--cf-t-fast), color var(--cf-t-fast), opacity var(--cf-t-fast);
}
body.lyrc-app :focus-visible { outline: none; box-shadow: var(--cf-focus) !important; }

/* ── Header ── */
body.lyrc-app .hdr {
  background: rgba(10, 10, 13, .92);
  border-bottom-color: var(--cf-border-subtle);
}
body.lyrc-app .icon-btn {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
}
body.lyrc-app .icon-btn:hover,
body.lyrc-app .icon-btn:active { background: var(--cf-hover); }
body.lyrc-app .hdr-export {
  border-radius: var(--cf-r-button);
  background: var(--cf-accent);
  color: #fff;
  box-shadow: none;
}
body.lyrc-app .hdr-export:not([disabled]):hover { background: var(--cf-accent-hover); }
body.lyrc-app .hdr-export[disabled] {
  opacity: 1;
  background: var(--cf-surface);
  color: var(--cf-text-4);
}

/* ── Empty state / file picker ── */
body.lyrc-app .pick {
  border-radius: var(--cf-r-panel);
  border-color: var(--cf-border-strong);
  background: var(--cf-panel);
}
body.lyrc-app .pick:hover { border-color: var(--cf-accent); }
body.lyrc-app .pick.hot { border-color: var(--cf-accent); background: var(--cf-accent-soft); }
body.lyrc-app .pick-icon {
  border-radius: var(--cf-r-panel);
  background: var(--cf-accent);
  box-shadow: none;
}
body.lyrc-app .pick p { color: var(--cf-text-2); }
body.lyrc-app .pick-hint {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text);
  font-weight: 600;
}
body.lyrc-app .pick:hover .pick-hint { background: var(--cf-hover); }
body.lyrc-app .pick-formats { color: var(--cf-text-3); letter-spacing: .1em; }
body.lyrc-app .feat {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
}

/* ── First-run teach card ── */
body.lyrc-app .pe-intro {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-panel);
}
body.lyrc-app .pe-intro-badge { background: var(--cf-accent-soft); color: var(--cf-text); }
body.lyrc-app .pe-intro-x {
  border-radius: var(--cf-r-button);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
}
body.lyrc-app .pe-intro-x:hover { background: var(--cf-hover); color: var(--cf-text); border-color: var(--cf-border-strong); }
body.lyrc-app .pe-intro-steps li { color: var(--cf-text-2); }
body.lyrc-app .pe-intro-steps li b { color: var(--cf-text); }
body.lyrc-app .pe-intro-n { background: var(--cf-accent); color: #fff; }

/* ── Preview card ── */
body.lyrc-app .preview {
  border-radius: var(--cf-r-panel);
  border-color: var(--cf-border);
  box-shadow: none;
}
body.lyrc-app .divider { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
body.lyrc-app .divider::before { box-shadow: var(--cf-shadow-md), inset 0 0 0 2px var(--cf-accent); }
body.lyrc-app .hint-drag {
  background: var(--cf-accent);
  color: #fff;
  box-shadow: var(--cf-shadow-md);
}
body.lyrc-app .lbl { background: rgba(10, 10, 13, .80); color: var(--cf-text); }
body.lyrc-app .lbl.after { background: var(--cf-accent); color: #fff; }
body.lyrc-app .pv-bar { background: var(--cf-surface); border-top-color: var(--cf-border-subtle); color: var(--cf-text-2); }
body.lyrc-app .pv-bar .info { color: var(--cf-text-3); }
body.lyrc-app .pv-btn {
  background: var(--cf-raised);
  border-color: var(--cf-border);
  color: var(--cf-text);
}
body.lyrc-app .pv-btn:hover { background: var(--cf-hover); }
body.lyrc-app .pv-btn.on { background: var(--cf-accent-soft); border-color: var(--cf-accent); color: var(--cf-text); }

/* ── Presets ── */
body.lyrc-app .section {
  background: var(--cf-surface);
  border-color: var(--cf-border);
  border-radius: var(--cf-r-panel);
}
body.lyrc-app .section h3 .badge {
  border-radius: var(--cf-r-pill);
  background: var(--cf-accent-soft);
  border-color: transparent;
  color: var(--cf-accent-hover);
}
body.lyrc-app .preset {
  border-radius: var(--cf-r-card);
  background: var(--cf-raised);
  border-color: var(--cf-border);
}
body.lyrc-app .preset:hover { background: var(--cf-hover); }
body.lyrc-app .preset.on { border-color: var(--cf-accent); background: var(--cf-accent-soft); }
body.lyrc-app .preset .p-swatch { border-radius: var(--cf-r-button); }
body.lyrc-app .preset .p-name { color: var(--cf-text-2); font-weight: 600; }
body.lyrc-app .preset.on .p-name { color: var(--cf-text); }
body.lyrc-app .preset-caption {
  border-radius: var(--cf-r-card);
  background: var(--cf-raised);
  border-color: var(--cf-border-subtle);
  color: var(--cf-text-2);
}
body.lyrc-app .preset-caption strong { color: var(--cf-text); }
body.lyrc-app .preset-caption .sep { color: var(--cf-text-3); }
body.lyrc-app .preset-caption .dot { background: var(--cf-accent); box-shadow: none; }

/* ── Fine tune ── */
body.lyrc-app .tune-toggle {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text);
}
body.lyrc-app .tune-toggle:hover,
body.lyrc-app .tune-toggle:active { background: var(--cf-hover); }
body.lyrc-app .tune-toggle .chev { color: var(--cf-text-3); transition: transform var(--cf-t-base); }
body.lyrc-app .tune-toggle .dot { background: var(--cf-accent); box-shadow: none; }
body.lyrc-app .slider-label { color: var(--cf-text-2); }
body.lyrc-app .slider-label strong { color: var(--cf-text); font-weight: 600; }
body.lyrc-app .slider-label .val { color: var(--cf-text-2); }
body.lyrc-app input[type=range]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--cf-accent) 0%, var(--cf-accent) 50%, var(--cf-border) 50%, var(--cf-border) 100%);
}
body.lyrc-app input[type=range]::-moz-range-track { background: var(--cf-border); }
body.lyrc-app input[type=range]::-webkit-slider-thumb { box-shadow: var(--cf-shadow-sm); }
body.lyrc-app input[type=range]:focus-visible { box-shadow: none !important; }
body.lyrc-app input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--cf-focus); }
body.lyrc-app .tune-reset {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text-2);
}
body.lyrc-app .tune-reset:hover,
body.lyrc-app .tune-reset:active { background: var(--cf-hover); color: var(--cf-text); }

/* ── Export bar (desktop / tablet) ── */
body.lyrc-app .exports {
  background: var(--cf-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-color: var(--cf-border-subtle);
}
body.lyrc-app .exp-btn {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text);
}
body.lyrc-app .exp-btn:not(:disabled):hover { background: var(--cf-hover); }
body.lyrc-app .exp-btn.primary {
  background: var(--cf-accent);
  border-color: var(--cf-accent);
  color: #fff;
  box-shadow: none;
}
body.lyrc-app .exp-btn.primary:not(:disabled):hover { background: var(--cf-accent-hover); }

/* ── Loading: progress, inline spinner, full-screen export ── */
body.lyrc-app .progress { background: var(--cf-surface); }
body.lyrc-app .progress .bar { background: var(--cf-accent); transition: width var(--cf-t-base); }
body.lyrc-app .progress-text { color: var(--cf-text-2); }
body.lyrc-app .spinner { border-color: rgba(255, 255, 255, .30); border-top-color: currentColor; }
body.lyrc-app .pe-export-overlay { background: rgba(10, 10, 13, .94); }
body.lyrc-app .pe-export-overlay.show { animation: lyrcPeFade var(--cf-t-base) both; }
body.lyrc-app .pe-export-ring { border-color: var(--cf-accent-soft); border-top-color: var(--cf-accent); }
body.lyrc-app .pe-export-pct,
body.lyrc-app .pe-export-h { color: var(--cf-text); }
body.lyrc-app .pe-export-pct b,
body.lyrc-app .pe-export-sub { color: var(--cf-text-2); }
@keyframes lyrcPeFade { from { opacity: 0; } to { opacity: 1; } }

/* Debug log toggle */
body.lyrc-app .log-toggle { border-color: var(--cf-border); color: var(--cf-text-3); }
body.lyrc-app .log { border-radius: var(--cf-r-card); border-color: var(--cf-border); background: var(--cf-panel); }

/* ── Bottom nav ── */
body.lyrc-app .cf-tbar {
  background: var(--cf-panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-color: var(--cf-border-subtle);
}
body.lyrc-app .cf-tbar-item { transition: transform var(--cf-t-fast), color var(--cf-t-fast); }
body.lyrc-app .cf-tbar-ic {
  border-radius: var(--cf-r-button);
  background: var(--cf-surface);
  border-color: var(--cf-border);
  color: var(--cf-text);
  transition: background-color var(--cf-t-fast), color var(--cf-t-fast);
}
body.lyrc-app .cf-tbar-item:hover .cf-tbar-ic { background: var(--cf-hover); }
body.lyrc-app .cf-tbar-lbl { color: var(--cf-text-3); font-weight: 600; }
body.lyrc-app .cf-tbar-item.is-on .cf-tbar-ic {
  background: var(--cf-accent);
  border-color: var(--cf-accent);
  color: #fff;
  box-shadow: none;
}
body.lyrc-app .cf-tbar-item.is-on .cf-tbar-lbl { color: var(--cf-text); }

@media (max-width: 640px) {
  body.lyrc-app .icon-btn,
  body.lyrc-app .hdr-export { border-radius: var(--cf-r-button); }
  body.lyrc-app .section { border-radius: var(--cf-r-panel); }
}

@media (prefers-reduced-motion: reduce) {
  body.lyrc-app .pe-export-overlay.show { animation: none; }
}

/* "Choose file" is the one action on this screen (the whole card is tappable):
   give it the primary look (2026-10-16). */
body.lyrc-app .pick-hint {
  background: var(--cf-accent) !important; background-image: none !important;
  border-color: var(--cf-accent) !important; color: #fff !important; box-shadow: none !important;
}