/* Studio — the artist's back room.  Builds on site.css tokens. */
body.studio { min-height: 100svh; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--surface); padding: 1px 6px; border: 1px solid var(--line); }
.err { color: #E07A5F; font-size: 14px; }

/* ----------------------------------------------------------------- login -- */
.login { display: grid; grid-template-columns: 1fr; min-height: 100svh; }
.login__art { position: relative; min-height: 34svh; overflow: hidden; background: #1F3A4D; }
.login__art svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drift 16s ease-in-out infinite alternate; }
.login__art svg * { transform-box: fill-box; transform-origin: center; }
.login__art .hud { position: absolute; left: 24px; bottom: 20px; color: #EDE6DA; }
@keyframes drift { from { transform: scale(1.1) translate(-1.5%, 1%); } to { transform: none; } }
@keyframes floatA { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-20px) rotate(2deg) } }
@keyframes floatB { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(24px) } }
@keyframes breathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.06) } }
.fa { animation: floatA 9s ease-in-out infinite; }
.fb { animation: floatB 12s ease-in-out infinite; }
.br { animation: breathe 10s ease-in-out infinite; }
.login__form {
  display: flex; flex-direction: column; gap: 28px;
  width: 100%; max-width: 420px; margin: 0 auto;
  padding-block: 48px;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
@media (min-width: 860px) {
  .login { grid-template-columns: 1fr 1fr; }
  .login__art { min-height: 100svh; }
  .login__form { justify-content: center; }
}

/* ------------------------------------------------------------------ form -- */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; border-radius: 0;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.field--color { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.field--color input[type=color] { width: 56px; min-height: 40px; padding: 2px; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.btn--sm { height: 40px; padding: 0 14px; font-size: 11px; }
.btn--danger { background: transparent; color: #E07A5F; border: 1px solid color-mix(in srgb, #E07A5F 50%, transparent); }
.btn--danger:hover { background: #E07A5F; color: #141414; border-color: transparent; opacity: 1; }

/* ------------------------------------------------------------------- app -- */
.app { min-height: 100svh; display: flex; flex-direction: column; }
.bar__status { display: flex; align-items: center; padding: 0 14px; color: var(--faint); border-left: 1px solid var(--line); white-space: nowrap; }
.bar__status[data-state="saving"] { color: var(--accent); }
.bar__status[data-state="error"] { color: #E07A5F; }
.app .bar__cta { display: flex; border: 0; cursor: pointer; }
.app .bar__item { display: none; }
@media (min-width: 640px) { .app .bar__item { display: flex; } }

.app__body { display: flex; flex-direction: column; flex: 1; }
.side {
  display: flex; gap: 4px; overflow-x: auto; align-items: center;
  padding: 8px max(12px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }
.side__label { display: none; color: var(--faint); margin: 20px 0 6px; }
.side__link, .side__add {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 14px; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; text-align: left;
  border-left: 2px solid transparent;
  transition: background-color .12s, color .12s;
}
.side__link:hover, .side__add:hover { color: var(--text); background: var(--surface); }
.side__link[aria-current="true"] { color: var(--text); background: var(--surface); border-left-color: var(--accent); }
.side__link small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); }
.side__link .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.side__link .dot.on { background: var(--accent); }
.side__add { color: var(--accent); }
#sideCollections { display: contents; }

.main {
  flex: 1; min-width: 0;
  padding-block: 28px 96px;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.main:focus { outline: none; }

@media (min-width: 900px) {
  .app__body { flex-direction: row; }
  .side {
    flex: 0 0 250px; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 20px 16px; border-bottom: 0; border-right: 1px solid var(--line);
    position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); overflow: auto;
  }
  .side__label { display: block; }
  .side__label:first-child { margin-top: 0; }
  .main { padding: 40px clamp(24px, 4vw, 64px) 120px; }
}

/* view header */
.vhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 28px; }
.vhead h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1; }
.vhead .sub { color: var(--muted); font-size: 14px; margin-top: 8px; }
.vhead__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.title-input {
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -.02em;
  border: 0; border-bottom: 1px dashed transparent; background: none; color: var(--text); padding: 0; width: 100%; min-width: 0;
}
.title-input:hover, .title-input:focus { border-bottom-color: var(--line-strong); outline: none; }

details.panelbox { border: 1px solid var(--line); margin-bottom: 28px; }
details.panelbox summary { cursor: pointer; padding: 14px 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
details.panelbox summary::-webkit-details-marker { display: none; }
details.panelbox[open] summary { border-bottom: 1px solid var(--line); color: var(--text); }
details.panelbox .inner { padding: 18px 16px; display: grid; gap: 18px; }

/* dropzone */
.drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 160px; padding: 28px 20px; margin-bottom: 28px;
  border: 1px dashed var(--line-strong); color: var(--muted); text-align: center;
  cursor: pointer; transition: border-color .2s, background-color .2s, color .2s;
}
.drop:hover, .drop.over { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.drop .display { font-size: clamp(28px, 4vw, 40px); color: var(--text); }
.drop svg { width: 28px; height: 28px; }
.drop .hud { color: var(--faint); }

/* frame-sequence box (Frames template) and the sequence helpers */
.drop--seq { border-color: var(--accent); margin-bottom: 12px; }
.drop--seq .display { font-size: clamp(26px, 3.6vw, 36px); }
.drop--seq code { font-family: inherit; color: var(--text); }
.seqbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 28px; }
.seqbar .small { flex: 1 1 320px; }

/* the frames window */
.sd { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 18px; padding: 26px; background: var(--surface); border: 1px solid var(--line); }
.sd h2.display { font-size: clamp(28px, 4vw, 36px); margin: 0 0 6px; }
.sd p { margin: 0; line-height: 1.5; }
.sd code { font-family: inherit; color: var(--text); }
.sd__drop { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border: 1px dashed var(--accent); text-align: center; cursor: pointer; color: var(--muted); transition: background-color .2s; }
.sd__drop:hover, .sd__drop:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sd__drop svg { width: 28px; height: 28px; color: var(--text); }
.sd__drop .display { font-size: clamp(22px, 3vw, 28px); color: var(--text); }
.sd__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.sd__preview { display: grid; gap: 8px; }
.sd__big { position: relative; aspect-ratio: 16 / 9; max-height: 340px; background: var(--bg); border: 1px solid var(--line); cursor: ew-resize; }
.sd__big img, .sd__big video { width: 100%; height: 100%; object-fit: contain; display: block; }
.sd__big .hud { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; background: var(--invert-bg); color: var(--invert-fg); }
.sd__strip { display: flex; gap: 2px; height: 48px; overflow: hidden; cursor: ew-resize; }
.sd__strip:empty { display: none; }
.sd__strip img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; opacity: .85; }
.sd__fields { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.sd select { font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); padding: 10px 12px; }
.sd__actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) { .sd { padding: 18px; } .sd__fields { grid-template-columns: 1fr; } }
.seqhint { margin: -16px 0 28px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.howto { display: grid; gap: 10px; padding: 18px 16px; border: 1px solid var(--line); margin-bottom: 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.howto ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.howto a { color: var(--accent); }
.card[data-kind="sequence"] .card__media { cursor: ew-resize; }
.dropveil {
  position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  outline: 2px dashed var(--accent); outline-offset: -24px; color: var(--text); pointer-events: none;
}
.dropveil .display { font-size: clamp(40px, 8vw, 96px); }
.dropveil .hud { color: var(--accent); }
body.dragging .dropveil { display: flex; }

/* works grid */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); gap: 20px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); background: var(--surface); padding: 10px;
  transition: transform .25s var(--ease), border-color .2s, opacity .2s;
}
.card[draggable="true"] { cursor: grab; }
.card.dragging { opacity: .4; }
.card.drop-before { box-shadow: -3px 0 0 var(--accent); }
.card.drop-after { box-shadow: 3px 0 0 var(--accent); }
.card__media { position: relative; aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; background: var(--bg); max-width: 100%; }
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; }
.card__badge { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; }
.card__badge span { padding: 3px 7px; background: var(--invert-bg); color: var(--invert-fg); }
.card__title { border: 0; border-bottom: 1px dashed transparent; background: none; color: var(--text); font: inherit; font-size: 14px; padding: 4px 0; width: 100%; min-width: 0; }
.card__title:hover, .card__title:focus { border-bottom-color: var(--line-strong); outline: none; }
.card__meta { margin: -6px 0 0; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__meta a { color: var(--muted); text-decoration: none; }
.card__meta a:hover { color: var(--text); text-decoration: underline; }
/* Button rows wrap instead of overflowing a narrow card; nothing inside a card may be wider than the card. */
.card__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; min-width: 0; }
.card__group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.card > *, .card__cap > *, .card__print > * { max-width: 100%; min-width: 0; }
.card__cap > div, .card__print > div { display: flex; flex-wrap: wrap; gap: 6px; }
.card__cap > div > input, .card__print > div > input { flex: 1 1 90px; min-width: 0; }
.card__row .ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; transition: background-color .12s, color .12s; }
.card__row .ic:hover { background: var(--invert-bg); color: var(--invert-fg); }
.card__row .ic[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.card__row .ic svg { width: 16px; height: 16px; }
.card__row .ic.danger:hover { background: #E07A5F; color: #141414; }
.card__print { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.card__print input { min-height: 40px; padding: 6px 10px; font-size: 13px; }
.card__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--line); }
.card__progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); transition: width .2s; }
.card.uploading .card__media::after { content: "Uploading…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.card.failed { border-color: #E07A5F; }
.empty { padding: 40px 0; color: var(--muted); }

/* settings view */
.settings { display: grid; gap: 28px; max-width: 760px; }
.settings h2 { font-size: 28px; margin-top: 12px; }
.covergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.covergrid button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.covergrid button img { width: 100%; height: 100%; object-fit: cover; }
.covergrid button[aria-pressed="true"] { border-color: var(--accent); }

/* ---------------------------------------------------------- frame editor -- */
.fe { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fe__panel { width: min(100%, 1100px); max-height: 100%; overflow: auto; display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); padding: 16px; }
.fe__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.fe__head h2 { font-size: 26px; }
.fe__head .muted { font-size: 13px; }
.fe__stage { display: grid; place-items: center; background: var(--bg); padding: 12px; min-height: 0; }
.fe__box {
  position: relative; overflow: hidden; container-type: size; cursor: grab; touch-action: none; user-select: none;
  background: var(--fe-bg, #1F3A4D); color: var(--fe-ink, #EDE6DA);
  width: min(100%, 880px); aspect-ratio: 16 / 9; max-height: 62vh;
}
.fe__box[data-device="phone"] { width: min(100%, 300px); aspect-ratio: 9 / 18.5; }
.fe__box.dragging { cursor: grabbing; }
.fe__box > img, .fe__box > video {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * var(--r, 1.5))); height: auto; max-width: none; aspect-ratio: var(--r, 1.5); object-fit: cover;
  transform: translate(calc(-50% + var(--tx, 0) * 1cqw), calc(-50% + var(--ty, 0) * 1cqh)) scale(calc(var(--z, 1) * 1.03));
  pointer-events: none;
}
.fe__scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--fe-bg) 55%, transparent), transparent 45%); opacity: .7; pointer-events: none; }
.fe__text { position: absolute; inset: 0; display: grid; pointer-events: none; }
.fe__text > div { display: flex; flex-direction: column; gap: 1.2cqw; padding: 7cqw 5cqw 6cqw; max-width: 60%; align-self: end; justify-self: start; }
.fe__text .hud { font-size: .85cqw; }
.fe__text .display { font-size: 12.2cqw; line-height: .9; }
.fe__text .ex { font-size: .85cqw; display: flex; align-items: center; gap: 1cqw; border-bottom: 1px solid currentColor; width: max-content; padding-bottom: .4cqw; }
.fe__box[data-device="phone"] .fe__text > div { max-width: 100%; align-self: end !important; justify-self: start !important; text-align: left !important; align-items: flex-start !important; padding: 0 6cqw 10cqw; }
.fe__box[data-device="phone"] .fe__text .hud, .fe__box[data-device="phone"] .fe__text .ex { font-size: 3cqw; }
.fe__box[data-device="phone"] .fe__text .display { font-size: 14.5cqw; }
.fe__box[data-corner="tr"] .fe__text > div { align-self: start; justify-self: end; text-align: right; align-items: flex-end; }
.fe__box[data-corner="cl"] .fe__text > div { align-self: center; }
.fe__box[data-corner="br"] .fe__text > div { justify-self: end; text-align: right; align-items: flex-end; }
.fe__box[data-corner="tl"] .fe__text > div { align-self: start; }
.fe__box[data-corner="cr"] .fe__text > div { align-self: center; justify-self: end; text-align: right; align-items: flex-end; }
.fe__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
/* the how-to guide, embedded */
.guide-frame { display: block; width: 100%; height: calc(100svh - var(--bar-h) - 150px); min-height: 560px; border: 1px solid var(--line); background: var(--bg); }
.vhead .sub a { color: var(--accent); }

