.fs-page {
  --fs-navy: #102a56;
  --fs-blue: #2468e5;
  --fs-blue-soft: #edf4ff;
  --fs-border: #dce6f4;
  --fs-muted: #6e7f99;
  min-width: 0;
  color: var(--text);
}

.fs-page button,
.fs-page input,
.fs-page select,
.fs-page textarea {
  font-family: var(--app-font);
}

.fs-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 20px 22px;
  background:
    radial-gradient(circle at 15% 10%, rgba(74, 137, 255, .13), transparent 34%),
    linear-gradient(135deg, var(--surface-solid), var(--surface-soft));
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}

.fs-page-head h3 {
  margin: 3px 0 5px;
  color: var(--fs-navy);
  font-size: 21px;
}

.fs-page-head p {
  max-width: 780px;
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.fs-head-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.fs-head-actions button {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 12px;
}

.fs-publish-button {
  background: linear-gradient(135deg, #0a985f, #18b878);
  box-shadow: 0 9px 22px rgba(10, 152, 95, .2);
}

.fs-shell {
  display: grid;
  grid-template-columns: minmax(250px, 292px) minmax(460px, 1fr) minmax(300px, 348px);
  min-height: 680px;
  height: clamp(680px, calc(100dvh - 222px), 940px);
  overflow: hidden;
  background: #f4f7fc;
  border: 1px solid var(--fs-border);
  border-radius: 24px;
  box-shadow: 0 18px 54px rgba(21, 47, 88, .12);
}

.fs-library,
.fs-inspector {
  min-width: 0;
  overflow: hidden;
  background: var(--surface-solid);
}

.fs-library {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--fs-border);
}

.fs-inspector {
  border-right: 1px solid var(--fs-border);
}

.fs-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 16px 10px;
}

.fs-panel-head > div {
  display: grid;
  gap: 1px;
}

.fs-panel-head span {
  color: var(--fs-muted);
  font-size: 10px;
  font-weight: 700;
}

.fs-panel-head strong {
  color: var(--fs-navy);
  font-size: 15px;
}

.fs-panel-head > button {
  width: 36px;
  height: 36px;
  padding: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  background: linear-gradient(135deg, var(--fs-blue), #4e89f1);
  border: 0;
  border-radius: 11px;
  box-shadow: 0 7px 15px rgba(36, 104, 229, .2);
}

.fs-panel-head.compact {
  padding-top: 12px;
}

.fs-panel-head.compact > b {
  display: grid;
  min-width: 28px;
  height: 25px;
  place-items: center;
  color: var(--fs-blue);
  font-size: 11px;
  background: var(--fs-blue-soft);
  border-radius: 8px;
}

.fs-library-tools {
  display: grid;
  gap: 7px;
  padding: 0 14px 12px;
}

.fs-library-tools input,
.fs-library-tools select {
  min-height: 40px;
  padding: 8px 11px;
  font-size: 12px;
  background: #f9fbfe;
  border-color: var(--fs-border);
  border-radius: 10px;
}

.fs-template-list {
  flex: 0 0 auto;
  max-height: 230px;
  padding: 0 10px 8px;
  overflow: auto;
  scrollbar-width: thin;
}

.fs-template-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  width: 100%;
  gap: 9px;
  align-items: center;
  margin-bottom: 6px;
  padding: 10px;
  color: var(--text);
  text-align: right;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: .18s ease;
}

.fs-template-card:hover {
  background: #f6f9fe;
  border-color: var(--fs-border);
}

.fs-template-card.active {
  background: var(--fs-blue-soft);
  border-color: rgba(36, 104, 229, .28);
  box-shadow: inset -3px 0 var(--fs-blue);
}

.fs-template-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--fs-blue);
  font-size: 16px;
  background: #fff;
  border: 1px solid var(--fs-border);
  border-radius: 10px;
}

.fs-template-copy {
  display: grid;
  min-width: 0;
}

.fs-template-copy strong,
.fs-template-copy small,
.fs-template-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-template-copy strong {
  color: var(--fs-navy);
  font-size: 12.5px;
}

.fs-template-copy small {
  color: var(--text-soft);
  font-size: 10.5px;
}

.fs-template-copy em {
  color: var(--fs-muted);
  font-size: 9.5px;
  font-style: normal;
}

.fs-template-side {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.fs-template-side b {
  padding: 3px 6px;
  color: #8b6417;
  font-size: 8px;
  background: #fff5dc;
  border-radius: 999px;
}

.fs-template-side b.published {
  color: #07744a;
  background: #e6f8ef;
}

.fs-template-side small {
  color: var(--fs-muted);
  font-size: 8px;
}

.fs-list-empty {
  padding: 22px 12px;
  color: var(--fs-muted);
  font-size: 11px;
  text-align: center;
}

.fs-panel-divider {
  flex: 0 0 auto;
  height: 1px;
  margin: 1px 14px 0;
  background: var(--fs-border);
}

.fs-palette {
  min-height: 0;
  padding: 0 10px 16px;
  overflow: auto;
  scrollbar-width: thin;
}

.fs-palette-group h5 {
  margin: 10px 5px 6px;
  color: var(--fs-muted);
  font-size: 11px;
}

.fs-palette-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.fs-palette-group button {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 7px;
  color: var(--text);
  text-align: right;
  background: #f9fbfe;
  border: 1px solid var(--fs-border);
  border-radius: 10px;
  transition: .18s ease;
}

.fs-palette-group button:hover {
  color: var(--fs-blue);
  background: var(--fs-blue-soft);
  border-color: rgba(36, 104, 229, .35);
  transform: translateY(-1px);
}

.fs-palette-group button > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  color: var(--fs-blue);
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--fs-border);
  border-radius: 7px;
}

