/* This stylesheet belongs to the editor shell, never the canvas or export. */
:root {
  color-scheme: only light;
  --bg: #f5f6f7;
  --panel: #fff;
  --panel-high: #e9edf0;
  --ink: #121416;
  --muted: #535b64;
  --line: #abb2bb;
  --accent: #245bff;
  --editor-header: #f5f6f7;
  --editor-field: #fff;
  --editor-field-border: #848d97;
  --editor-hover: #dce1e5;
  --editor-accent-text: #245bff;
  --editor-focus: #245bff;
  --editor-stage: #dce1e5;
  --editor-selected: #121416;
  --editor-selected-ink: #fff;
  --editor-error: #a32432;
  --editor-success: #196746;
  --editor-shade: rgba(18, 20, 22, .08);
}

:root[data-editor-theme="dark"] {
  color-scheme: only dark;
  --bg: #121416;
  --panel: #1b1f24;
  --panel-high: #30363e;
  --ink: #f5f6f7;
  --muted: #bcc5cf;
  --line: #59636f;
  --editor-header: #121416;
  --editor-field: #14171b;
  --editor-field-border: #76818f;
  --editor-hover: #3d4651;
  --editor-accent-text: #9ab5ff;
  --editor-focus: #9ab5ff;
  --editor-stage: #101215;
  --editor-selected: #dce1e5;
  --editor-selected-ink: #121416;
  --editor-error: #ffb8b8;
  --editor-success: #a7dec7;
  --editor-shade: rgba(0, 0, 0, .18);
}

.editor-app {
  --gjs-primary-color: var(--panel);
  --gjs-secondary-color: var(--muted);
  --gjs-tertiary-color: var(--accent);
  --gjs-quaternary-color: var(--editor-accent-text);
  --gjs-font-color: var(--ink);
  --gjs-font-color-active: #fff;
  --gjs-main-light-color: var(--editor-shade);
  --gjs-main-dark-color: var(--editor-shade);
  --gjs-color-blue: var(--accent);
  --gjs-color-highlight: var(--editor-accent-text);
}