/* design mode: live page preview + inspector */
.dz { display: flex; flex-direction: column; gap: 14px; height: calc(100svh - var(--bar-h) - 80px); min-height: 560px; }
.dz__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dz__title { color: var(--muted); margin-right: auto; }
.dz__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; flex: 1; min-height: 0; }
@media (max-width: 960px) { .dz { height: auto; } .dz__body { grid-template-columns: minmax(0, 1fr); } .dz__stage { min-height: 70svh; } }
.dz__panel > * { min-width: 0; max-width: 100%; }
.dz__stage { display: flex; justify-content: center; align-items: stretch; overflow: auto; border: 1px solid var(--line); background: var(--bg); }
.dz__frame { display: block; border: 0; width: 100%; height: 100%; background: #111; flex: none; }
.dz__stage[data-device="tablet"], .dz__stage[data-device="phone"] { padding: 18px; background: repeating-linear-gradient(45deg, var(--surface) 0 10px, var(--bg) 10px 20px); }
.dz__stage[data-device="tablet"] .dz__frame { width: 834px; max-width: 100%; }
.dz__stage[data-device="phone"] .dz__frame { width: 390px; max-width: 100%; border-radius: 22px; }
.dz__panel { overflow: auto; border: 1px solid var(--line); background: var(--surface); padding: 16px; display: grid; gap: 24px; align-content: start; }
.dz__sec { display: grid; gap: 12px; }
.dz__sec h3 { margin: 0; color: var(--accent); }
.dz__sec .field input, .dz__sec .field textarea, .dz__sec .field select { min-height: 40px; padding: 8px 10px; font-size: 14px; background: var(--bg); }
.dz__sec .field textarea { min-height: 96px; }
.dz__layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dz__layouts button { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border: 1px solid var(--line); background: none; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.dz__layouts button svg { width: 34px; height: 24px; fill: currentColor; }
.dz__layouts button:hover { color: var(--text); }
.dz__layouts button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: var(--bg); }
.dz__thumb { width: 88px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg); }
.dz__place { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); background: var(--bg); }
.dz__slider { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.dz__slider input[type=range] { width: 100%; accent-color: var(--accent); }
.dz__slider output { font-family: var(--font-mono); font-size: 11px; min-width: 5ch; text-align: right; color: var(--text); }
.dz__thumb img, .dz__thumb video { width: 100%; height: 100%; object-fit: cover; }
.dz__actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* the page builder: sections list, library cards, selected-section head */
.dz__secHead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dz__outline { display: grid; border: 1px solid var(--line); background: var(--bg); }
.dz__srow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: grab; }
.dz__srow:last-child { border-bottom: 0; }
.dz__srow[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.dz__srow.is-over { box-shadow: inset 0 3px 0 var(--accent); }
.dz__srow--end { grid-template-columns: 1fr; justify-items: center; padding: 10px; cursor: default; font-size: 12px; }
.dz__sicon svg { width: 30px; height: 22px; fill: var(--muted); display: block; }
.dz__sname { display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 4px 0; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; min-width: 0; }
.dz__sname small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz__sctl { display: flex; gap: 2px; }
.dz__sctl .ic { width: 26px; height: 26px; font-size: 10px; }
.dz__lib summary { cursor: pointer; padding: 10px 0; color: var(--text); list-style: none; }
.dz__lib summary::-webkit-details-marker { display: none; }
.dz__lib summary::before { content: "▸ "; color: var(--accent); }
.dz__lib[open] summary::before { content: "▾ "; }
.dz__insert { margin: 0 0 10px; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-left: 3px solid var(--accent); font-size: 13px; }
.dz__group { margin: 12px 0 6px; color: var(--muted); }
.dz__cards { display: grid; gap: 4px; }
.dz__card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: grab; }
.dz__card:hover { border-color: var(--accent); }
.dz__card:active { cursor: grabbing; }
.dz__card svg { width: 40px; height: 28px; fill: var(--muted); }
.dz__card span { display: grid; gap: 2px; min-width: 0; }
.dz__card strong { font-size: 13px; font-weight: 500; }
.dz__card small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.dz__selhead { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.dz__selhead svg { width: 44px; height: 30px; fill: var(--muted); }
.dz__selhead h3 { margin: 0 0 4px; }
.dz__selhead p { margin: 0; }
.dz__works { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)) !important; }
.field--color span .linkbtn { margin-left: 6px; font-size: 11px; }
.toast__undo { margin-left: 12px; padding: 4px 10px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; }
.dz__adv summary { cursor: pointer; color: var(--muted); list-style: none; padding: 4px 0; }
.dz__adv summary::-webkit-details-marker { display: none; }
.dz__adv summary::before { content: "▸ "; color: var(--accent); }
.dz__adv[open] summary::before { content: "▾ "; }
.dz__adv .grid2 { margin-top: 8px; }
.pick__group { grid-column: 1 / -1; margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); }
.nc__layouts--recipes { max-height: none; }