.fs-palette-group button b {
  min-width: 0;
  font-size: 11px;
  font-weight: 750;
}

.fs-palette-group button small {
  color: var(--fs-blue);
  font-size: 13px;
}

.fs-workspace {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background:
    linear-gradient(rgba(42, 91, 159, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 91, 159, .035) 1px, transparent 1px),
    #f4f7fc;
  background-size: 24px 24px;
}

.fs-workspace-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 55px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--fs-border);
  backdrop-filter: blur(14px);
}

.fs-history-actions,
.fs-device-switch,
.fs-more-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fs-more-actions {
  justify-content: flex-end;
}

.fs-workspace-toolbar button {
  min-height: 34px;
  padding: 6px 10px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
  background: #fff;
  border: 1px solid var(--fs-border);
  border-radius: 9px;
}

.fs-history-actions button {
  width: 34px;
  padding: 0;
  font-size: 18px;
}

.fs-device-switch {
  padding: 3px;
  background: #eaf0f8;
  border-radius: 11px;
}

.fs-device-switch button {
  min-width: 66px;
  border-color: transparent;
  background: transparent;
}

.fs-device-switch button.active {
  color: var(--fs-blue);
  background: #fff;
  box-shadow: 0 3px 10px rgba(22, 52, 96, .1);
}

.fs-form-meta {
  display: grid;
  gap: 7px;
  padding: 13px 18px;
  background: rgba(255,255,255,.84);
  border-bottom: 1px solid var(--fs-border);
}

.fs-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.fs-title-row > span {
  color: #f2a51b;
}

.fs-title-row input,
.fs-form-meta textarea {
  padding: 0;
  color: var(--fs-navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fs-title-row input {
  min-height: 28px;
  font-size: 17px;
  font-weight: 800;
}

.fs-form-meta textarea {
  min-height: 31px;
  color: var(--text-soft);
  font-size: 12px;
  resize: none;
}

.fs-title-row > b {
  padding: 4px 8px;
  color: #8b6417;
  font-size: 9px;
  background: #fff4d9;
  border-radius: 999px;
}

.fs-title-row > b.published {
  color: #07744a;
  background: #e5f8ef;
}

.fs-form-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fs-form-badges span {
  padding: 3px 7px;
  color: #526984;
  font-size: 10px;
  background: #edf2f8;
  border-radius: 7px;
}

.fs-stage-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  scrollbar-width: thin;
}

.fs-device-frame {
  width: min(100%, 1080px);
  min-height: 480px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e3f0;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(20, 47, 86, .12);
  transition: width .25s ease;
}

.fs-device-frame.tablet {
  width: min(100%, 760px);
}

.fs-device-frame.mobile {
  width: min(100%, 390px);
  border: 8px solid #17233a;
  border-radius: 28px;
}

.fs-canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 17px;
  background: linear-gradient(135deg, #102c5a, #225da9);
}

.fs-canvas-head > div {
  display: grid;
}

.fs-canvas-head span,
.fs-canvas-head small {
  color: rgba(255,255,255,.68);
  font-size: 10px;
}

.fs-canvas-head strong {
  color: #fff;
  font-size: 13px;
}

.fs-canvas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fs-gap, 16px);
  min-height: 420px;
  align-content: start;
  padding: 20px;
  background: #fbfcff;
}

.fs-canvas-field {
  position: relative;
  grid-column: span var(--fs-span, 12);
  min-width: 0;
  padding: 13px;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-radius: 13px;
  box-shadow: 0 4px 13px rgba(19, 46, 82, .045);
  transition: .18s ease;
}

.fs-columns-1 > .fs-canvas-field {
  grid-column: 1 / -1;
}

.fs-columns-2 > .fs-span-3,
.fs-columns-2 > .fs-span-4,
.fs-columns-2 > .fs-span-6 {
  grid-column: span 6;
}

.fs-columns-2 > .fs-span-8,
.fs-columns-2 > .fs-span-9,
.fs-columns-2 > .fs-span-12 {
  grid-column: 1 / -1;
}

.fs-columns-3 > .fs-span-3,
.fs-columns-3 > .fs-span-4 {
  grid-column: span 4;
}

.fs-canvas-field:hover {
  border-color: rgba(36, 104, 229, .4);
  box-shadow: 0 8px 22px rgba(19, 58, 111, .09);
}

