/* ============================================================
   LUMIÈRE: product design system v2 (engine + api UIs)
   Drop-in replacement for engine/public/lumiere-ui.css: every class
   name and custom property of v1 is kept; the look follows the
   redesigned landing page. New components are appended at the end
   (search "v2 components"). Dark only. Cinema, not commerce.
   ============================================================ */

/* Jost, self-hosted (OFL, see fonts/OFL-LICENSE.txt). latin-ext covers HU, DE, FR, IT. */
@font-face {
  font-family: "Jost Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/lumiere-ui/fonts/jost-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/lumiere-ui/fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cyrillic (explainers in bg, ru, sr, uk): same @fontsource-variable/jost 5.3.0
   source, OFL. Downloaded only when a Cyrillic glyph is on the page. */
@font-face {
  font-family: "Jost Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/lumiere-ui/fonts/jost-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Palette — identical custom properties to the landing page */
  --c-bg: #060608;
  --c-bg-raised: #0d0d11;
  --c-line: rgba(255, 255, 255, 0.09);
  --c-line-strong: rgba(255, 255, 255, 0.18);
  --c-text: #f4f4f2;
  --c-muted: #d8d8de;
  --c-dim: #a9a9b3;
  --c-accent: #f3cf87;          /* warm projector light — used sparingly */
  --c-accent-dim: rgba(243, 207, 135, 0.16);

  --font-sans: "Jost Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --nav-h: 64px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Product extensions (not on the landing page) */
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Fira Code", monospace;
  --c-card: #0d0d11;
  --c-card-hover: #121218;
  --c-ok: #7fb48d;
  --c-ok-dim: rgba(127, 180, 141, 0.13);
  --c-warn: #d9a14e;
  --c-warn-dim: rgba(217, 161, 78, 0.13);
  --c-err: #c97070;
  --c-err-dim: rgba(201, 112, 112, 0.13);
  --c-info: #7ea3c0;
  --c-info-dim: rgba(126, 163, 192, 0.13);
  --radius: 6px;
  --radius-s: 4px;
  --radius-l: 10px;

  /* v2 additions */
  --c-accent-hover: #f7dba3;
  --c-accent-line: rgba(243, 207, 135, 0.45);
  --shadow-panel: 0 30px 90px rgba(0, 0, 0, 0.55);
  --side-w: 248px;
}

/* ---------- base ---------- */

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

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--c-accent);
  color: #0a0a0c;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 3px; }

/* ---------- typography helpers ---------- */

.kicker {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-dim);
}

/* ---------- app header ---------- */

.lum-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(rgba(6, 6, 8, 0.85), rgba(6, 6, 8, 0.65));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}

.lum-brand {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  white-space: nowrap;
}

.lum-wordmark {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  margin-right: -0.5em; /* optical balance for trailing letter-space */
  color: var(--c-text);
}

.lum-page {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.lum-header-link {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color 0.25s var(--ease);
}

.lum-header-link:hover { color: var(--c-text); }

/* Account chip — populated only when the UI is served through the api front
   door (fetch('/me') succeeds); stays display:none on direct engine access. */
.lum-account-chip {
  display: none;
  align-items: center;
  gap: 0.45em;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--c-dim);
  white-space: nowrap;
}

.lum-account-chip a {
  color: var(--c-accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s var(--ease);
}

.lum-account-chip a:hover { color: var(--c-text); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* Solid: primary action. Projector gold, a soft glow on hover (landing .btn-solid). */
.btn-solid,
.btn-primary {
  background: var(--c-accent);
  color: #120e06;
}

.btn-solid:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: var(--c-accent-hover);
  color: #120e06;
  box-shadow: 0 0 28px rgba(243, 207, 135, 0.28);
}

/* Ghost — secondary action. Hairline border, brightens on hover. */
.btn-ghost,
.btn-secondary {
  border-color: var(--c-line-strong);
  color: var(--c-text);
  background: rgba(6, 6, 8, 0.4);
}

.btn-ghost:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  border-color: var(--c-text);
}

/* Semantic ghosts */
.btn-success, .btn-approve {
  border-color: rgba(127, 180, 141, 0.4);
  color: var(--c-ok);
  background: var(--c-ok-dim);
}
.btn-success:hover:not(:disabled), .btn-approve:hover:not(:disabled) {
  border-color: var(--c-ok);
}

.btn-danger, .btn-deny, .btn-cancel {
  border-color: rgba(201, 112, 112, 0.4);
  color: var(--c-err);
  background: transparent;
}
.btn-danger:hover:not(:disabled), .btn-deny:hover:not(:disabled),
.btn-cancel:hover:not(:disabled) {
  background: var(--c-err-dim);
  border-color: var(--c-err);
}

.btn-small, .btn-sm { min-height: 32px; padding: 0.35rem 0.85rem; font-size: 0.7rem; }

.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- forms ---------- */

label, .label {
  display: block;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.45rem;
}

input:not([type]), input[type="text"], input[type="url"], input[type="number"],
input[type="password"], input[type="email"], input[type="search"], input[type="tel"], textarea, select {
  width: 100%;
  padding: 0.65rem 0.9rem;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.92rem;
  transition: border-color 0.3s var(--ease);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(243, 207, 135, 0.12);
}

:focus-visible {
  outline: 1.5px solid var(--c-accent);
  outline-offset: 3px;
}

textarea { resize: vertical; min-height: 90px; }
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--c-dim); }
input[type="range"] { accent-color: var(--c-accent); }
input[type="checkbox"] { accent-color: var(--c-accent); }

