:root {
  --shell-bg: #f4f4f5;
  --shell-fg: #09090b;
  --shell-muted: #71717a;
  --shell-border: #e4e4e7;
  --shell-surface: #ffffff;
  --shell-muted-bg: #f4f4f5;
  --shell-tab: #ffffff;
  --code-bg: #fafafa;
  --code-fg: #383a42;
  --code-muted: #a0a1a7;
  --code-bar: #ffffff;
  --code-border: #e4e4e7;
  --jf-gap: 16px;
  color-scheme: light;
}

html[data-color-scheme="dark"] {
  --shell-bg: #18181b;
  --shell-fg: #fafafa;
  --shell-muted: #a1a1aa;
  --shell-border: #3f3f46;
  --shell-surface: #27272a;
  --shell-muted-bg: #3f3f46;
  --shell-tab: #3f3f46;
  --code-bg: #282c34;
  --code-fg: #abb2bf;
  --code-muted: #5c6370;
  --code-bar: #21252b;
  --code-border: #3e4451;
  color-scheme: dark;
}

html[data-color-scheme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--shell-bg);
  color: var(--shell-fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

#root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 16px 4px;
  min-width: 0;
}

.caption {
  flex: 1 1 auto;
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid var(--shell-border);
  color: var(--shell-fg);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.caption-button {
  border-top: none;
  border-right: none;
  border-bottom: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: text;
}

.caption-button:hover { text-decoration: underline; }

.caption-input {
  height: 28px;
  min-width: 12rem;
  max-width: 16rem;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
  color: var(--shell-fg);
  font: inherit;
  font-size: 14px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.tool {
  display: flex;
}

.tool select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
  color: var(--shell-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
}

.save-warning {
  flex-shrink: 0;
  margin: 0;
  padding: 0 16px 6px;
  color: #dc2626;
  font-size: 13px;
}

html[data-color-scheme="dark"] .save-warning { color: #f87171; }

.icon-group {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
}

.viewport-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--shell-muted);
  cursor: pointer;
}

.icon-button svg { display: block; }

.icon-button:hover,
.icon-button[aria-pressed="true"],
.icon-button[aria-expanded="true"] {
  background: var(--shell-muted-bg);
  color: var(--shell-fg);
}

.bin-button:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

html[data-color-scheme="dark"] .bin-button:hover { color: #f87171; }

.viewport-switch + .theme-slot {
  margin-left: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--shell-border);
}

.theme-slot { position: relative; }

html[data-color-scheme="dark"] #moon,
html[data-color-scheme="light"] #sun { display: none; }

.stage-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 12px 16px;
}

.site-footer {
  flex-shrink: 0;
  padding: 4px 16px 12px;
  color: var(--shell-muted);
  font-size: 13px;
  text-align: center;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--shell-fg);
  text-decoration: underline;
}

.stage {
  flex: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.stage[hidden] { display: none; }

.stage[data-frame] {
  justify-content: center;
  padding: 16px;
  border-radius: 12px;
  background:
    radial-gradient(circle, var(--shell-border) 1px, transparent 1.2px) 0 0 / 16px 16px;
}

.stage[data-frame="tablet"] .preview { width: min(100%, 768px); }
.stage[data-frame="mobile"] .preview { width: min(100%, 390px); }

.stage[data-frame] .preview {
  flex: 0 1 auto;
  min-height: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.preview {
  flex: 1;
  overflow: auto;
  background: var(--shell-surface);
  border: 1px solid var(--shell-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  padding: 24px;
  min-width: 0;
  min-height: 0;
}

.editor-tabs {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 32px;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
}

.editor-tab {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--shell-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.editor-tab[aria-selected="true"] {
  background: var(--shell-muted-bg);
  color: var(--shell-fg);
}

.editor-tab[data-invalid]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #dc2626;
}

.editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.code-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--code-border);
  border-radius: 12px;
  background: var(--code-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--code-border);
  background: var(--code-bar);
  color: var(--code-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.code-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--code-fg);
}

.code-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--code-muted);
  cursor: pointer;
}

.code-copy:hover { background: color-mix(in srgb, var(--code-fg) 8%, transparent); color: var(--code-fg); }

.json-editor {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--code-bg);
}

.json-editor .cm-editor {
  height: 100%;
  background: var(--code-bg);
  color: var(--code-fg);
}

.json-editor .cm-scroller { overflow: auto; }