.fs-canvas-field.selected {
  border-color: var(--fs-blue);
  box-shadow: 0 0 0 3px rgba(36, 104, 229, .12), 0 10px 25px rgba(20, 55, 105, .11);
}

.fs-canvas-field.decorative {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.fs-field-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.fs-drag {
  color: #9baac0;
  font-size: 17px;
  cursor: grab;
}

.fs-field-toolbar > div:nth-child(2) {
  display: grid;
  min-width: 0;
  margin-left: auto;
}

.fs-field-toolbar strong {
  overflow: hidden;
  color: #18345c;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-field-toolbar small {
  overflow: hidden;
  color: #8795a9;
  font-size: 9.5px;
  direction: ltr;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-required-chip,
.fs-condition-chip {
  padding: 3px 6px;
  color: #b53e51;
  font-size: 8px;
  background: #ffedf0;
  border-radius: 999px;
}

.fs-condition-chip {
  display: inline-block;
  margin-top: 7px;
  color: #5e4da4;
  background: #f0edff;
}

.fs-field-actions {
  display: none;
  align-items: center;
  gap: 2px;
}

.fs-canvas-field.selected .fs-field-actions,
.fs-canvas-field:hover .fs-field-actions {
  display: flex;
}

.fs-field-actions button {
  display: grid;
  width: 25px;
  height: 25px;
  padding: 0;
  place-items: center;
  color: #61738d;
  font-size: 11px;
  background: #f3f6fa;
  border: 0;
  border-radius: 7px;
}

.fs-field-actions button:hover {
  color: var(--fs-blue);
  background: var(--fs-blue-soft);
}

.fs-field-actions button.danger:hover {
  color: #c33d50;
  background: #ffedf0;
}

.fs-field-control input,
.fs-field-control textarea,
.fs-field-control select {
  min-height: 42px;
  padding: 9px 11px;
  font-size: 13px;
  background: #f9fbfd;
  border-color: #dce5f0;
  border-radius: 10px;
}

.fs-field-control textarea {
  min-height: 72px;
}

.fs-field-help {
  display: block;
  margin-top: 5px;
  color: #7d8ca1;
  font-size: 10.5px;
}

.fs-choice-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.fs-choice-preview span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #52637c;
  font-size: 10px;
}

.fs-choice-preview i {
  display: block;
  width: 15px;
  height: 15px;
  background: #fff;
  border: 1px solid #bdcadb;
  border-radius: 4px;
}

.fs-choice-preview i.radio {
  border-radius: 50%;
}

.fs-choice-preview i.checked {
  background: var(--fs-blue);
  box-shadow: inset 0 0 0 3px #fff;
}

.fs-file-placeholder {
  display: grid;
  min-height: 86px;
  place-items: center;
  align-content: center;
  gap: 1px;
  color: #506684;
  background: #f7faff;
  border: 1px dashed #aebfda;
  border-radius: 11px;
}

.fs-file-placeholder span {
  color: var(--fs-blue);
  font-size: 20px;
}

.fs-file-placeholder b {
  font-size: 10px;
}

.fs-file-placeholder small {
  color: #8a99ad;
  font-size: 8px;
}

.fs-switch-preview,
.fs-rating-preview,
.fs-scale-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.fs-switch-preview i {
  position: relative;
  width: 38px;
  height: 21px;
  background: #c8d4e4;
  border-radius: 999px;
}

.fs-switch-preview i::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 15px;
  height: 15px;
  content: "";
  background: #fff;
  border-radius: 50%;
}

.fs-switch-preview span,
.fs-scale-preview span {
  color: #65758b;
  font-size: 9px;
}

.fs-rating-preview {
  color: #f3a61c;
  font-size: 19px;
  direction: ltr;
}

.fs-scale-preview i {
  position: relative;
  height: 5px;
  flex: 1;
  background: #dfe7f1;
  border-radius: 99px;
}

.fs-scale-preview b {
  position: absolute;
  inset: 0 0 0 42%;
  background: var(--fs-blue);
  border-radius: inherit;
}

.fs-section-preview strong {
  color: #173864;
  font-size: 14px;
}

.fs-section-preview p {
  margin: 2px 0 0;
  color: #6c7f99;
  font-size: 10px;
}

.fs-note-preview {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  color: #435e80;
  font-size: 10px;
  background: #eef5ff;
  border-radius: 10px;
}

.fs-note-preview i {
  display: grid;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  font-style: normal;
  background: var(--fs-blue);
  border-radius: 50%;
}

.fs-divider-preview {
  height: 1px;
  margin: 9px 0;
  background: #d8e2ef;
}

.fs-empty {
  grid-column: 1 / -1;
  display: grid;
  min-height: 300px;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #75859b;
  text-align: center;
  background: #f8faff;
  border: 2px dashed #dbe4f0;
  border-radius: 15px;
}

.fs-empty span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--fs-blue);
  font-size: 25px;
  background: #eaf2ff;
  border-radius: 15px;
}

.fs-empty strong {
  margin-top: 5px;
  color: #354e70;
  font-size: 13px;
}

.fs-empty small {
  font-size: 10px;
}