/* ---------- cards / panels ---------- */

.card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  padding: 1.5rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.card:hover { border-color: var(--c-line-strong); }

.card-title {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 0.9rem;
}

/* ---------- tables ---------- */

.lum-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.lum-table th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-dim);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--c-line);
}
.lum-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
}
.lum-table tr:hover td { color: var(--c-text); }

/* ---------- modals ---------- */

.lum-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.lum-modal-backdrop.open { display: flex; }
.lum-modal {
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: 1.8rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ---------- tabs ---------- */

.lum-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--c-line); }
.lum-tab {
  padding: 0.6rem 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-dim);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lum-tab:hover { color: var(--c-muted); }
.lum-tab.active { color: var(--c-text); border-bottom-color: var(--c-accent); }

/* ---------- progress ---------- */

.progress-bar, .progress-bar-track, .lum-progress {
  width: 100%;
  height: 2px;
  background: var(--c-line);
  border-radius: 1px;
  overflow: hidden;
  margin: 0.9rem 0 0;
}

.progress-fill, .progress-bar-fill, .lum-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(243, 207, 135, 0.5);
  transition: width 0.5s var(--ease);
  position: relative;
  overflow: hidden;
}

/* Light sweep — a muted band of projector light travelling along the
   filled portion while the job runs. (Fills are only visible during
   runs in the product UIs, so this is CSS-only.) */
.progress-fill::after, .progress-bar-fill::after, .lum-progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  background: linear-gradient(90deg,
    rgba(255, 246, 221, 0) 0%,
    rgba(255, 246, 221, 0.5) 50%,
    rgba(255, 246, 221, 0) 100%);
  animation: lum-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lum-sweep { to { transform: translateX(330%); } }

.lum-progress-fill.indeterminate {
  width: 30%;
  animation: lum-progress-slide 1.6s var(--ease) infinite;
}
@keyframes lum-progress-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(440%); }
}

/* ---------- working indicator — the Lumière glint ----------
   The signature "working" mark, derived from the brand lens glint
   (brand/lumiere-mark.svg): a warm point of light with two hairline
   rays that slowly turn and breathe. Used everywhere a job runs.

   Reference / demo markup:
   <!--
     <span class="lum-working"></span>                       12px inline glint
     <span class="lum-working lum-working-lg"></span>        20px standalone
     <span class="lum-working">Analyzing…</span>             glint + label slot
     <div class="lum-phase is-active">…</div>                pipeline dot pulses
     <div class="progress-fill" style="width:40%"></div>     fill gets light sweep
   -->

   .spinner is the legacy class; it is restyled to the same glint so
   existing busy states inherit the signature without JS changes. */

.lum-working {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  vertical-align: middle;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
}

.spinner,
.lum-working::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background:
    radial-gradient(circle, #fff8e7 0%, rgba(238, 217, 168, 0.85) 20%, rgba(243, 207, 135, 0) 58%)
      center / 48% 48% no-repeat,
    linear-gradient(to bottom, rgba(238, 217, 168, 0), rgba(238, 217, 168, 0.9) 50%, rgba(238, 217, 168, 0))
      center / 1px 100% no-repeat,
    linear-gradient(to right, rgba(238, 217, 168, 0), rgba(238, 217, 168, 0.9) 50%, rgba(238, 217, 168, 0))
      center / 100% 1px no-repeat;
  animation: lum-glint 2.8s ease-in-out infinite;
}

.spinner { width: 16px; height: 16px; }          /* legacy default size */
.lum-working-lg::before { width: 20px; height: 20px; }

/* The four-point glint is 90°-symmetric, so a quarter turn loops
   seamlessly. Gentle, cinematic — never a bootstrap spinner. */
@keyframes lum-glint {
  0%   { transform: rotate(0deg)  scale(1);    opacity: 0.7; }
  50%  { transform: rotate(45deg) scale(1.14); opacity: 1; }
  100% { transform: rotate(90deg) scale(1);    opacity: 0.7; }
}

/* kept for back-compat with any page-local rules */
@keyframes lum-spin { to { transform: rotate(360deg); } }

/* ---------- status chips ---------- */

.chip, .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.14rem 0.55rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--c-line-strong);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}

.chip-ok, .badge-done {
  border-color: rgba(127, 180, 141, 0.45);
  background: var(--c-ok-dim);
  color: var(--c-ok);
}
.chip-warn, .badge-warn, .badge-review, .badge-reviewing, .badge-pending {
  border-color: rgba(217, 161, 78, 0.45);
  background: var(--c-warn-dim);
  color: var(--c-warn);
}
.badge-pending { /* neutral, not alarming */
  border-color: var(--c-line-strong);
  background: transparent;
  color: var(--c-muted);
}
.chip-error, .chip-err, .badge-failed {
  border-color: rgba(201, 112, 112, 0.45);
  background: var(--c-err-dim);
  color: var(--c-err);
}
.chip-info, .badge-scanning, .badge-ingesting, .badge-analyzing {
  border-color: rgba(126, 163, 192, 0.45);
  background: var(--c-info-dim);
  color: var(--c-info);
}
.chip-accent, .badge-rendering {
  border-color: rgba(243, 207, 135, 0.45);
  background: var(--c-accent-dim);
  color: var(--c-accent);
}

