.welcome-view{--setup-muted:#7b8494;--setup-field-surface:#141821;max-width:1180px;margin:auto;padding-top:32px;gap:28px;justify-content:center;background:#0b0d12}
.setup-card{--setup-field-gap:12px;--setup-card-gap:22px;--setup-caption-size:.63rem;--setup-caption-margin:5px;--setup-caption-space:calc(var(--setup-caption-size) * 1.2 + var(--setup-caption-margin));width:100%;max-width:1060px;grid-template-columns:minmax(300px,1fr) minmax(340px,1fr);padding:22px;gap:var(--setup-card-gap);border-radius:18px;border-color:transparent;background:transparent;box-shadow:none}
.dropzone{position:relative;order:1;align-items:center;min-height:410px;padding:22px;overflow:hidden;border-style:solid;border-color:#343b4a;background:var(--setup-field-surface);text-align:center}
.dropzone strong,.dropzone small,.dropzone-hint{position:relative;z-index:1}
.video-picker{position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.video-picker:focus-visible,.logo-picker:focus-visible{outline:none}
/* Paint keyboard focus above the media and its shading, without changing size. */
.video-picker:focus-visible::after,.logo-picker:focus-visible::before{content:"";position:absolute;inset:0;z-index:3;border:2px solid #aeb5c2;border-radius:inherit;pointer-events:none}
.dropzone strong{font-size:1.04rem}
.dropzone-hint{margin-top:3px;color:var(--setup-muted);font-size:.78rem;line-height:1.35}
.dropzone small{color:var(--setup-muted)}
.dropzone.drag-active{border-color:#ff4d32;background:#141b27;box-shadow:inset 0 0 0 1px #ff4d32}
.dropzone.drag-active .dropzone-hint{color:#f5f2eb}
.dropzone.has-preview{align-items:flex-start;justify-content:flex-end;text-align:left}
.dropzone.has-preview .dropzone-hint{display:none}
.dropzone.has-preview::after{position:absolute;inset:0;content:"";background:linear-gradient(transparent 35%,#070a11e8)}
#uploadThumb,#uploadPoster{position:absolute;inset:0;display:none;width:100%;height:100%;background:#050608;object-fit:cover}
.dropzone.has-preview #uploadThumb,.dropzone.has-preview #uploadPoster{display:block}
.video-clear{position:absolute;z-index:3;top:10px;right:10px;display:none;width:35px;height:35px;padding:0;border:1px solid #303847;border-radius:8px;background:#0e131ce6;color:#d8dde7;place-items:center;cursor:pointer}.video-clear svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.dropzone.has-preview .video-clear{display:grid}
.field-grid{order:2;grid-template-columns:1fr;align-content:stretch;gap:var(--setup-field-gap)}
.field-grid label>span:first-child{font-size:var(--setup-caption-size);line-height:1.2;margin-bottom:var(--setup-caption-margin)}
.field-grid label:last-child{grid-column:auto}
.field-grid span{display:flex;justify-content:space-between;color:#aeb5c2;font-size:.63rem}
.field-grid input{padding:16px 14px;border-color:#303847;background:var(--setup-field-surface);font-size:.95rem;transition:border-color .18s,background .18s}
.field-grid input[data-field]::placeholder{color:var(--setup-muted);opacity:.5;font-weight:400}
.field-grid input:focus{background:#1a202c}
.create-button{order:3;grid-column:1 / -1;justify-self:center;min-width:220px;width:auto;margin-top:max(0px,calc(var(--setup-field-gap) + var(--setup-caption-space) - var(--setup-card-gap)));padding:15px 26px;border-radius:10px}
.create-button:disabled{background:#2b313c;color:#79818e;cursor:not-allowed;box-shadow:none}

.logo-field{position:relative;grid-column:auto!important;padding-top:var(--setup-caption-space)}.logo-field>span:first-child{position:absolute;top:0;left:0;display:flex}
.logo-picker-row{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:8px}.logo-picker{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:40px;min-height:40px;padding:5px 10px;gap:8px;overflow:hidden;border:1px solid #303847;border-radius:8px;background:var(--setup-field-surface);color:#f5f2eb;font-size:.74rem;cursor:pointer}.logo-picker-icon{display:grid;flex:0 0 28px;width:28px;height:28px;padding:0;place-items:center;border-radius:6px;background:#253044;color:#b8c7e1}.logo-picker-icon svg{display:block;width:16px;height:16px;margin:auto}.logo-picker #logoPickerLabel{position:relative;z-index:2;font-weight:800;letter-spacing:.01em;line-height:1}
.logo-picker > *{transform:translateY(3px)}
.logo-thumb{position:absolute;inset:0;z-index:0;display:none;width:100%;height:100%;border:0;border-radius:inherit;object-fit:cover}
.logo-field.has-logo .logo-picker{min-width:0;justify-content:flex-start;padding:5px 50px 5px 10px;background:var(--setup-field-surface)}.logo-field.has-logo .logo-picker::after{position:absolute;inset:0;z-index:1;content:"";background:linear-gradient(90deg,#090c12aa,#090c1238)}.logo-field.has-logo .logo-picker > *{transform:none}.logo-field.has-logo .logo-thumb{display:block}.logo-field.has-logo .logo-picker-icon{display:none}.logo-field.has-logo .logo-picker #logoPickerLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #000}
.logo-clear{position:absolute;z-index:3;top:50%;right:5px;transform:translateY(-50%);display:none;width:35px;height:35px;padding:0;border:1px solid #303847;border-radius:8px;background:#0e131ce6;color:#d8dde7;place-items:center;cursor:pointer}.logo-clear svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.logo-field.has-logo .logo-clear{display:grid}
.logo-field small{display:block;margin-top:5px;color:var(--setup-muted);font-size:.65rem;line-height:1.35}
.logo-field small:empty{display:none}

.field-grid{--setup-control-height:calc(.95rem * 1.25 + 34px)}
.field-grid input[data-field],.field-grid .logo-picker{height:var(--setup-control-height);min-height:var(--setup-control-height)}
.field-grid input[data-field]{line-height:1.25}

@media(min-width:851px){
  .welcome-view{height:auto;min-height:100vh;min-height:100dvh;padding-top:22px;padding-bottom:18px;gap:18px;overflow:visible}
  .welcome-header{margin-top:auto}
  .setup-card{--setup-field-gap:9px;--setup-card-gap:18px;max-width:1000px;padding:18px}
  .dropzone{min-height:360px}
  .field-grid input{padding:12px 13px}
  .field-grid{--setup-control-height:calc(.95rem * 1.25 + 26px)}
  .logo-picker{flex:1 1 auto}
  .logo-clear{width:28px;height:28px}
  .logo-field small{margin-top:3px}
  .create-button{min-width:200px;padding:13px 22px}
  .setup-card{margin-bottom:auto}
  .welcome-view .app-legal{margin-top:0;transform:none}
}
@media(max-width:850px){
  .welcome-view{padding-top:24px}
  .setup-card{grid-template-columns:1fr}
  .setup-card .dropzone{order:1;min-height:220px}
  .setup-card .field-grid{order:2}
  .setup-card .create-button{order:3;grid-column:auto;justify-self:stretch}
  .app-legal{margin-top:24px}
}

/* Portrait phones: keep a screen-height minimum, not a fixed-height wrapper.
   Let the document scroll and the form grow naturally for short screens,
   text enlargement and native keyboard panning, including after file pickers. */
@media(max-width:850px) and (orientation:portrait){
  .welcome-view{height:auto;min-height:100vh;min-height:100dvh;max-width:560px;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));gap:4px;justify-content:flex-start;overflow:visible}
  .welcome-header{flex:0 0 auto}
  .welcome-header .brand{font-size:1.3rem}
  .setup-card{--setup-field-gap:8px;--setup-card-gap:8px;--setup-caption-size:.6rem;--setup-caption-margin:3px;flex:1 0 auto;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(48px,1fr) auto auto;padding:10px;border-radius:16px}
  .setup-card .dropzone{min-height:48px;padding:8px;min-width:0}
  .dropzone strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
  .dropzone-hint{margin:0;font-size:.7rem}
  .dropzone small{font-size:.65rem}
  .setup-card .field-grid{grid-template-columns:minmax(0,1fr);align-content:start}
  .field-grid label{min-width:0}
  .field-grid label{grid-column:1 / -1!important}
  .field-grid label>span{margin-bottom:3px;font-size:.6rem;line-height:1.2}
  .field-grid input:not([type=file]){min-height:44px;padding:9px 10px;font-size:16px;line-height:1.25}
  .field-grid{--setup-control-height:44px}
  .logo-field small{margin-top:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6rem;line-height:1.25}
  .setup-card .create-button{min-width:0;width:100%;min-height:44px;padding:10px 16px}
  .welcome-view .app-legal{flex:0 0 auto;min-height:30px;align-items:center;justify-content:center;gap:14px;margin:0;font-size:12px}
  .welcome-view .app-legal a{display:inline-flex;align-items:center;min-height:30px;white-space:nowrap}
}