.fs-autosave {
  padding: 8px 16px;
  color: #77879d;
  font-size: 9px;
  text-align: center;
  background: rgba(255,255,255,.84);
  border-top: 1px solid var(--fs-border);
}

.fs-autosave span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 4px;
  background: #19a870;
  border-radius: 50%;
}

.fs-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 11px;
  background: #f6f8fc;
  border-bottom: 1px solid var(--fs-border);
}

.fs-inspector-tabs button {
  min-height: 36px;
  padding: 6px;
  color: #687a93;
  font-size: 11px;
  font-weight: 800;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
}

.fs-inspector-tabs button.active {
  color: var(--fs-blue);
  background: #fff;
  border-color: #dbe5f2;
  box-shadow: 0 4px 10px rgba(20, 51, 95, .08);
}

.fs-inspector-scroll {
  height: calc(100% - 59px);
  padding: 16px;
  overflow: auto;
  scrollbar-width: thin;
}

.fs-inspector-section {
  display: grid;
  gap: 13px;
}

.fs-inspector-section > label,
.fs-two-cols > label,
.fs-three-cols > label {
  display: grid;
  gap: 6px;
  color: #52657f;
  font-size: 12px;
  font-weight: 750;
}

.fs-inspector-section label > small {
  color: #8492a6;
  font-size: 10px;
  font-weight: 500;
}

.fs-inspector-section input,
.fs-inspector-section select,
.fs-inspector-section textarea {
  min-height: 41px;
  padding: 9px 11px;
  color: #173052;
  font-size: 13px;
  font-weight: 600;
  background: #fbfcfe;
  border-color: #dbe4ef;
  border-radius: 10px;
}

.fs-inspector-section textarea {
  min-height: 72px;
}

.fs-inspector-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(135deg, #edf4ff, #f7faff);
  border: 1px solid #dbe7f7;
  border-radius: 12px;
}

.fs-inspector-heading > span {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fs-blue), #5a91ee);
  border-radius: 10px;
}

.fs-inspector-heading > div {
  display: grid;
}

.fs-inspector-heading strong {
  color: #15345f;
  font-size: 12px;
}

.fs-inspector-heading small {
  color: #7486a0;
  font-size: 9px;
}

.fs-inspector-empty {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #798aa2;
  text-align: center;
}

.fs-inspector-empty span {
  font-size: 28px;
}

.fs-inspector-empty strong {
  color: #324e72;
  font-size: 13px;
}

.fs-inspector-empty p {
  max-width: 220px;
  font-size: 10px;
}

.fs-two-cols,
.fs-three-cols {
  display: grid;
  gap: 8px;
}

.fs-two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fs-three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fs-subheading {
  display: grid;
  gap: 1px;
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--fs-border);
}

.fs-subheading.first {
  margin-top: 0;
  padding-top: 0;
  border: 0;
}

.fs-subheading strong {
  color: #18365f;
  font-size: 12px;
}

.fs-subheading small {
  color: #8190a5;
  font-size: 9px;
}

.fs-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.fs-toggle-row.vertical {
  grid-template-columns: 1fr;
}

.fs-toggle-row > label,
.fs-check-line {
  display: flex !important;
  align-items: flex-start;
  gap: 7px !important;
  padding: 9px;
  background: #f8fafe;
  border: 1px solid #e1e8f2;
  border-radius: 10px;
}

.fs-toggle-row input,
.fs-check-line input {
  width: 16px;
  min-height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--fs-blue);
}

.fs-toggle-row span {
  display: grid;
}

.fs-toggle-row strong {
  color: #3a506f;
  font-size: 10px;
}

.fs-toggle-row small {
  color: #8593a7;
  font-size: 8px;
}

.fs-segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.fs-segmented label {
  display: block;
}

.fs-segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fs-segmented span {
  display: grid;
  min-height: 40px;
  place-items: center;
  color: #61738c;
  font-size: 10px;
  background: #f5f8fc;
  border: 1px solid #dfe7f1;
  border-radius: 10px;
}

.fs-segmented input:checked + span {
  color: var(--fs-blue);
  background: var(--fs-blue-soft);
  border-color: rgba(36, 104, 229, .4);
  box-shadow: inset 0 0 0 1px rgba(36,104,229,.08);
}

.fs-group-picker {
  display: grid;
  max-height: 205px;
  gap: 6px;
  padding: 5px;
  overflow: auto;
  background: #f7f9fc;
  border: 1px solid #e0e7f1;
  border-radius: 11px;
}

.fs-group-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 9px;
}

.fs-group-picker input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--fs-blue);
}

.fs-group-picker span {
  display: grid;
}

.fs-group-picker strong {
  color: #344c6d;
  font-size: 10px;
}

.fs-group-picker small {
  color: #8a98aa;
  font-size: 8px;
}

.fs-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.fs-role-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  color: #4e617a;
  font-size: 9px;
  background: #f8fafe;
  border: 1px solid #e0e7f1;
  border-radius: 9px;
}

.fs-role-grid input {
  width: 15px;
  min-height: 15px;
  accent-color: var(--fs-blue);
}

