:root {
  color-scheme: dark;
  --bg: #090d0c;
  --surface: #121716;
  --surface-2: #181d1c;
  --surface-3: #222827;
  --line: rgba(245, 239, 226, .14);
  --line-strong: rgba(245, 239, 226, .28);
  --text: #f4efe5;
  --muted: #999d98;
  --paper: #f3ecdf;
  --ink: #0c0f0f;
  --accent: #963344;
  --olive: #6a6a5d;
  --danger: #ff817b;
  --success: #b8d995;
  --shadow: 0 26px 70px rgba(0, 0, 0, .46);
  font-family: "Onest", "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); overflow-x: hidden; }
body.editor-mode { overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, input, textarea, label, [contenteditable] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
button:disabled { opacity: .38; cursor: not-allowed; }
.material-symbols-rounded { display: inline-grid; width: 1.2rem; flex: 0 0 1.2rem; place-items: center; overflow: hidden; white-space: nowrap; font: 700 var(--icon-size,1.08rem)/1 Arial, sans-serif; }
.material-symbols-rounded.filled { font-weight: 900; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.studio-shell { width: min(100% - 18px, 1120px); margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom)); }
.screen { animation: screen-in 220ms ease both; }
.screen[hidden] { display: none !important; }
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.brand-header { min-height: 50px; display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-weight: 700; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--ink); background: var(--paper); }
.brand-header .ghost-button { margin-left: auto; }
.ghost-button, .mini-button, .quiet-download { min-height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; }
.start-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: 42px; align-items: start; max-width: 980px; margin: 0 auto; }
.eyebrow { margin: 0 0 10px; color: var(--success); font-size: .69rem; font-weight: 800; letter-spacing: .12em; }
.start-copy h1 { max-width: 680px; margin: 0; font: 600 clamp(2.25rem, 6vw, 4.8rem)/.93 "Onest", sans-serif; letter-spacing: -.065em; }
.lead { max-width: 600px; margin: 18px 0 26px; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.start-card { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.field-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.field-heading strong, .field-heading span, .field-heading small { display: block; }
.field-heading span, .field-heading small { color: var(--muted); font-size: .7rem; font-weight: 500; line-height: 1.45; }
.field-heading b { color: var(--muted); font-size: .72rem; }
.upload-zone { width: 100%; min-height: 84px; display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 16px; background: rgba(255,255,255,.02); text-align: left; cursor: pointer; }
.upload-zone > .material-symbols-rounded { --icon-size: 1.35rem; width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--ink); background: var(--paper); }
.upload-zone b, .upload-zone small { display: block; }
.upload-zone small { margin-top: 4px; color: var(--muted); font-size: .65rem; }
.text-only-option { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: var(--muted); font-size: .75rem; }
.text-only-option input { accent-color: var(--paper); }
.start-card textarea, .segment-card textarea { width: 100%; border: 1px solid var(--line); border-radius: 15px; color: var(--text); background: #0d1110; padding: 14px; line-height: 1.5; resize: vertical; }
.start-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.start-footer > span { color: var(--muted); font-size: .7rem; }
.primary-action, .secondary-action { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border-radius: 14px; font-size: .76rem; font-weight: 800; cursor: pointer; }
.primary-action { border: 0; color: var(--ink); background: var(--paper); }
.secondary-action { border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.full-button { width: 100%; margin-top: 10px; }
.start-preview { position: sticky; top: 18px; }
.start-preview > p { margin: 0 0 9px; color: var(--muted); font-size: .7rem; }

.ig-canvas { position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #272b2a; box-shadow: var(--shadow); user-select: none; }
.canvas-photo, .canvas-shade, .safe-guides { position: absolute; inset: 0; }
.canvas-photo { background: #252a2f center/cover no-repeat; filter: brightness(.92); transform: scale(1.002); }
.canvas-shade { z-index: 1; background: linear-gradient(180deg, rgba(4,6,6,.12) 0%, rgba(4,6,6,.05) 36%, rgba(4,6,6,.78) 100%); pointer-events: none; }
.safe-guides { z-index: 4; inset: 6%; border: 1px dashed rgba(255,255,255,.55); border-radius: 8px; pointer-events: none; }
.empty-preview { min-height: 430px; }
.empty-preview-copy { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 30px; color: var(--muted); text-align: center; }
.empty-preview-copy .material-symbols-rounded { --icon-size: 2.2rem; width: 2.4rem; }
.empty-preview-copy small { max-width: 180px; line-height: 1.45; }
.empty-preview.has-content .empty-preview-copy { display: none; }
.canvas-copy { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 6vw, 40px); }
.canvas-meta { position: absolute; top: clamp(18px, 5vw, 36px); left: clamp(18px, 5vw, 36px); right: clamp(18px, 5vw, 36px); display: flex; justify-content: space-between; gap: 14px; color: rgba(255,255,255,.84); font: 500 clamp(.52rem, 1.8vw, .72rem)/1.6 "Onest", sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.canvas-headline { width: 96%; max-width: 96%; color: #fff; font-size: calc(clamp(2rem, 9.4vw, 4.6rem) * var(--font-scale, 1)); line-height: .9; letter-spacing: -.055em; overflow-wrap: break-word; white-space: pre-wrap; }
.canvas-headline span, .canvas-headline em { display: block; white-space: pre-wrap; }
.canvas-headline span { font-family: var(--font-head, "Finlandica"), sans-serif; font-weight: var(--font-weight, 700); }
.canvas-headline em { margin-top: .08em; font-family: var(--font-body, "Piazzolla"), serif; font-weight: 500; line-height: .94; letter-spacing: -.04em; }

.photo-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.photo-strip::-webkit-scrollbar, .slide-filmstrip::-webkit-scrollbar { display: none; }
.start-photos { margin-top: 12px; }
.photo-chip { position: relative; flex: 0 0 62px; width: 62px; height: 78px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-3); cursor: pointer; }
.photo-chip img { width: 100%; height: 100%; object-fit: cover; }
.photo-chip.is-cover { border-color: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.photo-chip span { position: absolute; top: 4px; left: 4px; padding: 3px 5px; border-radius: 99px; color: var(--ink); background: var(--paper); font-size: .55rem; font-weight: 800; }

.tool-header, .section-header, .editor-header { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; min-height: 58px; margin-bottom: 13px; }
.icon-button, .undo-button, .text-button, .quiet-button, .add-color, .dialog-close, .save-button { border: 1px solid var(--line); background: rgba(255,255,255,.025); cursor: pointer; }
.icon-button { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; }
.icon-button .material-symbols-rounded { --icon-size: 1.8rem; width: 1.9rem; }
.undo-button { min-height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 15px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.section-header > div, .editor-header > div { text-align: center; }
.section-header p, .editor-header p { margin: 0 0 3px; color: var(--muted); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; }
.section-header h1, .editor-header h1 { margin: 0; font: 500 clamp(1.3rem, 5vw, 2rem)/1 "Piazzolla", serif; }
.text-button, .save-button { min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.section-lead { max-width: 650px; margin: -3px auto 22px; color: var(--muted); text-align: center; line-height: 1.5; }

.split-workspace { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: 20px; align-items: start; }
.source-panel, .segment-panel { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.source-panel > p { margin: 13px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.split-photos { margin-bottom: 18px; }
.mini-button { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 10px; font-size: .66rem; }
.mini-button .material-symbols-rounded { --icon-size: 1rem; }
.segment-heading { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.segment-heading span, .segment-heading strong { display: block; }
.segment-heading span { color: var(--muted); font-size: .67rem; }
.segment-heading strong { margin-top: 3px; }
.segment-heading > span { padding: 6px 9px; border-radius: 999px; color: #c8d9b0; background: rgba(153,180,112,.1); }
.segment-list { display: grid; gap: 9px; }
.segment-card { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: #0d1110; }
.segment-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); font-family: "Piazzolla", serif; }
.segment-card textarea { min-height: 62px; padding: 8px; border: 0; background: transparent; resize: vertical; }
.segment-controls { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.segment-controls button { min-height: 30px; display: inline-flex; align-items: center; gap: 3px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; font-size: .62rem; cursor: pointer; }
.segment-controls .material-symbols-rounded { --icon-size: .95rem; }
.split-finish { position: sticky; z-index: 20; bottom: max(8px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; margin: 18px 0 8px; padding: 13px; border: 1px solid var(--line-strong); border-radius: 20px; background: rgba(18,23,22,.96); box-shadow: 0 18px 50px rgba(0,0,0,.52); backdrop-filter: blur(16px); }
.split-palette-choice { min-width: 0; display: flex; align-items: center; gap: 10px; }
.split-palette-choice > div:first-child { display: grid; flex: 0 1 240px; gap: 3px; }
.split-palette-choice strong { font-size: .77rem; }
.split-palette-choice span { color: var(--muted); font-size: .58rem; line-height: 1.3; }
.palette-gallery { min-width: 0; display: flex; gap: 6px; overflow-x: auto; padding: 4px; }
.palette-gallery .palette-swatch { flex: 0 0 32px; }

.catalog-progress { display: grid; justify-items: center; gap: 7px; }
.progress-dots { width: min(190px, 46vw); display: grid; grid-template-columns: repeat(8,1fr); gap: 5px; }
.progress-dots i { height: 4px; border-radius: 99px; background: rgba(255,255,255,.18); }
.progress-dots i.is-current { background: var(--paper); }
.progress-dots i.is-done { background: rgba(243,236,223,.5); }
.split-summary { width: 100%; display: grid; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 21px; background: var(--surface); text-align: left; cursor: pointer; }
.split-summary-title { display: flex; align-items: center; gap: 9px; }
.split-summary-title u { color: var(--muted); font-size: .78rem; text-underline-offset: 3px; }
.split-summary-title .material-symbols-rounded { margin-left: auto; }
.mini-storyboard { display: flex; gap: 6px; overflow: hidden; }
.mini-storyboard i { flex: 1 1 0; min-width: 34px; aspect-ratio: 4/5; border-radius: 7px; background: var(--surface-3) center/cover; box-shadow: inset 0 0 0 1px var(--line); }
.tinder-instruction { margin: 11px 3px 0; color: var(--muted); font-size: .7rem; }
.fitting-room { display: grid; grid-template-columns: minmax(0,1fr) 82px; gap: 10px; align-items: start; margin-top: 12px; }
#tinderCanvas { touch-action: pan-y; }
.canvas-column { min-width: 0; }
.pair-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 2px 0; }
.pair-caption strong, .pair-caption span { display: block; }
.pair-caption strong { font-family: "Piazzolla", serif; font-size: .92rem; }
.pair-caption span { margin-top: 3px; color: var(--muted); font-size: .63rem; }
.quiet-button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 999px; color: var(--muted); font-size: .64rem; }
.canvas-tools { display: grid; gap: 10px; align-content: start; }
.format-chip { padding: 9px 6px; border: 1px solid var(--line); border-radius: 12px; text-align: center; background: var(--surface); }
.format-chip strong, .format-chip span { display: block; white-space: nowrap; }
.format-chip strong { font-size: .56rem; }
.format-chip span { margin-top: 4px; color: var(--muted); font-size: .54rem; }
.palette-tools { display: grid; justify-items: center; gap: 7px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: .6rem; }
.browser-note { margin:0 0 14px; max-width:600px; color:var(--muted); font-size:.75rem; line-height:1.4; }
#photoTextChoices { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%; overflow:visible; }
#photoTextChoices > span,#photoTextChoices > p { grid-column:1/-1; margin:0; }
#photoTextChoices > .mini-button { width:100%; min-height:40px; padding:5px 7px; border-radius:9px; font-size:.65rem; white-space:normal; }
#photoTextChoices > .mini-button[aria-pressed="true"] { background:var(--paper); color:var(--ink); border-color:var(--paper); }
#photoTextChoices > .photo-text-hint { font-size:.6rem; line-height:1.35; color:var(--muted); }
.palette-tools > div, .dock-palettes { display: grid; grid-template-columns: repeat(2,28px); gap: 8px; }
.palette-swatch, .add-color { width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; cursor: pointer; }
.palette-swatch.is-active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--paper); }
.add-color { display: grid; place-items: center; background: transparent; }
.swipe-stamp { position: absolute; z-index: 8; top: 28px; padding: 8px 11px; border: 2px solid currentColor; border-radius: 9px; font-size: .8rem; font-weight: 800; opacity: 0; }
.stamp-no { left: 22px; color: var(--danger); transform: rotate(-8deg); }
.stamp-yes { right: 22px; color: #b8ff87; transform: rotate(8deg); }
.tinder-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.decision { min-height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-size: .95rem; font-weight: 800; cursor: pointer; }
.decision .material-symbols-rounded { --icon-size: 1.75rem; width: 1.85rem; flex-basis: 1.85rem; }
.decision-no { border: 1px solid var(--line-strong); background: rgba(255,255,255,.02); }
.decision-yes { border: 0; color: var(--ink); background: var(--paper); }
.tinder-next, .compare-footer { position: sticky; z-index: 15; bottom: max(8px,env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 10px 10px 15px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(18,23,22,.96); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.tinder-next span, .tinder-next strong, .compare-footer span, .compare-footer strong { display: block; }
.tinder-next span, .compare-footer span { color: var(--muted); font-size: .62rem; }
.tinder-next strong { font-size: 1.2rem; }
.compare-footer strong { max-width: 270px; margin-top: 2px; font-size: .76rem; }

.compare-intro { max-width: 590px; margin: -3px auto 22px; color: var(--muted); text-align: center; line-height: 1.5; }
.finalist-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.finalist-card { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); text-align: left; cursor: pointer; }
.finalist-card.is-selected { border-color: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.finalist-preview { position: relative; display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; background: var(--surface-3) center/cover; }
.finalist-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%,rgba(0,0,0,.82)); }
.finalist-preview h2, .finalist-preview em { position: absolute; z-index: 2; left: 16px; right: 14px; margin: 0; color: #fff; white-space: pre-wrap; }
.finalist-preview h2 { bottom: 58px; font-size: clamp(1rem,4vw,1.55rem); line-height: .9; }
.finalist-preview em { bottom: 20px; font-size: clamp(.84rem,3.2vw,1.25rem); line-height: .92; }
.finalist-name { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; color: var(--muted); font-size: .68rem; }
.finalist-name b { color: var(--text); }

.editor-screen { width: 100%; }
.editor-header { margin-bottom: 7px; }
.editor-app { height: calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: grid; grid-template-rows: minmax(0,1fr) 92px 128px; gap: 7px; }
.editor-canvas-zone { min-height: 0; display: grid; place-items: center; }
.editor-canvas { width: auto; height: 100%; max-width: 100%; max-height: min(58dvh,650px); box-shadow: none; touch-action: none; }
.editor-meta { z-index: 5; }
.editable-block { position: absolute; z-index: 6; min-width: 90px; min-height: 32px; padding: 5px 7px; color: var(--block-color,#fff); font-size: calc(var(--block-size,82) * 1px); line-height: .9; letter-spacing: -.045em; white-space: pre-wrap; overflow-wrap: break-word; cursor: move; touch-action: none; }
.editable-block.is-selected { outline: 1px dashed rgba(255,255,255,.8); outline-offset: 3px; background: rgba(7,10,9,.12); }
.editable-block:focus { cursor: text; }
.block-main { left: 8%; top: 56%; width: 84%; font-family: var(--font-head,"Finlandica"),sans-serif; font-weight: var(--font-weight,700); }
.block-accent { left: 8%; top: 74%; width: 84%; font-family: var(--font-body,"Piazzolla"),serif; font-style: italic; }
.editable-block:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,.56); }
.drag-tip { position: absolute; z-index: 7; left: 50%; bottom: 10px; width: max-content; max-width: 88%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 99px; color: rgba(255,255,255,.68); background: rgba(9,13,12,.76); transform: translateX(-50%); font-size: .55rem; pointer-events: none; transition: opacity .2s; }
.drag-tip.is-hidden { opacity: 0; }
.editor-film-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.slide-filmstrip { min-width: 0; flex: 1 1 auto; display: flex; gap: 7px; padding: 3px; overflow-x: auto; }
.slide-thumb { position: relative; flex: 0 0 60px; aspect-ratio: 4/5; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2) center/cover; cursor: pointer; }
.slide-thumb.is-active { border-color: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.slide-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%,rgba(0,0,0,.75)); }
.slide-thumb.is-text::after { display: none; }
.slide-thumb span, .slide-thumb b { position: absolute; z-index: 2; left: 6px; right: 5px; text-align: left; }
.slide-thumb span { top: 5px; font-size: .62rem; }
.slide-thumb b { bottom: 7px; color: #fff; font: 500 .46rem/.98 "Piazzolla",serif; }
.round-action { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; }
.round-action .material-symbols-rounded { --icon-size: 1.2rem; }
.danger-action { color: #d88d88; }
.editor-dock { min-width: 0; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -12px 34px rgba(0,0,0,.34); }
.dock-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 8px; }
.dock-tab { min-height: 32px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-size: .64rem; cursor: pointer; }
.dock-tab .material-symbols-rounded { --icon-size: .88rem; }
.dock-tab.is-active { color: var(--text); background: var(--surface-3); }
.dock-panel { display: flex; align-items: center; gap: 10px; min-width: 0; }
.selected-block-label { flex: 0 1 100px; min-width: 0; }
.selected-block-label span, .selected-block-label strong { display: block; }
.selected-block-label span { color: var(--muted); font-size: .55rem; }
.selected-block-label strong { margin-top: 2px; overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.compact-control { min-width: 0; flex: 1 1 auto; display: grid; gap: 4px; color: var(--muted); font-size: .57rem; }
.compact-control input[type="range"] { width: 100%; accent-color: var(--paper); }
.color-control { display: grid; justify-items: center; gap: 3px; color: var(--muted); font-size: .55rem; }
.color-control input { width: 30px; height: 30px; padding: 0; border: 0; background: none; }
.align-control { display: flex; gap: 3px; }
.align-control button { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; }
.align-control [data-align="left"] .material-symbols-rounded { justify-items: start; }
.align-control [data-align="right"] .material-symbols-rounded { justify-items: end; }
.align-control button.is-active { color: var(--ink); background: var(--paper); }
.align-control .material-symbols-rounded { --icon-size: 1rem; }
.switch-inline { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .65rem; }
.switch-inline input { accent-color: var(--paper); }
.dock-palettes { display: flex; gap: 7px; }
.style-panel { overflow-x: auto; }
.composition-strip { display: flex; gap: 6px; }
.composition-chip { flex: 0 0 auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; font-size: .58rem; cursor: pointer; }
.composition-chip.is-active { color: var(--ink); background: var(--paper); }
#removePhoto { color: #ffd2ce; border-color: rgba(255,129,123,.34); }

dialog { width: min(430px,calc(100% - 24px)); padding: 24px; border: 1px solid var(--line-strong); border-radius: 23px; color: var(--text); background: #151a19; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(7px); }
.crop-dialog { width:min(440px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow-y:auto; }
.crop-dialog .input-help { margin:0 0 12px; }
.crop-frame { position:relative; width:min(100%,280px,max(180px,calc((100dvh - 310px)*.8))); aspect-ratio:4/5; margin:0 auto 14px; overflow:hidden; border:1px solid var(--line-strong); border-radius:12px; background:#252a2f; touch-action:none; cursor:grab; }
.crop-frame:active { cursor:grabbing; }
.crop-frame .canvas-photo { pointer-events:none; }
.crop-zoom-label { display:flex; justify-content:space-between; margin-bottom:8px; font-size:.76rem; }
#cropZoom { display:block; width:100%; min-height:38px; accent-color:var(--paper); }
.crop-actions { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:7px; margin-top:14px; }
.crop-actions button { min-width:0; min-height:44px; padding:7px; font-size:.72rem; }
.dialog-close { position: absolute; top: 13px; right: 13px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.dialog-label { margin: 0 0 7px; color: var(--muted); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
dialog h2 { margin: 0 40px 12px 0; font: 500 1.55rem/1.05 "Piazzolla",serif; }
dialog > p { color: var(--muted); line-height: 1.5; }
.custom-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 16px 0; }
.custom-colors label { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: .68rem; }
.custom-colors input { width: 34px; height: 34px; padding: 0; border: 0; background: none; }
.save-links { display: grid; gap: 7px; margin-top: 10px; }
.save-link { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); text-decoration: none; font-size: .72rem; }
.quiet-download { width: 100%; margin-top: 10px; }
.next-carousel-actions { margin:24px 0;padding-top:18px;border-top:1px solid var(--line); }
.next-carousel-actions h3 { font-size:18px;line-height:1.3;margin:0 0 12px; }
.next-carousel-actions button { min-height:48px;font-size:15px;white-space:normal; }
.save-help { margin-bottom: 0; font-size: .68rem; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: max(17px,env(safe-area-inset-bottom)); max-width: calc(100% - 24px); padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(25,29,29,.98); opacity: 0; transform: translate(-50%,12px); pointer-events: none; transition: .18s ease; font-size: .72rem; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

.photo-picker-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0; }
.photo-picker-grid button { padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-3);cursor:pointer; }
.photo-picker-grid img { display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px; }
.photo-picker-grid span { display:block;padding:6px 0;font-size:.7rem; }
.segment-background-preview { width:38px;height:50px;border:1px solid var(--line);border-radius:7px;background:center/cover;align-self:start;font-size:.58rem;color:#fff;text-shadow:0 1px 4px #000;background-blend-mode:normal;cursor:pointer; }
#editorDraftStatus { font-size:.57rem;letter-spacing:0;text-transform:none;max-width:160px;margin-inline:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.studio-brand-name { min-width:0;font-size:.9rem; }
.studio-brand-name small { display:block;margin-top:4px;color:var(--muted);font-size:.64rem;font-weight:400; }
.vv-signature, .studio-brand-name small.vv-signature { display:flex;align-items:center;gap:7px; }
.vv-spiral { display:inline-block;width:28px;height:31px;flex-shrink:0;vertical-align:middle; }
.studio-brand-name small.vv-signature { color:var(--text);font-size:.875rem;font-weight:500; }
.studio-brand-name .vv-spiral { width:26px;height:29px; }
.vv-ready-spiral { margin-right:8px; }
.vv-ad-visual { display:block;width:100%;height:auto;max-height:180px;object-fit:contain;border-radius:10px;margin:12px 0;background:#f3ecdf; }
.vv-spiral.is-ready { animation:vv-spiral-bloom 2s ease-in-out 1; }
@keyframes vv-spiral-bloom {
  0%,100% { filter:drop-shadow(0 0 0 transparent); }
  45% { filter:drop-shadow(0 0 4px rgba(244,239,229,.85)) drop-shadow(0 0 11px rgba(244,239,229,.4)); }
}
@media (prefers-reduced-motion:reduce) { .vv-spiral.is-ready { animation:none; } }
.brand-story { margin:12px 0 20px;color:var(--muted);font-size:.78rem;line-height:1.5; }
.studio-author { display:flex;align-items:center;gap:10px;min-height:48px;width:fit-content;max-width:100%;margin:-10px 0 20px;color:var(--text);text-decoration:none;border-radius:12px;padding:4px 6px; }
.studio-author img { width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 30%; }
.studio-author small,.studio-author strong { display:block; }
.studio-author small { color:var(--muted);font-size:11px;font-weight:400; }
.studio-author strong { font-size:13px;font-weight:600; }
.studio-author-link { color:var(--muted);font-size:11px;margin-left:4px;white-space:nowrap; }
.studio-author:focus-visible { outline:2px solid var(--paper);outline-offset:4px; }
.studio-author:hover { background:rgba(255,255,255,.05); }
.brand-story summary { cursor:pointer;min-height:44px;padding-block:10px; }
.save-dialog.has-ad-break #downloadZip,.save-dialog.has-ad-break #saveHelp { display:none; }
.save-dialog.has-ad-break { padding:20px;max-height:92dvh; }
.save-dialog.has-ad-break .dialog-close { width:44px;height:44px;top:8px;right:8px; }
.save-dialog.has-ad-break > .dialog-label,.save-dialog.has-ad-break > h2 { display:none; }
.save-dialog.has-ad-break #saveStatus { padding-right:42px;font-size:13px;margin:0 0 16px; }
.save-dialog.has-ad-break .vv-break > .vv-actions { position:sticky;bottom:-1px;padding:10px 0 2px;background:#151a19;z-index:2; }
.vv-wrap.vv-ad { margin:0;padding:0;border:0;border-radius:0;background:transparent; }
.vv-wrap.vv-ad h3 { font:650 clamp(24px,6.8vw,30px)/1.15 "Onest",system-ui,sans-serif;letter-spacing:-.5px;margin:14px 0 16px; }
.vv-wrap.vv-ad p { font-size:16px;line-height:1.45;margin:14px 0; }
.vv-wrap.vv-ad .vv-kicker { font-size:12px;letter-spacing:0;text-transform:none;margin:0 0 14px;color:var(--text); }
.vv-wrap.vv-ad .vv-link { display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:12px;background:var(--paper);color:var(--ink);text-decoration:none;text-align:center;font-size:16px;font-weight:600;margin-top:18px; }
.vv-break>.vv-actions>.vv-button-primary { width:100%;min-height:48px;border:1px solid #727b75;background:transparent;color:var(--text);font-size:16px; }
.vv-ad a:focus-visible { outline:2px solid var(--paper);outline-offset:4px; }
.vv-author-visual { display:flex;align-items:center;gap:15px;min-height:150px;padding:15px;border-radius:14px;background:#242a27;margin:14px 0; }
.vv-author-portrait { display:block;flex:none;width:112px;height:112px;object-fit:cover;border-radius:50%; }
.vv-author-visual strong { display:block;max-width:150px;font-size:21px;line-height:1.14;letter-spacing:-.04em; }
.vv-author-visual span { display:block;margin-top:7px;font-size:11px;line-height:1.4;color:#c2c5bb; }
.vv-wrap.vv-ad .vv-author-note { font-size:11px;line-height:1.4;color:#bfc1b8;margin:12px 0; }
.vv-system-visual { list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:14px 0;padding:12px;border-radius:14px;background:#242a27; }
.vv-system-visual li { display:flex;flex-direction:column;gap:6px;border:1px solid #676b5e;border-radius:10px;padding:9px; }
.vv-system-visual li:nth-child(2) { background:#963344;border-color:#b66270; }
.vv-system-visual li:nth-child(3) { background:#f3ecdf;color:#121716; }
.vv-system-visual span { font-size:10px; }
.vv-system-visual strong { font-size:12px;font-weight:500; }
.vv-projects .vv-link { display:block;padding:10px 0;min-height:44px; }
@media(max-width:380px) {
  .vv-author-visual { gap:12px;padding:12px; }
  .vv-author-portrait { width:90px;height:90px; }
  .vv-author-visual strong { font-size:20px; }
}
.vv-sponsor-visual { display:flex;align-items:center;justify-content:space-around;gap:8px;margin:20px 0;padding:18px 8px;background:var(--surface-2);border-radius:14px; }
.vv-routine,.vv-tool { display:grid;justify-items:center;gap:12px;font-size:12px; }
.vv-tool .vv-spiral { width:60px;height:64px; }
.vv-task-stack { display:grid;gap:5px;width:58px;height:64px;padding:8px;border:1px solid var(--muted);border-radius:8px; }
.vv-task-stack i { border-bottom:2px solid var(--muted);height:9px; }
.vv-transform-arrow { font-size:25px;color:var(--muted); }
.vv-wrap.vv-ad .vv-poll-status { font-size:12px;color:var(--muted); }
.vv-ad .vv-poll-option { display:block;width:100%;min-height:48px;margin:8px 0;text-align:left;font-size:15px; }
.vv-ad .vv-poll-option[data-picked] { background:var(--paper);color:var(--ink);border-color:var(--paper); }
@media(max-height:700px) {
  .save-dialog.has-ad-break { padding:16px; }
  .save-dialog.has-ad-break .vv-ad-visual { max-height:130px; }
  .save-dialog.has-ad-break .vv-ad h3 { font-size:24px;margin:10px 0; }
  .save-dialog.has-ad-break .vv-ad p { margin:10px 0; }
}

@media (min-width: 700px) {
  .tinder-screen { max-width: 760px; margin: 0 auto; }
  .fitting-room { grid-template-columns: minmax(0,600px) 110px; gap: 16px; }
  .palette-tools > div { grid-template-columns: repeat(2,34px); }
  .palette-swatch, .add-color { width: 34px; height: 34px; }
  .editor-app { max-width: 980px; margin: 0 auto; grid-template-columns: minmax(0,560px) minmax(300px,1fr); grid-template-rows: minmax(0,1fr) 92px; }
  .editor-canvas-zone { grid-row: 1/3; }
  .editor-film-row { grid-column: 2; }
  .editor-dock { grid-column: 2; border-radius: 18px; }
  .editor-canvas { max-height: 72dvh; }
}

@media (max-width: 699px) {
  .start-layout, .split-workspace { grid-template-columns: 1fr; }
  .start-preview { display: none; }
  .start-copy h1 { font-size: clamp(2.2rem,12vw,3.6rem); }
  #screenStart { padding-bottom: calc(105px + env(safe-area-inset-bottom)); }
  #screenStart .start-footer { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; margin: 0; padding: 10px max(18px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 -12px 28px rgba(0,0,0,.32); }
  #screenStart .start-footer > span { font-size: .8rem; }
  #screenStart .start-footer .primary-action { width: 100%; }
  #screenStart:has(#sourceText:focus) .start-footer > span { display: none; }
  .source-panel, .segment-panel { padding: 15px; border-radius: 19px; }
  .finalist-grid { grid-template-columns: 1fr 1fr; }
  .compare-footer { position: fixed; left: 9px; right: 9px; }
  .compare-screen { padding-bottom: 90px; }
  .split-screen { padding-bottom: 92px; }
  .split-finish { grid-template-columns: 1fr; padding: 11px; }
  .split-palette-choice { display: grid; grid-template-columns: 1fr auto; }
  .split-palette-choice > div:first-child { grid-column: 1/-1; }
  .split-finish > .primary-action { width: 100%; }
}

@media (max-width: 390px) {
  .studio-shell { width: calc(100% - 12px); }
  .brand-header { margin-bottom: 18px; }
  .brand-header .ghost-button { min-height: 36px; padding: 0 10px; font-size: .65rem; }
  .start-card { padding: 14px; }
  .start-footer { align-items: stretch; flex-direction: column; }
  .start-footer .primary-action { width: 100%; }
  .tool-header, .section-header, .editor-header { grid-template-columns: 46px 1fr auto; }
  .icon-button { width: 44px; height: 44px; }
  .undo-button { min-height: 44px; padding: 0 10px; }
  .fitting-room { grid-template-columns: minmax(0,1fr) 70px; gap: 7px; }
  .ig-canvas { border-radius: 17px; }
  .decision { min-height: 56px; font-size: .86rem; }
  .tinder-next { padding-left: 12px; }
  .tinder-next .primary-action, .compare-footer .primary-action { padding: 0 12px; }
  .finalist-preview h2 { left: 11px; right: 10px; bottom: 49px; }
  .finalist-preview em { left: 11px; right: 10px; bottom: 16px; }
  .editor-app { grid-template-rows: minmax(0,1fr) 84px 132px; }
  .editor-dock { padding-inline: 7px; }
  .dock-panel { gap: 7px; }
  .style-panel { gap: 6px; }
  .composition-chip { padding-inline: 8px; }
  .selected-block-label { flex-basis: 82px; }
  .align-control button { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Shared card geometry: editor, font fitting and exported PNG use a 1080 × 1350 scene. */
.canvas-photo { transform: none; }
.input-help, .text-help { color:var(--muted); font-size:.8rem; line-height:1.5; }
.text-help summary { cursor:pointer; min-height:44px; padding-block:10px; }
.text-fit-status { position:absolute; bottom:0; z-index:8; max-width:100%; min-height:44px; padding:6px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font-size:.7rem; cursor:pointer; }
.text-fit-status.has-issues { color:#ffd6ad; border-color:#c88b53; background:#352820; }
.editor-canvas-zone { position:relative; padding-bottom:46px; }
#textFitDialog, #textLimitDialog { width:min(480px,calc(100% - 24px)); }
.editable-block, .preview-block { position:absolute; z-index:6; padding:0; min-width:0; min-height:0; margin:0; line-height:1.1; letter-spacing:0; white-space:pre-wrap; overflow-wrap:break-word; }
.preview-block { display:block; }
.block-accent { font-weight:500; }
.editor-meta, .preview-meta { line-height:1.1; font-family:Onest,system-ui,sans-serif; font-weight:500; }
.finalist-preview::after { display:none; }
.finalist-preview h2, .finalist-preview em { right:auto; bottom:auto; line-height:1.1; }
.editor-meta, .preview-meta { position:absolute; z-index:5; top:5.333%; left:6.667%; right:6.667%; font-size:clamp(4px,1.5vw,8px); letter-spacing:0; color:rgba(255,255,255,.84); }
.editable-block:empty { min-height:24px; }
.single-finalist { grid-template-columns:minmax(0,340px); justify-content:center; }
.finalist-name { min-height:48px; align-items:center; }
.palette-swatch, .add-color { width:44px; height:44px; }
.palette-tools > div { grid-template-columns:repeat(2,44px); }
.palette-gallery .palette-swatch { flex-basis:44px; }
.split-finish { grid-template-columns:minmax(0,1fr) minmax(120px,180px) auto; }
.palette-example { padding:14px; border-radius:12px; font-size:.8rem; line-height:1.2; max-height:68px; overflow:hidden; }
.split-palette-choice strong span { display:inline; color:var(--text); font-size:inherit; }
.segment-controls button { min-height:44px; font-size:.72rem; }
.mini-button { min-height:44px; }
.resume-draft { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:18px; margin:0 auto 20px; border:1px solid var(--line-strong); border-radius:18px; background:var(--surface); }
.resume-draft > div { flex:1 1 260px; }
.resume-draft span { display:block; margin-top:5px; color:var(--muted); font-size:.8rem; }
.draft-status { margin:12px 0; text-align:center; color:var(--muted); font-size:.68rem; }
.editor-mode .draft-status { display:none; }
.block-palette-colors { display:flex; gap:6px; }
.block-palette-colors button { width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; }
.background-colors { flex-basis:100%; display:flex; align-items:center; gap:8px; font-size:.7rem; }
.background-colors button { width:36px; height:36px; border:1px solid var(--line-strong); border-radius:50%; cursor:pointer; }
#photoPanel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
#backgroundColors { grid-column:1/-1; }
#textPanel { flex-wrap:wrap; }
.block-palette-colors { flex-basis:100%; justify-content:center; }
#textPanel { display:grid; grid-template-columns:minmax(0,1fr) 138px 36px; gap:8px; }
#textPanel .align-control { grid-column:1; grid-row:2; }
#textPanel .block-palette-colors { grid-column:2/4; grid-row:2; }
.editor-canvas { width:min(100%,calc((100dvh - 348px)*.8)); height:auto; max-height:none; }
.dock-tab { min-height:40px; font-size:.75rem; }
.align-control button { width:36px; height:36px; }
.editor-app { grid-template-rows:minmax(0,1fr) 84px 164px; }
.editor-dock { padding:8px 10px; }
dialog { max-height:85dvh; overflow:auto; }
.split-summary { padding:10px 13px; gap:7px; }
.mini-storyboard { max-height:44px; }
.mini-storyboard i { flex:0 0 35px; }
.tinder-screen { max-width:700px; }
.fitting-room { grid-template-columns:minmax(0,380px) 180px; justify-content:center; }
.tinder-next { position:fixed; left:50%; transform:translateX(-50%); width:min(680px,calc(100% - 18px)); }
.tinder-screen { padding-bottom:80px; }
#tinderCanvas { max-width:340px; margin-inline:auto; }
.pair-caption { max-width:340px; margin-inline:auto; }
.tinder-instruction { font-size:.8rem; line-height:1.4; }
.catalog-progress { min-width:0; width:100%; }
.progress-dots { width:min(160px,100%); }
.tool-header { grid-template-columns:44px minmax(0,1fr) auto; }
.screen { animation:none; }
@keyframes screen-in { from { opacity:0; } to { opacity:1; } }
.style-panel { flex-wrap:wrap; overflow:visible; }
.composition-strip, .dock-palettes { width:100%; overflow-x:auto; padding:3px; }
.composition-chip { min-height:38px; font-size:.7rem; }
.style-panel .dock-palettes { flex:1 1 0; width:0; }
.toast { top:max(76px,calc(env(safe-area-inset-top) + 76px)); bottom:auto; max-width:min(420px,calc(100% - 32px)); }

@media (min-width:700px) {
  .editor-app { grid-template-rows:minmax(0,1fr) 164px; }
  .editor-canvas { width:min(100%,calc((100dvh - 160px)*.8)); }
}
@media (max-width:699px) {
  .fitting-room { grid-template-columns:minmax(0,1fr); gap:8px; }
  #tinderCanvas { width:min(100%,280px,max(160px,calc((100dvh - 510px)*.8))); }
  .mini-storyboard { max-height:28px; }
  .mini-storyboard i { flex-basis:22px; }
  .canvas-tools { grid-template-columns:88px minmax(0,1fr); align-items:center; padding-right:6px; }
  .palette-tools { min-width:0; grid-template-columns:minmax(0,1fr) 44px; padding:0; border:0; gap:6px; }
  .palette-tools > span { grid-column:1/-1; text-align:left; font-size:.68rem; }
  #tinderPaletteName::after { content:' · листайте →'; opacity:.7; }
  .palette-tools > div { min-width:0; width:100%; max-width:100%; justify-self:stretch; display:flex; overflow-x:auto; padding:4px; gap:8px; }
  #paletteSwatches { -webkit-mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(to right,#000 0%,#000 calc(100% - 28px),transparent 100%); }
  .palette-tools .palette-swatch { flex:0 0 44px; }
  .tinder-actions { margin-top:8px; }
  .decision { min-height:48px; }
  .split-finish { grid-template-columns:1fr; }
  .palette-example { max-height:42px; padding:9px; }
  .editor-app { grid-template-rows:minmax(0,1fr) 78px 164px; }
  .slide-thumb { flex-basis:50px; }
  .round-action { flex-basis:36px; width:36px; height:40px; }
  .selected-block-label { flex-basis:84px; }
  .align-control button { width:32px; height:36px; }
}
@media (max-height:739px) and (max-width:699px) {
  .tinder-next { position:sticky; left:auto; transform:none; width:100%; }
  #tinderCanvas { max-width:220px; }
}

/* Optional context preview — uses the actual PNG renderer, not an editor imitation. */
.editor-canvas-zone .text-fit-status { left:0; width:51%; font-size:.66rem; }
.feed-preview-button { position:absolute; bottom:0; right:0; width:47%; min-height:44px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--text); font-size:.72rem; font-weight:700; cursor:pointer; }
.manual-color-warning { position:fixed; z-index:35; top:76px; left:50%; transform:translateX(-50%); width:min(460px,calc(100% - 24px)); padding:10px 12px; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); font-size:.76rem; }
.manual-color-warning p { margin:0 0 8px; }
.manual-color-warning button { min-height:44px; }
.feed-dialog { width:min(430px,calc(100% - 20px)); padding:18px; }
.feed-note, #feedStatus { font-size:.78rem; }
#feedStatus:empty { display:none; }
.feed-post { overflow:hidden; border-radius:14px; background:#fff; color:#141414; }
.feed-profile { display:flex; align-items:center; gap:9px; min-height:52px; padding:9px 12px; font-size:.82rem; }
.feed-profile > span:last-child { margin-left:auto; }
.feed-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--paper); color:var(--ink); font-weight:700; }
.feed-media { position:relative; aspect-ratio:4/5; touch-action:pan-y; user-select:none; }
.feed-media img { display:block; width:100%; height:100%; object-fit:contain; }
.feed-counter { position:absolute; top:10px; right:10px; padding:5px 9px; border-radius:99px; background:#111b; color:#fff; font-size:.7rem; pointer-events:none; }
.feed-post-footer { padding:10px 12px; font-size:.78rem; }
.feed-post-footer p { margin:8px 0 2px; }
.feed-icons { display:flex; justify-content:space-between; font-size:1.35rem; line-height:1.2; }
.feed-icon-group { display:flex; gap:14px; }
.feed-icons svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feed-dots { display:flex; justify-content:center; gap:5px; padding:6px; }
.feed-dots i { width:5px; height:5px; border-radius:50%; background:#b6b6b6; }
.feed-dots i.is-active { background:#252a2f; }
.feed-navigation { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; }
.feed-navigation span { text-align:center; font-size:.72rem; color:var(--muted); }
.feed-navigation .icon-button, .feed-dialog .dialog-close { width:44px; height:44px; flex-shrink:0; }
.save-link { min-height:72px; padding:7px 10px; }
.save-link img { width:42px; height:53px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.save-link span { flex:1; }
.save-link b { font-size:.7rem; }

/* A small reusable-style entry, not another required step. */
.style-starter { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:13px 16px; margin:0 auto 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.style-starter > div:first-child { flex:1 1 260px; }
.style-starter-empty > div:first-child { flex:0 1 auto; }
.style-starter strong { font-size:.84rem; }
.style-starter p { margin:5px 0; color:var(--muted); font-size:.74rem; line-height:1.45; }
.style-starter-actions { display:flex; flex-wrap:wrap; gap:8px; }
.style-starter-actions button { min-height:44px; font-size:.75rem; }
.style-colors { display:flex; gap:7px; padding:5px 0; }
.style-colors:empty { display:none; }
.style-colors i { display:block; width:25px; height:25px; border:1px solid var(--line-strong); border-radius:50%; }
.writing-help-trigger { width:100%; min-height:44px; margin:0 0 12px; }
.writing-help-dialog { width:min(480px,calc(100% - 24px)); }
.writing-help-dialog .dialog-label { padding-right:30px; }
.writing-help-dialog button { min-height:44px; }
.writing-help-dialog .dialog-close { position:sticky; top:0; float:right; margin:-8px -8px 0 8px; z-index:2; background:#151a19; }
.writing-help-dialog .text-help { margin:16px 0; }
.writing-help-dialog a { color:var(--text); }
.writing-steps { padding-left:22px; line-height:1.5; }
.writing-steps li { margin:10px 0; }
#manualPromptWrap textarea { width:100%; margin-top:8px; resize:vertical; }
.style-profile-dialog { width:min(480px,calc(100% - 24px)); }
.style-profile-dialog .dialog-label { padding-right:30px; }
.style-profile-note { color:var(--muted); font-size:.84rem; line-height:1.5; }
.style-name-label { display:block; margin:12px 0 5px; font-size:.78rem; }
.style-name-input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface-2); color:var(--text); font:inherit; }
.style-profile-preview { margin:12px 0; padding:12px; border:1px solid var(--line); border-radius:12px; }
.style-profile-preview strong { font-size:.9rem; }
.style-profile-preview p { margin:5px 0 0; color:var(--muted); font-size:.72rem; }
#styleProfileStatus { font-size:.8rem; line-height:1.45; }
#styleProfileStatus:empty { display:none; }
#openStyleProfile { flex-shrink:0; }

/* Keep adjustments beside the visible result, inside the existing compact dock. */
#textPanel { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;gap:8px; }
#textPanel .selected-block-label { grid-column:1;grid-row:1; }
#textPanel .compact-control:not(.width-control) { grid-column:2;grid-row:1;position:relative;padding-right:43px; }
#blockSizeNumber { position:absolute;right:0;bottom:0;width:40px;min-height:32px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.7rem;padding:3px; }
#textPanel .width-control { grid-column:1;grid-row:2; }
#textPanel .align-control { grid-column:2/4;grid-row:2;justify-content:flex-end; }
#textPanel .block-palette-colors { grid-column:1/4;grid-row:3; }
#textPanel .color-control { grid-column:3;grid-row:1; }
.selected-text-button,.add-text-button { display:block;width:100%;border:0;padding:3px 0;background:none;color:var(--text);text-align:left;cursor:pointer; }
.selected-text-button { min-height:28px;font-size:.65rem; }
.add-text-button { min-height:26px;color:var(--muted);font-size:.58rem; }
.text-block-list { display:grid;gap:8px;margin:16px 0;max-height:38dvh;overflow:auto; }
.text-block-list button { text-align:left;min-height:50px; }
.text-block-list button span { display:block;color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; }
.is-current-text { border-color:var(--paper); }
.extra-editor-block,.extra-preview-block { line-height:1.1;letter-spacing:0;white-space:pre-wrap; }
.restore-text-button { margin-left:10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--text);padding:5px 9px;cursor:pointer;pointer-events:auto; }
.toast:not(.is-visible) .restore-text-button { pointer-events:none; }
#textPanel .manual-color-warning { position:static;transform:none;grid-column:1/4;grid-row:3;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6px;width:100%;padding:0;border:0;box-shadow:none;background:none; }
#textPanel .manual-color-warning p { margin:0;color:var(--muted);font-size:.62rem;line-height:1.2; }
#textPanel .manual-color-warning button { min-height:36px;padding:4px;font-size:.62rem;line-height:1.2; }
.canvas-meta span:last-child { margin-left:auto; }
.split-palette-choice,.split-finish .palette-example { display:none; }
.split-finish { display:block; }
#whiteTextOnPhotos { white-space:normal;min-height:44px;line-height:1.2; }
.canvas-tools { flex-wrap:wrap; }
.editor-app { grid-template-rows:minmax(0,1fr) 78px 208px; }
.editor-canvas { width:min(100%,calc((100dvh - 438px)*.8)); }
.editor-mode .toast { top:8px!important;max-width:calc(100% - 24px); }
@media (min-width:700px) {
  .editor-app { grid-template-rows:minmax(0,1fr) 208px; }
  .editor-canvas { width:min(100%,calc((100dvh - 160px)*.8)); }
}
@media (max-width:699px) {
  .tinder-screen { padding-bottom:calc(175px + env(safe-area-inset-bottom)); }
  .tinder-dock { position:fixed;z-index:15;bottom:0;left:0;width:100%;padding:8px 9px max(8px,env(safe-area-inset-bottom));background:var(--bg,#090d0c);border-top:1px solid var(--line); }
  .tinder-dock .tinder-actions { margin:0; }
  .tinder-next { position:static;transform:none;width:100%;margin-top:8px;box-shadow:none; }
}
.tinder-next > div { min-width:0; }
#likedStyleLabel { overflow-wrap:anywhere;line-height:1.3;max-width:210px; }
.tinder-next .primary-action { flex-shrink:0;min-height:48px; }

/* Editor controls share the viewport with the result, not a second page below it. */
.editor-mode .studio-shell { height:100dvh;padding-block:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-bottom)); }
.editor-screen { height:100%;display:flex;flex-direction:column; }
.editor-header { flex:none;grid-template-columns:44px minmax(0,1fr) auto;gap:6px;margin-bottom:6px; }
.editor-header .icon-button { width:44px;height:44px; }
.editor-header p { font-size:9px;letter-spacing:0;text-transform:none; }
.editor-header .save-button { padding-inline:10px;font-size:11px; }
.editor-history { display:flex;justify-content:center;gap:4px; }
.editor-history button { min-height:44px;min-width:44px;padding:4px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:10px;cursor:pointer; }
.editor-history button span { display:block;font-size:19px;line-height:20px; }
.editor-app { height:auto;min-height:0;flex:1;width:100%;grid-template-rows:minmax(0,1fr) 64px 232px; }
.editor-canvas { height:auto;max-height:none; }
/* Constrain the inner grid too: an old inline canvas width must not size its
   implicit track during resize, before the JS resize handler runs. */
.editor-canvas-zone { min-width:0;grid-template-columns:minmax(0,1fr); }
@media(max-width:699px){.editor-app { grid-template-columns:minmax(0,1fr); }}
.editor-dock { overflow-y:auto;overscroll-behavior:contain; }
.dock-tab { min-height:44px; }
.compact-control input[type=range] { min-height:28px;margin:0; }
#blockSizeNumber { min-height:44px; }
.align-control button { min-width:44px;min-height:44px; }
@media(min-width:700px){
  .editor-app { grid-template-rows:minmax(0,1fr) 232px; }
  .editor-history button { font-size:12px;min-width:85px; }
}