/* ==========================================================================
   Zeon Code - IDE STYLES (VS Code style)
   ========================================================================== */

.ide-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}

/* ---- Top toolbar --------------------------------------------------------- */
.ide-topbar {
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: var(--glass-border-subtle);
  overflow-x: auto;
}

.ide-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  white-space: nowrap;
  flex-shrink: 0;
}

.ide-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.ide-btn.active { background: var(--accent-light); color: var(--accent); }
.ide-btn svg { width: 14px; height: 14px; }
.ide-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.1); margin: 0 3px; flex-shrink: 0; }
.ide-spacer { flex: 1; }

/* ---- Body layout --------------------------------------------------------- */
.ide-body { flex: 1; display: flex; min-height: 0; }

.ide-activitybar {
  width: 44px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-right: var(--glass-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  gap: 2px;
}

.ide-act {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  position: relative;
  cursor: pointer;
}
.ide-act:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.ide-act.active { color: var(--accent); }
.ide-act.active::before {
  content: '';
  position: absolute;
  left: -6px; top: 7px; bottom: 7px; width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.ide-act svg { width: 18px; height: 18px; }

.ide-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.18);
  border-right: var(--glass-border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ide-sidebar.hidden, .ide-activitybar.hidden { display: none; }

.ide-side-head {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 10px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
}
.ide-side-actions { display: flex; gap: 2px; }
.ide-side-actions .ide-btn { padding: 2px 5px; }

.ide-tree { flex: 1; overflow: auto; padding: 2px 0 16px; }

.ide-tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.ide-tree-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-primary); }
.ide-tree-item.active { background: var(--accent-light); color: var(--text-primary); }
.ide-tree-item .tw { width: 11px; flex-shrink: 0; opacity: 0.65; display: inline-flex; }
.ide-tree-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.ide-tree-leaf { color: var(--text-muted); }

.ide-root {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: 0.2px;
}
.ide-root:hover { background: rgba(255, 255, 255, 0.05); }
.ide-root .tag {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ide-empty-note { padding: 14px 12px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }

/* ---- Editor column ------------------------------------------------------- */
.ide-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.ide-tabs {
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: var(--glass-border-subtle);
  overflow-x: auto;
}

.ide-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
  border-right: var(--glass-border-subtle);
  cursor: pointer;
  white-space: nowrap;
  max-width: 190px;
}
.ide-tab.active { background: rgba(0, 0, 0, 0.35); color: var(--text-primary); box-shadow: inset 0 2px 0 var(--accent); }
.ide-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.ide-tab .nm { overflow: hidden; text-overflow: ellipsis; }
.ide-tab .x {
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; opacity: 0.6;
}
.ide-tab .x:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.ide-tab .x svg { width: 11px; height: 11px; }

.ide-editor { flex: 1; display: flex; min-height: 0; position: relative; background: rgba(0, 0, 0, 0.32); }

.ide-gutter {
  width: 52px;
  flex-shrink: 0;
  padding: 10px 8px 40px 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 0.55;
  user-select: none;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
}

.ide-code { position: relative; flex: 1; min-width: 0; }

.ide-hl, .ide-input {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 10px 14px 40px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
  border: 0;
  word-wrap: normal;
}
.ide-hl { pointer-events: none; overflow: hidden; color: var(--text-primary); background: transparent; }
.ide-input {
  overflow: auto;
  resize: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--accent);
}
.ide-input::selection { background: rgba(59, 130, 246, 0.35); }