.fs-publish-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.fs-publish-summary div {
  display: grid;
  gap: 2px;
  padding: 9px;
  text-align: center;
  background: #f3f7fc;
  border-radius: 9px;
}

.fs-publish-summary span {
  color: #8090a5;
  font-size: 8px;
}

.fs-publish-summary strong {
  color: #1e3b63;
  font-size: 10px;
}

.fs-owner-note,
.fs-readonly-note {
  margin: 0;
  padding: 9px 10px;
  color: #5f7189;
  font-size: 9px;
  background: #f5f8fc;
  border-radius: 9px;
}

.fs-readonly-note {
  color: #86621c;
  background: #fff7e4;
  border: 1px solid #f1deb0;
}

.fs-archive-button {
  min-height: 40px;
}

.modal:has(form[data-form-target]) {
  width: min(1120px, calc(100vw - 28px));
}

.modal:has(form[data-form-target]) .modal-head h3 {
  font-size: 18px;
}

.modal:has(form[data-form-target]) .modal-body {
  padding: 25px 27px;
}

.modal-body .form-grid > label,
.modal-body .form-stack > label,
#simple-report-form > label,
#company-news-form > label {
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.65;
}

.modal-body .form-grid > label > input,
.modal-body .form-grid > label > select,
.modal-body .form-stack > label > input,
.modal-body .form-stack > label > select,
#simple-report-form > label > input,
#simple-report-form > label > select,
#company-news-form > label > input,
#company-news-form > label > select {
  min-height: 47px;
  padding: 11px 13px;
  font-size: 14px;
  border-radius: 12px;
}

.modal-body .form-grid > label > textarea,
.modal-body .form-stack > label > textarea,
#simple-report-form > label > textarea,
#company-news-form > label > textarea {
  min-height: 116px;
  padding: 12px 13px;
  font-size: 14px;
  line-height: 1.85;
  border-radius: 12px;
}

.modal:has(form[data-form-target]) .modal-actions button,
#simple-report-form .modal-actions button,
#company-news-form .modal-actions button {
  min-height: 45px;
  padding-inline: 18px;
  font-size: 13px;
}

.runtime-form-extension {
  --rf-accent: #2468e5;
  --rf-accent-dark: #164caa;
  --rf-soft: #edf4ff;
  --rf-line: #d9e4f2;
  width: 100%;
  max-width: 100%;
  margin: 18px auto;
  padding: 22px;
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--rf-accent) 10%, transparent), transparent 32%),
    var(--surface-solid);
  border: 1px solid var(--rf-line);
  border-radius: calc(var(--rf-radius, 12px) + 6px);
  box-shadow: 0 12px 32px rgba(22, 50, 90, .08);
}

.form-studio-native-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--rf-columns, 2), minmax(0, 1fr));
  gap: var(--rf-gap, 16px) !important;
}
form.form-studio-native > .full,
form.form-studio-native > .modal-actions,
form.form-studio-native > .runtime-form-extension {
  grid-column: 1 / -1;
}
form.form-studio-native .fs-native-field {
  grid-column: span var(--rf-native-span, 1);
  color: var(--rf-field-label-color, var(--text-soft));
  font-size: var(--rf-field-label-size, var(--rf-label-size, 14px));
  font-weight: var(--rf-field-label-weight, 750);
  min-width: 0;
}
form.form-studio-native .fs-native-field > input,
form.form-studio-native .fs-native-field > select,
form.form-studio-native .fs-native-field > textarea {
  min-height: var(--rf-input-height, 48px);
  border-radius: var(--rf-radius, 12px);
  font-size: var(--rf-field-input-size, var(--rf-input-size, 15px));
}

form.form-studio-native .fs-native-field > small {
  font-size: var(--rf-field-help-size, max(10px, calc(var(--rf-label-size, 14px) - 3px)));
}

.rf-theme-teal {
  --rf-accent: #079779;
  --rf-accent-dark: #056c58;
  --rf-soft: #e8f8f4;
  --rf-line: #cde9e2;
}

.rf-theme-indigo {
  --rf-accent: #5b51c8;
  --rf-accent-dark: #40369b;
  --rf-soft: #f0efff;
  --rf-line: #dedbf7;
}

.rf-theme-slate {
  --rf-accent: #52657e;
  --rf-accent-dark: #35465d;
  --rf-soft: #eef2f6;
  --rf-line: #d7e0e8;
}

.rf-theme-sand {
  --rf-accent: #a06e28;
  --rf-accent-dark: #78501b;
  --rf-soft: #fbf4e8;
  --rf-line: #eadcc3;
}

.rf-width-compact {
  max-width: 680px;
}

.rf-width-medium {
  max-width: 880px;
}

.rf-width-wide {
  max-width: 1120px;
}

.rf-width-full {
  max-width: 100%;
}

.rf-density-compact {
  padding: 16px;
}

.rf-density-spacious {
  padding: 28px;
}

.rf-header {
  position: relative;
  margin-bottom: 20px;
  padding: 0 13px 15px 0;
  border-bottom: 1px solid var(--rf-line);
}