/* ---------- toasts ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  padding: 0.7rem 1.2rem;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--c-text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: lum-toast-in 0.35s var(--ease);
}
.toast-success, .toast.ok { border-color: rgba(127, 180, 141, 0.5); color: var(--c-ok); }
.toast-error, .toast.err { border-color: rgba(201, 112, 112, 0.5); color: var(--c-err); }
@keyframes lum-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- pipeline step strip (Produce-section pattern) ----------
   Dots + letter-spaced uppercase labels on a hairline. States:
   .is-done (filled dim), .is-active (lit accent + glow). */

.lum-pipeline {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.lum-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  position: relative;
}

.lum-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--c-dim);
  background: var(--c-bg);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}

.lum-phase-label {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-dim);
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}

.lum-phase.is-done .lum-dot {
  border-color: var(--c-accent);
  background: var(--c-accent-dim);
}
.lum-phase.is-done .lum-phase-label { color: var(--c-muted); }

.lum-phase.is-active .lum-dot {
  background: var(--c-accent);
  border-color: var(--c-accent);
  box-shadow: 0 0 12px rgba(243, 207, 135, 0.45);
}
.lum-phase.is-active .lum-phase-label { color: var(--c-text); }

/* Working pulse — the active step's dot breathes like the lens glint.
   Covers the shared strip (.lum-phase.is-active), the compliance
   progress strip (.progress-step.active) and the editor's steps bar
   while a job runs there (.step-pill.is-working, toggled by JS).
   Completed dots stay static. */
.lum-phase.is-active .lum-dot,
.progress-step.active .dot,
.step-pill.is-working .step-num {
  position: relative;
  overflow: visible;
  animation: lum-dot-breathe 2.8s ease-in-out infinite;
}

@keyframes lum-dot-breathe {
  0%, 100% { box-shadow: 0 0 5px rgba(243, 207, 135, 0.25); }
  50%      { box-shadow: 0 0 16px rgba(243, 207, 135, 0.7); }
}

