/* Shared editor chrome. Matches the landing page. Light and dark share these tokens. */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:ital,wght@0,500&display=swap');

body.suite:not(.suite-mcq) {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

body.suite {
  --suite-bg: #f7f6f3;
  --suite-bg2: #ffffff;
  --suite-bg3: #f0eeea;
  --suite-border: #e4e1db;
  --suite-text: #2c2a26;
  --suite-sub: #6b6860;
  --suite-dim: #9a968c;
  --suite-accent: #6b5ce7;
  --suite-accent-2: #5a4fcf;
  --suite-green: #2a9d6e;
  --suite-amber: #d97706;
  --suite-coral: #e05a5a;
  --suite-grid: rgba(107, 92, 231, 0.075);
  background: var(--suite-bg);
  color: var(--suite-text);
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Graph-paper skin shared with the JS editor and notebook. */
body.suite::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--suite-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--suite-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

body.suite > * {
  position: relative;
  z-index: 1;
}

.suite-header {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 0 16px 0 18px;
  background: color-mix(in srgb, var(--suite-bg) 94%, transparent);
  border-bottom: 1px solid var(--suite-border);
  backdrop-filter: blur(12px);
  z-index: 30;
}

.suite-logo {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--suite-accent-2);
  text-decoration: none;
  flex-shrink: 0;
}

.suite-logo:hover { color: var(--suite-accent); }

.suite-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-family: 'Syne', 'DM Sans', sans-serif;
}

.suite-title strong {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--suite-text);
}

.suite-title span {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--suite-sub);
  background: var(--suite-bg3);
  border: 1px solid var(--suite-border);
  border-radius: 999px;
  padding: 2px 8px;
}

.suite-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.suite .suite-header button {
  appearance: none;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--suite-border) !important;
  background: var(--suite-bg2) !important;
  color: var(--suite-text) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
  text-transform: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

body.suite .suite-header button::before,
body.suite .suite-header button::after {
  content: none;
  display: none;
}

body.suite .suite-header button:hover {
  border-color: #d4d0c8;
  background: var(--suite-bg3);
  transform: none;
  box-shadow: none;
  filter: none;
}

body.suite .suite-header .suite-btn-run {
  background: var(--suite-green) !important;
  border-color: var(--suite-green) !important;
  color: #fff !important;
}

body.suite .suite-header .suite-btn-run:hover {
  background: #248a60 !important;
  border-color: #248a60 !important;
  color: #fff !important;
}

body.suite .suite-header .suite-btn-primary {
  background: var(--suite-accent) !important;
  border-color: var(--suite-accent) !important;
  color: #fff !important;
}

body.suite .suite-header .suite-btn-primary:hover {
  background: var(--suite-accent-2) !important;
  border-color: var(--suite-accent-2) !important;
  color: #fff !important;
}

body.suite .suite-header .font-size-control {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 34px;
  padding: 0 4px;
  background: var(--suite-bg2);
  border: 1px solid var(--suite-border);
  border-radius: 8px;
  box-shadow: none;
}

body.suite .suite-header .font-size-control button {
  width: 26px !important;
  height: 26px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--suite-sub) !important;
  box-shadow: none !important;
}