/* ---- Find & replace bar -------------------------------------------------- */
.ide-findbar {
  position: absolute;
  top: 8px;
  right: 16px;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  background: var(--menu-bg);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.ide-findbar.show { display: flex; }
.ide-findbar input {
  width: 130px;
  padding: 3px 7px;
  font-size: 12px;
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.35);
  border: var(--glass-border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
  outline: none;
}
.ide-findbar input:focus { border-color: var(--accent); }

/* ---- Token colors -------------------------------------------------------- */
.tok-com { color: #64748b; font-style: italic; }
.tok-str { color: #7ee787; }
.tok-num { color: #f0a35e; }
.tok-kw { color: #c084fc; }
.tok-fn { color: #79c0ff; }
.tok-pun { color: #94a3b8; }
.tok-tag { color: #7ee787; }
.tok-attr { color: #79c0ff; }
.tok-prop { color: #79c0ff; }
.tok-sel { color: #f0a35e; }
.tok-at { color: #c084fc; }
.tok-head { color: #c084fc; font-weight: 600; }
.tok-bold { font-weight: 700; }
.tok-em { font-style: italic; }
.tok-code { color: #f0a35e; }
.tok-link { color: #79c0ff; text-decoration: underline; }

/* ---- Welcome / empty state ---------------------------------------------- */
.ide-welcome {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(10, 12, 20, 0.72);
  color: var(--text-muted);
  text-align: center;
  padding: 24px;
  overflow-y: auto;
}
.ide-welcome h3 { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.ide-welcome .rows { display: flex; flex-direction: column; gap: 6px; font-size: 12px; margin-top: 4px; }
.ide-welcome-brand { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: var(--accent); opacity: 0.9; }
.ide-welcome-brand svg { width: 42px; height: 42px; }
.ide-welcome-sub { margin: -4px 0 4px; font-size: 12.5px; color: var(--text-muted); }
.ide-welcome-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  width: min(470px, 100%);
  margin: 4px 0 8px;
  text-align: left;
}
.ide-welcome-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: var(--glass-border-subtle);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary);
  text-align: left;
  transition: all var(--transition-fast);
}
.ide-welcome-action:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.ide-welcome-action .ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.ide-welcome-action .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ide-welcome-action b { font-size: 12.5px; font-weight: 600; }
.ide-welcome-action small { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ide-empty-note { padding: 14px 12px; font-size: 12px; color: var(--text-muted); line-height: 1.7; text-align: left; }
.ide-link-btn { color: var(--accent); font-size: inherit; padding: 0; text-decoration: underline; }
.ide-tree-item.selected, .ide-root.selected { background: var(--accent-light); color: var(--text-primary); }
.ide-statusbar #ide-sb-autosave { cursor: pointer; color: var(--accent); }
.ide-statusbar #ide-sb-autosave.autosave-off { color: var(--text-muted); }

/* ---- New file / folder dialog -------------------------------------------- */
.ide-dialog-backdrop {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 7, 14, 0.58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.ide-dialog {
  width: min(430px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-solid, #151a28);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ide-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px 12px;
  border-bottom: var(--glass-border-subtle);
}
.ide-dialog-title { font-size: 15px; font-weight: 650; color: var(--text-primary); }
.ide-dialog-sub { margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); word-break: break-all; }
.ide-dialog-close { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); color: var(--text-secondary); }
.ide-dialog-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.ide-dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.ide-dialog-field { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--text-muted); }
.ide-dialog-field input, .ide-dialog-field select {
  width: 100%;
  height: 33px;
  padding: 0 10px;
  border: var(--glass-border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.28);
  color: var(--text-primary);
  font-size: 12.5px;
  outline: none;
}
.ide-dialog-field input:focus, .ide-dialog-field select:focus { border-color: var(--accent); }
.ide-dialog-note { padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.ide-dialog-note.danger { color: #fca5a5; background: rgba(248, 113, 113, 0.08); }
.ide-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: var(--glass-border-subtle); }
.ide-kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---- Live preview -------------------------------------------------------- */
.ide-preview {
  width: 44%;
  min-width: 220px;
  flex-shrink: 0;
  border-left: var(--glass-border-subtle);
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.ide-preview.hidden { display: none; }

.ide-preview-head {
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-secondary);
  font-size: 11px;
}
.ide-preview-head .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ide-preview-frame { flex: 1; border: 0; background: #ffffff; width: 100%; }

.ide-console {
  height: 108px;
  flex-shrink: 0;
  display: none;
  overflow: auto;
  background: #0b0e14;
  border-top: var(--glass-border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
}
.ide-console.show { display: block; }
.ide-console-line { padding: 1px 0; color: #94a3b8; border-bottom: 1px solid rgba(255, 255, 255, 0.04); white-space: pre-wrap; word-break: break-word; }
.ide-console-line.error { color: #f87171; }
.ide-console-line.warn { color: #fbbf24; }

/* ---- Status bar ---------------------------------------------------------- */
.ide-statusbar {
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.3);
  border-top: var(--glass-border-subtle);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.ide-statusbar .grow { flex: 1; }
.ide-statusbar .sb { cursor: default; }
.ide-statusbar .sb:hover { color: var(--text-primary); }

/* ---- Command palette ----------------------------------------------------- */
.ide-palette-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 56px;
}
.ide-palette {
  width: min(560px, 92%);
  max-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surface-solid);
  border: var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.ide-palette input {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: var(--glass-border-subtle);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.ide-palette-list { overflow: auto; padding: 4px 0; }
.ide-palette-item { padding: 7px 14px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; display: flex; justify-content: space-between; gap: 14px; }
.ide-palette-item.sel, .ide-palette-item:hover { background: var(--accent-light); color: var(--text-primary); }
.ide-palette-item .k { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.6; }

/* ---- Floating menus ------------------------------------------------------ */
.ide-pop {
  position: absolute;
  z-index: 30;
  min-width: 190px;
  padding: 4px;
  background: var(--menu-bg);
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.ide-pop .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.ide-pop .row:hover { background: var(--accent-light); color: var(--text-primary); }
.ide-pop .row.danger { color: #f87171; }
.ide-pop .row .k { font-family: var(--font-mono); font-size: 10.5px; opacity: 0.6; }
.ide-pop .hr { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 4px 2px; }

/* ======================================================================
   DARK THEME TEXT / ICON CONTRAST
   ====================================================================== */
[data-theme="dark"] .ide-btn,
[data-theme="dark"] .ide-tree-item,
[data-theme="dark"] .ide-root,
[data-theme="dark"] .ide-tab,
[data-theme="dark"] .ide-side-head,
[data-theme="dark"] .ide-gutter,
[data-theme="dark"] .ide-statusbar,
[data-theme="dark"] .ide-welcome,
[data-theme="dark"] .ide-welcome-sub,
[data-theme="dark"] .ide-welcome-action,
[data-theme="dark"] .ide-welcome-action small,
[data-theme="dark"] .ide-empty-note,
[data-theme="dark"] .ide-dialog-field,
[data-theme="dark"] .ide-dialog-sub,
[data-theme="dark"] .ide-dialog-note,
[data-theme="dark"] .ide-palette-item,
[data-theme="dark"] .ide-pop .row {
  color: #cbd5e1;
}

[data-theme="dark"] .ide-act {
  color: #cbd5e1;
}

[data-theme="dark"] .ide-act.active,
[data-theme="dark"] .ide-btn.active,
[data-theme="dark"] .ide-welcome-brand,
[data-theme="dark"] .ide-welcome-action .ico,
[data-theme="dark"] .ide-link-btn,
[data-theme="dark"] .ide-statusbar #ide-sb-autosave {
  color: var(--text-primary);
}

[data-theme="dark"] .ide-act.active::before {
  background: var(--text-primary);
}

[data-theme="dark"] .ide-tab.active {
  box-shadow: inset 0 2px 0 var(--text-primary);
}

[data-theme="dark"] .ide-tree-item.selected,
[data-theme="dark"] .ide-root.selected {
  color: var(--text-primary);
}

[data-theme="dark"] .ide-root .tag,
[data-theme="dark"] .ide-kbd,
[data-theme="dark"] .ide-preview-head,
[data-theme="dark"] .ide-statusbar #ide-sb-autosave.autosave-off {
  color: #e2e8f0;
}

/* ======================================================================
   LIGHT THEME OVERRIDES FOR Zeon Code
   ====================================================================== */
[data-theme="light"] .ide-app {
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --bg-surface-solid: #ffffff;
  --bg-surface-elevated: rgba(241, 245, 249, 0.95);
  --bg-surface-active: rgba(226, 232, 240, 0.95);
  --menu-bg: rgba(248, 250, 252, 0.95);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-border-subtle: 1px solid rgba(0, 0, 0, 0.04);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-primary);
}

[data-theme="light"] .ide-topbar {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ide-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
}

[data-theme="light"] .ide-sep {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ide-activitybar {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] .ide-act:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

[data-theme="light"] .ide-sidebar {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .ide-tree-item:hover,
[data-theme="light"] .ide-root:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ide-root .tag {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
}

[data-theme="light"] .ide-tabs {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] .ide-tab.active {
  background: #ffffff;
  color: var(--text-primary);
}

[data-theme="light"] .ide-tab .x:hover {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ide-editor {
  background: #ffffff;
}

[data-theme="light"] .ide-gutter {
  background: rgba(0, 0, 0, 0.025);
  color: #94a3b8;
  opacity: 0.7;
}

[data-theme="light"] .ide-findbar input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] #ide-set-font,
[data-theme="light"] #ide-search-in {
  background: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .tok-com { color: #64748b; }
[data-theme="light"] .tok-str { color: #047857; }
[data-theme="light"] .tok-num { color: #b45309; }
[data-theme="light"] .tok-kw { color: #7c3aed; }
[data-theme="light"] .tok-fn { color: #1d4ed8; }
[data-theme="light"] .tok-pun { color: #475569; }
[data-theme="light"] .tok-tag { color: #047857; }
[data-theme="light"] .tok-attr { color: #1d4ed8; }
[data-theme="light"] .tok-prop { color: #1d4ed8; }
[data-theme="light"] .tok-sel { color: #b45309; }
[data-theme="light"] .tok-at { color: #7c3aed; }
[data-theme="light"] .tok-head { color: #7c3aed; }
[data-theme="light"] .tok-code { color: #b45309; }
[data-theme="light"] .tok-link { color: #1d4ed8; }

[data-theme="light"] .ide-welcome {
  background: rgba(248, 250, 252, 0.94);
}

[data-theme="light"] .ide-welcome-action {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ide-welcome-action:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--text-primary);
}

[data-theme="light"] .ide-kbd {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
}

[data-theme="light"] .ide-statusbar {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ide-preview-head {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ide-console {
  background: #f8fafc;
}

[data-theme="light"] .ide-console-line {
  color: var(--text-secondary);
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .ide-console-line.error { color: #b91c1c; }
[data-theme="light"] .ide-console-line.warn { color: #b45309; }

[data-theme="light"] .ide-dialog-backdrop {
  background: rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .ide-dialog-field input,
[data-theme="light"] .ide-dialog-field select {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ide-dialog-note:not(.danger) {
  background: rgba(0, 0, 0, 0.035);
}

[data-theme="light"] .ide-dialog-note.danger {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
}

[data-theme="light"] .ide-dialog-close:hover {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ide-palette-backdrop {
  background: rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .ide-pop .row.danger {
  color: #b91c1c;
}

[data-theme="light"] .ide-pop .hr {
  background: rgba(0, 0, 0, 0.08);
}