/* Lenci Studio Pro — "photo mode" interface
   Tokens: canvas #0a0a0f, panels #12121a, energy gradient violet → magenta → cyan, gold for the key light.
   Stage geometry (.world .backdrop .seamless .actor* .cast .reflection .pool .grain .vignette .fx* .crew) is computed by the engine and kept verbatim. */
:root {
  --canvas: #0a0a0f; --panel: #12121a; --panel-2: #171723; --panel-3: #1d1d2b; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.14);
  --ink: #ececf4; --muted: #a3a3b6; --dim: #74748c; --accent: #8b5cf6; --accent-2: #c9b8ff; --violet: #8b5cf6; --magenta: #d946ef; --cyan: #22d3ee; --amber: #f5b041; --gold: #f5b041; --blue: #6cb4ff; --accent-ink: #0a0a0f;
  --energy: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #22d3ee 100%);
  --energy-h: linear-gradient(90deg, #8b5cf6 0%, #d946ef 55%, #22d3ee 100%);
  --active: linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #d946ef 100%);
  --latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --arabic: "Cairo", "Noto Naskh Arabic", "Geeza Pro", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Sora", "Inter", system-ui, sans-serif;
  --edge: 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.05);
  --ease: cubic-bezier(.2, .7, .2, 1); --t: .2s; --sheet-h: 46px;
}
html[dir="rtl"] { --display: var(--arabic); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; background: radial-gradient(1100px 600px at 10% -10%, rgba(139,92,246,.14), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(34,211,238,.07), transparent 60%), var(--canvas); color: var(--ink); font-family: var(--latin); font-size: 13.5px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
[lang="ar"], [dir="rtl"] body { font-family: var(--arabic), var(--latin); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(168,85,247,.55); } ::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.tile:focus-visible, .chip:focus-visible, .ghost:focus-visible, .primary:focus-visible, .tab:focus-visible, .fx-btn:focus-visible, .shot-open:focus-visible, .result:focus-visible, .ingredient-open:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(139,92,246,.25); }
select { appearance: none; -webkit-appearance: none; padding-inline-end: 26px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3b6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 11px; }
[dir="rtl"] select { background-position: left 9px center; }