/* Subtle hairline-ray flicker around the breathing dot */
.lum-phase.is-active .lum-dot::after,
.progress-step.active .dot::after,
.step-pill.is-working .step-num::after {
  content: "";
  position: absolute;
  inset: -6px;
  background:
    linear-gradient(to bottom, rgba(238, 217, 168, 0), rgba(238, 217, 168, 0.8) 50%, rgba(238, 217, 168, 0))
      center / 1px 100% no-repeat,
    linear-gradient(to right, rgba(238, 217, 168, 0), rgba(238, 217, 168, 0.8) 50%, rgba(238, 217, 168, 0))
      center / 100% 1px no-repeat;
  opacity: 0;
  animation: lum-ray-flicker 2.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lum-ray-flicker {
  0%, 100% { opacity: 0;    transform: scale(0.7); }
  50%      { opacity: 0.55; transform: scale(1); }
}

/* ---------- quick top-up — Production-Minute packs ----------
   The PM chip is the entry point everywhere: low balance → the gold number
   gains a very slow amber breathe (lum-pm-low, applied by lumiere-topup.js
   on the product pages and server-side on /account); hovering the chip
   reveals a small "+" affix that opens the top-up sheet. Subtle but in
   eyesight — never a flash, never a badge. */

.lum-pm-low {
  animation: lum-pm-breathe 5.2s ease-in-out infinite;
}

@keyframes lum-pm-breathe {
  0%, 100% { text-shadow: 0 0 0 rgba(243, 207, 135, 0); }
  50%      { text-shadow: 0 0 14px rgba(243, 207, 135, 0.55); }
}

/* One soft glint pulse when the balance refreshes after a top-up.
   Single iteration; lumiere-topup.js removes the class on animationend. */
.lum-pm-glint {
  animation: lum-pm-glint-once 1.2s var(--ease) 1;
}

@keyframes lum-pm-glint-once {
  0%   { text-shadow: 0 0 0 rgba(243, 207, 135, 0); }
  30%  { color: #fff3d6; text-shadow: 0 0 18px rgba(243, 207, 135, 0.8); }
  100% { text-shadow: 0 0 0 rgba(243, 207, 135, 0); }
}

/* The "+" affix inside the account chip — hidden until the chip is hovered
   or focused; pinned on (.is-on) while the balance is low. */
.lum-topup-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  border: 1px solid rgba(243, 207, 135, 0.45);
  border-radius: 50%;
  background: none;
  color: var(--c-accent);
  font: inherit;
  font-size: 0.92em;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    background 0.3s var(--ease), color 0.3s var(--ease);
}

.lum-account-chip:hover .lum-topup-plus,
.lum-account-chip:focus-within .lum-topup-plus,
.lum-topup-plus.is-on {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.lum-topup-plus:hover {
  background: var(--c-accent);
  color: #0a0a0c;
}

/* The sheet — a minimal dark overlay in the house style. */
.lum-topup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lum-topup-backdrop.open {
  display: flex;
  animation: lum-topup-fade 0.3s var(--ease);
}

@keyframes lum-topup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lum-topup-sheet {
  width: min(620px, 100%);
  padding: 2.4rem 2.2rem 1.9rem;
  background: var(--c-bg-raised);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.65);
  text-align: center;
  animation: lum-topup-rise 0.35s var(--ease);
}

@keyframes lum-topup-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.lum-topup-kicker {
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.lum-topup-title {
  margin: 0.4rem 0 1.8rem;
  font-size: 1.5rem;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: var(--c-text);
}

.lum-topup-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

@media (max-width: 560px) {
  .lum-topup-packs { grid-template-columns: 1fr; }
}

.lum-topup-pack {
  position: relative;
  padding: 1.6rem 1rem 1.4rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-card);
  color: var(--c-text);
  font: inherit;
  font-weight: 300;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.lum-topup-pack span { display: block; }

.lum-topup-pack:hover:not(:disabled) {
  border-color: var(--c-accent);
  background: var(--c-card-hover);
  transform: translateY(-2px);
}

.lum-topup-pack:disabled { cursor: default; opacity: 0.45; }
.lum-topup-pack.is-buying { opacity: 1; border-color: var(--c-accent); }

.lum-topup-eur {
  font-size: 1.7rem;
  font-weight: 200;
  letter-spacing: -0.01em;
}

.lum-topup-pm {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

/* "Most chosen" — a quiet flag riding the middle card's top hairline. */
.lum-topup-flag {
  position: absolute;
  top: -0.62em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.7em;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-accent);
  background: var(--c-bg-raised);
}

.lum-topup-note {
  padding: 0.6rem 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--c-muted);
}

/* A sheet taller than a phone screen scrolls inside the backdrop instead of
   losing its top edge (auto margins centre it only while it fits). */
.lum-topup-backdrop { overflow-y: auto; }
.lum-topup-sheet { margin: auto; }
.lum-topup-sheet:focus { outline: none; }
.lum-modal-backdrop { overflow-y: auto; }
.lum-modal-backdrop > .lum-modal { margin: auto; }

/* "Top up to continue": what the waiting job needs, the balance, the gap. */
.lum-topup-need {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: -0.6rem 0 1.6rem;
  padding: 1rem 0.6rem;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.lum-topup-need > div { display: grid; gap: 0.25rem; justify-items: center; min-width: 0; }
.lum-topup-need-n {
  font-size: 1.35rem;
  font-weight: 200;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lum-topup-need-n.is-gold { color: var(--c-accent); }
.lum-topup-need-l {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-dim);
  text-align: center;
  overflow-wrap: anywhere;
}
.lum-topup-pack.is-cover { border-color: var(--c-accent-line); }
.lum-topup-actions { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; }

/* Lumens dialogs (lumiere-lumens.js): confirm a large job, a limit, a one-job lift. */
.lum-lumens-modal { max-width: 500px; text-align: left; }
.lum-lumens-modal .kicker { margin: 0; }
.lum-lumens-modal h3 { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 300; color: var(--c-text); }
.lum-lumens-modal p { margin-top: 0.7rem; color: var(--c-muted); line-height: 1.6; font-size: 0.92rem; }
.lum-lumens-modal .lum-lumens-figs { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.1rem; padding: 0.9rem 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.lum-lumens-modal .lum-lumens-figs div { display: grid; gap: 0.15rem; }
.lum-lumens-modal .lum-lumens-figs b { font-size: 1.3rem; font-weight: 200; color: var(--c-text); font-variant-numeric: tabular-nums; }
.lum-lumens-modal .lum-lumens-figs b.is-gold { color: var(--c-accent); }
.lum-lumens-modal .lum-lumens-figs span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-dim); }
.lum-lumens-modal .lum-lumens-row { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.lum-lumens-modal .lum-lumens-row .lum-lumens-link { margin-right: auto; color: var(--c-accent); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.lum-lumens-modal .lum-lumens-row .lum-lumens-link:hover { color: var(--c-accent-hover); }
.lum-lumens-modal .lum-lumens-quote { margin-top: 0.9rem; padding: 0.8rem 1rem; border-left: 2px solid var(--c-accent-line); background: rgba(255, 255, 255, 0.02); color: var(--c-text); }
.lum-lumens-banner { margin: 0 0 1rem; }
.lum-lumens-banner .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .lum-topup-sheet { padding: 1.8rem 1.2rem 1.4rem; }
  .lum-topup-need { gap: 0.4rem; padding: 0.8rem 0.2rem; margin-bottom: 1.2rem; }
  .lum-topup-need-n { font-size: 1.1rem; }
  .lum-topup-need-l { font-size: 0.62rem; letter-spacing: 0.1em; }
  .lum-lumens-modal .lum-lumens-row { justify-content: stretch; }
  .lum-lumens-modal .lum-lumens-row .btn { flex: 1 1 auto; }
  .lum-lumens-modal .lum-lumens-row .lum-lumens-link { flex-basis: 100%; margin: 0 0 0.4rem; }
  .lum-lumens-banner { grid-template-columns: auto minmax(0, 1fr); }
  .lum-lumens-banner .lum-alert-actions { grid-column: 1 / -1; }
}

.lum-topup-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
}

.lum-topup-foot {
  margin-top: 1.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--c-dim);
}

/* Success — the new balance counts up softly. */
.lum-topup-success-num {
  font-size: 3.4rem;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.lum-topup-success-unit {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.lum-topup-success-note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--c-muted);
}

.lum-topup-continue {
  margin-top: 1.4rem;
  border: none;
  background: none;
  padding: 0;
  color: var(--c-muted);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.lum-topup-continue:hover { color: var(--c-text); }

/* Quiet text entry on /account, revealed by lumiere-topup.js. */
.lum-topup-link {
  margin-top: 1.1rem;
  border: none;
  background: none;
  padding: 0 0 0.15em;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-accent);
  opacity: 0.85;
  border-bottom: 1px solid rgba(243, 207, 135, 0.35);
  cursor: pointer;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}

.lum-topup-link:hover { opacity: 1; border-bottom-color: var(--c-accent); }
.lum-topup-link[hidden] { display: none; }