html, .editor-app * { scrollbar-color: var(--editor-field-border) var(--panel); }
.editor-app ::selection { background: var(--accent); color: #fff; }
.editor-app :is(input, textarea) { caret-color: var(--editor-accent-text); }
.editor-app :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
.editor-app :focus-visible { outline-color: var(--editor-focus); }
.editor-app select option { background: var(--editor-field); color: var(--ink); }

.editor-header { background: var(--editor-header); border-color: var(--line); }
.editor-brand strong { white-space: nowrap; }
.sidebar-footer { flex-direction: column; gap: 9px; }
.editor-founder { color: var(--ink); font-size: 13px; line-height: 1.4; }
.editor-founder span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.editor-founder:hover { color: var(--editor-accent-text); }
.editor-toolbar { background: var(--panel); border-color: var(--line); }
.project-name input:hover, .project-name input:focus { border-color: var(--editor-field-border); }
.editor-devices { background: var(--bg); }
.editor-devices [aria-pressed="true"],
.editor-app.is-preview #preview-toggle { background: var(--editor-selected); color: var(--editor-selected-ink); }
.editor-sidebar, .editor-tabs { background: var(--panel); border-color: var(--line); }
.editor-tabs > button[aria-selected="true"] { color: var(--editor-accent-text); border-color: currentColor; }
.editor-app :is(.primary, .ai-entry) { background: var(--accent); color: #fff; }
.editor-app :is(.primary, .ai-entry):hover { background: #1848d6; }
.editor-app .button:hover { transform: none; }
.editor-app .secondary-button, .sidebar-command, .selection-actions .icon-button { background: var(--panel-high); color: var(--ink); }
.editor-app :is(.secondary-button, .sidebar-command, .selection-actions .icon-button):hover { background: var(--editor-hover); }
.editor-app .ai-entry:hover { background: #1848d6; }
#editor-appearance-toggle { border: 1px solid var(--line); }
#editor-appearance-toggle:hover { background: var(--panel-high); }
.editor-canvas, .gjs-cv-canvas { background: var(--editor-stage); }

/* Freeze the embed's ambient scheme so UI toggles cannot alter authored media queries or native controls. */
.gjs-frame, #ai-preview { color-scheme: only light; }
.gjs-one-bg { background: var(--panel); }
.gjs-two-color, .gjs-layer-name, .gjs-sm-clear { color: var(--ink); }
.gjs-four-color, .gjs-four-color-h:hover { color: var(--editor-accent-text); }
.gjs-selected { outline-color: var(--accent) !important; }
.gjs-toolbar, .gjs-badge { background: var(--accent); color: #fff; }
.gjs-block, .block-button { background: var(--panel-high); color: var(--ink); }
.gjs-block:hover, .block-button:hover, .block-button:focus-visible { background: var(--editor-hover); border-color: var(--editor-accent-text); }
.block-button svg { color: var(--ink); }
.gjs-sm-sector-title { background: var(--panel-high); }
.gjs-sm-sector { border-color: var(--line); }
.gjs-sm-sector-caret { fill: var(--ink); }
.gjs-field { background: var(--editor-field); border-color: var(--editor-field-border); }
.gjs-field input, .gjs-field select { color: var(--ink); }
.gjs-field-arrow-u { border-bottom-color: var(--muted); }
.gjs-field-arrow-d { border-top-color: var(--muted); }
.gjs-field .gjs-d-s-arrow { border-top-color: var(--muted); }
.gjs-field-range input { accent-color: var(--accent); }
.gjs-color-warn { color: var(--editor-error); }

.properties-heading, .selection-header, .content-editor { border-color: var(--line); }
.content-editor input, .content-editor textarea { background: var(--editor-field); border-color: var(--editor-field-border); }
.save-status, .local-label, .sidebar-footer, .gjs-layer-count, .gjs-sm-label,
.selection-header > span, .content-editor label, #selection-empty,
.template-options span, .template-notice, .image-upload > span, .image-upload p { color: var(--muted); }
.save-status[data-error="true"], #link-error, .image-upload #upload-error { color: var(--editor-error); }
#editor-loading { background: var(--panel); color: var(--muted); }
.editor-app dialog { background: var(--panel); color: var(--ink); border-color: var(--line); }
.editor-app .dialog-heading { background: var(--panel-high); border-color: var(--line); }
.editor-app dialog::backdrop { background: rgba(10, 12, 16, .6); }
.template-options > button, .image-library button { background: var(--panel-high); border-color: var(--line); }
.template-options > button:hover, .image-library button:hover { border-color: var(--editor-accent-text); }
#editor-message { background: var(--editor-selected); color: var(--editor-selected-ink); }

.ai-prompt-panel, #ai-setup { border-color: var(--line); }
.ai-connection, .ai-prompt-meta, .ai-note, #ai-progress, #ai-setup p, #ai-result-name, #ai-empty { color: var(--muted); }
#ai-connection[data-state="ready"] { color: var(--editor-success); }
#ai-prompt { background: var(--editor-field); color: var(--ink); border-color: var(--editor-field-border); caret-color: var(--editor-accent-text); }
#ai-prompt::placeholder { color: var(--muted); }
#ai-error { color: var(--editor-error); }
#ai-setup a { color: var(--editor-accent-text); }
#ai-setup code { color: var(--ink); }
.ai-result-panel { background: var(--bg); }
#ai-preview { border-color: var(--line); }
.ai-consent input { accent-color: var(--accent); }

.editor-app { display: flex; flex-direction: column; }
.editor-header, .editor-toolbar { flex-shrink: 0; }
.editor-workspace { flex: 1; min-height: 0; height: auto; }
.editor-canvas { min-height: 0; }
.website-theme-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 18px;
  padding: 8px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
#website-theme-label { font-size: 12px; color: var(--muted); }
.website-theme-options { display: flex; gap: 2px; padding: 2px; background: var(--bg); border-radius: 4px; }
.website-theme-options button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  min-width: 82px;
  padding: 7px 10px;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}
.website-theme-options button:hover { background: var(--panel-high); color: var(--ink); }
.website-theme-options button[aria-pressed="true"] { background: var(--editor-selected); color: var(--editor-selected-ink); }
.website-theme-options svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .website-theme-bar { flex-direction: column; gap: 4px; padding: 6px 12px 8px; }
  .website-theme-options { width: 100%; max-width: 360px; }
  .website-theme-options button { flex: 1; min-width: 0; min-height: 40px; }
}

@media (max-width: 400px) {
  .editor-header #editor-appearance-toggle { width: 34px; }
}

@media (max-width: 600px) {
  .editor-header { height: auto; flex-wrap: wrap; padding-block: 8px; row-gap: 6px; }
  .editor-brand { margin-right: auto; }
  .editor-header .project-name { order: 1; flex: 1 0 100%; max-width: none; }
  .editor-header .project-name input { border-color: var(--line); background: var(--editor-field); }
}