:root {
  color-scheme: light;
  --page: #f3f1ec;
  --panel: #fbfaf7;
  --surface: #fff;
  --ink: #20201f;
  --muted: #77736c;
  --line: #dfdcd5;
  --accent: #e45e46;
  --accent-deep: #aa3b2b;
  --accent-soft: #f8dfd8;
  --danger: #a23d31;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow: 0 24px 70px rgba(55, 48, 38, .14);
  font-family: "Golos Text", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body { margin: 0; min-width: 320px; min-height: 100dvh; background: var(--page); color: var(--ink); overscroll-behavior: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.98); }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(228,94,70,.28); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 20; padding: 10px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }
.screen { min-height: 100dvh; padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); }
.screen-inner { width: min(100%, 520px); margin-inline: auto; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.035em; }
.brand-mark { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 10px; background: var(--accent); color: #fffaf5; font-family: "Vollkorn", Georgia, serif; font-size: 21px; font-style: italic; }
.eyebrow { margin-bottom: 12px; color: var(--accent-deep); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.display { margin-bottom: 16px; font-family: "Manrope", Arial, sans-serif; font-size: clamp(36px, 11vw, 58px); line-height: .96; letter-spacing: -.06em; text-wrap: balance; }
.lede { max-width: 38ch; color: var(--muted); font-size: 15px; line-height: 1.55; }

.onboarding { display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(circle at 80% 15%, #f7cfc5, transparent 32%), var(--page); }
.onboarding .brand { margin-bottom: 12vh; }
.onboarding-points { display: grid; gap: 1px; margin: 28px 0; overflow: hidden; border-radius: var(--r-md); background: var(--line); }
.onboarding-point { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 15px; background: rgba(255,255,255,.78); }
.onboarding-point strong { display: block; margin-bottom: 3px; font-size: 13px; }
.onboarding-point span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.point-number { color: var(--accent-deep) !important; font-variant-numeric: tabular-nums; font-weight: 700; }

.button { min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; font-weight: 700; transition: transform .15s ease, background .2s ease; }
.button-primary { width: 100%; border-color: var(--accent-deep); background: var(--accent); color: #fffaf5; }
.button:disabled { cursor: default; border-color: #d6d1c8; background: #d6d1c8; color: #8a857d; }
.button-secondary { background: transparent; }
.button-danger { color: var(--danger); }
.button-small { min-height: 38px; padding-inline: 13px; font-size: 11px; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 20px; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--accent-deep); font-size: 12px; font-weight: 700; }

.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.app-header h1 { margin: 0; font-size: 24px; letter-spacing: -.05em; }
.header-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.home-empty { padding: 58px 26px; border: 1px dashed #c9c4bb; border-radius: var(--r-lg); background: rgba(255,255,255,.45); text-align: center; }
.home-empty strong { display: block; margin: 16px 0 8px; font-size: 20px; letter-spacing: -.04em; }
.home-empty p { margin-bottom: 22px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.empty-art { width: 86px; aspect-ratio: 4/5; margin: auto; border-radius: 7px; background: linear-gradient(145deg,#65715d,#d27b60); box-shadow: 12px 11px 0 #ded9d0, 24px 22px 0 #ebe7df; transform: translateX(-12px) rotate(-3deg); }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.project-card { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface); text-align: left; box-shadow: 0 8px 24px rgba(50,44,35,.08); }
.project-cover { position: relative; aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(145deg,#5d6b57,#cc725d); color: white; }
.project-cover img, .project-cover video { width: 100%; height: 100%; object-fit: cover; }
.project-cover::after { content: ""; position: absolute; inset: 0; background: rgba(15,16,14,.24); }
.project-cover span { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 13px; font-family: "Vollkorn", Georgia, serif; font-size: 17px; font-weight: 700; line-height: 1.05; }
.project-meta { padding: 11px 12px 13px; }
.project-meta strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-meta small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.home-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; padding: 28px 0 0; }
.draft-resume { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 13px; border: 1px solid #d6c9bd; border-radius: var(--r-md); background: #fff9f5; text-align: left; box-shadow: 0 8px 24px rgba(50,44,35,.06); }
.draft-resume-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); font-size: 20px; font-weight: 800; }
.draft-resume strong, .draft-resume small { display: block; }
.draft-resume strong { font-size: 12px; }
.draft-resume small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.wizard-head { margin-bottom: 24px; }
.wizard-head h1 { margin: 18px 0 8px; font-size: 28px; letter-spacing: -.05em; }
.wizard-head p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.back-button { padding: 4px 0; border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.step-label { color: var(--accent-deep); font-size: 10px; font-weight: 700; }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 24px; }
.preset { overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: var(--r-md); background: var(--surface); text-align: left; }
.preset.is-active { border-color: var(--accent); }
.preset-preview { display: grid; align-content: center; min-height: 150px; padding: 16px; background: var(--preset-bg); color: var(--preset-color); }
.preset-preview strong { font-family: var(--preset-display); font-size: 22px; line-height: 1; letter-spacing: -.04em; }
.preset-preview span { margin-top: 12px; font-family: var(--preset-body); font-size: 8px; line-height: 1.4; }
.preset-name { display: block; padding: 10px 11px; font-size: 10px; font-weight: 700; }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span { font-size: 11px; font-weight: 700; }
.field small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.field input, .field select { height: 46px; padding: 0 13px; }
.field textarea { min-height: 190px; padding: 13px; resize: vertical; font-size: 13px; line-height: 1.5; }
.upload-zone { display: grid; place-items: center; min-height: 126px; padding: 20px; border: 1px dashed #bdb8ae; border-radius: var(--r-md); background: rgba(255,255,255,.45); text-align: center; }
.upload-zone strong { margin-top: 8px; font-size: 12px; }
.upload-zone small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wizard-actions { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 14px 0 max(4px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--page) 20%); }
.wizard-actions .button-primary { flex: 1; }

.mapping-list { display: grid; gap: 9px; margin-bottom: 18px; }
.mapping-row { display: grid; grid-template-columns: 30px 64px 1fr; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--surface); }
.mapping-index { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.mapping-media { display: grid; place-items: center; aspect-ratio: 4/5; overflow: hidden; border-radius: 7px; background: #e5e1d9; color: var(--muted); font-size: 20px; }
.mapping-media img, .mapping-media video { width: 100%; height: 100%; object-fit: cover; }
.mapping-copy { min-width: 0; }
.mapping-copy p { display: -webkit-box; overflow: hidden; margin: 0 0 5px; font-size: 10px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mapping-copy small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.editor-screen { height: 100dvh; overflow: hidden; padding: max(10px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
.editor { width: min(100%, 520px); height: 100%; margin: auto; display: grid; grid-template-rows: 48px minmax(0,1fr) 104px 54px; }
.editor-header { display: grid; grid-template-columns: 84px minmax(0,1fr) 84px; align-items: center; gap: 4px; }
.editor-header > .icon-button { justify-self: start; }
.editor-header > .editor-actions { justify-self: end; }
.editor-actions { display: flex; align-items: center; gap: 4px; }
.history-button { display: grid; place-items: center; width: 32px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 18px; }
.history-button:disabled { color: #bbb5ab; }
.editor-title { min-width: 0; text-align: center; }
.editor-title strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.editor-title small { color: var(--muted); font-size: 9px; }
.canvas-zone { display: grid; place-items: center; min-height: 0; padding: 8px 12px; }
.editor-screen.has-sheet .canvas-zone { place-items: start center; padding-top: 4px; }
.editor-screen.has-sheet .slide-stage { width: min(76vw,calc(44dvh * .8)); }
.slide-stage { --slide-color:#fffaf2; --slide-display:"Vollkorn",Georgia,serif; --slide-body:"Golos Text",Arial,sans-serif; position: relative; width: min(100%, 47dvh); max-height: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: 5px; background: linear-gradient(145deg,#65715d,#d27b60); color: var(--slide-color); box-shadow: var(--shadow); touch-action: none; }
.stage-media, .stage-overlay { position: absolute; inset: 0; }
.stage-media img, .stage-media video { width: 100%; height: 100%; object-fit: cover; transform: translate(var(--media-x,0),var(--media-y,0)) scale(var(--media-scale,1)) rotate(var(--media-rotate,0deg)); }
.stage-overlay[data-overlay="dark"] { background: rgba(18,20,18,var(--overlay-strength,.25)); }
.stage-overlay[data-overlay="light"] { background: rgba(255,250,243,var(--overlay-strength,.25)); }
.stage-overlay[data-overlay="gradient"] { background: linear-gradient(90deg,rgba(12,14,12,var(--overlay-strength,.6)),transparent 82%); }
.stage-overlay[data-overlay="none"] { display: none; }
.stage-overlay[data-overlay="color"] { background: var(--overlay-color); opacity: var(--overlay-strength,.3); }
.safe-zone { position: absolute; inset: 6%; border: 1px dashed rgba(255,255,255,.28); opacity: 0; pointer-events: none; }
.slide-stage.is-free .safe-zone { opacity: 1; }
.text-group { position: absolute; z-index: 2; left: 8%; right: 8%; top: var(--text-y,10%); transform: translate(var(--text-x,0),0); text-align: var(--text-align,left); touch-action: none; }
.layout-center .text-group { top: 50%; transform: translate(var(--text-x,0),-50%); }
.layout-bottom .text-group { top: auto; bottom: 11%; }
.slide-eyebrow { margin: 0 0 12px; font-family: var(--slide-body); font-size: clamp(8px,2.4vw,11px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.slide-title { margin: 0; font-family: var(--slide-display); font-size: clamp(29px,9vw,48px); line-height: .98; letter-spacing: -.045em; white-space: pre-line; text-wrap: balance; }
.slide-body { max-width: 90%; margin: 18px 0 0; font-family: var(--slide-body); font-size: clamp(10px,3.1vw,15px); line-height: 1.45; white-space: pre-line; }
.text-center .slide-body { margin-inline: auto; }
.text-right .slide-body { margin-left: auto; }
.text-center .text-group { text-align: center; }
.text-right .text-group { text-align: right; }
.global-handle, .global-number { position: absolute; z-index: 3; bottom: 7%; font-family: var(--slide-body); font-size: clamp(7px,2.1vw,10px); font-weight: 700; }
.global-handle { left: 8%; }
.global-number { right: 8%; font-variant-numeric: tabular-nums; }
.global-progress { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 4%; height: 2px; background: rgba(255,255,255,.28); }
.global-progress span { display: block; height: 100%; background: currentColor; }
.picker-crosshair { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.12); font-size: 34px; }
.picker-crosshair::after { content: "Коснитесь цвета на фото"; position: absolute; bottom: 18px; padding: 8px 11px; border-radius: 8px; background: rgba(28,27,25,.86); color: white; font-size: 9px; }
.quick-delete { position: absolute; z-index: 5; top: 8px; right: 8px; display: grid; place-items: center; min-width: 62px; height: 34px; padding: 0 9px; border: 1px solid rgba(255,255,255,.48); border-radius: 9px; background: rgba(116,35,28,.78); color: white; font-size: 8px; font-weight: 800; backdrop-filter: blur(8px); }
.quick-delete:disabled { display: none; }

.rail-wrap { min-width: 0; overflow: hidden; }
.rail-wrap > small { display: block; height: 17px; padding-left: 2px; color: var(--muted); font-size: 8px; line-height: 17px; }
.slide-rail { display: flex; align-items: start; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.slide-rail::-webkit-scrollbar { display: none; }
.rail-slot { flex: 0 0 58px; transition: opacity .15s ease, transform .15s ease; touch-action: pan-x; }
.rail-slot.is-dragging { z-index: 3; opacity: .72; transform: scale(.94); }
.rail-item { position: relative; width: 58px; aspect-ratio: 4/5; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #d7d2c8; color: white; }
.rail-item.is-active { border-color: var(--accent); }
.rail-item img, .rail-item video { width: 100%; height: 100%; object-fit: cover; }
.rail-item span { position: absolute; inset: auto 4px 4px; z-index: 1; font-size: 7px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.rail-add { flex: 0 0 58px; aspect-ratio: 4/5; border: 1px dashed #bcb7ad; border-radius: 8px; background: transparent; color: var(--muted); font-size: 21px; }
.editor-nav { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.editor-nav button { border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 700; }
.editor-nav button.is-active { background: var(--accent-soft); color: var(--accent-deep); }

.sheet { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; max-height: min(48dvh,500px); overflow-y: auto; padding: 8px 18px max(22px,env(safe-area-inset-bottom)); border: 1px solid rgba(78,70,60,.1); border-bottom: 0; border-radius: 24px 24px 0 0; background: rgba(251,250,247,.98); box-shadow: 0 -18px 55px rgba(35,30,24,.2); animation: sheet-in .25s cubic-bezier(.16,1,.3,1); }
.sheet::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: #cbc6bd; }
.sheet-toolbar { position: sticky; z-index: 2; top: -8px; margin: 0 -4px 14px; padding: 8px 4px 7px; background: rgba(251,250,247,.97); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sheet-head h2 { margin: 0; font-size: 17px; letter-spacing: -.035em; }
.sheet-close { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #e9e5de; font-size: 19px; }
.sheet-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; padding: 3px; border-radius: 10px; background: #ebe7df; }
.sheet-tabs button { min-height: 32px; padding: 0 2px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 800; }
.sheet-tabs button.is-active { background: var(--surface); color: var(--accent-deep); box-shadow: 0 1px 4px rgba(42,37,30,.1); }
.sheet-hint { margin: -4px 0 16px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.segmented { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 3px; border-radius: 11px; background: #e8e4dc; }
.segmented button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(42,37,30,.12); }
.control { margin-bottom: 18px; }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.control-row strong { font-size: 11px; }
.control-row small { color: var(--muted); font-size: 9px; }
.range { width: 100%; accent-color: var(--accent); }
.switch { position: relative; width: 42px; height: 24px; border: 0; border-radius: 99px; background: #c8c4bd; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform .2s ease; }
.switch.is-on { background: var(--accent); }
.switch.is-on::after { transform: translateX(18px); }
.color-row { display: flex; flex-wrap: wrap; gap: 9px; }
.color-dot { width: 34px; height: 34px; border: 1px solid rgba(0,0,0,.14); border-radius: 10px; background: var(--color); }
.color-dot.is-active { box-shadow: 0 0 0 3px var(--panel),0 0 0 5px var(--accent); }
.font-list { display: grid; gap: 8px; }
.font-choice { display: grid; grid-template-columns: 1fr auto; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: left; }
.font-choice strong { font-family: var(--display-font); font-size: 16px; }
.font-choice small { grid-column: 1; margin-top: 4px; color: var(--muted); font-family: var(--body-font); font-size: 9px; }
.font-choice.is-active { border-color: var(--accent); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.sheet-actions .full { grid-column: 1/-1; }

/* Creation flow */
.create-screen { overflow-x: hidden; }
.compact-field { margin-bottom: 20px; }
.source-card { position: relative; display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; width: 100%; min-height: 92px; margin-bottom: 10px; padding: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.source-card strong { align-self: end; font-size: 13px; }
.source-card small { grid-column: 2; align-self: start; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.source-card.is-active { border-color: var(--accent); background: #fff9f5; }
.source-icon { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); font-size: 15px; font-weight: 800; }
.source-photo { border-color: #c9c2b7; background: #fffdfa; }
.draft-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 24px 0 11px; }
.draft-section-head strong, .draft-section-head small { display: block; }
.draft-section-head strong { font-size: 13px; }
.draft-section-head small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.draft-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-bottom: 18px; }
.draft-thumb, .draft-add { position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: 9px; background: #d8d3ca; }
.draft-thumb { touch-action: pan-y; transition: opacity .15s ease, transform .15s ease; }
.draft-thumb.is-dragging { z-index: 2; opacity: .72; transform: scale(.96); }
.draft-thumb > [data-draft-media], .draft-thumb img, .draft-thumb video { width: 100%; height: 100%; object-fit: cover; }
.draft-thumb > span { position: absolute; left: 5px; bottom: 5px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: rgba(26,25,23,.76); color: white; font-size: 8px; font-weight: 800; }
.draft-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 18px; }
.draft-add { display: grid; place-items: center; border: 1px dashed #b8b2a8; background: transparent; color: var(--muted); font-size: 22px; }
.draft-text textarea { min-height: 230px; }
.draft-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 4px; padding: 13px 14px; border-radius: 11px; background: #e8e3db; }
.draft-summary strong { font-size: 11px; }
.draft-summary span { color: var(--muted); font-size: 9px; }
.template-carousel { display: flex; gap: 14px; width: calc(100% + 36px); margin-inline: -18px; padding: 4px 18px 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.template-carousel::-webkit-scrollbar { display: none; }
.template-card { flex: 0 0 min(78vw,330px); padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 18px; background: var(--surface); scroll-snap-align: center; box-shadow: 0 12px 35px rgba(52,46,38,.09); text-align: left; }
.template-card.is-active { border-color: var(--accent); }
.template-canvas { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--tpl-bg); color: var(--tpl-color); }
.template-media, .template-media img, .template-media video, .template-shade { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.template-shade[data-overlay="dark"] { background: rgba(18,20,18,var(--tpl-strength,.34)); }
.template-shade[data-overlay="light"] { background: rgba(255,250,243,var(--tpl-strength,.42)); }
.template-shade[data-overlay="gradient"] { background: linear-gradient(90deg,rgba(12,14,12,var(--tpl-strength,.6)),transparent 88%); }
.template-shade[data-overlay="none"] { display: none; }
.template-shade[data-overlay="color"] { background: var(--tpl-overlay-color); opacity: var(--tpl-strength,.3); }
.template-copy { position: absolute; z-index: 2; left: 9%; right: 9%; top: 12%; display: flex; flex-direction: column; gap: 13px; }
.template-title-placeholder { font-family: var(--tpl-display); font-size: clamp(23px,7.4vw,34px); font-weight: 700; line-height: .98; letter-spacing: -.04em; opacity: .68; }
.template-body-preview { max-width: 88%; font-family: var(--tpl-body); font-size: 10px; line-height: 1.4; }
.template-accent-demo { align-self: flex-start; font-family: var(--tpl-body); font-size: 10px; }
.template-accent-demo b { padding: 2px 4px; background: var(--tpl-accent); color: var(--tpl-bg); }
.template-canvas.accent-marker .template-accent-demo b { box-shadow: inset 0 -.9em var(--tpl-accent); background: transparent; color: inherit; }
.template-canvas.accent-underline .template-accent-demo b { padding: 0; border-bottom: 2px solid var(--tpl-accent); background: transparent; color: inherit; }
.template-canvas.accent-line .template-accent-demo b { padding: 0; border-bottom: 1px solid var(--tpl-accent); background: transparent; color: var(--tpl-accent); }
.template-copy.is-placeholder { opacity: .72; }
.template-number { position: absolute; z-index: 3; right: 8%; bottom: 7%; font-family: var(--tpl-body); font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.template-canvas.layout-center .template-copy { top: 50%; transform: translateY(-50%); }
.template-canvas.layout-bottom .template-copy { top: auto; bottom: 12%; }
.template-canvas.text-center .template-copy { align-items: center; text-align: center; }
.template-canvas.text-right .template-copy { align-items: end; text-align: right; }
.template-label { display: block; padding: 13px 14px 15px; font-size: 11px; font-weight: 800; }
.template-label small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; font-weight: 500; }
.wizard-actions.stacked { display: grid; grid-template-columns: 1fr; text-align: center; }
.single-preview { width: min(68vw,280px); margin: 0 auto 22px; }
.single-preview .template-card { width: 100%; }
.palette-fields { display: grid; gap: 8px; margin-bottom: 20px; }
.palette-field { display: grid; grid-template-columns: 1fr auto 38px; align-items: center; min-height: 52px; padding: 7px 8px 7px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); font-size: 11px; font-weight: 700; }
.palette-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.palette-field b { grid-column: 3; width: 34px; height: 34px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px; background: var(--swatch); }

/* Editor additions */
.slide-stage { container-type: size; --auto-fit:1; }
.text-group { transform-origin: top left; transform: translate(var(--text-x,0),0) scale(var(--auto-fit)); }
.layout-center .text-group { transform-origin: center left; transform: translate(var(--text-x,0),-50%) scale(var(--auto-fit)); }
.layout-bottom .text-group { transform-origin: bottom left; transform: translate(var(--text-x,0),0) scale(var(--auto-fit)); }
.slide-stage.is-free .text-group { top: var(--text-y,10%); bottom: auto; transform-origin: top left; transform: translate(var(--text-x,0),0) scale(var(--auto-fit)); }
.slide-eyebrow { font-size: calc(var(--eyebrow-size,23) * .0926cqw); font-weight: var(--body-weight,400); }
.slide-title { font-size: calc(var(--title-size,76) * .0926cqw); font-weight: var(--display-weight,700); line-height: var(--title-leading,.98); }
.slide-body { color: var(--slide-body-color); font-size: calc(var(--body-size,30) * .0926cqw); font-weight: var(--body-weight,400); line-height: var(--body-leading,1.35); }
.slide-stage.is-free .slide-eyebrow { transform: translate(calc(var(--eyebrow-x,0) * 1cqw),calc(var(--eyebrow-y,0) * 1cqh)); }
.slide-stage.is-free .slide-title { transform: translate(calc(var(--title-x,0) * 1cqw),calc(var(--title-y,0) * 1cqh)); }
.slide-stage.is-free .slide-body { transform: translate(calc(var(--body-x,0) * 1cqw),calc(var(--body-y,0) * 1cqh)); }
.slide-stage.is-free [data-text-element] { border-radius: 3px; }
.slide-stage.is-free [data-text-element].is-move-target { outline: 1px dashed rgba(255,255,255,.78); outline-offset: 4px; }
.slide-stage.is-free .text-group.move-group { outline: 1px dashed rgba(255,255,255,.72); outline-offset: 5px; }
.text-group mark { padding: 0 .07em; background: var(--slide-accent); color: var(--slide-color); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.accent-marker .text-group mark { padding-inline: .08em; }
.accent-underline .text-group mark { padding: 0; border-bottom: .11em solid var(--slide-accent); background: transparent; color: inherit; }
.accent-line .text-group mark { padding: 0; border-bottom: .07em solid var(--slide-accent); background: transparent; color: var(--slide-accent); }
.empty-text-action { position: absolute; z-index: 4; left: 50%; top: 50%; min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.54); border-radius: 99px; background: rgba(28,27,25,.62); color: white; font-size: 10px; font-weight: 800; backdrop-filter: blur(7px); transform: translate(-50%,-50%); }
.empty-text-action:active { transform: translate(-50%,-50%) scale(.98); }
.fit-warning { position: absolute; z-index: 4; left: 8%; top: 6%; padding: 6px 8px; border-radius: 7px; background: #fff0cc; color: #664a08; font-size: 8px; font-weight: 800; }
.inline-warning { padding: 11px 12px; border-radius: 10px; background: #fff0cc; color: #664a08; font-size: 10px; line-height: 1.45; }
.field-action { justify-self: start; margin-top: -2px; }
.sheet .field textarea { min-height: 104px; }
.sheet .field:first-of-type textarea { min-height: 88px; }
.spaced { margin: 18px 0; }
.spaced > div small { display: block; margin-top: 3px; }
.full-button { width: 100%; }
.section-label { margin: 4px 0 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.section-spacer { margin-top: 18px; }
.accent-options, .move-targets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-bottom: 14px; }
.accent-options button, .move-targets button { min-height: 40px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 9px; font-weight: 700; }
.accent-options button.is-active, .move-targets button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.font-pair-scroll { display: flex; gap: 8px; margin: 0 -18px 18px; padding: 0 18px 4px; overflow-x: auto; scrollbar-width: none; }
.font-pair-scroll::-webkit-scrollbar { display: none; }
.font-pair-scroll .font-choice { flex: 0 0 210px; }
.type-grid { display: grid; grid-template-columns: minmax(0,1fr) 108px; gap: 0 9px; }
.crop-hint { margin-bottom: 14px; color: var(--muted); font-size: 10px; }
.compact-upload { min-height: 92px; margin-bottom: 18px; }
.color-control { margin-bottom: 10px; }
.color-control-button { display: grid; grid-template-columns: 1fr 36px auto; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 7px 10px 7px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: left; }
.color-control-button span { font-size: 10px; font-weight: 700; }
.color-control-button b { width: 34px; height: 34px; border: 1px solid rgba(0,0,0,.14); border-radius: 9px; background: var(--swatch); }
.color-control-button small { color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.inline-color-picker { margin-top: 7px; padding: 12px; border-radius: 14px; background: #e9e5dd; }
.color-spectrum { position: relative; height: 154px; overflow: hidden; border-radius: 10px; background: linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--picker-hue)); touch-action: none; }
.color-spectrum span { position: absolute; width: 22px; height: 22px; border: 3px solid white; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,.45); transform: translate(-50%,-50%); pointer-events: none; }
.picker-range { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; margin-top: 11px; font-size: 9px; font-weight: 700; }
.picker-range input { width: 100%; accent-color: var(--accent); }
.picker-hex { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; margin-top: 8px; font-size: 9px; font-weight: 700; }
.picker-hex input { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 11px; text-transform: uppercase; }
.picker-favorites { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.picker-favorites button { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(0,0,0,.14); border-radius: 8px; background: var(--color); }
.inline-color-picker p { margin: 9px 0 0; color: var(--muted); font-size: 8px; }
.video-trim { margin: 18px 0; padding: 13px; border-radius: 12px; background: #e9e5dd; }
.video-trim strong { font-size: 11px; }
.video-trim p { margin: 5px 0 12px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.combined-setting { margin: 18px 0; padding: 13px; border-radius: 12px; background: #ebe7df; }
.combined-setting .control-row { margin-bottom: 10px; }
.combined-setting input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 11px; }

/* Mobile interaction model v2 */
body.is-reordering, body.is-moving-text { overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
img, video { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.create-choice { display: grid; grid-template-columns: 1fr; }
.draft-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.draft-thumb { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.draft-thumb.is-placeholder, .rail-slot.is-placeholder { opacity: .24; outline: 2px dashed var(--accent); outline-offset: -2px; }
.draft-thumb.is-drop-target, .rail-slot.is-drop-target { box-shadow: 0 0 0 3px var(--accent-soft),0 0 0 5px var(--accent); }
.reorder-ghost { overflow: hidden; border-radius: 11px !important; opacity: .96; box-shadow: 0 20px 44px rgba(47,38,29,.34); transition: none !important; }
.reorder-ghost .draft-remove { display: none; }
.draft-text-list { display: grid; gap: 14px; }
.draft-text-card { padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 8px 26px rgba(50,43,34,.07); }
.draft-text-card-head { display: grid; grid-template-columns: 28px 48px 1fr 36px; align-items: center; gap: 8px; margin-bottom: 12px; }
.draft-text-card-head > span { color: var(--muted); font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.draft-text-card-head strong { font-size: 12px; }
.draft-text-card-head > button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: #eee9e2; font-size: 18px; }
.draft-text-media { display: grid; place-items: center; width: 48px; aspect-ratio: 4/5; overflow: hidden; border-radius: 7px; background: #e3ded6; color: var(--muted); font-size: 7px; }
.draft-text-media img, .draft-text-media video { width: 100%; height: 100%; object-fit: cover; }
.draft-text-card textarea { min-height: 76px; }
.batch-import { margin-bottom: 16px; padding: 12px; border: 1px solid #d8d0c7; border-radius: 16px; background: #fffaf6; }
.batch-import summary { cursor: pointer; font-size: 12px; font-weight: 800; }
.batch-import p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.batch-import textarea { width: 100%; min-height: 130px; margin: 8px 0; }
.consent-note { margin-top: 18px; padding: 12px; border-radius: 14px; background: #ece8e1; font-size: 11px; line-height: 1.5; }
.consent-actions { display: grid; gap: 10px; padding: 16px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.add-text-slide, .add-text-block { width: 100%; min-height: 48px; margin: 12px 0 18px; border: 1px dashed #b8b1a7; border-radius: 12px; background: transparent; color: var(--accent-deep); font-size: 11px; font-weight: 800; }
.template-example-badge { position: absolute; z-index: 4; top: 8%; right: 8%; padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.88); color: #302d29; font-family: var(--body); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.editor { grid-template-rows: 48px minmax(0,1fr) 104px 54px; }
.canvas-frame { display: grid; min-height: 0; grid-template-rows: minmax(0,1fr); }
.canvas-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.canvas-toolbar > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.canvas-delete { display: flex; align-items: center; gap: 5px; min-width: 44px; height: 34px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: var(--danger); font-size: 14px; font-weight: 800; }
.canvas-delete span { font-size: 9px; }
.canvas-delete:disabled { visibility: hidden; }
.editor-screen.has-sheet .canvas-frame { grid-template-rows: minmax(0,1fr); }
.editor-screen.has-sheet .canvas-zone { place-items: start center; }
.quick-delete { display: none !important; }

.slide-stage, .text-group, .slide-text-block { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.text-group { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.slide-text-block { position: relative; margin: 0; color: var(--block-color); font-family: var(--block-font); font-size: calc(var(--block-size) * .0926cqw); font-weight: var(--block-weight); line-height: var(--block-leading); text-align: var(--block-align); white-space: pre-wrap; overflow-wrap: anywhere; touch-action: none; transform: translate(calc(var(--block-x,0) * 1cqw),calc(var(--block-y,0) * 1cqh)); }
.slide-text-block.kind-title { letter-spacing: -.035em; text-wrap: balance; }
.slide-text-block.kind-body, .slide-text-block.kind-extra { max-width: 94%; }
.slide-text-block.is-selected { outline: 1px solid rgba(255,255,255,.82); outline-offset: 5px; border-radius: 2px; }
.slide-text-block.is-being-moved { opacity: .9; filter: drop-shadow(0 8px 12px rgba(0,0,0,.24)); }
.text-center .slide-text-block, .text-right .slide-text-block { max-width: 100%; }
.range-run { white-space: pre-wrap; }
.range-accent { padding-inline: .05em; background: var(--range-accent); color: var(--block-color); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.range-accent.accent-marker { background: linear-gradient(transparent 22%,var(--range-accent) 22%,var(--range-accent) 91%,transparent 91%); }
.range-accent.accent-underline { padding-inline: 0; border-bottom: .11em solid var(--range-accent); background: transparent; color: inherit !important; }
.range-accent.accent-line { padding-inline: 0; border-bottom: .07em solid var(--range-accent); background: transparent; color: var(--range-accent) !important; }
.safe-zone { inset: 6%; }
.slide-stage.is-free .safe-zone { opacity: 0; }
.slide-stage.is-moving-text .safe-zone { opacity: 1; border-color: rgba(255,255,255,.72); }
.center-guide { position: absolute; z-index: 5; opacity: 0; pointer-events: none; background: rgba(255,255,255,.72); }
.center-guide-x { left: 50%; top: 4%; bottom: 4%; width: 1px; }
.center-guide-y { left: 4%; right: 4%; top: 50%; height: 1px; }
.slide-stage.is-moving-text .center-guide { opacity: 1; }
.slide-stage.is-free .text-group { top: var(--text-y,10%); bottom: auto; }
.rail-slot { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.text-block-list { display: grid; gap: 8px; }
.text-block-card { display: grid; grid-template-columns: 1fr 44px; align-items: center; width: 100%; min-height: 64px; padding: 9px 8px 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
.text-block-card span { min-width: 0; }
.text-block-card small, .text-block-card strong { display: block; }
.text-block-card small { margin-bottom: 5px; color: var(--muted); font-size: 8px; }
.text-block-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.text-block-card b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: #eee9e2; color: var(--accent-deep); font-size: 17px; }
.block-panel-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 18px 0 4px; }
.block-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.block-editor { width: 100%; min-height: 112px; padding: 13px; resize: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: 16px/1.45 var(--body); }
.selection-toolbar { position: sticky; bottom: -22px; margin: 14px -18px -22px; padding: 12px 18px max(18px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(251,250,247,.99); }
.selection-status { margin-bottom: 10px; padding: 8px 10px; border-radius: 8px; background: #ebe7df; color: var(--muted); font-size: 9px; }
.selection-toolbar.has-selection .selection-status { background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.selection-toolbar:not(.has-selection) .color-control, .selection-toolbar:not(.has-selection) .accent-options { opacity: .45; pointer-events: none; }
.selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.selection-grid .field { margin-bottom: 8px; }

.toast.has-action { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.toast.has-action button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: white; color: #292724; font-size: 10px; font-weight: 800; }

.toast { position: fixed; z-index: 30; left: 50%; bottom: max(22px,env(safe-area-inset-bottom)); max-width: calc(100vw - 36px); padding: 11px 14px; border-radius: 10px; background: #292724; color: white; font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%,10px); transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.toast.is-error { background: var(--danger); }

/* Interaction and editor model v3 */
.project-card { overflow: visible; }
.project-open { display: block; width: 100%; overflow: hidden; padding: 0; border: 0; border-radius: var(--r-md); background: var(--surface); text-align: left; box-shadow: 0 8px 24px rgba(50,44,35,.08); }
.project-more { position: absolute; z-index: 4; top: 7px; right: 7px; width: 38px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; background: rgba(34,31,27,.7); color: white; font-weight: 900; letter-spacing: .08em; backdrop-filter: blur(8px); }
.project-menu { position: absolute; z-index: 8; top: 43px; right: 7px; display: grid; width: min(190px,75vw); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 16px 38px rgba(35,30,24,.24); }
.project-menu > button { min-height: 42px; padding: 0 13px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font-size: 11px; font-weight: 700; }
.project-menu > button:last-child { border-bottom: 0; }
.project-menu .danger { color: var(--danger); }
.project-menu label { display: grid; gap: 7px; padding: 10px; }
.project-menu label span { color: var(--muted); font-size: 8px; }
.project-menu input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; }
.project-menu label button { min-height: 38px; border: 0; border-radius: 8px; background: var(--accent); color: white; font-weight: 800; }

.text-group, .layout-center .text-group, .layout-bottom .text-group, .slide-stage.is-free .text-group { position: absolute; z-index: 2; inset: 0; display: block; transform: none; }
.slide-text-block { position: absolute; left: 8%; top: calc(var(--block-y,10) * 1%); width: 84%; max-width: none !important; margin: 0; transform: translateX(calc(var(--block-x,0) * 1cqw)); transition: filter .15s ease,opacity .15s ease; }
.slide-text-block.is-being-moved { z-index: 9; transform: translateX(calc(var(--block-x,0) * 1cqw)) scale(1.025); }
.slide-text-block.is-selected { outline: 1px solid rgba(255,255,255,.82); outline-offset: 5px; }
.slide-stage.is-moving-text .safe-zone, .slide-stage.is-moving-text .center-guide { opacity: 1; }

.global-handle, .global-number { bottom: auto; right: auto; left: auto; top: auto; color: var(--global-color); font-family: var(--global-font); font-size: calc(var(--global-size) * .0926cqw); transform: translate(calc(var(--global-x) * 1cqw),calc(var(--global-y) * 1cqh)); }
.global-handle.pos-top-left, .global-number.pos-top-left { top: 7%; left: 8%; }
.global-handle.pos-top-right, .global-number.pos-top-right { top: 7%; right: 8%; }
.global-handle.pos-bottom-left, .global-number.pos-bottom-left { bottom: 7%; left: 8%; }
.global-handle.pos-bottom-right, .global-number.pos-bottom-right { right: 8%; bottom: 7%; }
.global-handle.pos-top-center, .global-number.pos-top-center { top: 7%; left: 50%; }
.global-handle.pos-bottom-center, .global-number.pos-bottom-center { bottom: 7%; left: 50%; }
.global-handle.pos-top-center, .global-handle.pos-bottom-center, .global-number.pos-top-center, .global-number.pos-bottom-center { transform: translate(calc(-50% + var(--global-x) * 1cqw),calc(var(--global-y) * 1cqh)); text-align: center; }
.global-dots { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 4%; display: flex; justify-content: center; gap: max(2px,calc(var(--global-size) * .12cqw)); color: var(--global-color); }
.global-dots i { width: max(2px,calc(var(--global-size) * .0926cqw)); aspect-ratio: 1; border-radius: 50%; background: currentColor; opacity: .32; }
.global-dots i.is-active { opacity: 1; }
.global-progress { height: calc(var(--global-size) * .0926cqw); color: var(--global-color); background: color-mix(in srgb,currentColor 28%,transparent); }
.global-progress span { background: currentColor; }
.global-style-card { margin: 16px 0; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.52); }
.global-style-card h3 { margin: 0 0 12px; font-size: 12px; }

.sheet.block-sheet.is-editing { max-height: min(54dvh,520px); }
.block-editor { min-height: 104px; font-size: 16px; }
.editor-done-row { display: grid; grid-template-columns: 1fr 88px; align-items: center; gap: 9px; margin: 9px 0; }
.editor-done-row .selection-status { margin: 0; }
.editor-done-row .button { min-height: 40px; }
.selection-toolbar { position: static; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); background: transparent; }
.quick-format-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.quick-format-row::-webkit-scrollbar { display: none; }
.quick-format-row button { flex: 0 0 auto; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 9px; font-weight: 800; }
.quick-format-row button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.quick-format-row button:disabled { opacity: .42; }
.compact-tool { margin: 9px 0 4px; }
.picker-label { display: block; margin: 10px 0 7px; font-size: 9px; }
.saved-color { position: relative; display: inline-grid; }
.saved-color > button:last-child { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border: 1px solid white; border-radius: 50%; background: #2c2925; color: white; font-size: 12px; }
.color-spectrum { touch-action: none; user-select: none; -webkit-user-select: none; }
.draft-thumb.is-dragging, .rail-slot.is-dragging { touch-action: none; }
.reorder-ghost { transform-origin: center; }
.loading { display: grid; place-items: center; min-height: 100dvh; color: var(--muted); font-size: 12px; }
.progress-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(29,27,24,.55); backdrop-filter: blur(8px); }
.progress-card { width: min(100%,340px); padding: 22px; border-radius: var(--r-lg); background: var(--panel); text-align: center; }
.progress-card strong { display: block; margin-bottom: 8px; }
.progress-card p { color: var(--muted); font-size: 10px; }
.progress-line { height: 5px; overflow: hidden; border-radius: 99px; background: #ddd8d0; }
.progress-line span { display: block; height: 100%; width: var(--progress,10%); background: var(--accent); transition: width .2s ease; }
.export-cancel { width:100%; margin-top:16px; }
.desktop-only { display: none; }

@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (orientation: landscape) and (max-height: 600px) { #app > * { display: none; } #app::after { content: "Поверните телефон вертикально"; display: grid; place-items: center; min-height: 100dvh; font-weight: 700; } }
@media (min-width: 760px) {
  .mobile-only { display: none !important; }
  .desktop-only { display: grid; place-items: center; min-height: 100dvh; padding: 40px; text-align: center; }
  .desktop-only .empty-art { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Mobile editor model v4 */
.editor-actions .history-button, .canvas-delete { display:none !important; }
.canvas-toolbar { justify-content:center; min-height:30px; }
.stage-shell { position:relative; display:block; width:min(calc(100vw - 84px),306px); margin:0 auto; }
.stage-shell > .slide-stage { width:100%; max-height:none; }
.stage-tools { position:absolute; z-index:7; top:50%; display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateY(-50%); }
.stage-tools-left { right:100%; }
.stage-tools-right { left:100%; }
.stage-tools button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(55,49,42,.12); border-radius:50%; background:rgba(255,255,255,.84); color:#312e2a; box-shadow:0 4px 14px rgba(45,39,32,.08); backdrop-filter:blur(10px); }
.stage-tools button svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.stage-tools button:disabled { opacity:.28; }
.stage-tools .danger { color:#a63e34; }
.editor-screen.has-sheet .stage-shell { width:min(calc(100vw - 84px),286px); }
.editor-screen.has-sheet .slide-stage { width:100%; }
.editor-screen.has-sheet .canvas-zone { place-items:start center; padding:2px 8px 0; }
.editor-screen.sheet-collapsed .stage-shell { width:min(100%,390px); }
.editor-screen.sheet-collapsed .canvas-zone { place-items:center; }
.rail-item { border:2px solid transparent; }
.rail-item.is-active { border-color:#3c3934 !important; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.draft-thumb.is-placeholder, .rail-slot.is-placeholder { outline-color:#817b72 !important; }
.draft-thumb.is-drop-target, .rail-slot.is-drop-target { box-shadow:0 0 0 3px rgba(55,51,46,.18),0 0 0 5px #5b554d !important; }
.rail-slot { touch-action:pan-y; }
.draft-thumb, .rail-slot { -webkit-touch-callout:none !important; -webkit-user-select:none !important; user-select:none !important; }

.sheet { max-height:min(50dvh,540px); transition:max-height .22s ease,height .22s ease; }
.sheet-toolbar { position:sticky; z-index:9; top:-8px; padding-top:8px; background:rgba(251,250,247,.98); }
.sheet-head { grid-template-columns:40px 1fr 40px; }
.sheet-head h2 { text-align:center; }
.sheet-collapse, .sheet-close { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:#ece8e1; color:#302d29; font-size:21px; }
.sheet-collapsed .sheet { height:102px; max-height:102px; overflow:hidden; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
.sheet-collapsed .sheet > :not(.sheet-toolbar) { display:none !important; }
.sheet-collapsed .sheet-tabs { margin-bottom:3px; }

.section-title-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.section-title-row .section-label { margin:0; }
.section-title-row button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:10px; background:#ebe7df; color:#312e2a; font-size:17px; }
.control-note { margin:-5px 0 12px; color:var(--muted); font-size:9px; line-height:1.4; }
.color-control-row { display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:7px; }
.color-pipette { display:grid; place-items:center; min-height:52px; padding:0; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--accent-deep); font-size:25px; font-weight:800; }
.font-picker-button { display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:10px; width:100%; min-height:58px; margin:0 0 10px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:left; }
.font-picker-button > span { color:var(--muted); font-size:9px; font-family:var(--body); }
.font-picker-button > strong { max-width:170px; overflow:hidden; color:#25221f; font-size:17px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.font-picker-button > b { color:var(--muted); font:400 22px/1 var(--body); }
.is-disabled .font-picker-button { opacity:.42; pointer-events:none; }
.font-choice { min-height:104px; }
.font-choice strong { font-family:var(--display-font); }
.font-choice small { font-family:var(--body-font); }

.choice-modal { position:fixed; z-index:45; inset:0; display:grid; align-items:end; background:rgba(30,28,25,.5); backdrop-filter:blur(6px); }
.choice-card { width:100%; max-height:82dvh; overflow:hidden; padding:14px 16px max(18px,env(safe-area-inset-bottom)); border-radius:25px 25px 0 0; background:#fbfaf7; box-shadow:0 -20px 60px rgba(28,24,20,.22); }
.choice-card > header { display:flex; align-items:center; justify-content:space-between; min-height:48px; margin-bottom:8px; }
.choice-card > header h2 { margin:0; font-size:17px; }
.choice-card > header p { margin:4px 0 0; color:var(--muted); font-size:9px; }
.choice-card > header > button { display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:#ebe7df; font-size:23px; }
.font-list, .pair-manager-list { max-height:calc(82dvh - 82px); overflow-y:auto; overscroll-behavior:contain; }
.font-list section { margin-bottom:18px; }
.font-list h3 { position:sticky; top:0; z-index:2; margin:0; padding:10px 2px 7px; background:#fbfaf7; color:var(--muted); font:800 9px/1 var(--body); letter-spacing:.09em; text-transform:uppercase; }
.font-list section > button { display:grid; grid-template-columns:1fr 28px; align-items:center; width:100%; min-height:52px; padding:0 12px; border:0; border-bottom:1px solid var(--line); background:transparent; color:#25221f; text-align:left; font-size:20px; }
.font-list section > button b { font:800 14px/1 var(--body); text-align:right; }
.font-list section > button.is-active { background:#efebe4; border-radius:10px; }
.pair-manager-list { display:grid; gap:8px; }
.pair-manager-list article { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:9px; min-height:66px; padding:8px 9px; border:1px solid var(--line); border-radius:12px; background:white; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.pair-manager-list article.is-hidden { opacity:.48; }
.pair-manager-list .pair-grip { color:var(--muted); font-size:16px; letter-spacing:-.18em; }
.pair-manager-list article strong, .pair-manager-list article small { display:block; }
.pair-manager-list article strong { font-size:15px; }
.pair-manager-list article small { margin-top:4px; color:var(--muted); font-size:8px; }
.pair-actions { display:flex; gap:5px; }
.pair-actions button { min-height:38px; padding:0 10px; border:0; border-radius:9px; background:#ede9e2; color:#514b44; font-size:9px; font-weight:800; }
.pair-actions button:last-child:not(:first-child) { width:38px; padding:0; color:#a63e34; font-size:17px; }

.preview-modal { position:fixed; z-index:50; inset:0; display:grid; grid-template-rows:64px minmax(0,1fr) 48px; padding-top:env(safe-area-inset-top); background:#171614; color:white; }
.preview-modal header { display:grid; grid-template-columns:1fr 44px; align-items:center; padding:0 14px; }
.preview-modal header strong { text-align:center; transform:translateX(22px); }
.preview-modal header button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:white; font-size:26px; }
.preview-viewport { position:relative; display:grid; place-items:center; min-height:0; overflow:hidden; touch-action:none; }
.preview-transform { width:min(88vw,calc(78dvh * .8)); transform-origin:center; will-change:transform; }
.preview-transform .slide-stage { width:100%; max-height:none; box-shadow:none; pointer-events:none; }
.preview-modal > p { margin:0; padding:12px; color:rgba(255,255,255,.65); font-size:9px; text-align:center; }

.export-ready { text-align:center; }
.export-ready-mark { display:grid; place-items:center; width:54px; height:54px; margin:10px auto; border-radius:50%; background:#dfe9d7; color:#38522e; font-size:27px; }
.export-ready h3 { margin:8px 0; }
.export-ready > p { margin:0 auto 16px; max-width:310px; color:var(--muted); font-size:10px; line-height:1.45; }
.export-help-link { margin:12px auto 2px; }
.export-fallback { display:grid; gap:8px; margin-top:12px; padding:12px; border-radius:14px; background:#ebe7df; text-align:left; }
.export-fallback p { margin:0 0 4px; color:var(--muted); font-size:9px; line-height:1.45; }
.export-fallback strong { margin-top:6px; font-size:10px; }
.export-fallback > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }

@media (max-height:740px) {
  .editor-screen.has-sheet .stage-shell { width:min(calc(100vw - 84px),230px); }
  .sheet { max-height:52dvh; }
}