/* The quiet gold "Top up" action inside insufficient-credits toasts. */
.lum-topup-toast-btn {
  margin-left: 0.9em;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  cursor: pointer;
}

.lum-topup-toast-btn:hover { text-decoration: underline; }

/* ---------- reduced motion ---------- */

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

  /* Working indicators must still say "alive" — fall back to a soft
     opacity pulse (no rotation, no sweep, no flicker). These rules win
     over the kill-all above by specificity. */
  .spinner,
  .lum-working::before,
  .lum-phase.is-active .lum-dot,
  .progress-step.active .dot,
  .step-pill.is-working .step-num {
    animation: lum-working-fade 3.2s ease-in-out infinite !important;
  }

  .lum-phase.is-active .lum-dot::after,
  .progress-step.active .dot::after,
  .step-pill.is-working .step-num::after,
  .progress-fill::after,
  .progress-bar-fill::after,
  .lum-progress-fill::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

@keyframes lum-working-fade {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ============================================================
   v2 components
   Everything below is new in v2. v1 pages are unaffected by it.
   ============================================================ */

/* Typography is scoped to the v2 shell (.lum-main) so v1 pages keep their own. */
.lum-main ul, .lum-main ol, .lum-side ul { list-style: none; }
.lum-main { font-size: 0.95rem; }
.lum-main h1, .lum-h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 200; letter-spacing: -0.02em; line-height: 1.1; }
.lum-main h2, .lum-h2 { font-size: 1.35rem; font-weight: 300; letter-spacing: -0.01em; line-height: 1.25; }
.lum-main h3, .lum-h3 { font-size: 1rem; font-weight: 400; }
.lum-muted { color: var(--c-muted); }
.lum-dim { color: var(--c-dim); }
.lum-gold { color: var(--c-accent); }
.lum-num { font-variant-numeric: tabular-nums; }

/* ---------- shell: header + side navigation + content ---------- */

.lum-shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--nav-h));
}

.lum-side {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 1.6rem 1rem 2rem;
  border-right: 1px solid var(--c-line);
}

.lum-side-group + .lum-side-group { margin-top: 1.6rem; }

.lum-side-label {
  padding: 0 0.75rem 0.5rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.lum-side-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--c-muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.lum-side-link:hover { background: rgba(255, 255, 255, 0.03); color: var(--c-text); }

.lum-side-link.is-active {
  background: rgba(243, 207, 135, 0.06);
  color: var(--c-text);
}

.lum-side-link.is-active::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 1px;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(243, 207, 135, 0.6);
}

.lum-side-count {
  font-size: 0.72rem;
  color: var(--c-dim);
  font-variant-numeric: tabular-nums;
}

.lum-main {
  width: 100%;
  max-width: 1120px;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem) 5rem;
}

.lum-head-actions { display: flex; align-items: center; gap: 1.1rem; }

/* app switcher in the header */
.lum-apps { display: flex; gap: 0.2rem; }
.lum-app-link {
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lum-app-link:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.04); }
.lum-app-link.is-current { color: var(--c-text); }

/* avatar / account button */
.lum-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: var(--c-bg-raised);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-text);
}

/* ---------- page + section headings ---------- */

.lum-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.lum-page-head p { margin-top: 0.5rem; color: var(--c-muted); max-width: 40rem; }

.lum-section + .lum-section { margin-top: 2.6rem; }

.lum-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1rem;
}

.lum-section-head p { color: var(--c-dim); font-size: 0.88rem; }

/* ---------- panels (a card with head / body / foot) ---------- */

.lum-panel {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.lum-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--c-line);
}

.lum-panel-head h3 { font-size: 0.98rem; }
.lum-panel-body { padding: 1.4rem; }
.lum-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.84rem;
  color: var(--c-dim);
}

.lum-grid { display: grid; gap: 1rem; }
.lum-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lum-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lum-grid-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }

/* ---------- metric + meter (the lumen balance) ---------- */

.lum-metric-n {
  font-size: clamp(3rem, 6vw, 4.6rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.lum-metric-unit {
  margin-left: 0.4rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-dim);
}

.lum-metric-cap { margin-top: 0.7rem; color: var(--c-muted); font-size: 0.9rem; }

.lum-meter {
  position: relative;
  height: 6px;
  margin-top: 1.3rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.lum-meter-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(243, 207, 135, 0.55), var(--c-accent));
  box-shadow: 0 0 12px rgba(243, 207, 135, 0.45);
  transition: width 0.8s var(--ease);
}

.lum-meter.is-low .lum-meter-fill { background: linear-gradient(90deg, rgba(217, 161, 78, 0.6), var(--c-warn)); box-shadow: 0 0 12px rgba(217, 161, 78, 0.45); }
.lum-meter.is-empty .lum-meter-fill { width: 0 !important; }

.lum-meter-legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--c-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- alerts / banners ---------- */

.lum-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem 1.1rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-l);
  background: var(--c-bg-raised);
  font-size: 0.9rem;
}

.lum-alert + .lum-alert { margin-top: 0.7rem; }

.lum-alert-icon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-muted);
}

