:root {
  --custom-panel: rgba(9, 10, 11, 0.72);
}

.custom-main {
  width: 100%;
  min-height: 100svh;
  padding: clamp(7rem, 9vw, 9rem) clamp(1rem, 3vw, 3rem) 4rem;
  overflow-x: hidden;
}
.preset-admin[hidden] { display:none!important; }

.custom-intro {
  max-width: 62rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2.5rem);
}
.preset-admin { display:grid; grid-template-columns:minmax(280px,1.2fr) minmax(260px,.8fr); gap:1rem; align-items:end; margin-bottom:2rem; padding:1.25rem; border:1px solid #9564d8; background:rgba(105,68,156,.14); }
.preset-admin h2 { max-width:none; margin:.25rem 0; font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.1; letter-spacing:-.025em; }
.preset-admin p { margin:.25rem 0; }
.preset-admin button { min-height:2.9rem; padding:.8rem 1rem; border:1px solid #9564d8; color:#fff; background:#69449c; font-size:.9rem; font-weight:800; }
.preset-check { display:flex; gap:.5rem; align-items:center; font-size:.82rem; }
.preset-admin button,.preset-admin [role=status] { grid-column:1/-1; }
.preset-admin [role=status] { color:var(--blue); }
.preset-library { grid-column:1/-1; min-width:0; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.14); }
.preset-library > header { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:.55rem; }
.preset-library h3 { margin:0; color:#fff; font-size:1rem; }
.preset-library p { margin:.12rem 0 0; color:var(--muted); font-size:.72rem; }
.preset-library > header > strong { flex:none; color:rgba(255,255,255,.72); font-size:.72rem; }
.preset-library-grid { display:flex; gap:.55rem; padding-bottom:.35rem; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.preset-card { display:grid; grid-template-columns:minmax(0,1fr); flex:0 0 225px; min-width:0; overflow:hidden; border:1px solid var(--line); background:rgba(0,0,0,.25); text-align:left; }
.preset-card:hover,.preset-card.is-active { border-color:#b68bea!important; background:rgba(105,68,156,.25)!important; }
.preset-card-load { display:grid; grid-template-columns:92px minmax(0,1fr); width:100%; min-height:68px!important; padding:0!important; border:0!important; background:transparent!important; text-align:left; }
.preset-card-preview { position:relative; min-height:68px; overflow:hidden; background:#030303; }
.preset-card-preview canvas { width:100%; height:100%; object-fit:cover; }
.preset-card-preview span { position:absolute; right:.25rem; bottom:.25rem; padding:.14rem .25rem; color:#fff; background:rgba(0,0,0,.78); font-size:.57rem; font-variant-numeric:tabular-nums; }
.preset-card-copy { align-content:center; display:grid; gap:.15rem; padding:.45rem .55rem; }
.preset-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; }
.preset-card-copy small { overflow:hidden; color:var(--muted); font-size:.61rem; text-overflow:ellipsis; white-space:nowrap; }
.preset-card-actions { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.preset-card-actions button { grid-column:auto!important; min-height:1.9rem!important; padding:.3rem .4rem!important; border:0!important; background:rgba(105,68,156,.35)!important; font-size:.62rem!important; }
.preset-card-actions button + button { border-left:1px solid var(--line)!important; }
.preset-card-actions button:disabled { cursor:not-allowed; opacity:.38; }
.preset-card-actions .preset-card-remove { color:#ffb5b5; background:rgba(126,35,35,.2)!important; }
.preset-library-empty { margin:0; padding:1rem; border:1px dashed var(--line); color:var(--muted); font-size:.82rem; }
.customer-presets { display:grid; gap:.55rem; margin:.8rem 0 1rem; padding:.75rem; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.customer-presets[hidden] { display:none!important; }
.customer-presets > header { display:flex; justify-content:space-between; gap:1rem; align-items:end; }
.customer-presets > header strong { display:block; color:#fff; font-size:.84rem; }
.customer-presets > header span { display:block; margin-top:.12rem; color:var(--muted); font-size:.68rem; line-height:1.4; }
.customer-presets > header small { flex:none; color:var(--muted); font-size:.68rem; }
.customer-presets-grid { display:flex; gap:.55rem; padding-bottom:.25rem; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; }
.customer-preset-card { display:grid; grid-template-columns:82px minmax(0,1fr); flex:0 0 205px; min-height:62px; padding:0; overflow:hidden; border:1px solid var(--line); color:#fff; background:rgba(0,0,0,.25); text-align:left; cursor:pointer; }
.customer-preset-card:hover,.customer-preset-card.is-active { border-color:#b68bea; background:rgba(105,68,156,.25); }
.customer-preset-card .preset-card-preview { min-height:62px; }
.customer-preset-card .preset-card-copy { padding:.4rem .5rem; }
.customer-preset-card .preset-card-copy strong { font-size:.72rem; }
.customer-preset-card .preset-card-copy small { font-size:.6rem; }
.crop-panel form > .preset-admin { display:block; margin:0 0 .35rem; padding:0; }
.crop-panel form > .preset-admin[hidden] { display:none; }
.crop-panel form > .preset-admin summary { display:grid; gap:.12rem; padding:.8rem .9rem; cursor:pointer; list-style:none; }
.crop-panel form > .preset-admin summary::-webkit-details-marker { display:none; }
.crop-panel form > .preset-admin summary::after { grid-column:2; grid-row:1/3; align-self:center; content:"+"; color:#caa9f2; font-size:1.25rem; }
.crop-panel form > .preset-admin[open] summary::after { content:"−"; }
.crop-panel form > .preset-admin summary span { color:#caa9f2; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.crop-panel form > .preset-admin summary strong { color:#fff; font-size:.88rem; }
.preset-admin-fields { display:grid; gap:.6rem; padding:0 .9rem .9rem; border-top:1px solid rgba(255,255,255,.1); }
.preset-admin-fields > p { margin:.7rem 0 0; color:var(--muted); font-size:.72rem; line-height:1.45; }
.preset-admin-fields > button,
.preset-admin-fields > [role=status] { grid-column:auto; }

.custom-intro h1 {
  max-width: none;
  font-size: clamp(2.2rem, 4vw, 4rem);
}

.custom-intro > p:last-child {
  max-width: 58rem;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
  line-height: 1.55;
}

.custom-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.custom-workspace.is-simple { grid-template-columns:minmax(0,1fr); }
.custom-workspace.is-simple .crop-panel { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:clamp(1rem,2vw,2rem); }
.custom-workspace.is-simple .print-preview-side { min-width:0; }
.custom-workspace.is-simple .crop-panel > form { align-self:start; }

.frame-panel,
.crop-panel {
  min-width: 0;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  border: 1px solid var(--line);
  background: var(--custom-panel);
}
.print-preview-side > .frame-panel { margin-top:.75rem; }
.panel-explainer { margin:-.6rem 0 1rem; color:var(--muted); font-size:.9rem; line-height:1.55; }

.frame-panel h2,
.crop-panel h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  font-size: clamp(1.4rem, 2vw, 2rem);
  letter-spacing: -0.025em;
}

.frame-panel h2 span,
.crop-panel h2 span {
  display: grid;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 850;
}

.custom-field,
.custom-field-row {
  display: grid;
}

.custom-field {
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.76rem, 0.72rem + 0.12vw, 0.84rem);
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.custom-field-row {
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.custom-field select,
.custom-field input,
.custom-field textarea {
  width: 100%;
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--white);
  background: #111315;
  font: inherit;
  font-size: clamp(1rem, 0.96rem + 0.12vw, 1.08rem);
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}

.frame-panel video {
  width: 100%;
  max-height: 58svh;
  margin-top: 0.75rem;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.frame-video-home:empty { display:none; }
.crop-stage-custom .frame-edit-video { display:block; width:auto; max-width:100%; max-height:58svh; margin:0; object-fit:contain; background:#000; }
.crop-stage-custom canvas[hidden] { display:none!important; }

.frame-range {
  width: 100%;
  margin: 0;
  accent-color: #9564d8;
}

.playback-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  margin: 1rem 0 0.7rem;
}

.frame-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
}

.playback-bar button,
.frame-controls button,
.capture-button,
.custom-submit {
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  color: var(--white);
  background: #111315;
  font-size: clamp(0.78rem, 0.75rem + 0.1vw, 0.86rem);
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.frame-controls output {
  min-width: 7.5rem;
  font-size: 0.95rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.capture-button,
.custom-submit {
  width: 100%;
  margin-top: 0.8rem;
  border-color: var(--white);
  color: var(--black);
  background: var(--white);
}

.crop-instruction,
.custom-quality,
.custom-status {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.crop-stage-custom {
  position: relative;
  width: fit-content;
  max-width: 100%;
  max-height: 58svh;
  margin: 0.75rem auto 1rem;
  overflow: hidden;
  background: #050607;
  touch-action: none;
}
.empty-preview { display:grid; min-height:320px; margin:1rem 0; padding:2rem; border:1px dashed rgba(255,255,255,.28); place-content:center; gap:.45rem; color:var(--muted); background:linear-gradient(135deg,#15181b,#090a0b); text-align:center; }
.empty-preview strong { color:#fff; font-size:1.2rem; }
.crop-stage-custom[hidden],.empty-preview[hidden] { display:none; }

.crop-stage-custom canvas {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58svh;
  height: auto;
  opacity: 0.92;
}
.static-print-preview { display:block; width:auto; max-width:100%; max-height:58svh; height:auto; object-fit:contain; }
.static-print-preview[hidden],.crop-window[hidden] { display:none!important; }
.mobile-framing-note { display:none; margin:.45rem 0 .9rem; color:var(--muted); font-size:.72rem; line-height:1.45; }
.video-decode-host { position:fixed; top:0; left:-10px; width:2px; height:2px; overflow:hidden; opacity:.001; pointer-events:none; }
.video-decode-host video { display:block; width:2px; height:2px; }
.change-frame-button { width:100%; margin:0 0 1rem; padding:.9rem 1rem; border:1px solid var(--line); color:#fff; background:transparent; font-size:.9rem; font-weight:800; cursor:pointer; }
.quantity-field { max-width:10rem; }

.crop-window {
  position: absolute;
  display: grid;
  border: 3px solid var(--white);
  place-items: end center;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  cursor: grab;
}

.crop-window:active {
  cursor: grabbing;
}

.crop-window span {
  margin-bottom: 0.45rem;
  padding: 0.25rem 0.45rem;
  color: var(--white);
  background: rgba(0, 0, 0, 0.7);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.crop-zoom { display:grid; grid-template-columns:auto minmax(120px,1fr) 3.5rem; gap:.75rem; align-items:center; margin:0 0 .85rem; color:rgba(255,255,255,.75); font-size:.8rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; }
.crop-zoom input { width:100%; accent-color:#9564d8; }
.crop-zoom output { color:#fff; font-size:.9rem; font-variant-numeric:tabular-nums; text-align:right; }
.preset-timeline { display:grid; gap:.45rem; margin:.2rem 0 .8rem; padding:.75rem; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.preset-timeline header { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.7rem; }
.preset-timeline header strong { color:rgba(255,255,255,.84); }
.preset-timeline-rail { position:relative; height:1.6rem; margin:0 .3rem; }
.preset-timeline-rail::before { content:""; position:absolute; top:.7rem; right:0; left:0; height:2px; background:rgba(255,255,255,.2); }
.preset-marker { position:absolute; top:.25rem; width:.9rem; height:.9rem; min-height:0!important; padding:0!important; border:2px solid #08090a!important; border-radius:50%; background:#b68bea!important; transform:translateX(-50%); cursor:pointer; }
.preset-marker:hover,.preset-marker.is-active { z-index:2; background:#fff!important; box-shadow:0 0 0 3px rgba(182,139,234,.4); }

.crop-panel form {
  display: grid;
  min-width: 0;
  gap: 0.65rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
}

.print-options-heading {
  margin-bottom: .25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--line);
}

.print-options-heading span {
  display: block;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
}

.print-options-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.custom-address { display:grid; gap:.6rem; margin:0; padding:.75rem; border:1px solid var(--line); }
.custom-address legend { padding:0 .4rem; color:rgba(255,255,255,.68); font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.custom-address-row { display:grid; grid-template-columns:1.4fr .65fr .8fr; gap:.55rem; }
.personalization-note { margin:.2rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }
.advanced-options { border:1px solid var(--line); background:rgba(255,255,255,.025); }
.advanced-options summary { padding:1rem; color:#fff; font-size:.95rem; font-weight:800; cursor:pointer; }
.advanced-options > .optional-options { display:grid; gap:1rem; padding:0 1rem 1rem; }
.option-group { display:grid; gap:.75rem; padding:1rem; border:1px solid var(--line); background:rgba(0,0,0,.18); }
.option-group strong { font-size:1rem; }
.option-group p { margin:.2rem 0 0; color:var(--muted); font-size:.82rem; line-height:1.45; }
.option-group [hidden] { display:none!important; }
.print-estimate { display:grid; gap:.2rem; padding:1rem; border:1px solid var(--line); background:rgba(255,255,255,.045); }
.print-estimate span { color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.print-estimate strong { font-size:clamp(1.6rem,3vw,2.35rem); line-height:1; }
.print-estimate small { color:var(--muted); line-height:1.45; }

.custom-submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.custom-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--blue);
}

.custom-loading {
  color: var(--muted);
}

@media (max-width: 980px) {
  .custom-workspace {
    grid-template-columns: 1fr;
  }
  .custom-workspace.is-simple .crop-panel { grid-template-columns:1fr; }
  .preset-admin { grid-template-columns:1fr; }
  .preset-admin [role=status] { grid-column:auto; }
}

@media (max-width: 600px) {
  .custom-main {
    padding:6.5rem .65rem 3rem;
  }

  .custom-field-row {
    grid-template-columns: 1fr;
  }
  .custom-address-row { grid-template-columns:1fr; }

  .frame-controls {
    grid-template-columns: 1fr 1fr;
  }

  .frame-controls output {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

@media (max-width: 700px) {
  .custom-workspace:not(.is-admin) .frame-panel,
  .custom-workspace:not(.is-admin) .crop-zoom,
  .custom-workspace:not(.is-admin) .change-frame-button {
    display: none!important;
  }

  .custom-workspace:not(.is-admin) .customer-presets-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .custom-workspace:not(.is-admin) .customer-preset-card {
    grid-template-columns: 1fr;
    min-width: 0;
    min-height: 0;
  }

  .custom-workspace:not(.is-admin) .customer-preset-card .preset-card-preview {
    min-height: 84px;
    aspect-ratio: 16 / 9;
  }

  .custom-workspace:not(.is-admin) .crop-stage-custom.is-mobile-static {
    width: min(100%, calc(58svh * var(--mobile-ratio)));
    aspect-ratio: var(--mobile-ratio);
  }

  .custom-workspace:not(.is-admin) .crop-stage-custom.is-mobile-static .static-print-preview {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .custom-workspace:not(.is-admin) .mobile-framing-note {
    display: block;
  }
}