.rf-header::before {
  position: absolute;
  top: 3px;
  right: 0;
  width: 4px;
  height: 42px;
  content: "";
  background: var(--rf-accent);
  border-radius: 99px;
}

.rf-header > span {
  color: var(--rf-accent);
  font-size: 10px;
  font-weight: 850;
}

.rf-header h4 {
  margin: 1px 0 3px;
  color: var(--text);
  font-size: 18px;
}

.rf-header p {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
}

.rf-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--rf-gap, 16px);
  align-items: start;
}

.rf-field,
.rf-section,
.rf-note,
.rf-divider {
  grid-column: span var(--rf-span, 12);
  min-width: 0;
}

.rf-columns-1 .rf-field,
.rf-columns-1 .rf-section,
.rf-columns-1 .rf-note,
.rf-columns-1 .rf-divider {
  grid-column: 1 / -1;
}

.rf-columns-2 .rf-span-3,
.rf-columns-2 .rf-span-4,
.rf-columns-2 .rf-span-6 {
  grid-column: span 6;
}

.rf-columns-2 .rf-span-8,
.rf-columns-2 .rf-span-9,
.rf-columns-2 .rf-span-12 {
  grid-column: 1 / -1;
}

.rf-columns-3 .rf-span-3,
.rf-columns-3 .rf-span-4 {
  grid-column: span 4;
}

.rf-field {
  display: grid;
  gap: 7px;
  color: var(--rf-field-label-color, var(--text-soft));
  font-size: var(--rf-field-label-size, var(--rf-label-size, 14px));
  font-weight: var(--rf-field-label-weight, 750);
}

.rf-label {
  line-height: 1.5;
}

.rf-label b {
  margin-right: 3px;
  color: #d14457;
}

.rf-field > input,
.rf-field > select,
.rf-field > textarea {
  min-height: var(--rf-input-height, 48px);
  padding: 11px 13px;
  color: var(--text);
  font-size: var(--rf-field-input-size, var(--rf-input-size, 15px));
  font-weight: 550;
  background: var(--surface-solid);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius, 12px);
  box-shadow: 0 2px 5px rgba(22, 52, 91, .025);
}

.rf-field > textarea {
  min-height: calc(var(--rf-input-height, 48px) * 2.35);
  line-height: 1.8;
}

.rf-field > input:hover,
.rf-field > select:hover,
.rf-field > textarea:hover {
  border-color: color-mix(in srgb, var(--rf-accent) 55%, var(--rf-line));
}

.rf-field > input:focus,
.rf-field > select:focus,
.rf-field > textarea:focus {
  border-color: var(--rf-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rf-accent) 12%, transparent);
}

.rf-field > small {
  color: var(--muted);
  font-size: var(--rf-field-help-size, max(10px, calc(var(--rf-label-size, 14px) - 3px)));
  font-weight: 500;
}

.rf-field[hidden] {
  display: none;
}

.fs-canvas-field .fs-field-toolbar > div > strong {
  color: var(--rf-field-label-color, inherit);
  font-size: var(--rf-field-label-size, inherit);
  font-weight: var(--rf-field-label-weight, 750);
}

.fs-canvas-field .fs-field-control input,
.fs-canvas-field .fs-field-control select,
.fs-canvas-field .fs-field-control textarea {
  font-size: var(--rf-field-input-size, inherit);
}

.fs-canvas-field .fs-field-help {
  font-size: var(--rf-field-help-size, inherit);
}

.fs-canvas-native-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 4px 2px;
  border-top: 1px dashed #d6e1f0;
}

.rf-section {
  margin-top: 4px;
  padding: 13px 15px;
  background: linear-gradient(135deg, var(--rf-soft), color-mix(in srgb, var(--rf-soft) 35%, transparent));
  border-right: 4px solid var(--rf-accent);
  border-radius: var(--rf-radius, 12px);
}

.rf-section strong {
  color: var(--rf-accent-dark);
  font-size: calc(var(--rf-label-size, 14px) + 2px);
}

.rf-section p {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: calc(var(--rf-label-size, 14px) - 2px);
}

.rf-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  color: var(--text-soft);
  background: var(--rf-soft);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius, 12px);
}

.rf-note > span {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: var(--rf-accent);
  border-radius: 50%;
}

.rf-note p {
  margin: 0;
  font-size: calc(var(--rf-label-size, 14px) - 1px);
}

.rf-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--rf-line);
}

.rf-choice-list {
  display: flex;
  min-height: var(--rf-input-height, 48px);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rf-choice-list label {
  display: flex;
  min-height: 39px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: var(--text-soft);
  font-size: var(--rf-input-size, 15px);
  font-weight: 600;
  background: var(--surface-solid);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius, 12px);
  cursor: pointer;
}

.rf-choice-list input {
  width: 17px;
  height: 17px;
  accent-color: var(--rf-accent);
}

.rf-switch {
  display: flex;
  min-height: var(--rf-input-height, 48px);
  align-items: center;
  gap: 9px;
  color: var(--text-soft);
  font-size: var(--rf-input-size, 15px);
  cursor: pointer;
}