.lum-alert strong { font-weight: 500; color: var(--c-text); }
.lum-alert p { color: var(--c-muted); }
.lum-alert-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.lum-alert-warn { border-color: rgba(217, 161, 78, 0.4); background: linear-gradient(90deg, var(--c-warn-dim), var(--c-bg-raised) 60%); }
.lum-alert-warn .lum-alert-icon { background: var(--c-warn); box-shadow: 0 0 10px rgba(217, 161, 78, 0.6); }
.lum-alert-err { border-color: rgba(201, 112, 112, 0.45); background: linear-gradient(90deg, var(--c-err-dim), var(--c-bg-raised) 60%); }
.lum-alert-err .lum-alert-icon { background: var(--c-err); box-shadow: 0 0 10px rgba(201, 112, 112, 0.6); }
.lum-alert-info { border-color: rgba(126, 163, 192, 0.4); background: linear-gradient(90deg, var(--c-info-dim), var(--c-bg-raised) 60%); }
.lum-alert-info .lum-alert-icon { background: var(--c-info); }
.lum-alert-gold { border-color: var(--c-accent-line); background: linear-gradient(90deg, var(--c-accent-dim), var(--c-bg-raised) 60%); }
.lum-alert-gold .lum-alert-icon { background: var(--c-accent); box-shadow: 0 0 10px rgba(243, 207, 135, 0.6); }

/* ---------- rows (lists of things) ---------- */

.lum-rows > * {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--c-line);
}

.lum-rows > *:first-child { border-top: 0; }
.lum-row-title { color: var(--c-text); }
.lum-row-meta { margin-top: 0.15rem; font-size: 0.82rem; color: var(--c-dim); }
.lum-row-actions { display: flex; gap: 0.4rem; align-items: center; }

/* presence dot */
.lum-presence { display: inline-flex; align-items: center; gap: 0.4rem; }
.lum-presence::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-dim);
}
.lum-presence.is-live { color: var(--c-ok); }
.lum-presence.is-live::before { background: var(--c-ok); box-shadow: 0 0 8px rgba(127, 180, 141, 0.7); }

/* ---------- key / value list ---------- */

.lum-kv { display: grid; grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); column-gap: 1.5rem; }
.lum-kv dt, .lum-kv dd { padding: 0.7rem 0; border-top: 1px solid var(--c-line); }
.lum-kv dt { color: var(--c-dim); font-size: 0.86rem; }
.lum-kv dd { color: var(--c-text); }
.lum-kv dt:first-of-type, .lum-kv dt:first-of-type + dd { border-top: 0; }

/* ---------- horizontal usage bars ---------- */

.lum-bars { display: grid; gap: 0.8rem; }
.lum-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; font-size: 0.88rem; }
.lum-bar-row span:first-child { color: var(--c-muted); }
.lum-bar-row span:nth-child(2) { color: var(--c-text); font-variant-numeric: tabular-nums; }
.lum-bar-track { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.lum-bar-fill { height: 100%; border-radius: 2px; background: var(--c-accent); opacity: 0.85; transform-origin: left; animation: lum-bar-in 0.9s var(--ease) both; }
@keyframes lum-bar-in { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- empty state ---------- */

.lum-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2.2rem 1.4rem;
  text-align: center;
  color: var(--c-dim);
  font-size: 0.9rem;
}

.lum-empty::before {
  content: "";
  width: 22px;
  height: 22px;
  opacity: 0.8;
  background:
    radial-gradient(circle, #fff8e7 0%, rgba(238, 217, 168, 0.7) 20%, rgba(243, 207, 135, 0) 58%) center / 48% 48% no-repeat,
    linear-gradient(to bottom, rgba(238, 217, 168, 0), rgba(238, 217, 168, 0.7) 50%, rgba(238, 217, 168, 0)) center / 1px 100% no-repeat,
    linear-gradient(to right, rgba(238, 217, 168, 0), rgba(238, 217, 168, 0.7) 50%, rgba(238, 217, 168, 0)) center / 100% 1px no-repeat;
}

/* ---------- toggle switch (wraps a real checkbox) ---------- */

.lum-switch { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 0.92rem; color: var(--c-text); margin: 0; }
.lum-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lum-switch-track {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--c-line-strong);
  background: var(--c-bg);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lum-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-dim);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.lum-switch input:checked + .lum-switch-track { background: var(--c-accent-dim); border-color: var(--c-accent-line); }
.lum-switch input:checked + .lum-switch-track::after { transform: translateX(16px); background: var(--c-accent); box-shadow: 0 0 8px rgba(243, 207, 135, 0.6); }
.lum-switch input:focus-visible + .lum-switch-track { outline: 1.5px solid var(--c-accent); outline-offset: 2px; }
.lum-switch input:disabled + .lum-switch-track { opacity: 0.45; }

/* ---------- pairing code ---------- */

input.lum-code {
  width: 12.5rem;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
}

.lum-inline-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.lum-help { margin-top: 0.5rem; font-size: 0.82rem; color: var(--c-dim); }
.lum-help.is-err { color: var(--c-err); }
.lum-help.is-ok { color: var(--c-ok); }
.lum-main code, .lum-cmd { font-family: var(--font-mono); font-size: 0.82em; padding: 0.1em 0.45em; border: 1px solid var(--c-line); border-radius: var(--radius-s); background: rgba(255, 255, 255, 0.03); color: var(--c-text); }

/* ---------- choice chips (questionnaires, filters) ---------- */

.lum-choices { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lum-choice {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--c-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.lum-choice:hover { color: var(--c-text); border-color: var(--c-muted); }
.lum-choice[aria-pressed="true"] { color: var(--c-text); border-color: var(--c-accent-line); background: var(--c-accent-dim); }
/* Native form controls: <input class="lum-choice-in" type="radio|checkbox"> followed by
   <label class="lum-choice">. Works without JS; the input is visually hidden, the label is the chip. */
.lum-choice-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.lum-choice { margin: 0; text-transform: none; letter-spacing: normal; }
.lum-choice-in:checked + .lum-choice { color: var(--c-text); border-color: var(--c-accent-line); background: var(--c-accent-dim); }
.lum-choice-in:focus-visible + .lum-choice { outline: 1.5px solid var(--c-accent); outline-offset: 2px; }

/* ---------- app tiles ---------- */

.lum-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 9.5rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: var(--c-card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.lum-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(243, 207, 135, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.lum-tile:hover { border-color: var(--c-accent-line); transform: translateY(-2px); }
.lum-tile:hover::after { opacity: 1; }
.lum-tile p { color: var(--c-dim); font-size: 0.86rem; }
.lum-tile-go { margin-top: auto; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent); }
.lum-tile.is-locked { border-style: dashed; }
.lum-tile.is-locked .lum-tile-go { color: var(--c-muted); }

/* ---------- skeleton loading ---------- */

.lum-skeleton {
  display: block;
  height: 0.9em;
  border-radius: var(--radius-s);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  background-size: 200% 100%;
  animation: lum-skel 1.6s ease-in-out infinite;
}
@keyframes lum-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- responsive shell ---------- */

@media (max-width: 960px) {
  .lum-shell { grid-template-columns: 1fr; }
  .lum-side {
    position: sticky;
    top: var(--nav-h);
    z-index: 50;
    height: auto;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    padding: 0.6rem 1rem;
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    background: rgba(6, 6, 8, 0.92);
    backdrop-filter: blur(10px);
  }
  .lum-side-group { display: contents; }
  .lum-side-label { display: none; }
  .lum-side-link { flex-shrink: 0; padding: 0.45rem 0.8rem; font-size: 0.84rem; }
  .lum-side-link.is-active::before { left: 18%; right: 18%; top: auto; bottom: -0.6rem; width: auto; height: 2px; }
  .lum-side-count { display: none; }
  .lum-grid-2, .lum-grid-3, .lum-grid-hero { grid-template-columns: 1fr; }
  .lum-apps { display: none; }
}

@media (max-width: 560px) {
  .lum-alert { grid-template-columns: auto minmax(0, 1fr); }
  .lum-alert-actions { grid-column: 1 / -1; }
  .lum-rows > * { grid-template-columns: 1fr; }
  .lum-kv { grid-template-columns: 1fr; }
  .lum-kv dd { border-top: 0; padding-top: 0; }
}

/* visually hidden, still read by screen readers */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================
   v2 light: the projector-light layer
   Ambient glow + grain, cursor spotlight on panels, light sweep on
   meters, image tiles, staggered view entrance, count-up, sparks.
   Opt-in through classes; reduced motion turns the movement off.
   ============================================================ */

/* ambient: a fixed layer behind the shell. <div class="lum-ambient" aria-hidden="true"></div> */
.lum-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 88% -5%, rgba(243, 207, 135, 0.09), transparent 70%),
    radial-gradient(ellipse 40% 35% at 10% 105%, rgba(243, 207, 135, 0.04), transparent 70%),
    var(--c-bg);
}

/* film grain: an inline SVG noise, no request leaves the site */
.lum-ambient::after {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: lum-grain 1.2s steps(6) infinite;
}

@keyframes lum-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 2%); }
  100% { transform: translate(0, 0); }
}