body.suite .suite-header #fontSizeLabel {
  min-width: 24px;
  color: var(--suite-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

/* JavaScript editor tabs */
body.suite-js .tab-bar {
  background: transparent;
  padding: 10px 16px 0;
  height: auto;
}

body.suite-js .tab {
  background: var(--suite-bg3);
  color: var(--suite-sub);
  border-radius: 8px 8px 0 0;
  box-shadow: none;
}

body.suite-js .tab:hover:not(.active) {
  background: var(--suite-bg2);
  color: var(--suite-text);
  transform: none;
}

body.suite-js .tab.active {
  background: var(--suite-bg2);
  color: var(--suite-text);
  box-shadow: none;
}

body.suite-js .tab.active::before {
  left: 0;
  right: 0;
  height: 2px;
  background: var(--suite-accent);
}

body.suite-js .editor-heading { display: none; }

/* TypeScript */
body.suite-ts .container {
  height: auto;
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  background: transparent;
}
body.suite-ts .editor-container,
body.suite-ts .panel {
  border-radius: 14px;
  overflow: hidden;
}

body.suite-ts .status-bar,
body.suite-ts .panel,
body.suite-ts .editor-container,
body.suite-ts .section-header {
  background: var(--suite-bg2);
  border-color: var(--suite-border);
  color: var(--suite-text);
}

body.suite-ts .section-header { background: var(--suite-bg3); }
body.suite-ts .panel-title,
body.suite-ts #output,
body.suite-ts .ts-error-message { color: var(--suite-text); }
body.suite-ts .count-badge { background: var(--suite-bg3); color: var(--suite-sub); }
body.suite-ts button.secondary,
body.suite-ts #btn-clear-output,
body.suite-ts #btn-copy-output {
  background: var(--suite-bg2);
  color: var(--suite-text);
  border: 1px solid var(--suite-border);
  box-shadow: none;
}
body.suite-ts #btn-clear-output { color: var(--suite-coral); }

/* React */
body.suite-react {
  background: var(--suite-bg);
}
body.suite-react header.suite-header { flex-direction: row; width: 100%; }
body.suite-react .status-bar { width: 100%; flex-shrink: 0; }
body.suite-react .container {
  background: transparent;
  flex: 1;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  gap: 0;
  padding: 12px 14px;
}
body.suite-react .pane-split {
  flex: 0 0 14px;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}
body.suite-react .pane-split::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--suite-border);
}
body.suite-react .pane-split-row {
  flex: 0 0 8px;
  cursor: row-resize;
}
body.suite-react .pane-split-row::after {
  left: 22px;
  right: 22px;
  top: 3px;
  bottom: auto;
  width: auto;
  height: 2px;
}
body.suite-react .pane-split:hover::after,
body.suite-react .pane-split.dragging::after { background: var(--suite-accent); }
body.suite-react.pane-dragging,
body.suite-react.pane-dragging * { user-select: none; }
body.suite-react.pane-dragging iframe { pointer-events: none; }
body.suite-react .file-explorer-tools {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
body.suite-react .pane-icon,
body.suite-react .files-rail {
  appearance: none;
  width: 22px !important;
  height: 22px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  color: var(--suite-sub) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.suite-react .pane-icon[hidden],
body.suite-react .files-rail[hidden] { display: none !important; }
body.suite-react .pane-icon::before,
body.suite-react .pane-icon::after,
body.suite-react .files-rail::before,
body.suite-react .files-rail::after { content: none !important; display: none !important; }
body.suite-react .pane-icon:hover,
body.suite-react .files-rail:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--suite-bg3) !important;
  color: var(--suite-text) !important;
}
body.suite-react .pane-text {
  width: auto !important;
  height: 26px !important;
  padding: 0 8px !important;
  gap: 6px;
  font-size: 12px !important;
  font-weight: 600 !important;
}
body.suite-react .files-rail {
  display: none !important;
  flex: 0 0 36px;
  width: 36px !important;
  height: auto !important;
  align-self: stretch;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--suite-border) !important;
  border-radius: 0 !important;
  background: var(--suite-bg) !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.suite-react .files-rail span { writing-mode: vertical-rl; }