.rf-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rf-switch i {
  position: relative;
  width: 46px;
  height: 25px;
  background: #cbd6e3;
  border-radius: 99px;
  transition: .2s ease;
}

.rf-switch i::after {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 17px;
  height: 17px;
  content: "";
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
  transition: .2s ease;
}

.rf-switch input:checked + i {
  background: var(--rf-accent);
}

.rf-switch input:checked + i::after {
  transform: translateX(-21px);
}

.rf-file {
  display: flex;
  min-height: 86px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--rf-soft) 55%, var(--surface-solid));
  border: 1px dashed color-mix(in srgb, var(--rf-accent) 50%, var(--rf-line));
  border-radius: var(--rf-radius, 12px);
  cursor: pointer;
}

.rf-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rf-file > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  font-size: 20px;
  background: var(--rf-accent);
  border-radius: 12px;
}

.rf-file > div {
  display: grid;
}

.rf-file strong {
  color: var(--rf-accent-dark);
  font-size: var(--rf-input-size, 15px);
}

.rf-file small {
  color: var(--muted);
  font-size: 10px;
}

.rf-rating {
  display: flex;
  min-height: var(--rf-input-height, 48px);
  align-items: center;
  gap: 4px;
  direction: ltr;
}

.rf-rating button {
  width: 34px;
  height: 34px;
  padding: 0;
  color: #efa824;
  font-size: 22px;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.rf-rating button:hover {
  background: #fff6df;
}

.rf-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 7px 10px;
  align-items: center;
  min-height: var(--rf-input-height, 48px);
}

.rf-scale input {
  width: 100%;
  accent-color: var(--rf-accent);
}

.rf-scale output {
  display: grid;
  min-height: 32px;
  place-items: center;
  color: var(--rf-accent-dark);
  font-size: 12px;
  font-weight: 800;
  background: var(--rf-soft);
  border-radius: 9px;
}

.rf-scale > div {
  display: flex;
  grid-column: 1;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
}

.fs-standalone-intro {
  margin-bottom: 16px;
  padding: 17px 19px;
  color: #fff;
  background: linear-gradient(125deg, #102f62, #2369ca);
  border-radius: 16px;
}

.fs-standalone-intro span {
  color: #b9d2fa;
  font-size: 10px;
  font-weight: 800;
}

.fs-standalone-intro h3 {
  margin: 2px 0 4px;
  color: #fff;
  font-size: 20px;
}

.fs-standalone-intro p {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}

.rf-standalone-form .runtime-form-extension {
  margin: 0;
}

.modal:has(.rf-standalone-form),
.modal:has(.fs-preview-shell) {
  width: min(1180px, calc(100vw - 30px));
}

.modal:has(.fs-responses) {
  width: min(1240px, calc(100vw - 30px));
}

.fs-preview-shell.tablet {
  max-width: 800px;
  margin: auto;
}

.fs-preview-shell.mobile {
  max-width: 420px;
  margin: auto;
}

.fs-response-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.fs-response-tools span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.fs-response-values {
  display: grid;
  min-width: 300px;
  gap: 5px;
  margin-top: 8px;
  padding: 9px;
  background: var(--surface-soft);
  border-radius: 10px;
}

.fs-response-values > div {
  display: grid;
  grid-template-columns: minmax(90px, 130px) minmax(160px, 1fr);
  gap: 9px;
  padding: 5px;
  border-bottom: 1px solid var(--line);
}

.fs-response-values b {
  color: var(--text-soft);
  font-size: 10px;
  direction: ltr;
}

.fs-response-values span {
  font-size: 11px;
}

.my-forms-page {
  display: grid;
  gap: 20px;
}

.my-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.my-form-card {
  --rf-accent: #2468e5;
  position: relative;
  display: grid;
  min-width: 0;
  gap: 13px;
  padding: 20px;
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 19px;
  box-shadow: var(--shadow-soft);
}

.my-form-card::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  content: "";
  background: var(--rf-accent);
}