/* facts editor (label / value rows) */
.facts { display: grid; gap: 8px; }
.facts__label { font-size: 13px; color: var(--muted); }
.facts__rows { display: grid; gap: 6px; }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 36px; gap: 6px; align-items: center; }
.facts__row input { min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 14px; background: var(--bg); color: var(--text); border: 1px solid var(--line); font: inherit; }
.facts__row input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.facts .ic { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.facts .ic:hover { background: #E07A5F; color: #141414; border-color: transparent; }
.facts [data-fadd] { width: max-content; }
@media (max-width: 480px) { .facts__row { grid-template-columns: minmax(0, 1fr) 36px; } .facts__row input[data-fv] { grid-column: 1 / -1; } }

.dz__order { display: grid; }
.dz__orow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dz__orow .ic { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.dz__orow .ic svg { width: 14px; height: 14px; }
.dz__orow .ic:disabled { opacity: .3; cursor: default; }
.dz .covergrid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
@media (max-width: 1100px) { .dz { height: auto; } .dz__body { grid-template-columns: 1fr; } .dz__stage { height: 70svh; } }

/* new-collection template gallery */
.nc__layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; max-height: 46vh; overflow: auto; padding: 2px; }
.nc__layout { position: relative; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 13px; }
.nc__layout input { position: absolute; opacity: 0; pointer-events: none; }
.nc__layout svg { width: 48px; height: 34px; fill: var(--muted); }
.nc__layout strong { font-weight: 500; }
.nc__layout small { color: var(--muted); line-height: 1.4; }
.nc__layout a { color: var(--accent); text-decoration: none; margin-top: 2px; }
.nc__layout:hover { border-color: var(--line-strong); }
.nc__layout:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.nc__layout:has(input:checked) svg { fill: var(--accent); }

/* focal point editor */
.fo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 760px) { .fo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.fo__pick { position: relative; background: var(--bg); display: grid; place-items: center; padding: 12px; cursor: crosshair; touch-action: none; user-select: none; }
.fo__pick img { display: block; max-width: 100%; max-height: 56vh; width: auto; height: auto; pointer-events: none; }
.fo__mark { position: absolute; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.35); translate: -50% -50%; pointer-events: none; }
.fo__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; background: #fff; border-radius: 50%; translate: -50% -50%; }
.fo__previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; align-content: start; }
.fo__previews figure { margin: 0; display: grid; gap: 6px; }
.fo__previews figcaption { color: var(--muted); }
.fo__crop { overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.fo__crop img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* orders */
.orders { display: grid; gap: 2px; }
.order { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; }
@media (max-width: 800px) { .order { grid-template-columns: 1fr 1fr; } }

/* template picker */
.pick { position: relative; }
.pick > summary { list-style: none; display: inline-flex; }
.pick > summary::-webkit-details-marker { display: none; }
.pick__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: min(380px, calc(100vw - 40px)); display: grid; gap: 2px; padding: 6px;
  max-height: min(70vh, 640px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pick__menu button {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center;
  padding: 10px 12px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit;
  border-left: 2px solid transparent;
}
.pick__menu button:hover { background: var(--bg); }
.pick__menu button[aria-pressed="true"] { border-left-color: var(--accent); background: var(--bg); }
.pick__menu svg { width: 48px; height: 34px; fill: var(--muted); }
.pick__menu button[aria-pressed="true"] svg { fill: var(--accent); }
.pick__menu strong { display: block; font-weight: 500; font-size: 14px; }
.pick__menu small { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; background: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-fg); }
.card__cap { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.card__cap input, .card__cap select { min-height: 38px; padding: 6px 10px; font-size: 13px; }
.card__cap textarea { min-height: 84px; font-size: 13px; padding: 8px 10px; }
.card__cap input[type=color] { width: 44px; min-height: 38px; padding: 2px; flex: none; }
.card__cap select { flex: 1; min-width: 0; }
.fe__zoom { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; }
.fe__zoom input[type=range] { flex: 1; accent-color: var(--accent); }
.fe__zoom output { font-family: var(--font-mono); font-size: 12px; min-width: 4ch; color: var(--muted); }
.fe__actions { display: flex; gap: 8px; margin-left: auto; }
.fe__hint { font-size: 13px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; padding: 12px 18px; background: var(--invert-bg); color: var(--invert-fg); font-size: 14px; box-shadow: var(--shadow); display: none; max-width: calc(100vw - 32px); }
.toast[data-show="true"] { display: block; }

@media (prefers-reduced-motion: reduce) { .login__art svg, .fa, .fb, .br { animation: none; } }