body.suite-react.files-collapsed .files-rail { display: flex !important; }
body.suite-react.files-collapsed .file-explorer { display: none; }
body.suite-react .console-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.suite-react.console-collapsed #consolePanel,
body.suite-react.console-collapsed #consoleSplit { display: none; }
body.suite-react .editor-workspace {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  background: var(--suite-bg2);
  border: 1px solid var(--suite-border);
  border-radius: 14px;
  overflow: hidden;
}
body.suite-react .file-explorer {
  width: 200px;
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--suite-bg);
  border-right: 1px solid var(--suite-border);
}
body.suite-react .file-explorer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 8px 12px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suite-sub);
}
body.suite-react .file-explorer button,
body.suite-react .editor-tabs button {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  color: var(--suite-sub) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.suite-react .file-explorer button::before,
body.suite-react .file-explorer button::after,
body.suite-react .editor-tabs button::before,
body.suite-react .editor-tabs button::after {
  content: none !important;
  display: none !important;
}
body.suite-react .file-explorer button:hover,
body.suite-react .editor-tabs button:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--suite-bg3) !important;
  color: var(--suite-text) !important;
}
body.suite-react #newFileBtn,
body.suite-react #toggleFilesBtn,
body.suite-react #toggleConsoleBtn {
  width: 22px !important;
  height: 22px !important;
}
body.suite-react #newFileBtn { color: var(--suite-accent) !important; }
body.suite-react .new-file-form { padding: 0 8px 8px; }
body.suite-react .new-file-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--suite-border);
  background: var(--suite-bg2);
  color: var(--suite-text);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px;
  outline: none;
}
body.suite-react .new-file-form input:focus { border-color: var(--suite-accent); }
body.suite-react .file-tree {
  overflow: auto;
  padding: 0 6px 10px;
  min-height: 0;
}
body.suite-react .file-folder {
  margin: 8px 6px 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--suite-dim);
}
body.suite-react .file-indent {
  flex: 0 0 auto;
  height: 1px;
}
body.suite-react button.file-row {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100% !important;
  text-align: left;
  border-radius: 8px !important;
  padding: 5px 6px !important;
  color: var(--suite-text) !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
body.suite-react .file-row.active {
  background: color-mix(in srgb, var(--suite-accent) 14%, transparent) !important;
  color: var(--suite-accent) !important;
}
body.suite-react .file-row .file-actions {
  margin-left: auto;
  display: none;
  gap: 2px;
}
body.suite-react .file-row:hover .file-actions,
body.suite-react .file-row.active .file-actions { display: inline-flex; }
body.suite-react .file-icon-btn {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--suite-dim);
  cursor: pointer;
}
body.suite-react .file-icon-btn:hover { color: var(--suite-text); background: var(--suite-bg3); }
body.suite-react .file-tree input,
body.suite-react .rename-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--suite-accent);
  background: var(--suite-bg2);
  color: var(--suite-text);
  border-radius: 6px;
  padding: 2px 4px;
  font: inherit;
  outline: none;
}
body.suite-react .editor-column {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.suite-react .editor-main {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.suite-react #showConsoleBtn {
  width: 100% !important;
  height: 32px !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--suite-border) !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  gap: 8px;
  background: var(--suite-bg3) !important;
}
body.suite-react .editor-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex-shrink: 0;
  padding: 6px 8px 0;
  background: var(--suite-bg3);
  border-bottom: 1px solid var(--suite-border);
}
body.suite-react .editor-tabs button.editor-tab {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  padding: 7px 8px 7px 10px !important;
  border-radius: 8px 8px 0 0 !important;
  color: var(--suite-sub) !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
body.suite-react .editor-tab.active {
  background: var(--suite-bg2) !important;
  color: var(--suite-text) !important;
}
body.suite-react .editor-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.suite-react .tab-close {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}
body.suite-react #editor,
body.suite-react #editor:hover,
body.suite-react #editor:focus-within {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none !important;
  background: var(--suite-bg2);
  border: 0;
  overflow: hidden;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}
body.suite-react #editor::before,
body.suite-react #editor:hover::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}
body.suite-react .preview-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--suite-bg2);
  border: 1px solid var(--suite-border);
  border-radius: 14px;
  overflow: hidden;
}
body.suite-react #preview {
  flex: 1 1 0;
  align-self: stretch;
  width: 100%;
  height: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  display: block;
}
body.suite-react .panel-header,
body.suite-react .console-header,
body.suite-react .status-bar {
  background: var(--suite-bg3);
  color: var(--suite-sub);
  border-color: var(--suite-border);
  letter-spacing: 0.04em;
}
body.suite-react .status-bar { background: var(--suite-bg2); }
body.suite-react button:not(.suite-header button) {
  font-family: 'DM Sans', sans-serif;
}