.my-form-card.rf-theme-teal { --rf-accent: #079779; }
.my-form-card.rf-theme-indigo { --rf-accent: #5b51c8; }
.my-form-card.rf-theme-slate { --rf-accent: #52657e; }
.my-form-card.rf-theme-sand { --rf-accent: #a06e28; }

.my-form-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--rf-accent);
  font-size: 21px;
  background: color-mix(in srgb, var(--rf-accent) 10%, var(--surface-solid));
  border-radius: 13px;
}

.my-form-card > div:nth-child(2) > span {
  color: var(--rf-accent);
  font-size: 10px;
  font-weight: 800;
}

.my-form-card h4 {
  margin: 2px 0 5px;
  color: var(--text);
  font-size: 16px;
}

.my-form-card p {
  min-height: 45px;
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
}

.my-form-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.my-form-meta span {
  padding: 4px 8px;
  color: var(--text-soft);
  font-size: 9px;
  background: var(--surface-soft);
  border-radius: 7px;
}

.my-form-card > button {
  width: 100%;
  min-height: 43px;
}

.my-form-history {
  margin-top: 4px;
}

html[data-theme="dark"] .fs-page {
  --fs-navy: #e5efff;
  --fs-blue: #70a6ff;
  --fs-blue-soft: rgba(75, 131, 224, .15);
  --fs-border: rgba(171, 199, 235, .15);
  --fs-muted: #92a6bf;
}

html[data-theme="dark"] .fs-shell,
html[data-theme="dark"] .fs-workspace,
html[data-theme="dark"] .fs-canvas {
  background-color: #0d1c2a;
}

html[data-theme="dark"] .fs-library,
html[data-theme="dark"] .fs-inspector,
html[data-theme="dark"] .fs-form-meta,
html[data-theme="dark"] .fs-workspace-toolbar,
html[data-theme="dark"] .fs-canvas-field,
html[data-theme="dark"] .fs-device-frame {
  background: #132638;
}

html[data-theme="dark"] .fs-library-tools input,
html[data-theme="dark"] .fs-library-tools select,
html[data-theme="dark"] .fs-palette-group button,
html[data-theme="dark"] .fs-field-control input,
html[data-theme="dark"] .fs-field-control textarea,
html[data-theme="dark"] .fs-field-control select,
html[data-theme="dark"] .fs-inspector-section input,
html[data-theme="dark"] .fs-inspector-section select,
html[data-theme="dark"] .fs-inspector-section textarea {
  color: var(--text);
  background: #102231;
}

html[data-theme="dark"] .fs-field-toolbar strong,
html[data-theme="dark"] .fs-section-preview strong,
html[data-theme="dark"] .fs-inspector-heading strong,
html[data-theme="dark"] .fs-subheading strong {
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .fs-page {
    --fs-navy: #e5efff;
    --fs-blue: #70a6ff;
    --fs-blue-soft: rgba(75, 131, 224, .15);
    --fs-border: rgba(171, 199, 235, .15);
    --fs-muted: #92a6bf;
  }
}

@media (max-width: 1500px) {
  .fs-shell {
    grid-template-columns: 250px minmax(420px, 1fr) 310px;
  }

  .fs-palette-group > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1220px) {
  .fs-page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fs-head-actions {
    justify-content: flex-start;
  }

  .fs-shell {
    grid-template-columns: 245px minmax(0, 1fr);
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .fs-library {
    min-height: 760px;
  }

  .fs-workspace {
    min-height: 760px;
  }

  .fs-inspector {
    grid-column: 1 / -1;
    min-height: 520px;
    border-top: 1px solid var(--fs-border);
    border-right: 0;
  }

  .fs-inspector-scroll {
    height: auto;
    max-height: 650px;
  }
}

@media (max-width: 900px) {
  .fs-shell {
    display: flex;
    flex-direction: column;
  }

  .fs-library {
    min-height: 0;
    border-bottom: 1px solid var(--fs-border);
    border-left: 0;
  }

  .fs-template-list {
    max-height: 260px;
  }

  .fs-palette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 400px;
    gap: 10px;
  }

  .fs-palette-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fs-workspace {
    min-height: 720px;
  }

  .my-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rf-field,
  .rf-section,
  .rf-note,
  .rf-divider {
    grid-column: span 1 !important;
  }

  .rf-span-12,
  .rf-span-8,
  .rf-span-9,
  .rf-section,
  .rf-note,
  .rf-divider {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 680px) {
  .fs-page-head {
    padding: 17px;
    border-radius: 17px;
  }

  .fs-page-head h3 {
    font-size: 18px;
  }

  .fs-head-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fs-head-actions button {
    width: 100%;
  }

  .fs-shell {
    border-radius: 17px;
  }

  .fs-palette {
    grid-template-columns: 1fr;
  }

  .fs-workspace-toolbar {
    grid-template-columns: auto 1fr;
  }

  .fs-device-switch {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }

  .fs-more-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .fs-stage-scroll {
    padding: 12px 7px;
  }

  .fs-canvas {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .fs-canvas-field {
    grid-column: 1 !important;
  }

  .fs-field-actions {
    display: flex;
  }

  .fs-inspector-scroll {
    padding: 12px;
  }

  .fs-two-cols,
  .fs-three-cols,
  .fs-toggle-row,
  .fs-role-grid {
    grid-template-columns: 1fr;
  }

  .runtime-form-extension {
    padding: 16px 13px;
    border-radius: 14px;
  }

  .rf-grid {
    grid-template-columns: 1fr;
  }

  .rf-field,
  .rf-section,
  .rf-note,
  .rf-divider {
    grid-column: 1 !important;
  }

  .rf-choice-list {
    display: grid;
  }

  .rf-choice-list label {
    width: 100%;
  }

  .my-form-grid {
    grid-template-columns: 1fr;
  }

  .modal:has(.rf-standalone-form),
  .modal:has(.fs-preview-shell),
  .modal:has(.fs-responses),
  .modal:has(form[data-form-target]) {
    width: calc(100vw - 12px);
  }

  .modal:has(form[data-form-target]) .modal-body {
    padding: 16px 13px;
  }
}