:root {
  color-scheme: light;
  --ink: #122128;
  --muted: #607074;
  --line: #d7dedb;
  --paper: #f3f0e9;
  --white: #ffffff;
  --coral: #dc684f;
  --coral-dark: #b94f39;
  --teal: #278b82;
  --violet: #6f4c71;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 20px;
  color: #fff;
  background: #122128;
  box-shadow: 0 5px 22px rgba(7, 20, 25, .18);
}

.toolbar-title, .toolbar-actions { display: flex; align-items: center; gap: 12px; }
.toolbar-title > div { display: grid; gap: 3px; }
.toolbar-title strong { font-size: 16px; }
.toolbar-title span { color: #b9c5c5; font-size: 12px; }
.editor-brand-logo { width: 100px; height: 50px; object-fit: contain; }
.save-state { min-width: 116px; color: #bec8c9; font-size: 12px; text-align: right; }
.save-state.dirty { color: #ffd39d; }
.save-state.saved { color: #9fdbcf; }
.save-state.error { color: #ffb5a6; }

.button {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 750;
}
.button.primary { color: #fff; background: var(--coral); }
.button.primary:hover:not(:disabled) { background: var(--coral-dark); }
.button.secondary { color: #fff; border-color: rgba(255,255,255,.22); background: transparent; }
.button.secondary:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.button:disabled { cursor: not-allowed; opacity: .42; }

.workspace { display: grid; min-height: calc(100vh - 72px); grid-template-columns: minmax(420px, 44%) 1fr; }
.editor-panel { padding: 30px clamp(20px, 3vw, 42px) 100px; overflow: auto; }
.editor-intro { max-width: 700px; }
.editor-intro h1 { margin: 0 0 8px; font-family: Georgia, serif; font-size: clamp(28px, 3vw, 39px); letter-spacing: -.025em; }
.editor-intro p { margin: 0; color: var(--muted); line-height: 1.6; }

.section-nav { display: flex; gap: 7px; margin: 24px 0 17px; padding-bottom: 7px; overflow-x: auto; scrollbar-width: thin; }
.section-nav a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.64); font-size: 12px; font-weight: 700; text-decoration: none; }
.section-nav a:hover { color: var(--violet); border-color: #b7a7b7; }

.content-section { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); box-shadow: 0 9px 24px rgba(19, 34, 40, .04); }
.content-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; }
.content-section > summary::-webkit-details-marker { display: none; }
.content-section > summary::after { content: "+"; color: var(--teal); font-size: 24px; font-weight: 400; }
.content-section[open] > summary::after { content: "−"; }
.summary-copy { display: grid; gap: 3px; }
.summary-copy strong { font-size: 15px; }
.summary-copy span { color: var(--muted); font-size: 12px; }
.section-body { display: grid; gap: 18px; padding: 3px 20px 24px; }

.field { display: grid; gap: 7px; }
.field > label, .group-label { color: #33454b; font-size: 12px; font-weight: 800; letter-spacing: .015em; }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field textarea, .field select {
  width: 100%;
  border: 1px solid #cbd4d1;
  border-radius: 10px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.field input, .field select { min-height: 43px; padding: 9px 11px; }
.field textarea { min-height: 88px; padding: 11px; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(39, 139, 130, .13); }
.field-hint { color: #728084; font-size: 11px; line-height: 1.4; }
.field.checkbox { display: flex; align-items: center; gap: 9px; }
.field.checkbox input { width: 18px; height: 18px; accent-color: var(--teal); }

.object-group { display: grid; gap: 13px; padding: 14px; border: 1px solid #e2e6e3; border-radius: 12px; background: #fafbf9; }
.object-group > .group-label { color: var(--violet); }
.array-group { display: grid; gap: 10px; }
.array-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.add-button, .icon-button { border: 1px solid #c7d1cd; color: #2e5151; background: #fff; font-size: 12px; font-weight: 750; }
.add-button { min-height: 34px; padding: 0 11px; border-radius: 999px; }
.add-button:hover, .icon-button:hover { border-color: var(--teal); color: var(--teal); }
.array-item { padding: 13px; border: 1px solid #dde3df; border-radius: 12px; background: #fafbf9; }
.array-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.array-item-title { max-width: 62%; overflow: hidden; color: #4b5d62; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.array-item-actions { display: flex; gap: 5px; }
.icon-button { min-width: 31px; min-height: 30px; padding: 0 7px; border-radius: 8px; }
.icon-button.remove { color: #a84836; }
.array-item-body { display: grid; gap: 13px; }
.section-order-item .array-item-head { margin-bottom: 0; }
.empty-array { padding: 14px; border: 1px dashed #cbd4d1; border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }

.preview-panel { position: sticky; top: 72px; height: calc(100vh - 72px); padding: 16px; overflow: hidden; background: #dbe2df; }
.preview-toolbar { display: flex; height: 46px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px; }
.preview-toolbar > div:first-child { display: grid; gap: 2px; }
.preview-toolbar strong { font-size: 13px; }
.preview-toolbar span { color: #68787b; font-size: 11px; }
.viewport-buttons { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.58); }
.viewport-button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 999px; color: #536468; background: transparent; font-size: 11px; font-weight: 750; }
.viewport-button.active { color: #fff; background: #294148; }
.preview-canvas { display: grid; height: calc(100% - 46px); place-items: start center; overflow: auto; border-radius: 14px; background: #b9c2bf; box-shadow: inset 0 2px 12px rgba(19,34,40,.12); }
.preview-canvas iframe { width: 100%; height: 100%; border: 0; background: #fff; transition: width .2s ease; }
.preview-canvas iframe.mobile { width: 390px; max-width: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 18px 45px rgba(19,34,40,.18); }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 50; max-width: min(420px, calc(100vw - 44px)); padding: 12px 16px; border-radius: 11px; color: #fff; background: #294148; box-shadow: 0 16px 40px rgba(0,0,0,.22); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .18s ease, transform .18s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: #8c392a; }

@media (max-width: 950px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { position: relative; top: 0; height: 70vh; order: -1; }
  .editor-panel { overflow: visible; }
}

@media (max-width: 650px) {
  .toolbar { position: relative; align-items: flex-start; flex-direction: column; }
  .toolbar-actions { width: 100%; justify-content: flex-end; }
  .save-state { margin-right: auto; text-align: left; }
  .preview-panel { height: 64vh; padding: 8px; }
  .editor-panel { padding: 24px 14px 80px; }
  .toolbar-title span { max-width: 250px; }
}

[hidden]{display:none!important}#auth-gate{max-width:640px;margin:40px auto;padding:24px}.toolbar-actions{flex-wrap:wrap}.toolbar-title span{max-width:380px}@media(max-width:600px){.toolbar-actions{width:100%;justify-content:flex-start}.toolbar-title{width:100%}}