html.sto-form-dialog-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.sto-form-workflow {
  display: block;
  margin-block: 14px;
}

.sto-form-workflow[hidden] { display: none !important; }

.sto-form-workflow__launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.sto-form-workflow__launcher > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sto-form-workflow__launcher strong {
  color: #f6f8fb;
  font: 800 1rem/1.3 "Manrope", system-ui, sans-serif;
}

.sto-form-workflow__launcher small {
  color: #aeb8c6;
  font: 600 0.8125rem/1.45 "Manrope", system-ui, sans-serif;
}

.sto-form-workflow__eyebrow,
.sto-form-workflow__header span {
  color: #f06a55;
  font: 800 0.8125rem/1.2 "Manrope", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sto-form-workflow__dialog {
  width: min(780px, calc(100vw - 28px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 28px));
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #f5f7fb;
  box-shadow: 0 30px 90px rgba(0,0,0,.56);
}

.sto-form-workflow__dialog::backdrop {
  background: rgba(5,8,13,.76);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.sto-form-workflow__surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-height: min(900px, calc(100dvh - 28px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: #121923;
}

.sto-form-workflow__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(210,71,52,.13), rgba(18,25,35,.96) 54%);
}

.sto-form-workflow__header > div { display: grid; gap: 6px; }
.sto-form-workflow__header h2 {
  margin: 0;
  color: #fff;
  font: 800 clamp(1.2rem, 3vw, 1.6rem)/1.25 "Exo 2", "Manrope", system-ui, sans-serif;
}

.sto-form-workflow__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: 500 1.55rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.sto-form-workflow__body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px;
  scrollbar-gutter: stable;
}

.sto-form-workflow__form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.sto-form-workflow__form :where(input,select,textarea):user-invalid {
  border-color: #ef6a55 !important;
  box-shadow: 0 0 0 3px rgba(239,106,85,.18) !important;
}

.sto-form-workflow__status {
  min-height: 42px;
  padding: 10px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #b7c1ce;
  background: rgba(7,10,15,.32);
  font: 700 0.8125rem/1.4 "Manrope", system-ui, sans-serif;
}

.sto-form-workflow__status[data-state="saving"] { color: #8fc9ff; }
.sto-form-workflow__status[data-state="success"] { color: #78d8a0; }
.sto-form-workflow__status[data-state="warning"] { color: #ffd07a; }
.sto-form-workflow__status[data-state="error"] { color: #ff9b8d; }

.sto-form-workflow__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.1);
  background: #0e141d;
}

.sto-form-workflow__footer [data-form-workflow-previous] { margin-inline-end: auto; }
.sto-form-workflow__footer [hidden] { display: none !important; }

.sto-form-workflow__dialog--readonly .sto-form-workflow__body {
  color: #e9edf3;
}

.sto-form-workflow__dialog :where(button,a,input,select,textarea):focus-visible,
.sto-form-workflow__launcher button:focus-visible {
  outline: 3px solid rgba(239,106,85,.58);
  outline-offset: 3px;
}

html[data-theme="light"] .sto-form-workflow__launcher {
  border-color: #d4dbe5;
  background: linear-gradient(135deg, #fff, #f6f8fb);
  box-shadow: 0 12px 30px rgba(17,24,39,.08);
}

html[data-theme="light"] .sto-form-workflow__launcher strong { color: #18202b; }
html[data-theme="light"] .sto-form-workflow__launcher small { color: #5f6b7a; }
html[data-theme="light"] .sto-form-workflow__surface { border-color: #cbd3df; background: #fff; color: #18202b; }
html[data-theme="light"] .sto-form-workflow__header {
  border-bottom-color: #dde3eb;
  background: linear-gradient(135deg, #fff1ee, #fff 58%);
}
html[data-theme="light"] .sto-form-workflow__header h2 { color: #18202b; }
html[data-theme="light"] .sto-form-workflow__close { border-color: #cbd3df; background: #f5f7fa; color: #18202b; }
html[data-theme="light"] .sto-form-workflow__status { border-color: #e0e5ec; background: #f7f9fb; color: #596575; }
html[data-theme="light"] .sto-form-workflow__footer { border-top-color: #dde3eb; background: #f8fafc; }
html[data-theme="light"] .sto-form-workflow__dialog--readonly .sto-form-workflow__body { color: #18202b; }

@media (max-width: 640px) {
  .sto-form-workflow__launcher { align-items: stretch; flex-direction: column; }
  .sto-form-workflow__launcher button { width: 100%; }
  .sto-form-workflow__dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .sto-form-workflow__surface { height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .sto-form-workflow__header { padding: calc(16px + env(safe-area-inset-top)) 16px 14px; }
  .sto-form-workflow__body { padding: 16px; }
  .sto-form-workflow__status { padding-inline: 16px; }
  .sto-form-workflow__footer { display: grid; grid-template-columns: 1fr 1fr; padding-inline: 16px; }
  .sto-form-workflow__footer [data-form-workflow-previous] { margin: 0; }
  .sto-form-workflow__footer [data-form-workflow-next] { grid-column: 1 / -1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sto-form-workflow__dialog,
  .sto-form-workflow__launcher { scroll-behavior: auto; transition: none !important; }
}