body:has(.lum-ambient) { background: transparent; }

/* the slow breathing light at the top of the page */
.lum-ambient::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -30%;
  width: 70vw;
  height: 70vh;
  background: radial-gradient(closest-side, rgba(243, 207, 135, 0.07), transparent);
  animation: lum-breathe 9s ease-in-out infinite alternate;
}

@keyframes lum-breathe {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

/* cursor spotlight on panels and tiles: JS sets --mx / --my on .lum-glow */
.lum-glow { position: relative; isolation: isolate; }
.lum-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(243, 207, 135, 0.07), transparent 70%);
  transition: opacity 0.4s var(--ease);
}
.lum-glow:hover::before { opacity: 1; }
.lum-glow > * { position: relative; z-index: 1; }

/* a hairline that lights up along the panel border under the cursor */
.lum-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(243, 207, 135, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.lum-glow:hover::after { opacity: 1; }

/* the meter carries a band of light, like the progress fills */
.lum-meter-fill { position: relative; overflow: hidden; }
.lum-meter-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, rgba(255, 246, 221, 0), rgba(255, 246, 221, 0.55), rgba(255, 246, 221, 0));
  animation: lum-sweep 3.6s ease-in-out 0.8s infinite;
}
.lum-meter.is-empty .lum-meter-fill::after { display: none; }