.json-editor .cm-scroller {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.json-editor .cm-content,
.json-editor .cm-line {
  tab-size: 2;
}

.json-editor .cm-content { padding: 12px 0; }

.json-editor .cm-gutters {
  background: var(--code-bg);
  color: var(--code-muted);
  border-right: none;
}

.json-editor .cm-activeLine,
.json-editor .cm-activeLineGutter { background: transparent; }

.json-editor .cm-cursor { border-left-color: var(--code-fg); }

.json-editor .cm-selectionBackground {
  background: color-mix(in srgb, #4078f2 22%, transparent);
}

.tool select:focus,
.json-editor:focus-within,
.icon-button:focus-visible,
.code-copy:focus-visible,
.editor-tab:focus-visible {
  outline: none;
  border-color: var(--shell-fg);
  box-shadow: 0 0 0 2px var(--shell-bg), 0 0 0 4px var(--shell-muted);
}

#form input:focus,
#form select:focus,
#form textarea:focus,
#form button:focus-visible {
  outline: none;
  border-color: var(--shell-fg);
  box-shadow: 0 0 0 2px var(--shell-surface), 0 0 0 4px var(--shell-muted);
}

.editor[data-invalid] .code-frame { border-color: #dc2626; }

.editor-error {
  min-height: 1em;
  color: #dc2626;
  font-size: 12px;
  font-weight: 500;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#form {
  color: var(--shell-fg);
}

#form [hidden] { display: none !important; }

#form .vertical-layout,
#form .array-layout,
#form .array-control-layout,
#form .array-table-layout {
  display: flex;
  flex-direction: column;
  gap: var(--jf-gap);
  min-width: 0;
}

#form .horizontal-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jf-gap);
  align-items: flex-start;
}

#form .horizontal-layout > .horizontal-layout-item,
#form .horizontal-layout > * {
  flex: 1 1 160px;
  min-width: 0;
}

#form .control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

#form .control > label,
#form .array-table-layout header label,
#form .group-layout > legend {
  color: var(--shell-fg);
  font-size: 0.82rem;
  font-weight: 500;
}

#form .group-layout > legend {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 6px;
}

#form input:not([type="checkbox"]):not([type="radio"]),
#form select,
#form textarea {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
  color: var(--shell-fg);
  font: inherit;
  font-size: 14px;
}

#form textarea { min-height: 88px; resize: vertical; }

#form input[readonly],
#form textarea[readonly],
#form select[data-readonly]:disabled,
#form input[data-readonly]:disabled {
  opacity: 1;
  background: var(--shell-muted-bg);
  color: var(--shell-fg);
  cursor: default;
}

#form input:disabled,
#form select:disabled,
#form textarea:disabled,
#form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#form input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--shell-fg);
}

#form .validation,
#form .input-description {
  margin: 0;
  font-size: 12px;
}

#form .validation { color: #dc2626; }
#form .validation:empty { display: none; }
#form .input-description { color: var(--shell-muted); }
#form .validation_error input,
#form .validation_error select,
#form .validation_error textarea { border-color: #dc2626; }

html[data-color-scheme="dark"] #form .validation { color: #f87171; }

#form .group-layout {
  margin: 0;
  padding: 8px 14px 14px;
  border: 1px solid var(--shell-border);
  border-radius: 10px;
}

#form .categorization {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#form .categorization-detail > div,
#form .group-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#form .categorization-master ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--shell-border);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#form .categorization-master ul::-webkit-scrollbar { display: none; }

#form .categorization-master li {
  margin: 0;
  padding: 8px 12px 6px;
  border-bottom: 2px solid transparent;
  color: var(--shell-muted);
  font-weight: 500;
  cursor: pointer;
}

#form .categorization-master li.selected {
  color: var(--shell-fg);
  border-bottom-color: var(--shell-fg);
}

#form .categorization-detail { min-width: 0; }

#form button {
  align-self: flex-start;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
  color: var(--shell-fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

#form button:hover { background: var(--shell-muted-bg); }

#form .array-table-layout table {
  width: 100%;
  border-collapse: collapse;
}

#form .array-table-layout th,
#form .array-table-layout td {
  border: 1px solid var(--shell-border);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

#form .array-control-layout .children > div {
  position: relative;
  padding: 44px 12px 12px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
}

#form .child-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--shell-border);
  border-radius: 8px;
  background: var(--shell-surface);
}

#form .button-up,
#form .button-down,
#form .button-delete {
  position: relative;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
}

#form .button-up::before,
#form .button-down::before,
#form .button-delete::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--shell-muted);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

#form .button-up {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}

#form .button-down {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

#form .button-delete {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E");
}

#form .button-up:hover,
#form .button-down:hover { background: var(--shell-muted-bg); }

#form .button-up:hover::before,
#form .button-down:hover::before { background: var(--shell-fg); }

#form .button-delete:hover { background: rgba(220, 38, 38, 0.12); }

#form .button-delete:hover::before { background: #dc2626; }

html[data-color-scheme="dark"] #form .button-delete:hover::before { background: #f87171; }

#form header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview[data-device="mobile"] #form .horizontal-layout {
  flex-direction: column;
  flex-wrap: nowrap;
}

.preview[data-device="mobile"] #form .horizontal-layout > .horizontal-layout-item,
.preview[data-device="mobile"] #form .horizontal-layout > * {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
}

#form .categorization-master { min-width: 0; }

#form .array-table-layout { overflow-x: auto; }

@media (max-width: 760px) {
  .topbar { flex-wrap: nowrap; }
  .caption { border-left: none; padding-left: 0; }
  .caption-input { min-width: 0; max-width: 10rem; }
  .header-actions { margin-left: auto; }
  .tool select { max-width: 12rem; }
  .preview { padding: 16px; }

  #form .horizontal-layout {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  #form .horizontal-layout > .horizontal-layout-item,
  #form .horizontal-layout > * {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }
}