.app { height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.app[data-view="sheet"] { grid-template-rows: auto minmax(0, 42vh) minmax(0, 1fr); }

/* ------------------------------------------------------------------ boot */
.top { animation: bootDown .5s var(--ease) both; }
.stagepane { animation: bootUp .5s var(--ease) .08s both; }
.inspector { animation: bootIn .5s var(--ease) .16s both; }
.sheet { animation: bootUp .5s var(--ease) .24s both; }
[dir="rtl"] .inspector { animation-name: bootInRtl; }
@keyframes bootDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes bootUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bootIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes bootInRtl { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ top */
.top { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(24,24,36,.88), rgba(14,14,22,.78)); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.25); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,.7) 22%, rgba(217,70,239,.55) 50%, rgba(34,211,238,.5) 78%, transparent); opacity: .75; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 26px; height: 26px; flex: none; border-radius: 8px; background: linear-gradient(180deg, #1a1a28, #0d0d16); box-shadow: var(--edge), 0 0 18px rgba(139,92,246,.35); position: relative; }
.mark::after { content: ""; position: absolute; inset: 6px; border-radius: 4px; background: var(--energy); box-shadow: 0 0 10px rgba(217,70,239,.75), inset 0 1px 0 rgba(255,255,255,.4); }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(90deg, #fff, #c9c3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.arabic { font-family: var(--arabic); font-size: 17px; font-weight: 600; line-height: 1; margin-top: 2px; color: #d8d4f0; }
.pro { font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: #d9ccff; border: 1px solid rgba(168,85,247,.55); border-radius: 999px; padding: 3px 8px; background: linear-gradient(180deg, rgba(139,92,246,.18), rgba(139,92,246,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.scene-name { font-family: var(--display); font-weight: 600; font-size: 13.5px; background: transparent; border: 1px solid transparent; border-bottom-color: rgba(255,255,255,.12); border-radius: 8px 8px 3px 3px; padding: 6px 10px; min-width: 150px; width: 180px; color: var(--ink); transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.scene-name:hover { border-bottom-color: rgba(201,184,255,.55); background: rgba(255,255,255,.03); }
.scene-name:focus { outline: none; border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.08); box-shadow: 0 0 0 3px rgba(139,92,246,.18); border-radius: 8px; }
.top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmd-group { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.cmd-group .ghost { border: 0; background: transparent; box-shadow: none; border-radius: 8px; }
.ghost { font-family: var(--display); font-weight: 600; font-size: 11.5px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line-2); color: var(--muted); padding: 7px 12px; border-radius: 9px; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color var(--t), color var(--t), background var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.ghost:hover { color: var(--ink); border-color: rgba(255,255,255,.24); background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03)); transform: translateY(-1px); }
.ghost:active { transform: translateY(0) scale(.98); }
.ghost[aria-pressed="true"] { color: #e8dfff; border-color: rgba(168,85,247,.7); background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(139,92,246,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 14px rgba(139,92,246,.25); }
.ghost[disabled] { opacity: .35; cursor: default; transform: none; }
.ghost.icon { padding: 6px 10px; font-size: 15px; font-family: var(--latin); }
.primary { position: relative; isolation: isolate; border: 0; background: linear-gradient(135deg, #7c3aed 0%, #a855f7 38%, #d946ef 72%, #22d3ee 135%); background-size: 200% 100%; color: #fff; font-family: var(--display); font-weight: 700; font-size: 12.5px; padding: 10px 18px; border-radius: 12px; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(139,92,246,.45), 0 0 0 1px rgba(217,70,239,.35); text-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t) var(--ease), box-shadow var(--t), background-position .5s var(--ease); }
.primary::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: radial-gradient(60% 80% at 50% 50%, rgba(217,70,239,.55), rgba(139,92,246,.3) 50%, transparent 72%); z-index: -1; filter: blur(10px); animation: heroPulse 2.2s ease-in-out infinite; pointer-events: none; }
.primary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4), 0 12px 32px rgba(139,92,246,.6), 0 0 0 1px rgba(217,70,239,.5); background-position: 100% 0; }
.primary:active { transform: translateY(0) scale(.98); }
.primary[disabled] { opacity: .5; cursor: progress; transform: none; }
.primary[disabled]::after { animation: none; opacity: .3; }
@keyframes heroPulse { 0%, 100% { opacity: .5; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
.shoot { padding: 8px 20px; padding-inline-start: 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; }
.shoot::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.95); background: radial-gradient(circle, #fff 0 2.2px, transparent 2.9px); box-shadow: 0 0 8px rgba(255,255,255,.7); flex: none; }
.presets { display: flex; gap: 6px; }
.presets select { background-color: rgba(255,255,255,.03); border: 1px solid var(--line-2); border-radius: 9px; padding: 6px 9px; color: var(--muted); max-width: 160px; font-family: var(--display); font-weight: 600; font-size: 11.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color var(--t), color var(--t); }
.presets select:hover { color: var(--ink); border-color: rgba(255,255,255,.24); }
.view-tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); border-radius: 999px; padding: 2px; background: rgba(0,0,0,.35); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04); }
.view-tabs::before { content: ""; position: absolute; top: 2px; bottom: 2px; inset-inline-start: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--energy); box-shadow: 0 2px 10px rgba(139,92,246,.5), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .28s var(--ease); }
.view-tabs:has(#tab-sheet[aria-selected="true"])::before { transform: translateX(100%); }
[dir="rtl"] .view-tabs:has(#tab-sheet[aria-selected="true"])::before { transform: translateX(-100%); }
.tab { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); padding: 6px 16px; border-radius: 999px; font-family: var(--display); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-align: center; white-space: nowrap; transition: color var(--t); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
@supports not selector(:has(a)) { .view-tabs::before { display: none; } .tab[aria-selected="true"] { background: var(--energy); } }

/* ----------------------------------------------------------------- main */
.main { display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: 0; }
.stagepane { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
.app[data-view="sheet"] .ingredients, .app[data-view="sheet"] .shotlist, .app[data-view="sheet"] .hint { display: none; }
.app[data-view="sheet"] .stagepane { grid-template-rows: auto minmax(0, 1fr); }
.shotlist { display: flex; align-items: center; gap: 10px; padding: 0 18px 10px; min-width: 0; }
.shotlist .add-shot { flex: none; }
.sl-title { font-family: var(--display); font-weight: 600; }
.shotlist .sl-title { flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .shotlist .sl-title { letter-spacing: 0; text-transform: none; }
.shot-strip { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 0; min-width: 0; padding: 3px 2px; counter-reset: shot; }
.shot-strip .muted { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; color: var(--dim); white-space: nowrap; padding: 6px 10px; border: 1px dashed rgba(255,255,255,.1); border-radius: 999px; }
.shot { position: relative; flex: none; width: 64px; counter-increment: shot; }
.shot::before { content: counter(shot); position: absolute; top: 4px; inset-inline-start: 4px; z-index: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 6px; background: rgba(10,10,15,.82); color: #fff; font: 600 9px/16px var(--display); text-align: center; border: 1px solid rgba(255,255,255,.16); pointer-events: none; }
.shot-open { display: block; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--panel-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.shot-open:hover { border-color: rgba(168,85,247,.85); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(168,85,247,.5), 0 0 18px rgba(139,92,246,.45), 0 8px 18px rgba(0,0,0,.4); }
.shot-open img, .shot-open .shot-blank { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(180deg, #2a2a36, #15151d); }
.shot > span { display: block; font-size: 9.5px; color: var(--dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* BAC-428: number + title; the title box has its own direction (dir=auto) so it is always cut at its trailing end, in LTR and RTL */
.shot > span.shot-cap { display: flex; }
.shot-cap .shot-n { flex: none; white-space: pre; }
.shot-cap .shot-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot .remove { position: absolute; top: 0; inset-inline-end: 0; width: 16px; height: 16px; border: 0; border-radius: 0 9px 0 6px; background: rgba(10,10,15,.85); color: var(--muted); font-size: 11px; line-height: 16px; padding: 0; transition: color var(--t), background var(--t); }
.shot .remove:hover { color: #fff; background: rgba(217,70,239,.8); }
/* four units that wrap as wholes: ratio · shot size · the view aids (guides + 3D) · the output (provider · type) with the command cluster
   (effects · export) at its end. A wide stage holds all four on one row; narrower, they flow onto two or three rows, so a control is never
   left alone on a row (only a phone splits the output unit: provider and type, then the cluster). */
.stage-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 18px 0; flex-wrap: wrap; }
.tb-group { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.tb-view { flex-wrap: nowrap; }
.tb-out { flex: 1 1 auto; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-toolbar .chips { gap: 2px; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.stage-toolbar .chips:empty { display: none; }
.chip { font-family: var(--display); font-weight: 600; border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 999px; padding: 5px 8px; font-size: 10px; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.stage-toolbar .chip { border-color: transparent; background: transparent; }
/* the Studio's own chips read as values, in sentence case; the small capitals stay for the headings above them */
:is(.stage-toolbar, .inspector) .chip { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 500; padding: 5px 9px; }
:is(.stage-toolbar, .inspector) .chip[aria-pressed="true"] { font-weight: 600; }
.stage-toolbar .format-chip { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ratio-glyph { display: inline-block; flex: none; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; opacity: .8; }
.stage-toolbar .icon-chip { display: inline-grid; place-items: center; padding: 4px 7px; line-height: 0; }
.icon-chip svg { width: 17px; height: 17px; }
.export-still svg { width: 16px; height: 16px; display: block; }
.cmd-cluster .export-still { padding: 7px 9px; }
[dir="rtl"] .chip { letter-spacing: 0; text-transform: none; font-size: 12px; }
.chip:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.07); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--active); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(217,70,239,.3), 0 3px 12px rgba(139,92,246,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
/* the command cluster never adds a toolbar row: it shrinks (basis 0, capped at its content) and the active-effects tray scrolls instead of wrapping */
.cmd-cluster { display: flex; align-items: center; gap: 6px; padding: 4px; padding-inline-start: 6px; margin-inline-start: auto; flex: 1 1 0; max-width: max-content; min-width: 0; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.cmd-cluster > button, .cmd-cluster > a { flex: none; white-space: nowrap; }
.cmd-cluster .ghost { border-radius: 999px; font-size: 11px; }
.cmd-cluster .chips { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 420px; border: 0; background: transparent; padding: 0; gap: 4px; }
.cmd-cluster .chips::-webkit-scrollbar { display: none; }
.cmd-cluster .chips .chip { flex: none; }
.cmd-cluster .chips:empty { display: none; }
/* narrower stages (901–1360 px, long labels in de/ja): the cluster takes its own toolbar row when it cannot share one; inside it never
   wraps (a wrapped row put the effect chips on top of Connections / Export still, BAC-443): the chips tray shrinks and scrolls instead */
.cmd-cluster { flex: 0 1 auto; max-width: 100%; flex-wrap: nowrap; }
.cmd-cluster .chips { flex: 1 1 auto; }
.stage-holder { min-height: 0; display: grid; place-items: center; padding: 12px 18px; }
.stage-holder { position: relative; isolation: isolate; }
.stage-holder::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 6%; bottom: 6%; border-radius: 50%; background: radial-gradient(closest-side at 30% 40%, rgba(139,92,246,.3), transparent), radial-gradient(closest-side at 72% 58%, rgba(217,70,239,.2), transparent), radial-gradient(closest-side at 50% 88%, rgba(34,211,238,.16), transparent); opacity: .7; animation: aurora 16s ease-in-out infinite alternate; will-change: transform; pointer-events: none; }
@keyframes aurora { 0% { transform: translate(-3%, -2%) rotate(-5deg) scale(1); } 100% { transform: translate(3%, 2%) rotate(5deg) scale(1.08); } }
.crew { position: absolute; bottom: 12px; left: 0; height: 44%; width: auto; pointer-events: none; z-index: 3; opacity: .96; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); transition: opacity .3s, transform .35s var(--ease); transform-origin: 50% 100%; }
.crew.flip { transform: scaleX(-1); }
.crew.swap { opacity: 0; }
@media (max-width: 1100px) { .crew { display: none !important; } }
.stage {
  position: relative; max-width: 100%; max-height: 100%; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #101016; border-radius: 14px; user-select: none; touch-action: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 0 0 5px #0a0a0f, 0 0 0 6px rgba(139,92,246,.38), 0 0 44px 6px rgba(139,92,246,.13), 0 34px 80px rgba(0,0,0,.6);
}
.world { position: absolute; inset: 0; transform-origin: var(--ox, 50%) var(--oy, 80%); transform: translateY(var(--dy, 0px)) rotate(var(--roll, 0deg)) scale(var(--zoom, 1)); transition: transform .8s var(--ease); }
.stage.dragging .world, .stage.dragging .backdrop, .stage.dragging .actor > * { transition: none !important; }
.backdrop { position: absolute; left: -40%; top: -40%; width: 180%; height: 180%; object-fit: cover; display: block; transform-origin: var(--bg-ox, 50%) var(--bg-oy, 66.7%); transform: translate3d(var(--bg-dx, 0px), var(--bg-dy, 0px), 0) scale(var(--bg-scale, 1)); filter: var(--grade-filter, brightness(1)) blur(var(--bg-blur, 0px)); transition: transform .8s var(--ease), filter .5s var(--ease); }
.backdrop[hidden], .seamless[hidden] { display: none; }
.seamless { position: absolute; inset: -40%; transform: translate3d(var(--bg-dx, 0px), var(--bg-dy, 0px), 0); filter: var(--grade-filter, none); transition: transform .8s var(--ease), filter .6s var(--ease); }
.floorplan svg { direction: ltr; }
.grade { position: absolute; inset: -25%; pointer-events: none; background: var(--grade-overlay, none); mix-blend-mode: var(--grade-blend, normal); opacity: var(--grade-opacity, 0); transition: opacity .6s var(--ease); }
.pool { position: absolute; pointer-events: none; mix-blend-mode: screen; transition: left .6s var(--ease), top .6s var(--ease), width .6s var(--ease), height .6s var(--ease); }
.actor > * { position: absolute; transition: left .6s var(--ease), top .6s var(--ease), height .6s var(--ease), width .6s var(--ease), opacity .6s var(--ease); }
.actor .body { display: block; cursor: grab; transform-origin: 50% var(--feet-pct, 100%); transform: perspective(var(--persp, 2000px)) rotateX(var(--pitch-rot, 0deg)) scaleY(var(--pitch-stretch, 1)) skewX(var(--sway, 0deg)) rotate(var(--rot, 0deg)); }
.actor .body:active { cursor: grabbing; }
.actor .body.missing { outline: 1px dashed var(--accent); }
.actor .cast { pointer-events: none; }
.actor .cast img { display: block; width: 100%; height: 100%; transform-origin: 50% var(--feet-pct, 100%); transform: scaleY(var(--cast-sy, -0.4)) skewX(calc(-1 * var(--cast-skew, 20deg))); filter: brightness(0) blur(var(--cast-blur, 8px)); opacity: var(--cast-alpha, .3); transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease); }
.actor .cast[hidden] { display: none; }
.actor .reflection { pointer-events: none; overflow: hidden; opacity: var(--refl-alpha, 0); }
.actor .reflection canvas { display: block; position: absolute; left: 0; filter: blur(1.5px); }
.actor .contact { pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 72%); filter: blur(3px); }
.actor .plinth { pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.actor .plinth[hidden] { display: none; }
.plinth-top { position: absolute; left: 0; right: 0; top: 0; height: var(--plinth-top, 40%); background: linear-gradient(180deg, #34343a, #202024); clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); }
.plinth-front { position: absolute; left: 0; right: 0; top: var(--plinth-top, 40%); bottom: 0; background: linear-gradient(180deg, #19191c, #0c0c0e); }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: var(--grain, 0); background-size: 256px 256px; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 130%); opacity: var(--vignette, .3); transition: opacity .4s var(--ease); }
.guides { position: absolute; inset: 0; pointer-events: none; }
.guides[data-guides="thirds"] { background: linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.4) calc(33.33% - .5px), rgba(255,255,255,.4) calc(33.33% + .5px), transparent calc(33.33% + .5px)), linear-gradient(to right, transparent calc(66.66% - .5px), rgba(255,255,255,.4) calc(66.66% - .5px), rgba(255,255,255,.4) calc(66.66% + .5px), transparent calc(66.66% + .5px)), linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.4) calc(33.33% - .5px), rgba(255,255,255,.4) calc(33.33% + .5px), transparent calc(33.33% + .5px)), linear-gradient(to bottom, transparent calc(66.66% - .5px), rgba(255,255,255,.4) calc(66.66% - .5px), rgba(255,255,255,.4) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.guides[data-guides="golden"] { background: linear-gradient(to right, transparent calc(38.2% - .5px), rgba(245,176,65,.55) calc(38.2% - .5px), rgba(245,176,65,.55) calc(38.2% + .5px), transparent calc(38.2% + .5px)), linear-gradient(to right, transparent calc(61.8% - .5px), rgba(245,176,65,.55) calc(61.8% - .5px), rgba(245,176,65,.55) calc(61.8% + .5px), transparent calc(61.8% + .5px)), linear-gradient(to bottom, transparent calc(38.2% - .5px), rgba(245,176,65,.55) calc(38.2% - .5px), rgba(245,176,65,.55) calc(38.2% + .5px), transparent calc(38.2% + .5px)), linear-gradient(to bottom, transparent calc(61.8% - .5px), rgba(245,176,65,.55) calc(61.8% - .5px), rgba(245,176,65,.55) calc(61.8% + .5px), transparent calc(61.8% + .5px)); }
.guides[data-guides="safe"] { box-shadow: inset 0 0 0 5% rgba(255,255,255,.1); }
.guides[data-guides="safe"]::after { content: ""; position: absolute; inset: 5% 5%; border: 1px dashed rgba(34,211,238,.6); }
/* viewfinder: four corner brackets + a faint film-gate edge; purely decorative, outside the export */
.vf { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 20px rgba(0,0,0,.09); }
.vf i { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.78); filter: drop-shadow(0 0 3px rgba(255,255,255,.45)); transition: transform .25s var(--ease), opacity .25s; }
.vf i:nth-child(1) { top: 6px; left: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 3px; }
.vf i:nth-child(2) { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-top-right-radius: 3px; }
.vf i:nth-child(3) { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-bottom-left-radius: 3px; }
.vf i:nth-child(4) { bottom: 6px; right: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 3px; }
.stage:hover .vf i:nth-child(1) { transform: translate(2px, 2px); }
.stage:hover .vf i:nth-child(2) { transform: translate(-2px, 2px); }
.stage:hover .vf i:nth-child(3) { transform: translate(2px, -2px); }
.stage:hover .vf i:nth-child(4) { transform: translate(-2px, -2px); }
.stage.dragging .vf i, .stage.generating .vf i { opacity: .35; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.hud { position: absolute; top: 14px; inset-inline-start: 14px; display: flex; align-items: flex-start; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.92); pointer-events: none; padding: 6px 12px; border-radius: 14px; background: rgba(10,10,15,.5); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); max-width: 36%; line-height: 1.35; transition: opacity .5s var(--ease, ease); }
/* the overlay stays in its corner and never blurs what is under it; it fades while the pointer is on the stage or after a quiet moment,
   so the head cover and the face stay visible (it wraps rather than cutting its words) */
.hud.quiet, .stage:hover .hud { opacity: .18; }
.stage.previewing { outline: 2px dashed rgba(201,184,255,.75); outline-offset: -3px; }
.stage.small-stage .hud { max-width: 32%; padding: 4px 7px; gap: 0; font-size: 9px; letter-spacing: 0; top: 10px; inset-inline-start: 10px; }
.stage.small-stage .hud .dot { display: none; }
[dir="rtl"] .hud { letter-spacing: 0; text-transform: none; font-size: 11px; font-family: var(--arabic); }
.hud > span:last-child { min-width: 0; flex: 1; white-space: normal; unicode-bidi: plaintext; }
.hud .dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444, 0 0 2px #fff inset; animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* caption bar: centred between the bottom brackets (physical left/translate so it stays centred in RTL) */
.hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 11px; color: rgba(255,255,255,.72); pointer-events: none; padding: 5px 12px; border-radius: 999px; background: rgba(10,10,15,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.06); max-width: calc(100% - 56px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t), background var(--t), border-color var(--t); }
.hint.toast { color: #fff; background: linear-gradient(135deg, rgba(139,92,246,.94), rgba(217,70,239,.88)); border-color: rgba(255,255,255,.32); box-shadow: 0 8px 24px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.3); animation: toastIn .3s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 900px) { .hint.toast { display: block; } }
.stage.over::after { content: ""; position: absolute; inset: 0; border: 2px dashed #d946ef; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 40px rgba(217,70,239,.25); }

/* ----------------------------------------------------------- ingredients */
.ingredients { display: flex; align-items: center; gap: 12px; padding: 8px 18px 12px; min-height: 56px; }
.dropzone { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 7px 12px; border: 1px dashed rgba(168,85,247,.5); border-radius: 14px; background: linear-gradient(90deg, rgba(139,92,246,.09), rgba(217,70,239,.03) 50%, transparent); transition: transform var(--t) var(--ease), border-color var(--t), background var(--t), box-shadow var(--t); }
.dropzone::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--energy); -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 var(--t); pointer-events: none; }
.dropzone:hover { transform: translateY(-1px); border-color: transparent; box-shadow: 0 8px 24px rgba(139,92,246,.18); }
.dropzone:hover::before, .dropzone.over::before { opacity: 1; }
.dropzone.over { border-color: transparent; background: rgba(139,92,246,.14); box-shadow: 0 0 0 4px rgba(139,92,246,.15), 0 8px 24px rgba(139,92,246,.28); }
.drop-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--energy); box-shadow: 0 6px 16px rgba(139,92,246,.4), inset 0 1px 0 rgba(255,255,255,.35); position: relative; }
.drop-icon::before, .drop-icon::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.drop-icon::before { width: 12px; height: 2px; } .drop-icon::after { width: 2px; height: 12px; }
.drop-text { display: flex; flex-direction: column; min-width: 0; }
.drop-text strong { font-family: var(--display); font-size: 12px; font-weight: 600; }
.drop-text .muted { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse { flex: none; font-family: var(--display); border: 1px solid rgba(168,85,247,.55); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: #e3dcff; background: linear-gradient(180deg, rgba(139,92,246,.2), rgba(139,92,246,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: background var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.browse:hover { background: linear-gradient(180deg, rgba(139,92,246,.3), rgba(139,92,246,.1)); transform: translateY(-1px); box-shadow: 0 0 14px rgba(139,92,246,.3); }
.browse input { display: none; }
.ingredient-list { display: flex; gap: 8px; flex: none; max-width: 40%; overflow-x: auto; padding: 2px; }
.ingredient { position: relative; width: 44px; height: 44px; flex: none; }
.ingredient-open { display: block; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: var(--panel-2); padding: 0; transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease); }
.ingredient-open:hover { border-color: rgba(168,85,247,.7); transform: translateY(-1px); box-shadow: 0 0 12px rgba(139,92,246,.35); }
.ingredient-open img { width: 100%; height: 100%; object-fit: contain; display: block; background: linear-gradient(180deg, #2a2a36, #15151d); }
.ingredient[aria-pressed="true"] .ingredient-open { border-color: #a855f7; box-shadow: 0 0 0 1px #a855f7, 0 0 12px rgba(139,92,246,.5); }
.ingredient .remove { position: absolute; top: 0; inset-inline-end: 0; width: 15px; height: 15px; border: 0; border-radius: 0 0 0 6px; background: rgba(10,10,15,.85); color: var(--muted); font-size: 10px; line-height: 15px; padding: 0; }
.ingredient .remove:hover { color: #fff; background: rgba(217,70,239,.8); }

/* ------------------------------------------------------------- inspector */
.inspector { border-inline-start: 1px solid var(--line); background: linear-gradient(180deg, #13131c, #0e0e15); min-height: 0; display: flex; flex-direction: column; box-shadow: inset 1px 0 0 rgba(255,255,255,.03); }
.plan-sticky { flex: none; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.025), transparent); }
.plan-sticky .note { margin-bottom: 8px; }
.sections { min-height: 0; overflow: auto; padding: 10px 14px 28px; display: flex; flex-direction: column; gap: 8px; }
.section { flex: none; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #191927, #13131c); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; transition: border-color var(--t), box-shadow var(--t); }
.section:hover { border-color: rgba(255,255,255,.12); }
.section[open] { border-color: rgba(139,92,246,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(139,92,246,.06), 0 10px 30px rgba(0,0,0,.25); }
.section > summary { position: relative; list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 12px; font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color var(--t), background var(--t); }
.section > summary:hover { color: var(--ink); background: rgba(255,255,255,.025); }
.section > summary::-webkit-details-marker { display: none; }
.sec-icon { width: 14px; height: 14px; flex: none; color: #a78bfa; filter: drop-shadow(0 0 4px rgba(139,92,246,.6)); transition: color var(--t), transform var(--t) var(--ease); }
.section[open] > summary .sec-icon { color: #d1c4ff; }
.section > summary:hover .sec-icon { transform: scale(1.12); }
.sec-title { flex: none; }
.section > summary .val { margin-inline-start: auto; font-family: var(--mono); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: 10.5px; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.sec-chev { flex: none; width: 7px; height: 7px; margin-inline-start: 4px; border-right: 1.5px solid var(--dim); border-bottom: 1.5px solid var(--dim); transform: translateY(-2px) rotate(45deg); transition: transform .26s var(--ease), border-color var(--t); }
.section[open] > summary .sec-chev { transform: translateY(2px) rotate(225deg); border-color: #c4b5fd; }
[dir="rtl"] .section > summary { letter-spacing: 0; text-transform: none; font-size: 12px; }
.section[open] > summary { color: var(--ink); }
.section[open] > summary::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(139,92,246,.75), rgba(217,70,239,.4) 45%, rgba(34,211,238,.25) 70%, transparent); }
[dir="rtl"] .section[open] > summary::after { background: linear-gradient(270deg, rgba(139,92,246,.75), rgba(217,70,239,.4) 45%, rgba(34,211,238,.25) 70%, transparent); }
.section-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.sub { font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 5px 0 -2px; display: flex; align-items: center; gap: 8px; }
.sub::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.1), transparent); }
[dir="rtl"] .sub { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .sub::after { background: linear-gradient(270deg, rgba(255,255,255,.1), transparent); }
.sub .val { order: 2; margin-inline-start: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; unicode-bidi: plaintext; }
.note { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles.five .tile span { padding: 14px 4px 5px; font-size: 8.5px; letter-spacing: .06em; }
.tile { position: relative; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--panel-3); text-align: start; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05) 40%, transparent 62%); opacity: 0; transition: opacity var(--t); }
.tile:hover { border-color: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(168,85,247,.35), 0 8px 20px rgba(0,0,0,.4); }
.tile:hover::before { opacity: 1; }
.tile:active { transform: translateY(0) scale(.98); }
.tile[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 1px rgba(217,70,239,.3), 0 0 22px rgba(139,92,246,.38), 0 8px 20px rgba(0,0,0,.35); }
.tile[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; background: var(--energy); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tile img, .tile canvas { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #1a1a26; transition: transform .5s var(--ease); }
.tile:hover img, .tile:hover canvas { transform: scale(1.06); }
.tile.wide img, .tile.wide canvas { aspect-ratio: 3 / 2; }
.tile.tall img, .tile.tall canvas { aspect-ratio: 3 / 4; }
.tile.swatch { aspect-ratio: 1; min-height: 44px; }
.tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 7px 6px; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(transparent, rgba(8,8,14,.92) 72%); color: #f4f4f9; text-shadow: 0 1px 2px rgba(0,0,0,.85); z-index: 1; }
.tile[aria-pressed="true"] span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--energy); margin-inline-end: 5px; vertical-align: middle; box-shadow: 0 0 6px #d946ef; }
[dir="rtl"] .tile span { letter-spacing: 0; text-transform: none; font-size: 11px; }
.tile.missing { opacity: .45; }
.tile.missing::after { content: "…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--dim); background: none; padding: 0; -webkit-mask: none; mask: none; z-index: 2; }
.tile.dim { opacity: .7; }
.tile.covered { opacity: .38; filter: grayscale(.7); cursor: not-allowed; }   /* BAC-430: a hair style under a hijab */
.tile.covered span { text-decoration: line-through; text-decoration-color: rgba(245,176,65,.75); }
/* ------------------------------------------------------------- face bank: card in the Model section */
/* identity-only pick: the card shows the current face (or the model's own head), opens #face-sheet, and offers six quick picks */
.face-block { display: flex; flex-direction: column; gap: 8px; }
.face-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: var(--edge); }
.face-card-thumb { position: relative; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #1a1a26; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.face-card.has-face .face-card-thumb { box-shadow: 0 0 0 2px var(--violet), 0 0 18px rgba(139,92,246,.4); }
.face-card-thumb img, .face-card-thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.face-card-thumb canvas { object-position: 50% 50%; }
.face-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.face-card-kicker { font: 600 9px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
[dir="rtl"] .face-card-kicker { letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.face-card-label { font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face-card-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face-card-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.primary.face-choose { padding: 8px 14px; font-size: 11px; border-radius: 10px; letter-spacing: .05em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(139,92,246,.35); }
.primary.face-choose::after { animation: none; opacity: .4; }
.face-quick-head { display: flex; align-items: baseline; justify-content: space-between; font: 600 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 2px; }
[dir="rtl"] .face-quick-head { letter-spacing: 0; text-transform: none; font-size: 11px; }
.tiles.face-quick { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tiles.face-quick .tile { border-radius: 9px; }
.tiles.face-quick .tile span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* label for assistive tech only; the tile is 45 px wide */
.tile.face-tile img, .tile.face-tile canvas { aspect-ratio: 1; object-position: 50% 18%; }
.tile.face-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px rgba(217,70,239,.55), 0 0 22px rgba(139,92,246,.38), 0 8px 20px rgba(0,0,0,.35); }
.note.face-empty, .note.face-none { font-style: italic; }
.pick.g-pickFace img { width: 100%; height: 100%; margin: 0; object-position: 50% 15%; }

/* ------------------------------------------------------------- face sheet (#face-sheet): full-viewport dialog, mobile first */
html.face-sheet-open, html.face-sheet-open body { overflow: hidden !important; }
.face-sheet { padding: 0; place-items: stretch; z-index: 80; }
.face-sheet-card { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #15151f, #0e0e15); }
.face-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.face-sheet-titles { min-width: 0; }
.face-sheet-head h2 { margin: 0; font-family: var(--display); font-size: 18px; line-height: 1.2; }
.face-sheet-head .muted { margin: 2px 0 0; font-size: 11.5px; line-height: 1.35; }
.face-sheet-count { font-family: var(--mono); font-size: 11px; color: var(--accent-2); padding: 4px 9px; border: 1px solid rgba(168,85,247,.4); border-radius: 999px; background: rgba(139,92,246,.1); white-space: nowrap; unicode-bidi: plaintext; }
.face-sheet-head .modal-x { position: static; }
.face-sheet-bar { display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.face-sheet-ftoggle { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 12px; }
.face-sheet-ftoggle svg { width: 14px; height: 14px; }
.face-sheet-ftoggle i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--energy); color: #fff; font-size: 10.5px; line-height: 18px; text-align: center; }
.face-sheet-ftoggle[aria-expanded="true"] { color: #e8dfff; border-color: rgba(168,85,247,.7); background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(139,92,246,.08)); }
.face-sheet-bar .chips { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; -webkit-overflow-scrolling: touch; }
.face-sheet-bar .chips::-webkit-scrollbar { display: none; }
.face-sheet-bar .chips .chip { flex: none; }
.face-sheet-body { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.face-sheet-scrim { position: fixed; inset: 0; z-index: 2; background: rgba(10,10,15,.55); opacity: 0; visibility: hidden; transition: opacity .25s; }
.face-sheet.filters-open .face-sheet-scrim { opacity: 1; visibility: visible; }
.face-sheet-filters { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 78vh; max-height: 78dvh; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #181824, #111118); border-top: 1px solid rgba(255,255,255,.12); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.6); transform: translateY(105%); visibility: hidden; transition: transform .25s var(--ease), visibility .25s; }
.face-sheet.filters-open .face-sheet-filters { transform: none; visibility: visible; }
.face-sheet-fhead { display: flex; align-items: center; gap: 8px; }
.face-sheet-fhead strong { flex: 1; font-family: var(--display); font-size: 13px; }
.face-sheet-fhead .ghost { padding: 5px 9px; font-size: 11px; }
.face-search { position: relative; display: block; }
.face-search svg { position: absolute; top: 50%; inset-inline-start: 11px; width: 15px; height: 15px; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.face-search input { width: 100%; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; padding-inline-start: 34px; color: var(--ink); font-size: 13px; }
.face-search input:focus { outline: none; border-color: rgba(168,85,247,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
.face-search input::-webkit-search-cancel-button { filter: invert(.8); }
.face-sheet-groups { display: flex; flex-direction: column; gap: 12px; }
.fgroup { display: flex; flex-direction: column; gap: 6px; }
.fgroup-label { font: 600 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .fgroup-label { letter-spacing: 0; text-transform: none; font-size: 11px; }
.fgroup .chips { gap: 5px; }
.face-sheet-main { min-height: 0; overflow: auto; padding: 12px 16px 16px; -webkit-overflow-scrolling: touch; }
.face-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ftile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-3); color: var(--ink); overflow: hidden; text-align: start; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color var(--t), transform var(--t) var(--ease), box-shadow var(--t); -webkit-tap-highlight-color: transparent; }
.ftile img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; background: #1a1a26; transition: transform .5s var(--ease); }
.ftile:hover { border-color: rgba(255,255,255,.22); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.ftile:hover img { transform: scale(1.05); }
.ftile:active { transform: translateY(0) scale(.985); }
.ftile:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.ftile[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--violet), 0 0 24px rgba(139,92,246,.42), 0 8px 20px rgba(0,0,0,.35); }
.fcheck { display: none; position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; place-items: center; background: var(--energy); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 2px 10px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.ftile[aria-pressed="true"] .fcheck { display: grid; }
.ftile-body { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px 9px; }
.ftile-label { font-family: var(--display); font-weight: 600; font-size: 12px; line-height: 1.25; }
.ftile-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.ftile-meta i { font-style: normal; font-size: 9.5px; line-height: 1.3; color: var(--muted); padding: 2px 6px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.face-sheet-main .face-none { padding: 30px 0; text-align: center; }
.face-sheet-preview { display: none; }
.face-sheet-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(20,20,30,.98), #0e0e15); }
.face-sheet-sel { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.face-sheet-sel .thumb { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #1a1a26; box-shadow: 0 0 0 2px var(--violet), 0 0 14px rgba(139,92,246,.35); }
.face-sheet-sel .thumb.own { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.face-sheet-sel .thumb img, .face-sheet-sel .thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.face-sheet-sel .thumb canvas { object-position: 50% 50%; }
.face-sheet-sel .sel-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.face-sheet-sel .sel-kicker { font: 600 9px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
[dir="rtl"] .face-sheet-sel .sel-kicker { letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.face-sheet-sel .sel-label { font-family: var(--display); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face-sheet-sel .sel-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.face-sheet-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex: 1 1 auto; }
.face-sheet-actions .primary { padding: 9px 16px; font-size: 11.5px; }
.face-sheet-actions .primary::after { animation: none; opacity: .45; }
.face-sheet-actions .primary[disabled] { cursor: default; }
@media (max-width: 480px) { .face-sheet-actions { width: 100%; } .face-sheet-actions .primary { flex: 1 1 auto; } .face-sheet-head { grid-template-columns: minmax(0, 1fr) auto; } .face-sheet-count { grid-row: 2; justify-self: start; } .face-sheet-head .modal-x { grid-row: 1 / span 2; } }
@media (min-width: 701px) {
  .face-sheet { padding: 16px; }
  .face-sheet-card { border-radius: 20px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(139,92,246,.2), 0 0 60px rgba(139,92,246,.12); animation: panelIn .22s var(--ease); }
  .face-sheet-head { padding: 16px 20px 12px; }
  .face-sheet-bar, .face-sheet-scrim, .face-sheet-fdone { display: none; }
  .face-sheet-body { grid-template-columns: 260px minmax(0, 1fr); }
  .face-sheet-filters { position: static; transform: none; visibility: visible; max-height: none; min-height: 0; border-radius: 0; border-top: 0; border-inline-end: 1px solid var(--line); box-shadow: none; background: rgba(255,255,255,.015); padding: 14px 16px 18px; transition: none; }
  .face-sheet-main { padding: 14px 20px 20px; }
  .face-sheet-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .face-sheet-preview { display: block; position: fixed; z-index: 95; width: 280px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #1a1a27, #111119); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(139,92,246,.25), 0 0 40px rgba(139,92,246,.18); pointer-events: none; animation: panelIn .16s var(--ease); }
  .face-sheet-preview img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; }
  .face-sheet-preview .fp-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
  .face-sheet-preview .fp-label { font-family: var(--display); font-weight: 600; font-size: 14px; }
  .face-sheet-preview .fp-meta { font-size: 11px; color: var(--accent-2); }
  .face-sheet-preview .fp-desc { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); unicode-bidi: plaintext; text-align: start; }
  .face-sheet-foot { padding: 12px 20px; }
}
@media (min-width: 1100px) { .face-sheet-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .face-sheet-body { grid-template-columns: 280px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .face-sheet-card, .face-sheet-preview { animation: none !important; } .ftile, .ftile img, .face-sheet-filters, .face-sheet-scrim { transition: none !important; } .ftile:hover { transform: none; } .ftile:hover img { transform: none; } }

.slider { display: grid; grid-template-columns: 86px 1fr auto; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.slider .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slider .val { font-family: var(--mono); font-size: 10.5px; color: var(--ink); text-align: end; min-width: 52px; white-space: nowrap; }
/* BAC-428: "5200 K", "50 mm", "24 fps" read left to right in Arabic too (first strong letter decides; a translated word stays RTL) */
.slider .val { unicode-bidi: plaintext; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; width: 100%; height: 22px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(217,70,239,.75) 55%, rgba(34,211,238,.45)); box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 0 8px rgba(139,92,246,.2); }
[dir="rtl"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(270deg, rgba(139,92,246,.95), rgba(217,70,239,.75) 55%, rgba(34,211,238,.45)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff 0 30%, #d9ccff 100%); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.3), 0 0 12px rgba(168,85,247,.8), 0 2px 6px rgba(0,0,0,.6); transition: box-shadow var(--t), transform var(--t) var(--ease); }
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(139,92,246,.35), 0 0 18px rgba(217,70,239,.9), 0 2px 6px rgba(0,0,0,.6); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(139,92,246,.95), rgba(217,70,239,.75) 55%, rgba(34,211,238,.45)); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.3), 0 0 12px rgba(168,85,247,.8); }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.switch input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); position: relative; transition: background var(--t), border-color var(--t), box-shadow var(--t); margin: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .22s var(--ease), box-shadow var(--t); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.switch input:checked { background: linear-gradient(90deg, #8b5cf6, #d946ef); border-color: rgba(217,70,239,.55); box-shadow: 0 0 12px rgba(139,92,246,.45), inset 0 1px 0 rgba(255,255,255,.25); }
.switch input:checked::after { left: 18px; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.light-card { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color var(--t); }
.light-card:hover { border-color: rgba(255,255,255,.13); }
.light-card .head { display: flex; align-items: center; gap: 8px; }
.light-card .head .swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.06), 0 0 10px 1px rgba(255,255,255,.25); }
.light-card .head strong { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
[dir="rtl"] .light-card .head strong { letter-spacing: 0; text-transform: none; }
.light-card .head .switch { margin-inline-start: auto; }
.light-card.off { opacity: .8; }
.light-card.off > :not(.head) { opacity: .4; pointer-events: none; }
.light-zero { font-family: var(--display); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #f5b041; }   /* BAC-430: on, but at 0 % */
[dir="rtl"] .light-zero { letter-spacing: 0; text-transform: none; }
.light-card.zero .head strong { color: var(--dim); }
.kinds { display: flex; flex-wrap: wrap; gap: 5px; }
.kinds .chip { padding: 4px 8px; font-size: 9.5px; }

.floorplan { position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 5 / 3; touch-action: none; user-select: none; -webkit-user-select: none; background: radial-gradient(70% 90% at 50% 100%, rgba(139,92,246,.17), transparent 70%), repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,.055) 0 1px, transparent 1px 26px), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 15px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 15px), linear-gradient(180deg, #11111b, #0c0c13); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 40px rgba(0,0,0,.35); }
.floorplan svg { width: 100%; height: 100%; display: block; }
.floorplan .floor { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.16); stroke-width: 1; }
.floorplan .cove { fill: rgba(255,255,255,.1); }
.floorplan .subject-dot { fill: #fff; cursor: grab; filter: drop-shadow(0 0 4px rgba(255,255,255,.8)); }
.floorplan .subject-ring { fill: none; stroke: rgba(255,255,255,.35); stroke-dasharray: 2 3; }
.floorplan .sight, .elevation .sight { stroke: rgba(201,184,255,.8); stroke-width: 1.2; stroke-dasharray: 4 4; animation: dashFlow 1.1s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -16; } }
.floorplan .fov, .elevation .fov { fill: rgba(139,92,246,.14); stroke: rgba(139,92,246,.3); stroke-width: .5; }
.floorplan .cam, .floorplan .lamp, .floorplan .prop { cursor: grab; }
.floorplan .cam, .elevation .cam { filter: drop-shadow(0 0 5px rgba(168,85,247,.9)); animation: camPulse 2.4s ease-in-out infinite; }
@keyframes camPulse { 0%, 100% { filter: drop-shadow(0 0 3px rgba(168,85,247,.7)); } 50% { filter: drop-shadow(0 0 9px rgba(217,70,239,1)); } }
.floorplan .cam-body, .elevation .cam-body { fill: #a78bfa; } .floorplan .cam-lens, .elevation .cam-lens { fill: #0a0a0f; }
.floorplan .lamp-body { fill: var(--amber); filter: drop-shadow(0 0 5px rgba(245,176,65,.9)); } .floorplan .lamp-glow { fill: rgba(245,176,65,.22); }
.floorplan .lamp.fill .lamp-body { fill: var(--blue); filter: drop-shadow(0 0 5px rgba(108,180,255,.9)); } .floorplan .lamp.fill .lamp-glow { fill: rgba(108,180,255,.2); }
.floorplan .lamp.rim .lamp-body { fill: #fff; filter: drop-shadow(0 0 5px rgba(255,255,255,.85)); } .floorplan .lamp.rim .lamp-glow { fill: rgba(255,255,255,.14); }
.floorplan .lamp.off { opacity: .3; }
.floorplan .ray { stroke: rgba(245,176,65,.55); stroke-width: 1.5; stroke-dasharray: 2 4; }
.floorplan .ray.fill { stroke: rgba(108,180,255,.5); } .floorplan .ray.rim { stroke: rgba(255,255,255,.35); }
.floorplan .prop-dot { fill: #8f93a3; stroke: #e4e4e7; stroke-width: 1; }
.floorplan .tag, .elevation .tag { fill: var(--dim); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--display); font-weight: 600; }
.elevation { position: relative; margin-top: 6px; border: 1px solid var(--line); border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 15px), linear-gradient(180deg, #11111b, #0c0c13); overflow: hidden; aspect-ratio: 300 / 92; touch-action: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.elevation svg { width: 100%; height: 100%; display: block; direction: ltr; }
.elevation .ground { stroke: rgba(255,255,255,.22); stroke-width: 1.5; } .elevation .wall { stroke: rgba(255,255,255,.1); stroke-width: 2; }
.elevation .figure { fill: #e8e8f0; opacity: .9; }
.elevation .cam { cursor: grab; }
.elevation .aim { cursor: ns-resize; } .elevation .aim-ring { fill: rgba(139,92,246,.2); stroke: #c4b5fd; stroke-width: 1; stroke-dasharray: 2 2; filter: drop-shadow(0 0 4px rgba(196,181,253,.8)); } .elevation .aim-dot { fill: #ede4ff; }
.elevation.aiming .aim-ring { fill: rgba(139,92,246,.45); filter: drop-shadow(0 0 8px rgba(217,70,239,1)); }
.plan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.plan-legend { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px 11px; font-size: 10.5px; color: var(--dim); flex-wrap: wrap; }
.plan-help { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--muted); font: 600 11px/1 var(--display); transition: color var(--t), border-color var(--t), background var(--t); }
.plan-help:hover, .plan-help[aria-expanded="true"] { color: #fff; border-color: rgba(168,85,247,.7); background: rgba(139,92,246,.22); }
.plan-sticky .plan-note { margin: -2px 0 8px; font-size: 11.5px; }
.plan-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 5px; vertical-align: middle; filter: drop-shadow(0 0 3px rgba(255,255,255,.35)); }

/* ----------------------------------------------------------------- sheet */
.sheet { border-top: 1px solid var(--line); background: linear-gradient(180deg, #13131c, #0e0e15); display: flex; flex-direction: column; min-height: var(--sheet-h); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.app[data-view="sheet"] .sheet { min-height: 0; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 18px; height: var(--sheet-h); flex: none; }
.sheet-head strong { font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #d1c4ff; }
[dir="rtl"] .sheet-head strong { letter-spacing: 0; text-transform: none; }
.sheet-head .muted { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sheet-actions { margin-inline-start: auto; display: flex; gap: 6px; }
.sheet-body { display: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; padding: 0 18px 16px; min-height: 0; overflow: auto; }
.app[data-view="sheet"] .sheet-body { display: grid; }
.sheet-left, .sheet-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.field > span { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .field > span { letter-spacing: 0; text-transform: none; }
.field textarea, .field input, .field select { background: #0b0b12; border: 1px solid var(--line-2); border-radius: 9px; padding: 8px 10px; color: var(--ink); width: 100%; font-size: 12.5px; line-height: 1.5; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); transition: border-color var(--t), box-shadow var(--t); }
.field textarea:focus, .field input:focus, .field select:focus { outline: none; border-color: rgba(139,92,246,.7); box-shadow: inset 0 1px 2px rgba(0,0,0,.4), 0 0 0 3px rgba(139,92,246,.2); }
.field textarea { resize: vertical; font-family: var(--latin); }
.blocks { display: flex; flex-wrap: wrap; gap: 6px; }
.blocks .block { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; font-size: 11px; color: var(--muted); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); max-width: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.blocks .block b { font-family: var(--display); color: #c4b5fd; margin-inline-end: 6px; letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--dim); }
.refs span { border: 1px dashed rgba(168,85,247,.4); border-radius: 999px; padding: 3px 9px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* BAC-429: an Advanced output field the selected provider does not take (struck through, dimmed) and the note that says why */
.field.off > span { text-decoration: line-through; text-decoration-color: rgba(245,176,65,.75); }
.field input:disabled, .field select:disabled { opacity: .45; cursor: not-allowed; }
.out-support { margin: 0; align-self: end; padding-block: 4px; padding-inline-start: 9px; border-inline-start: 2px solid rgba(245,176,65,.55); color: var(--muted); }
.out-support.wide { grid-column: 1 / -1; }
.payload { position: relative; margin: 0; background: #07070d; border: 1px solid rgba(139,92,246,.28); border-radius: 10px; padding: 10px 12px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: #b8b8cc; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-word; box-shadow: inset 0 0 40px rgba(139,92,246,.06), inset 0 1px 0 rgba(255,255,255,.04); }
.payload::before { content: "● " attr(data-label); display: block; position: sticky; top: -10px; margin: -10px -12px 8px; padding: 5px 12px; font: 600 9.5px/16px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8b5cf6; background: #0c0c15; border-bottom: 1px solid rgba(255,255,255,.06); }
[dir="rtl"] .payload::before { letter-spacing: 0; font-family: var(--arabic); direction: rtl; text-align: start; }   /* the label is translated (data-label, ui.payloadLabel): no tracking on Arabic; the JSON under it is dir=ltr, the label reads RTL */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > button:not(.ghost):not(.primary) { font-family: var(--display); font-weight: 600; font-size: 11.5px; border: 1px solid rgba(168,85,247,.5); background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(139,92,246,.08)); color: #ebe5ff; border-radius: 9px; padding: 9px 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform var(--t) var(--ease), box-shadow var(--t), background var(--t); }
.row > button:not(.ghost):not(.primary):hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(139,92,246,.32), rgba(139,92,246,.12)); box-shadow: 0 0 14px rgba(139,92,246,.3); }
.status { font-size: 12px; color: var(--accent-2); min-height: 1.2em; }
.results { display: flex; gap: 10px; flex-wrap: wrap; }
.results img { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--line); }

@media (max-width: 1360px) and (min-width: 901px) {
  .pro { display: none; }
  .top-actions { gap: 6px; }
  .scene-name { width: 150px; }
}
/* the wide Studio top bar (≥ 1280 px) stays on one row (BAC-412: at 1280 px the account and language controls wrapped onto a second line):
   the actions take their full width first and the scene name gives way (down to 90 px); below 1540 px the apps and language buttons show
   only their icons, as they already do ≤ 1100 px (both keep their name in title / aria-label), a signed-in pill shows just the credit count
   and the presets menu is at most 112 px wide (a long preset name ends in an ellipsis). Only when even that does not fit (long labels in
   some languages) do the actions wrap, at the end of their own column. 1101–1279 px (110 % zoom) is too narrow for one row and takes the
   two clean rows of ≤ 1100 px. */
.presets select { text-overflow: ellipsis; }
@media (min-width: 1280px) {
  .top:has(> .scene-name) { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; }
  .top:has(> .scene-name) > .scene-name { justify-self: start; width: 100%; min-width: 0; max-width: 180px; }
  .top:has(> .scene-name) > .top-actions { justify-content: flex-end; }
}
@media (min-width: 1280px) and (max-width: 1360px) { .top:has(> .scene-name) > .scene-name { max-width: 150px; } }
@media (min-width: 1101px) and (max-width: 1279px) {
  .top:has(> .scene-name) { flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; }
  .top:has(> .scene-name) > .scene-name { flex: 1 1 120px; min-width: 110px; max-width: 240px; width: auto; }
  .scene-name ~ .top-actions { display: contents; }
  .scene-name ~ .top-actions::before { content: ""; flex: 1 1 100%; height: 0; order: 2; margin: -4px 0 0; }
  .scene-name ~ .top-actions > .apps-menu, .scene-name ~ .top-actions > .account, .scene-name ~ .top-actions > .lang-menu { order: 1; }
  .scene-name ~ .top-actions > .account, .scene-name ~ .top-actions > .lang-menu { margin-inline-start: auto; }
  .scene-name ~ .top-actions > .account:not([hidden]) ~ .lang-menu { margin-inline-start: 0; }
  .scene-name ~ .top-actions > :is(.cmd-group, #inspire, #concepts, .presets, .gateway-badge, .shoot-split) { order: 3; }
  .scene-name ~ .top-actions > .shoot-split { margin-inline-start: auto; }
}
/* German, French, Spanish and Portuguese labels are too long for one row below 1600 px: the same two clean rows instead of a wrap that
   squeezes the scene name (from 1600 px they fit on one row with the compact icons) */
@media (min-width: 1280px) and (max-width: 1599px) {
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .top:has(> .scene-name) { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .top:has(> .scene-name) > .scene-name { flex: 1 1 120px; min-width: 110px; max-width: 240px; width: auto; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions { display: contents; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions::before { content: ""; flex: 1 1 100%; height: 0; order: 2; margin: -4px 0 0; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > :is(.apps-menu, .account, .lang-menu) { order: 1; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > :is(.account, .lang-menu) { margin-inline-start: auto; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > .account:not([hidden]) ~ .lang-menu { margin-inline-start: 0; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > :is(.cmd-group, #inspire, #concepts, .presets, .gateway-badge, .shoot-split) { order: 3; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > .shoot-split { margin-inline-start: auto; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > .view-tabs { order: 1; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > .apps-menu { margin-inline-start: auto; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions > .apps-menu ~ :is(.account, .lang-menu) { margin-inline-start: 0; }
}
@media (min-width: 1541px) and (max-width: 1720px) {
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions :is(.apps-btn .apps-cur, .lang-btn .lang-cur) { display: none; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions :is(.apps-btn, .lang-btn) { padding: 7px 9px; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .scene-name ~ .top-actions .presets select { max-width: 112px; }
}
/* user-funded mode (v3/ui.js labels Shoot "Shoot with my own AI", data-i18n="ui.ext.menuItem", beside the ▾ split) does not fit the one-row
   bar below 1721 px in most languages: the actions wrapped inside their own column and stranded the language control on a second line
   (English at 1280, 1366, 1440 and 1600 px). The same two clean rows as above instead; the Chinese and Korean labels still fit one row. */
@media (min-width: 1280px) and (max-width: 1720px) {
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .scene-name { flex: 1 1 120px; min-width: 110px; max-width: 240px; width: auto; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .top-actions { display: contents; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .top-actions::before { content: ""; flex: 1 1 100%; height: 0; order: 2; margin: -4px 0 0; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .top-actions > :is(.view-tabs, .apps-menu, .account, .lang-menu) { order: 1; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .top-actions > :is(.cmd-group, #inspire, #concepts, .presets, .gateway-badge, .shoot-split) { order: 3; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .top-actions > :is(.apps-menu, .shoot-split) { margin-inline-start: auto; }
  html:not(:lang(zh)):not(:lang(ko)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) > .top-actions > .apps-menu ~ :is(.account, .lang-menu) { margin-inline-start: 0; }
}
/* … and from 1721 px the German, French, Spanish and Portuguese labels fit one row only with the compact apps and language icons */
@media (min-width: 1721px) and (max-width: 1879px) {
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) :is(.apps-btn .apps-cur, .lang-btn .lang-cur) { display: none; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) :is(.apps-btn, .lang-btn) { padding: 7px 9px; }
  html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) .top:has(#shoot[data-i18n="ui.ext.menuItem"]) .presets select { max-width: 112px; }
}
@media (min-width: 1101px) and (max-width: 1540px) {
  .scene-name ~ .top-actions .apps-btn .apps-cur, .scene-name ~ .top-actions .lang-btn .lang-cur { display: none; }
  .scene-name ~ .top-actions .apps-btn, .scene-name ~ .top-actions .lang-btn { padding: 7px 9px; }
  .scene-name ~ .top-actions .acct-credits { font-size: 0; }
  .scene-name ~ .top-actions .acct-credits b { font-size: 12px; }
  .scene-name ~ .top-actions .presets select { max-width: 112px; }
}
/* one column (≤ 900 px): a long selected preset name no longer pushes Shoot onto a third header row */
@media (max-width: 900px) { .scene-name ~ .top-actions .presets select { max-width: 112px; } }
@media (max-width: 1100px) {
  .main { grid-template-columns: minmax(0, 1fr) 360px; }
  /* the header collapses into two clean rows instead of a ragged wrap that strands the language control (BAC-412):
     row 1: brand · scene name · account · language; row 2: undo/redo · inspire · presets · tabs · shoot (from 701 px the tabs join row 1,
     see "the Studio's two clean rows" below) */
  .top { flex-wrap: wrap; gap: 8px 10px; padding: 8px 14px; }
  .pro { display: none; }
  .scene-name { flex: 1 1 120px; min-width: 110px; max-width: 240px; width: auto; }
  .top-actions { display: contents; }
  .top-actions::before { content: ""; flex: 1 1 100%; height: 0; order: 2; margin: -4px 0 0; }
  .top-actions > .account, .top-actions > .lang-menu { order: 1; }
  .top-actions > .account { margin-inline-start: auto; }
  .top-actions > .lang-menu { margin-inline-start: auto; }
  .top-actions > .account:not([hidden]) ~ .lang-menu { margin-inline-start: 0; }
  .top-actions > .cmd-group, .top-actions > #inspire, .top-actions > .presets, .top-actions > .view-tabs, .top-actions > .gateway-badge, .top-actions > .shoot-split { order: 3; }
  .top-actions > .shoot-split { margin-inline-start: auto; }
  .stage-toolbar .chip { padding: 4px 8px; font-size: 11px; }
  [dir="rtl"] .stage-toolbar .chip { font-size: 11px; }
}
/* the Studio's two clean rows (701–1279 px; 1280–1599 px in German, French, Spanish and Portuguese, above): the Studio / Advanced switch
   moves up beside the scene name and the apps, account and language controls close that first row; the second row keeps the editing
   tools and Shoot. With the switch on the second row, user-funded mode's longer label ("Shoot with my own AI", v3/ui.js) pushed Shoot
   onto a third header row at 768 px in English and Arabic (BAC-412 tablet). Phones (≤ 700 px) keep the switch beside Shoot. */
@media (min-width: 701px) and (max-width: 1279px) {
  .scene-name ~ .top-actions > .view-tabs { order: 1; }
  .scene-name ~ .top-actions > .apps-menu { margin-inline-start: auto; }
  .scene-name ~ .top-actions > .apps-menu ~ :is(.account, .lang-menu) { margin-inline-start: 0; }
}
/* 701–900 px: slightly tighter controls keep both rows whole on a 744 px iPad mini (a signed-in Arabic pill, the long Shoot label) */
@media (min-width: 701px) and (max-width: 900px) {
  .top:has(> .scene-name) > .scene-name { flex-basis: 96px; min-width: 96px; }
  .scene-name ~ .top-actions .tab { padding-inline: 12px; }
  .scene-name ~ .top-actions > :is(#inspire, #concepts) { padding-inline: 9px; }
  .scene-name ~ .top-actions .shoot { padding-inline-start: 12px; gap: 7px; letter-spacing: .03em; }
}
/* short viewports that still get two columns (125–150 % zoom on a laptop: 1024×570, 1024×640; a 1280×713 page at 100 %) keep the frame of
   the full-size Studio (BAC-412): the header and the Advanced bar stay in view and nothing is drawn over the content. Instead of squashing
   the stage (a fixed 100vh grid left it 17 px tall) the stage column scrolls inside the frame and its stage is as tall as the column's
   visible height (100cqh of the scrolling column); the inspector keeps its own scroll beside it. Other pages that share .app keep scrolling
   the page. */
@media (max-height: 720px) and (min-width: 901px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
  body:has(> .app[data-view="studio"]), body:has(> .app[data-view="sheet"]) { overflow: hidden; }
  .app[data-view="studio"], .app[data-view="sheet"] { height: 100vh; height: 100dvh; min-height: 0; overflow: clip; grid-template-rows: auto minmax(0, 1fr) auto; }
  .app[data-view="sheet"] { grid-template-rows: auto minmax(0, 34vh) minmax(0, 1fr); }
  .stagepane { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; container: lenci-stagepane / size; }
  .stagepane > * { flex: none; }
  .stage { height: calc(100vh - 200px); height: calc(100cqh - 24px); min-height: 200px; max-height: none; }
}
/* a short inspector (two columns): the floor plan and side view stay pinned only while at least ~300 px are left under them (an inspector
   ≥ 770 px tall); shorter, they scroll away with the controls, so the controls get the whole column (BAC-412: pinned, they left ~90 px
   for the controls at 125 %). The container query measures the inspector itself (a two-row header in German at 1440×900 leaves 263 px);
   the viewport query is the same rule for browsers without container queries. */
@media (min-width: 901px) {
  .inspector { container: lenci-inspector / size; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
}
@container lenci-inspector (max-height: 770px) { .inspector > .sections { flex: none; overflow: visible; } }
@media (max-height: 860px) and (min-width: 901px) {
  .inspector > .sections { flex: none; overflow: visible; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { height: auto; grid-template-rows: auto auto auto; }
  .main { grid-template-columns: minmax(0, 1fr); }
  .stage-holder { padding: 12px; }
  .stage-holder::before { display: none; }
  .stage { width: 100%; height: auto; }
  .inspector { border-inline-start: 0; border-top: 1px solid var(--line); }
  .sections { overflow: visible; }
  .sheet-body { grid-template-columns: 1fr; }
  .app[data-view="sheet"] .sheet-body { display: grid; }
  .top { flex-wrap: wrap; gap: 8px 10px; }
  .hint { display: none; }
  .hud { max-width: 36%; padding: 5px 9px; }
  .ingredient-list { max-width: 100%; }
  .shotlist { flex-wrap: wrap; padding: 0 12px 10px; }
  .stage-toolbar { padding: 10px 12px 0; }
  .stage-toolbar .chips { background: transparent; border: 0; padding: 0; gap: 6px; box-shadow: none; }
  .stage-toolbar .chip { border-color: var(--line); background: rgba(255,255,255,.03); }
  .cmd-cluster { background: transparent; border: 0; padding: 0; box-shadow: none; max-width: 100%; gap: 6px; }
  .cmd-cluster .chips { grid-column: 1 / -1; flex-wrap: wrap; overflow: visible; max-width: none; }
  .shot-strip .muted { white-space: normal; overflow-wrap: anywhere; border-radius: 14px; }
  .ingredients { padding: 8px 12px 12px; }
  .app[data-view="sheet"] { grid-template-rows: auto auto auto; }
  .app[data-view="sheet"] .inspector { display: none; }
  .app[data-view="sheet"] .stage-holder { height: 58vh; }
  .app[data-view="sheet"] .stage { height: 100%; width: auto; max-width: 100%; }
}
/* the Advanced bar keeps its buttons on one line (at 853 px "Rebuild from scene" broke onto two lines in the 46 px bar); the summary gives way */
@media (min-width: 701px) { .sheet-actions { flex: none; } .sheet-actions > .ghost { white-space: nowrap; } }
/* one column on a short screen (150 % zoom on a laptop: 853×475 / 853×533; phones in landscape): the same frame as above, so the header
   (with Shoot and the view tabs) and the Advanced bar stay in view; the stage and the inspector scroll between them and the stage fits the
   visible height (176 px ≈ a two-row header + the Advanced bar + the stage padding), never under 375 px (a 300 px wide 4:5 frame), instead
   of running 1000 px tall (BAC-412) */
@media (max-height: 720px) and (min-width: 701px) and (max-width: 900px) {
  body:has(> .app[data-view="studio"]), body:has(> .app[data-view="sheet"]) { overflow: hidden; }
  .app[data-view="studio"], .app[data-view="sheet"] { height: 100vh; height: 100dvh; overflow: clip; grid-template-rows: auto minmax(0, 1fr) auto; }
  .app[data-view="sheet"] { grid-template-rows: auto minmax(0, 34vh) minmax(0, 1fr); }
  .app[data-view] > .main { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; grid-auto-rows: max-content; align-content: start; }
  .stage { width: auto; height: max(calc(100vh - 176px), 375px); height: max(calc(100dvh - 176px), 375px); }
  .app[data-view="sheet"] .stage-holder { height: auto; }
  .app[data-view="sheet"] .stage { height: calc(34vh - 24px); min-height: 160px; }
}

/* ----------------------------------------------------------- generation */
.gateway-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(245,176,65,.45); border-radius: 999px; padding: 4px 10px; background: rgba(245,176,65,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); white-space: nowrap; }
.gateway-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse 1.8s infinite; flex: none; }
[dir="rtl"] .gateway-badge { letter-spacing: 0; text-transform: none; }
.progress { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(10,10,15,.66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 5; color: #fff; font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 24px; }
[dir="rtl"] .progress { letter-spacing: 0; text-transform: none; }
.progress::before { content: ""; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 18%, #8b5cf6 42%, #d946ef 70%, #22d3ee 100%); -webkit-mask: radial-gradient(farthest-side, transparent 0 55%, #000 56% 66%, transparent 67% 91%, #000 92%); mask: radial-gradient(farthest-side, transparent 0 55%, #000 56% 66%, transparent 67% 91%, #000 92%); animation: spin 1.1s linear infinite; filter: drop-shadow(0 0 8px rgba(168,85,247,.6)); }
@keyframes spin { to { transform: rotate(360deg); } }
.progress .bar { width: min(60%, 360px); height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.progress .bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--energy-h); animation: slide 1.4s ease-in-out infinite; box-shadow: 0 0 10px rgba(217,70,239,.7); }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.results-strip { display: flex; align-items: center; gap: 10px; padding: 0 18px 8px; min-width: 0; }
.results-strip .sl-title { flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: var(--energy-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
[dir="rtl"] .results-strip .sl-title { letter-spacing: 0; text-transform: none; }
.result-list { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 0; min-width: 0; padding: 3px 2px; }
.result { position: relative; flex: none; width: 72px; height: 72px; padding: 0; border: 1px solid transparent; border-radius: 10px; overflow: hidden; background: var(--panel-2); box-shadow: 0 0 18px rgba(217,70,239,.22), 0 6px 16px rgba(0,0,0,.4); transition: transform var(--t) var(--ease), box-shadow var(--t); }
.result::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #d946ef, #22d3ee); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.result:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(34,211,238,.35), 0 10px 20px rgba(0,0,0,.45); }
.result img, .result video { width: 100%; height: 100%; object-fit: cover; display: block; }
.result.notice { width: auto; height: auto; max-width: 100%; padding: 8px 12px; border: 1px dashed rgba(245,176,65,.6); box-shadow: none; font-size: 12px; color: var(--muted); text-align: start; line-height: 1.4; background: rgba(245,176,65,.05); transform: none; }
.result.notice::after { display: none; }
.result.notice .dl-ready { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.field-note { font-size: 10.5px; line-height: 1.4; color: var(--dim); font-family: var(--latin); text-transform: none; letter-spacing: 0; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: radial-gradient(ellipse at center, rgba(12,12,20,.86), rgba(4,4,8,.97) 75%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; animation: fadeIn .25s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox .lb-inner { max-width: 100%; max-height: calc(100% - 60px); display: grid; place-items: center; }
.lightbox img, .lightbox video { max-width: min(100%, 1200px); max-height: calc(100vh - 110px); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 0 0 6px rgba(10,10,15,.85), 0 0 0 7px rgba(139,92,246,.4), 0 40px 120px rgba(0,0,0,.7), 0 0 80px rgba(139,92,246,.18); }
.lightbox .lb-actions { display: flex; gap: 8px; }
.lightbox a.ghost { text-decoration: none; display: inline-block; }
.own-key { font-size: 12px; color: var(--muted); } .own-key summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 11px; color: var(--dim); transition: color var(--t); } .own-key summary:hover { color: var(--ink); }
.app[data-view="sheet"] .results-strip { display: none; }
@media (max-width: 900px) { .results-strip { flex-wrap: wrap; padding: 0 12px 8px; } }

/* --------------------------------------------------------------- effects */
.stagepane { position: relative; }
.fx-btn[aria-expanded="true"] { color: #fff; border-color: rgba(255,255,255,.6); }
.fx-panel { position: absolute; z-index: 20; top: 92px; left: 18px; right: 18px; max-height: calc(100% - 110px); overflow: auto; background: linear-gradient(180deg, rgba(22,22,34,.94), rgba(14,14,22,.96)); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(139,92,246,.18), 0 0 60px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.07); padding: 12px 14px 16px; animation: panelIn .22s var(--ease); }
/* ui.js fitFxPanel sets top / max-height so the panel ends above the Advanced bar; its own scroll keeps a focused tile off the edges (BAC-431) */
.fx-panel { scroll-padding-block: 12px 20px; }
@keyframes panelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fx-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.fx-head strong { font-family: var(--display); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; background: var(--energy-h); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-head .muted { font-size: 12px; color: var(--muted); flex: 1 1 240px; }
.fx-group { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 12px 0 8px; }
.fx-group::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--energy); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(168,85,247,.6)); }
.fx-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.1), transparent); }
[dir="rtl"] .fx-group::after { background: linear-gradient(270deg, rgba(255,255,255,.1), transparent); }
.fx-group:nth-child(1) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E"); }
.fx-group:nth-child(3) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4'/%3E%3C/svg%3E"); }
.fx-group:nth-child(5) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2'/%3E%3C/svg%3E"); }
.fx-group:nth-child(7) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17h10a4 4 0 0 0 0-8 6 6 0 0 0-11 2 3 3 0 0 0 1 6z'/%3E%3C/svg%3E"); }
.fx-group:nth-child(9) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7l5.5-3.5z'/%3E%3C/svg%3E"); }
[dir="rtl"] .fx-group, [dir="rtl"] .fx-head strong { letter-spacing: 0; text-transform: none; }
.fx-grid .tiles { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.fx-tile img { aspect-ratio: 1; }
.fx-tile:hover img { transform: scale(1.04); }
.fx-tile.missing img { opacity: 0; }
.fx-tile::before { inset: auto; top: 6px; inset-inline-end: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--energy); color: #fff; font: 700 11px/20px var(--display); text-align: center; content: "✓"; opacity: 0; transform: scale(.6); box-shadow: 0 2px 8px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.4); transition: opacity var(--t), transform var(--t) var(--ease); z-index: 3; }
.fx-tile:hover::before { opacity: 0; }
.fx-tile[aria-pressed="true"]::before, .fx-tile[aria-pressed="true"]:hover::before { opacity: 1; transform: scale(1); }
.fx-tile span::before { display: none; }
#fx-chips .chip { padding-inline-end: 6px; }
#fx-chips .chip i { font-style: normal; margin-inline-start: 6px; opacity: .75; }
#fx-chips .chip:hover i { opacity: 1; }
@media (max-width: 900px) { .fx-panel { top: auto; left: 8px; right: 8px; position: fixed; bottom: 8px; max-height: 70vh; } }

/* ----------------------------------------------------------- stage effects */
/* .fx sits above .world and below .grain / .vignette / .guides; E.render fills it from look.effects in the same order
   drawScene applies the effects to the exported frame (filter -> tilt-shift -> gradients -> overlays -> bloom). */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx > * { position: absolute; }
.fx .fx-filter, .fx .fx-tilt, .fx .fx-gradient { inset: 0; }
.fx .fx-overlay { inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fx .fx-bloom { mix-blend-mode: screen; border-radius: 50%; }

/* --------------------------------------------------------- effects button */
.fx-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(201,184,255,.45); background: linear-gradient(120deg, #2a1a5e 0%, #4c2bb3 35%, #8b5cf6 60%, #d946ef 100%); background-size: 220% 100%; color: #fff; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px rgba(139,92,246,.25), 0 8px 24px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s var(--ease), box-shadow .25s, background-position .6s var(--ease); animation: fxShift 6s ease-in-out infinite; }
[dir="rtl"] .fx-btn { letter-spacing: 0; text-transform: none; font-size: 13px; padding: 8px 12px 8px 16px; }
.fx-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(201,184,255,.5), 0 14px 34px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.35); background-position: 100% 0; }
.fx-btn:active { transform: translateY(0) scale(.98); }
.fx-btn[aria-expanded="true"], .fx-btn.has-fx { box-shadow: 0 0 0 2px rgba(201,184,255,.55), 0 10px 30px rgba(217,70,239,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.fx-btn-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.65) 80%, transparent 90%); animation: fxSweep 3.2s linear infinite; mix-blend-mode: overlay; pointer-events: none; z-index: -1; }
.fx-icon { width: 16px; height: 16px; fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); animation: fxTwinkle 2.4s ease-in-out infinite; }
.fx-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fff; color: #5b35c4; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; letter-spacing: 0; box-shadow: 0 0 10px rgba(255,255,255,.6); }
@keyframes fxShift { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes fxSweep { to { transform: rotate(360deg); } }
@keyframes fxTwinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.18) rotate(12deg); opacity: .85; } }

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .top, .stagepane, .inspector, .sheet, .stage-holder::before, .primary::after, .fx-btn, .fx-btn-glow, .fx-icon, .floorplan .sight, .elevation .sight, .floorplan .cam, .elevation .cam, .gateway-badge::before, .hud .dot, .lightbox, .hint.toast, .fx-panel { animation: none !important; }
  .primary::after { opacity: .6; }
  .tile, .ghost, .chip, .shot-open, .result, .dropzone, .primary, .fx-btn, .vf i, .sec-chev, .sec-icon, .view-tabs::before, .switch input::after, .tile img, .tile canvas { transition: none !important; }
  .tile:hover, .ghost:hover, .shot-open:hover, .result:hover, .dropzone:hover, .primary:hover, .fx-btn:hover { transform: none; }
  .tile:hover img, .tile:hover canvas { transform: none; }
}

/* Advanced view: the inspector is short, let the whole column scroll instead of clipping the side view */
.app[data-view="sheet"] .inspector { overflow: auto; }
.app[data-view="sheet"] .sections { overflow: visible; }

/* ------------------------------------------------- video effects + inspo */
.fx-tile video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #202024; transition: transform .5s var(--ease); }
.fx-tile:hover video { transform: scale(1.06); }
.video-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; color: #fff; background: linear-gradient(120deg, #d946ef, #22d3ee); box-shadow: 0 4px 12px rgba(217,70,239,.45); }
[dir="rtl"] .video-badge { letter-spacing: 0; text-transform: none; }
.inspo { position: absolute; right: 10px; bottom: 12px; width: clamp(180px, 24%, 300px); aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid rgba(201,184,255,.55); box-shadow: 0 0 0 1px rgba(139,92,246,.3), 0 18px 40px rgba(0,0,0,.6), 0 0 28px rgba(139,92,246,.35); background: #0a0a0f; cursor: zoom-in; z-index: 4; transition: transform .25s var(--ease), box-shadow .25s; }
.inspo:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px rgba(201,184,255,.6), 0 22px 48px rgba(0,0,0,.65), 0 0 36px rgba(217,70,239,.45); }
.inspo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.inspo-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 7px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(10,10,15,.9)); }
[dir="rtl"] .inspo-label { letter-spacing: 0; text-transform: none; }
.inspo-rec { position: absolute; top: 8px; inset-inline-start: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: pulse 1.6s infinite; }
.inspo.left { right: auto; left: 10px; } /* opposite side to the photographer */
@media (max-width: 1100px) { .inspo { display: none !important; } }

/* ------------------------------------------------------------------ picks */
.picks { position: absolute; top: 54px; right: 10px; max-height: calc(100% - 70px); overflow-y: auto; z-index: 4; width: clamp(96px, 9%, 118px); padding: 10px 8px 8px; border-radius: 14px; background: rgba(17,17,26,.78); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.picks-title { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); text-align: center; margin-bottom: 8px; }
[dir="rtl"] .picks-title { letter-spacing: 0; text-transform: none; font-size: 11px; }
.picks-list { display: flex; flex-direction: column; gap: 8px; }
.pick { position: relative; display: block; width: 100%; padding: 0 0 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; background: #15151e; color: var(--ink); cursor: pointer; text-align: center; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.pick:hover { transform: translateY(-1px); border-color: rgba(201,184,255,.6); box-shadow: 0 0 0 1px rgba(139,92,246,.35), 0 10px 24px rgba(139,92,246,.3); }
.pick .thumb { aspect-ratio: 1; overflow: hidden; background: #202024; }
.pick img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.pick.face img { width: 150%; height: 150%; margin: -6% 0 0 -25%; object-position: 50% 0; }
.pick-group { display: block; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.pick-label { display: block; font-size: 9.5px; font-weight: 700; color: var(--ink); padding: 0 4px; line-height: 1.2; }
[dir="rtl"] .pick-group { letter-spacing: 0; text-transform: none; font-size: 9.5px; }
.picks.left, [dir="rtl"] .picks { right: auto; left: 10px; }
.inspo { right: 10px; }
.picks ~ .inspo, .inspo { bottom: 12px; }
.stage-holder.has-inspo .picks { max-height: calc(100% - 70px - 32%); }
@media (max-width: 1100px) {
  .stage-holder { grid-template-rows: auto minmax(0, 1fr); row-gap: 10px; } .stage-holder > .picks { grid-row: 1; } .stage-holder > .stage { grid-row: 2; } /* the in-flow picks row takes its height, the stage gets the rest (not half each) */
  .picks { position: static; max-height: none; width: 100%; margin-top: 10px; padding: 8px 10px; }
  .picks-list { flex-direction: row; overflow-x: auto; }
  .pick { width: 84px; flex: none; }
}
/* tablets in landscape (901–1100): the picks row stays one short line so the stage keeps its height */
@media (max-width: 1100px) and (min-width: 901px) {
  .picks { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
  .picks-title { flex: none; max-width: 96px; margin: 0; text-align: start; }
  .picks-list { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .pick { width: 64px; } .pick-group { display: none; } .pick-label { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------------------------------------------------------------- account */
.account { display: flex; align-items: center; position: relative; }
.account .sign-in { font-weight: 700; }
.acct-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid rgba(201,184,255,.35); background: linear-gradient(120deg, rgba(139,92,246,.25), rgba(34,211,238,.18)); color: var(--ink); font-size: 12px; cursor: pointer; }
.acct-pill img, .acct-initial { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: linear-gradient(135deg, #8b5cf6, #d946ef); font-weight: 800; color: #fff; font-size: 12px; }
.acct-credits b { font-weight: 800; color: #fff; }
.acct-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; z-index: 60; background: rgba(17,17,26,.98); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.6); padding: 6px; }
.acct-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; }
.acct-head .muted { font-size: 11.5px; }
.acct-item { display: block; width: 100%; text-align: start; padding: 9px 10px; border: 0; background: transparent; color: var(--ink); border-radius: 8px; font-size: 13px; cursor: pointer; }
.acct-item:hover { background: rgba(139,92,246,.18); }
a.acct-item.acct-mem { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; }
.acct-mem-badge, .mem-nav-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; color: #1a1205; background: linear-gradient(135deg, #f5d08a, #f5b041); font-family: var(--latin); }
.acct-pill.has-mem-due { position: relative; }
.acct-pill.has-mem-due::after { content: ""; position: absolute; top: 2px; inset-inline-start: 24px; width: 9px; height: 9px; border-radius: 50%; background: #f5b041; box-shadow: 0 0 0 2px #12121a; }
/* Studio · Advanced: the brand rules from /api/memory/recall?consumer=studio.prompt */
.mem-rules-box { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid rgba(245,176,65,.35); background: linear-gradient(180deg, rgba(245,176,65,.08), rgba(217,70,239,.04)); }
.mem-rules-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mem-rules-head strong { font-family: var(--display); font-size: 12.5px; }
.mem-rules-head a { font-size: 11.5px; color: #e9d5ff; }
.mem-rules-box p { margin: 0; font-size: 11.5px; color: var(--muted); }
.mem-rules-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mem-rules-list li { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line-2); overflow-wrap: anywhere; }
.mem-rules-list li.rule { border-color: rgba(139,92,246,.45); }
.modal { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,15,.72); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 20px; }
.modal-card { position: relative; width: min(100%, 460px); max-height: calc(100vh - 40px); overflow: auto; background: linear-gradient(180deg, #16161f, #111118); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 26px 24px 22px; box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(139,92,246,.2); }
.modal-card.wide { width: min(100%, 980px); }
.modal-card h2 { margin: 0 0 6px; font-family: var(--display, var(--latin)); font-size: 20px; }
.modal-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.auth-card { text-align: center; }
.auth-mark { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; background: linear-gradient(135deg, #8b5cf6, #d946ef 60%, #22d3ee); box-shadow: 0 10px 30px rgba(139,92,246,.5); }
.google-btn { display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center; margin-top: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: #fff; color: #1f1f1f; font-weight: 700; font-size: 14px; cursor: pointer; }
.google-btn svg { width: 20px; height: 20px; }
.google-btn:hover { box-shadow: 0 10px 28px rgba(255,255,255,.18); }
.auth-or { margin: 18px 0 8px; font-size: 11.5px; color: var(--dim); }
.auth-email-row { display: flex; gap: 8px; }
.auth-email-row input { flex: 1; min-width: 0; background: var(--canvas); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; color: var(--ink); }
/* BAC-432 / 435: the sign-in dialog is always the top sheet (face sheet 80, Concepts / guide 70; toasts stay above at 90+); the empty or
   malformed email gets an inline, announced error */
#auth-modal { z-index: 88; }
.auth-email-row input[aria-invalid="true"] { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); }
.auth-card .status.err { color: #fca5a5; }
/* v3/legal: the consent line under the sign-in options (account.js adds it) */
.auth-consent { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.auth-consent a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.auth-consent a:hover { color: var(--ink); }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.lib-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel-2); display: flex; flex-direction: column; }
.lib-open { position: relative; display: block; padding: 0; border: 0; background: #0a0a0f; cursor: zoom-in; }
.lib-open img, .lib-open video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lib-meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 0; font-size: 11.5px; }
.lib-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-acts { display: flex; gap: 6px; padding: 8px 10px 10px; }
.lib-acts .ghost { padding: 5px 9px; font-size: 11px; text-decoration: none; }
.lib-acts .danger:hover { border-color: #ef4444; color: #ef4444; }
.lib-empty { grid-column: 1 / -1; text-align: center; padding: 30px 0; }
.pkg-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.pkg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; border-radius: 14px; border: 1px solid rgba(201,184,255,.3); background: linear-gradient(180deg, rgba(139,92,246,.16), rgba(34,211,238,.08)); color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.pkg:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(139,92,246,.35); }
.pkg[disabled] { opacity: .5; cursor: default; }
.pkg-credits { font-size: 28px; font-weight: 800; background: linear-gradient(90deg, #c9b8ff, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pkg-label { font-size: 11.5px; color: var(--muted); }
.pkg-cta { margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.ledger-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ledger-row { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ledger-row .pos { color: #34d399; } .ledger-row .neg { color: #f87171; }
.grant-row { display: grid; grid-template-columns: 2fr 1fr 1.5fr auto; gap: 8px; margin-top: 12px; }
.grant-row input { background: var(--canvas); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 10px; color: var(--ink); min-width: 0; }
.adm-table { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.adm-row { display: grid; grid-template-columns: 2fr 80px 70px 110px; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.adm-row:hover { background: rgba(139,92,246,.12); }
.adm-head { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); cursor: default; }
@media (max-width: 700px) { .pkg-list { grid-template-columns: 1fr; } .grant-row { grid-template-columns: 1fr 1fr; } .adm-row { grid-template-columns: 1fr 60px; } .adm-row span:nth-child(3), .adm-row span:nth-child(4) { display: none; } }

/* the top bar (glass = own stacking context) must paint above the main area so its menus drop over the inspector */
.top { position: relative; z-index: 30; }

/* ----------------------------------------------------------- my account */
.acc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.acc-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #8b5cf6, #d946ef); color: #fff; font-weight: 800; font-size: 22px; flex: none; }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acc-name { font-weight: 700; }
.acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.acc-stats .stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-radius: 12px; border: 1px solid rgba(201,184,255,.25); background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(34,211,238,.06)); text-align: center; }
.acc-stats .stat b { font-size: 22px; font-weight: 800; background: linear-gradient(90deg, #c9b8ff, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-stats .stat span { font-size: 10.5px; color: var(--muted); }
#welcome-modal .primary { margin-top: 16px; width: 100%; }
@media (max-width: 700px) { .acc-stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------- Nawaa entry (second hero control, next to ✦ Effects) */
.nawaa-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(165,243,252,.45); background: linear-gradient(120deg, #0e3a4a 0%, #0e7490 30%, #22d3ee 58%, #6366f1 82%, #8b5cf6 100%); background-size: 220% 100%; color: #fff; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; overflow: hidden; isolation: isolate; white-space: nowrap; box-shadow: 0 0 0 1px rgba(34,211,238,.25), 0 8px 24px rgba(34,211,238,.3), inset 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s var(--ease), box-shadow .25s, background-position .6s var(--ease); animation: fxShift 7s ease-in-out infinite; }
[dir="rtl"] .nawaa-btn { letter-spacing: 0; text-transform: none; font-size: 13px; padding: 8px 12px 8px 16px; }
.nawaa-btn::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; background: radial-gradient(60% 80% at 50% 50%, rgba(34,211,238,.55), rgba(99,102,241,.3) 50%, transparent 72%); z-index: -1; filter: blur(10px); animation: heroPulse 2.6s ease-in-out infinite; pointer-events: none; }
.nawaa-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(165,243,252,.55), 0 14px 34px rgba(34,211,238,.5), inset 0 1px 0 rgba(255,255,255,.35); background-position: 100% 0; color: #fff; }
.nawaa-btn:active { transform: translateY(0) scale(.98); }
.nawaa-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(34,211,238,.25); }
.nawaa-icon { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l4 4h2V5h-2L6 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M14 9.5a3 3 0 0 1 0 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19.5 3.5l.6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7-1.7-.6 1.7-.6z'/%3E%3Cpath d='M18 14.5l.4 1.1 1.1.4-1.1.4-.4 1.1-.4-1.1-1.1-.4 1.1-.4z' opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l4 4h2V5h-2L6 9H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M14 9.5a3 3 0 0 1 0 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M19.5 3.5l.6 1.7 1.7.6-1.7.6-.6 1.7-.6-1.7-1.7-.6 1.7-.6z'/%3E%3Cpath d='M18 14.5l.4 1.1 1.1.4-1.1.4-.4 1.1-.4-1.1-1.1-.4 1.1-.4z' opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); animation: fxTwinkle 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nawaa-btn, .nawaa-btn::before, .nawaa-icon { animation: none !important; } .nawaa-btn { transition: none; } .nawaa-btn:hover { transform: none; } }
/* Connections entry (v3/connections.html): a ghost pill with the plug icon, next to the Nawaa control */
.conn-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px; text-decoration: none; white-space: nowrap; color: #bfefff; border-color: rgba(34,211,238,.35); }
[dir="rtl"] .conn-btn { padding: 8px 11px 8px 14px; }
.conn-btn:hover { color: #fff; border-color: rgba(34,211,238,.7); box-shadow: 0 0 14px rgba(34,211,238,.25); }
.conn-icon { width: 14px; height: 14px; flex: none; filter: drop-shadow(0 0 5px rgba(34,211,238,.6)); }
@media (max-width: 560px) { .conn-btn span { display: none; } .conn-btn { padding: 8px 10px; } }

/* ----------------------------------------------------------- capture guide */
/* #guide-modal: how to photograph an ingredient (product / person), one card per angle; the sample is swapped for the user's photo. */
.guide-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 16px; }
.guide-head { padding-inline-end: 44px; }
.guide-head h2 { margin-bottom: 2px; }
.guide-head .muted { margin: 0; font-size: 12.5px; }
.gtabs { display: flex; gap: 8px; flex-wrap: wrap; }
.gtab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: color var(--t), background var(--t), border-color var(--t), box-shadow var(--t), transform var(--t); }
.gtab svg { width: 20px; height: 20px; flex: none; }
.gtab:hover { color: var(--ink); border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.gtab[aria-pressed="true"] { background: var(--active); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(217,70,239,.3), 0 6px 18px rgba(139,92,246,.4); }
.gcount { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(10,10,15,.45); font-size: 10.5px; line-height: 18px; text-align: center; }
.gtab[aria-pressed="false"] .gcount { background: var(--energy); color: #fff; }
.ggrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; gap: 12px; padding: 3px; overflow: auto; flex: 1 1 auto; min-height: 0; }   /* max-content rows: auto rows in a definite-height scrolling grid would size the cards without their media */
.gcard { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-3); overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
.gcard:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.gcard.over { border-color: transparent; box-shadow: 0 0 0 2px rgba(168,85,247,.75), 0 0 24px rgba(139,92,246,.45); }
.gcard.filled { border-color: transparent; box-shadow: 0 0 0 1px rgba(217,70,239,.3), 0 0 22px rgba(139,92,246,.38), 0 8px 20px rgba(0,0,0,.35); }
.gcard.filled::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; background: var(--energy); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
/* square via padding (not aspect-ratio): a flex-column card inside a stretched grid row sizes an aspect-ratio box at 0 in Chrome */
.gmedia { position: relative; flex: none; height: 0; padding-top: 100%; background: #1a1a26; overflow: hidden; }
.gmedia img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.gmedia .gsample { opacity: .9; transition: transform .5s var(--ease); }
.gcard:hover .gsample { transform: scale(1.04); }
.gmedia.nosample { background: linear-gradient(135deg, rgba(139,92,246,.4), rgba(217,70,239,.28) 55%, rgba(34,211,238,.28)); }
.gmedia.nosample::before { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; text-align: center; font-family: var(--display); font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); }
.gribbon { position: absolute; top: 14px; inset-inline-start: -30px; width: 120px; transform: rotate(-45deg); padding: 4px 0; text-align: center; font: 600 9px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #e3dcff; background: rgba(10,10,15,.72); border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(4px); pointer-events: none; }
[dir="rtl"] .gribbon { transform: rotate(45deg); letter-spacing: 0; font-size: 11px; }
.gbadge { position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 8px; border-radius: 999px; font: 600 9px/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; }
[dir="rtl"] .gbadge { letter-spacing: 0; font-size: 10.5px; }
.gbadge.req { background: var(--energy); color: #fff; box-shadow: 0 2px 10px rgba(139,92,246,.5); }
.gbadge.opt { background: rgba(10,10,15,.72); color: var(--muted); border: 1px solid var(--line-2); }
.gcheck { position: absolute; bottom: 8px; inset-inline-start: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--energy); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 2px 10px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.gremove { position: absolute; bottom: 8px; inset-inline-end: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(10,10,15,.82); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.gremove:hover { background: rgba(217,70,239,.85); color: #fff; border-color: transparent; }
.gbody { display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 4px; }
.glabel { font-family: var(--display); font-size: 12.5px; font-weight: 600; }
.gtip { font-size: 11px; line-height: 1.35; color: var(--muted); }
.gadd { display: flex; align-items: center; justify-content: center; margin: 6px 10px 10px; padding: 10px 8px; border-radius: 10px; border: 1px dashed rgba(168,85,247,.6); background: linear-gradient(180deg, rgba(139,92,246,.16), rgba(139,92,246,.04)); color: #e3dcff; font-family: var(--display); font-weight: 600; font-size: 12px; cursor: pointer; transition: background var(--t), box-shadow var(--t), border-color var(--t); }
.gadd:hover { border-color: rgba(168,85,247,.9); background: linear-gradient(180deg, rgba(139,92,246,.3), rgba(139,92,246,.1)); box-shadow: 0 0 14px rgba(139,92,246,.3); }
.gadd input { display: none; }
.gadd:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.gadd.swap { border-style: solid; border-color: var(--line); background: transparent; color: var(--muted); padding: 6px 8px; font-size: 11px; }
.gfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.gprogress { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; min-width: 0; }
.gprogress > span:first-child { font-family: var(--display); font-weight: 600; }
.gprogress .muted { font-size: 11.5px; }
.gactions { display: flex; gap: 8px; align-items: center; }
.ghost.link { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }
.ghost.link:hover { color: var(--ink); background: transparent; box-shadow: none; }
#guide-continue[disabled] { cursor: default; }
@media (max-width: 900px) { .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  #guide-modal { padding: 0; place-items: stretch; }
  #guide-modal .modal-card { width: 100%; max-width: none; height: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; border: 0; padding: 18px 16px 12px; }
  .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gtab { padding: 9px 14px 9px 12px; font-size: 13px; flex: 1 1 0; justify-content: center; }
  .gfoot { position: sticky; bottom: -12px; background: linear-gradient(180deg, rgba(17,17,24,0), #111118 30%); padding: 14px 0 12px; margin-bottom: -12px; }
  .gactions { width: 100%; justify-content: space-between; }
  .gactions .primary { flex: 1 1 auto; }
}
/* ingredient strip: the guide's angle under each chip */
.ingredient { height: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ingredient-angle { max-width: 48px; font-family: var(--display); font-size: 8.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .ingredient-angle { letter-spacing: 0; text-transform: none; font-size: 10px; }
@media (prefers-reduced-motion: reduce) { .gcard, .gtab, .gadd, .gsample { transition: none !important; } .gcard:hover, .gtab:hover { transform: none; } .gcard:hover .gsample { transform: none; } }

/* ------------------------------------------------------------------ language menu (v3/i18n.js menu(); v3/I18N.md)
   A pill with the globe and the current language's native name; the dropdown lists every language in its own script with a check on
   the current one. Same AAA contrast as the ghost buttons; closes on Escape / outside click; the name hides on narrow top bars. */
/* ------------------------------------------------------------ apps launcher (v3/apps.js): the grid button + a grouped menu in every top bar */
.apps-menu { position: relative; display: inline-flex; flex: none; }
.apps-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.apps-btn svg { width: 15px; height: 15px; flex: none; }
.apps-menu.open .apps-btn { color: var(--ink); border-color: rgba(168,85,247,.7); }
.apps-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60; min-width: 228px; max-height: min(70vh, 560px); overflow: auto; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(20,20,31,.98); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 50px rgba(0,0,0,.55), 0 0 30px rgba(139,92,246,.18); }
.apps-list[hidden] { display: none; }
.apps-group + .apps-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.apps-group-title { font-family: var(--display); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 4px 10px 2px; }
[dir="rtl"] .apps-group-title { letter-spacing: 0; text-transform: none; font-size: 11px; }
.apps-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.apps-item:hover, .apps-item:focus-visible { background: rgba(139,92,246,.16); color: #fff; outline: none; }
.apps-item.cur { background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(139,92,246,.08)); color: #ede4ff; }
.apps-icon { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid var(--line); flex: none; }
.apps-icon svg { width: 14px; height: 14px; }
.apps-item.cur .apps-icon { border-color: rgba(168,85,247,.6); background: rgba(139,92,246,.2); }
/* plans & policies (v3/legal): Pricing · Privacy · Terms as one row of small links at the foot of the menu */
.apps-foot { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding: 6px 2px 0; border-top: 1px solid var(--line); }
.apps-foot-item { padding: 5px 8px; border-radius: 8px; color: var(--muted); font-size: 11.5px; text-decoration: none; white-space: nowrap; }
.apps-foot-item:hover, .apps-foot-item:focus-visible { background: rgba(139,92,246,.16); color: #fff; outline: none; }
.apps-foot-item.cur { color: #ede4ff; background: rgba(139,92,246,.12); }
@media (max-width: 1100px) { .top-actions > .apps-menu { order: 1; } .apps-btn .apps-cur { display: none; } .apps-btn { padding: 7px 9px; } }
.lang-menu { position: relative; display: inline-flex; flex: none; }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 190px; font-family: var(--latin), "Noto Sans Arabic", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui, sans-serif; letter-spacing: 0; }
.lang-btn .lang-cur { overflow: hidden; text-overflow: ellipsis; }
.lang-btn .lang-globe, .lang-btn .lang-chev { flex: none; }
.lang-menu.open .lang-btn { color: var(--ink); border-color: rgba(168,85,247,.7); }
.lang-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60; min-width: 196px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(20,20,31,.98); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 48px rgba(0,0,0,.6), 0 0 40px rgba(139,92,246,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.lang-list[hidden] { display: none; }
.lang-list button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-family: var(--latin), "Noto Sans Arabic", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-align: start; cursor: pointer; transition: background var(--t), color var(--t); }
.lang-list button:hover, .lang-list button:focus-visible { background: rgba(139,92,246,.16); color: #fff; outline: none; }
.lang-list button:focus-visible { box-shadow: 0 0 0 2px rgba(201,184,255,.7) inset; }
.lang-list button.cur { color: #e8dfff; }
.lang-list button .lang-check { visibility: hidden; font-size: 12px; color: var(--accent-2); }
.lang-list button.cur .lang-check { visibility: visible; }
@media (max-width: 1100px) { .lang-btn .lang-cur { display: none; } .lang-btn { padding: 7px 9px; } }
@media (max-width: 900px) { .top-actions > .ghost, .top-actions > a.ghost, .top-actions .nawaa-btn { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (pointer: coarse) { .lang-btn, .lang-list button { min-height: 44px; } }

/* ------------------------------------------------------------------ language fonts (loaded on demand by i18n.js loadFont) */
html[lang="ja"] { --latin: "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif; --display: "Sora", "Noto Sans JP", "Inter", system-ui, sans-serif; }
html[lang="ko"] { --latin: "Inter", "Noto Sans KR", system-ui, -apple-system, sans-serif; --display: "Sora", "Noto Sans KR", "Inter", system-ui, sans-serif; }
html[lang="zh"] { --latin: "Inter", "Noto Sans SC", system-ui, -apple-system, sans-serif; --display: "Sora", "Noto Sans SC", "Inter", system-ui, sans-serif; }
html[lang="ja"] .pro, html[lang="ko"] .pro, html[lang="zh"] .pro, html[lang="ja"] .chip, html[lang="ko"] .chip, html[lang="zh"] .chip { letter-spacing: .04em; }

/* objects and effects in the "In the final shot" rail carry a remove button; a tapped prop on stage gets a floating toolbar */
.pick-wrap { position: relative; }
.pick-remove { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,15,.82); color: #fff; font: 600 14px/1 var(--font, Inter, sans-serif); cursor: pointer; z-index: 2; }
.pick-remove:hover, .pick-remove:focus-visible { background: #e5484d; border-color: #e5484d; }
.body.selected { outline: 2px solid #8b5cf6; outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 6px rgba(139,92,246,.18); }
.prop-tools { position: absolute; z-index: 25; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(12,12,18,.92); border: 1px solid rgba(139,92,246,.55); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.prop-tools[hidden] { display: none !important; }
.prop-tools button { width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: #1b1b26; color: #fff; font: 600 16px/1 var(--font, Inter, sans-serif); cursor: pointer; }
.prop-tools button:hover, .prop-tools button:focus-visible { border-color: #8b5cf6; background: #2a2040; }
.prop-tools .pt-remove:hover, .prop-tools .pt-remove:focus-visible { background: #e5484d; border-color: #e5484d; }
@media (pointer: coarse) { .prop-tools button { width: 40px; height: 40px; } .pick-remove { width: 28px; height: 28px; } }

/* ---------------------------------------------------------------- Shoot with my own AI (split button + #ext-sheet; v3/ui.js "external shoot") */
.shoot-split { position: relative; display: inline-flex; align-items: stretch; }
.shoot-split:has(.shoot-more:not([hidden])) .shoot { border-start-end-radius: 0; border-end-end-radius: 0; padding-inline-end: 14px; }
.shoot-more { border-radius: 0 999px 999px 0; padding: 0 10px 0 8px; margin-inline-start: 1px; display: inline-flex; align-items: center; }
[dir="rtl"] .shoot-more { border-radius: 999px 0 0 999px; padding: 0 8px 0 10px; }
.shoot-more::after { display: none; }
.shoot-more svg { width: 15px; height: 15px; }
.shoot-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 280px; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, #1a1a26, #12121a); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(139,92,246,.18); }
.shoot-menu-item { width: 100%; display: flex; gap: 12px; align-items: center; text-align: start; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.shoot-menu-item:hover, .shoot-menu-item:focus-visible { background: rgba(139,92,246,.14); outline: none; }
.som-icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--energy); color: #fff; box-shadow: 0 6px 18px rgba(139,92,246,.4); }
.som-icon svg { width: 19px; height: 19px; }
.som-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.som-text strong { font-family: var(--display); font-size: 13px; }
.som-text small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.ext-card { width: min(100%, 700px) !important; padding: 24px 22px 20px; }
/* 1 · the picture that goes to the AI + one button per AI (v3/ui.js extGo); 2 · how-to for the chosen AI; 3 · paste the photo back */
.ext-shot { display: flex; gap: 14px; align-items: center; margin: 16px 0 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.ext-thumb { flex: none; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; background: #0d0d13; display: grid; place-items: center; }
.ext-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ext-thumb.busy { background: linear-gradient(90deg, #15151d, #262634, #15151d); background-size: 200% 100%; animation: extShimmer 1.2s linear infinite; }
@keyframes extShimmer { to { background-position: -200% 0; } }
.ext-shot-text { min-width: 0; }
.ext-shot-text strong { display: block; font-family: var(--display); font-size: 14px; }
.ext-shot-text .ext-ref-summary { margin: 4px 0 0; line-height: 1.45; }
.ext-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.ext-go { position: relative; display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); color: var(--ink); cursor: pointer; text-align: start; font: inherit; transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t); }
.ext-go:hover { border-color: rgba(168,85,247,.7); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(139,92,246,.25); }
.ext-go.is-current { border-color: rgba(168,85,247,.85); background: linear-gradient(180deg, rgba(139,92,246,.28), rgba(139,92,246,.08)); box-shadow: 0 0 22px rgba(139,92,246,.3); }
.ext-go:focus-visible, .ext-chip:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ext-go-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ext-go-text strong { font-family: var(--display); font-size: 14.5px; }
.ext-go-sub { color: var(--muted); font-size: 11px; line-height: 1.3; }
.ext-go-arrow { flex: none; color: var(--accent-2); font-size: 16px; }
[dir="rtl"] .ext-go-arrow { transform: scaleX(-1); }
.ext-share { grid-column: 1 / -1; border-color: rgba(52,211,153,.45); background: linear-gradient(180deg, rgba(52,211,153,.16), rgba(52,211,153,.04)); }
.ext-share:disabled { opacity: .55; cursor: progress; }
.ext-mark-share { background: linear-gradient(135deg, #059669, #34d399); font-size: 18px; }
.ext-more-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ext-more-label { color: var(--muted); font-size: 11.5px; margin-inline-end: 2px; }
.ext-chip { display: inline-flex; align-items: center; justify-content: flex-start; text-align: start; gap: 8px; min-height: 44px; padding-block: 4px; padding-inline: 5px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink); cursor: pointer; font: 600 12px var(--latin, inherit); }
.ext-chip:hover, .ext-chip.is-current { border-color: rgba(168,85,247,.8); }
.ext-chip .ext-mark { width: 32px; height: 32px; border-radius: 999px; font-size: 10.5px; }
.ext-chip .ext-go-text strong { font-size: 12.5px; }
.ext-howto { list-style: none; margin: 0 0 14px; padding: 12px 14px; display: grid; gap: 9px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.02); transition: border-color var(--t); }
.ext-howto:empty { display: none; }
.ext-howto.sent { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.04); }
.ext-how { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.ext-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--display); color: #fff; background: var(--energy); }
.ext-how-text { overflow-wrap: anywhere; }
a.ext-open { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.ext-card .ext-inline { min-height: 34px; padding: 5px 12px; font-size: 11.5px; margin-top: 2px; }
.ext-return { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.ext-card .ext-paste { min-height: 0; align-self: stretch; padding-inline: 20px; }
.ext-paste[hidden] { display: none; }
.ext-drop-sub { font-size: 12px; color: var(--muted); }
.ext-found { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid rgba(52,211,153,.5); background: rgba(52,211,153,.08); }
.ext-found[hidden] { display: none; }
.ext-found img { flex: none; width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: #0d0d13; }
.ext-found-text strong { display: block; font-family: var(--display); font-size: 13px; margin-bottom: 8px; }
.ext-manual { margin-top: 6px; display: grid; gap: 8px; }
.ext-existing { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Keep the draft offer available after the shoot; it must not cover the dialog's controls. */
.ext-sheet-open #ld-toast { display: none; }
.ext-head { padding-inline-end: 36px; }
.ext-kicker { display: inline-block; font: 600 9.5px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #a7f3d0; padding: 4px 9px; border-radius: 999px; background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); margin-bottom: 10px; }
.ext-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font: 700 13px/1 var(--display); color: #fff; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 6px 16px rgba(0,0,0,.35); }
.ext-mark[data-tool="chatgpt"] { background: linear-gradient(135deg, #0f766e, #10b981); }
.ext-mark[data-tool="grok"] { background: linear-gradient(135deg, #27272a, #52525b); }
.ext-mark[data-tool="claude"] { background: linear-gradient(135deg, #b45309, #f59e0b); }
.ext-mark[data-tool="copilot"] { background: linear-gradient(135deg, #1d4ed8, #22d3ee); }
.ext-mark[data-tool="gemini"] { background: linear-gradient(135deg, #4f46e5, #a855f7); }
.ext-mark[data-tool="midjourney"] { background: linear-gradient(135deg, #be185d, #fb7185); }
.ext-label { font: 600 10px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.ext-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ext-card .ghost, .ext-card .primary { min-height: 44px; white-space: normal; text-align: center; }
.ext-ref-summary { color: var(--accent-2); font-size: 12px; }
.ext-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ext-ref { min-width: 0; display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(0,0,0,.18); }
.ext-ref img { display: block; width: 100%; height: 124px; object-fit: contain; border-radius: 8px; background: #0d0d13; }
.ext-ref-name { display: block; margin: 8px 0; font-size: 12px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.ext-ref-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ext-ref-actions .ghost { flex: 1 1 70px; padding: 8px 6px; font-size: 11px; line-height: 1.35; }
.ext-feedback { position: sticky; bottom: -20px; z-index: 1; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ext-feedback:empty { display: none; }
.ext-feedback.err { color: #fca5a5; }
[dir="rtl"] .ext-kicker, [dir="rtl"] .ext-label { letter-spacing: 0; text-transform: none; }
.ext-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 110px; padding: 16px; border-radius: 14px; border: 1.5px dashed rgba(201,184,255,.35); background: rgba(139,92,246,.05); text-align: center; cursor: pointer; transition: border-color var(--t), background var(--t); }
.ext-drop:hover, .ext-drop.over { border-color: var(--accent-2); background: rgba(139,92,246,.12); }
.ext-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ext-drop:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ext-drop-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--energy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 20h16'/%3E%3C/svg%3E") center / 24px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 20h16'/%3E%3C/svg%3E") center / 24px no-repeat; }
.ext-wait { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.ext-wait.busy::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(139,92,246,.6); animation: extPulse 1.4s ease-out infinite; }
.ext-wait.err { color: #fca5a5; }
@keyframes extPulse { 0% { box-shadow: 0 0 0 0 rgba(139,92,246,.6); } 100% { box-shadow: 0 0 0 10px rgba(139,92,246,0); } }
.ext-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.ext-options { margin-top: 12px; border-top: 1px solid var(--line); }
.ext-options > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; }
.ext-options > summary::-webkit-details-marker { display: none; }
.ext-options > summary::before { content: "+"; font-size: 18px; }
.ext-options[open] > summary::before { content: "−"; }
.ext-options > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 8px; }
.ext-backup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ext-qr-wrap { display: flex; gap: 12px; align-items: flex-start; }
.ext-qr { flex: none; width: 104px; height: 104px; border-radius: 10px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.ext-qr svg { width: 100%; height: 100%; display: block; }
.ext-qr-wrap p, .ext-agent p { font-size: 12px; margin: 4px 0 8px; }
.ext-agent input { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(0,0,0,.25); color: var(--muted); font: 11px var(--mono); direction: ltr; }
.lib-ext { display: inline-block; align-self: flex-start; font-style: normal; padding: 1px 7px; border-radius: 999px; font: 600 10px/1.6 var(--display); color: #a7f3d0; background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); white-space: nowrap; }
@media (max-width: 700px) {
  .ext-tools { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ext-go { min-height: 58px; }
  .ext-return { grid-template-columns: minmax(0, 1fr); }
  .ext-links { grid-template-columns: minmax(0, 1fr); }
  #ext-sheet { padding: 0; place-items: stretch; }
  #ext-sheet .modal-card { width: 100% !important; max-width: none; height: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; border: 0; padding: 18px 16px 24px; }
  .ext-more-label { flex-basis: 100%; }
  .ext-chip { flex: 1 1 0; min-width: 0; }
  .ext-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ext-ref { padding: 6px; }
  .ext-ref img { height: 108px; }
  .ext-row > .ghost, .ext-row > .primary { flex: 1 1 150px; justify-content: center; }
  .ext-feedback { bottom: -24px; }
  .shoot-menu { min-width: 0; width: min(300px, calc(100vw - 32px)); }
}

/* ------------------------------------------------------------- 3D (beta) */
/* v3/three/toggle.js + studio3d.js: the toggle sits after the guide chips; the bar wraps to its own toolbar row; the WebGL canvas
   covers the stage under the guides / HUD / viewfinder while .world is hidden. Nothing here applies while the toggle is off. */
.three-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; }
.three-toggle svg { width: 14px; height: 14px; flex: none; }
.three-toggle[aria-pressed="true"] { color: #fff; border-color: transparent; background: var(--active, linear-gradient(135deg, #8b5cf6, #d946ef)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 12px rgba(139,92,246,.4); }
.three-bar { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 7px 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.three-bar[hidden] { display: none; }
.three-bar .ghost { padding: 5px 10px; }
.three-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.three-check input { accent-color: var(--accent); margin: 0; }
.three-note { flex: 1 1 200px; min-width: 0; color: var(--dim); font-size: 11px; }
.three-credit { color: var(--dim); font-size: 10.5px; text-decoration: none; white-space: nowrap; }
.three-credit:hover { color: var(--ink); text-decoration: underline; }
.stage .three-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.stage .three-canvas[data-hover="turn"] { cursor: ew-resize; }
.stage .three-canvas[data-hover="move"] { cursor: move; }
.stage .three-canvas[data-gesture] { cursor: grabbing; }
.stage.three-on .world, .stage.three-on .fx, .stage.three-on .grain { visibility: hidden; }
.stage.three-on .hint:not(.toast) { display: none; }
.app.three-mode .crew { display: none !important; }
.stage.three-loading::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 60%, #a3a3a7, #6f6f73); animation: threePulse 1.2s ease-in-out infinite alternate; }
@keyframes threePulse { from { opacity: .55; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .stage.three-loading::before { animation: none; } }
@media (max-width: 560px) { .three-bar { gap: 6px 10px; padding: 6px 8px; } .three-note { flex-basis: 100%; order: 9; } }

/* pose loading chip on the stage (the cutout and its camera-angle version arrive on demand) */
.stage-loading { position: absolute; z-index: 24; left: 50%; bottom: 52px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(12,12,18,.86); border: 1px solid rgba(139,92,246,.5); color: #e9e4ff; font: 600 12px/1 var(--font, Inter, sans-serif); letter-spacing: .02em; box-shadow: 0 8px 22px rgba(0,0,0,.4); pointer-events: none; }
.stage-loading[hidden] { display: none !important; }
.stage-loading .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(201,184,255,.3); border-top-color: #c9b8ff; animation: lcspin .8s linear infinite; }
@keyframes lcspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stage-loading .spin { animation: none; } }

/* Ingredient with nothing uploaded (BAC-418): the empty state on the stage, where the subject would stand, and the Subject section's button */
.stage-empty { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, calc(100% - 40px)); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 18px; border-radius: 14px; text-align: center; background: rgba(12,12,18,.8); border: 1px dashed rgba(201,184,255,.55); color: #e9e4ff; box-shadow: 0 8px 22px rgba(0,0,0,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stage-empty[hidden], .stage.three-on .stage-empty { display: none !important; }
.stage-empty strong { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.stage-empty span { font-size: 11px; line-height: 1.45; color: rgba(233,228,255,.72); }
.stage-empty .ghost { margin-top: 2px; }
.stage-empty.compact { top: calc(50% + 14px); gap: 6px; padding: 10px 14px; }
.stage-empty.compact span { display: none; }
/* the card never takes the stage's gestures: a prop standing behind it is still grabbed and dragged (and a file dropped on it reaches the
   stage); only its button is clickable. While something is dragged it fades, so a prop moved behind it stays in sight. */
.stage-empty { pointer-events: none; transition: opacity .15s; }
.stage-empty .ghost { pointer-events: auto; }
.stage.dragging .stage-empty { opacity: .3; }
.section-body .ingredient-add { margin-block: 2px 10px; }
/* exports (BAC-415): an export's status line wraps (long file names, the allow-downloads hint) and reads red on an error; the Save link,
   "Not in your downloads?" and "Save as…" sit inline as small pills. The shot list's Undo tile (BAC-435) takes the removed shot's place
   and is not numbered. */
.status.dl-status { overflow-wrap: anywhere; }
.sai-pack .row .status.dl-status { white-space: normal; overflow: visible; }
.status.err, .result.notice.err { color: #fca5a5; }
.status .dl-ready, .status .dl-saveas, .status .dl-help, .result.notice .dl-saveas, .result.notice .dl-help { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11px; line-height: 1.3; letter-spacing: .02em; text-transform: none; text-decoration: none; white-space: nowrap; vertical-align: middle; }
.status .dl-ready::after, .status .dl-saveas::after, .result.notice .dl-saveas::after { animation: none; opacity: .35; }
.shot.shot-undo { counter-increment: none; }
.shot.shot-undo::before { display: none; }
.shot-undo .shot-open { display: flex; align-items: center; justify-content: center; border-style: dashed; background: transparent; color: #e9d5ff; font: 600 11px var(--display); }

/* a short message over the stage (BAC-445: a prop that would hide the subject is refused) */
.stage-notice { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 40; max-width: min(80%, 420px); padding: 10px 14px; border-radius: 12px; background: rgba(12,12,18,.92); border: 1px solid rgba(217,70,239,.45); color: #f4f4f8; font: 600 12px/1.4 var(--display); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; opacity: 0; transition: opacity .2s; }
.stage-notice.on { opacity: 1; }

#ext-resume-list { display: grid; gap: 8px; margin: 12px 0; }
.ext-resume-item { text-align: start; overflow-wrap: anywhere; }
#ext-existing [hidden], #ext-work[hidden], #ext-existing[hidden] { display: none !important; }
.studio-draft-status { margin: 4px 12px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.studio-draft-status[data-warning="true"] { padding: 9px 12px; border: 1px solid #c58d36; border-radius: 10px; color: var(--ink); background: var(--panel); }
.studio-draft-status[hidden] { display: none; }

/* --------------------------------------------- decomposed subject (ui.js personBlocks · v3/docs/SUBJECT-CONTRACT.md) */
/* Person (sex · age radio chips), outfit / head cover / pose plate tiles, "Coming soon" tiles, the change notice, the Auto face tile */
.subj-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.subj-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 6px 10px; min-width: 0; }   /* Sex and Age line up: label · chips */
.subj-lbl { flex: none; min-width: 52px; font: 600 9.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
[dir="rtl"] .subj-lbl { letter-spacing: 0; text-transform: none; font-size: 11px; }
.subj-radios { flex: 1 1 auto; min-width: 0; }
.chip[role="radio"][aria-checked="true"] { background: var(--active); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(217,70,239,.3), 0 3px 12px rgba(139,92,246,.4); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.tile[role="radio"][aria-checked="true"] { border-color: transparent; box-shadow: 0 0 0 1px rgba(217,70,239,.3), 0 0 22px rgba(139,92,246,.38), 0 8px 20px rgba(0,0,0,.35); }
.tile[role="radio"][aria-checked="true"]::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; background: var(--energy); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.tile[role="radio"][aria-checked="true"] span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--energy); margin-inline-end: 5px; vertical-align: middle; box-shadow: 0 0 6px #d946ef; }
.tile.face-tile[role="radio"][aria-checked="true"] { box-shadow: 0 0 0 2px rgba(217,70,239,.55), 0 0 22px rgba(139,92,246,.38), 0 8px 20px rgba(0,0,0,.35); }
.tile.soon { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.tile.soon:hover { transform: none; box-shadow: none; }
.tile.soon:hover img, .tile.soon:hover canvas { transform: none; }
.tile.soon span { color: #c9c9d4; }
.tiles.subj-heads .tile span, .tiles.subj-poses .tile span, .tiles.subj-outfits .tile span { overflow-wrap: anywhere; }
.subj-noswatch { width: 100%; aspect-ratio: 1; background: #1a1a26; }
.subj-hair-covered { font-style: italic; }
.subject-notice { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(217,70,239,.35); background: rgba(139,92,246,.1); color: var(--ink); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.subject-notice:empty { display: none; }
.face-card.auto-face .face-card-thumb { box-shadow: 0 0 0 1px rgba(201,184,255,.5); }
.face-auto-badge { position: absolute; top: 3px; inset-inline-start: 3px; z-index: 4; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: rgba(10,10,15,.82); color: #c9b8ff; pointer-events: none; }
.face-auto-badge svg { width: 9px; height: 9px; }
.pick .thumb canvas.fig { display: block; width: 100%; height: 100%; }
.face-sheet-sel .sel-switch { margin-top: 2px; font-size: 11px; line-height: 1.35; color: #f5b041; white-space: normal; overflow-wrap: anywhere; }
.subj-use-catalog { align-self: flex-start; }
/* decomposed subject, adversarial review: the face the shot uses beside the figure, the dimmed previous person while a look loads, the
   poses still to come in one line, the camera angle in the Subject section, face-sheet chip counts, the phone's mini stage */
.face-inset { position: absolute; z-index: 22; top: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; }
.face-inset img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(201,184,255,.85); box-shadow: 0 4px 14px rgba(0,0,0,.45); background: #1a1a26; }
.face-inset span { font: 600 9px/1.2 var(--display, sans-serif); letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: rgba(10,10,15,.6); }
[dir="rtl"] .face-inset span { letter-spacing: 0; text-transform: none; font-size: 10px; }
.face-inset:focus-visible img { outline: 2px solid #c9b8ff; outline-offset: 2px; }
.stage.dragging .face-inset { opacity: .3; }
.actor.stale > * { opacity: .45; filter: grayscale(.4); }
/* the Studio kit (v3/docs/STUDIO-KIT-CONTRACT.md §2.2, §3.4): products, their supports, worn items and the flat lay on the stage.
   A flat-lay plate lies on the surface and turns about its centre (--rot, --feet-pct = the centre), with a soft drop shadow instead of
   the floor's contact ellipse and cast shadow; a worn / held item sits on the person (no floor cues of its own; it keystones with the
   person: --feet-pct is the person's feet line); a support is a prop under a product (not draggable). Geometry stays the engine's. */
.actor.flat .contact, .actor.flat .reflection, .actor.worn .contact, .actor.worn .cast, .actor.worn .reflection { display: none; }
.actor.flat .cast img { transform-origin: 50% var(--feet-pct, 50%); transform: translate(3%, 4%) rotate(var(--rot, 0deg)); filter: brightness(0) blur(10px); opacity: calc(var(--cast-alpha, .3) * .8); }
.actor.support .body { cursor: default; }
.actor .body.is-product { cursor: grab; }
.actor .body.is-product.missing { outline: 1px dashed var(--accent); border-radius: 6px; }
.subj-soon-line { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
.subj-angle-chips { margin-top: 4px; }
.subj-grooming-face, .subj-kid-note { margin: 4px 0 0; }
#face-sheet .chip[data-count]::after { content: attr(data-count); margin-inline-start: 6px; font-size: 10px; opacity: .6; font-variant-numeric: tabular-nums; }
#face-sheet .chip:disabled { opacity: .35; cursor: not-allowed; }
.mini-stage { position: fixed; z-index: 70; inset-inline-end: 10px; bottom: 12px; width: 76px; height: auto; border-radius: 10px; border: 1px solid rgba(201,184,255,.6); box-shadow: 0 10px 30px rgba(0,0,0,.55); background: #141416; cursor: pointer; }