/* HTML */
body.suite-html {
  --bg-main: #f7f6f3;
  --bg-dark: #ffffff;
  --bg-darker: #f7f6f3;
  --bg-darkest: #f0eeea;
  --panel: #ffffff;
  --border: #e4e1db;
  --text-main: #2c2a26;
  --text: #2c2a26;
  --text-primary: #2c2a26;
  --text-secondary: #6b6860;
  --text-muted: #6b6860;
  --text-light: #2c2a26;
  --accent: #6b5ce7;
  --sidebar-bg: #f7f6f3;
}
body.suite-html .tabs-bar,
body.suite-html .editor-header,
body.suite-html .status-bar {
  background: var(--suite-bg3);
  color: var(--suite-sub);
  border-color: var(--suite-border);
}
body.suite-html .tab {
  background: transparent;
  color: var(--suite-sub);
  border-right-color: var(--suite-border);
}
body.suite-html .tab.active {
  background: var(--suite-bg2);
  color: var(--suite-text);
  border-bottom-color: var(--suite-accent);
}
body.suite-html .tab:hover:not(.active) { background: rgba(255, 255, 255, 0.7); }
body.suite-html .code-area,
body.suite-html .html-code {
  flex: 1;
  min-height: 0;
  padding: 0;
  background: var(--suite-bg2);
  color: var(--suite-text);
  caret-color: var(--suite-accent);
}
body.suite-html .editor-btn {
  background: transparent !important;
  color: var(--suite-sub) !important;
  border: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  animation: none !important;
  letter-spacing: 0 !important;
}
body.suite-html .main-container {
  background: transparent;
  gap: 14px;
  padding: 12px 14px;
}
body.suite-html .editor-area,
body.suite-html .preview-panel {
  border: 1px solid var(--suite-border);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
body.suite-html .preview-panel { background: var(--suite-bg2); border-left-color: var(--suite-border); }
body.suite-html .status-bar { background: var(--suite-bg2); color: var(--suite-sub); height: 28px; }

/* JSON */
body.suite-json.light {
  --bg1: #f7f6f3;
  --bg2: #efece6;
  --glass: #ffffff;
  --border: #e4e1db;
  --text: #2c2a26;
  --muted: #6b6860;
  --accent: #6b5ce7;
  --accent2: #5a4fcf;
  --success: #2a9d6e;
  --error: #e05a5a;
  --input: #ffffff;
}
body.suite-json .topbar {
  background: var(--suite-bg2);
  border-bottom: 1px solid var(--suite-border);
}
body.suite-json #sendBtn {
  background: #2a9d6e;
  border: none;
  color: #fff;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
}
body.suite-json .sidebar,
body.suite-json .content,
body.suite-json .status-bar { color: var(--suite-text); }
body.suite-json .tab.active { color: #5a4fcf; border-bottom-color: #6b5ce7; }

/* React Native header sits in a playground that also has a dark theme */
body.suite-rn .suite-header { border-bottom-color: #e4e1db; }
body.suite-rn .sim-pane > .absolute.inset-0 {
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--suite-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--suite-grid) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .suite-header { height: auto; min-height: 56px; padding: 8px 12px; flex-wrap: wrap; }
  .suite-title span { display: none; }
  .suite-actions { width: 100%; }
}

/* Dark mode. One switch, shared by every editor. */
html[data-theme="dark"] body.suite {
  --suite-bg: #16151c;
  --suite-bg2: #1f1e27;
  --suite-bg3: #2a2833;
  --suite-border: #3a3744;
  --suite-text: #f3f1ea;
  --suite-sub: #b7b3a8;
  --suite-dim: #8d897f;
  --suite-accent: #8b7cf7;
  --suite-accent-2: #a394ff;
  --suite-green: #3cba86;
  --suite-amber: #e0a04a;
  --suite-coral: #f07178;
  --suite-grid: rgba(167, 156, 255, 0.12);
  background: var(--suite-bg);
  color: var(--suite-text);
}

html[data-theme="dark"] {
  --dark-bg: #16151c;
  --card-bg: #1f1e27;
  --card-bg2: #2a2833;
  --card-bg3: #35323f;
  --text-primary: #f3f1ea;
  --text-secondary: #b7b3a8;
  --text-muted: #8d897f;
  --border: rgba(243, 241, 234, 0.1);
  --primary-color: #8b7cf7;
  --secondary-color: #3cba86;
  --bg-primary: #16151c;
  --bg-secondary: #1f1e27;
  --bg-tertiary: #2a2833;
  --card: #1f1e27;
  --card-hover: #2a2833;
  --text: #f3f1ea;
  --console-bg: #1a1922;
  --border-color: rgba(243, 241, 234, 0.12);
  --glass-bg: rgba(31, 30, 39, 0.92);
  --border-subtle: rgba(243, 241, 234, 0.08);
  --border-medium: rgba(243, 241, 234, 0.14);
}

html[data-theme="dark"] body.suite-html {
  --bg-main: #16151c;
  --bg-dark: #1f1e27;
  --bg-darker: #16151c;
  --bg-darkest: #121118;
  --panel: #1f1e27;
  --border: #3a3744;
  --text-main: #f3f1ea;
  --text: #f3f1ea;
  --text-primary: #f3f1ea;
  --text-secondary: #b7b3a8;
  --text-muted: #8d897f;
  --text-light: #f3f1ea;
  --accent: #8b7cf7;
  --sidebar-bg: #16151c;
}

html[data-theme="dark"] body.suite-json,
html[data-theme="dark"] body.suite-json.light {
  --bg1: #16151c;
  --bg2: #121118;
  --glass: #1f1e27;
  --border: #3a3744;
  --text: #f3f1ea;
  --muted: #b7b3a8;
  --accent: #8b7cf7;
  --accent2: #a394ff;
  --success: #3cba86;
  --error: #f07178;
  --input: #2a2833;
  --json-key: #93c5fd;
  --json-str: #86efac;
  --json-num: #fdba74;
  --json-bool: #fcd34d;
  --json-null: #f87171;
}

html[data-theme="dark"] body.suite-json .tab.active { color: #c4b5fd; border-bottom-color: #8b7cf7; }
html[data-theme="dark"] body.suite-rn .suite-header { border-bottom-color: #3a3744; }

html[data-theme="dark"] body.suite-mcq .card,
html[data-theme="dark"] body.suite-mcq .opt,
html[data-theme="dark"] body.suite-mcq .opt:hover {
  background: #1f1e27;
  color: #f3f1ea;
  border-color: #3a3744;
}
html[data-theme="dark"] body.suite-mcq .code {
  background: #16151c;
  color: #86efac;
  border-color: #3a3744;
}

html[data-theme="dark"] body.suite-mcq .card > header {
  background: #1a1922;
  color: #f3f1ea;
}

html[data-theme="dark"] body.suite .suite-header button:hover {
  border-color: #4a4658;
  background: var(--suite-bg3);
}

html[data-theme="dark"] body.suite-js #editor {
  background: #1e1e1e;
  box-shadow: none;
}
@media (max-width: 1024px) {
  body.suite-react .editor-workspace { flex-direction: column; }
  body.suite-react .file-explorer {
    width: 100%;
    flex: 0 0 auto;
    max-height: 160px;
    border-right: 0;
    border-bottom: 1px solid var(--suite-border);
  }
  body.suite-react .pane-split:not(.pane-split-row) { cursor: row-resize; }
  body.suite-react .pane-split:not(.pane-split-row)::after {
    left: 22px;
    right: 22px;
    top: 6px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  body.suite-react.files-collapsed .files-rail {
    flex-direction: row;
    width: 100% !important;
    height: 36px !important;
    flex-basis: 36px;
    border-right: 0 !important;
    border-bottom: 1px solid var(--suite-border) !important;
  }
  body.suite-react.files-collapsed .files-rail span { writing-mode: horizontal-tb; }
}
html[data-theme="dark"] body.suite-react #preview { background: #1f1e27; }
html[data-theme="dark"] body.suite-react #console {
  background: #1a1922;
  color: #d6d3cd;
}
html[data-theme="dark"] body.suite-react .console-header,
html[data-theme="dark"] body.suite-react .panel-header {
  background: #2a2833;
  color: #c4b5fd;
}