/* a panel with a film still behind it (balance, hero cards) */
.lum-panel-media { position: relative; isolation: isolate; }
.lum-panel-media > .lum-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: var(--pos, 80% 50%);
  opacity: 0.5;
  -webkit-mask: linear-gradient(90deg, transparent 38%, #000 96%);
  mask: linear-gradient(90deg, transparent 38%, #000 96%);
  transform: scale(1.04);
  transition: transform 1.6s var(--ease), opacity 0.8s var(--ease);
  animation: lum-media-drift 26s ease-in-out infinite alternate;
}
.lum-panel-media:hover > .lum-media { opacity: 0.75; }
.lum-panel-media .lum-panel-body { text-shadow: 0 1px 2px rgba(6, 6, 8, 0.9), 0 0 18px rgba(6, 6, 8, 0.8); }
.lum-panel-media .btn { text-shadow: none; }
@keyframes lum-media-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

/* image tiles: a still on top, zoom + a light pass on hover */
.lum-tile-media {
  margin: -1.3rem -1.4rem 0.6rem;
  height: 110px;
  background-size: cover;
  background-position: var(--pos, 60% 50%);
  position: relative;
  overflow: hidden;
  transition: transform 1.2s var(--ease);
}
.lum-tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 30%, var(--c-card) 100%),
    linear-gradient(105deg, transparent 35%, rgba(255, 240, 210, 0.16) 50%, transparent 65%) no-repeat;
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 150% 0;
  transition: background-position 1.1s var(--ease);
}
.lum-tile:hover .lum-tile-media { transform: scale(1.05); }
.lum-tile:hover .lum-tile-media::after { background-position: 0 0, -50% 0; }
.lum-tile.is-locked .lum-tile-media { filter: grayscale(0.6) brightness(0.7); }

/* view entrance: children rise in sequence. JS adds .lum-enter to the view. */
.lum-enter > * {
  animation: lum-rise 0.7s var(--ease) backwards; /* not "both": a filled transform keeps a stacking context and traps dropdowns */
}
.lum-enter > *:nth-child(1) { animation-delay: 0.02s; }
.lum-enter > *:nth-child(2) { animation-delay: 0.08s; }
.lum-enter > *:nth-child(3) { animation-delay: 0.14s; }
.lum-enter > *:nth-child(4) { animation-delay: 0.2s; }
.lum-enter > *:nth-child(5) { animation-delay: 0.26s; }
.lum-enter > *:nth-child(n + 6) { animation-delay: 0.32s; }
@keyframes lum-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* the gold horizon under a page title */
.lum-horizon {
  display: block;
  height: 1px;
  width: min(360px, 60%);
  margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--c-accent), rgba(243, 207, 135, 0.2) 60%, transparent);
  box-shadow: 0 0 14px rgba(243, 207, 135, 0.45);
  transform-origin: left;
  animation: lum-draw 1.4s var(--ease) 0.2s both;
}
@keyframes lum-draw { from { transform: scaleX(0); } to { transform: none; } }

/* sparks: a short burst of light (top-up success) */
.lum-sparks { position: relative; display: inline-block; }
.lum-sparks i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff3d6;
  box-shadow: 0 0 10px rgba(243, 207, 135, 0.9);
  opacity: 0;
  animation: lum-spark 1.1s var(--ease) forwards;
}
@keyframes lum-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d, 90px)) scale(0.3); }
}

/* a progress ring (checklist) */
.lum-ring { --p: 0; width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.7rem; color: var(--c-muted);
  background: conic-gradient(var(--c-accent) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); position: relative; }
.lum-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-card); }
.lum-ring span { position: relative; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lum-ambient::after, .lum-ambient::before, .lum-panel-media > .lum-media, .lum-meter-fill::after { animation: none !important; }
  .lum-enter > * { animation: none !important; }
}

/* toast stack used by lumiere-ui.js */
#lum-toasts { position: fixed; right: 24px; bottom: 24px; z-index: 1100; display: grid; gap: 0.5rem; justify-items: end; }
#lum-toasts .toast { position: static; }

/* ── Explainers (lumiere-explain.js, LUMIERE_EXPLAINERS) ────────────────────
   A short "what this does" note above a control. Dark raised surface, gold
   hairline, 6px radius, Jost. Scripts Jost lacks (Greek, Arabic, Hebrew,
   Devanagari, CJK, Vietnamese stacking) fall through to the system's own
   fonts: nothing is fetched from a third party. */
.lum-explain {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4000;
  box-sizing: border-box;
  max-width: min(300px, calc(100vw - 16px));
  padding: 0.6rem 0.8rem 0.65rem;
  background: var(--c-bg-raised);
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
  border-top: 1px solid var(--c-accent-line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  font-family: "Jost Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 350;
  line-height: 1.45;
  letter-spacing: 0.005em;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}
.lum-explain[hidden] { display: none; }
.lum-explain.is-in { opacity: 1; transform: none; }
.lum-explain[data-side="bottom"] { border-top-color: var(--c-line-strong); border-bottom: 1px solid var(--c-accent-line); }
.lum-explain[data-side="right"] { border-top-color: var(--c-line-strong); border-left: 1px solid var(--c-accent-line); }
.lum-explain[data-side="left"] { border-top-color: var(--c-line-strong); border-right: 1px solid var(--c-accent-line); }
.lum-explain[dir="rtl"] { line-height: 1.6; }
.lum-explain:lang(el), .lum-explain:lang(vi) { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
.lum-explain:lang(ar) { font-family: "Geeza Pro", "SF Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif; font-size: 0.9rem; font-weight: 400; }
.lum-explain:lang(he) { font-family: "SF Hebrew", "Arial Hebrew", "Segoe UI", "Noto Sans Hebrew", Arial, system-ui, sans-serif; font-weight: 400; }
.lum-explain:lang(hi) { font-family: "Kohinoor Devanagari", "Devanagari Sangam MN", "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif; font-weight: 400; line-height: 1.6; }
.lum-explain:lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", system-ui, sans-serif; font-weight: 400; line-break: strict; }
.lum-explain:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; font-weight: 400; }
.lum-explain:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", system-ui, sans-serif; font-weight: 400; word-break: keep-all; }
/* a long-press must not open the system's link / text callout over the popup */
.lx-on [data-explain] { -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) {
  .lum-explain { transition: none; transform: none; }
}