/* DESIGN_EDITOR_V2: the design editor chrome, themed from DESIGN.md through the app's variables (paper surfaces,
   hairlines, ink, one cyan accent). Dense where the client works, quiet everywhere else. */
.ded { --ded-line: var(--line, #E7E0D2); --ded-paper: var(--surface, #fff); --ded-ink: var(--ink, #14151A); --ded-muted: var(--muted, #6B6356); --ded-accent: var(--accent, #06B6D4); --ded-accent-strong: var(--accent-strong, #0596B0); --ded-soft: var(--accent-soft, rgba(6,182,212,0.12)); border: 1px solid var(--ded-line); border-radius: 16px; background: var(--ded-paper); display: flex; flex-direction: column; min-width: 0; position: relative; outline: none; }
.ded:focus-within { box-shadow: 0 0 0 3px var(--ded-soft); }
.ded__top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--ded-line); flex-wrap: wrap; }
.ded__group { display: flex; align-items: center; gap: 4px; padding-right: 10px; border-right: 1px solid var(--ded-line); }
.ded__group:last-of-type, .ded__group--end { border-right: 0; margin-left: auto; padding-right: 0; }
.ded__btn { font: inherit; font-size: 0.85rem; line-height: 1; color: var(--ded-ink); background: var(--ded-paper); border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; min-height: 36px; cursor: pointer; white-space: nowrap; }
.ded__btn:hover { border-color: var(--ded-line); color: var(--ded-accent-strong); }
.ded__btn:disabled { opacity: 0.45; cursor: default; }
.ded__btn.is-on { background: var(--ded-soft); color: var(--ded-ink); border-color: transparent; }
.ded__btn--icon { min-width: 36px; padding: 8px; }
.ded__btn--danger:hover { color: var(--danger, #DC2626); }
.ded__btn--mini { min-height: 28px; padding: 4px 6px; font-size: 0.75rem; }
.ded__zoom { font-size: 0.8rem; color: var(--ded-muted); min-width: 44px; text-align: center; }
.ded__menu { position: relative; }
.ded__menulist { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: var(--ded-paper); border: 1px solid var(--ded-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,21,26,0.10); padding: 6px; min-width: 190px; flex-direction: column; }
.ded__menu.is-open .ded__menulist { display: flex; }
.ded__menuitem { font: inherit; font-size: 0.85rem; text-align: left; color: var(--ded-ink); background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.ded__menuitem:hover { background: var(--ded-soft); color: var(--ded-ink); }
.ded__more, .ded__paneltoggle { display: none; }
.ded__main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; }
.ded__stagewrap { position: relative; min-width: 0; background: var(--bg-soft, #EFE8DB); border-bottom-left-radius: 0; }
.ded__stage { position: relative; width: 100%; overflow: hidden; touch-action: none; cursor: default; }
.ded__stage.is-pan, .ded__stage.is-pan canvas { cursor: grab; }
.ded__stage canvas { display: block; }
.ded__ctx { position: absolute; z-index: 20; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 8px); background: var(--ded-paper); border: 1px solid var(--ded-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(20,21,26,0.12); padding: 6px; }
.ded__ctx .ded__btn { min-height: 32px; padding: 6px 8px; font-size: 0.8rem; }
.ded__select, .ded__num { font: inherit; font-size: 0.8rem; color: var(--ded-ink); background: var(--ded-paper); border: 1px solid var(--ded-line); border-radius: 8px; padding: 5px 6px; min-height: 32px; }
.ded__select { max-width: 150px; }
.ded__num { width: 64px; }
.ded__field { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.ded__fieldlabel { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ded-muted); }
.ded__swatches { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ded__swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ded-line); cursor: pointer; padding: 0; }
.ded__swatch.is-on { box-shadow: 0 0 0 2px var(--ded-accent); }
.ded__colour { width: 28px; height: 24px; border: 0; background: none; padding: 0; cursor: pointer; }
.ded__side { border-left: 1px solid var(--ded-line); min-width: 0; display: flex; flex-direction: column; background: var(--ded-paper); }
.ded__tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--ded-line); overflow-x: auto; }
.ded__tab { font: inherit; font-size: 0.8rem; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; color: var(--ded-muted); cursor: pointer; white-space: nowrap; }
.ded__tab.is-on { color: var(--ded-ink); font-weight: 700; border-bottom-color: var(--ded-accent); }
.ded__sidebody { padding: 10px; overflow: auto; max-height: 70vh; font-size: 0.9rem; }
.ded__props .ded__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ded__row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ded__words { width: 100%; min-height: 70px; }
.ded__layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ded__layer { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; border: 1px solid transparent; }
.ded__layer.is-on { background: var(--ded-soft); }
.ded__layer.is-over { border-color: var(--ded-accent); }
.ded__layer.is-dragging { opacity: 0.5; }
.ded__layer--plate { color: var(--ded-muted); }
.ded__layername { flex: 1; min-width: 0; font: inherit; font-size: 0.82rem; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px; }
.ded__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--ded-line); min-height: 38px; }
.ded__status { color: var(--ded-muted); }
.ded__verdict--ok { color: #0b6a4a; }
.ded__verdict--warn { color: #8a4b00; background: #fff4e5; border-radius: 8px; padding: 4px 8px; }
.ded__preview { padding: 10px 12px; border-top: 1px solid var(--ded-line); }
.ded__preview img { max-width: 100%; display: block; border-radius: 10px; border: 1px solid var(--ded-line); }
.ded__panel-list { display: flex; flex-direction: column; gap: 6px; }
.ded__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.ded__tile { border: 2px solid transparent; border-radius: 8px; padding: 0; background: var(--bg-soft, #EFE8DB); cursor: pointer; overflow: hidden; aspect-ratio: 1; }
.ded__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ded__tile.is-on { border-color: var(--ded-accent); }
/* Compact mode: the card preview. */
.ded--compact .ded__main { grid-template-columns: 1fr; }
.ded--compact .ded__side { display: none; }
.ded--compact .ded__group--add, .ded--compact .ded__group:nth-child(4) { display: none; }
.ded--compact .ded__stage { max-height: 320px; }
/* Mobile: the toolbar collapses to the essentials with a More toggle; the panels become a sheet. */
@media (max-width: 760px) {
  .ded__main { grid-template-columns: 1fr; }
  .ded__side { display: none; border-left: 0; border-top: 1px solid var(--ded-line); }
  .ded--side-open .ded__side { display: flex; }
  .ded__top { gap: 6px; padding: 6px; }
  .ded__group { border-right: 0; padding-right: 0; }
  .ded__group--add, .ded__group:nth-child(4) { display: none; width: 100%; flex-wrap: wrap; }
  .ded--tools-open .ded__group--add, .ded--tools-open .ded__group:nth-child(4) { display: flex; }
  .ded__more, .ded__paneltoggle { display: inline-block; }
  /* The contextual toolbar docks above the canvas so it never covers the selection's handles. */
  .ded__ctx { position: static; max-width: 100%; border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; border-top: 0; overflow-x: auto; flex-wrap: nowrap; }
  .ded__stagewrap { display: flex; flex-direction: column; }
  .ded__ctx { order: 2; border-top: 1px solid var(--ded-line); border-bottom: 0; }
  .ded__sidebody { max-height: 45vh; }
}
/* The full editor page. */
.editor-page { padding: 16px; }
.editor-page__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.editor-page .ded__stage { min-height: 420px; }

/* BRAND_PANELS_V1 */
.ded__swatches--big .ded__swatch { width: 28px; height: 28px; }
.ded__fontbtn { text-align: left; font-size: 1rem; }
.ded__tiles--logos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.ded__logotile { display: flex; flex-direction: column; gap: 4px; align-items: stretch; border: 1px solid var(--ded-line); border-radius: 10px; padding: 6px; background: var(--ded-paper); }
.ded__logotile img { width: 100%; height: 48px; object-fit: contain; background: repeating-conic-gradient(#f1ede4 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; }
.ded__role { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ded-muted); }
.ded__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ded__chip { border-radius: 999px; border: 1px solid var(--ded-line); padding: 4px 10px; min-height: 30px; font-size: 0.78rem; }
.ded__chip.is-on { background: var(--ded-soft); border-color: transparent; color: var(--ded-ink); }
.ded__idea { border: 1px solid var(--ded-line); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ded__tiles--wide { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ded__tile--tpl { aspect-ratio: auto; display: flex; flex-direction: column; }
.ded__tile--tpl img { aspect-ratio: 16 / 10; }
.ded__tilelabel { display: block; padding: 4px; color: var(--ded-ink); text-align: left; }
.ded__ai { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ded-line); display: flex; flex-direction: column; gap: 6px; }
.ded__brief { font-size: 0.85rem; }
.ded__option { font: inherit; font-size: 0.85rem; text-align: left; display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--ded-line); border-radius: 10px; padding: 8px; background: var(--ded-paper); cursor: pointer; color: var(--ded-ink); }
.ded__option:hover { border-color: var(--ded-accent); }
.ded__optionkey { font-weight: 700; color: var(--ded-accent-strong); }
.ded__maskcanvas { position: absolute; left: 0; top: 0; z-index: 25; cursor: crosshair; touch-action: none; }
.ded__maskbar { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--ded-line); background: var(--ded-paper); }

/* TEMPLATES_V3 */
.ded__previewgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.ded__sizecard { display: flex; flex-direction: column; gap: 4px; color: var(--ded-ink); text-decoration: none; }
.ded__sizecard img { width: 100%; border: 1px solid var(--ded-line); border-radius: 8px; background: var(--bg-soft, #EFE8DB); }
.ded__video { max-width: 100%; border-radius: 10px; border: 1px solid var(--ded-line); grid-column: 1 / -1; }
.ded--compact .ded__group--tpl { display: none; }

/* EDITOR_SIMPLE_V1: the simple view. Nothing from advanced mode shows: no toolbar, no side panels, no foot, no guides. */
.ded--simple .ded__top, .ded--simple .ded__side, .ded--simple .ded__foot, .ded--simple .ded__more, .ded--simple .ded__paneltoggle { display: none !important; }
.ded--simple .ded__main { grid-template-columns: 1fr; }
.ded--simple .ded__stage { max-height: none; }
.ded__simplebar, .ded__adapt, .ded__review, .ded__strip, .ded__director { display: none; }
.ded--simple .ded__director { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; border-top: 1px solid var(--ded-line); }
.ded--simple .ded__director[hidden] { display: none; }
.ded__dirform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ded__dirform .input { flex: 1 1 240px; min-width: 0; min-height: 44px; }
.ded__dirbtn { min-height: 44px; }
.ded__dirdiff { margin-left: auto; }
.ded--simple .ded__simplebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--ded-line); }
.ded__simplestatus { color: var(--ded-muted); flex: 1 1 160px; min-width: 0; }
.ded__simpleend { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ded--simple .ded__strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 10px; border-top: 1px solid var(--ded-line); scrollbar-width: thin; }
.ded__striplead { color: var(--ded-muted); flex: 0 0 auto; max-width: 150px; line-height: 1.25; }
.ded__striptile { flex: 0 0 auto; width: 72px; height: 54px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--bg-soft, #EFE8DB); padding: 0; cursor: grab; }
.ded__striptile:hover, .ded__striptile:focus-visible { border-color: var(--ded-accent); }
/* Run AB (AB2): the photograph that is on the design reads as in use in the strip and the Photos panel */
.ded__striptile.is-inuse, .ded__v3photo.is-inuse { border-color: var(--ded-accent); box-shadow: 0 0 0 2px var(--ded-accent) inset, 0 0 0 3px #fff; position: relative; }
.ded__striptile.is-inuse::after, .ded__v3photo.is-inuse::after { content: 'In use'; position: absolute; left: 4px; bottom: 4px; font: 700 10px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.04em; color: #14151A; background: var(--ded-accent); border-radius: 6px; padding: 3px 6px; pointer-events: none; }
.ded__striptile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ded__stage.is-drop { outline: 3px dashed var(--ded-accent); outline-offset: -3px; }
.ded--simple .ded__adapt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-top: 1px solid var(--ded-line); }
.ded--simple .ded__adapt[hidden] { display: none; }
.ded__adapt .input { flex: 1 1 220px; min-width: 0; }
.ded--simple .ded__review { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; background: var(--ded-soft); border-top: 1px solid var(--ded-line); }
.ded--simple .ded__review[hidden] { display: none; }
.ded__logopick { border: 1px solid var(--ded-line); border-radius: 12px; background: #fff; padding: 4px 6px; cursor: pointer; }
.ded__logopick img { height: 26px; width: auto; display: block; }
.ded--simple .ded__ctx { gap: 6px; }
.ded__btn--done { font-weight: 700; color: var(--ded-accent-strong); }
/* The Change this photo box is a duplicate once a design is being re used in the builder. */
[data-create-form="poster"][data-remix="1"] .imgfield-edit { display: none !important; }
[data-ed-adapt-row] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
/* The strip must never widen its parent: zero intrinsic width, full available width. */
.ded--simple .ded__strip { width: 0; min-width: 100%; box-sizing: border-box; }
.ded { min-width: 0; }

/* Primary actions inside the editor read as primary. */
.ded .ded__btn.btn--primary { background: var(--accent, #06B6D4); color: var(--ink, #14151A); border-color: transparent; font-weight: 700; }
.ded .ded__btn.btn--primary:hover { color: var(--ink, #14151A); filter: brightness(0.95); }

/* Targets in the simple view meet the 36 pixel floor. */
.ded--simple .ded__strip .ded__btn--mini { min-height: 36px; padding: 6px 10px; }
.img-edit__more > summary { padding: 8px 0; min-height: 36px; display: flex; align-items: center; cursor: pointer; }
.img-edit__more .chip { min-height: 32px; }

/* LINE_NUDGE_V1: one tap nudges for the selected line */
.ded__nudges { display: flex; flex-wrap: wrap; gap: 6px; }
.ded__nudges .ded__btn--mini { min-height: 36px; }
/* N4: adding on a tap in simple mode */
.ded__ctx--add { flex-direction: column; align-items: stretch; gap: 8px; max-width: min(420px, calc(100% - 8px)); }
.ded__ctx--add .ded__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ded__ctx--add .ded__btn { min-height: 40px; }
.ded__icons { max-height: 168px; overflow: auto; }
.ded__iconbtn { width: 40px; height: 40px; border: 1px solid var(--ded-line); border-radius: 12px; background: var(--ded-paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ded-ink, #14151a); }
.ded__iconbtn svg { width: 22px; height: 22px; }
.ded__iconbtn:hover { border-color: #06B6D4; }
.ded__iconsearch { min-height: 36px; flex: 1 1 120px; }

/* DESIGN_EDITOR_V3 (Run Y, Y2): the Canva style layout. Rail and panel on the left, the contextual bar docked above the canvas,
   page settings and layers on the right; on a phone the editor fills the screen, the rail is the bottom tabs and panels open as
   sheets. Chrome stays cream, paper, ink and one cyan; every control is 44px on a phone. */
.ded--v3 { --ded-rail: 68px; --ded-panel: 300px; --ded-right: 236px; --ded-kb: 0px; }
.ded--v3 .ded__v3top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--ded-line); flex-wrap: wrap; }
.ded__v3group { display: flex; align-items: center; gap: 4px; padding-right: 10px; border-right: 1px solid var(--ded-line); }
.ded__v3group--end { border-right: 0; margin-left: auto; padding-right: 0; }
.ded__v3pagebtn { display: none; }
.ded--v3 .ded__main { display: grid; grid-template-columns: var(--ded-rail) minmax(0, 1fr) var(--ded-right); min-height: 0; }
.ded--v3.ded--panel-open .ded__main { grid-template-columns: var(--ded-rail) var(--ded-panel) minmax(0, 1fr) var(--ded-right); }
.ded__rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-right: 1px solid var(--ded-line); background: var(--ded-paper); }
.ded__railbtn { font: inherit; font-size: 0.72rem; line-height: 1.1; color: var(--ded-ink); background: none; border: 1px solid transparent; border-radius: 12px; padding: 8px 2px; min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.ded__railbtn:hover { border-color: var(--ded-line); color: var(--ded-accent-strong); }
.ded__railbtn.is-on { background: var(--ded-soft); color: var(--ded-ink); }
.ded__railbtn svg { display: block; }
.ded__panel { border-right: 1px solid var(--ded-line); background: var(--ded-paper); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ded__panel[hidden] { display: none; }
.ded__panelhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--ded-line); }
.ded__paneltitle { font-size: 0.95rem; }
.ded__panelbody { padding: 10px 12px; overflow: auto; max-height: 74vh; font-size: 0.9rem; display: flex; flex-direction: column; gap: 8px; }
.ded__panelbody > strong.small { margin-top: 6px; color: var(--ded-muted); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.7rem; }
.ded__right { border-left: 1px solid var(--ded-line); background: var(--ded-paper); display: flex; flex-direction: column; min-width: 0; overflow: auto; max-height: 78vh; }
.ded__rightsec { padding: 10px 12px; border-bottom: 1px solid var(--ded-line); display: flex; flex-direction: column; gap: 6px; }
.ded__rightttl { font-size: 0.85rem; }
.ded__v3shapes { display: flex; flex-wrap: wrap; gap: 4px; }
.ded__v3shape.is-on { background: var(--ded-soft); border-color: transparent; font-weight: 700; }
.ded--v3 .ded__stagewrap { display: flex; flex-direction: column; min-width: 0; }
.ded--v3 .ded__ctx--v3 { position: static; order: 0; max-width: 100%; border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--ded-line); background: var(--ded-paper); padding: 6px 10px; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 46px; }
.ded--v3 .ded__ctx--v3[hidden] { display: none; }
/* Run Z (Z1): on a desktop the contextual bar is one row of a fixed height that scrolls sideways when crowded, so the canvas never
   moves under the pointer when the selection changes (a Shift click landed on the wrong object when the bar grew a second row). */
.ded--v3:not(.ded--v3mobile) .ded__ctx--v3 { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; height: 50px; min-height: 50px; max-height: 50px; scrollbar-width: thin; }
.ded--v3:not(.ded--v3mobile) .ded__ctx--v3 > * { flex: 0 0 auto; }
.ded--v3 .ded__ctx--v3 .ded__btn { min-height: 34px; }
.ded__v3what { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ded-muted); margin-right: 4px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ded__v3hint { padding: 4px 2px; }
.ded__v3size, .ded__v3align { display: inline-flex; align-items: center; gap: 2px; }
.ded__v3pop { position: relative; }
.ded__v3poplist { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; background: var(--ded-paper); border: 1px solid var(--ded-line); border-radius: 12px; box-shadow: 0 8px 24px -14px rgba(16, 24, 40, 0.12), 0 1px 2px rgba(16, 24, 40, 0.03); padding: 10px; min-width: 240px; flex-direction: column; gap: 8px; }
.ded__v3pop.is-open .ded__v3poplist { display: flex; }
.ded__v3pop.is-open .ded__v3popbtn { background: var(--ded-soft); }
.ded__v3slider { display: flex; flex-direction: column; gap: 2px; }
.ded__v3slider input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--ded-accent); }
.ded--v3 .ded__stage { flex: 1 1 auto; }
.ded--v3 .ded__side, .ded--v3 .ded__top { display: none !important; }
.ded__v3textbtns { display: flex; flex-direction: column; gap: 6px; }
.ded__v3textbtn { font: inherit; text-align: left; color: var(--ded-ink); background: var(--bg-soft, #EFE8DB); border: 1px solid transparent; border-radius: 12px; padding: 12px; min-height: 44px; cursor: pointer; }
.ded__v3textbtn:hover { border-color: var(--ded-line); }
.ded__v3t--h { font-size: 1.35rem; font-weight: 700; }
.ded__v3t--s { font-size: 1.05rem; font-weight: 600; }
.ded__v3t--b { font-size: 0.9rem; }
.ded__v3presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ded__v3preset { font: inherit; color: var(--ded-ink); background: var(--ded-paper); border: 1px solid var(--ded-line); border-radius: 12px; padding: 10px; min-height: 52px; cursor: pointer; }
.ded__v3preset--kicker { font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 700; color: var(--ded-accent-strong); }
.ded__v3preset--number { font-size: 1.6rem; font-weight: 800; }
.ded__v3preset--quote { font-style: italic; }
.ded__v3preset--caption { font-size: 0.8rem; color: var(--ded-muted); }
.ded__v3els { gap: 6px; }
.ded__v3el { min-height: 40px; border: 1px solid var(--ded-line); border-radius: 12px; }
.ded__v3el.is-on { background: var(--ded-soft); border-color: transparent; font-weight: 700; }
.ded__v3search { min-height: 40px; flex: 1 1 140px; }
.ded__v3photos .ded__tile { cursor: grab; }
.ded__v3tpls .ded__tile--tpl img { aspect-ratio: 16 / 10; object-fit: cover; }
.ded__v3tpl { cursor: grab; }
.ded__fontbtn.is-on { background: var(--ded-soft); }
.ded__stage--tr-fade canvas { animation: ded-tr-fade .6s ease-out; }
.ded__stage--tr-slide canvas { animation: ded-tr-slide .6s ease-out; }
.ded__stage--tr-wipe canvas { animation: ded-tr-wipe .6s ease-out; }
@keyframes ded-tr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ded-tr-slide { from { transform: translateX(6%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ded-tr-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .ded__stage--tr-fade canvas, .ded__stage--tr-slide canvas, .ded__stage--tr-wipe canvas { animation: none; } }
/* A phone: the editor fills the screen; canvas on top, the contextual bar above the keyboard, the rail as bottom tabs; panels are sheets. */
@media (max-width: 760px) {
  .ded--v3.ded--v3mobile { position: fixed; inset: 0; z-index: 130; border: 0; border-radius: 0; display: flex; flex-direction: column; background: var(--ded-paper); }
  body.ded-fullscreen { overflow: hidden; }
  .ded--v3mobile .ded__v3top { flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; padding-top: calc(6px + env(safe-area-inset-top)); }
  .ded--v3mobile .ded__v3group--zoom { display: none; }
  .ded--v3mobile .ded__v3pagebtn { display: inline-block; }
  .ded--v3mobile .ded__v3top .ded__btn { min-height: 44px; }
  .ded--v3mobile .ded__main, .ded--v3mobile.ded--panel-open .ded__main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; grid-template-columns: none; }
  .ded--v3mobile .ded__right { display: none; }
  .ded--v3mobile .ded__stagewrap { flex: 1 1 auto; min-height: 0; order: 1; display: flex; flex-direction: column-reverse; }
  .ded--v3mobile .ded__stage { flex: 1 1 auto; min-height: 0; }
  .ded--v3mobile .ded__ctx--v3 { order: 0; flex-wrap: nowrap; overflow-x: auto; border-bottom: 0; border-top: 1px solid var(--ded-line); padding: 6px 8px; margin-bottom: var(--ded-kb); scrollbar-width: thin; }
  .ded--v3mobile .ded__ctx--v3 .ded__btn, .ded--v3mobile .ded__ctx--v3 .ded__select, .ded--v3mobile .ded__ctx--v3 .ded__num { min-height: 44px; }
  .ded--v3mobile .ded__v3what { display: none; }
  .ded--v3mobile .ded__v3poplist { position: fixed; left: 8px; right: 8px; bottom: calc(76px + var(--ded-kb) + env(safe-area-inset-bottom)); top: auto; min-width: 0; }
  .ded--v3mobile .ded__rail { order: 3; flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--ded-line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow-x: auto; }
  .ded--v3mobile .ded__railbtn { min-height: 56px; min-width: 52px; flex: 1 1 0; padding: 6px 0; }
  .ded--v3mobile .ded__railbtn[data-v3-panel="uploads"] { display: none; }
  .ded--v3mobile .ded__panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; order: 2; max-height: 62vh; border: 1px solid var(--ded-line); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 8px 24px -14px rgba(16, 24, 40, 0.12); padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .ded--v3mobile .ded__panelbody { max-height: none; flex: 1 1 auto; }
  .ded--v3mobile .ded__panelclose { min-width: 44px; min-height: 44px; }
  .ded--v3mobile .ded__foot, .ded--v3mobile .ded__preview, .ded--v3mobile .ded__simplebar, .ded--v3mobile .ded__strip, .ded--v3mobile .ded__director, .ded--v3mobile .ded__adapt, .ded--v3mobile .ded__review { display: none !important; }
  .ded--v3mobile .ded__v3el, .ded--v3mobile .ded__v3preset, .ded--v3mobile .ded__tile, .ded--v3mobile .ded__chip, .ded--v3mobile .ded__fontbtn, .ded--v3mobile .ded__iconbtn, .ded--v3mobile .ded__swatch { min-height: 44px; }
  .ded--v3mobile .ded__swatch { min-width: 36px; width: 36px; height: 36px; }
  .ded--v3mobile .ded__iconbtn { width: 44px; height: 44px; }
}
.ded__v3placeholder { min-height: 120px; border: 1px dashed var(--line, #E7E0D2); border-radius: 16px; }
@media (max-width: 760px) {
  .ded--v3mobile .ded__panel button, .ded--v3mobile .ded__panel input, .ded--v3mobile .ded__panel select, .ded--v3mobile .ded__panel .ded__btn--mini, .ded--v3mobile .ded__panel .btn--sm { min-height: 44px; }
  .ded--v3mobile .ded__panel .ded__swatch { width: 44px; height: 44px; min-width: 44px; }
  .ded--v3mobile .ded__panel input[type="range"] { min-height: 44px; }
}