:root {
  --font-ui: "Outfit", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-code: "JetBrains Mono", "Consolas", "Monaco", "Courier New", monospace;
  --syntax-keyword: #ff7b72;
  --syntax-string: #a5d6ff;
  --syntax-number: #79c0ff;
  --syntax-comment: #8b949e;
  --syntax-tag: #7ee787;
  --syntax-attr: #d2a8ff;
  --syntax-entity: #56d364;
  --syntax-builtin: #79c0ff;
  --syntax-function: #ff9bce;
  --syntax-regex: #f2cc60;
  --syntax-pseudo: #f2cc60;
  --syntax-property: #ffa657;
  --syntax-selector: #f2cc60;
  --syntax-operator: #ff9bce;
  --syntax-punctuation: #c9d1d9;
  --syntax-variable: #ffa657;
  --syntax-identifier: #c4a7e7;
  --syntax-parameter: #ffb86c;
  --syntax-method: #d2a8ff;
  --syntax-module: #f2cc60;
  --syntax-json-key: #7ee787;
  --syntax-html-text: #f0f6fc;
  --syntax-env-key: #7ee787;
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --accent-color: #238636;
  --accent-hover: #2ea043;
  --border-color: #30363d;
  --divider-color: #30363d;
  --console-bg: #0d1117;
  --console-text: #58a6ff;
  --preview-bg: #ffffff;
  --preview-text: #24292f;
  --error-color: #f85149;
  --warning-color: #d29922;
  --success-color: #3fb950;
}

:root[data-workspace-theme="daylight"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #eaeef2;
  --text-primary: #24292f;
  --text-secondary: #57606a;
  --text-muted: #6e7781;
  --accent-color: #0969da;
  --accent-hover: #0550ae;
  --border-color: #d0d7de;
  --divider-color: #d0d7de;
  --console-bg: #f6f8fa;
  --console-text: #0969da;
  --preview-bg: #ffffff;
  --preview-text: #24292f;
  --error-color: #cf222e;
  --warning-color: #bf8700;
  --success-color: #1a7f37;
  --syntax-keyword: #cf222e;
  --syntax-string: #0a3069;
  --syntax-number: #0550ae;
  --syntax-comment: #6e7781;
  --syntax-tag: #116329;
  --syntax-attr: #6f42c1;
  --syntax-entity: #0f5132;
  --syntax-builtin: #0550ae;
  --syntax-function: #8250df;
  --syntax-regex: #a79000;
  --syntax-pseudo: #7a4e00;
  --syntax-property: #953800;
  --syntax-selector: #7a4e00;
  --syntax-operator: #8250df;
  --syntax-punctuation: #24292f;
  --syntax-variable: #953800;
  --syntax-identifier: #6639ba;
  --syntax-parameter: #9a6700;
  --syntax-method: #8250df;
  --syntax-module: #7a4e00;
  --syntax-json-key: #116329;
  --syntax-html-text: #24292f;
  --syntax-env-key: #116329;
}

:root[data-workspace-theme="midnight"] {
  --bg-primary: #080d1a;
  --bg-secondary: #10182a;
  --bg-tertiary: #18233a;
  --text-primary: #edf3ff;
  --text-secondary: #a5b4cf;
  --text-muted: #71809e;
  --accent-color: #4f8cff;
  --accent-hover: #70a2ff;
  --border-color: #293754;
  --divider-color: #293754;
  --console-bg: #070b15;
  --console-text: #74a7ff;
}

:root[data-workspace-theme="graphite"] {
  --bg-primary: #111315;
  --bg-secondary: #191c20;
  --bg-tertiary: #262a30;
  --text-primary: #f1f3f5;
  --text-secondary: #adb3bb;
  --text-muted: #777f89;
  --accent-color: #a970ff;
  --accent-hover: #bb8cff;
  --border-color: #373c44;
  --divider-color: #373c44;
  --console-bg: #0e1012;
  --console-text: #b889ff;
}

:root[data-workspace-theme="forest"] {
  --bg-primary: #08140f;
  --bg-secondary: #0f2018;
  --bg-tertiary: #183126;
  --text-primary: #eaf7ef;
  --text-secondary: #a5c6b2;
  --text-muted: #6f9480;
  --accent-color: #2fbf71;
  --accent-hover: #51ce8b;
  --border-color: #28513d;
  --divider-color: #28513d;
  --console-bg: #06100c;
  --console-text: #55d991;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  /* 100vh first as a fallback; 100dvh keeps the workspace correct while mobile
     browser toolbars slide in and out. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

header {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  font-size: 13px;
  gap: 16px;
  transition: background-color 0.2s ease;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

header .run-button {
  background: var(--accent-color);
}

header .run-button:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.header-more-menu {
  position: relative;
  margin-left: auto;
}

.header-more-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 20px));
  max-height: calc(100dvh - 84px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1200;
}

.header-more-panel[hidden] {
  display: none !important;
}

.header-more-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.header-more-section-title {
  grid-column: 1 / -1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.header-more-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.header-more-panel .header-more-action {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  justify-content: flex-start;
  gap: 5px;
  padding: 7px 8px;
  font-size: 10px;
  line-height: 1.1;
}

.header-more-panel .run-button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-more-panel .run-button :is(i, .btn-icon) {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  font-size: 13px;
}

.header-more-panel .run-button kbd {
  display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .header-more-panel {
    width: min(372px, calc(100vw - 24px));
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .header-more-section {
    gap: 8px;
  }

  .header-more-section-title {
    font-size: 10px;
  }

  .header-more-panel .header-more-action {
    min-height: 42px;
    gap: 7px;
    padding: 9px 10px;
    font-size: 11px;
  }

  .header-more-panel .run-button :is(i, .btn-icon) {
    width: 15px;
    height: 15px;
    font-size: 14px;
  }
}

.header-more-action.github-connected {
  border-color: color-mix(in srgb, var(--accent-color) 78%, #ffffff 22%);
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-color));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

#collabBtn {
  position: relative;
  overflow: visible;
}

.collab-message-badge,
.collab-chat-dropdown-badge {
  position: absolute;
  z-index: 4;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--bg-secondary);
  border-radius: 999px;
  background: #e53935;
  color: #ffffff;
  font: 800 10px/1 var(--font-ui);
  letter-spacing: -0.02em;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.44);
  pointer-events: none;
}

.collab-message-badge[hidden],
.collab-chat-dropdown-badge[hidden] {
  display: none !important;
}

.collab-chat-dropdown-wrap {
  position: relative;
  flex: 1;
  min-width: 140px;
}

.collab-chat-dropdown-badge {
  top: -8px;
  right: -6px;
}

.header-switches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-run-label {
  display: inline-flex;
  align-items: center;
}

.header-switches label[for="showConsole"] {
  margin-left: 8px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary);
  transition: 0.3s;
  border-radius: 22px;
  border: 1px solid var(--border-color);
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: var(--text-primary);
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.editor-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

.project-drop-overlay {
  position: absolute;
  inset: 8px;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 3px dotted color-mix(in srgb, var(--accent-color) 82%, var(--text-primary) 18%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 18%, transparent),
    0 0 34px color-mix(in srgb, var(--accent-color) 12%, transparent);
  backdrop-filter: blur(3px) saturate(108%);
  pointer-events: none;
  animation: projectDropOverlayIn .16s ease-out;
}

.project-drop-overlay[hidden] {
  display: none;
}

.project-drop-watermark {
  width: min(660px, 92%);
  display: grid;
  justify-items: center;
  gap: 14px;
  color: color-mix(in srgb, var(--text-muted) 86%, #8b949e 14%);
  text-align: center;
  opacity: .86;
}

.project-drop-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: inherit;
  font-size: 28px;
  line-height: 1;
}

.project-drop-icon i,
.project-drop-watermark strong {
  display: block;
}

.project-drop-icon i {
  line-height: 1;
}

.project-drop-watermark strong {
  font-family: var(--font-code);
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  font-weight: 650;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--bg-primary) 92%, transparent);
}

@keyframes projectDropOverlayIn {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .project-drop-overlay { animation: none; }
}

body.zen-mode header,
body.zen-mode .editor-actions,
body.zen-mode .preview,
body.zen-mode .divider {
  display: none !important;
}

body.zen-mode:not(.zen-show-files) .file-explorer {
  display: none !important;
}

body.zen-mode .editor-container {
  flex: 1;
}

body.zen-mode .editors {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
}

body.zen-mode.zen-show-files .editors {
  flex-direction: row;
}

body.zen-mode.zen-show-files .file-explorer {
  flex: 0 0 clamp(190px, 20vw, 280px);
  width: clamp(190px, 20vw, 280px);
  min-width: 190px;
  max-width: 280px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--border-color);
  border-bottom: 0;
}

body.zen-mode.zen-show-files .file-toolbar {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch !important;
  gap: 8px;
}

body.zen-mode.zen-show-files .file-toolbar-meta,
body.zen-mode.zen-show-files .file-toolbar-actions {
  width: 100%;
}

body.zen-mode.zen-show-files .file-toolbar-meta {
  justify-content: space-between;
  flex-wrap: wrap;
}

body.zen-mode.zen-show-files .project-status-meta {
  display: none;
}

body.zen-mode.zen-show-files .file-toolbar-actions #newFileBtn {
  flex: 1;
}

body.zen-mode.zen-show-files #fileList {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  white-space: normal !important;
}

body.zen-mode.zen-show-files #fileList::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.zen-mode.zen-show-files .file-item {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin: 0 0 4px;
}

body.zen-mode.zen-show-files .file-item:last-child {
  margin-bottom: 0;
}

body.zen-mode.zen-show-files .file-name {
  flex: 1 1 auto;
  overflow: hidden;
}

body.zen-mode.zen-show-files .file-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.zen-mode.zen-show-files .code-container {
  min-width: 0;
}

body.zen-mode .code-container {
  height: 100%;
}

body.zen-mode.zen-show-files .code-container {
  min-height: 0;
}

body.zen-mode .editor-wrapper {
  background: var(--bg-primary);
}

body.zen-mode .line-numbers {
  width: 64px;
}

#zenExitBtn {
  display: none;
  align-items: center;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

body.zen-mode #zenExitBtn {
  display: inline-flex !important;
  position: fixed !important;
  top: auto !important;
  right: max(12px, env(safe-area-inset-right, 0px) + 12px) !important;
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px) !important;
  z-index: 5000 !important;
}

.editors {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-secondary);
  min-width: 280px;
  max-width: 80%;
  width: 50%;
  transition: background-color 0.2s ease;
}

.file-explorer {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.file-item {
  position: relative;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  transition: all 0.2s ease;
  border-radius: 6px;
  font-weight: 500;
}

.file-item[draggable="true"] { cursor: grab; }
.file-item.is-dragging {
  opacity: 0.46;
  cursor: grabbing;
  transform: scale(0.98);
}
.file-item.drop-before::after,
.file-item.drop-after::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 99px;
  background: var(--accent-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-color) 62%, transparent);
  pointer-events: none;
}
.file-item.drop-before::after { left: -2px; }
.file-item.drop-after::after { right: -2px; }

.file-item .file-reorder-handle {
  margin: 0 5px 0 0;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
}
.file-item .file-reorder-handle:active { cursor: grabbing; }
.file-item.active .file-reorder-handle { color: rgba(255,255,255,.82); }
.file-item .file-move-control { display: none; }
.file-item .file-reorder-handle:focus-visible,
.file-item .file-move-control:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.file-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.file-name-text {
  min-width: 0;
}

.file-extension-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.95;
}

.file-extension-icon-html,
.file-extension-icon-htm {
  color: #e34f26;
}

.file-extension-icon-css {
  color: #1572b6;
}

/* Sass and Less keep their own brand colours. */
.file-extension-icon-scss {
  color: #cd6799;
}

.file-extension-icon-less {
  color: #2b5e8f;
}

.file-extension-icon-js,
.file-extension-icon-mjs,
.file-extension-icon-cjs {
  color: #f7df1e;
}

/* React's brand cyan for JSX/TSX files. */
.file-extension-icon-jsx,
.file-extension-icon-tsx {
  color: #61dafb;
}

.file-extension-icon-ts {
  color: #3178c6;
}

.file-extension-icon-json,
.file-extension-icon-jsonc {
  color: #f5c451;
}

.file-extension-icon-env {
  color: var(--warning-color);
}

.file-extension-icon-txt {
  color: #38bdf8;
}

.file-extension-icon-md {
  color: #e2e8f0;
}

.file-extension-icon-image {
  color: #c084fc;
}

.file-extension-icon-video {
  color: #60a5fa;
}

.file-extension-icon-audio {
  color: #f472b6;
}

.file-item.active .file-extension-icon {
  color: #ffffff;
}

.file-typing-indicator {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
}

.file-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.file-item.active {
  background: var(--accent-color);
  color: #ffffff;
}

.file-item button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  margin-left: 8px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.file-item button:hover {
  background: var(--bg-tertiary);
}

.file-item .rename-file:hover {
  color: var(--accent-color);
}

.file-item .file-visibility-action:hover,
.file-item .file-visibility-action.has-hidden-users {
  color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 13%, transparent);
}

.file-item.active .file-visibility-action,
.file-item.active .file-move-control,
.file-item.active .rename-file,
.file-item.active .delete-file {
  color: rgba(255, 255, 255, 0.84);
}

.file-item.active .file-visibility-action.has-hidden-users {
  color: #fde68a;
}

.file-item .delete-file:hover {
  color: var(--error-color);
  background: rgba(248, 81, 73, 0.1);
}

#fileList {
  overflow-x: auto;
  white-space: nowrap;
  padding: 8px;
}

#fileList::-webkit-scrollbar {
  height: 6px;
}

#fileList::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

#fileList::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@media (hover: none), (pointer: coarse) {
  .file-item .file-reorder-handle { display: none; }
  .file-item .file-move-control { display: inline-grid; place-items: center; }
  .file-item .file-move-earlier i,
  .file-item .file-move-later i { transform: rotate(90deg); }
}

@media (max-width: 699px), (max-width: 1280px) and (orientation: portrait), (max-width: 1100px) and (max-height: 560px) {
  .file-item .file-reorder-handle { display: none; }
  .file-item .file-move-control { display: inline-grid; place-items: center; }
  .file-item .file-move-earlier i,
  .file-item .file-move-later i { transform: rotate(90deg); }
  .file-item.drop-before::after,
  .file-item.drop-after::after {
    right: 5px;
    left: 5px;
    width: auto;
    height: 3px;
  }
  .file-item.drop-before::after { top: -2px; bottom: auto; }
  .file-item.drop-after::after { top: auto; bottom: -2px; }
}

.code-container {
  position: relative;
  display: flex;
  flex: 1;
  background: var(--bg-primary);
  overflow: hidden;
  transition: background-color 0.2s ease;
}

.line-numbers {
  width: 56px;
  padding: 0;
  background: var(--bg-secondary);
  color: var(--text-muted);
  text-align: right;
  user-select: none;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: pre;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  border-right: 1px solid var(--border-color);
}

.line-numbers-content {
  min-height: 100%;
  padding: 12px 8px;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: pre;
}

.editor-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg-primary);
}

#editorWatermark {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 0 1px rgba(0, 0, 0, 0.85);
}

#editorWatermark strong {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 0 1px rgba(0, 0, 0, 0.9);
}

.editor-media-viewer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 48%),
    var(--bg-primary);
  color: var(--text-primary);
}

.editor-media-viewer[hidden] {
  display: none !important;
}

.editor-media-viewer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
}

.editor-media-viewer-header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-media-viewer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
}

.editor-media-viewer-kind {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  border-radius: 999px;
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.editor-media-viewer-content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(18px, 4vw, 48px);
}

.editor-media-viewer-content img,
.editor-media-viewer-content video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  background: #000000;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.editor-media-viewer-content img {
  object-fit: contain;
  background:
    linear-gradient(45deg, rgba(127, 127, 127, 0.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(127, 127, 127, 0.12) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(127, 127, 127, 0.12) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(127, 127, 127, 0.12) 75%),
    var(--bg-secondary);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.editor-media-audio-card,
.editor-media-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(520px, 100%);
  gap: 18px;
  padding: clamp(24px, 6vw, 54px);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.editor-media-audio-card > i,
.editor-media-empty-state > i {
  color: var(--accent-color);
  font-size: clamp(38px, 8vw, 70px);
}

.editor-media-audio-card audio {
  width: 100%;
}

.editor-media-empty-state p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.code-container.media-source-active #activeEditor {
  display: block !important;
  color: var(--text-primary);
  background: var(--bg-primary);
  caret-color: transparent;
}

.code-container.media-source-active #activeEditor::selection {
  color: #fff;
}

#remoteCursorLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.remote-typing-layer,
.remote-pointer-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.remote-typing-layer { z-index: 2; }
.remote-pointer-layer { z-index: 1; }

#activeEditor.collab-custom-cursor-active {
  cursor: none !important;
}

#activeEditor.collab-live-typing-caret {
  caret-color: var(--local-collab-caret-color, var(--accent-color));
}

.local-collab-cursor {
  position: absolute;
  z-index: 7;
  width: 26px;
  height: 28px;
  pointer-events: none;
  transform: translate(-1px, -1px);
  will-change: left, top;
}

.local-collab-cursor[hidden] { display: none; }

.local-collab-cursor-icon {
  display: block;
  color: var(--cursor-color, var(--accent-color));
  font-size: 20px;
  -webkit-text-stroke: .35px rgba(255,255,255,.5);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.78));
}

.local-collab-cursor-label {
  position: absolute;
  left: 0;
  top: -23px;
  min-width: 30px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--cursor-color, var(--accent-color)) 72%, #fff 20%);
  border-radius: 999px;
  background: var(--cursor-color, var(--accent-color));
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  font: 800 10px/1.1 var(--font-ui);
  text-align: center;
  white-space: nowrap;
}

.local-collab-cursor.is-near-top .local-collab-cursor-label { top: 23px; }
.local-collab-cursor.is-near-right .local-collab-cursor-label { right: 5px; left: auto; }

.remote-cursor {
  position: absolute;
  transform: translate(-1px, -1px);
  transition: left 0.08s linear, top 0.08s linear;
}

.remote-cursor::before {
  content: none;
}

.remote-cursor-icon {
  display: block;
  color: var(--cursor-color, var(--accent-color));
  font-size: 18px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.75));
}

.remote-cursor-label {
  position: absolute;
  top: -22px;
  left: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--cursor-color, var(--accent-color));
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.remote-typing-caret {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  min-height: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: top left;
  transition:
    transform 90ms cubic-bezier(.22, 1, .36, 1),
    height 90ms ease,
    opacity 120ms ease;
  will-change: transform;
}

.remote-typing-caret.is-ready { opacity: 1; }
.remote-typing-caret[hidden] { display: none; }

.remote-typing-caret-line {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 999px;
  background: var(--typing-color, var(--accent-color));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--typing-color, var(--accent-color)) 64%, #fff 25%),
    0 0 8px color-mix(in srgb, var(--typing-color, var(--accent-color)) 72%, transparent);
  animation: remoteCursorBlink 1.05s steps(1, end) infinite;
}

.remote-typing-label {
  position: absolute;
  top: -21px;
  left: -1px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--typing-color, var(--accent-color));
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.remote-typing-caret.is-near-top .remote-typing-label { top: calc(100% + 3px); }
.remote-typing-caret.is-near-right .remote-typing-label { right: -1px; left: auto; }

@keyframes remoteCursorBlink {
  0%, 45% {
    opacity: 1;
  }
  46%, 100% {
    opacity: 0.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .remote-typing-caret { transition: none; }
  .remote-typing-caret-line { animation: none; }
}

/* --- Indent guides -------------------------------------------------------
   One faint vertical rule per indent level, drawn behind the syntax layer.
   Geometry is entirely the JavaScript's job: renderIndentGuides() measures the
   textarea's real font metrics and writes left/top/height inline on each span.
   This stylesheet therefore sets no padding, font, or line-height, because
   duplicating them here is what makes guides drift out of alignment when the
   editor font size changes on smaller screens.

   Layer sits at z-index 1: above the wrapper background, below #highlightLayer
   (2), #editorWatermark (3) and the textarea (4). */
#indentGuideLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

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

/* Moved by transform to follow the textarea's scroll, so it must be able to
   overflow its own box in both directions without being clipped early. */
.indent-guide-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.indent-guide {
  position: absolute;
  width: 1px;
  background: color-mix(in srgb, var(--text-muted) 26%, transparent);
  pointer-events: none;
}

/* The level the caret currently sits inside. */
.indent-guide.active {
  background: color-mix(in srgb, var(--accent-color) 52%, transparent);
}

@media (prefers-contrast: more) {
  .indent-guide {
    background: color-mix(in srgb, var(--text-muted) 55%, transparent);
  }
  .indent-guide.active {
    background: var(--accent-color);
  }
}

#highlightLayer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre;
  pointer-events: none;
  z-index: 2;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: normal;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  white-space: pre;
  tab-size: 4;
  color: var(--syntax-identifier);
}

#highlightLayer .syntax-window-track {
  position: relative;
  display: block;
  min-height: 1em;
}

#highlightLayer .syntax-window-segment {
  position: absolute;
  top: 0;
  white-space: pre;
}

#errorHighlightLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.error-line-highlight {
  position: absolute;
  left: 0;
  border-left: 3px solid rgba(229, 57, 53, 0.95);
  background: linear-gradient(
    90deg,
    rgba(229, 57, 53, 0.22),
    rgba(229, 57, 53, 0.08) 60%,
    rgba(229, 57, 53, 0)
  );
  border-radius: 3px;
}

.error-token-highlight {
  position: absolute;
  height: 3px;
  background: #ff4d4f;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.22);
}

:root[data-workspace-theme="daylight"] .error-line-highlight {
  border-left-color: rgba(211, 47, 47, 0.95);
  background: linear-gradient(
    90deg,
    rgba(211, 47, 47, 0.18),
    rgba(211, 47, 47, 0.07) 60%,
    rgba(211, 47, 47, 0)
  );
}

:root[data-workspace-theme="daylight"] .error-token-highlight {
  background: #d32f2f;
  box-shadow: 0 0 0 1px rgba(211, 47, 47, 0.18);
}

/* ===========================================================================
   Syntax colour schemes
   Every token rule below already reads a --syntax-* variable, so a scheme is
   just a different set of those variables. Switching one only repaints colour:
   it never touches the font, so whatever family is chosen in Settings (or
   pasted from Google Fonts) carries straight through unchanged.
   [data-syntax-theme] is set on <html> by applySettingsToEditors().
   =========================================================================== */

/* Monokai - the classic warm dark scheme. */
:root[data-syntax-theme="monokai"] {
  --syntax-keyword: #f92672;
  --syntax-string: #e6db74;
  --syntax-number: #ae81ff;
  --syntax-comment: #75715e;
  --syntax-tag: #f92672;
  --syntax-attr: #a6e22e;
  --syntax-entity: #a6e22e;
  --syntax-builtin: #66d9ef;
  --syntax-function: #a6e22e;
  --syntax-regex: #e6db74;
  --syntax-pseudo: #a6e22e;
  --syntax-property: #66d9ef;
  --syntax-selector: #a6e22e;
  --syntax-operator: #f92672;
  --syntax-punctuation: #f8f8f2;
  --syntax-variable: #fd971f;
  --syntax-identifier: #f8f8f2;
  --syntax-parameter: #fd971f;
  --syntax-method: #a6e22e;
  --syntax-module: #66d9ef;
  --syntax-json-key: #f92672;
  --syntax-html-text: #f8f8f2;
  --syntax-env-key: #a6e22e;
}

/* Dracula - purple leaning, softer contrast. */
:root[data-syntax-theme="dracula"] {
  --syntax-keyword: #ff79c6;
  --syntax-string: #f1fa8c;
  --syntax-number: #bd93f9;
  --syntax-comment: #6272a4;
  --syntax-tag: #ff79c6;
  --syntax-attr: #50fa7b;
  --syntax-entity: #50fa7b;
  --syntax-builtin: #8be9fd;
  --syntax-function: #50fa7b;
  --syntax-regex: #f1fa8c;
  --syntax-pseudo: #50fa7b;
  --syntax-property: #8be9fd;
  --syntax-selector: #50fa7b;
  --syntax-operator: #ff79c6;
  --syntax-punctuation: #f8f8f2;
  --syntax-variable: #ffb86c;
  --syntax-identifier: #f8f8f2;
  --syntax-parameter: #ffb86c;
  --syntax-method: #50fa7b;
  --syntax-module: #8be9fd;
  --syntax-json-key: #ff79c6;
  --syntax-html-text: #f8f8f2;
  --syntax-env-key: #50fa7b;
}

/* Nord - cool blues and muted frost tones. */
:root[data-syntax-theme="nord"] {
  --syntax-keyword: #81a1c1;
  --syntax-string: #a3be8c;
  --syntax-number: #b48ead;
  --syntax-comment: #616e88;
  --syntax-tag: #81a1c1;
  --syntax-attr: #8fbcbb;
  --syntax-entity: #8fbcbb;
  --syntax-builtin: #88c0d0;
  --syntax-function: #88c0d0;
  --syntax-regex: #ebcb8b;
  --syntax-pseudo: #8fbcbb;
  --syntax-property: #88c0d0;
  --syntax-selector: #8fbcbb;
  --syntax-operator: #81a1c1;
  --syntax-punctuation: #d8dee9;
  --syntax-variable: #d08770;
  --syntax-identifier: #d8dee9;
  --syntax-parameter: #d08770;
  --syntax-method: #88c0d0;
  --syntax-module: #8fbcbb;
  --syntax-json-key: #8fbcbb;
  --syntax-html-text: #eceff4;
  --syntax-env-key: #a3be8c;
}

/* Solarized Dark - low saturation, easy on long sessions. */
:root[data-syntax-theme="solarized"] {
  --syntax-keyword: #859900;
  --syntax-string: #2aa198;
  --syntax-number: #d33682;
  --syntax-comment: #586e75;
  --syntax-tag: #268bd2;
  --syntax-attr: #b58900;
  --syntax-entity: #2aa198;
  --syntax-builtin: #268bd2;
  --syntax-function: #268bd2;
  --syntax-regex: #dc322f;
  --syntax-pseudo: #b58900;
  --syntax-property: #268bd2;
  --syntax-selector: #b58900;
  --syntax-operator: #859900;
  --syntax-punctuation: #93a1a1;
  --syntax-variable: #cb4b16;
  --syntax-identifier: #93a1a1;
  --syntax-parameter: #cb4b16;
  --syntax-method: #268bd2;
  --syntax-module: #b58900;
  --syntax-json-key: #268bd2;
  --syntax-html-text: #eee8d5;
  --syntax-env-key: #859900;
}

/* High contrast - maximum separation for bright rooms or low vision. */
:root[data-syntax-theme="high-contrast"] {
  --syntax-keyword: #ff6ec7;
  --syntax-string: #9cffa4;
  --syntax-number: #7bd7ff;
  --syntax-comment: #b0b0b0;
  --syntax-tag: #ffe066;
  --syntax-attr: #ffffff;
  --syntax-entity: #9cffa4;
  --syntax-builtin: #7bd7ff;
  --syntax-function: #ffe066;
  --syntax-regex: #ff9d5c;
  --syntax-pseudo: #ffe066;
  --syntax-property: #7bd7ff;
  --syntax-selector: #ffe066;
  --syntax-operator: #ff6ec7;
  --syntax-punctuation: #ffffff;
  --syntax-variable: #ff9d5c;
  --syntax-identifier: #ffffff;
  --syntax-parameter: #ff9d5c;
  --syntax-method: #ffe066;
  --syntax-module: #7bd7ff;
  --syntax-json-key: #ffe066;
  --syntax-html-text: #ffffff;
  --syntax-env-key: #9cffa4;
}

/* Grayscale - no hue at all, weight and brightness carry the meaning. */
:root[data-syntax-theme="grayscale"] {
  --syntax-keyword: #ffffff;
  --syntax-string: #b8b8b8;
  --syntax-number: #d4d4d4;
  --syntax-comment: #6a6a6a;
  --syntax-tag: #e8e8e8;
  --syntax-attr: #a0a0a0;
  --syntax-entity: #a0a0a0;
  --syntax-builtin: #d4d4d4;
  --syntax-function: #e8e8e8;
  --syntax-regex: #b8b8b8;
  --syntax-pseudo: #a0a0a0;
  --syntax-property: #d4d4d4;
  --syntax-selector: #e8e8e8;
  --syntax-operator: #ffffff;
  --syntax-punctuation: #8a8a8a;
  --syntax-variable: #c6c6c6;
  --syntax-identifier: #c6c6c6;
  --syntax-parameter: #a0a0a0;
  --syntax-method: #e8e8e8;
  --syntax-module: #d4d4d4;
  --syntax-json-key: #e8e8e8;
  --syntax-html-text: #f0f0f0;
  --syntax-env-key: #b8b8b8;
}

/* One Dark - Atom's scheme, the most familiar dark palette after Monokai. */
:root[data-syntax-theme="one-dark"] {
  --syntax-keyword: #c678dd;
  --syntax-string: #98c379;
  --syntax-number: #d19a66;
  --syntax-comment: #5c6370;
  --syntax-tag: #e06c75;
  --syntax-attr: #d19a66;
  --syntax-entity: #56b6c2;
  --syntax-builtin: #56b6c2;
  --syntax-function: #61afef;
  --syntax-regex: #98c379;
  --syntax-pseudo: #d19a66;
  --syntax-property: #56b6c2;
  --syntax-selector: #e06c75;
  --syntax-operator: #56b6c2;
  --syntax-punctuation: #abb2bf;
  --syntax-variable: #e06c75;
  --syntax-identifier: #abb2bf;
  --syntax-parameter: #d19a66;
  --syntax-method: #61afef;
  --syntax-module: #c678dd;
  --syntax-json-key: #e06c75;
  --syntax-html-text: #abb2bf;
  --syntax-env-key: #98c379;
}

/* Gruvbox Dark - warm retro earth tones, low blue light. */
:root[data-syntax-theme="gruvbox"] {
  --syntax-keyword: #fb4934;
  --syntax-string: #b8bb26;
  --syntax-number: #d3869b;
  --syntax-comment: #928374;
  --syntax-tag: #8ec07c;
  --syntax-attr: #fabd2f;
  --syntax-entity: #8ec07c;
  --syntax-builtin: #83a598;
  --syntax-function: #fabd2f;
  --syntax-regex: #b8bb26;
  --syntax-pseudo: #fabd2f;
  --syntax-property: #83a598;
  --syntax-selector: #fabd2f;
  --syntax-operator: #fe8019;
  --syntax-punctuation: #ebdbb2;
  --syntax-variable: #fe8019;
  --syntax-identifier: #ebdbb2;
  --syntax-parameter: #fe8019;
  --syntax-method: #fabd2f;
  --syntax-module: #8ec07c;
  --syntax-json-key: #8ec07c;
  --syntax-html-text: #fbf1c7;
  --syntax-env-key: #b8bb26;
}

/* Tokyo Night - deep indigo with cool accents. */
:root[data-syntax-theme="tokyo-night"] {
  --syntax-keyword: #bb9af7;
  --syntax-string: #9ece6a;
  --syntax-number: #ff9e64;
  --syntax-comment: #565f89;
  --syntax-tag: #f7768e;
  --syntax-attr: #bb9af7;
  --syntax-entity: #73daca;
  --syntax-builtin: #2ac3de;
  --syntax-function: #7aa2f7;
  --syntax-regex: #b4f9f8;
  --syntax-pseudo: #bb9af7;
  --syntax-property: #7dcfff;
  --syntax-selector: #bb9af7;
  --syntax-operator: #89ddff;
  --syntax-punctuation: #a9b1d6;
  --syntax-variable: #c0caf5;
  --syntax-identifier: #a9b1d6;
  --syntax-parameter: #e0af68;
  --syntax-method: #7aa2f7;
  --syntax-module: #2ac3de;
  --syntax-json-key: #7aa2f7;
  --syntax-html-text: #c0caf5;
  --syntax-env-key: #9ece6a;
}

/* Catppuccin Mocha - soft pastel on a muted dark base. */
:root[data-syntax-theme="catppuccin"] {
  --syntax-keyword: #cba6f7;
  --syntax-string: #a6e3a1;
  --syntax-number: #fab387;
  --syntax-comment: #6c7086;
  --syntax-tag: #f38ba8;
  --syntax-attr: #f9e2af;
  --syntax-entity: #94e2d5;
  --syntax-builtin: #89dceb;
  --syntax-function: #89b4fa;
  --syntax-regex: #f5c2e7;
  --syntax-pseudo: #f9e2af;
  --syntax-property: #89dceb;
  --syntax-selector: #f9e2af;
  --syntax-operator: #94e2d5;
  --syntax-punctuation: #bac2de;
  --syntax-variable: #f38ba8;
  --syntax-identifier: #cdd6f4;
  --syntax-parameter: #eba0ac;
  --syntax-method: #89b4fa;
  --syntax-module: #94e2d5;
  --syntax-json-key: #89b4fa;
  --syntax-html-text: #cdd6f4;
  --syntax-env-key: #a6e3a1;
}

/* ---- Light schemes. Intended for the Daylight workspace theme, but usable
   anywhere; the override block further down keeps them working there. ---- */

/* GitHub Light - the palette most people already read code in. */
:root[data-syntax-theme="github-light"] {
  --syntax-keyword: #cf222e;
  --syntax-string: #0a3069;
  --syntax-number: #0550ae;
  --syntax-comment: #6e7781;
  --syntax-tag: #116329;
  --syntax-attr: #6f42c1;
  --syntax-entity: #0f5132;
  --syntax-builtin: #0550ae;
  --syntax-function: #8250df;
  --syntax-regex: #0a3069;
  --syntax-pseudo: #7a4e00;
  --syntax-property: #953800;
  --syntax-selector: #7a4e00;
  --syntax-operator: #8250df;
  --syntax-punctuation: #24292f;
  --syntax-variable: #953800;
  --syntax-identifier: #24292f;
  --syntax-parameter: #953800;
  --syntax-method: #8250df;
  --syntax-module: #6f42c1;
  --syntax-json-key: #116329;
  --syntax-html-text: #24292f;
  --syntax-env-key: #116329;
}

/* Solarized Light - the same hues as Solarized Dark on a warm paper base. */
:root[data-syntax-theme="solarized-light"] {
  --syntax-keyword: #859900;
  --syntax-string: #2aa198;
  --syntax-number: #d33682;
  --syntax-comment: #93a1a1;
  --syntax-tag: #268bd2;
  --syntax-attr: #b58900;
  --syntax-entity: #2aa198;
  --syntax-builtin: #268bd2;
  --syntax-function: #268bd2;
  --syntax-regex: #dc322f;
  --syntax-pseudo: #b58900;
  --syntax-property: #268bd2;
  --syntax-selector: #b58900;
  --syntax-operator: #859900;
  --syntax-punctuation: #586e75;
  --syntax-variable: #cb4b16;
  --syntax-identifier: #586e75;
  --syntax-parameter: #cb4b16;
  --syntax-method: #268bd2;
  --syntax-module: #b58900;
  --syntax-json-key: #268bd2;
  --syntax-html-text: #073642;
  --syntax-env-key: #859900;
}

/* A saved custom scheme writes its colours onto this attribute inline, so no
   rules are needed here - the variables arrive on <html> directly. */

#highlightLayer .token {
  color: var(--syntax-identifier);
}

#highlightLayer .token.comment {
  color: var(--syntax-comment);
}

#highlightLayer .token.keyword {
  color: var(--syntax-keyword);
}

#highlightLayer .token.string {
  color: var(--syntax-string);
}

#highlightLayer .token.hex {
  color: var(--syntax-number);
}

#highlightLayer .token.number {
  color: var(--syntax-number);
}

#highlightLayer .token.tag {
  color: var(--syntax-tag);
}

#highlightLayer .token.tag-punctuation {
  color: var(--syntax-tag);
  font-weight: 700;
}

#highlightLayer .token.attr {
  color: var(--syntax-attr);
}

#highlightLayer .token.entity {
  color: var(--syntax-entity);
}

#highlightLayer .token.builtin {
  color: var(--syntax-builtin);
}

#highlightLayer .token.constant {
  color: var(--syntax-number);
}

#highlightLayer .token.class-name {
  color: var(--syntax-tag);
}

#highlightLayer .token.function {
  color: var(--syntax-function);
}

#highlightLayer .token.regex {
  color: var(--syntax-regex);
}

#highlightLayer .token.pseudo {
  color: var(--syntax-pseudo);
}

#highlightLayer .token.property {
  color: var(--syntax-property);
}

#highlightLayer .token.important {
  color: var(--syntax-keyword);
  font-weight: 700;
}

#highlightLayer .token.value {
  color: var(--syntax-string);
}

#highlightLayer .token.selector {
  color: var(--syntax-selector);
}

#highlightLayer .token.operator {
  color: var(--syntax-operator);
}

#highlightLayer .token.punctuation {
  color: var(--syntax-punctuation);
}

#highlightLayer .token.variable,
#highlightLayer .token.declaration {
  color: var(--syntax-variable);
}

#highlightLayer .token.identifier {
  color: var(--syntax-identifier);
}

#highlightLayer .token.parameter {
  color: var(--syntax-parameter);
  font-style: italic;
}

#highlightLayer .token.method,
#highlightLayer .token.property-access {
  color: var(--syntax-method);
}

#highlightLayer .token.module {
  color: var(--syntax-module);
}

#highlightLayer .token.json-key {
  color: var(--syntax-json-key);
}

#highlightLayer .token.html-text {
  color: var(--syntax-html-text);
}

#highlightLayer .token.env-key {
  color: var(--syntax-env-key);
}

/* The custom scheme editor. Mirrors .google-font-customization, which sits a
   few rows below it in Settings, so the two panels read as a pair. */
.custom-syntax-panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.custom-syntax-panel[hidden] { display: none; }

.custom-syntax-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.custom-syntax-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color) 22%, transparent);
  color: var(--accent-color);
}

.custom-syntax-header strong {
  display: block;
  color: var(--text-primary);
  font-size: 13.5px;
}

.custom-syntax-header small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.custom-syntax-name-field {
  display: block;
  margin-bottom: 14px;
}

.custom-syntax-name-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
}

.custom-syntax-name-field input {
  width: 100%;
  padding: 9px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
}

/* auto-fit rather than a fixed count, so thirteen swatches reflow from four
   columns on a desktop down to one on a narrow phone without a media query. */
.custom-syntax-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.custom-syntax-swatch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 7px;
  cursor: pointer;
}

.custom-syntax-swatch input[type="color"] {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.custom-syntax-swatch span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.custom-syntax-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.custom-syntax-reset {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.custom-syntax-reset:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

#settingsPreview {
  overflow: auto;
  white-space: pre;
}

#settingsPreview .token {
  color: var(--settings-preview-text, var(--text-primary));
}

#settingsPreview .token.comment {
  color: var(--syntax-comment);
}

#settingsPreview .token.keyword {
  color: var(--syntax-keyword);
}

#settingsPreview .token.string {
  color: var(--syntax-string);
}

#settingsPreview .token.number {
  color: var(--syntax-number);
}

#settingsPreview .token.operator {
  color: var(--syntax-operator);
}

#settingsPreview .token.punctuation {
  color: var(--syntax-punctuation);
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.comment,
:root[data-workspace-theme="daylight"] #settingsPreview .token.comment {
  color: #6e7781;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.keyword,
:root[data-workspace-theme="daylight"] #settingsPreview .token.keyword {
  color: #cf222e;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.string,
:root[data-workspace-theme="daylight"] #settingsPreview .token.string {
  color: #0a3069;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.number,
:root[data-workspace-theme="daylight"] #settingsPreview .token.number {
  color: #0550ae;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.tag {
  color: #116329;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.attr {
  color: #6f42c1;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.property {
  color: #953800;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.value {
  color: #0a3069;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.selector {
  color: #7a4e00;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.operator,
:root[data-workspace-theme="daylight"] #settingsPreview .token.operator {
  color: #8250df;
}

:root[data-workspace-theme="daylight"] #highlightLayer .token.punctuation,
:root[data-workspace-theme="daylight"] #settingsPreview .token.punctuation {
  color: #24292f;
}

/* ---------------------------------------------------------------------------
   Daylight + a chosen syntax scheme

   The block above hardcodes eleven token colours for the Daylight workspace
   theme with a direct `color:`, which outranks the `var(--syntax-*)` in the
   base rules. That is right while no scheme is chosen, but it meant picking
   Monokai on Daylight repainted only the other twelve token types and left a
   half-applied mess.

   These rules carry one extra attribute ([data-syntax-theme]), so they apply
   only once a scheme has actually been chosen, and they outrank the block
   above by exactly one point. Nothing above is edited or removed: with no
   scheme selected, Daylight looks precisely as it always has.
   --------------------------------------------------------------------------- */
:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.comment,
:root[data-syntax-theme][data-workspace-theme="daylight"] #settingsPreview .token.comment {
  color: var(--syntax-comment);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.keyword,
:root[data-syntax-theme][data-workspace-theme="daylight"] #settingsPreview .token.keyword {
  color: var(--syntax-keyword);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.string,
:root[data-syntax-theme][data-workspace-theme="daylight"] #settingsPreview .token.string {
  color: var(--syntax-string);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.number,
:root[data-syntax-theme][data-workspace-theme="daylight"] #settingsPreview .token.number {
  color: var(--syntax-number);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.operator,
:root[data-syntax-theme][data-workspace-theme="daylight"] #settingsPreview .token.operator {
  color: var(--syntax-operator);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.punctuation,
:root[data-syntax-theme][data-workspace-theme="daylight"] #settingsPreview .token.punctuation {
  color: var(--syntax-punctuation);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.tag {
  color: var(--syntax-tag);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.attr {
  color: var(--syntax-attr);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.property {
  color: var(--syntax-property);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.value {
  color: var(--syntax-string);
}

:root[data-syntax-theme][data-workspace-theme="daylight"] #highlightLayer .token.selector {
  color: var(--syntax-selector);
}

textarea {
  width: 100%;
  height: 100%;
  border: none;
  padding: 12px;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: normal;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  white-space: pre;
  outline: none;
  resize: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  background: transparent;
  color: transparent;
  caret-color: var(--text-primary);
}

textarea::selection {
  background: color-mix(in srgb, var(--accent-color) 45%, #ffffff 5%);
  color: transparent;
}

/* Large files keep their syntax colours. Highlighting is now windowed to the
   visible lines, so there is no reason to fall back to uncoloured text. The
   layer stays visible and the textarea stays transparent underneath it. */
.code-container.large-file-performance #highlightLayer {
  display: block;
}

.code-container.large-file-performance.windowed-syntax-highlight #highlightLayer {
  display: block;
}

.code-container.large-file-performance #activeEditor {
  color: transparent;
}

.code-container.large-file-performance.windowed-syntax-highlight #activeEditor {
  color: transparent;
}

.code-container.large-file-performance #activeEditor::selection {
  color: transparent;
}

.code-container.large-file-performance.windowed-syntax-highlight #activeEditor::selection {
  color: transparent;
}

/* One block holding only the visible lines. The padding stands in for every
   line above and below, so scroll height still matches the textarea. */
#highlightLayer .syntax-line-window {
  display: block;
  margin: 0;
  white-space: pre;
}

textarea.active {
  display: block;
}

#activeEditor,
#syntaxHighlightLayer,
#consoleOutput,
#fileList,
#suggestionPopup {
  direction: ltr;
  text-align: left;
}

textarea::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

textarea::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

textarea::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 5px;
  border: 2px solid var(--bg-primary);
}

textarea::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

#highlightLayer::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#highlightLayer::-webkit-scrollbar-track {
  background: transparent;
}

#highlightLayer::-webkit-scrollbar-thumb {
  background: transparent;
}

.editor-value-popover {
  position: absolute;
  z-index: 30;
  width: min(310px, calc(100% - 16px));
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--accent-color) 9%, var(--bg-secondary)),
      var(--bg-secondary)
    );
  color: var(--text-primary);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--accent-color) 10%, transparent);
  animation: editorValuePopoverIn 0.18s ease both;
}

.editor-value-popover[hidden] {
  display: none !important;
}

.editor-value-popover::after {
  content: "";
  position: absolute;
  left: var(--editor-value-arrow-left, 28px);
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  background: var(--bg-secondary);
  transform: rotate(45deg);
}

.editor-value-popover.is-below::after {
  top: -7px;
  bottom: auto;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-left: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
}

.editor-value-popover-header,
.editor-value-popover-header > span,
.editor-value-popover-footer {
  display: flex;
  align-items: center;
}

.editor-value-popover-header {
  justify-content: space-between;
  gap: 12px;
}

.editor-value-popover-header > span {
  gap: 7px;
  color: var(--accent-color);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.editor-value-icon-button,
.editor-value-step-button,
.editor-value-popover-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.editor-value-icon-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
}

.editor-value-token {
  width: fit-content;
  margin: 9px 0 10px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
  color: var(--accent-color);
  font: 700 11px/1.2 var(--font-code);
}

.editor-value-controls {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 84px 38px;
  align-items: end;
  gap: 7px;
}

.editor-value-step-button {
  width: 38px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  color: var(--accent-color);
}

.editor-value-number-field,
.editor-value-unit-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.editor-value-number-field > span,
.editor-value-unit-field > span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editor-value-number-field input,
.editor-value-unit-field select {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  outline: none;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 700 13px/1 var(--font-code);
}

.editor-value-number-field input:focus,
.editor-value-unit-field select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 17%, transparent);
}

.editor-value-popover-footer {
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
}

.editor-value-popover-footer small {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.35;
}

.editor-value-popover-footer button {
  min-height: 30px;
  padding: 6px 10px;
  border-color: var(--accent-color);
  border-radius: 8px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
}

.editor-value-icon-button:hover,
.editor-value-step-button:hover,
.editor-value-popover-footer button:hover {
  border-color: var(--accent-color);
  background: var(--accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

@keyframes editorValuePopoverIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .editor-value-popover {
    padding: 10px;
    border-radius: 12px;
  }

  .editor-value-controls {
    grid-template-columns: 34px minmax(0, 1fr) 78px 34px;
    gap: 5px;
  }

  .editor-value-step-button {
    width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editor-value-popover {
    animation: none;
  }
}

#suggestionPopup {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  max-height: 220px;
  min-width: 200px;
  max-width: 280px;
  overflow-y: auto;
  font-family: var(--font-ui);
  font-size: 12px;
  animation: suggestionFadeIn 0.15s ease-out;
}

@keyframes suggestionFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.suggestion-header {
  padding: 8px 10px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.suggestion-shortcuts {
  display: flex;
  gap: 6px;
  font-size: 10px;
}

.suggestion-shortcut {
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
  font-weight: 500;
}

.suggestion-category {
  padding: 8px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--bg-tertiary);
  position: sticky;
  top: 35px;
  z-index: 1;
}

.suggestion-item {
  padding: 7px 10px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-left: 2px solid transparent;
}

.suggestion-item:hover {
  background-color: var(--bg-tertiary);
  border-left-color: var(--accent-color);
}

.suggestion-item.active {
  background-color: var(--accent-color);
  color: #ffffff;
  border-left-color: #ffffff;
}

.suggestion-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  font-size: 15px;
  line-height: 1;
  opacity: 0.95;
}

.suggestion-icon-html {
  color: #e34f26;
}

.suggestion-icon-css {
  color: #1572b6;
}

.suggestion-icon-js {
  color: #d6b900;
}

.suggestion-icon-react {
  color: #61dafb;
}

.suggestion-icon-typescript {
  color: #3178c6;
}

.suggestion-icon-env {
  color: var(--warning-color);
}

.suggestion-icon-markdown,
.suggestion-icon-txt {
  color: #38bdf8;
}

.suggestion-icon-json {
  color: #f5c451;
}

.suggestion-icon-image,
.suggestion-icon-media {
  color: #c084fc;
}

.suggestion-icon-file {
  color: var(--text-muted);
}

.suggestion-item.active .suggestion-icon {
  color: #ffffff;
}

.suggestion-content {
  flex: 1;
  min-width: 0;
}

.suggestion-tag {
  /* Follows whatever font the editor is using, so changing the family in
     Settings — or pasting a Google Fonts link — restyles the suggestion list
     too. applySettingsToEditors() keeps --editor-control-font-family up to
     date; the fallback covers the moment before it is first set. */
  font-family: var(--editor-control-font-family, var(--font-code));
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

.suggestion-tag .highlight {
  color: var(--accent-color);
  font-weight: 700;
}

.suggestion-item.active .suggestion-tag .highlight,
.suggestion-item:hover .suggestion-tag .highlight {
  color: inherit;
}

.suggestion-desc {
  font-size: 10px;
  opacity: 0.7;
  line-height: 1.4;
  margin-top: 2px;
}

.suggestion-badge {
  display: inline-block;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-color);
  color: #ffffff;
  margin-left: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.css-color-picker-popover {
  position: fixed;
  z-index: 2147483647;
  width: min(286px, calc(100vw - 20px));
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  font-family: var(--font-ui);
  pointer-events: auto !important;
  isolation: isolate;
}

.css-color-picker-popover * {
  pointer-events: auto;
}

.css-color-picker-header,
.css-color-picker-custom,
.css-color-picker-rgb,
.css-color-picker-actions {
  display: flex;
  align-items: center;
}

.css-color-picker-header {
  justify-content: space-between;
  margin-bottom: 12px;
}

.css-color-picker-header strong {
  font-size: 13px;
}

.css-color-picker-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
}

.css-color-picker-custom {
  gap: 10px;
  margin-bottom: 12px;
}

.css-native-color-input {
  width: 44px;
  height: 36px;
  flex: 0 0 44px;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.css-color-hex-input,
.css-color-picker-rgb input {
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-code);
  text-align: center;
}

.css-color-hex-input {
  width: 100%;
  height: 36px;
  padding: 6px 8px;
}

.css-color-presets {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.css-color-preset {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.css-color-preset:hover,
.css-color-preset:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.css-color-picker-rgb {
  gap: 8px;
  margin-bottom: 12px;
}

.css-color-picker-rgb label {
  flex: 1;
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.css-color-picker-rgb input {
  width: 100%;
  height: 34px;
  padding: 4px;
}

.css-color-picker-actions {
  justify-content: flex-end;
  gap: 8px;
}

.css-color-picker-actions button {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
}

.css-color-picker-actions .css-color-apply {
  border-color: var(--accent-hover);
  background: var(--accent-color);
  color: #ffffff;
}

#suggestionPopup::-webkit-scrollbar {
  width: 6px;
}

#suggestionPopup::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

#suggestionPopup::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

#suggestionPopup::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* These four previously carried their own inline position/size styles. Those
   are gone so every close button is governed by one place; the corner
   positioning they relied on is restored here. Size and icon scale are left
   to the shared rule further down so all fourteen match. */
#closeSettingsBtn,
#closeModalBtn,
#closeProjectLibraryBtn,
#closeFontPickerBtn,
#closeSettingsColorPickerBtn {
  position: absolute !important;
  top: 13px !important;
  right: 13px !important;
  z-index: 5;
}

#closeTutorialBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  border-radius: 10px !important;
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease,
    text-shadow 0.18s ease !important;
}

#closeSettingsBtn:hover,
#closeModalBtn:hover,
#closeProjectLibraryBtn:hover,
#closeFontPickerBtn:hover,
#closeTutorialBtn:hover {
  color: #ff1f1f !important;
  background: rgba(255, 31, 31, 0.12) !important;
  text-shadow: 0 0 14px rgba(255, 31, 31, 0.72) !important;
  transform: scale(1.08) !important;
}

.run-button {
  background: var(--accent-color);
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.3px;
}

.run-button:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.run-button:active {
  transform: translateY(0);
}

#appDialog > div {
  max-height: min(82dvh, 720px);
  overflow-y: auto;
}

.run-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

button[aria-busy="true"] {
  cursor: progress;
}

button[aria-busy="true"] .fa-spinner {
  flex: 0 0 auto;
}

.codx-notification {
  position: fixed;
  right: 20px;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  z-index: 10000;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  animation: codxNotificationIn 0.28s ease;
  transition: top 0.22s ease;
  overflow: hidden;
}

.codx-notification::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.45);
  transform-origin: left center;
  animation: codxNotificationTimer var(--codx-notification-duration, 3s) linear forwards;
}

.codx-notification.is-actionable {
  cursor: pointer;
  border-color: rgba(255, 255, 255, 0.26);
}

.codx-notification.is-actionable:hover {
  filter: brightness(1.08);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.34);
}

.codx-notification.is-actionable:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.codx-notification.is-leaving {
  animation: codxNotificationOut 0.28s ease forwards;
}

.codx-notification-info {
  background: linear-gradient(135deg, rgba(27, 88, 177, 0.96), rgba(24, 118, 210, 0.96));
}

.codx-notification-success {
  background: linear-gradient(135deg, rgba(28, 104, 52, 0.96), rgba(56, 142, 60, 0.96));
}

.codx-notification-warn {
  background: linear-gradient(135deg, rgba(143, 92, 15, 0.96), rgba(237, 137, 29, 0.96));
}

.codx-notification-error {
  background: linear-gradient(135deg, rgba(145, 31, 31, 0.97), rgba(220, 38, 38, 0.96));
}

.codx-notification-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 18px;
}

.codx-notification-body {
  min-width: 0;
  flex: 1;
}

.codx-notification-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.88;
  margin-bottom: 4px;
}

.codx-notification-message {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  word-break: break-word;
}

@keyframes codxNotificationIn {
  from {
    transform: translateX(28px) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

@keyframes codxNotificationOut {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(34px) scale(0.98);
    opacity: 0;
  }
}

@keyframes codxNotificationTimer {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.btn-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.divider {
  width: 12px;
  background: var(--bg-secondary);
  cursor: col-resize;
  position: relative;
  user-select: none;
  z-index: 10;
  transition: background 0.2s ease;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}

.divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 40px;
  background: var(--border-color);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
}

.divider:hover::before {
  background: var(--accent-color);
  height: 56px;
}

.divider.dragging {
  background: var(--accent-color);
  border-color: var(--accent-hover);
}

.divider.dragging::before {
  background: #ffffff;
}

.preview {
  flex: 1;
  min-width: 0;
  background: var(--preview-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

#previewFavicon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 4px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.preview-header-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.preview-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.preview-device-badge {
  flex: 0 0 auto;
  max-width: 150px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-icon-button {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.preview-icon-button:hover {
  color: var(--text-primary);
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--bg-tertiary) 76%, var(--accent-color));
  transform: translateY(-1px);
}

.preview-icon-button:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.preview-icon-button[aria-pressed="true"] {
  color: #ffffff;
  border-color: var(--accent-hover);
  background: var(--accent-color);
}

#previewZoomBtn[aria-expanded="true"] {
  color: #ffffff;
  border-color: var(--accent-hover);
  background: var(--accent-color);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-color) 34%, transparent);
}

.preview-zoom-glyph {
  width: 19px;
  height: 19px;
  overflow: visible;
  color: currentColor;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16));
  transition: transform 0.18s ease, filter 0.18s ease;
}

.preview-zoom-glyph-lens {
  fill: color-mix(in srgb, var(--accent-color) 12%, transparent);
  stroke: currentColor;
  stroke-width: 1.85;
}

.preview-zoom-glyph-handle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
}

.preview-zoom-glyph-mark {
  fill: none;
  stroke: var(--accent-color);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.preview-zoom-glyph-glint {
  fill: color-mix(in srgb, currentColor 62%, transparent);
}

#previewZoomBtn:hover .preview-zoom-glyph {
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--accent-color) 32%, transparent));
  transform: scale(1.08) rotate(-3deg);
}

#previewZoomBtn[aria-expanded="true"] .preview-zoom-glyph-mark {
  stroke: #ffffff;
}

#previewZoomBtn[aria-expanded="true"] .preview-zoom-glyph-lens {
  fill: rgba(255, 255, 255, 0.16);
}

.preview-icon-button.is-refreshing {
  color: #ffffff;
  border-color: var(--accent-hover);
  background: var(--accent-color);
  cursor: progress;
}

.preview-icon-button.is-refreshing > i {
  animation: previewRefreshSpin .65s linear infinite;
}

@keyframes previewRefreshSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .preview-icon-button.is-refreshing > i { animation: none; }
}

.preview-zoom-modal[hidden] {
  display: none;
}

.preview-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(4px);
}

.preview-zoom-dialog {
  width: min(340px, 100%);
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
}

.preview-zoom-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.preview-zoom-dialog-header > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preview-zoom-eyebrow {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#previewZoomModalTitle {
  font-size: 18px;
}

.preview-zoom-close,
.preview-zoom-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
}

.preview-zoom-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.preview-zoom-value {
  display: block;
  margin: 22px 0 16px;
  color: var(--accent-color);
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.preview-zoom-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.preview-zoom-controls button {
  min-height: 44px;
  border-radius: 9px;
  font-size: 17px;
}

.preview-zoom-close:hover,
.preview-zoom-controls button:hover {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--bg-tertiary) 76%, var(--accent-color));
}

.preview-zoom-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.preview-zoom-reset {
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 700;
}

.preview-zoom-reset:hover {
  color: var(--text-primary);
  border-color: var(--accent-color);
}

.preview-zoom-reset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.preview-zoom-close:focus-visible,
.preview-zoom-controls button:focus-visible,
.preview-zoom-reset:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.preview:fullscreen,
.preview:-webkit-full-screen {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
  background: var(--preview-bg);
}

#output:fullscreen,
#output:-webkit-full-screen {
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  background: var(--preview-bg);
}

#previewTitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#previewLink {
  width: 100%;
  min-width: 0;
  padding: 2px 4px;
  margin-left: -4px;
  border: 1px solid transparent;
  border-radius: 5px;
  outline: none;
  background: transparent;
  font-size: 11px;
  font-family: var(--font-code);
  /* JetBrains Mono joins // into one ligature glyph, so a typed https://
     rendered as https:/ and looked like a dropped character. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#previewLink:hover {
  border-color: var(--border-color);
}
#previewLink:focus {
  border-color: var(--accent-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.preview-viewport-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(45deg, rgba(127, 127, 127, 0.055) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(127, 127, 127, 0.055) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(127, 127, 127, 0.055) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(127, 127, 127, 0.055) 75%),
    var(--bg-primary);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.preview-device-shell {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.preview-device-frame {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform-origin: top left;
  background: var(--preview-bg);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.32);
}

.preview-device-frame.show-layout-grid::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(35, 134, 54, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35, 134, 54, 0.16) 1px, transparent 1px),
    linear-gradient(to right, rgba(88, 166, 255, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(88, 166, 255, 0.28) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 64px 64px, 64px 64px;
}

.preview-breakpoint-indicator {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(13, 17, 23, 0.88);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  font: 800 10px/1.2 var(--font-code);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.preview-breakpoint-indicator[hidden] {
  display: none;
}

.preview-viewport-stage.is-responsive .preview-device-shell,
.preview-viewport-stage.is-responsive .preview-device-frame {
  position: relative;
  width: 100%;
  height: 100%;
  transform: none;
  box-shadow: none;
}

.preview-viewport-stage:not(.is-responsive) {
  padding: 18px;
  box-sizing: border-box;
}

.preview-viewport-stage:not(.is-responsive) .preview-device-frame {
  outline: 1px solid color-mix(in srgb, var(--border-color) 82%, #ffffff 18%);
  border-radius: 12px;
}

iframe {
  width: 100%;
  flex: 1;
  border: none;
  background: var(--preview-bg);
  color: var(--preview-text);
  transition:
    flex 0.2s ease,
    background-color 0.2s ease;
}

.preview-device-frame > #output {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
}

.console-container {
  flex: none;
  height: 180px;
  border-top: 1px solid var(--border-color);
  display: none;
  transition: border-color 0.2s ease;
  background: var(--console-bg);
}

.console-container.show {
  display: block;
}

.console-output {
  width: 100%;
  height: calc(100% - 44px);
  background: var(--console-bg);
  color: var(--console-text);
  font-family: var(--font-code);
  font-size: 12px;
  padding: 12px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.5;
}

.codx-diagnostic-line.has-location {
  cursor: pointer;
  border-left: 3px solid transparent;
  padding-left: 7px;
}

.codx-diagnostic-line.has-location:hover,
.codx-diagnostic-line.has-location:focus-visible {
  border-left-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  outline: none;
}

.console-output .error {
  color: var(--error-color);
  font-size: 14px;
}

.console-output .error .error-fix {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(248, 81, 73, 0.18);
  color: #ffd6d3;
  font-size: 12px;
  font-weight: 700;
}

.console-output .codx-smart-js-diagnostic {
  display: block;
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--error-color) 38%, var(--border-color));
  border-left: 4px solid var(--error-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--error-color) 7%, var(--bg-secondary));
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
}

.console-output .codx-smart-js-diagnostic.warn {
  border-color: color-mix(in srgb, var(--warning-color) 42%, var(--border-color));
  border-left-color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 7%, var(--bg-secondary));
}

.console-output .codx-smart-js-diagnostic:hover,
.console-output .codx-smart-js-diagnostic:focus-visible {
  border-left-color: var(--error-color);
  background: color-mix(in srgb, var(--error-color) 11%, var(--bg-secondary));
}

.console-output .codx-smart-js-diagnostic.warn:hover,
.console-output .codx-smart-js-diagnostic.warn:focus-visible {
  border-left-color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 11%, var(--bg-secondary));
}

.codx-smart-js-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 8px;
}

.codx-smart-js-category {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--error-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.warn .codx-smart-js-category {
  color: #171204;
  background: var(--warning-color);
}

.codx-smart-js-location {
  margin-left: auto;
  color: var(--text-secondary);
  font-family: var(--font-code);
  font-size: 10px;
}

.codx-smart-js-title {
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.codx-smart-js-why,
.codx-smart-js-fix {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
}

.codx-smart-js-why strong,
.codx-smart-js-fix strong {
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.codx-smart-js-why span,
.codx-smart-js-fix span {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.codx-smart-js-fix {
  margin-top: 8px;
  border-color: color-mix(in srgb, var(--success-color) 34%, var(--border-color));
  background: color-mix(in srgb, var(--success-color) 7%, var(--bg-tertiary));
}

@media (max-width: 600px) {
  .codx-smart-js-why,
  .codx-smart-js-fix {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .codx-smart-js-location {
    width: 100%;
    margin-left: 0;
  }
}

.console-output .codx-runtime-diagnostic {
  display: block;
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--error-color) 38%, var(--border-color));
  border-left: 4px solid var(--error-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--error-color) 7%, var(--bg-secondary));
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
}

.console-output .codx-runtime-diagnostic:hover,
.console-output .codx-runtime-diagnostic:focus-visible {
  border-left-color: var(--error-color);
  background: color-mix(in srgb, var(--error-color) 11%, var(--bg-secondary));
}

.codx-runtime-diagnostic-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.codx-runtime-category,
.codx-runtime-confidence {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.codx-runtime-category {
  color: #ffffff;
  background: var(--error-color);
}

.codx-runtime-confidence {
  border: 1px solid color-mix(in srgb, var(--warning-color) 48%, var(--border-color));
  color: var(--warning-color);
  background: color-mix(in srgb, var(--warning-color) 9%, transparent);
}

.codx-runtime-location {
  margin-left: auto;
  color: var(--text-secondary);
  font-family: var(--font-code);
  font-size: 10px;
}

.codx-runtime-repeat {
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  font-size: 9px;
  font-weight: 800;
}

.codx-runtime-error-title {
  margin-bottom: 10px;
  color: var(--error-color);
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.codx-runtime-why,
.codx-runtime-fix {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
}

.codx-runtime-why strong,
.codx-runtime-fix strong {
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.codx-runtime-why span,
.codx-runtime-fix span {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.codx-runtime-fix {
  margin-top: 8px;
  border-color: color-mix(in srgb, var(--success-color) 34%, var(--border-color));
  background: color-mix(in srgb, var(--success-color) 7%, var(--bg-tertiary));
}

.codx-runtime-source {
  display: grid;
  gap: 1px;
  margin: 9px 0;
  padding: 8px 0;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: 10px/1.55 var(--font-code);
  white-space: pre;
}

.codx-runtime-source > span {
  display: block;
  min-width: max-content;
  padding: 1px 10px;
}

.codx-runtime-source > span.active {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--error-color) 14%, transparent);
  box-shadow: inset 3px 0 var(--error-color);
}

.codx-runtime-raw {
  margin-top: 9px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
}

.codx-runtime-raw summary {
  padding: 8px 10px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.codx-runtime-raw pre {
  max-height: 190px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border-top: 1px solid var(--border-color);
  color: var(--text-primary);
  font: 10px/1.5 var(--font-code);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.codx-runtime-raw > code {
  display: block;
  padding: 8px 10px;
  border-top: 1px solid var(--border-color);
  color: var(--console-text);
  font: 9px/1.45 var(--font-code);
  overflow-wrap: anywhere;
  user-select: text;
}

@media (max-width: 600px) {
  .console-output .codx-runtime-diagnostic { padding: 10px; }
  .codx-runtime-location { width: 100%; margin-left: 0; }
  .codx-runtime-why,
  .codx-runtime-fix { grid-template-columns: 1fr; gap: 4px; }
}

.console-output .warn {
  color: var(--warning-color);
  font-size: 14px;
}

.console-output .info {
  color: var(--console-text);
  font-size: 14px;
}

.console-output .log {
  color: var(--success-color);
  font-weight: bold;
  font-size: 14px;
}

.console-output::-webkit-scrollbar {
  width: 10px;
}

.console-output::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

.console-output::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 5px;
  border: 2px solid var(--bg-primary);
}

.console-output::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.font-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.font-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.font-search-wrap i {
  color: var(--text-muted);
  font-size: 13px;
}

#fontSearchInput {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-ui);
}

#fontSearchInput::placeholder {
  color: var(--text-muted);
}

.font-catalog-status {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: -4px 2px 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.font-catalog-status[data-state="ready"] {
  color: var(--text-secondary);
}

.font-catalog-status[data-state="error"] {
  color: #ff8c8c;
}

.font-card:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.font-card:active {
  transform: scale(0.98);
}

.font-card-custom {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--accent-color) 62%, var(--border-color));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 55%),
    var(--bg-tertiary);
}

.font-card-source {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  border-radius: 999px;
  color: var(--accent-color);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

.font-load-more {
  grid-column: 1 / -1;
  min-height: 44px;
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-tertiary));
  color: var(--text-primary);
  font-weight: 800;
  cursor: pointer;
}

.font-load-more:hover {
  background: color-mix(in srgb, var(--accent-color) 22%, var(--bg-tertiary));
}

.icon-catalog-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
}

.icon-catalog-modal[hidden] { display: none !important; }

.icon-catalog-dialog {
  width: min(1180px, 96vw);
  height: min(900px, 92dvh);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.5);
}

.icon-catalog-dialog > * {
  min-width: 0;
  max-width: 100%;
}

.icon-catalog-header,
.icon-catalog-toolbar,
.icon-catalog-summary,
.icon-copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-catalog-header { justify-content: space-between; }
.icon-catalog-header h2 { margin: 2px 0 0; }
.icon-catalog-eyebrow { color: var(--accent-color); font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.icon-catalog-close { width: 38px; height: 38px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; }

.icon-cdn-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-primary));
}

.icon-cdn-card > div:first-child { display: grid; gap: 3px; }
.icon-cdn-card small { color: var(--text-muted); }
.icon-copy-row code { flex: 1; min-width: 0; padding: 10px; overflow: auto; border-radius: 8px; background: var(--bg-primary); color: var(--syntax-string, #9be394); white-space: nowrap; }
.icon-copy-row button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 0; border-radius: 8px; background: var(--accent-color); color: #fff; font-weight: 800; cursor: pointer; }

.icon-catalog-toolbar { width: 100%; min-width: 0; align-items: stretch; }
.icon-catalog-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-primary); }
.icon-catalog-search i { color: var(--text-muted); }
.icon-catalog-search input { width: 100%; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text-primary); }
.icon-catalog-toolbar select { min-width: 145px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); }
.icon-catalog-summary { justify-content: space-between; color: var(--text-muted); font-size: 12px; }
.icon-catalog-summary span:first-child { color: var(--text-primary); font-weight: 800; }
.icon-catalog-status { display: grid; place-items: center; gap: 8px; min-height: 90px; color: var(--text-muted); }
.icon-catalog-status[hidden] { display: none !important; }

.icon-catalog-grid {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 2px 6px 10px 2px;
}

.icon-catalog-card {
  min-width: 0;
  min-height: 132px;
  display: grid;
  grid-template-rows: 48px auto auto;
  place-items: center;
  gap: 6px;
  padding: 13px 10px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.icon-catalog-card:hover { transform: translateY(-2px); border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-primary)); }
.icon-catalog-card > i { color: var(--accent-color); font-size: 30px; }
.icon-catalog-card strong { width: 100%; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.icon-catalog-card code { width: 100%; overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.icon-catalog-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--text-muted); }

@media (max-width: 640px) {
  #fontAwesomeIconModal.icon-catalog-modal {
    align-items: stretch;
    padding: 4px !important;
  }

  #fontAwesomeIconModal .icon-catalog-dialog {
    width: 100%;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 12px !important;
  }

  #fontAwesomeIconModal .icon-catalog-dialog > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .icon-catalog-header h2 { font-size: 20px; }
  .icon-catalog-eyebrow { font-size: 9px; }
  .icon-catalog-close { width: 34px; height: 34px; }

  .icon-cdn-card {
    gap: 6px;
    padding: 8px;
    font-size: 10px;
  }

  .icon-cdn-card small { display: none; }

  .icon-copy-row {
    min-width: 0;
    align-items: stretch;
    gap: 6px;
  }

  .icon-copy-row code {
    padding: 8px;
    font-size: 9px;
  }

  .icon-copy-row button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 9px;
  }

  .icon-catalog-toolbar {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    gap: 6px;
  }

  .icon-catalog-search {
    gap: 6px;
    padding: 0 9px;
  }

  .icon-catalog-search input {
    height: 38px;
    font-size: 16px;
  }

  .icon-catalog-toolbar select {
    min-width: 0;
    min-height: 38px;
    padding: 0 7px;
    font-size: 11px;
  }

  .icon-catalog-summary { font-size: 10px; }

  .icon-catalog-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 1px 3px 8px 1px;
  }

  .icon-catalog-card {
    min-height: 96px;
    grid-template-rows: 34px auto auto;
    gap: 4px;
    padding: 8px 6px;
  }

  .icon-catalog-card > i { font-size: 23px; }
  .icon-catalog-card strong { font-size: 10px; }
  .icon-catalog-card code { font-size: 8px; }
  .icon-catalog-summary span:last-child { display: none; }
}

.font-name {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.font-preview {
  font-size: 24px;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.4;
  font-weight: 500;
}

.font-code {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-code);
  word-break: break-all;
  background: var(--bg-secondary);
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.font-hint {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.file-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.project-status-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.project-status-badge.saved {
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.32);
  color: var(--success-color);
}

.project-status-badge.unsaved {
  background: rgba(210, 153, 34, 0.14);
  border-color: rgba(210, 153, 34, 0.32);
  color: var(--warning-color);
}

.project-status-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--accent-color);
  background: var(--accent-color);
  color: #fff;
  cursor: pointer;
  min-height: 28px;
}

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

.project-status-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.project-sync-status {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
  white-space: nowrap;
}

.project-sync-status i { color: var(--accent-color); }
.project-sync-status[data-state="syncing"] i { animation: sync-cloud-pulse 1.15s ease-in-out infinite; }
.project-sync-status[data-state="offline"] { color: var(--warning-color); }
.project-sync-status[data-state="offline"] i { color: var(--warning-color); }
.project-sync-status[data-state="error"] { color: #ef4444; }
.project-sync-status[data-state="error"] i { color: #ef4444; }
.project-sync-status[hidden] { display: none !important; }

@keyframes sync-cloud-pulse {
  0%, 100% { opacity: .5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

@media (max-width: 699px), (max-width: 1280px) and (orientation: portrait), (max-width: 1100px) and (max-height: 560px) {
  body {
    height: 100dvh;
  }

  header {
    padding: 8px;
    font-size: 11px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  header::-webkit-scrollbar {
    height: 5px;
  }

  .header-switches {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-tertiary) 86%, transparent);
    flex: 0 0 auto;
    min-height: 36px;
  }

  .header-switches > span {
    display: none;
  }

  .theme-toggle {
    margin-left: 0;
    flex: 0 0 auto;
    padding: 0 4px;
  }

  header .run-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 11px;
    gap: 4px;
  }

  header .run-button strong {
    display: none;
  }

  #collabBtn {
    margin-left: 0 !important;
  }

  .editor-container {
    flex-direction: column;
    min-height: 0;
  }

  .editors {
    width: 100%;
    max-width: 100%;
    height: 52dvh;
    min-height: 320px;
  }

  .divider {
    width: 100%;
    height: 10px;
    cursor: row-resize;
  }

  .divider::before {
    width: 40px;
    height: 4px;
  }

  .divider:hover::before {
    width: 56px;
  }

  .preview {
    height: 48dvh;
    min-height: 220px;
  }

  .file-toolbar {
    gap: 8px;
  }

  .file-toolbar-meta {
    gap: 8px;
  }

  .project-status-wrap {
    gap: 6px;
  }

  .project-status-meta {
    display: none;
  }

  .project-sync-status {
    max-width: min(43vw, 210px);
  }

  .project-sync-status span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #newFileBtn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  .editor-actions {
    justify-content: stretch !important;
    padding: 6px !important;
    gap: 6px !important;
  }

  .editor-actions .run-button {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-width: 0;
    padding: 8px 10px;
    font-size: 11px;
  }

  .file-item {
    font-size: 12px;
    padding: 7px 10px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .file-item button {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    margin-left: 4px;
    padding: 0;
    border-radius: 7px;
  }

  #newFileBtn,
  .project-status-badge,
  .project-status-save-btn {
    min-height: 36px;
  }

  .editor-actions .run-button {
    min-height: 40px;
  }

  #suggestionPopup {
    min-width: min(190px, 90vw);
    max-width: min(260px, 90vw);
  }

  body.zen-mode #zenExitBtn {
    top: auto !important;
    right: max(10px, env(safe-area-inset-right, 0px) + 10px) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px) + 10px) !important;
    padding: 8px 12px;
    font-size: 11px;
  }

  body.zen-mode.zen-show-files .file-explorer {
    flex-basis: clamp(150px, 38vw, 210px);
    width: clamp(150px, 38vw, 210px);
    min-width: 150px;
    max-width: 210px;
  }

  body.zen-mode.zen-show-files .file-toolbar {
    padding: 7px !important;
  }

  body.zen-mode.zen-show-files #fileList {
    padding: 6px !important;
  }

  body.zen-mode.zen-show-files .file-item {
    padding: 7px 8px;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}.project-search-modal {
  position: fixed;
  inset: 0;
  z-index: 3250;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 34%),
    rgba(3, 8, 14, 0.76);
  backdrop-filter: blur(10px);
}

.project-search-modal[hidden] {
  display: none !important;
}

.project-search-dialog {
  width: min(940px, 100%);
  max-height: min(88dvh, 820px);
  display: grid;
  grid-template-rows: auto auto auto auto minmax(150px, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg-secondary) 97%, transparent);
  color: var(--text-primary);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  animation: projectSearchEnter 0.18s ease-out;
}

.project-search-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--accent-color) 12%, var(--bg-primary)), var(--bg-primary) 56%),
    var(--bg-primary);
}

.project-search-header::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 70%;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 54%, transparent);
}

.project-search-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.project-search-heading-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-tertiary));
  color: var(--accent-color);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color) 13%, transparent);
}

.project-search-heading > div {
  display: grid;
  gap: 2px;
}

.project-search-heading span:not(.project-search-heading-icon) {
  color: var(--accent-color);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.project-search-heading h2 {
  margin: 0;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -0.025em;
}

.project-search-close {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: pointer;
}

.project-search-close:hover {
  border-color: color-mix(in srgb, #ef4444 54%, var(--border-color));
  color: #ef4444;
}

.project-search-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-primary));
}

.project-search-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.project-search-field > span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.project-search-input-shell {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.project-search-input-shell:focus-within {
  border-color: color-mix(in srgb, var(--accent-color) 70%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 11%, transparent);
}

.project-search-input-shell > i {
  color: var(--accent-color);
  font-size: 13px;
}

.project-search-input-shell input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: 500 13px/1.4 var(--font-code, monospace);
}

.project-search-input-shell input:focus {
  outline: 0;
}

.project-search-input-shell kbd,
.project-search-footer kbd {
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 5px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font: 700 9px/1.2 system-ui, sans-serif;
}

.project-search-options {
  display: flex;
  gap: 6px;
  padding-bottom: 1px;
}

.project-search-options button {
  min-height: 45px;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 5px 9px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}

.project-search-options button span {
  color: var(--text-primary);
  font: 800 12px/1 var(--font-code, monospace);
}

.project-search-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent-color) 62%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-tertiary));
  color: var(--accent-color);
}

.project-search-options button[aria-pressed="true"] span {
  color: var(--accent-color);
}

.project-search-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 11px 20px 13px;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-secondary));
}

.project-search-filter-field {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.project-search-filter-field > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.project-search-filter-field > span i {
  color: var(--accent-color);
}

.project-search-filter-field > span small {
  margin-left: auto;
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.project-search-filter-input {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-secondary);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.project-search-filter-input:focus-within {
  border-color: color-mix(in srgb, var(--accent-color) 65%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.project-search-filter-input input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: 500 11px/1.4 var(--font-code, monospace);
}

.project-search-filter-input input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.project-search-clear-filters {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.project-search-clear-filters:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-color) 50%, var(--border-color));
  color: var(--accent-color);
}

.project-search-clear-filters:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.project-search-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.project-search-summary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.project-search-summary strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-search-summary > div > span {
  color: var(--text-muted);
  font-size: 10px;
}

.project-search-summary-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-replace-all,
.project-search-undo {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-tertiary));
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.project-search-undo {
  border-color: color-mix(in srgb, #22c55e 55%, var(--border-color));
  background: color-mix(in srgb, #22c55e 13%, var(--bg-tertiary));
  color: #34d975;
}

.project-search-undo:hover:not(:disabled) {
  border-color: #34d975;
  background: color-mix(in srgb, #22c55e 20%, var(--bg-tertiary));
  transform: translateY(-1px);
}

.project-search-undo[hidden] {
  display: none !important;
}

.project-replace-all:disabled,
.project-search-undo:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.project-search-results {
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 14px;
  background: color-mix(in srgb, var(--bg-secondary) 93%, var(--bg-primary));
}

.project-search-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  color: var(--text-muted);
  text-align: center;
}

.project-search-empty i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 15px;
  background: var(--bg-primary);
  color: var(--accent-color);
  font-size: 18px;
}

.project-search-empty strong {
  color: var(--text-primary);
  font-size: 13px;
}

.project-search-empty span {
  max-width: 430px;
  font-size: 11px;
  line-height: 1.5;
}

.project-search-file-group + .project-search-file-group {
  margin-top: 10px;
}

.project-search-file-heading {
  position: sticky;
  top: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 7px;
  background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 750;
}

.project-search-file-heading strong {
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-search-file-heading span {
  flex: 0 0 auto;
  color: var(--accent-color);
}

.project-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 6px;
  padding: 7px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.project-search-result:hover {
  border-color: color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  transform: translateY(-1px);
}

.project-search-result-open {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.project-search-result-line {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px solid var(--border-color);
  color: var(--text-muted);
  font: 700 10px/1 var(--font-code, monospace);
}

.project-search-result-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.project-search-result-copy code {
  overflow: hidden;
  color: var(--text-primary);
  font: 500 11px/1.5 var(--font-code, monospace);
  text-overflow: ellipsis;
  white-space: pre;
}

.project-search-result-copy mark {
  border-radius: 3px;
  padding: 1px 0;
  background: color-mix(in srgb, var(--accent-color) 32%, transparent);
  color: var(--text-primary);
}

.project-search-result-copy small {
  color: var(--text-muted);
  font-size: 9px;
}

.project-search-replace-one {
  align-self: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.project-search-replace-one:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent-color) 48%, var(--border-color));
  color: var(--accent-color);
}

.project-search-replace-one:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.project-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 9px;
}

.project-search-footer > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

@keyframes projectSearchEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .project-search-modal { padding: 7px; }
  .project-search-dialog { max-height: calc(100dvh - 14px); border-radius: 15px; }
  .project-search-header { padding: 14px; }
  .project-search-controls { grid-template-columns: 1fr; padding: 13px 14px; }
  .project-search-options { order: 3; }
  .project-search-options button { min-height: 39px; flex: 1; }
  .project-search-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; padding: 11px 14px; }
  .project-search-filter-field > span small { display: none; }
  .project-search-clear-filters { width: 36px; min-height: 38px; padding: 0; }
  .project-search-clear-filters span { display: none; }
  .project-search-summary { padding: 10px 14px; }
  .project-search-summary #projectSearchHint { display: none; }
  .project-replace-all span,
  .project-search-undo span { display: none; }
  .project-search-result { grid-template-columns: minmax(0, 1fr); }
  .project-search-replace-one { justify-self: end; margin-top: -2px; }
  .project-search-footer { padding: 9px 14px; }
  .project-search-footer > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {}

textarea:focus,
button:focus,
select:focus,
input:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-color);
  color: #ffffff;
}

::-moz-selection {
  background: var(--accent-color);
  color: #ffffff;
}

/* Visual polish pass */
body {
  background:
    radial-gradient(
      1200px 500px at 80% -10%,
      color-mix(in srgb, var(--accent-color) 20%, transparent),
      transparent 70%
    ),
    var(--bg-primary);
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, #ffffff);
}

.editors,
.preview,
.file-explorer,
.code-container {
  border-radius: 12px;
}

.editor-container {
  gap: 8px;
  padding: 8px;
}

.divider {
  border-radius: 8px;
}

.run-button {
  border: 1px solid color-mix(in srgb, var(--accent-color) 60%, #ffffff 10%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 86%, #ffffff 14%),
    var(--accent-color)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.16);
}

.run-button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.participant-file-access-list {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.file-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-visibility-quick-btn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
}

.file-visibility-quick-btn[hidden] {
  display: none !important;
}

.file-visibility-quick-btn.has-hidden-users {
  color: #fff;
  border-color: color-mix(in srgb, #f59e0b 72%, var(--border-color));
  background: color-mix(in srgb, #f59e0b 26%, var(--bg-tertiary));
  box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 12%, transparent);
}

.file-visibility-card {
  display: grid;
  gap: 12px;
}

.collab-select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
}

.google-font-customization {
  display: grid;
  gap: 15px;
  margin-top: 12px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  border-radius: 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-color) 9%, var(--bg-secondary)), var(--bg-secondary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: googleFontToolsIn 0.22s ease-out;
}

.google-font-customization[hidden] {
  display: none !important;
}

@keyframes googleFontToolsIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}

.google-font-customization-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.google-font-customization-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 18%, var(--bg-tertiary));
  color: var(--accent-color);
}

.google-font-customization-header > div {
  display: grid;
  gap: 3px;
}

.google-font-customization-header strong {
  color: var(--text-primary);
  font-size: 13px;
}

.google-font-customization-header small {
  color: var(--text-muted);
  font-size: 11px;
}

.google-font-control {
  display: grid;
  gap: 8px;
}

.google-font-control-label,
.google-font-range-labels,
.google-font-italic-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.google-font-control-label label,
.google-font-italic-toggle > span:first-child {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.google-font-control-label output {
  padding: 3px 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-primary);
  color: var(--accent-color);
  font-family: var(--font-code);
  font-size: 10px;
  font-weight: 700;
}

.google-font-control input[type="range"] {
  width: 100%;
  accent-color: var(--accent-color);
  cursor: pointer;
}

.google-font-range-labels {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.google-font-italic-toggle {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
  cursor: pointer;
}

.google-font-italic-toggle i {
  width: 18px;
  color: var(--accent-color);
}

.visibility-file-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-primary));
  color: var(--text-primary);
  word-break: break-word;
}

.codx-notification-action {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.96;
}

.notification-target-flash {
  animation: codxNotificationTargetFlash 0.9s ease-in-out 2;
  outline: 2px solid color-mix(in srgb, var(--accent-color) 78%, #ffffff);
  outline-offset: 2px;
}

@keyframes codxNotificationTargetFlash {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 28%, transparent);
  }
}


.visibility-file-name i {
  color: var(--accent-color);
}

.file-visibility-card .participant-file-access-list,
#participantFileAccessList {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
  background: var(--bg-primary);
}

.file-access-select-all {
  border-color: color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-tertiary));
}

#collabModal .collab-green-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin: 0;
  padding: 0;
  border: 2px solid #22c55e;
  border-radius: 6px;
  background: color-mix(in srgb, #22c55e 8%, var(--bg-primary));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

#collabModal .collab-green-checkbox::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.65);
  transition: opacity 0.14s ease, transform 0.14s ease;
}

#collabModal .collab-green-checkbox:hover {
  border-color: #4ade80;
  transform: translateY(-1px);
}

#collabModal .collab-green-checkbox:checked,
#collabModal .collab-green-checkbox:indeterminate {
  border-color: #16a34a;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 18%, transparent);
}

#collabModal .collab-green-checkbox:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

#collabModal .collab-green-checkbox:indeterminate::after {
  left: 3px;
  top: 7px;
  width: 9px;
  height: 0;
  border-width: 0 0 2px;
  opacity: 1;
  transform: none;
}

#collabModal .collab-green-checkbox:focus-visible {
  outline: 2px solid #86efac;
  outline-offset: 3px;
}

#collabModal .switch input:checked + .slider {
  border-color: #16a34a;
  background: #22c55e;
}

.file-access-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg-tertiary) 55%, transparent);
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.file-access-option + .file-access-option {
  margin-top: 8px;
}

.file-access-option:hover {
  background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
  border-color: color-mix(in srgb, var(--accent-color) 38%, var(--border-color));
  transform: translateY(-1px);
}

.collab-file-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  scrollbar-gutter: stable;
}

.collab-file-choice-list.is-compact {
  max-height: 190px;
}

.collab-file-choice-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-tertiary) 64%, transparent);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.collab-file-choice-option:hover,
.collab-file-choice-option.is-selected {
  border-color: color-mix(in srgb, #22c55e 68%, var(--border-color));
  background: color-mix(in srgb, #22c55e 10%, var(--bg-tertiary));
}

.collab-file-choice-option:hover {
  transform: translateY(-1px);
}

.collab-file-choice-icon,
.collab-select-all-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  border-radius: 9px;
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 12%, var(--bg-primary));
}

.collab-file-choice-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.collab-file-choice-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collab-file-choice-copy small {
  color: var(--text-muted);
  font-size: 10px;
}

.collab-file-picker-card {
  display: grid;
  gap: 13px;
}

.collab-select-all-option {
  margin-bottom: 10px;
  border-color: color-mix(in srgb, #22c55e 55%, var(--border-color));
  background: color-mix(in srgb, #22c55e 10%, var(--bg-primary));
}

.collab-secondary-action {
  border-color: color-mix(in srgb, #22c55e 35%, var(--border-color)) !important;
  background: color-mix(in srgb, #22c55e 9%, var(--bg-tertiary)) !important;
}

.collab-announcement-editor {
  display: grid;
  gap: 13px;
  width: 100%;
}

.collab-announcement-editor-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, #22c55e 36%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, #22c55e 9%, var(--bg-primary));
}

.collab-announcement-editor-heading > span:last-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.collab-announcement-editor-heading strong {
  color: var(--text-primary);
  font-size: 14px;
}

.collab-announcement-editor-heading small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.collab-announcement-editor-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: linear-gradient(145deg, #22c55e, #15803d);
  box-shadow: 0 8px 20px color-mix(in srgb, #16a34a 25%, transparent);
}

.collab-announcement-label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#collabModal .collab-announcement-input {
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(160px, 28dvh, 240px);
  max-height: 42dvh;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, #22c55e 40%, var(--border-color));
  border-radius: 13px;
  outline: none;
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-primary);
  caret-color: #22c55e;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#collabModal .collab-announcement-input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 15%, transparent);
}

#collabModal .collab-announcement-input::placeholder {
  color: var(--text-muted);
}

.collab-announcement-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-size: 11px;
}

.collab-announcement-input-footer span:last-child {
  color: #22c55e;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.collab-announcement-editor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 3px;
}

.collab-announcement-editor-actions .run-button {
  min-width: 118px;
  min-height: 42px;
  justify-content: center;
}

@media (max-width: 620px) {
  .collab-file-choice-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .collab-bulk-participant-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .collab-bulk-participant-option .collab-bulk-status {
    grid-column: 2;
  }

  .collab-announcement-editor-heading {
    padding: 11px;
  }

  #collabModal .collab-announcement-input {
    min-height: 150px;
    max-height: 36dvh;
    padding: 13px;
    font-size: 16px;
  }

  .collab-announcement-input-footer span:first-child {
    display: none;
  }

  .collab-announcement-input-footer {
    justify-content: flex-end;
  }

  .collab-announcement-editor-actions .run-button {
    flex: 1 1 110px;
    min-width: 0;
  }
}

.file-access-check {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.file-access-check input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.file-access-box {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border-color) 85%, #ffffff 15%);
  background: var(--bg-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.file-access-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.75);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.file-access-check input:checked + .file-access-box {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 85%, #ffffff 15%),
    var(--accent-color)
  );
  border-color: color-mix(in srgb, var(--accent-color) 78%, #ffffff 10%);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent-color) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.file-access-check input:checked + .file-access-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.file-access-check input:focus-visible + .file-access-box {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.file-access-name {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}

.collab-section-card {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-tertiary) 65%, transparent);
  text-align: left;
}

.collab-section-title {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.collab-section-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.collab-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.collab-choice-card {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.collab-choice-card i {
  font-size: 24px;
  color: var(--accent-color);
}

.collab-choice-card:hover {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-primary));
  transform: translateY(-1px);
}

.zip-choice-intro {
  margin-bottom: 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
}

.zip-choice-card span {
  display: grid;
  gap: 5px;
  text-align: center;
}

.zip-choice-card strong {
  color: var(--text-primary);
  font-size: 14px;
}

.zip-choice-card small {
  max-width: 25ch;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
  text-transform: none;
}

.collab-form-grid {
  display: grid;
  gap: 14px;
  text-align: left;
}

/* ---------------------------------------------------------------------------
   Session name field: message under the box, not below the pickers
   --------------------------------------------------------------------------- */
.collab-name-field .collab-name-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  min-height: 15px;   /* reserved, so the form does not jump when a message appears */
}

.collab-name-error {
  flex: 1 1 auto;
  color: var(--error-color, #cf222e);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Muted until the limit is passed, so it reads as information rather than as a
   warning while there is still room. */
.collab-name-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.collab-name-count.is-over {
  color: var(--error-color, #cf222e);
  font-weight: 700;
}

.collab-name-field input.is-invalid {
  border-color: var(--error-color, #cf222e);
}

.collab-name-field input.is-invalid:focus {
  outline-color: var(--error-color, #cf222e);
}

.collab-form-field {
  display: grid;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
}

.collab-form-field input[type="text"] {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
}

.collab-waiting-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.collab-waiting-room-row > div { display: grid; gap: 4px; }
.collab-waiting-room-row small { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.collab-waiting-room-row .switch { flex: 0 0 44px; }

.collab-cursor-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.collab-cursor-choice {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
}

.collab-cursor-choice i { font-size: 18px; color: var(--text-muted); }
.collab-cursor-choice span { overflow: hidden; max-width: 100%; font-size: 10px; text-overflow: ellipsis; }
.collab-cursor-choice:hover,
.collab-cursor-choice.selected { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-primary)); }
.collab-cursor-choice.selected i { color: var(--accent-color); }

.collab-pin-input,
.collab-session-pin,
.collab-inline-pin {
  letter-spacing: 0.16em;
  font-family: Consolas, "Courier New", monospace;
}

.collab-pin-box-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(36px, 1fr));
  gap: 8px;
}

.collab-pin-box {
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: Consolas, "Courier New", monospace;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.collab-pin-box:focus {
  outline: 2px solid var(--accent-color);
  border-color: var(--accent-color);
}

.collab-back-button {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 34px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.collab-pin-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
}

.collab-session-pin {
  color: var(--text-primary);
  font-size: clamp(32px, 8vw, 52px);
  font-weight: 900;
}

.collab-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.collab-meta-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-primary);
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.collab-meta-label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.collab-meta-value {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  word-break: break-word;
}

.collab-pin-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.collab-copy-pin-button {
  min-height: 36px;
  flex: 0 0 auto;
  justify-content: center;
  padding: 8px 12px;
  background: #2563eb;
}

.collab-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.collab-action-grid .run-button {
  width: 100%;
  min-height: 42px;
  justify-content: center;
}

.collab-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.collab-control-btn {
  --collab-control-tone: #16a34a;
  --collab-control-deep: #166534;
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--collab-control-tone) 72%, #ffffff 16%) !important;
  background: linear-gradient(145deg, var(--collab-control-tone), var(--collab-control-deep)) !important;
  color: #ffffff !important;
  text-align: left;
  justify-content: stretch;
}

.collab-control-btn i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
  background: color-mix(in srgb, #ffffff 19%, transparent);
  color: #ffffff;
  font-size: 14px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--collab-control-deep) 36%, transparent);
}

.collab-control-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.collab-control-title {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.collab-control-desc {
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.collab-control-btn.is-active {
  outline: 2px solid color-mix(in srgb, var(--collab-control-tone) 52%, #ffffff);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--collab-control-tone) 22%, transparent);
}

.collab-control-btn[data-tone="danger"] {
  --collab-control-tone: #dc2626;
  --collab-control-deep: #991b1b;
}

.collab-control-btn[data-tone="warning"] {
  --collab-control-tone: #d97706;
  --collab-control-deep: #92400e;
}

.collab-control-btn[data-tone="purple"] {
  --collab-control-tone: #7c3aed;
  --collab-control-deep: #5b21b6;
}

.collab-control-btn[data-tone="blue"] {
  --collab-control-tone: #2563eb;
  --collab-control-deep: #1e40af;
}

.collab-control-btn[data-tone="rose"] {
  --collab-control-tone: #e11d48;
  --collab-control-deep: #9f1239;
}

.collab-control-btn[data-tone="amber"] {
  --collab-control-tone: #d97706;
  --collab-control-deep: #92400e;
}

.collab-control-btn[data-tone="orange"] {
  --collab-control-tone: #ea580c;
  --collab-control-deep: #9a3412;
}

.collab-control-btn[data-tone="emerald"] {
  --collab-control-tone: #059669;
  --collab-control-deep: #065f46;
}

.collab-control-btn[data-tone="teal"] {
  --collab-control-tone: #0d9488;
  --collab-control-deep: #115e59;
}

.collab-control-btn[data-tone="cyan"] {
  --collab-control-tone: #0891b2;
  --collab-control-deep: #155e75;
}

.collab-control-btn[data-tone="indigo"] {
  --collab-control-tone: #4f46e5;
  --collab-control-deep: #3730a3;
}

.collab-control-btn[data-tone="pink"] {
  --collab-control-tone: #db2777;
  --collab-control-deep: #9d174d;
}

.collab-control-btn[data-tone="slate"] {
  --collab-control-tone: #475569;
  --collab-control-deep: #1e293b;
}

.collab-bulk-participant-list {
  display: grid;
  gap: 10px;
  max-height: 300px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
}

.collab-bulk-participant-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
}

.collab-bulk-participant-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent-color);
}

.collab-bulk-status {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.collab-participant-list {
  display: grid;
  gap: 10px;
}

.collab-participant-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.collab-participant-list-heading .collab-section-title {
  margin: 0;
}

.collab-participant-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.collab-participant-sort-select {
  min-height: 34px;
  padding: 6px 30px 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.collab-participant-sort-select:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.collab-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding-right: 6px;
}

.collab-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  font-size: 12px;
}

.collab-timeline-time {
  font-weight: 700;
  color: var(--text-muted);
  min-width: 52px;
}

.collab-timeline-text {
  flex: 1;
  color: var(--text-primary);
}

.collab-timeline-item.chat {
  border-left: 3px solid color-mix(in srgb, var(--accent-color) 70%, #ffffff);
}

.collab-timeline-item.role {
  border-left: 3px solid #8b5cf6;
}

.collab-timeline-item.moderation {
  border-left: 3px solid #f59e0b;
}

.collab-timeline-item.focus {
  border-left: 3px solid #22c55e;
}

.collab-timeline-item.session {
  border-left: 3px solid #38bdf8;
}

.collab-timeline-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 6px 4px;
}

.collab-participant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
}

.collab-participant-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.collab-participant-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.collab-participant-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 12px;
}

.collab-color-picker-wrap {
  display: grid;
  gap: 14px;
  margin-top: 10px;
  text-align: left;
  overflow: visible;
}

.collab-color-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  /* Wider row gap so the TAKEN label below a swatch never collides with the
     next row, and a little bottom padding for the final row. */
  column-gap: 10px;
  row-gap: 26px;
  padding-bottom: 6px;
  overflow: visible;
}

.collab-color-swatch {
  position: relative;
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.collab-color-swatch:hover {
  transform: translateY(-1px);
}

.collab-color-swatch.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--accent-color);
}

/* The label used to sit at bottom: -8px, half inside the swatch and half in
   the 10px grid gap, so it was clipped and overlapped the row beneath. It now
   sits fully below the swatch, and the grid's row gap makes room for it. */
.collab-color-swatch.taken::after {
  content: "TAKEN";
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.collab-color-swatch.taken {
  cursor: not-allowed;
  opacity: 0.55;
}

.collab-color-taken-list {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

/* The avatar carries the person's chosen colour, so the letter must stay
   legible on both a pale yellow and a near-black pick. White with a soft dark
   shadow reads on both without needing to compute contrast per colour. */
.collab-participant-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  border: 1.5px solid color-mix(in srgb, var(--border-color) 60%, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  user-select: none;
}

.collab-color-taken-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The name takes the free space and the hex sits hard right, so the rows
   line up as a column even when names are different lengths. */
.collab-color-taken-name {
  flex: 1 1 auto;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.collab-color-taken-hex {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.collab-participant-text {
  min-width: 0;
}

.collab-participant-name {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  word-break: break-word;
}

.collab-participant-meta {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
}

.collab-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collab-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-primary));
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
}

.collab-pending-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
}

.collab-pending-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.waiting-room-popup {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 6000;
  width: min(430px, calc(100vw - 28px));
  max-height: min(680px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-color) 56%, var(--border-color));
  border-radius: 16px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  animation: waitingRoomPopupIn .2s ease-out;
}

@keyframes waitingRoomPopupIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.waiting-room-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-tertiary));
}

.waiting-room-popup-header > div { display: grid; gap: 3px; }
.waiting-room-popup-header span { color: var(--accent-color); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.waiting-room-popup-header strong { font-size: 15px; }
.waiting-room-popup-header button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--accent-color); color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; }
.waiting-room-popup-header button:disabled { opacity: .65; cursor: wait; }

.waiting-room-request-list {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding: 12px;
}

.waiting-room-request-card {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
}

.waiting-room-user { display: flex; align-items: center; gap: 11px; min-width: 0; }
.waiting-room-user > div { min-width: 0; display: grid; gap: 4px; }
.waiting-room-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waiting-room-user small { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.waiting-room-user small span { width: 10px; height: 10px; flex: 0 0 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }

.waiting-room-color {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--waiting-user-color) 78%, #fff);
  border-radius: 50%;
  background: color-mix(in srgb, var(--waiting-user-color) 24%, var(--bg-tertiary));
  color: var(--waiting-user-color);
  font-size: 15px;
  font-weight: 900;
}

.waiting-room-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.waiting-room-actions button { min-height: 38px; border: 0; border-radius: 9px; color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; }
.waiting-room-actions button:disabled { opacity: .55; cursor: wait; }
.waiting-room-accept { background: #218739; }
.waiting-room-deny { background: #c53030; }

@media (max-width: 560px) {
  .waiting-room-popup {
    top: auto;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 16px);
    max-height: min(72dvh, 620px);
  }
}

.project-library-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.project-library-actions .run-button {
  min-height: 76px;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: left;
}

.project-library-actions .run-button > i {
  width: 34px;
  font-size: 24px;
  text-align: center;
}

.project-library-actions .run-button > span {
  display: grid;
  gap: 4px;
}

.project-library-actions .run-button small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.project-library-actions .run-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.project-library-actions #importAllProjectsBtn {
  background: #2563eb;
}

.template-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.template-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--template-accent) 32%, var(--border-color));
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--template-accent) 26%, transparent), transparent 34%),
    radial-gradient(circle at 100% 16%, color-mix(in srgb, var(--template-accent) 18%, transparent), transparent 28%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--bg-primary) 94%, var(--template-accent) 6%),
      color-mix(in srgb, var(--bg-tertiary) 88%, var(--template-accent) 12%)
    );
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.template-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.11), transparent 35%);
  opacity: 0.65;
}

.template-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--template-accent) 68%, var(--border-color));
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.22),
    0 0 0 1px color-mix(in srgb, var(--template-accent) 22%, transparent);
}

.template-card > * {
  position: relative;
  z-index: 1;
}

.template-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.template-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--template-accent) 42%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--template-accent) 25%, white), color-mix(in srgb, var(--template-accent) 14%, transparent));
  color: var(--template-accent);
  font-size: 17px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--template-accent) 20%, transparent);
}

.template-tone {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--template-accent) 18%, transparent);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--template-accent) 25%, transparent);
}

.template-preview {
  display: grid;
  grid-template-columns: repeat(3, 8px) 1fr;
  align-items: center;
  gap: 7px;
  min-height: 112px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--template-accent) 24%, var(--border-color));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--template-accent) 18%, transparent), transparent 45%),
    color-mix(in srgb, var(--bg-primary) 72%, transparent);
}

.template-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--template-accent) 64%, var(--text-muted));
}

.template-preview-hero,
.template-preview-line,
.template-preview-cards {
  grid-column: 1 / -1;
}

.template-preview-hero {
  height: 30px;
  margin-top: 6px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, var(--template-accent), color-mix(in srgb, var(--template-accent) 35%, white));
  opacity: 0.92;
}

.template-preview-line {
  width: 58%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 42%, transparent);
}

.template-preview-line.wide {
  width: 82%;
}

.template-preview-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.template-preview-cards span {
  height: 24px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--template-accent) 18%, var(--bg-secondary));
  border: 1px solid color-mix(in srgb, var(--template-accent) 20%, transparent);
}

.template-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.template-description {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.65;
}

.template-meta-row,
.template-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-meta-pill,
.template-highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.template-meta-pill {
  background: color-mix(in srgb, var(--bg-primary) 86%, var(--template-accent) 8%);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.template-highlight-pill {
  background: color-mix(in srgb, var(--template-accent) 16%, transparent);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--template-accent) 18%, transparent);
}

.template-card .run-button {
  width: 100%;
  justify-content: center;
  min-height: 46px;
  border-radius: 12px;
  background: var(--template-accent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--template-accent) 24%, transparent);
}

.template-card .run-button:hover {
  filter: brightness(1.06);
}

/* Art-directed starter template library */
#projectLibraryModal.template-library-open > div {
  width: min(1180px, 96vw) !important;
  max-height: 92dvh;
}

.template-library-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-color) 25%, var(--border-color));
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent-color) 26%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-primary) 94%, var(--accent-color) 6%), var(--bg-primary));
}

.template-library-intro h3 {
  margin: 6px 0 7px;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.035em;
}

.template-library-intro p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.55;
}

.template-library-kicker {
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.template-library-count {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  min-width: 92px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-secondary) 86%, transparent);
  color: var(--text-secondary);
  font-size: 11px;
}

.template-library-count strong {
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1;
}

.template-library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.template-library-search {
  flex: 1 1 300px;
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  color: var(--text-muted);
  background: var(--bg-primary);
}

.template-library-search:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent);
}

.template-library-search input {
  width: 100%;
  padding: 10px 0;
  border: 0;
  outline: 0;
  color: var(--text-primary);
  background: transparent;
  font-size: 12px;
}

.template-library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.template-library-filters button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.template-library-filters button:hover,
.template-library-filters button.active {
  border-color: var(--accent-color);
  color: #fff;
  background: var(--accent-color);
}

.template-library-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.template-card {
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--template-accent) 8%, var(--bg-secondary)), var(--bg-secondary) 48%),
    var(--bg-secondary);
}

.template-card[hidden] {
  display: none;
}

.template-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.28),
    0 0 0 1px color-mix(in srgb, var(--template-accent) 38%, transparent);
}

.template-card-top {
  padding: 2px 3px 0;
}

.template-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 15px;
}

.template-card-labels {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.template-category {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.template-tone {
  padding: 4px 8px;
  font-size: 9px;
}

.template-preview {
  position: relative;
  display: block;
  min-height: 0;
  height: 178px;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
}

.template-preview-bar {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(11, 13, 17, 0.68);
  backdrop-filter: blur(8px);
}

.template-preview-bar > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
}

.template-preview-bar small {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.68);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.template-preview-scene {
  position: absolute;
  inset: 28px 0 0;
  overflow: hidden;
}

.template-title {
  margin-top: 2px;
  padding: 0 3px;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.template-description {
  min-height: 50px;
  padding: 0 3px;
  font-size: 12px;
  line-height: 1.52;
}

.template-meta-row,
.template-highlights {
  padding: 0 3px;
}

.template-meta-pill,
.template-highlight-pill {
  font-size: 9px;
}

.template-card .run-button {
  display: flex;
  justify-content: space-between;
  min-height: 42px;
  padding-inline: 15px;
  border-radius: 11px;
  background: linear-gradient(110deg, var(--template-accent), var(--template-accent-2));
  font-size: 10px;
  letter-spacing: 0.08em;
}

.template-card-actions {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7px;
}

.template-card-actions .run-button {
  min-width: 0;
  padding-inline: 11px;
  font-size: 9px;
}

.template-card-actions .preview-template-btn {
  justify-content: center;
  gap: 7px;
  border-color: color-mix(in srgb, var(--template-accent) 54%, var(--border-color));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--template-accent) 10%, var(--bg-primary));
  box-shadow: none;
}

.template-card-actions .preview-template-btn:hover {
  color: var(--template-accent);
  background: color-mix(in srgb, var(--template-accent) 16%, var(--bg-primary));
}

.template-library-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 30px;
  border: 1px dashed var(--border-color);
  border-radius: 16px;
  color: var(--text-secondary);
  text-align: center;
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
}

.template-library-empty[hidden] {
  display: none;
}

.template-library-empty i {
  color: var(--accent-color);
  font-size: 24px;
}

.template-library-empty strong {
  color: var(--text-primary);
  font-size: 15px;
}

.template-library-empty span {
  font-size: 11px;
}

.template-card .run-button i {
  transition: transform 0.18s ease;
}

.template-card .run-button:hover i {
  transform: translateX(4px);
}

/* Signal Room preview */
.template-preview-signal {
  border-color: rgba(195, 255, 71, 0.28);
  background: #090d0b;
}
.template-preview-signal .template-preview-scene {
  padding: 18px 16px;
  background:
    linear-gradient(rgba(195, 255, 71, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(195, 255, 71, 0.055) 1px, transparent 1px),
    #090d0b;
  background-size: 18px 18px;
}
.preview-orb {
  position: absolute;
  width: 98px;
  height: 98px;
  right: -12px;
  top: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #efffb5, #c3ff47 26%, #16784a 58%, transparent 59%);
  filter: drop-shadow(0 0 22px rgba(195, 255, 71, 0.34));
}
.preview-kicker,
.preview-display {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: 999px;
}
.preview-kicker { width: 56px; height: 5px; margin-bottom: 14px; background: #c3ff47; }
.preview-display { width: 68%; height: 14px; margin-bottom: 7px; background: #f4f7ee; }
.preview-display.short { width: 45%; }
.preview-terminal {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 13px;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(195, 255, 71, 0.28);
  border-radius: 8px;
  background: rgba(6, 12, 8, 0.86);
}
.preview-terminal i { height: 3px; border-radius: 2px; background: rgba(195, 255, 71, 0.48); }
.preview-terminal i:nth-child(2) { width: 72%; }
.preview-terminal i:nth-child(3) { width: 42%; background: #c3ff47; }

/* Studio Ledger preview */
.template-preview-ledger {
  border-color: rgba(19, 18, 16, 0.18);
  background: #eee9dc;
}
.template-preview-ledger .template-preview-bar { background: #171713; }
.template-preview-ledger .template-preview-scene { padding: 12px 14px; color: #171713; }
.preview-ledger-index { position: absolute; top: 9px; right: 13px; color: #d64628; font: 900 27px/1 Georgia, serif; }
.preview-ledger-rule { display: block; width: calc(100% - 46px); height: 1px; margin: 5px 0 11px; background: #171713; }
.preview-ledger-title { display: block; width: 66%; height: 22px; border-top: 8px solid #171713; border-bottom: 8px solid #171713; }
.preview-ledger-image { position: absolute; left: 14px; bottom: 11px; width: 47%; height: 54px; background: linear-gradient(135deg, #d64628, #68291d); }
.preview-ledger-copy { position: absolute; right: 14px; bottom: 11px; width: 39%; height: 48px; background: repeating-linear-gradient(#171713 0 2px, transparent 2px 8px); opacity: 0.68; }

/* Project Concierge preview */
.template-preview-concierge { border-color: rgba(255, 187, 148, 0.24); background: #25132c; }
.template-preview-concierge .template-preview-bar { background: #190d1e; }
.template-preview-concierge .template-preview-scene { padding: 14px 16px; }
.preview-form-progress { display: block; width: 100%; height: 3px; margin-bottom: 14px; border-radius: 9px; background: rgba(255,255,255,.12); }
.preview-form-progress i { display: block; width: 46%; height: 100%; border-radius: inherit; background: #ffbb94; }
.preview-form-number { position: absolute; right: 16px; top: 17px; color: rgba(255,187,148,.32); font: 900 38px/1 Georgia, serif; }
.preview-form-title { display: block; width: 66%; height: 16px; margin-bottom: 22px; border-top: 6px solid #fff8ef; border-bottom: 6px solid #fff8ef; }
.preview-form-choice { display: inline-block; width: 43%; height: 36px; border: 1px solid rgba(255,187,148,.45); border-radius: 8px; background: rgba(255,187,148,.1); }
.preview-form-choice.second { margin-left: 5px; background: #ffbb94; }

/* Pulseboard preview */
.template-preview-dashboard { border-color: rgba(78, 231, 203, 0.25); background: #07131c; }
.template-preview-dashboard .template-preview-bar { background: #061019; }
.template-preview-dashboard .template-preview-scene { padding: 11px 11px 11px 48px; }
.preview-dash-rail { position: absolute; inset: 0 auto 0 0; width: 37px; display: grid; align-content: start; gap: 8px; padding: 14px 10px; border-right: 1px solid rgba(78,231,203,.14); background: #091924; }
.preview-dash-rail i { width: 16px; height: 16px; border-radius: 5px; background: rgba(78,231,203,.16); }
.preview-dash-rail i:first-child { background: #4ee7cb; }
.preview-dash-stat { display: inline-block; width: calc(50% - 4px); height: 38px; border: 1px solid rgba(78,231,203,.16); border-radius: 7px; background: linear-gradient(135deg, rgba(78,231,203,.18), rgba(255,255,255,.025)); }
.preview-dash-stat.second { margin-left: 4px; background: linear-gradient(135deg, rgba(125,109,255,.2), rgba(255,255,255,.025)); }
.preview-dash-chart { position: absolute; left: 48px; right: 11px; bottom: 10px; height: 59px; border-radius: 7px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 15px); }
.preview-dash-chart i { position: absolute; inset: 16px 5px 10px; border-top: 3px solid #4ee7cb; border-radius: 50%; transform: rotate(-7deg); }

/* Nocturne preview */
.template-preview-event { border-color: rgba(183, 255, 71, 0.25); background: #13071f; }
.template-preview-event .template-preview-bar { background: #0e0517; }
.template-preview-event .template-preview-scene { padding: 13px 14px; background: radial-gradient(circle at 78% 46%, rgba(168,78,255,.34), transparent 31%), #13071f; }
.preview-event-moon { position: absolute; right: 14px; top: 11px; width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(183,255,71,.5); box-shadow: inset 15px -8px 0 #b7ff47; }
.preview-event-date { color: #b7ff47; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.preview-event-title { display: block; width: 69%; height: 41px; margin-top: 12px; border-top: 12px solid #fff; border-bottom: 12px solid #fff; transform: skewY(-3deg); }
.preview-event-ticket { position: absolute; left: 14px; bottom: 11px; width: 70px; height: 19px; border-radius: 99px; background: #b7ff47; }

/* Atelier shop preview */
.template-preview-shop { border-color: rgba(28, 56, 194, 0.2); background: #f1e9d8; }
.template-preview-shop .template-preview-bar { background: #1838c2; }
.template-preview-shop .template-preview-scene { padding: 10px 12px; color: #162e9d; }
.preview-shop-nav { display: block; width: 100%; height: 1px; margin-top: 5px; background: rgba(22,46,157,.4); }
.preview-shop-type { display: block; margin: 8px 0 11px; font: 900 17px/1 Arial, sans-serif; letter-spacing: -.08em; }
.preview-shop-product { display: inline-block; width: calc(33.333% - 5px); height: 64px; border: 1px solid rgba(22,46,157,.18); border-radius: 8px 8px 2px 2px; background: radial-gradient(circle at 50% 42%, #ff754f 0 19px, transparent 20px), #e8dfcb; }
.preview-shop-product.two { margin: 0 3px; background: radial-gradient(ellipse at 50% 48%, #1838c2 0 20px, transparent 21px), #ded4be; }
.preview-shop-product.three { background: radial-gradient(circle at 50% 42%, #e9b832 0 17px, transparent 18px), #e8dfcb; }

/* Canvas Desk preview */
.template-preview-workspace { border-color: rgba(86, 77, 213, 0.25); background: #d8d4ff; }
.template-preview-workspace .template-preview-bar { background: #564dd5; }
.template-preview-workspace .template-preview-scene { background: radial-gradient(circle, rgba(86,77,213,.18) 1px, transparent 1px), #e9e7ff; background-size: 13px 13px; }
.preview-workspace-dock { position: absolute; z-index: 3; left: 50%; bottom: 8px; translate: -50%; display: flex; gap: 5px; padding: 5px; border-radius: 9px; background: rgba(255,255,255,.72); box-shadow: 0 5px 15px rgba(47,39,125,.18); }
.preview-workspace-dock i { width: 14px; height: 14px; border-radius: 4px; background: #564dd5; }.preview-workspace-dock i:nth-child(2) { background: #ff7866; }.preview-workspace-dock i:nth-child(3) { background: #f3bd3d; }.preview-workspace-dock i:nth-child(4) { background: #35b994; }
.preview-workspace-window { position: absolute; display: block; border: 1px solid rgba(49,42,117,.2); border-radius: 7px; background: rgba(255,255,255,.9); box-shadow: 0 9px 20px rgba(49,42,117,.14); }
.preview-workspace-window.large { left: 13px; top: 13px; width: 64%; height: 79px; padding: 13px 9px; }.preview-workspace-window.large b { display: block; width: 70%; height: 10px; margin-bottom: 14px; border-radius: 3px; background: #272258; }.preview-workspace-window.large i { display: block; width: 88%; height: 3px; margin: 5px 0; border-radius: 3px; background: rgba(39,34,88,.18); }
.preview-workspace-window.note { right: 12px; top: 24px; width: 31%; height: 60px; display: grid; place-items: center; color: #562b15; background: #ffc84d; font: 900 9px/1.15 Arial, sans-serif; text-align: center; transform: rotate(5deg); }
.preview-workspace-cursor { position: absolute; z-index: 4; right: 27%; top: 66%; color: #564dd5; font-size: 19px; filter: drop-shadow(2px 2px white); }

/* Loop Lab preview */
.template-preview-loop { border-color: rgba(255, 103, 53, 0.28); background: #17120f; }
.template-preview-loop .template-preview-bar { background: #0c0908; }
.template-preview-loop .template-preview-scene { padding: 13px; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), #17120f; background-size: 100% 20px; }
.preview-loop-title { display: block; color: #ff6735; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.preview-loop-controls { position: absolute; right: 13px; top: 11px; display: flex; gap: 5px; }.preview-loop-controls i, .preview-loop-controls b { width: 14px; height: 14px; display: block; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }.preview-loop-controls b { background: #d9ff43; border-color: #d9ff43; }
.preview-loop-grid { position: absolute; left: 13px; right: 13px; bottom: 13px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }.preview-loop-grid i { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: #241d19; }.preview-loop-grid i:nth-child(3n) { background: #ff6735; border-color: #ff6735; }.preview-loop-grid i:nth-child(7n) { background: #d9ff43; border-color: #d9ff43; }

@media (max-width: 980px) {
  .template-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-library-toolbar { align-items: stretch; flex-direction: column; }
  .template-library-search { flex-basis: auto; }
}

@media (max-width: 680px) {
  .template-library-intro { align-items: flex-start; flex-direction: column; }
  .template-library-count { grid-auto-flow: column; align-items: center; gap: 7px; min-width: 0; }
  .template-library-count strong { font-size: 20px; }
  .template-card-actions { grid-template-columns: 1fr; }
}

body.template-preview-modal-open {
  overflow: hidden;
}

.starter-template-preview-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
  background: rgba(3, 7, 12, 0.86);
  backdrop-filter: blur(12px) saturate(110%);
}

.starter-template-preview-dialog {
  width: min(1480px, 98vw);
  height: min(940px, 96dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-color) 66%, var(--accent-color));
  border-radius: 18px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  box-shadow: 0 35px 120px rgba(0, 0, 0, 0.65);
  animation: modalCardEnter 0.22s ease-out;
}

.starter-template-preview-head {
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-secondary) 94%, #ffffff 6%);
}

.starter-template-preview-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.starter-template-preview-identity .template-icon {
  flex: 0 0 auto;
  color: var(--template-accent);
  background: color-mix(in srgb, var(--template-accent) 15%, var(--bg-primary));
}

.starter-template-preview-identity small {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.starter-template-preview-identity h2 {
  margin: 0;
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starter-template-device-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
}

.starter-template-device-switch button {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text-muted);
  background: transparent;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.starter-template-device-switch button.active,
.starter-template-device-switch button:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.starter-template-preview-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-muted);
  background: var(--bg-primary);
  font-size: 25px;
  cursor: pointer;
}

.starter-template-preview-close:hover {
  border-color: #ff4d4d;
  color: #ff4d4d;
}

.starter-template-preview-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.5vw, 20px);
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.025) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.025) 75%),
    #080d13;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
}

.starter-template-browser-frame {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  transition: width 0.28s ease, border-radius 0.28s ease;
}

.starter-template-preview-stage[data-device="tablet"] .starter-template-browser-frame {
  width: min(820px, 100%);
}

.starter-template-preview-stage[data-device="phone"] .starter-template-browser-frame {
  width: min(390px, 100%);
  border-radius: 22px;
}

.starter-template-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.64);
  background: #151a20;
}

.starter-template-browser-bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.starter-template-browser-bar p {
  margin: 0 auto;
  padding-right: 32px;
  font-size: 8px;
  letter-spacing: 0.05em;
}

.starter-template-browser-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.starter-template-preview-footer {
  min-height: 78px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
}

.starter-template-preview-footer > div {
  min-width: 0;
}

.starter-template-preview-footer > div > span {
  color: var(--accent-color);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.starter-template-preview-footer p {
  max-width: 820px;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.starter-template-use-preview {
  min-height: 44px;
  justify-content: center;
  gap: 18px;
  padding-inline: 18px;
  border-radius: 10px;
}

@media (max-width: 700px) {
  .starter-template-preview-modal { padding: 0; }
  .starter-template-preview-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .starter-template-preview-head { grid-template-columns: 1fr auto; }
  .starter-template-device-switch { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .starter-template-device-switch button span { display: none; }
  .starter-template-preview-footer { grid-template-columns: 1fr; gap: 10px; }
  .starter-template-preview-footer p { white-space: normal; }
  .starter-template-use-preview { width: 100%; }
}

@media (max-width: 680px) {
  .collab-choice-grid,
  .collab-meta-grid,
  .collab-action-grid,
  .collab-control-grid {
    grid-template-columns: 1fr;
  }

  .template-library-grid {
    grid-template-columns: 1fr;
  }

  .project-library-actions {
    grid-template-columns: 1fr;
  }

  .collab-participant-row,
  .collab-pending-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .collab-pending-actions,
  .collab-participant-row-actions {
    width: 100%;
  }

  .collab-pin-copy-row {
    align-items: stretch;
    flex-direction: column;
  }

  .collab-copy-pin-button {
    width: 100%;
  }

  .collab-participant-row-actions .run-button {
    flex: 1 1 120px;
    justify-content: center;
  }
}

#settingsBtn,
#fontPickerBtn,
#previewFullscreenBtn,
#newFileBtn,
#modalDoneBtn,
#applySettings,
#tutorialPrevBtn {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: none;
}

header #settingsBtn,
header #fontPickerBtn,
header #previewFullscreenBtn,
header #collabBtn,
header #addMediaBtn,
header #zenModeBtn,
header #helpPageBtn,
header #headerMoreBtn {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-color));
  color: #ffffff;
  border: 1px solid var(--accent-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.24);
}

header #settingsBtn:hover,
header #fontPickerBtn:hover,
header #previewFullscreenBtn:hover,
header #collabBtn:hover,
header #addMediaBtn:hover,
header #zenModeBtn:hover,
header #helpPageBtn:hover,
header #headerMoreBtn:hover {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-color));
  color: #ffffff;
  border-color: var(--accent-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 20px rgba(0, 0, 0, 0.3);
}

#settingsBtn:hover,
#fontPickerBtn:hover,
#previewFullscreenBtn:hover,
#newFileBtn:hover,
#modalDoneBtn:hover,
#applySettings:hover,
#tutorialPrevBtn:hover {
  background: color-mix(in srgb, var(--bg-tertiary) 78%, var(--accent-color));
}

.file-item.active {
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 36%, transparent);
}

textarea {
  caret-color: var(--accent-color);
  tab-size: 4;
}

iframe {
  border-radius: 10px;
}

.console-container {
  border-radius: 10px 10px 0 0;
}

#settingsModal > div,
#collabModal > div,
#fontPickerModal > div,
#projectLibraryModal > div,
#tutorialCard {
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35) !important;
  border-color: color-mix(in srgb, var(--border-color) 70%, #ffffff) !important;
}

#projectLibraryModal > div {
  width: min(760px, 92vw);
  max-height: 82dvh;
  overflow-y: auto;
}

#closeSettingsBtn:hover,
#closeModalBtn:hover,
#closeProjectLibraryBtn:hover,
#closeFontPickerBtn:hover,
#closeTutorialBtn:hover {
  color: #ff1f1f !important;
  background: rgba(255, 31, 31, 0.12) !important;
  text-shadow: 0 0 14px rgba(255, 31, 31, 0.72) !important;
  transform: scale(1.08) !important;
}

@media (max-width: 1024px) {
  header {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px;
  }

  .header-switches {
    order: -1;
  }

  .editor-actions {
    justify-content: stretch !important;
  }

  .editor-actions .run-button {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 150px;
    justify-content: center;
  }

  .preview-header {
    padding: 10px 12px;
  }
}

@media (max-width: 1200px) {
  header {
    gap: 10px;
    padding: 10px 14px;
  }

  .header-switches {
    gap: 6px;
    font-size: 12px;
  }

  .header-switches label[for="showConsole"] {
    margin-left: 4px;
  }

  header .run-button {
    min-height: 40px;
    padding: 9px 12px;
    font-size: 12px;
    gap: 6px;
  }

  .header-more-panel {
    width: min(320px, calc(100vw - 20px));
    padding: 10px;
    gap: 8px;
  }

  .header-more-section {
    gap: 6px;
  }
}

@media (max-width: 699px), (max-width: 1280px) and (orientation: portrait), (max-width: 1100px) and (max-height: 560px) {
  .editor-container {
    gap: 6px;
    padding: 6px;
  }

  .editors,
  .preview,
  .file-explorer,
  .code-container,
  iframe {
    border-radius: 10px;
  }

  #projectLibraryModal > div {
    width: min(680px, 94vw);
    max-height: 84dvh;
  }
}

@media (max-width: 480px) {
  header {
    padding: 6px;
    gap: 6px;
  }

  .header-switches {
    padding: 4px 6px;
  }

  .editor-actions .run-button strong {
    font-size: 10px;
  }

  .editor-actions .run-button {
    flex: 1 1 100%;
    min-width: 0;
  }

  #settingsModal > div,
  #collabModal > div,
  #fontPickerModal > div,
  #projectLibraryModal > div {
    width: 96vw !important;
    max-height: 88dvh;
  }

  .line-numbers {
    width: 48px;
    font-size: 12px;
  }

  .line-numbers-content { padding: 10px 6px; }

  textarea,
  #highlightLayer {
    font-size: 12px;
    padding: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
#githubRepoModal[hidden] { display: none; }
.github-repo-modal { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); backdrop-filter: blur(5px); }
.github-repo-dialog { width: min(920px, 96vw); min-height: min(620px, 88dvh); max-height: min(820px, 92dvh); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.github-repo-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--border-color); }
.github-repo-header h2 { margin: 4px 0 0; font-size: 21px; }
.github-repo-kicker { color: var(--accent-color); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.github-icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; }
.github-icon-button:hover { border-color: var(--accent-color); color: var(--accent-color); }
.github-repo-body { flex: 1; min-height: 0; padding: 22px; overflow: auto; }
.github-repo-toolbar, .github-commit-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.github-repo-search, .github-form-control { width: 100%; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; background: var(--bg-primary); color: var(--text-primary); outline: none; }
.github-repo-search { max-width: 420px; }
.github-repo-search:focus, .github-form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent); }
.github-repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.github-repo-card { display: flex; flex-direction: column; gap: 9px; min-height: 155px; padding: 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-primary); }
.github-repo-card h3 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.github-repo-card p { flex: 1; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.github-repo-meta { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 11px; }
.github-badge { padding: 2px 7px; border: 1px solid var(--border-color); border-radius: 999px; }
.github-primary-button, .github-secondary-button { border-radius: 8px; padding: 9px 13px; font-weight: 700; cursor: pointer; }
.github-primary-button { border: 1px solid var(--accent-color); background: var(--accent-color); color: #fff; }
.github-secondary-button { border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); }
.github-primary-button:disabled { opacity: .5; cursor: not-allowed; }
.github-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.github-form-field { display: grid; gap: 7px; margin-bottom: 14px; }
.github-form-field label { font-size: 12px; font-weight: 700; }
.github-form-field textarea { min-height: 90px; resize: vertical; }
.github-repo-dialog textarea.github-form-control { position: static; inset: auto; z-index: auto; display: block; height: auto; min-height: 110px; padding: 10px 12px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); caret-color: var(--text-primary); white-space: pre-wrap; resize: vertical; }
.github-repo-dialog textarea.github-form-control::selection { color: inherit; }
.github-repo-file-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.github-repo-file-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.github-file-row-button { width: 100%; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; text-align: left; }
.github-file-row-button:hover { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.github-file-editor { margin-bottom: 16px; padding: 14px; border: 1px solid var(--accent-color); border-radius: 10px; background: var(--bg-primary); }
.github-file-editor[hidden] { display: none; }
.github-file-list { max-height: 270px; overflow: auto; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-primary); }
.github-file-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); font-size: 12px; }
.github-file-row:last-child { border-bottom: 0; }
.github-file-row span { overflow-wrap: anywhere; }
.github-file-warning, .github-status { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 12px; }
.github-status.error { border-color: #ef4444; color: #ef4444; }
.github-status.success { border-color: #22c55e; color: #22c55e; }
.github-empty { padding: 40px 12px; text-align: center; color: var(--text-secondary); }
@media (max-width: 650px) { .github-repo-modal { padding: 8px; } .github-repo-dialog { width: 100%; max-height: 96dvh; } .github-repo-body { padding: 15px; } .github-form-grid { grid-template-columns: 1fr; } }

#appDialog[data-dialog-kind="github-project-files"] > div {
  width: min(680px, 94vw) !important;
  border-color: color-mix(in srgb, var(--accent-color) 54%, var(--border-color)) !important;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 34%),
    var(--bg-secondary) !important;
}

#appDialog[data-dialog-kind="github-project-files"] #appDialogMessage { white-space: normal !important; }
.github-project-picker { display: grid; gap: 13px; text-align: left; }
.github-project-picker > p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.github-project-picker-select-all {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 38%, var(--border-color));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
  cursor: pointer;
}
.github-project-picker-select-all input,
.github-project-picker-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-color); cursor: pointer; }
.github-project-picker-select-all span { display: grid; gap: 3px; }
.github-project-picker-select-all strong { color: var(--text-primary); font-size: 13px; }
.github-project-picker-select-all small { color: var(--text-muted); font-size: 10px; }
.github-project-picker-list {
  max-height: min(350px, 44dvh);
  overflow: auto;
  display: grid;
  gap: 7px;
  padding: 7px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-primary) 88%, #000);
}
.github-project-picker-option {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.github-project-picker-option:hover { border-color: var(--border-color); transform: translateY(-1px); }
.github-project-picker-option.is-selected {
  border-color: color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 7%, var(--bg-secondary));
}
.github-project-picker-option.is-sensitive:not(.is-selected) .github-project-picker-icon {
  color: #fbbf24;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
}
.github-project-picker-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 13%, transparent);
}
.github-project-picker-name { min-width: 0; display: grid; gap: 3px; }
.github-project-picker-name strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.github-project-picker-name small { color: var(--text-muted); font-size: 9px; letter-spacing: .04em; }
.github-project-picker-check { color: var(--accent-color); opacity: 0; transform: scale(.72); transition: opacity .18s ease, transform .18s ease; }
.github-project-picker-option.is-selected .github-project-picker-check { opacity: 1; transform: scale(1); }
.github-project-picker-note { display: flex; align-items: flex-start; gap: 8px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.github-project-picker-note i { margin-top: 2px; color: #fbbf24; }
.github-project-picker-note code { color: var(--text-primary); }
#appDialog[data-dialog-kind="github-project-files"] #appDialogActions { justify-content: flex-end; }
#githubProjectFilesAddBtn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }

@media (max-width: 520px) {
  .github-project-picker-option { grid-template-columns: auto 30px minmax(0, 1fr); gap: 8px; }
  .github-project-picker-icon { width: 30px; height: 30px; }
  .github-project-picker-check { display: none; }
  #appDialog[data-dialog-kind="github-project-files"] #appDialogActions { display: grid !important; grid-template-columns: 1fr; }
}@keyframes modalCardEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}/* Collaboration modal: spacious shell, stable header/actions, scrolling body */
#collabModal {
  overflow: hidden;
}

#collabModal > div {
  width: min(860px, 96vw) !important;
  max-width: 860px !important;
  max-height: min(900px, 92dvh) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  text-align: left !important;
}

#modalTitle {
  min-height: 70px;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 20px 70px 18px !important;
  border-bottom: 1px solid var(--border-color);
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 44%),
    color-mix(in srgb, var(--bg-tertiary) 70%, transparent);
  color: var(--text-primary);
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.055em;
}

#modalTitle::before {
  content: "";
  width: 4px;
  height: 24px;
  margin-right: 11px;
  border-radius: 999px;
  background: var(--accent-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-color) 55%, transparent);
}

#collabModal #closeModalBtn {
  top: 16px !important;
  right: 18px !important;
  z-index: 4;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-primary) !important;
}

#collabModal #closeModalBtn[style*="display: none"] {
  display: none !important;
}

#modalBody {
  min-height: 0;
  margin: 0 !important;
  padding: clamp(16px, 2.5vw, 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#errorMsg {
  margin: 0 22px 16px !important;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, #ef4444 62%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, #ef4444 11%, var(--bg-primary));
  color: #ff8d8d !important;
  font-size: 12px;
  line-height: 1.45;
}

#modalActions {
  flex-wrap: wrap;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 16px 22px;
  border-top: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-primary) 74%, transparent);
}

#modalActions .run-button {
  flex: 0 1 auto !important;
  min-width: 132px;
  min-height: 42px;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent-color) 72%, #ffffff 12%);
  border-radius: 10px;
}

#modalDoneBtn {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-color)) !important;
  color: #ffffff !important;
}

.collab-back-button {
  top: 19px;
  left: 20px;
  z-index: 4;
  width: 38px;
  height: 34px;
  border-radius: 10px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.collab-back-button:hover {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 13%, var(--bg-tertiary));
  transform: translateX(-2px);
}

.collab-section-card {
  margin-bottom: 16px;
  padding: clamp(15px, 2vw, 20px);
  border-color: color-mix(in srgb, var(--border-color) 80%, var(--accent-color) 20%);
  border-radius: 15px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-color) 5%, transparent), transparent 48%),
    color-mix(in srgb, var(--bg-tertiary) 72%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.collab-section-card:last-child { margin-bottom: 0; }
.collab-section-title { font-size: 12px; letter-spacing: .075em; }
.collab-section-note { max-width: 74ch; font-size: 12px; line-height: 1.6; }

.collab-choice-grid { gap: 16px; }
.collab-choice-card {
  position: relative;
  min-height: 160px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent-color) 11%, transparent), transparent 58%),
    var(--bg-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.collab-choice-card i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-tertiary));
  font-size: 22px;
}

.collab-choice-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.collab-form-field input[type="text"],
.collab-pin-box {
  border-radius: 11px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.collab-form-field input[type="text"]:focus,
.collab-pin-box:focus {
  outline: none;
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 4%, var(--bg-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.collab-manage-tutorial {
  --collab-tutorial-arrow-left: 50%;
  position: fixed;
  z-index: 10950;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
  border-radius: 16px;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--accent-color) 22%, transparent), transparent 34%),
    color-mix(in srgb, var(--bg-secondary) 96%, #ffffff 4%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: var(--collab-tutorial-arrow-left) top;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.collab-manage-tutorial.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.collab-manage-tutorial::before,
.collab-manage-tutorial::after {
  content: "";
  position: absolute;
  left: var(--collab-tutorial-arrow-left);
  bottom: 100%;
  translate: -50% 0;
  border: 10px solid transparent;
  border-bottom-color: color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
}

.collab-manage-tutorial::after {
  border-width: 8px;
  border-bottom-color: var(--bg-secondary);
}

.collab-manage-tutorial-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: var(--text-muted);
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.collab-manage-tutorial-close:hover {
  color: #ff4d4d;
  background: rgba(255, 77, 77, 0.1);
}

.collab-manage-tutorial-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-right: 32px;
  color: var(--accent-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.collab-manage-tutorial h3 {
  margin: 10px 28px 8px 0;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.collab-manage-tutorial p {
  margin: 0 0 15px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.collab-manage-tutorial p strong {
  color: var(--text-primary);
}

.collab-manage-tutorial-done {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  border-radius: 10px;
}

.collab-waiting-room-row,
.collab-meta-item,
.collab-participant-row,
.collab-pending-row,
.collab-bulk-participant-option,
.collab-pin-card {
  border-radius: 13px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.collab-participant-row:hover,
.collab-pending-row:hover,
.collab-bulk-participant-option:hover {
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 6%, var(--bg-primary));
}

.collab-control-grid { gap: 12px; }
.collab-control-btn {
  min-height: 84px;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

.collab-control-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.collab-timeline-list, .collab-bulk-participant-list { scrollbar-gutter: stable; }

/* Settings, fonts, projects, alerts, and utility dialogs */
#settingsModal > div {
  width: min(720px, 96vw) !important;
  max-width: 720px !important;
  max-height: 92dvh !important;
  padding: clamp(20px, 3vw, 30px) !important;
}

#settingsTitle,
#fontPickerTitle,
#projectLibraryTitle {
  padding-right: 52px;
  font-size: clamp(20px, 2.5vw, 26px);
  letter-spacing: -.02em;
}

:is(#closeSettingsBtn, #closeProjectLibraryBtn, #closeFontPickerBtn) {
  top: 14px !important;
  right: 16px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-primary) !important;
}

#settingsModal > div > div:not(:last-child) {
  padding: 15px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--bg-tertiary) 72%, transparent) !important;
}

#settingsModal :is(input[type="text"], select) {
  min-height: 44px;
  border-radius: 9px !important;
}

#settingsModal input[type="color"] {
  width: 54px !important;
  height: 44px !important;
  padding: 3px;
  border-radius: 10px !important;
  background: var(--bg-primary);
}

#resetThemeColorBtn {
  position: relative;
  min-width: 170px;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 44%, var(--border-color));
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 12%, var(--bg-primary)),
      var(--bg-primary) 68%
    );
  color: var(--text-primary);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

#resetThemeColorBtn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--reset-accent-color, var(--accent-color));
  opacity: .82;
}

#resetThemeColorBtn:hover {
  border-color: color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 76%, var(--border-color));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 19%, var(--bg-primary)),
      color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 5%, var(--bg-primary)) 70%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 8px 18px color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 17%, transparent);
  transform: translateY(-1px);
}

#resetThemeColorBtn:focus-visible {
  border-color: var(--reset-accent-color, var(--accent-color));
  outline: 3px solid color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 28%, transparent);
  outline-offset: 2px;
}

.settings-accent-reset-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 58%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 16%, var(--bg-secondary));
  color: var(--reset-accent-color, var(--accent-color));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  transition: color .16s ease, background-color .16s ease, transform .28s ease;
}

.settings-accent-reset-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settings-accent-reset-copy strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
}

.settings-accent-reset-copy small {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
}

#resetThemeColorBtn:hover .settings-accent-reset-icon {
  background: color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 24%, var(--bg-secondary));
  transform: rotate(-18deg);
}

#resetThemeColorBtn.accent-reset-confirmed {
  border-color: var(--reset-accent-color, var(--accent-color)) !important;
  background: color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 18%, var(--bg-primary)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 20%, transparent),
    0 10px 24px color-mix(in srgb, var(--reset-accent-color, var(--accent-color)) 18%, transparent);
}

#resetThemeColorBtn.accent-reset-confirmed .settings-accent-reset-icon {
  background: var(--reset-accent-color, var(--accent-color));
  color: #ffffff;
  transform: rotate(-360deg) scale(1.04);
}

.settings-color-setting {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.settings-color-setting-copy {
  display: grid;
  gap: 4px;
}

.settings-color-setting-kicker,
.settings-color-picker-kicker {
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.settings-color-setting-copy h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 16px;
}

.settings-color-setting-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.settings-color-setting-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.settings-color-setting-actions-accent {
  grid-template-columns: minmax(0, 1fr) auto;
}

.settings-color-trigger {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.settings-color-trigger:hover {
  border-color: color-mix(in srgb, var(--accent-color) 66%, var(--border-color));
  transform: translateY(-1px);
}

.settings-color-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color) 34%, transparent);
  outline-offset: 2px;
}

.settings-color-trigger-swatch {
  width: 42px;
  height: 42px;
  border: 2px solid color-mix(in srgb, var(--border-color) 58%, #ffffff 42%);
  border-radius: 11px;
  background: #1e1e1e;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 5px 14px rgba(0, 0, 0, .2);
}

.settings-color-trigger-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settings-color-trigger-copy strong {
  font-size: 13px;
}

.settings-color-trigger-copy output {
  color: var(--text-muted);
  font: 800 12px/1.2 "JetBrains Mono", Consolas, monospace;
  letter-spacing: .03em;
}

.settings-color-trigger > i {
  color: var(--text-muted);
  font-size: 15px;
}

.settings-color-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  background: rgba(2, 6, 12, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: codxModalOverlayFade .18s ease;
}

.settings-color-picker-modal[hidden] {
  display: none !important;
}

.settings-color-picker-card {
  /* Shared with the colour area below, which pulls itself out to the card
     edges by exactly this amount. */
  --picker-pad: clamp(18px, 4vw, 26px);
  width: min(520px, 100%);
  display: grid;
  gap: 18px;
  margin: auto;
  max-height: min(92dvh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--picker-pad);
  border: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
  border-radius: 18px;
  background: var(--bg-secondary);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58), 0 0 0 1px rgba(255, 255, 255, .04);
  animation: codxModalCardPop .22s cubic-bezier(.2, .9, .3, 1.15);
}

.settings-color-picker-header {
  position: sticky;
  top: calc(var(--picker-pad) * -1);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  /* The heading keeps its own background so the full-bleed colour area cannot
     scroll underneath it and hide the title. */
  margin: calc(var(--picker-pad) * -1) calc(var(--picker-pad) * -1) 0;
  padding: var(--picker-pad) var(--picker-pad) 12px;
  background: var(--bg-secondary);
}

.settings-color-picker-header > div {
  min-width: 0;
}

.settings-color-picker-header h2 {
  margin: 4px 0 3px;
  color: var(--text-primary);
  font-size: clamp(20px, 5vw, 25px);
  letter-spacing: -.025em;
}

.settings-color-picker-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-color-picker-close {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.settings-color-picker-live {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
}

.settings-color-picker-live-swatch {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 2px solid color-mix(in srgb, var(--border-color) 52%, #ffffff 48%);
  border-radius: 13px;
  background: #1e1e1e;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}

.settings-color-picker-live > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.settings-color-picker-live strong,
.settings-color-picker-live span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-color-picker-live strong {
  color: var(--text-primary);
  font: 900 15px/1.2 "JetBrains Mono", Consolas, monospace;
}

.settings-color-picker-live > div > span {
  color: var(--text-muted);
  font: 700 12px/1.2 "JetBrains Mono", Consolas, monospace;
}

.settings-color-saturation {
  --picker-hue-color: hsl(0 100% 50%);
  position: relative;
  /* Full-bleed: stretch past the card padding to both edges, and give it more
     vertical room so shades are easier to hit. */
  width: auto;
  margin-inline: calc(var(--picker-pad) * -1);
  min-height: 300px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--border-color) 66%, #ffffff 34%);
  border-inline: 0;
  border-radius: 0;
  background:
    linear-gradient(to top, #000000, transparent),
    linear-gradient(to right, #ffffff, var(--picker-hue-color));
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

.settings-color-saturation:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
  outline-offset: 3px;
}

.settings-color-saturation.is-dragging {
  cursor: none;
}

.settings-color-saturation-thumb {
  position: absolute;
  left: 100%;
  top: 0;
  width: 22px;
  height: 22px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .65), 0 4px 12px rgba(0, 0, 0, .42);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.settings-color-hue-control {
  display: grid;
  gap: 8px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#settingsColorHue {
  width: 100%;
  height: 18px;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  cursor: pointer;
}

#settingsColorHue::-webkit-slider-thumb {
  width: 23px;
  height: 23px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: hsl(var(--picker-hue, 0) 100% 50%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .58);
}

#settingsColorHue::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: hsl(var(--picker-hue, 0) 100% 50%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .58);
}

.settings-color-fields {
  display: grid;
  grid-template-columns: minmax(140px, .85fr) minmax(220px, 1.5fr);
  gap: 12px;
  align-items: end;
}

.settings-color-hex-field,
.settings-color-rgb-fields label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.settings-color-fields input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: 800 13px/1 "JetBrains Mono", Consolas, monospace;
}

.settings-color-fields input:focus {
  border-color: var(--accent-color);
  outline: 3px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
}

.settings-color-fields input[aria-invalid="true"] {
  border-color: #ff4d67;
}

.settings-color-rgb-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-color-rgb-fields legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  padding: 0;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.settings-color-picker-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-color-picker-button {
  min-height: 45px;
  padding: 10px 16px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
}

.settings-color-picker-button.secondary {
  background: var(--bg-primary);
}

.settings-color-picker-button.primary {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
}

.settings-color-picker-button:hover {
  filter: brightness(1.08);
}

@media (max-width: 560px) {
  .settings-color-setting-actions-accent,
  .settings-color-fields {
    grid-template-columns: 1fr;
  }

  #resetThemeColorBtn {
    width: 100%;
    min-height: 58px;
  }

  .settings-color-picker-card {
    --picker-pad: 17px;
    gap: 14px;
    padding: var(--picker-pad);
  }

  .settings-color-saturation {
    min-height: clamp(220px, 50dvh, 300px);
  }
}

#settingsPreview { border-radius: 11px !important; }

.workspace-theme-setting {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.workspace-theme-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.workspace-theme-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}

.workspace-theme-heading h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
}

.workspace-theme-heading p,
.workspace-theme-help {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.workspace-theme-current {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-primary));
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 800;
}

.workspace-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workspace-theme-card {
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workspace-theme-card:hover {
  border-color: color-mix(in srgb, var(--theme-accent) 65%, var(--border-color));
  transform: translateY(-1px);
}

.workspace-theme-card[aria-checked="true"] {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

.workspace-theme-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-accent) 38%, transparent);
  outline-offset: 2px;
}

.workspace-theme-card-preview {
  height: 52px;
  display: grid;
  grid-template-columns: 18px repeat(3, 1fr);
  grid-template-rows: 14px 1fr;
  gap: 4px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-panel) 62%, #ffffff 38%);
  border-radius: 8px;
  background: var(--theme-surface);
}

.workspace-theme-card-preview span {
  grid-column: 1 / -1;
  border-radius: 3px;
  background: var(--theme-panel);
}

.workspace-theme-card-preview i {
  display: block;
  border-radius: 3px;
  background: var(--theme-panel);
}

.workspace-theme-card-preview i:nth-of-type(2) {
  background: color-mix(in srgb, var(--theme-accent) 78%, var(--theme-panel));
}

.workspace-theme-card-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.workspace-theme-card-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-theme-card-copy small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-theme-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-accent);
  color: #ffffff;
  font-size: 9px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .16s ease, transform .16s ease;
}

.workspace-theme-card[aria-checked="true"] .workspace-theme-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 560px) {
  .workspace-theme-grid { grid-template-columns: 1fr; }
  .workspace-theme-heading { display: grid; }
  .workspace-theme-current { justify-self: start; }
}

#fontPickerModal > div {
  width: min(1040px, 96vw) !important;
  max-width: 1040px !important;
  max-height: 92dvh !important;
  padding: clamp(18px, 2.6vw, 28px) !important;
}

#fontPickerModal .font-card {
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

#projectLibraryModal > div { padding: clamp(20px, 3vw, 30px) !important; }
#projectLibraryBody { min-height: 90px; }

#announcementPopup > div,
#appDialog > div {
  width: min(500px, 94vw) !important;
  padding: clamp(22px, 4vw, 30px) !important;
}

#announcementPopupOkBtn { min-width: 120px; min-height: 42px; justify-content: center; margin: 0 auto; }
#appDialogInput { min-height: 44px; border-radius: 10px !important; }
#appDialogActions .run-button { min-width: 110px; min-height: 40px; justify-content: center; border-radius: 10px; }

#appDialog[data-dialog-kind="new-file"] > div {
  width: min(660px, 94vw) !important;
}

#appDialog[data-dialog-kind="new-file"] #appDialogMessage {
  display: grid;
  gap: 12px;
  white-space: normal !important;
  text-align: left;
}

.new-file-dialog-intro,
.new-file-dialog-hint {
  color: var(--text-muted);
}

.new-file-language-label {
  margin-top: 2px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
}

.new-file-language-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.new-file-language-option {
  min-width: 0;
  min-height: 72px;
  padding: 10px 7px;
  border: 1px solid color-mix(in srgb, currentColor 34%, var(--border-color));
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 9%, var(--bg-primary));
  color: var(--text-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  font: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.new-file-language-option i {
  color: var(--language-color, var(--accent-color));
  font-size: 25px;
  line-height: 1;
}

.new-file-language-option span {
  overflow: hidden;
  max-width: 100%;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.new-file-language-option:hover,
.new-file-language-option.is-selected {
  border-color: var(--language-color, var(--accent-color));
  background: color-mix(in srgb, var(--language-color, var(--accent-color)) 17%, var(--bg-primary));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--language-color, var(--accent-color)) 16%, transparent);
  transform: translateY(-1px);
}

.new-file-language-option.is-selected {
  outline: 2px solid color-mix(in srgb, var(--language-color, var(--accent-color)) 42%, transparent);
  outline-offset: 1px;
}

.new-file-language-option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--language-color, var(--accent-color)) 66%, transparent);
  outline-offset: 2px;
}

.new-file-language-html { --language-color: #e34f26; }
.new-file-language-css { --language-color: #1572b6; }
.new-file-language-scss { --language-color: #cd6799; }
.new-file-language-less { --language-color: #2b5e8f; }
.new-file-language-js { --language-color: #eab308; }
.new-file-language-react { --language-color: #38bdf8; }
.new-file-language-ts { --language-color: #3178c6; }
.new-file-language-json { --language-color: #f5c451; }
.new-file-language-env { --language-color: #f59e0b; }
.new-file-language-md { --language-color: #a78bfa; }
.new-file-language-txt { --language-color: #38bdf8; }

@media (max-width: 560px) {
  .new-file-language-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .new-file-language-option { min-height: 66px; }
}

@media (max-width: 380px) {
  .new-file-language-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#appDialog[data-dialog-kind="help-choice"] > div {
  width: min(560px, 94vw) !important;
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color)) !important;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--accent-color) 17%, transparent), transparent 42%),
    var(--bg-secondary) !important;
}

#appDialog[data-dialog-kind="help-choice"] #appDialogTitle {
  color: var(--accent-color);
  letter-spacing: .04em;
}

.help-choice-heading,
.help-choice-copy { display: block; }
.help-choice-heading { margin-bottom: 6px; color: var(--text-primary); font-weight: 800; }
.help-choice-heading i { margin-right: 7px; color: var(--accent-color); }
.help-choice-copy { color: var(--text-muted); font-size: 13px; }

#appDialog[data-dialog-kind="help-choice"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  margin-top: 18px;
}@keyframes firstVisitSupportPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .52); }
  75%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

@keyframes firstVisitSupportOrbit { to { transform: rotate(360deg); } }
@keyframes firstVisitSupportFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (max-width: 560px) {}

@media (prefers-reduced-motion: reduce) {}

.help-choice-button {
  min-width: 0;
  min-height: 118px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.help-choice-button:hover { transform: translateY(-2px); border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 11%, var(--bg-primary)); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.help-choice-button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.help-choice-button > span:nth-child(2) { min-width: 0; display: grid; gap: 6px; }
.help-choice-button strong { color: var(--text-primary); font-size: 12px; }
.help-choice-button small { color: var(--text-muted); font: 10px/1.45 var(--font-ui); }
.help-choice-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-tertiary)); color: var(--accent-color); font-size: 18px; }
.help-handbook-choice .help-choice-icon { background: rgba(37,99,235,.16); color: #60a5fa; }
.help-choice-arrow { color: var(--text-muted); font-size: 11px; transition: transform .18s ease, color .18s ease; }
.help-choice-button:hover .help-choice-arrow { color: var(--accent-color); transform: translateX(3px); }

@media (max-width: 560px) {
  #appDialog[data-dialog-kind="help-choice"] #appDialogActions { grid-template-columns: 1fr; }
  .help-choice-button { min-height: 92px; }
}

#appDialog[data-dialog-kind="unsaved-project-open"] > div {
  width: min(590px, 94vw) !important;
  border-color: color-mix(in srgb, #f59e0b 62%, var(--border-color)) !important;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, #f59e0b 16%, transparent), transparent 44%),
    var(--bg-secondary) !important;
}

#appDialog[data-dialog-kind="unsaved-project-open"] #appDialogTitle {
  color: #fbbf24;
  letter-spacing: .04em;
}

.unsaved-project-warning {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #f59e0b 38%, var(--border-color));
  border-radius: 13px;
  background: color-mix(in srgb, #f59e0b 9%, var(--bg-primary));
  text-align: left;
}

.unsaved-project-warning-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, #f59e0b 18%, var(--bg-tertiary));
  color: #fbbf24;
  font-size: 20px;
}

.unsaved-project-warning > span:last-child { min-width: 0; display: grid; gap: 5px; }
.unsaved-project-warning strong { color: var(--text-primary); font-size: 13px; }
.unsaved-project-warning small { color: var(--text-muted); font-size: 11px; line-height: 1.55; }
.unsaved-project-warning b { color: var(--text-primary); }

#appDialog[data-dialog-kind="unsaved-project-open"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin-top: 18px;
}

#appDialogActions .unsaved-project-save,
#appDialogActions .unsaved-project-discard { min-height: 48px; }
#appDialogActions .unsaved-project-discard { background: #b91c1c; }
#appDialogActions .unsaved-project-discard:hover {
  background: #991b1b;
  box-shadow: 0 8px 20px rgba(185, 28, 28, .28);
}
#appDialogActions .unsaved-project-cancel {
  grid-column: 1 / -1;
  justify-self: center;
  background: #6b7280;
}
#appDialogActions .unsaved-project-cancel:hover { background: #4b5563; }

@media (max-width: 560px) {
  #appDialog[data-dialog-kind="unsaved-project-open"] #appDialogActions { grid-template-columns: 1fr; }
  #appDialogActions .unsaved-project-cancel { grid-column: auto; justify-self: stretch; }
}

#appDialog[data-dialog-kind="publish-choice"] > div {
  width: min(560px, 94vw) !important;
}

#appDialog[data-dialog-kind="publish-choice"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  margin-top: 18px;
}

.publish-choice-card {
  --publish-choice-color: var(--accent-color);
  min-width: 0;
  color: #fff;
  border-color: color-mix(in srgb, var(--publish-choice-color) 82%, #fff 18%);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .2), transparent 58%),
    var(--publish-choice-color);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--publish-choice-color) 30%, transparent);
}

#publishUpdateLinkBtn { --publish-choice-color: #2563eb; }

.publish-choice-card i {
  color: #fff;
  background: rgba(255, 255, 255, .17);
}

.publish-choice-card:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--publish-choice-color) 70%, #fff 30%);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .28), transparent 58%),
    color-mix(in srgb, var(--publish-choice-color) 91%, #fff 9%);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--publish-choice-color) 38%, transparent);
}

.publish-choice-card:focus-visible {
  outline: 2px solid var(--publish-choice-color);
  outline-offset: 3px;
}

#appDialogActions .publish-choice-cancel {
  grid-column: 1 / -1;
  justify-self: center;
}

@media (max-width: 560px) {
  #appDialog[data-dialog-kind="publish-choice"] #appDialogActions { grid-template-columns: 1fr; }
  .publish-choice-card { min-height: 126px; }
}@media (max-width: 640px) {}

#appDialog[data-dialog-kind^="device-transfer"] > div {
  width: min(620px, 94vw) !important;
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color)) !important;
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 42%),
    var(--bg-secondary) !important;
}

#appDialog[data-dialog-kind="device-transfer-choice"] > div {
  width: min(760px, 94vw) !important;
}

#appDialog[data-dialog-kind="device-transfer-choice"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  margin-top: 18px;
}

.device-transfer-choice-card {
  min-width: 0;
  min-height: 150px;
  color: #fff;
  border-color: color-mix(in srgb, var(--accent-color) 76%, #fff 24%);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .22), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-color) 88%, #0b3f1e), var(--accent-color));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.device-transfer-choice-card:nth-child(2) {
  border-color: color-mix(in srgb, #2563eb 76%, #fff 24%);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .2), transparent 58%),
    linear-gradient(145deg, #1d4ed8, #2563eb);
  box-shadow: 0 14px 32px rgba(37, 99, 235, .28);
}

.device-transfer-choice-card.device-transfer-scan-card {
  border-color: color-mix(in srgb, #7c3aed 76%, #fff 24%);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .2), transparent 58%),
    linear-gradient(145deg, #6d28d9, #8b5cf6);
  box-shadow: 0 14px 32px rgba(124, 58, 237, .28);
}

.device-transfer-choice-card i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  font-size: 20px;
}

.device-transfer-choice-card small {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
}

#appDialogActions .device-transfer-cancel {
  grid-column: 1 / -1;
  justify-self: center;
}

.device-transfer-privacy,
.device-transfer-note,
.device-transfer-warning {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: left;
}

.device-transfer-warning {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--border-color));
  background: color-mix(in srgb, #f59e0b 9%, var(--bg-primary));
  color: var(--text-primary);
}

.device-transfer-import-mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-color) 7%, var(--bg-primary));
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.device-transfer-import-mode[data-mode="keep"] {
  border-color: color-mix(in srgb, #16a34a 50%, var(--border-color));
  background: color-mix(in srgb, #16a34a 9%, var(--bg-primary));
  box-shadow: 0 10px 24px color-mix(in srgb, #16a34a 10%, transparent);
}

.device-transfer-import-mode-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-color) 16%, var(--bg-secondary));
  color: var(--accent-color);
  font-size: 15px;
}

.device-transfer-import-mode[data-mode="keep"] .device-transfer-import-mode-icon {
  background: color-mix(in srgb, #16a34a 16%, var(--bg-secondary));
  color: #22c55e;
}

.device-transfer-import-mode-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: left;
}

.device-transfer-import-mode-copy strong { color: var(--text-primary); font-size: 12px; }
.device-transfer-import-mode-copy small { color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.device-transfer-import-mode .switch { flex: 0 0 44px; }

.device-transfer-warning[data-state="keep"] {
  border-color: color-mix(in srgb, #16a34a 42%, var(--border-color));
  background: color-mix(in srgb, #16a34a 9%, var(--bg-primary));
}

#appDialog[data-dialog-kind="device-transfer-import"] #appDialogActions {
  display: grid !important;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  gap: 9px !important;
}

.device-transfer-instruction {
  margin: 0 0 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

#appDialog[data-dialog-kind="device-transfer-code"] .device-transfer-instruction {
  margin: 12px 0 0;
  text-align: center;
}

.device-transfer-qr {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 16px auto 0;
}

.device-transfer-qr-title {
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: .1em;
}

.device-transfer-qr-title i { color: var(--accent-color); }

.device-transfer-qr-frame {
  position: relative;
  width: min(190px, 55vw);
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
}

.device-transfer-qr img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: contain;
}

.device-transfer-qr img[hidden] { display: none; }

.device-transfer-qr-placeholder {
  position: absolute;
  inset: 8px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #f4fbf6;
  color: #176c35;
  font-size: 10px;
  text-align: center;
}

.device-transfer-qr-placeholder i { font-size: 26px; }
.device-transfer-qr-placeholder[hidden] { display: none; }
.device-transfer-qr[data-state="error"] .device-transfer-qr-frame { border-color: #ef4444; }
.device-transfer-qr[data-state="error"] .device-transfer-qr-placeholder { color: #b91c1c; background: #fff1f2; }

.device-transfer-qr span {
  color: var(--text-muted);
  font-size: 10px;
}

.device-transfer-code {
  width: 100%;
  padding: 17px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-primary));
  color: var(--text-primary);
  font: 800 clamp(22px, 5vw, 34px)/1.1 "JetBrains Mono", monospace;
  letter-spacing: .09em;
  text-align: center;
  cursor: copy;
}

.device-transfer-code-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 8px;
  color: var(--text-primary);
  font-size: 10px;
  letter-spacing: .1em;
}

.device-transfer-code-label i { color: var(--accent-color); }

.device-transfer-code-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.2vw, 10px);
  margin: 18px auto 8px;
}

.device-transfer-code-box {
  width: clamp(68px, 20vw, 96px);
  min-width: 0;
  padding: 15px 6px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 52%, var(--border-color));
  border-radius: 13px;
  outline: none;
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
  color: var(--text-primary);
  font: 800 clamp(18px, 4vw, 25px)/1 var(--font-family);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.device-transfer-code-box:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent);
  transform: translateY(-1px);
}

.device-transfer-code-dash {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: clamp(17px, 3vw, 24px);
  font-weight: 800;
}

.device-transfer-code-entry-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

.device-transfer-code-entry-status[data-state="error"] { color: #ef4444; }

#appDialog[data-dialog-kind="device-transfer-entry"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px !important;
}

#deviceTransferEntrySubmitBtn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}

.device-transfer-expiry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 9px 0 14px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
  transition: color .2s ease;
}

#appDialog[data-dialog-kind="device-transfer-code"] .device-transfer-expiry-primary {
  margin: 0 0 14px;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-primary));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 9%, transparent);
}

#appDialog[data-dialog-kind="device-transfer-code"] .device-transfer-expiry-primary strong {
  font-size: 18px;
}

.device-transfer-expiry strong {
  min-width: 42px;
  color: var(--accent-color);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.device-transfer-expiry[data-state="ending"],
.device-transfer-expiry[data-state="ending"] strong { color: #f59e0b; }

.device-transfer-expiry[data-state="expired"],
.device-transfer-expiry[data-state="expired"] strong { color: #ef4444; }

#appDialog[data-dialog-kind="device-transfer-code"] button:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.45);
}

.device-transfer-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.device-transfer-summary > div {
  min-width: 0;
  padding: 11px 7px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  text-align: center;
}

.device-transfer-summary strong,
.device-transfer-summary span { display: block; }
.device-transfer-summary strong { color: var(--accent-color); font-size: 18px; }
.device-transfer-summary span { margin-top: 3px; color: var(--text-muted); font-size: 9px; line-height: 1.3; }

#appDialog[data-dialog-kind="device-transfer-scanner"] > div {
  width: min(650px, 94vw) !important;
}

#appDialog[data-dialog-kind="device-transfer-scanner"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px !important;
}

.device-transfer-scanner {
  display: grid;
  gap: 10px;
}

.device-transfer-scanner-stage {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, #7c3aed 42%, var(--border-color));
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 58, 237, .2), transparent 45%),
    #08110c;
}

.device-transfer-scanner-stage video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device-transfer-scanner-placeholder {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .9);
}

.device-transfer-scanner-placeholder i { font-size: 54px; color: #a78bfa; }
.device-transfer-scanner-placeholder strong { font-size: 12px; letter-spacing: .1em; }
.device-transfer-scanner-placeholder span { color: rgba(255, 255, 255, .58); font-size: 10px; }

.device-transfer-scanner-frame {
  position: absolute;
  z-index: 3;
  width: min(190px, 52vw);
  aspect-ratio: 1;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .14), 0 0 26px rgba(124, 58, 237, .45);
}

.device-transfer-scanner-status {
  min-height: 34px;
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.device-transfer-scanner-status[data-state="scanning"] { color: #4ade80; }
.device-transfer-scanner-status[data-state="loading"] { color: #60a5fa; }
.device-transfer-scanner-status[data-state="error"] { color: #f87171; }

@media (max-width: 560px) {
  #appDialog[data-dialog-kind="device-transfer-choice"] #appDialogActions { grid-template-columns: 1fr; }
  #appDialogActions .device-transfer-cancel { grid-column: auto; justify-self: stretch; }
  .device-transfer-choice-card { min-height: 118px; }
  .device-transfer-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-transfer-code { font-size: clamp(18px, 6vw, 26px); letter-spacing: .055em; }
  .device-transfer-code-entry { gap: 4px; }
  .device-transfer-code-box { width: clamp(68px, 23vw, 88px); padding: 13px 4px; }
  .device-transfer-code-dash { font-size: 16px; }
  .device-transfer-import-mode { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; padding: 12px 10px; }
  .device-transfer-import-mode-icon { width: 34px; height: 34px; }
  #appDialog[data-dialog-kind="device-transfer-import"] #appDialogActions { grid-template-columns: 1fr; }
  #appDialog[data-dialog-kind="device-transfer-scanner"] #appDialogActions { grid-template-columns: 1fr; }
  .device-transfer-scanner-stage { min-height: 220px; }
}

.sync-conflict-bar {
  position: absolute;
  z-index: 26;
  top: 8px;
  left: 10px;
  right: 10px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px 9px 14px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-secondary) 94%, var(--accent-color) 6%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  color: var(--text-primary);
}

.sync-conflict-bar[hidden] { display: none !important; }
.sync-conflict-copy { min-width: 0; display: grid; gap: 2px; }
.sync-conflict-copy strong { font-size: 12px; }
.sync-conflict-copy span { color: var(--text-muted); font-size: 10px; }
.sync-conflict-copy small { color: var(--accent-color); font-size: 9px; font-weight: 700; }
.sync-conflict-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.sync-conflict-actions .run-button { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.sync-conflict-bar[data-state="confirmed"] {
  justify-content: flex-start;
  min-height: 42px;
  border-color: color-mix(in srgb, var(--success-color) 58%, var(--border-color));
  color: var(--success-color);
  font-size: 11px;
}

#appDialog[data-dialog-kind^="sync-key"] > div {
  width: min(680px, 94vw) !important;
  max-height: min(880px, 92dvh);
  overflow: auto;
  border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color)) !important;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--accent-color) 16%, transparent), transparent 38%),
    var(--bg-secondary) !important;
}

#appDialog[data-dialog-kind^="sync-key"] #appDialogMessage {
  white-space: normal !important;
}

#appDialog[data-dialog-kind^="sync-key"] #appDialogActions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px !important;
}

#appDialog[data-dialog-kind="sync-key-create"] #appDialogActions,
#appDialog[data-dialog-kind="sync-key-entry"] #appDialogActions,
#appDialog[data-dialog-kind="sync-key-resolved"] #appDialogActions,
#appDialog[data-dialog-kind="sync-key-scanner"] #appDialogActions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sync-key-secondary {
  background: color-mix(in srgb, var(--bg-tertiary) 88%, var(--accent-color) 12%) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

.sync-key-intro,
.sync-key-resolved {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 8px 8px 18px;
  text-align: center;
}

.sync-key-intro p,
.sync-key-resolved p { margin: 0; color: var(--text-primary); line-height: 1.55; }
.sync-key-intro small { color: var(--text-muted); font-size: 10px; }
.sync-key-hero-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-primary));
  font-size: 22px;
}
.sync-key-hero-icon.success { color: var(--success-color); }

.sync-key-details { display: grid; justify-items: center; gap: 12px; }
.sync-key-label {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}
.sync-key-display {
  width: 100%;
  padding: 15px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  border-radius: 12px;
  outline: none;
  background: color-mix(in srgb, var(--accent-color) 9%, var(--bg-primary));
  color: var(--text-primary);
  font: 800 clamp(17px, 4vw, 28px)/1.2 "JetBrains Mono", monospace;
  letter-spacing: .055em;
  text-align: center;
}
.sync-key-display:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 19%, transparent); }
.sync-key-qr-frame {
  width: min(220px, 62vw);
  aspect-ratio: 1;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 42%, var(--border-color));
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
}
.sync-key-qr-frame canvas { display: block; width: 100% !important; height: 100% !important; }
.sync-key-qr-error { max-width: 260px; margin: 0; color: #ef4444; font-size: 10px; text-align: center; }
.sync-key-device-field { width: 100%; display: grid; gap: 6px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.sync-key-device-field input,
.sync-key-entry input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  outline: none;
  background: var(--bg-primary);
  color: var(--text-primary);
}
.sync-key-device-field input:focus,
.sync-key-entry input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 17%, transparent); }
.sync-key-warning {
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(239, 68, 68, .42);
  border-radius: 10px;
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
  font-size: 10px;
  line-height: 1.5;
}
.sync-key-turn-off {
  border: 0;
  background: transparent;
  color: #ef4444;
  font: 800 10px/1 var(--font-family);
  letter-spacing: .07em;
  text-decoration: underline;
  cursor: pointer;
}

.sync-key-list { display: grid; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.sync-key-section-title { display: flex; align-items: center; gap: 7px; color: var(--text-primary); font-size: 10px; letter-spacing: .09em; }
.sync-key-section-title i { color: var(--accent-color); }
.sync-key-empty { margin: 0; padding: 12px; border-radius: 9px; background: var(--bg-primary); color: var(--text-muted); font-size: 10px; text-align: center; }
.sync-key-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
}
.sync-key-row-main { min-width: 0; display: grid; gap: 4px; }
.sync-key-row-main > strong { overflow: hidden; color: var(--text-primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sync-key-row-main small { color: var(--text-muted); font-size: 9px; }
.sync-key-mask { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--accent-color); cursor: pointer; text-align: left; }
.sync-key-mask span { overflow: hidden; font: 700 10px/1.4 "JetBrains Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.sync-key-row-actions { display: flex; gap: 6px; }
.sync-key-row-actions .run-button { min-height: 31px; padding: 6px 8px; font-size: 8px; }

.sync-key-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: end; }
.sync-key-entry label { grid-column: 1 / -1; color: var(--text-primary); font-size: 10px; font-weight: 700; }
.sync-key-entry input { font: 700 14px/1.2 "JetBrains Mono", monospace; }
.sync-key-entry-status { grid-column: 1 / -1; min-height: 20px; margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.sync-key-entry-status[data-state="loading"] { color: #60a5fa; }
.sync-key-entry-status[data-state="scanning"] { color: #4ade80; }
.sync-key-entry-status[data-state="error"] { color: #ef4444; }
.sync-key-scan { min-height: 41px; }

.sync-key-scanner { display: grid; gap: 10px; }
.sync-key-scanner-stage {
  position: relative;
  min-height: 290px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-color) 44%, var(--border-color));
  border-radius: 15px;
  background: #08110c;
}
.sync-key-scanner-stage video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.sync-key-scanner-placeholder { display: grid; justify-items: center; gap: 8px; color: rgba(255, 255, 255, .78); }
.sync-key-scanner-placeholder i { color: var(--accent-color); font-size: 48px; }
.sync-key-scanner-frame {
  position: absolute;
  z-index: 3;
  width: min(190px, 52vw);
  aspect-ratio: 1;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .15), 0 0 25px color-mix(in srgb, var(--accent-color) 52%, transparent);
}

@media (max-width: 620px) {
  .sync-conflict-bar { align-items: stretch; flex-direction: column; gap: 8px; }
  .sync-conflict-actions { width: 100%; }
  .sync-conflict-actions .run-button { flex: 1; }
  #appDialog[data-dialog-kind^="sync-key"] #appDialogActions { grid-template-columns: 1fr; }
  .sync-key-row { grid-template-columns: 1fr; }
  .sync-key-row-actions .run-button { flex: 1; }
  .sync-key-entry { grid-template-columns: 1fr; }
  .sync-key-entry label,
  .sync-key-entry-status { grid-column: auto; }
  .sync-key-display { font-size: clamp(15px, 5.2vw, 22px); letter-spacing: .035em; }
  .sync-key-scanner-stage { min-height: 230px; }
}

@media (max-width: 620px) {}

@media (max-width: 600px) {
}
.github-repo-dialog, .icon-catalog-dialog { border-radius: 18px !important; }
.github-repo-header, .icon-catalog-header { background: color-mix(in srgb, var(--bg-tertiary) 68%, transparent); }

.preview-zoom-dialog {
  padding: 16px !important;
  border-radius: 15px !important;
  background: var(--bg-secondary) !important;
}

#tutorialCard {
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--accent-color) 64%, var(--border-color)) !important;
}

@media (max-width: 680px) {#collabModal > div {
    width: 100% !important;
    max-height: 96dvh !important;
    border-radius: 14px !important;
  }

  #modalTitle {
    min-height: 62px;
    padding: 17px 58px !important;
    font-size: 15px;
  }

  #modalTitle::before { display: none; }
  #collabModal #closeModalBtn { top: 11px !important; right: 11px !important; }
  .collab-back-button { top: 14px; left: 12px; }
  #modalBody { padding: 14px; }
  #modalActions { padding: 12px 14px; }
  #modalActions .run-button { flex: 1 1 120px !important; }
  .collab-choice-card { min-height: 126px; }
  .collab-pin-box-grid { gap: 5px; }
  .collab-pin-box { min-height: 46px; font-size: 19px; }
  .collab-cursor-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #settingsModal > div, #fontPickerModal > div, #projectLibraryModal > div { width: 100% !important; max-height: 96dvh !important; }
}

/* Short, visual-only demonstrations inside each tutorial step */
#tutorialCard {
  width: min(400px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
}

.tutorial-live-demo {
  position: relative;
  min-height: 112px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-color) 36%, var(--border-color));
  border-radius: 13px;
  background:
    radial-gradient(circle at 78% 0, color-mix(in srgb, var(--accent-color) 17%, transparent), transparent 48%),
    var(--bg-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.tutorial-demo-label {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-color);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
}

.tutorial-demo-stage {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: 28px 16px 10px;
  color: var(--text-primary);
}

/* ===========================================================================
   TUTORIAL LIVE DEMOS v2
   One animated scene per tour step. The wrapper (.tutorial-live-demo) gains
   .is-playing on start and .is-complete at 2.5s; every timeline below hangs
   off those two classes so JavaScript never has to touch a style.
   Colour comes from --accent-color plus a fixed vibrant palette, so the demos
   stay bright in every editor theme.
   =========================================================================== */

.tutorial-live-demo {
  --td-1: #22c55e;
  --td-2: #38bdf8;
  --td-3: #a855f7;
  --td-4: #fbbf24;
  --td-5: #f472b6;
  --td-ink: var(--text-primary);
  --td-dim: var(--text-muted);
  --td-surface: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
  --td-line: color-mix(in srgb, var(--border-color) 80%, transparent);
}

.tdemo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--td-ink);
}
.tutorial-live-demo.is-playing .tdemo { animation: tdPop .42s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes tdPop { from { opacity: 0; transform: translateY(9px) scale(.96); } to { opacity: 1; transform: none; } }

/* shared bits ------------------------------------------------------------ */
.tdemo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--td-line);
  background: var(--td-surface);
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
}
.tdemo-chip i { color: var(--td-2); font-size: 10px; }
.tdemo-caret {
  display: inline-block; width: 2px; height: 12px; margin-left: 3px;
  vertical-align: -2px; background: var(--td-1); border-radius: 1px;
}
.tutorial-live-demo.is-playing .tdemo-caret { animation: tdBlink 1s steps(1) infinite; }
@keyframes tdBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* 1. auto-run ------------------------------------------------------------ */
.tdemo-autorun { gap: 7px; }
.tdemo-flow { display: inline-flex; gap: 4px; }
.tdemo-flow i { width: 5px; height: 5px; border-radius: 50%; background: var(--td-line); }
.tutorial-live-demo.is-playing .tdemo-flow i { animation: tdDash 1.5s ease-in-out infinite; }
.tdemo-flow i:nth-child(2) { animation-delay: .16s !important; }
.tdemo-flow i:nth-child(3) { animation-delay: .32s !important; }
@keyframes tdDash {
  0%, 100% { background: var(--td-line); transform: scale(1); }
  45% { background: var(--td-2); transform: scale(1.5); }
}
.tdemo-chip-live { border-color: var(--td-1); color: var(--td-1); }
.tdemo-chip-live i { color: var(--td-1); }
.tutorial-live-demo.is-complete .tdemo-chip-live {
  background: color-mix(in srgb, var(--td-1) 18%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--td-1) 14%, transparent);
}

/* 2. console + 18. node share the row style ------------------------------ */
.tdemo-console {
  flex-direction: column; align-items: stretch; gap: 5px;
  min-width: 216px; padding: 12px 13px;
  border: 1px solid var(--td-line); border-radius: 11px;
  background: var(--td-surface);
  font-family: var(--font-code, monospace); font-size: 10.5px;
}
.tdemo-console-row { display: flex; align-items: center; gap: 8px; opacity: 0; }
.tutorial-live-demo.is-playing .tdemo-console-row { animation: tdSlideIn .4s ease-out forwards; }
.tdemo-console-row:nth-child(1) { animation-delay: .25s; }
.tdemo-console-row:nth-child(2) { animation-delay: .75s; }
.tdemo-console-row:nth-child(3) { animation-delay: 1.25s; }
@keyframes tdSlideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.tdemo-console-row em {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 4px; font-style: normal;
  font-size: 9px; font-weight: 900; text-transform: uppercase;
  background: color-mix(in srgb, var(--td-2) 22%, transparent); color: var(--td-2);
}
.tdemo-console-row.is-warn em { background: color-mix(in srgb, var(--td-4) 22%, transparent); color: var(--td-4); }
.tdemo-console-row.is-ok em { background: color-mix(in srgb, var(--td-1) 22%, transparent); color: var(--td-1); }
.tdemo-console-row span { color: var(--td-dim); font-weight: 600; }

/* 3. collaboration ------------------------------------------------------- */
.tdemo-collab { position: relative; width: 190px; height: 104px; justify-content: center; }
.tdemo-orbit {
  position: absolute; inset: 6px 30px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--td-3) 45%, transparent);
}
.tutorial-live-demo.is-playing .tdemo-orbit { animation: tdSpin 9s linear infinite; }
@keyframes tdSpin { to { transform: rotate(360deg); } }
.tdemo-hub {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(140deg, var(--td-3), var(--td-2));
  color: #fff; font-size: 15px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--td-3) 40%, transparent);
}
.tdemo-peer {
  position: absolute; z-index: 3; display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  color: #fff; font-size: 10px; font-weight: 900;
  opacity: 0;
}
.tdemo-peer.p1 { top: 2px; left: 22px; background: var(--td-1); }
.tdemo-peer.p2 { bottom: 4px; left: 34px; background: var(--td-4); }
.tdemo-peer.p3 { top: 16px; right: 20px; background: var(--td-5); }
.tutorial-live-demo.is-playing .tdemo-peer { animation: tdPeerIn .5s cubic-bezier(.2,.9,.25,1.3) forwards; }
.tdemo-peer.p1 { animation-delay: .35s; }
.tdemo-peer.p2 { animation-delay: .7s; }
.tdemo-peer.p3 { animation-delay: 1.05s; }
@keyframes tdPeerIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.tdemo-ping {
  position: absolute; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--td-2); opacity: 0;
}
.tutorial-live-demo.is-playing .tdemo-ping { animation: tdPing 2s ease-out infinite 1.2s; }
@keyframes tdPing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

/* 4. fullscreen ---------------------------------------------------------- */
.tdemo-expand { position: relative; width: 168px; height: 100px; justify-content: center; }
.tdemo-window {
  width: 108px; overflow: hidden; border-radius: 9px;
  border: 1px solid var(--td-line); background: var(--bg-primary);
  transform-origin: center;
}
.tutorial-live-demo.is-playing .tdemo-window { animation: tdExpand 2.6s cubic-bezier(.3,.9,.3,1) infinite; }
@keyframes tdExpand { 0%, 20% { transform: scale(.78); } 55%, 80% { transform: scale(1.18); } 100% { transform: scale(.78); } }
.tdemo-titlebar { display: flex; gap: 4px; padding: 6px 7px; border-bottom: 1px solid var(--td-line); }
.tdemo-titlebar i { width: 6px; height: 6px; border-radius: 50%; background: var(--td-line); }
.tdemo-titlebar i:nth-child(1) { background: var(--td-5); }
.tdemo-titlebar i:nth-child(2) { background: var(--td-4); }
.tdemo-titlebar i:nth-child(3) { background: var(--td-1); }
.tdemo-body { display: grid; gap: 5px; padding: 9px 8px; }
.tdemo-body em { height: 5px; border-radius: 3px; background: var(--td-line); }
.tdemo-body em:first-child { width: 60%; background: var(--td-2); }
.tdemo-corner { position: absolute; width: 13px; height: 13px; border: 2px solid var(--td-2); opacity: 0; }
.tdemo-corner.tl { top: 6px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 4px 0 0 0; }
.tdemo-corner.tr { top: 6px; right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 4px 0 0; }
.tdemo-corner.bl { bottom: 6px; left: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 4px; }
.tdemo-corner.br { bottom: 6px; right: 8px; border-left: 0; border-top: 0; border-radius: 0 0 4px 0; }
.tutorial-live-demo.is-playing .tdemo-corner { animation: tdCorner 2.6s ease-in-out infinite; }
@keyframes tdCorner { 0%, 25% { opacity: 0; } 55%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* 5. settings ------------------------------------------------------------ */
.tdemo-settings { flex-direction: column; gap: 11px; min-width: 178px; }
.tdemo-gear { font-size: 21px; color: var(--td-3); }
.tutorial-live-demo.is-playing .tdemo-gear { animation: tdSpin 5s linear infinite; }
.tdemo-slider { position: relative; width: 148px; height: 6px; border-radius: 999px; background: var(--td-line); }
.tdemo-slider b {
  position: absolute; inset: 0; width: 30%; border-radius: 999px;
  background: linear-gradient(90deg, var(--td-2), var(--td-1));
}
.tdemo-slider i {
  position: absolute; top: 50%; left: 30%; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2px solid var(--td-1); transform: translate(-50%, -50%);
}
.tutorial-live-demo.is-playing .tdemo-slider b { animation: tdFill 2.4s ease-in-out infinite; }
.tutorial-live-demo.is-playing .tdemo-slider i { animation: tdKnob 2.4s ease-in-out infinite; }
@keyframes tdFill { 0%, 12% { width: 22%; } 55%, 75% { width: 82%; } 100% { width: 22%; } }
@keyframes tdKnob { 0%, 12% { left: 22%; } 55%, 75% { left: 82%; } 100% { left: 22%; } }
.tdemo-swatches { display: flex; gap: 7px; }
.tdemo-swatches i { width: 17px; height: 17px; border-radius: 6px; }
.tdemo-swatches i:nth-child(1) { background: var(--td-1); }
.tdemo-swatches i:nth-child(2) { background: var(--td-2); }
.tdemo-swatches i:nth-child(3) { background: var(--td-3); }
.tdemo-swatches i:nth-child(4) { background: var(--td-5); }
.tutorial-live-demo.is-playing .tdemo-swatches i { animation: tdSwatch 2.4s ease-in-out infinite; }
.tdemo-swatches i:nth-child(2) { animation-delay: .2s !important; }
.tdemo-swatches i:nth-child(3) { animation-delay: .4s !important; }
.tdemo-swatches i:nth-child(4) { animation-delay: .6s !important; }
@keyframes tdSwatch { 0%, 100% { transform: scale(1); box-shadow: none; } 40% { transform: scale(1.28); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } }

/* 6. media --------------------------------------------------------------- */
.tdemo-media { flex-direction: column; gap: 10px; }
.tdemo-dropzone {
  display: grid; place-items: center; gap: 8px;
  width: 132px; padding: 15px 10px;
  border: 2px dashed color-mix(in srgb, var(--td-2) 55%, transparent);
  border-radius: 12px; color: var(--td-2); font-size: 19px;
}
.tutorial-live-demo.is-playing .tdemo-dropzone { animation: tdGlow 2.2s ease-in-out infinite; }
@keyframes tdGlow {
  0%, 100% { border-color: color-mix(in srgb, var(--td-2) 40%, transparent); }
  50% { border-color: var(--td-1); background: color-mix(in srgb, var(--td-1) 8%, transparent); }
}
.tdemo-progress { width: 84px; height: 4px; border-radius: 999px; background: var(--td-line); overflow: hidden; }
.tdemo-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--td-2), var(--td-1)); }
.tutorial-live-demo.is-playing .tdemo-progress i { animation: tdLoad 2.2s ease-out infinite; }
@keyframes tdLoad { 0% { width: 0; } 70%, 100% { width: 100%; } }
.tdemo-filechip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; font-size: 10px; opacity: 0;
  background: color-mix(in srgb, var(--td-1) 16%, transparent); color: var(--td-1);
}
.tutorial-live-demo.is-complete .tdemo-filechip { animation: tdPop .4s cubic-bezier(.2,.9,.25,1.3) forwards; }

/* 7. help ---------------------------------------------------------------- */
.tdemo-help { flex-direction: column; align-items: stretch; gap: 7px; min-width: 190px; }
.tdemo-search {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  border: 1px solid var(--td-line); border-radius: 999px; background: var(--td-surface);
  color: var(--td-2);
}
.tdemo-search b { display: block; height: 6px; border-radius: 3px; background: var(--td-line); width: 0; }
.tutorial-live-demo.is-playing .tdemo-search b { animation: tdType 1.4s steps(14) forwards .3s; }
@keyframes tdType { to { width: 76px; } }
.tdemo-result { height: 8px; border-radius: 4px; background: var(--td-line); opacity: 0; }
.tdemo-result:nth-of-type(1) { width: 92%; }
.tdemo-result:nth-of-type(2) { width: 74%; }
.tdemo-result:nth-of-type(3) { width: 84%; }
.tutorial-live-demo.is-playing .tdemo-result { animation: tdSlideIn .38s ease-out forwards; }
.tdemo-result:nth-of-type(1) { animation-delay: 1.5s; }
.tdemo-result:nth-of-type(2) { animation-delay: 1.7s; }
.tdemo-result:nth-of-type(3) { animation-delay: 1.9s; }

/* 8. more menu ----------------------------------------------------------- */
.tdemo-menu { flex-direction: column; align-items: stretch; gap: 5px; min-width: 172px; }
.tdemo-menu span {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border: 1px solid var(--td-line); border-radius: 9px; background: var(--td-surface);
  font-size: 10.5px; opacity: 0;
}
.tdemo-menu span i { font-size: 11px; }
.tdemo-menu span:nth-child(1) i { color: var(--td-2); }
.tdemo-menu span:nth-child(2) i { color: var(--td-3); }
.tdemo-menu span:nth-child(3) i { color: var(--td-1); }
.tdemo-menu span:nth-child(4) i { color: var(--td-4); }
.tutorial-live-demo.is-playing .tdemo-menu span { animation: tdSlideIn .38s cubic-bezier(.2,.9,.25,1.2) forwards; }
.tdemo-menu span:nth-child(1) { animation-delay: .2s; }
.tdemo-menu span:nth-child(2) { animation-delay: .38s; }
.tdemo-menu span:nth-child(3) { animation-delay: .56s; }
.tdemo-menu span:nth-child(4) { animation-delay: .74s; }

/* 9. new file ------------------------------------------------------------ */
.tdemo-newfile { flex-direction: column; gap: 10px; }
.tdemo-input {
  display: flex; align-items: center; min-width: 152px; padding: 8px 11px;
  border: 1px solid var(--td-2); border-radius: 8px; background: var(--td-surface);
}
.tdemo-input b { display: block; height: 7px; border-radius: 3px; background: var(--td-2); width: 0; }
.tutorial-live-demo.is-playing .tdemo-input b { animation: tdType2 1.3s steps(18) forwards .25s; }
@keyframes tdType2 { to { width: 104px; } }
.tdemo-badges { display: flex; gap: 9px; font-size: 16px; }
.tdemo-badges i:nth-child(1) { color: #e34f26; }
.tdemo-badges i:nth-child(2) { color: #2965f1; }
.tdemo-badges i:nth-child(3) { color: #f0db4f; }
.tutorial-live-demo.is-playing .tdemo-badges i { animation: tdBob 1.8s ease-in-out infinite; }
.tdemo-badges i:nth-child(2) { animation-delay: .18s !important; }
.tdemo-badges i:nth-child(3) { animation-delay: .36s !important; }
@keyframes tdBob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-6px); } }
.tdemo-created {
  display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%;
  background: var(--td-1); color: #fff; font-size: 11px; opacity: 0; transform: scale(.4);
}
.tutorial-live-demo.is-complete .tdemo-created { animation: tdPeerIn .45s cubic-bezier(.2,.9,.25,1.4) forwards; }

/* 10. explorer ----------------------------------------------------------- */
.tdemo-explorer { position: relative; flex-direction: column; align-items: stretch; gap: 4px; min-width: 176px; }
.tdemo-row {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: 8px; font-size: 10.5px; color: var(--td-dim);
  font-family: var(--font-code, monospace);
}
.tdemo-row i { font-size: 12px; }
.tdemo-row:nth-child(1) i { color: #e34f26; }
.tdemo-row:nth-child(2) i { color: #2965f1; }
.tdemo-row:nth-child(3) i { color: #f0db4f; }
.tdemo-selector {
  position: absolute; z-index: 1; left: 0; right: 0; height: 32px; border-radius: 8px;
  background: color-mix(in srgb, var(--td-2) 16%, transparent);
  border-left: 3px solid var(--td-2); top: 0;
}
.tutorial-live-demo.is-playing .tdemo-selector { animation: tdSelect 3s cubic-bezier(.3,.9,.3,1) infinite; }
@keyframes tdSelect { 0%, 22% { top: 0; } 40%, 62% { top: 36px; } 80%, 100% { top: 72px; } }

/* 11. code editor -------------------------------------------------------- */
.tdemo-code { position: relative; align-items: flex-start; gap: 0; min-width: 218px; padding: 12px 13px;
  border: 1px solid var(--td-line); border-radius: 11px; background: var(--td-surface);
  font-family: var(--font-code, monospace); font-size: 10.5px; }
.tdemo-gutter { display: grid; gap: 4px; padding-right: 11px; margin-right: 11px; border-right: 1px solid var(--td-line); }
.tdemo-gutter i { display: block; width: 5px; height: 11px; border-radius: 2px; background: var(--td-line); }
.tdemo-lines { display: grid; gap: 4px; }
.tdemo-lines b { display: block; white-space: nowrap; overflow: hidden; width: 0; font-weight: 500; }
.tdemo-lines b.indent { padding-left: 13px; }
.tutorial-live-demo.is-playing .tdemo-lines b { animation: tdReveal .6s steps(24) forwards; }
.tdemo-lines b:nth-child(1) { animation-delay: .25s; }
.tdemo-lines b:nth-child(2) { animation-delay: .85s; }
.tdemo-lines b:nth-child(3) { animation-delay: 1.45s; }
@keyframes tdReveal { to { width: 100%; } }
.tdemo-lines em { font-style: normal; }
.tdemo-lines em.t { color: var(--td-5); }
.tdemo-lines em.a { color: var(--td-4); }
.tdemo-lines em.s { color: var(--td-1); }
.tdemo-hintbox {
  position: absolute; right: 10px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; font-size: 9px; opacity: 0;
  background: color-mix(in srgb, var(--td-3) 20%, transparent); color: var(--td-3);
}
.tutorial-live-demo.is-complete .tdemo-hintbox { animation: tdPop .4s ease-out forwards; }

/* 12/13. undo + redo ----------------------------------------------------- */
.tdemo-history { position: relative; flex-direction: column; gap: 9px; min-width: 192px; }
.tdemo-timeline { display: flex; align-items: center; gap: 0; }
.tdemo-timeline i { width: 11px; height: 11px; border-radius: 50%; background: var(--td-line); }
.tdemo-timeline i + i { margin-left: 26px; position: relative; }
.tdemo-timeline i + i::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 26px; height: 2px;
  background: var(--td-line); transform: translateY(-50%);
}
.tdemo-timeline i.is-head { background: var(--td-4); box-shadow: 0 0 0 4px color-mix(in srgb, var(--td-4) 22%, transparent); }
.tutorial-live-demo.is-playing .tdemo-timeline i.is-head { animation: tdHead 2.4s ease-in-out infinite; }
@keyframes tdHead { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.3); } }
.tdemo-diff { padding: 5px 10px; border-radius: 7px; font-family: var(--font-code, monospace); font-size: 10px; }
.tdemo-diff.is-removed { background: color-mix(in srgb, #ef4444 15%, transparent); color: #fca5a5; text-decoration: line-through; }
.tdemo-diff.is-restored { background: color-mix(in srgb, var(--td-1) 15%, transparent); color: var(--td-1); opacity: 0; }
.tutorial-live-demo.is-playing .tdemo-diff.is-removed { animation: tdStrike 2.4s ease-in-out infinite; }
@keyframes tdStrike { 0%, 30% { opacity: 1; transform: none; } 60%, 100% { opacity: .25; transform: translateX(-7px); } }
.tutorial-live-demo.is-playing .tdemo-diff.is-restored { animation: tdSlideIn .45s ease-out forwards 1.1s; }
.tdemo-rotate { position: absolute; right: -4px; top: -4px; font-size: 14px; color: var(--td-2); }
.tutorial-live-demo.is-playing .tdemo-rotate { animation: tdRotate 2.4s ease-in-out infinite; }
@keyframes tdRotate { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-320deg); } }
.tdemo-history.is-redo .tdemo-rotate { color: var(--td-3); }
.tutorial-live-demo.is-playing .tdemo-history.is-redo .tdemo-rotate { animation-name: tdRotateR; }
@keyframes tdRotateR { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(320deg); } }

/* 14. run ---------------------------------------------------------------- */
.tdemo-run { flex-direction: column; gap: 11px; }
.tdemo-playbtn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(140deg, var(--td-1), #15803d); color: #fff; font-size: 14px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--td-1) 38%, transparent);
}
.tutorial-live-demo.is-playing .tdemo-playbtn { animation: tdPress 2.4s ease-in-out infinite; }
@keyframes tdPress { 0%, 18% { transform: scale(1); } 28% { transform: scale(.86); } 42%, 100% { transform: scale(1); } }
.tdemo-bar { width: 142px; height: 5px; border-radius: 999px; background: var(--td-line); overflow: hidden; }
.tdemo-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--td-2), var(--td-1)); }
.tutorial-live-demo.is-playing .tdemo-bar i { animation: tdLoad 2.4s ease-out infinite .3s; }
.tdemo-done { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--td-1); opacity: 0; }
.tutorial-live-demo.is-complete .tdemo-done { animation: tdPop .4s ease-out forwards; }

/* 15/16. export + import ------------------------------------------------- */
.tdemo-transfer { flex-direction: column; gap: 9px; }
.tdemo-transfer small { color: var(--td-dim); font-size: 9.5px; font-weight: 700; }
.tdemo-files { display: flex; gap: 5px; }
.tdemo-files i { width: 15px; height: 19px; border-radius: 3px; background: var(--td-line); }
.tdemo-files i:nth-child(1) { background: #e34f26; }
.tdemo-files i:nth-child(2) { background: #2965f1; }
.tdemo-files i:nth-child(3) { background: #f0db4f; }
.tutorial-live-demo.is-playing .tdemo-files i { animation: tdBob 1.9s ease-in-out infinite; }
.tdemo-files i:nth-child(2) { animation-delay: .15s !important; }
.tdemo-files i:nth-child(3) { animation-delay: .3s !important; }
.tdemo-zip { font-size: 24px; color: var(--td-4); }
.tdemo-arrow { font-size: 12px; color: var(--td-2); }
.tutorial-live-demo.is-playing .tdemo-arrow { animation: tdArrow 1.6s ease-in-out infinite; }
@keyframes tdArrow { 0%, 100% { transform: translateY(-4px); opacity: .4; } 50% { transform: translateY(4px); opacity: 1; } }
.tdemo-transfer.is-import .tdemo-arrow { color: var(--td-1); }
.tutorial-live-demo.is-playing .tdemo-transfer.is-import .tdemo-arrow { animation-name: tdArrowUp; }
@keyframes tdArrowUp { 0%, 100% { transform: translateY(4px); opacity: .4; } 50% { transform: translateY(-4px); opacity: 1; } }

/* 17. live preview ------------------------------------------------------- */
.tdemo-preview { flex-direction: column; gap: 10px; }
.tdemo-browser {
  position: relative; width: 156px; overflow: hidden;
  border: 1px solid var(--td-line); border-radius: 10px; background: var(--bg-primary);
}
.tdemo-urlbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--td-line); }
.tdemo-urlbar i { width: 5px; height: 5px; border-radius: 50%; }
.tdemo-urlbar i:nth-child(1) { background: var(--td-5); }
.tdemo-urlbar i:nth-child(2) { background: var(--td-4); }
.tdemo-urlbar i:nth-child(3) { background: var(--td-1); }
.tdemo-urlbar em { flex: 1; height: 5px; margin-left: 5px; border-radius: 3px; background: var(--td-line); }
.tdemo-page { display: grid; gap: 6px; padding: 11px 10px; }
.tdemo-page u { height: 11px; width: 62%; border-radius: 3px; background: linear-gradient(90deg, var(--td-2), var(--td-3)); }
.tdemo-page s { height: 5px; border-radius: 3px; background: var(--td-line); }
.tdemo-page s:last-of-type { width: 78%; }
.tdemo-page q { height: 16px; width: 52px; border-radius: 5px; background: var(--td-1); }
.tutorial-live-demo.is-playing .tdemo-page > * { animation: tdSlideIn .4s ease-out backwards; }
.tdemo-page u { animation-delay: .3s; }
.tdemo-page s:nth-of-type(1) { animation-delay: .5s; }
.tdemo-page s:nth-of-type(2) { animation-delay: .65s; }
.tdemo-page q { animation-delay: .85s; }
.tdemo-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 62%);
  transform: translateX(-100%);
}
.tutorial-live-demo.is-playing .tdemo-shine { animation: tdShine 2.6s ease-in-out infinite 1.1s; }
@keyframes tdShine { to { transform: translateX(100%); } }
.tdemo-devices { display: flex; gap: 11px; font-size: 13px; color: var(--td-dim); }
.tutorial-live-demo.is-playing .tdemo-devices i { animation: tdDevice 3s ease-in-out infinite; }
.tdemo-devices i:nth-child(2) { animation-delay: 1s !important; }
.tdemo-devices i:nth-child(3) { animation-delay: 2s !important; }
@keyframes tdDevice { 0%, 100% { color: var(--td-dim); transform: scale(1); } 18%, 30% { color: var(--td-2); transform: scale(1.25); } }

/* fallback --------------------------------------------------------------- */
.tdemo-generic {
  position: relative; flex-direction: column; gap: 9px; padding: 18px 22px;
  border: 1px solid var(--td-line); border-radius: 13px; background: var(--td-surface);
}
.tdemo-generic > i { font-size: 23px; color: var(--td-3); }
.tdemo-generic strong { font-size: 11.5px; }
.tdemo-halo {
  position: absolute; width: 54px; height: 54px; top: 10px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--td-3) 26%, transparent), transparent 70%);
}
.tutorial-live-demo.is-playing .tdemo-halo { animation: tdHalo 2.4s ease-in-out infinite; }
@keyframes tdHalo { 0%, 100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.25); opacity: 1; } }

/* shared timeline keyframes still used by the shell ---------------------- */
@keyframes tutorialDemoSweep { 0%,18%{opacity:0;transform:translateX(-75%)} 45%{opacity:1} 72%,100%{opacity:0;transform:translateX(75%)} }
@keyframes tutorialLiveDot { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.52)} 75%,100%{box-shadow:0 0 0 7px rgba(34,197,94,0)} }
@keyframes tutorialDemoTimeline { from{transform:translateX(-110%)} to{transform:translateX(330%)} }
@keyframes tutorialDemoProgress { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes tutorialReplaySpin { from{transform:rotate(-160deg)} to{transform:rotate(0)} }

@media (max-width: 520px), (max-height: 680px) {
  #tutorialCard { padding: 18px !important; }
  .tutorial-live-demo, .tutorial-demo-stage { min-height: 118px; }
  .tutorial-demo-stage { padding: 28px 10px 14px; transform: scale(.88); }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-live-demo *, .tutorial-live-demo *::before, .tutorial-live-demo *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Anything that animates in from opacity 0 must be shown outright. */
  .tdemo-console-row, .tdemo-peer, .tdemo-menu span, .tdemo-result,
  .tdemo-filechip, .tdemo-created, .tdemo-hintbox, .tdemo-done,
  .tdemo-lines b, .tdemo-search b, .tdemo-input b { width: auto !important; }
  .tdemo-progress i, .tdemo-bar i { width: 100% !important; }
}


/* Custom pointer demonstration layered over the real control. */
.tutorial-tool-pointer {
  --tutorial-pointer-start-x: 0px;
  --tutorial-pointer-start-y: 0px;
  --tutorial-pointer-mid-x: 0px;
  --tutorial-pointer-mid-y: 0px;
  --tutorial-pointer-end-x: 0px;
  --tutorial-pointer-end-y: 0px;
  position: absolute;
  z-index: 10003;
  left: 0;
  top: 0;
  width: 46px;
  height: 48px;
  display: grid;
  place-items: start;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .68));
  transform: translate(var(--tutorial-pointer-start-x), var(--tutorial-pointer-start-y));
  transform-origin: 3px 3px;
}

.tutorial-tool-pointer > i {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: 27px;
  -webkit-text-stroke: 1px #111827;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent-color) 72%, transparent);
}

.tutorial-tool-pointer[data-kind="text"] > i { color: #7dd3fc; }
.tutorial-tool-pointer[data-kind="inspect"] > i { color: #facc15; }
.tutorial-tool-pointer[data-kind="hand"] > i { color: #86efac; }

.tutorial-pointer-ring,
.tutorial-pointer-click {
  position: absolute;
  z-index: 1;
  left: -10px;
  top: -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.tutorial-pointer-ring {
  border: 3px solid var(--accent-color);
  transform: scale(.2);
}

.tutorial-pointer-click {
  left: 3px;
  top: 3px;
  width: 10px;
  height: 10px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 42%, transparent);
  transform: scale(0);
}

.tutorial-tool-pointer > small {
  position: absolute;
  z-index: 3;
  left: 22px;
  top: 25px;
  width: max-content;
  max-width: 105px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  color: var(--text-primary);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .32);
  font: 800 9px/1.1 var(--font-code);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(4px) scale(.92);
}

.tutorial-tool-pointer.is-playing {
  animation: tutorialPointerMoveAndClick 2.8s cubic-bezier(.22, .8, .24, 1) infinite both;
}

.tutorial-tool-pointer.is-playing > .tutorial-pointer-ring {
  animation: tutorialPointerClickRing 2.8s ease-out infinite both;
}

.tutorial-tool-pointer.is-playing > .tutorial-pointer-click {
  animation: tutorialPointerClickDot 2.8s ease-out infinite both;
}

.tutorial-tool-pointer.is-playing > small {
  animation: tutorialPointerAction 2.8s ease both infinite;
}

#tutorialHighlight.is-pointer-playing {
  animation: tutorialTargetGlow 2.8s ease-in-out infinite;
}

@keyframes tutorialPointerMoveAndClick {
  0% {
    opacity: 0;
    transform: translate(var(--tutorial-pointer-start-x), var(--tutorial-pointer-start-y)) scale(.88);
  }
  9% { opacity: 1; }
  31% {
    opacity: 1;
    transform: translate(var(--tutorial-pointer-mid-x), var(--tutorial-pointer-mid-y)) scale(.96) rotate(-3deg);
  }
  52% {
    opacity: 1;
    transform: translate(var(--tutorial-pointer-end-x), var(--tutorial-pointer-end-y)) scale(1);
  }
  59% {
    opacity: 1;
    transform: translate(var(--tutorial-pointer-end-x), var(--tutorial-pointer-end-y)) scale(.78);
  }
  66% {
    opacity: 1;
    transform: translate(var(--tutorial-pointer-end-x), var(--tutorial-pointer-end-y)) scale(1);
  }
  84% {
    opacity: 1;
    transform: translate(var(--tutorial-pointer-end-x), var(--tutorial-pointer-end-y)) scale(1) rotate(2deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tutorial-pointer-end-x), var(--tutorial-pointer-end-y)) scale(1);
  }
}

@keyframes tutorialPointerClickRing {
  0%, 53% { opacity: 0; transform: scale(.2); }
  56% { opacity: .95; transform: scale(.2); }
  73%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes tutorialPointerClickDot {
  0%, 53% { opacity: 0; transform: scale(0); }
  57% { opacity: 1; transform: scale(1); }
  66%, 100% { opacity: 0; transform: scale(2.2); }
}

@keyframes tutorialPointerAction {
  0%, 34% { opacity: 0; transform: translateY(4px) scale(.92); }
  45%, 80% { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(-3px) scale(.96); }
}

@keyframes tutorialTargetGlow {
  0%, 42%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 0%, transparent); }
  58% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 18%, transparent), 0 0 24px color-mix(in srgb, var(--accent-color) 42%, transparent); }
  70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-tool-pointer.is-playing {
    opacity: 1;
    transform: translate(var(--tutorial-pointer-end-x), var(--tutorial-pointer-end-y));
    animation: none;
  }
  .tutorial-tool-pointer.is-playing > small {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .tutorial-tool-pointer.is-playing > .tutorial-pointer-ring,
  .tutorial-tool-pointer.is-playing > .tutorial-pointer-click,
  #tutorialHighlight.is-pointer-playing {
    animation: none;
  }
}

/* Compact workspace: phones and portrait tablets; landscape tablets keep the laptop layout. */
.mobile-workspace-tabs {
  display: none;
}

@media (max-width: 699px), (max-width: 1280px) and (orientation: portrait), (max-width: 1100px) and (max-height: 560px) {
  body {
    width: 100%;
    min-width: 0;
    height: 100dvh;
    min-height: 100dvh;
  }

  header {
    min-height: 56px;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding:
      max(6px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      6px
      max(8px, env(safe-area-inset-left, 0px)) !important;
    overflow: visible !important;
    white-space: nowrap;
    scrollbar-width: none;
    backdrop-filter: none;
  }

  header::-webkit-scrollbar {
    display: none;
  }

  header > *,
  header .run-button,
  .header-switches,
  .header-more-menu,
  .theme-toggle {
    flex: 0 0 auto !important;
  }

  header > .run-button,
  header > .header-more-menu > .run-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0 !important;
    border-radius: 11px;
  }

  header > .run-button strong,
  header > .header-more-menu > .run-button strong {
    display: none !important;
  }

  .header-switches {
    min-height: 42px;
    gap: 7px;
    padding: 5px 7px;
  }

  .header-switches > label:not(.switch):not(.auto-run-label) {
    display: none;
  }

  .header-switches > .auto-run-label {
    display: none;
  }

  .header-switches > .desktop-console-control {
    display: none !important;
  }

  .header-more-menu,
  .theme-toggle {
    margin-left: 0 !important;
  }

  .header-more-panel {
    position: fixed;
    top: max(62px, calc(env(safe-area-inset-top, 0px) + 56px));
    right: 8px;
    left: auto;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
    padding: 10px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 2200;
  }

  .header-more-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .header-more-section-title {
    grid-column: 1 / -1;
    font-size: 9px;
  }

  .header-more-panel .run-button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    justify-content: flex-start;
    gap: 5px;
    padding: 7px 8px;
    font-size: 10px;
    line-height: 1.1;
  }

  .header-more-panel .run-button strong {
    display: inline !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-more-panel .run-button :is(i, .btn-icon) {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    font-size: 13px;
  }

  .header-more-panel .run-button kbd {
    display: none;
  }

  #zenModeBtn,
  .zen-mode-setting {
    display: none !important;
  }

  #previewFullscreenBtn {
    display: inline-flex !important;
  }

  .editor-container > .divider {
    display: none !important;
  }

  .mobile-workspace-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) 6px max(8px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
  }

  .mobile-workspace-tabs button {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font: 800 11px/1 var(--font-ui);
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  .mobile-workspace-tabs button[aria-selected="true"] {
    border-color: var(--accent-hover);
    background: linear-gradient(180deg, var(--accent-hover), var(--accent-color));
    color: #ffffff;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent-color) 34%, transparent);
  }

  .mobile-workspace-tabs button:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  .editor-container {
    flex-direction: row !important;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0 !important;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
  }

  .editor-container > .editors,
  .editor-container > .preview {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .editor-container > .preview {
    display: none !important;
  }

  body.mobile-pane-preview .editor-container > .editors {
    display: none !important;
  }

  body.mobile-pane-console .editor-container > .editors {
    display: none !important;
  }

  body.mobile-pane-preview .editor-container > .preview,
  body.mobile-pane-console .editor-container > .preview {
    display: flex !important;
  }

  body.mobile-pane-console .preview-header,
  body.mobile-pane-console .preview-viewport-stage {
    display: none !important;
  }

  body.mobile-pane-console .console-container {
    flex: 1 1 auto;
    display: flex !important;
    height: auto;
    min-height: 0;
    flex-direction: column;
    border-top: 0;
    border-radius: 0;
  }

  body.mobile-pane-console .preview #consoleOutput {
    flex: 1 1 auto;
    display: block !important;
    height: auto;
    min-height: 0;
    overflow: auto;
  }

  body.mobile-pane-files .file-explorer,
  body.mobile-pane-editor .code-container {
    display: flex !important;
  }

  body.mobile-pane-editor .editor-actions {
    display: grid !important;
  }

  body.mobile-pane-files .code-container,
  body.mobile-pane-files .editor-actions,
  body.mobile-pane-editor .file-explorer {
    display: none !important;
  }

  body.mobile-pane-files .file-explorer {
    flex: 1 1 auto;
    min-height: 0;
    border-bottom: 0;
  }

  body.mobile-pane-files .file-toolbar {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.mobile-pane-files #fileList {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }

  body.mobile-pane-files .file-item {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 7px 9px;
  }

  body.mobile-pane-files .file-name {
    flex: 1 1 auto;
    overflow: hidden;
  }

  body.mobile-pane-files .file-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .editor-actions {
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px !important;
    padding: 7px !important;
  }

  .editor-actions .run-button {
    width: 100%;
    min-width: 0 !important;
    min-height: 42px;
    justify-content: center;
    padding: 7px !important;
  }

  .preview-header {
    min-height: 48px;
    padding: 8px 10px;
  }

  .preview-device-badge {
    max-width: 92px;
  }

  body.zen-mode .mobile-workspace-tabs,
  body.zen-mode .editor-actions,
  body.zen-mode .editor-container > .preview {
    display: none !important;
  }

  body.zen-mode .editor-container > .editors,
  body.zen-mode .code-container,
  body.zen-mode.zen-show-files .file-explorer {
    display: flex !important;
  }

  body.zen-mode:not(.zen-show-files) .file-explorer {
    display: none !important;
  }
}

/* Keep the laptop workspace in tablet landscape, but use touch-friendly compact More actions. */
@media (min-width: 700px) and (max-width: 1200px) and (min-height: 501px) and (orientation: landscape) {
  .header-more-panel {
    position: fixed;
    top: max(62px, calc(env(safe-area-inset-top, 0px) + 56px));
    right: 10px;
    left: auto;
    width: min(320px, calc(100vw - 20px));
    max-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
    padding: 10px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 2200;
  }

  .header-more-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .header-more-section-title {
    grid-column: 1 / -1;
    font-size: 9px;
  }

  .header-more-panel .run-button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    justify-content: flex-start;
    gap: 5px;
    padding: 7px 8px;
    font-size: 10px;
    line-height: 1.1;
  }

  .header-more-panel .run-button strong {
    display: inline !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-more-panel .run-button :is(i, .btn-icon) {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    font-size: 13px;
  }

  .header-more-panel .run-button kbd {
    display: none;
  }
}

@media (max-width: 520px) {
  header {
    --phone-header-button-size: clamp(32px, 10.5vw, 42px);
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-shrink: 0;
    justify-content: center !important;
    gap: clamp(3px, 1vw, 6px) !important;
    width: 100%;
  }

  header > .header-switches {
    display: flex !important;
    padding: 0;
    justify-content: center;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  header > .run-button,
  header > .header-more-menu,
  header > .header-more-menu > .run-button {
    width: var(--phone-header-button-size) !important;
    min-width: var(--phone-header-button-size) !important;
    max-width: var(--phone-header-button-size) !important;
    height: var(--phone-header-button-size) !important;
    min-height: var(--phone-header-button-size) !important;
  }

  .editor-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-workspace-tabs button {
    min-height: 50px;
    flex-direction: column;
    gap: 4px;
    padding: 5px 3px;
    font-size: 9px;
  }

  #exportZipBtn strong,
  #importZipBtn strong {
    display: none;
  }

  .line-numbers {
    width: 44px;
  }

  .line-numbers-content { padding: 10px 5px; }

  #activeEditor,
  #highlightLayer {
    padding: 10px;
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  header {
    gap: clamp(2px, 1vw, 4px) !important;
    padding-right: max(6px, env(safe-area-inset-right, 0px)) !important;
    padding-left: max(6px, env(safe-area-inset-left, 0px)) !important;
  }

}

/* ============================================================
   Visual polish pass 2 — richer, accent-aware chrome
   Every color derives from the theme variables, so light mode
   and custom accent colors stay consistent automatically.
   ============================================================ */

/* Workspace panels read as elevated cards */
.editors,
.preview {
  border: 1px solid color-mix(in srgb, var(--accent-color) 10%, var(--border-color));
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

:root[data-workspace-theme="daylight"] .editors,
:root[data-workspace-theme="daylight"] .preview {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}

/* Header: subtle accent-tinted gradient with a crisper edge */
header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 8%, var(--bg-secondary)),
    var(--bg-secondary) 82%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--border-color));
}

header .run-button {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 86%, #ffffff 14%),
    var(--accent-color)
  );
}

header .run-button:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-hover) 88%, #ffffff 12%),
    var(--accent-hover)
  );
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 36%, transparent);
}

/* File strip: tinted surface with a lifted active file tab */
.file-explorer {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 5%, var(--bg-secondary)),
    var(--bg-secondary)
  );
}

.file-item:hover {
  background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-tertiary));
}

.file-item.active {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-color));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 12px color-mix(in srgb, var(--accent-color) 32%, transparent);
}

/* Gutter blends into the code surface instead of splitting it */
.line-numbers {
  background: color-mix(in srgb, var(--bg-secondary) 45%, var(--bg-primary));
  border-right: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}

/* Preview and console chrome match the header treatment */
.preview-header {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-color) 6%, var(--bg-secondary)),
    var(--bg-secondary)
  );
}

.console-container {
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--border-color));
}

/* Divider: quiet track, accent handle on hover and drag */
.divider {
  background: transparent;
  border-left: 0;
  border-right: 0;
}

/* Scrollbars pick up the accent */
textarea::-webkit-scrollbar-thumb,
#fileList::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-color) 18%, var(--border-color));
}

textarea::-webkit-scrollbar-thumb:hover,
#fileList::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent-color) 55%, var(--text-muted));
}

/* Suggestion popup: softer corners, deeper shadow */
#suggestionPopup {
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--accent-color) 22%, var(--border-color));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* ============================================================
   Modal card polish — refined shadows, entrance motion, and a
   restyled tutorial coaching card. (Fixed and Updated Bugs)
   ============================================================ */
@keyframes codxModalCardPop {
  from { opacity: 0; transform: translateY(14px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}
@keyframes codxModalOverlayFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}/* Cards: larger radius, layered depth, and a gentle pop-in. */
#settingsModal > div,
#fontPickerModal > div,
#fontAwesomeIconModal > div,
#projectLibraryModal > div,
#githubRepoModal > div,
#previewZoomModal > div,
#appDialog > div,
#announcementPopup > div {
  border-radius: 16px !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 0 0 1px color-mix(in srgb, var(--accent-color) 6%, transparent) !important;
  animation: codxModalCardPop 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* Large, consistent close controls for every static and generated modal card. */
:is(
  #collabModal #closeModalBtn,
  #closeSettingsBtn,
  #closeProjectLibraryBtn,
  #closeFontPickerBtn,
  #closeTutorialBtn,
  #closePreviewZoomBtn,
  #closeGitHubRepoModalBtn,
  #closeProjectSearchBtn,
  #closeFontAwesomeIconBtn,
  [role="dialog"] [aria-label*="close" i],
  #tutorialModal [aria-label*="close" i]
) {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 82%, #ffffff 18%) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent) !important;
  color: var(--text-muted) !important;
  /* Sized for the Font Awesome glyph every close button now uses. 30px was
     right for the &times; text character, but far too large for an icon. */
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease !important;
}

:is(
  #collabModal #closeModalBtn,
  #closeSettingsBtn,
  #closeProjectLibraryBtn,
  #closeFontPickerBtn,
  #closeTutorialBtn,
  #closePreviewZoomBtn,
  #closeGitHubRepoModalBtn,
  #closeProjectSearchBtn,
  #closeFontAwesomeIconBtn,
  [role="dialog"] [aria-label*="close" i],
  #tutorialModal [aria-label*="close" i]
):is(:hover, :focus-visible) {
  border-color: #ff173d !important;
  background: #ff173d !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 3px rgba(255, 23, 61, 0.2),
    0 8px 22px rgba(255, 23, 61, 0.42) !important;
  text-shadow: none !important;
  transform: scale(1.08) !important;
  outline: none !important;
}

.modal-card-close-absolute {
  position: absolute !important;
  top: 13px !important;
  right: 13px !important;
  z-index: 5;
}

#appDialogTitle {
  padding-right: 54px;
}

#closeAppDialogBtn[hidden],
#closeModalBtn[hidden] {
  display: none !important;
}

/* ---- Tutorial coaching card (highlighted request) ---- */
#tutorialCard {
  padding: 26px 26px 24px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-color) 8%, var(--bg-secondary)) 0%,
      var(--bg-secondary) 42%) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.6),
    0 3px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
  animation: codxModalCardPop 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
/* Accent bar along the top of the tutorial card. */
#tutorialCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color) 40%, transparent));
}
/* The icon sits inside .codx-tour-badge, which supplies the colour and the
   shadow. The icon itself only needs to be centred and crisp. */
#tutorialCard #tutorialIcon {
  display: block;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}
#tutorialCard #tutorialTitle {
  letter-spacing: 0.2px;
}
#tutorialCard .run-button {
  border-radius: 10px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
#tutorialCard .run-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
#tutorialProgress {
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Big circular social share buttons in the published-link dialog. */
#publishedShareShortcuts {
  align-items: center;
}
.share-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.share-icon-btn:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.32);
}
.share-icon-btn:active {
  transform: translateY(0) scale(0.98);
}
.share-icon-btn i {
  pointer-events: none;
}/* One-click auto-fix inside a console runtime diagnostic */
.codx-runtime-autofix {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
  border-left: 3px solid var(--accent-color);
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.codx-runtime-autofix-summary {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.5;
}
.codx-runtime-autofix-preview {
  margin: 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font-code);
  font-size: 11px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}
.codx-runtime-fix-btn {
  justify-self: start;
  padding: 8px 15px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-color);
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.codx-runtime-fix-btn:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.codx-runtime-fix-btn:disabled {
  background: #3f8f5a;
  cursor: default;
  opacity: 0.85;
}
.codx-runtime-autofix.is-applied {
  border-color: #3f8f5a;
}

/* =====================================================================
   GUIDED TOUR CARD
   Theme-driven onboarding card: an animated aurora wash, a drifting grid,
   a per-feature icon that settles into place, and a progress rail.
   Everything keys off the editor's own CSS variables so it follows the
   user's chosen theme instead of hardcoding colours.
   ===================================================================== */

#tutorialCard.codx-tour-card {
  position: absolute;
  z-index: 2002;
  width: min(400px, calc(100vw - 32px));
  max-width: 400px;
  padding: 22px 22px 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-color) 44%, transparent);
  border-radius: 20px;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--bg-secondary) 96%, var(--accent-color) 4%),
      var(--bg-secondary) 62%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 46px -18px color-mix(in srgb, var(--accent-color) 60%, transparent);
  color: var(--text-primary);
  /* Transform and opacity only: both are composited on the GPU, so the card
     arrives smoothly. Animating filter: blur() here meant the browser
     re-rasterised the whole card every frame, which is what made the entrance
     look smeared and stuttery. */
  animation: codxTourEnter .34s cubic-bezier(.2, .8, .2, 1);
  will-change: transform, opacity;
}

@keyframes codxTourEnter {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Slow aurora sweep behind the content. */
#tutorialCard .codx-tour-aurora {
  position: absolute;
  z-index: 0;
  inset: -45% -30% auto -30%;
  height: 190%;
  pointer-events: none;
  background:
    radial-gradient(42% 32% at 22% 18%, color-mix(in srgb, var(--accent-color) 34%, transparent), transparent 70%),
    radial-gradient(38% 30% at 82% 30%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 72%);
  opacity: .42;
  /* Slower and gentler. The previous sweep rotated a layer nearly twice the
     card's height every 13 seconds, which shimmered behind the text and made
     the card feel restless while you were trying to read it. */
  animation: codxTourAurora 26s ease-in-out infinite;
  will-change: transform;
}

@keyframes codxTourAurora {
  0%, 100% { transform: translate3d(-3%, -1%, 0); }
  50%      { transform: translate3d(3%, 1%, 0); }
}

/* Faint blueprint grid that drifts under the aurora. */
#tutorialCard .codx-tour-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent-color) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 12%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 12%, transparent 78%);
  opacity: .32;
  /* Animating background-position cannot be composited, so this repainted the
     grid on every frame for 22 seconds at a time. It is now a static texture:
     the same look without the cost or the crawling motion. */
}

/* Lifts the real content above the decorative layers. The close button is
   excluded: it is absolutely positioned in the top-right corner, and this rule
   was overriding that and dropping it back into normal flow at the top-left. */
#tutorialCard.codx-tour-card
  > *:not(.codx-tour-aurora):not(.codx-tour-grid):not(.codx-tour-close) {
  position: relative;
  z-index: 1;
}

/* --- header --- */
#tutorialCard .codx-tour-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-right: 34px;
  margin-bottom: 13px;
}

#tutorialCard .codx-tour-badge {
  display: grid;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--accent-color) 88%, #ffffff 12%),
      color-mix(in srgb, var(--accent-color) 62%, #000000 38%));
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent-color) 80%, transparent);
  place-items: center;
}

#tutorialCard .codx-tour-badge i,
#tutorialCard .codx-tour-badge svg {
  color: #fff;
  fill: currentColor;
  font-size: 19px;
  width: 19px;
  height: 19px;
  text-align: center;
  /* Re-runs whenever the step changes, so each feature announces itself. */
  /* A quiet settle rather than a spin. The old version rotated 24 degrees and
     overshot to 112% on every single step, which drew the eye away from the
     thing being explained. */
  animation: codxTourIcon .32s cubic-bezier(.2, .8, .2, 1);
}

@keyframes codxTourIcon {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

#tutorialCard .codx-tour-heading { min-width: 0; }

#tutorialCard .codx-tour-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-color);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

#tutorialCard #tutorialTitle {
  margin: 0;
  color: var(--text-primary);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

#tutorialCard #tutorialDescription {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.62;
}

/* Text and demo fade in per step rather than snapping. */
#tutorialCard.is-stepping #tutorialTitle,
#tutorialCard.is-stepping #tutorialDescription,
#tutorialCard.is-stepping .tutorial-live-demo {
  animation: codxTourStepIn .26s cubic-bezier(.2, .8, .2, 1) both;
}

#tutorialCard.is-stepping #tutorialDescription { animation-delay: .04s; }
#tutorialCard.is-stepping .tutorial-live-demo { animation-delay: .08s; }

@keyframes codxTourStepIn {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: none; }
}

#tutorialCard.is-stepping-back #tutorialTitle,
#tutorialCard.is-stepping-back #tutorialDescription,
#tutorialCard.is-stepping-back .tutorial-live-demo {
  animation-name: codxTourStepInBack;
}

@keyframes codxTourStepInBack {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --- close --- */
#tutorialCard .codx-tour-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  /* A faint surface so the control is findable against the card's gradient
     without competing with the step content. */
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  place-items: center;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    transform .18s cubic-bezier(.2, .8, .2, 1);
}

/* A shared rule elsewhere styles every close button with
   `transform: scale(1.08) !important`, which silently cancelled the rotate
   here. Declared with the same weight so the tour keeps one clear effect
   instead of two rules quietly overriding each other. */
#tutorialCard .codx-tour-close:hover,
#tutorialCard .codx-tour-close:focus-visible {
  color: #ff6b6b !important;
  border-color: rgba(255, 107, 107, .45) !important;
  background: rgba(255, 107, 107, .14) !important;
  transform: rotate(90deg) !important;
  text-shadow: none !important;
}

#tutorialCard .codx-tour-close:active {
  transform: rotate(90deg) scale(.92) !important;
}

/* --- footer, progress and buttons --- */
#tutorialCard .codx-tour-foot {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

#tutorialCard .codx-tour-progress {
  display: grid;
  gap: 7px;
}

#tutorialCard #tutorialProgress {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
}

#tutorialCard .codx-tour-track {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-muted) 26%, transparent);
}

#tutorialCard .codx-tour-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent-color) 55%, #ffffff 45%),
    var(--accent-color));
  transition: width .45s cubic-bezier(.3, .9, .3, 1);
}

#tutorialCard .codx-tour-actions {
  display: flex;
  gap: 10px;
}

#tutorialCard .codx-tour-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

#tutorialCard .codx-tour-btn i { font-size: 12px; }
#tutorialCard .codx-tour-btn:active { transform: translateY(1px) scale(.985); }

/* BACK: grey and quiet. */
#tutorialCard .codx-tour-back {
  flex: 1 1 34%;
  border-color: color-mix(in srgb, var(--text-muted) 42%, transparent);
  background: color-mix(in srgb, var(--bg-tertiary, #21262d) 92%, #ffffff 8%);
  color: var(--text-secondary);
}

#tutorialCard .codx-tour-back:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--text-muted) 70%, transparent);
  background: color-mix(in srgb, var(--bg-tertiary, #21262d) 76%, #ffffff 24%);
  color: var(--text-primary);
}

#tutorialCard .codx-tour-back:disabled {
  opacity: .42;
  cursor: not-allowed;
}

/* NEXT: green and the obvious way forward. */
#tutorialCard .codx-tour-next {
  flex: 1 1 66%;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent-color) 86%, #ffffff 14%),
    var(--accent-color));
  color: #fff;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent-color) 92%, transparent);
}

#tutorialCard .codx-tour-next:hover {
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--accent-color) 100%, transparent);
  transform: translateY(-1px);
}

/* Gentle nudge on the arrow so the way forward reads at a glance. */
#tutorialCard .codx-tour-next i {
  animation: codxTourNudge 1.9s ease-in-out infinite;
}

@keyframes codxTourNudge {
  0%, 62%, 100% { transform: translateX(0); }
  76%           { transform: translateX(3px); }
}

#tutorialCard .codx-tour-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  outline-offset: 2px;
}

/* --- tablet and phone: dock the card as a bottom sheet --- */
@media (max-width: 900px), (max-height: 560px) {
  #tutorialCard.codx-tour-card {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: min(74dvh, 620px);
    overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    transform: none !important;
    animation: codxTourSheetUp .38s cubic-bezier(.22, .96, .3, 1.02);
  }

  @keyframes codxTourSheetUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }

  /* Grab handle, so it reads as a sheet you can dismiss. */
  #tutorialCard.codx-tour-card::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  }

  #tutorialCard .codx-tour-badge {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  #tutorialCard #tutorialTitle { font-size: 17px; }
  #tutorialCard #tutorialDescription { font-size: 13px; }
  #tutorialCard .codx-tour-close { top: 14px; right: 10px; }
}

@media (max-width: 420px) {
  #tutorialCard .codx-tour-actions { gap: 8px; }
  #tutorialCard .codx-tour-btn {
    padding: 11px 10px;
    font-size: 11.5px;
    letter-spacing: .04em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tutorialCard.codx-tour-card,
  #tutorialCard.codx-tour-card *,
  #tutorialCard .codx-tour-aurora,
  #tutorialCard .codx-tour-grid {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   TABLET REFINEMENTS
   Tablets are touch devices that often sit at desktop-ish widths, so they
   get the two-pane layout but need finger-sized controls in both
   orientations.
   ===================================================================== */

@media (min-width: 700px) and (max-width: 1366px) and (pointer: coarse) {
  header .run-button,
  header button,
  .editor-actions button,
  .file-toolbar button,
  .preview-icon-button {
    min-height: 42px;
  }

  .mobile-workspace-tabs button {
    min-height: 46px;
  }

  /* Landscape: keep both panes usable rather than letting the editor
     squeeze the preview into a sliver. */
  .editor-container {
    gap: 10px;
  }

  .file-explorer {
    min-width: 170px;
  }

  #activeEditor,
  #highlightLayer {
    font-size: 14px;
  }
}

/* Tablet landscape with limited height: trim vertical chrome so the code
   area keeps most of the screen. */
@media (min-width: 900px) and (max-width: 1366px) and (max-height: 860px) and (pointer: coarse) {
  header {
    padding-block: 6px;
  }

  .file-toolbar,
  .editor-actions {
    padding-block: 6px;
  }

  .editor-actions button {
    min-height: 38px;
  }
}@keyframes supportBeaconSpin { to { transform: rotate(360deg); } }/* Narrow screens and tablet portrait: stack the logo above the copy. */
@media (max-width: 560px) {}

@media (prefers-reduced-motion: reduce) {}

/* =====================================================================
   RESPONSIVE PASS 3 — phones and tablets, portrait and landscape
   ---------------------------------------------------------------------
   1. Auto-Run reads as a normal square control instead of a long pill.
   2. Short landscape phones keep a usable code area.
   3. Portrait tablets get comfortable, finger-sized chrome.
   4. Mobile preview fullscreen works even where the Fullscreen API does
      not (notably iPhone Safari, which refuses it on non-video elements).
   ===================================================================== */

/* ── 1. Auto-Run control ───────────────────────────────────────────
   The same toggle switch the laptop header uses — real 44x22 proportions with
   the sliding knob. An older rule stretched it to match the width of the
   square buttons beside it, which is what produced the long capsule. It now
   keeps its natural size and is simply centred in the header row. */
@media (max-width: 699px),
  (max-width: 1280px) and (orientation: portrait),
  (max-width: 1100px) and (max-height: 560px) {
  header > .header-switches {
    width: auto;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    padding: 0;
    gap: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  header > .header-switches .switch {
    width: 44px;
    min-width: 44px;
    height: 22px;
    min-height: 0;
    border-radius: 22px;
  }

  header > .header-switches .slider {
    display: block;
    border-radius: 22px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
  }

  header > .header-switches .slider::before {
    content: "";
    position: absolute;
    top: auto;
    left: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--text-primary);
    font-size: 0;
    transform: none;
    transition: 0.3s;
  }

  header > .header-switches input:checked + .slider {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
  }

  header > .header-switches input:checked + .slider::before {
    transform: translateX(22px);
  }

  header > .header-switches input:focus-visible + .slider {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
  }
}

/* Small phones keep the same switch, a touch narrower so it sits comfortably
   beside the shrunken header buttons. */
@media (max-width: 520px) {
  header > .header-switches {
    width: auto;
    min-width: 0;
    height: var(--phone-header-button-size);
    min-height: var(--phone-header-button-size);
  }

  header > .header-switches .switch {
    width: 40px;
    min-width: 40px;
    height: 20px;
    min-height: 0;
  }

  header > .header-switches .slider::before {
    width: 14px;
    height: 14px;
  }

  header > .header-switches input:checked + .slider::before {
    transform: translateX(20px);
  }
}

/* ── 2. Landscape phones (very short viewports) ────────────────────────
   A 390px-tall viewport cannot afford a 56px header plus a 56px tab bar
   plus a 56px action row. Everything shrinks so the code keeps the space. */
@media (max-height: 500px) and (orientation: landscape) {
  header {
    min-height: 0 !important;
    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 4px !important;
    gap: 5px !important;
  }

  header > .run-button,
  header > .header-more-menu,
  header > .header-more-menu > .run-button {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 9px;
  }

  header > .header-switches {
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  header > .header-switches .switch {
    width: 38px !important;
    min-width: 38px !important;
    height: 19px !important;
    min-height: 0 !important;
  }

  header > .header-switches .slider::before {
    width: 13px;
    height: 13px;
  }

  header > .header-switches input:checked + .slider::before {
    transform: translateX(19px);
  }

  .mobile-workspace-tabs {
    padding-top: 4px;
    padding-bottom: 4px;
    gap: 4px;
  }

  .mobile-workspace-tabs button {
    min-height: 32px;
    flex-direction: row;
    gap: 5px;
    padding: 4px 6px;
    font-size: 9.5px;
  }

  /* Labels are the first thing to go if the row still feels cramped. */
  @media (max-width: 720px) {
    .mobile-workspace-tabs button strong {
      display: none;
    }

    .mobile-workspace-tabs button i {
      font-size: 14px;
    }
  }

  .editor-container {
    padding-top: 5px !important;
    padding-bottom: max(5px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .editor-actions {
    padding: 4px !important;
    gap: 4px !important;
  }

  .editor-actions .run-button {
    min-height: 34px;
    padding: 4px !important;
  }

  .preview-header {
    min-height: 38px;
    padding: 5px 8px;
  }

  .file-toolbar {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

/* ── 3. Portrait tablets ───────────────────────────────────────────────
   These use the single-pane compact layout, but at 768-1280px the phone
   sizing looks undersized and the tap targets sit far apart. */
@media (min-width: 700px) and (max-width: 1280px) and (orientation: portrait) {
  header {
    gap: 10px !important;
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }

  header > .run-button,
  header > .header-more-menu > .run-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
  }

  header > .header-switches {
    width: auto;
    min-width: 0;
    height: 46px;
    min-height: 46px;
  }

  header > .header-switches .switch {
    width: 50px;
    min-width: 50px;
    height: 26px;
    min-height: 0;
  }

  header > .header-switches .slider::before {
    width: 20px;
    height: 20px;
  }

  header > .header-switches input:checked + .slider::before {
    transform: translateX(24px);
  }

  .mobile-workspace-tabs {
    gap: 10px;
    padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px
      max(14px, env(safe-area-inset-left, 0px));
  }

  .mobile-workspace-tabs button {
    min-height: 50px;
    font-size: 12.5px;
    gap: 9px;
  }

  .editor-container {
    padding: 12px max(14px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(14px, env(safe-area-inset-left, 0px)) !important;
  }

  .editor-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px !important;
    padding: 9px !important;
  }

  .editor-actions .run-button {
    min-height: 46px;
  }

  #activeEditor,
  #highlightLayer {
    font-size: 15px !important;
  }

  body.mobile-pane-files .file-item {
    min-height: 52px;
  }
}

/* iOS zooms the page whenever a focused field is under 16px. Keep every
   text field at 16px on touch layouts so the workspace never jumps. */
@media (max-width: 1280px) and (pointer: coarse) {
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* ── 4. Fullscreen preview fallback ────────────────────────────────────
   iPhone Safari rejects requestFullscreen() on anything but a <video>, so
   the button used to just show an error. On touch layouts the preview is
   promoted to a fixed, full-viewport panel instead — same result, works
   everywhere, and the tab bar and header stay out of the way. */
body.preview-faux-fullscreen {
  overflow: hidden;
}

body.preview-faux-fullscreen > header,
body.preview-faux-fullscreen > .mobile-workspace-tabs,
body.preview-faux-fullscreen .editor-container > .editors,
body.preview-faux-fullscreen .editor-container > .divider {
  display: none !important;
}

body.preview-faux-fullscreen .editor-container {
  padding: 0 !important;
  gap: 0 !important;
}

body.preview-faux-fullscreen .editor-container > .preview {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 2400;
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border: 0 !important;
  border-radius: 0 !important;
}

body.preview-faux-fullscreen .preview-viewport-stage,
body.preview-faux-fullscreen #output {
  flex: 1 1 auto;
  min-height: 0;
}

/* Exit control. It lives in the preview header beside Refresh, Inspect and
   Zoom, so it only ever appears where that header does — the touch layouts
   that use this mode. Icon only, matching its neighbours. */
#previewFauxFullscreenExit {
  display: none;
}

body.preview-faux-fullscreen #previewFauxFullscreenExit {
  display: inline-flex;
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--bg-tertiary) 70%, var(--accent-color));
  color: var(--text-primary);
}

body.preview-faux-fullscreen #previewFauxFullscreenExit:active {
  transform: scale(0.96);
}

/* The preview header is the only chrome left on screen in this mode, so it
   stays put while the frame below it scrolls. */
body.preview-faux-fullscreen .preview-header {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
}

/* ── 5. Tablet landscape: keep the header on one row ───────────────────
   At 1024-1100px the labelled header buttons wrap onto a second row, which
   costs vertical space the split layout needs. Icons only, like the phone
   header, while the two-pane workspace stays intact. */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  header {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  header > .run-button strong,
  header > .header-more-menu > .run-button strong {
    display: none !important;
  }

  header > .run-button,
  header > .header-more-menu > .run-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 11px;
  }

  header > .header-switches {
    flex: 0 0 auto;
    gap: 7px;
  }
}/* Notches, rounded corners and home indicators. The overlays that already
   handle their own safe areas keep their own values. */
:is(
  #githubRepoModal,
  #fontAwesomeIconModal,
  #projectSearchModal,
  #previewZoomModal
) {
  padding:
    max(12px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
}/* The announcement card was the one surface with no height cap at all, so
   a long notice pushed its button off-screen with no way to scroll to it. */
#announcementPopup > div {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A dialog taller than the screen must not be squeezed by a min-height. */
.github-repo-dialog {
  min-height: min(620px, calc(100dvh - 24px));
}/* Action rows always wrap rather than pushing past the card edge. */
:is(#appDialogActions, #modalActions, .github-commit-actions, .settings-color-picker-actions) {
  flex-wrap: wrap;
}

/* ── Narrow phones ─────────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* Roomy desktop padding wastes a third of a small screen. */
  :is(
    #settingsModal > div,
    #fontPickerModal > div,
    #projectLibraryModal > div,
    #announcementPopup > div,
    #appDialog > div
  ) {
    padding: 16px !important;
  }

  .github-repo-body,
  .github-repo-header {
    padding: 14px !important;
  }

  /* Fixed minimums that no longer fit the available width. */
  .icon-catalog-toolbar select,
  .project-search-options button {
    min-width: 0;
  }/* Labels that were told never to wrap, now free to. */
  :is(
    .workspace-theme-card-copy strong,
    .workspace-theme-card-copy small,
    .settings-color-picker-live strong,
    .settings-color-picker-live span,
    .icon-copy-row code,
    .project-search-summary strong
  ) {
    white-space: normal;
  }

  .settings-color-fields,
  .workspace-theme-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Short viewports: landscape phones and split-screen tablets ─────── */
@media (max-height: 560px) {/* These two size themselves and scroll internally, so they only need
     their outer padding trimmed — forcing height:auto here would collapse
     the 1fr row their scrolling body depends on. */
  .icon-catalog-dialog {
    height: calc(100dvh - 16px);
    padding: 12px;
  }

  .github-repo-dialog {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .icon-catalog-dialog .icon-catalog-grid {
    gap: 8px;
  }.settings-color-saturation {
    min-height: clamp(120px, 34dvh, 220px);
  }

  /* Sticky headers and footers would eat most of a 390px-tall screen. */
  #modalTitle {
    min-height: 0;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ── Very short (landscape phones under 420px tall) ────────────────── */
@media (max-height: 420px) {
  :is(
    #settingsModal > div,
    #collabModal > div,
    #announcementPopup > div,
    #appDialog > div,
    #projectLibraryModal > div,
    #fontPickerModal > div
  ) {
    padding: 12px !important;
  }}@media (max-width: 560px) {}

/* =====================================================================
   WORKSPACE POLISH — cross-device refinements
   ---------------------------------------------------------------------
   Additive only. Nothing here changes a size, a position or a layout
   rule; it fills gaps that show up on real hardware but not on a
   resized desktop window.
   ===================================================================== */

/* iOS Safari inflates text when a phone is rotated to landscape, which
   silently breaks the careful header and tab sizing. Pinning the
   adjustment keeps every layout identical in both orientations. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}/* A press should still be visible now the browser's own highlight is off.
   Kept to a transform so it cannot disturb surrounding layout. */
@media (hover: none) {
  button:active,
  .run-button:active,
  .btn-icon:active,
  .preview-icon-button:active,
  .mobile-workspace-tabs button:active {
    transform: scale(0.97);
  }
}

/* Scrollable panes should not rubber-band the whole page behind them when
   they reach their end — a common annoyance on phones and trackpads. */
.editors,
.file-explorer,
.preview,
#output,
.console-output,
.editor-scroll,
.collab-file-choice-list,
.participant-file-access-list {
  overscroll-behavior: contain;
}

/* Firefox has no ::-webkit-scrollbar, so its scrollbars ignored the 25
   rules written for Chrome and stayed at the OS default. Both properties
   inherit, so setting them once on the root covers the whole workspace
   without blanketing every element. */
html {
  scrollbar-color: var(--border-color) transparent;
  scrollbar-width: thin;
}

/* Long file names, URLs and error text should wrap rather than force a
   panel wider than the screen. */
.file-item,
.console-output,
.preview-header-meta {
  overflow-wrap: anywhere;
}

/* Anything focusable that no specific rule already covers still gets a
   visible ring — important for keyboard and switch-control users. */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* The existing reduced-motion rules each disable one animation by name, so
   anything added since is unaffected. This is the catch-all. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Notice shown when another device turns sync off, or the encrypted copy
   expires. Matches the other dialog notices in the workspace. */
.sync-stopped-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  text-align: left;
}

.sync-stopped-notice > i {
  margin-top: 2px;
  color: var(--accent-color);
  font-size: 20px;
}

.sync-stopped-notice strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sync-stopped-notice small {
  display: block;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

/* Asked when Sync Key is opened with unsaved edits in the editor. */
.sync-save-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  text-align: left;
}

.sync-save-notice > i {
  margin-top: 2px;
  color: var(--accent-color);
  font-size: 19px;
}

.sync-save-notice strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.4;
}

.sync-save-notice small {
  display: block;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* ── Create / Join a session: colour picker and readability ─────────────
   The custom colour input had no styling at all, so it rendered at the
   browser default — a small swatch that looked broken beside the full
   width quick-colour grid. */
.collab-color-heading {
  margin: 0 0 9px;
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collab-custom-color {
  display: block;
  width: 100%;
}

/* Fills the card, leaving only the card's own padding either side. */
#userThemeInput {
  display: block;
  width: 100%;
  height: 54px;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-tertiary);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#userThemeInput:hover {
  border-color: var(--accent-color);
}

#userThemeInput:focus-visible {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

/* Browsers wrap the colour value in their own chrome. These make the
   swatch itself fill the control on Chrome, Edge, Safari and Firefox. */
#userThemeInput::-webkit-color-swatch-wrapper {
  padding: 0;
}

#userThemeInput::-webkit-color-swatch {
  border: none;
  border-radius: 10px;
}

#userThemeInput::-moz-color-swatch {
  border: none;
  border-radius: 10px;
}

/* Readability: several labels in this dialog used --text-muted at 12px,
   which is hard to read against the card on a phone. */
.collab-color-picker-wrap {
  color: var(--text-primary);
}

.collab-color-taken-list {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 650;
}

.collab-color-taken-item span:last-child {
  color: var(--text-primary);
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  #userThemeInput { height: 48px; }
  .collab-color-heading { font-size: 11px; }
}

/* All text in Create / Join a session, bold and high contrast. Several
   labels used --text-muted at 12px, which sits close to the card colour
   and is hard to read on a phone. */
#collabModal .collab-form-field > span,
#collabModal .collab-waiting-room-row strong,
#collabModal .collab-session-label,
#collabModal label > span {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

#collabModal .collab-waiting-room-row small,
#collabModal .collab-form-note,
#collabModal .collab-section-note,
#collabModal small {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.55;
}

/* The rule above paints every <small> in this modal grey, and because it
   carries an id it outranks the .collab-name-error class no matter where that
   class is written. So the name message was rendering grey instead of red.
   These selectors add the same id to win it back, and are placed after that
   block so order cannot go against them either.

   Both failure states are red: too short and too long are equally wrong, and a
   grey "At least 2 characters" reads like a hint rather than a problem. */
/* The dialog input carries margin-bottom: 16px inline, which would leave the
   message floating away from the box it belongs to. Pulled back up so it sits
   directly under the field, exactly as it does on the join form. */
#appDialogNameMeta {
  margin-top: -10px;
  margin-bottom: 14px;
}

#appDialogNameMeta[hidden] { display: none; }

#collabModal .collab-name-error,
#modalBody .collab-name-error,
.collab-name-error {
  color: var(--error-color, #cf222e);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
}

#collabModal .collab-name-count.is-over,
#modalBody .collab-name-count.is-over,
.collab-name-count.is-over {
  color: var(--error-color, #cf222e);
  font-weight: 800;
}

/* The counter turns red whenever the name is unusable, not only when it is too
   long, so the two halves of the line always agree with each other. */
#collabModal .collab-name-count.is-invalid,
#modalBody .collab-name-count.is-invalid,
.collab-name-count.is-invalid {
  color: var(--error-color, #cf222e);
  font-weight: 800;
}

#collabModal p {
  color: var(--text-primary);
  font-weight: 650;
}

#collabModal input[type="text"],
#collabModal input[type="search"],
#collabModal select,
#collabModal textarea {
  color: var(--text-primary);
  font-weight: 700;
}

#collabModal input::placeholder,
#collabModal textarea::placeholder {
  color: var(--text-muted);
  font-weight: 600;
  opacity: 1;
}


/* IMPORT SOURCE DIALOG
   Two side-by-side explainer rows above the buttons, so the difference
   between a .zip and a plain folder is readable before choosing. */
.import-source-intro {
  display: block;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.import-source-options {
  display: grid;
  gap: 10px;
  text-align: left;
}

.import-source-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
}

.import-source-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--accent-color);
  font-size: 15px;
}

.import-source-option strong {
  display: block;
  color: var(--text-primary);
  font-size: 13px;
}

.import-source-option small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ==========================================================================
   NODE.JS SERVER WORKSPACE
   Replaces the preview viewport (not the console) while a Node project runs.
   Terminal and live server are two tabs of one pane.
   ========================================================================== */

#nodeWorkspaceBtn[aria-pressed="true"] {
  border-color: #86efac;
  background: linear-gradient(180deg, #16a34a, #15803d);
  color: #fff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, 0.3);
}
#nodeWorkspaceBtn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #22c55e, #16a34a);
}
#nodeWorkspaceBtn[aria-pressed="true"]::after {
  content: "ON";
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* Swap the viewport for the workspace */
.preview.node-active #previewViewportStage,
.preview.node-active .preview-zoom-modal {
  display: none !important;
}
.preview.node-active #nodeWorkspace {
  display: flex;
}
/* The hidden attribute always wins, whatever else is on the element. */
.node-workspace[hidden] {
  display: none !important;
}

.node-workspace {
  /* Hidden by default. Only .preview.node-active reveals it, so the pane can
     never share the preview area with the normal webpage output. */
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  background: var(--console-bg, #0b1220);
  color: var(--console-text, #d6deeb);
  font-family: var(--font-code, ui-monospace, monospace);
}

/* --- top bar --- */
/* Insurance: the stylesheet has a bare `header {}` rule carrying
   position:sticky, z-index:100 and a backdrop-filter. If this bar is ever
   marked up as a <header> again it would inherit all of that and float over
   the More menu, so the values are pinned back to their defaults here. */
.nw-bar {
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: none;
  backdrop-filter: none;
}
.nw-tabs { display: flex; gap: 4px; min-width: 0; }
.nw-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nw-tab:hover:not(:disabled) { background: rgba(148, 163, 184, 0.12); color: #e2e8f0; }
.nw-tab.is-active {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
}
.nw-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.nw-port {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.25);
  color: #bbf7d0;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
}

.nw-bar-right { display: flex; align-items: center; gap: 6px; }
.nw-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.14);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nw-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.6);
}
.nw-status[data-state="booting"] .nw-dot,
.nw-status[data-state="installing"] .nw-dot,
.nw-status[data-state="starting"] .nw-dot {
  background: #fbbf24;
  animation: nwPulse 1.4s ease-out infinite;
}
.nw-status[data-state="running"] { background: rgba(34, 197, 94, 0.18); color: #86efac; }
.nw-status[data-state="running"] .nw-dot { background: #22c55e; animation: nwPulse 2s ease-out infinite; }
.nw-status[data-state="error"] { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
.nw-status[data-state="error"] .nw-dot { background: #ef4444; }
.nw-status[data-state="ready"] { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
.nw-status[data-state="ready"] .nw-dot { background: #38bdf8; }
@keyframes nwPulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 6px transparent; opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

.nw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.nw-icon:hover:not(:disabled) { background: rgba(148, 163, 184, 0.2); transform: translateY(-1px); }
.nw-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.nw-icon-danger { border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; }
.nw-icon-danger:hover:not(:disabled) { background: rgba(248, 113, 113, 0.18); }

/* --- views --- */
.nw-view { display: none; flex: 1; flex-direction: column; min-height: 0; }
.nw-view.is-active { display: flex; }

/* --- boot progress --- */
.nw-boot {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 26px 20px 20px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  text-align: center;
}
.nw-boot[hidden] { display: none; }
.nw-boot-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(148, 163, 184, 0.25);
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: nwSpin 0.8s linear infinite;
}
@keyframes nwSpin { to { transform: rotate(360deg); } }
.nw-boot strong { color: #e2e8f0; font-size: 13px; font-weight: 800; }
.nw-boot span { color: #94a3b8; font-size: 11.5px; }
.nw-boot-track {
  width: min(320px, 80%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.2);
}
.nw-boot-track > i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.35s ease;
}

/* --- terminal --- */
.nw-log {
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: left;
}
.nw-log:empty::before {
  content: "Ready. Try: npm start";
  color: #64748b;
  font-style: italic;
}
.nw-line-cmd { color: #7dd3fc; font-weight: 700; }
.nw-line-err { color: #fca5a5; }
.nw-line-ok { color: #86efac; }
.nw-line-dim { color: #64748b; }

.nw-hint {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-left: 3px solid #38bdf8;
  border-radius: 9px;
  background: rgba(56, 189, 248, 0.08);
  white-space: normal;
}
.nw-hint strong { color: #7dd3fc; font-size: 12px; }
.nw-hint span { color: #cbd5e1; font-size: 11.5px; line-height: 1.5; }
.nw-hint button {
  justify-self: start;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: var(--accent-color, #22c55e);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.nw-hint button:hover { filter: brightness(1.12); }

.nw-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.6);
}
.nw-prompt { color: #4ade80; font-weight: 900; }
.nw-input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.65);
  color: #e2e8f0;
  font: inherit;
  font-size: 12px;
  direction: ltr;
  text-align: left;
}
.nw-input:focus { border-color: rgba(34, 197, 94, 0.6); outline: none; }
.nw-input:disabled { opacity: 0.5; cursor: not-allowed; }
.nw-run,
.nw-stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.nw-run { background: linear-gradient(180deg, #16a34a, #15803d); }
.nw-stop { background: linear-gradient(180deg, #dc2626, #991b1b); }
.nw-run:hover:not(:disabled),
.nw-stop:hover:not(:disabled) { filter: brightness(1.13); transform: translateY(-1px); }
.nw-run:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- server view --- */
.nw-address {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.6);
}
.nw-address-scheme { color: #4ade80; font-size: 10px; }
.nw-address-input {
  flex: 1;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.6);
  color: #cbd5e1;
  font: inherit;
  font-size: 11px;
  text-overflow: ellipsis;
  direction: ltr;
}
.nw-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

@media (max-width: 760px) {
  .nw-bar { flex-wrap: wrap; gap: 6px; }
  .nw-tab span { display: none; }
  .nw-tab { padding: 7px 10px; }
  .nw-status { font-size: 9.5px; padding: 3px 8px; }
  .nw-form { flex-wrap: wrap; }
  .nw-input { flex-basis: 100%; min-height: 38px; font-size: 16px; }
}


/* --- Node.js mode takes over the preview header ---------------------------
   The normal title, address box, favicon and device badge all describe the
   webpage preview, which is not on screen in Node mode. They are hidden and
   replaced by a single label that follows the active tab. The refresh, inspect
   and zoom buttons act on the hidden preview iframe, so they go too. */
.node-header-title {
  display: none;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.node-header-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.preview.node-active .node-header-title {
  display: inline-flex;
}
.preview.node-active .preview-header-meta,
.preview.node-active #previewFavicon,
.preview.node-active .preview-device-badge,
.preview.node-active #previewRefreshBtn,
.preview.node-active #previewInspectBtn,
.preview.node-active #previewZoomBtn {
  display: none !important;
}

/* ===========================================================================
   SUPPORT CENTER
   Shown once, straight after the first-visit guided tour.
   Sizing is fluid rather than breakpoint-driven: clamp() handles type and
   spacing, the tile grid uses auto-fit so it collapses on its own, and the
   card is capped against dvh so it can never exceed the viewport. That makes
   it correct on a 320px phone and a 4K monitor without a media query.
   =========================================================================== */

.sc-overlay {
  position: fixed;
  z-index: 12000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 4vw, 28px);
  padding-top: max(clamp(10px, 4vw, 28px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(10px, 4vw, 28px), env(safe-area-inset-bottom, 0px));
  background: rgba(4, 8, 18, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: scFade 0.28s ease both;
}
.sc-overlay[hidden] { display: none !important; }
@keyframes scFade { from { opacity: 0; } to { opacity: 1; } }

.sc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vw, 20px);
  width: min(560px, 100%);
  /* Cap against the viewport, then let the body scroll rather than the page. */
  max-height: min(660px, calc(100dvh - clamp(20px, 8vw, 56px)));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 4.4vw, 32px);
  border: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
  border-radius: clamp(14px, 3vw, 20px);
  background:
    radial-gradient(circle at 88% -10%, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 52%),
    var(--bg-secondary);
  box-shadow: 0 26px 64px -18px rgba(0, 0, 0, 0.55);
  animation: scRise 0.36s cubic-bezier(0.2, 0.9, 0.25, 1.05) both;
}
@keyframes scRise { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }

.sc-close {
  position: absolute;
  top: clamp(10px, 2vw, 14px);
  right: clamp(10px, 2vw, 14px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-primary) 70%, transparent);
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sc-close:hover { background: var(--bg-primary); color: var(--text-primary); }

/* --- head --- */
.sc-head { display: grid; justify-items: center; gap: 7px; text-align: center; }

.sc-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(52px, 12vw, 62px);
  height: clamp(52px, 12vw, 62px);
  margin-bottom: 4px;
  border-radius: 20px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent-color) 92%, #fff 8%),
    color-mix(in srgb, var(--accent-color) 58%, #000 42%));
  color: #fff;
  font-size: clamp(21px, 5vw, 25px);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent-color) 85%, transparent);
}
.sc-mark i { line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.sc-mark-ring {
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 2px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
  animation: scRing 2.8s ease-out infinite;
}
@keyframes scRing {
  0% { opacity: 0.8; transform: scale(0.9); }
  70%, 100% { opacity: 0; transform: scale(1.22); }
}

.sc-kicker {
  color: var(--accent-color);
  font-size: clamp(9px, 2.2vw, 10px);
  font-weight: 900;
  letter-spacing: 0.18em;
}
#scTitle {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(18px, 4.6vw, 23px);
  font-weight: 800;
  line-height: 1.25;
}
#scLead {
  margin: 0;
  max-width: 42ch;
  color: var(--text-secondary, var(--text-muted));
  font-size: clamp(12px, 3vw, 13.5px);
  line-height: 1.6;
}

/* --- tiles --- */
.sc-grid {
  display: grid;
  /* auto-fit means one column on a phone and three on a desktop, decided by
     available width rather than a guessed breakpoint. */
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(8px, 2vw, 11px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-tile { display: flex; }
.sc-tile a {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  width: 100%;
  padding: clamp(13px, 3vw, 17px) clamp(9px, 2vw, 12px);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.sc-tile a:hover,
.sc-tile a:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
}
.sc-tile-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 3px;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
}
.sc-tile-icon i { line-height: 1; }
.sc-i1 { background: linear-gradient(140deg, #38bdf8, #0284c7); }
.sc-i2 { background: linear-gradient(140deg, #fb7185, #e11d48); }
.sc-i3 { background: linear-gradient(140deg, #a855f7, #7c3aed); }
.sc-tile strong { font-size: clamp(12px, 3vw, 13px); font-weight: 800; }
.sc-tile small {
  color: var(--text-muted);
  font-size: clamp(10px, 2.5vw, 11px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* --- tip --- */
.sc-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: clamp(10px, 2.4vw, 13px);
  border: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
  border-left: 3px solid var(--accent-color);
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-color) 7%, transparent);
  color: var(--text-secondary, var(--text-muted));
  font-size: clamp(11px, 2.8vw, 12.5px);
  line-height: 1.55;
}
.sc-tip > i { flex: 0 0 auto; margin-top: 1px; color: var(--accent-color); font-size: 13px; }
.sc-tip b { color: var(--text-primary); font-weight: 800; }

/* --- action --- */
.sc-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--accent-color) 94%, #fff 6%),
    color-mix(in srgb, var(--accent-color) 66%, #000 34%));
  color: #fff;
  font-size: clamp(11px, 2.8vw, 12.5px);
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent-color) 90%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.sc-start:hover { transform: translateY(-1px); filter: brightness(1.08); }
.sc-start:active { transform: translateY(0); }

/* Very short screens (landscape phones): drop the decorative ring and tighten. */
@media (max-height: 560px) {
  .sc-mark { width: 44px; height: 44px; font-size: 18px; }
  .sc-mark-ring { display: none; }
  .sc-card { gap: 11px; }
  #scLead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-overlay, .sc-card, .sc-mark-ring { animation: none !important; }
  .sc-tile a, .sc-start { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Preview back / forward
   Sits left of the address bar, the way a browser does. Inherits
   .preview-icon-button for colour and hover, and only adds the pairing,
   the disabled treatment and a tighter footprint on small screens.
   --------------------------------------------------------------------------- */
.preview-nav {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
}

.preview-nav-button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 12px;
}

/* Disabled must read as "nothing to go back to", not as a broken control, so
   it keeps its shape and loses only contrast. */
.preview-nav-button:disabled {
  opacity: 0.38;
  cursor: default;
  background: transparent;
  border-color: color-mix(in srgb, var(--border-color) 60%, transparent);
}
.preview-nav-button:disabled:hover {
  transform: none;
  background: transparent;
  color: var(--text-secondary);
}
.preview-nav-button:not(:disabled):active {
  transform: scale(0.92);
}

/* Node mode replaces the whole preview, so history controls make no sense. */
.preview.node-active .preview-nav {
  display: none !important;
}

@media (max-width: 760px) {
  .preview-nav { gap: 3px; }
  .preview-nav-button {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 11px;
  }
}

/* Reassigning srcdoc rebuilds the preview document, and for the moment before
   the new one paints the iframe shows its own background.

   This must be --preview-bg, not --bg-primary. --bg-primary is the editor's
   chrome colour and several themes tint it toward the accent (forest is a
   green-black, purple a violet-black), which bled that tint into the preview
   whenever it was empty — for example straight after pressing New. The preview
   represents a real webpage, so a blank one is white, exactly like every other
   preview surface here. */
#output {
  background: var(--preview-bg);
}


/* --- Audit fixes ---------------------------------------------------------- */

/* #collabBtn gets .has-unread-messages toggled whenever collaboration chat has
   unread items, but the class had no rule, so the toggle did nothing. The
   numeric badge already shows the count; this draws the eye to the button. */
#collabBtn.has-unread-messages {
  border-color: color-mix(in srgb, var(--accent-color) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 24%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  #collabBtn.has-unread-messages {
    animation: collabUnreadPulse 2.2s ease-in-out infinite;
  }
}
@keyframes collabUnreadPulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 24%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 10%, transparent); }
}

/* iOS zooms the whole page when a focused input is under 16px. The code editor
   is already handled in the 520px breakpoint; these are the modal and panel
   fields that were missed, which made every dialog jump on an iPhone. */
@media (max-width: 820px) {
  input[type="text"],
  input[type="search"],
  input[type="url"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  select,
  textarea:not(#activeEditor) {
    font-size: max(16px, 1em);
  }
}

/* ===========================================================================
   DEVELOPER TOOLS - diagnostics panel
   A docked panel rather than a modal: findings are meant to be read next to
   the code they refer to, and clicking one jumps the editor to that line, so
   covering the workspace would defeat the point.
   =========================================================================== */

.dev-panel {
  position: fixed;
  z-index: 11000;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /* 400px could not hold a long file path and a line number on one line, so
     findings wrapped awkwardly. 520px fits them and still leaves the editor
     usable on a laptop. */
  width: min(520px, 100vw);
  height: 100dvh;
  border-left: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: -18px 0 46px rgba(0, 0, 0, 0.28);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.25, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dev-panel[hidden] { display: none !important; }
.dev-panel.is-open { transform: translateX(0); }

.dev-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-color);
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}
.dev-panel-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.dev-panel-title > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
  font-size: 14px;
}
.dev-panel-title strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 800; }
.dev-panel-title small { display: block; margin-top: 1px; color: var(--text-muted); font-size: 11px; }

.dev-panel-actions { display: flex; gap: 6px; }
.dev-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dev-icon:hover { background: var(--bg-primary); color: var(--text-primary); }
.dev-icon-danger:hover { border-color: #ef4444; color: #ef4444; }

/* --- score --- */
.dev-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border-color);
}
.dev-score-ring {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  border: 3px solid var(--border-color);
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 800;
}
.dev-score-ring[data-band="good"] { border-color: #22c55e; color: #22c55e; }
.dev-score-ring[data-band="fair"] { border-color: #fbbf24; color: #fbbf24; }
.dev-score-ring[data-band="poor"] { border-color: #ef4444; color: #ef4444; }
.dev-score-copy { min-width: 0; }
.dev-score-copy strong { display: block; color: var(--text-primary); font-size: 13.5px; font-weight: 800; }
.dev-score-copy span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }

/* --- filters --- */
.dev-filters {
  display: flex;
  gap: 5px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}
.dev-filters::-webkit-scrollbar { display: none; }
.dev-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dev-filter em {
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  font-style: normal;
  font-size: 10px;
}
.dev-filter.is-active {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
}

/* --- findings --- */
.dev-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 16px;
  display: grid;
  gap: 9px;
  align-content: start;
}
.dev-empty {
  margin: 22px 0;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  line-height: 1.6;
}

.dev-card {
  padding: 12px 13px;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--text-muted);
  border-radius: 10px;
  background: var(--bg-primary);
}
.dev-card.is-error { border-left-color: #ef4444; }
.dev-card.is-warn { border-left-color: #fbbf24; }
.dev-card.is-info { border-left-color: #38bdf8; }

.dev-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dev-badge {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.dev-card.is-error .dev-badge { background: color-mix(in srgb, #ef4444 18%, transparent); color: #fca5a5; }
.dev-card.is-warn .dev-badge { background: color-mix(in srgb, #fbbf24 18%, transparent); color: #fcd34d; }
.dev-card.is-info .dev-badge { background: color-mix(in srgb, #38bdf8 18%, transparent); color: #7dd3fc; }
.dev-card-head strong { color: var(--text-primary); font-size: 12.5px; font-weight: 800; }

.dev-card-detail {
  margin: 7px 0 0;
  color: var(--text-secondary, var(--text-muted));
  font-size: 12px;
  line-height: 1.55;
}
.dev-card-fix {
  margin: 7px 0 0;
  padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.dev-jump {
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-tertiary);
  color: var(--accent-color);
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: left;
}
.dev-jump:hover { background: var(--bg-secondary); border-color: var(--accent-color); }

.dev-panel-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

/* Full screen wherever a drawer would leave both halves too narrow to use.
   Raised from 520px to 900px: at 520px it covered a phone held upright but not
   a phone turned sideways or a small tablet, where a 400px drawer over a 700px
   screen squeezes the panel AND the editor behind it. Findings carry a file
   name, a line number and an explanation, and none of that reads well in a
   strip. */
@media (max-width: 900px) {
  .dev-panel { width: 100vw; border-left: 0; }
}

@media (max-width: 520px) {
  .dev-score-ring { width: 50px; height: 50px; flex-basis: 50px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dev-panel { transition: none; }
}

/* ---------------------------------------------------------------------------
   Project Doctor issue badge
   One count, two homes. It sits in the corner of MORE while the menu is shut,
   and moves inline beside the Project Doctor entry once the menu is open,
   because at that point MORE is no longer the thing asking for attention.
   Only one is ever visible, so the number never appears twice at once.
   --------------------------------------------------------------------------- */
.issue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-family: var(--font-ui, inherit);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.issue-badge[hidden] { display: none !important; }
.issue-badge[data-tone="warn"] { background: #f59e0b; color: #1f1300; }

/* On MORE: pinned to the top-right corner, overlapping the edge slightly the
   way a notification count does. */
#headerMoreBtn { position: relative; overflow: visible; }
.issue-badge-corner {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--bg-secondary);
}

/* Top right corner of a menu row.

   .issue-badge-corner sits at -6px so it overhangs a standalone button. Inside
   the More panel that would push past the row and be clipped by the panel
   edge, so this variant tucks it just inside instead. The row needs
   position: relative for the badge to anchor to it rather than to the panel. */
.header-more-panel .header-more-action {
  position: relative;
}

.issue-badge-row-corner {
  position: absolute;
  top: 3px;
  right: 5px;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   Tutorial: the control card that replaced the animated demos

   The panel now shows the control the step is about - its own icon, its name
   and what it does - instead of a moving scene. Nothing here animates: the
   text is there to be read, and something moving beside it competes for
   attention exactly when it should not.
   --------------------------------------------------------------------------- */
.tutorial-control-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 4px 2px;
  text-align: left;
}

/* Same square the real buttons use, so the icon is recognisable as the thing
   being pointed at rather than as decoration. */
.tutorial-control-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
  font-size: 17px;
}

.tutorial-control-text {
  display: block;
  min-width: 0;
}

.tutorial-control-text strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 800;
}

.tutorial-control-text small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* The pulsing dot and the replay button both belonged to the animation. There
   is nothing to replay now, and nothing is live. */
.tutorial-live-demo .tutorial-live-dot,
.tutorial-live-demo .tutorial-demo-replay,
.tutorial-live-demo .tutorial-demo-result,
.tutorial-live-demo .tutorial-demo-timeline {
  display: none;
}

.tutorial-live-demo .tutorial-demo-stage {
  min-height: 0;
  padding: 0;
}

@media (max-width: 520px) {
  .tutorial-control-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
  .tutorial-control-text small { font-size: 11.5px; }
}

/* Menu labels show in full.

   The rows above cut a label with an ellipsis when it does not fit, which is a
   sensible guard but was firing on "PROJECT DOCTOR" and shortening it to
   "PROJECT DOC...". There is room for it: the menu is 320px wide and the label
   needs about 92px. These rules let the label take that room and, if a longer
   one is ever added, wrap onto a second line instead of being cut - a wrapped
   label is still readable, a truncated one is not.

   Written after the mobile block further down so it wins there too, and it
   carries the same two selectors so specificity matches rather than relying on
   !important. */
.header-more-panel .run-button strong,
.header-more-panel .header-more-action strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}

/* No padding reserved for the badge on purpose. The menu is 320px wide and its
   labels are cut with an ellipsis when they do not fit, so stealing 20px turned
   "PROJECT DOCTOR" into "PROJECT DOC...". The badge is absolutely positioned,
   so it takes no room in the row, and the label is left aligned and short
   enough that it never reaches the corner the badge sits in. */

@media (max-width: 520px) {
  .issue-badge-row-corner { top: 2px; right: 4px; }
}

/* In the menu: part of the row, pushed to the far end. */
.issue-badge-inline { margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  .issue-badge-corner { animation: issueBadgePop 0.32s cubic-bezier(0.2, 0.9, 0.25, 1.4) both; }
}
@keyframes issueBadgePop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  .issue-badge { min-width: 15px; height: 15px; font-size: 9px; }
  .issue-badge-corner { top: -5px; right: -5px; }
}

/* ===========================================================================
   PUBLISH HISTORY
   A dated timeline of every stored version of a published link, newest first,
   with the live version pinned at the top. Each entry expands to show what
   that update changed and a preview of the page as it stood, and any entry can
   be restored - not only the one immediately before the current version.
   =========================================================================== */

/* #appDialogMessage carries an inline `white-space: pre-wrap`, meant for plain
   sentences. The markup below is written across many indented lines, so every
   newline and indent was being rendered as real blank space, pushing the
   header, timeline and footnote apart. The GitHub picker opts out of pre-wrap
   for the same reason; this does it for the timeline. */
#appDialog[data-dialog-kind="published-timeline"] #appDialogMessage {
  white-space: normal !important;
}

/* The default dialog card is 500px, sized for a question and two buttons. This
   card holds a three-part header (icon, two lines of copy, an "Open link"
   button) and opens preview frames inside each entry, all of which crowd at
   that width. The other rich dialogs are widened to 660-680px already. */
#appDialog[data-dialog-kind="published-timeline"] > div {
  width: min(680px, 94vw) !important;
}

.ph-wrap { display: grid; gap: 16px; text-align: left; }

.ph-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
}
.ph-head-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
  font-size: 16px;
}
.ph-head-copy { flex: 1; min-width: 0; }
.ph-head-copy strong { display: block; color: var(--text-primary); font-size: 14px; font-weight: 800; }
.ph-head-copy small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11.5px; }
.ph-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ph-open:hover { background: var(--bg-primary); }

/* ---------------------------------------------------------------------------
   Touch sizing for the Open link bar

   Computed from its own rules the button is 29px tall with 11px text - fine
   with a mouse, too small with a thumb. Apple asks for 44px, Google for 48px.
   That is what "not compatible on all devices" looks like on a phone: the bar
   renders correctly and is simply hard to hit.

   pointer: coarse matches a finger rather than a screen width, so a touch
   laptop and a tablet in a wide window get the bigger target too, and a small
   desktop window does not get needlessly inflated.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .ph-open {
    min-height: 46px;
    padding: 11px 16px;
    font-size: 12.5px;
    border-radius: 10px;
  }

  /* Restore sits in the same card and is the more destructive of the two, so
     it should not be the harder one to hit. */
  .ph-restore {
    min-height: 46px;
    padding: 11px 16px;
  }

  /* The whole entry row opens a version, so the row itself is the target. */
  .ph-entry-head {
    min-height: 46px;
  }
}

/* --- timeline --- */
.ph-timeline {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 6px;
  list-style: none;
}
/* The rail runs behind the dots and stops at the last entry rather than
   trailing off past it. */
.ph-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 13px;
  width: 2px;
  background: var(--border-color);
}

/* ---------------------------------------------------------------------------
   Publish history header - fits at any width

   The bar holds a project name the person typed, so it can be long and have no
   spaces to break at, and an "Open link" button that must not be cut in half.
   The old rules only wrapped below a 560px VIEWPORT, but the card itself is
   680px wide, so between roughly 560px and 760px the bar was still trying to
   fit everything on one row and pushing past the card edge.

   Wrapping is decided by the space available rather than by a breakpoint:
   flex-basis gives the text a width it wants, and it drops to its own row the
   moment that will not fit. That works in the dialog, in a split screen and on
   a landscape phone without any of them being measured.
   --------------------------------------------------------------------------- */
.ph-head {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* 190px is about the narrowest the name and date stay readable at. Below that
   the text takes the full row and the button moves under it. */
.ph-head-copy {
  flex: 1 1 190px;
  min-width: 0;
}

/* A pasted name like "my-really-long-project-name-v2-final" has no space to
   break at, so anywhere is the only value that will break it. Without this one
   long word makes the whole dialog scroll sideways. */
.ph-head-copy strong,
.ph-head-copy small {
  overflow-wrap: anywhere;
}

/* The button keeps its label on one line - "Open" above "link" looks broken -
   and is allowed to shrink no further than its text. */
.ph-open {
  white-space: nowrap;
  flex: 0 1 auto;
}

/* Very narrow: the icon is decoration, the row is tight, so the text gets the
   whole width and the button spans it underneath. */
@media (max-width: 420px) {
  .ph-head { padding: 12px; gap: 10px; }
  .ph-head-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .ph-head-copy { flex: 1 1 100%; }
  .ph-open { width: 100%; justify-content: center; }
}

/* Short landscape phones: a fixed 210px preview leaves almost nothing for the
   list above it, so it is capped against the visible height instead. */
@media (max-height: 520px) and (orientation: landscape) {
  .ph-entry-preview { height: min(210px, 40dvh); }
}

.ph-entry {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
  overflow: hidden;
}
.ph-entry.is-current { border-color: color-mix(in srgb, var(--accent-color) 55%, transparent); }
.ph-entry.is-open { border-color: color-mix(in srgb, var(--accent-color) 45%, transparent); }

.ph-entry-head {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ph-entry-head[aria-disabled="true"] { cursor: default; }
.ph-entry-head:hover:not([aria-disabled="true"]) { background: var(--bg-tertiary); }

.ph-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: var(--bg-secondary);
  box-shadow: 0 0 0 2px var(--border-color);
}
.ph-dot.is-live {
  background: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.ph-entry-copy { flex: 1; min-width: 0; }
.ph-entry-copy strong {
  display: block;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 800;
}
.ph-entry-copy small {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.ph-entry-chevron { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; transition: transform 0.18s ease; }
.ph-entry.is-open .ph-entry-chevron { transform: rotate(180deg); }

.ph-entry-body {
  display: grid;
  gap: 11px;
  padding: 0 13px 13px 35px;
}
.ph-entry-body[hidden] { display: none; }

.ph-entry-files { display: grid; gap: 7px; }
.published-history-file-group {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  font-size: 11px;
}
.published-history-file-group > span { display: flex; align-items: center; gap: 7px; color: var(--text-secondary, var(--text-muted)); font-weight: 700; }
.published-history-file-group b { margin-left: auto; color: var(--text-muted); }
.published-history-file-group.is-modified > span i { color: #f59e0b; }
.published-history-file-group.is-added > span i { color: #22c55e; }
.published-history-file-group.is-removed > span i { color: #ef4444; }
.published-history-file-group ul { margin: 0; padding-left: 20px; color: var(--text-muted); }
.published-history-file-group li { font-family: var(--font-code); font-size: 10.5px; overflow-wrap: anywhere; }
.published-history-file-group small { color: var(--text-muted); font-style: italic; }

.ph-entry-preview {
  width: 100%;
  height: 210px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: #fff;
}

.ph-restore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  justify-self: start;
  padding: 9px 15px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 62%, #000));
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.ph-restore:hover { filter: brightness(1.1); }

.ph-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.55;
}
.ph-note i { margin-top: 2px; color: var(--accent-color); }

/* --- confirm / result / empty states reused by the restore flow --- */
.published-history-confirm,
.published-history-restored,
.published-history-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.published-history-confirm > i,
.published-history-restored > i,
.published-history-empty > i { margin-top: 2px; font-size: 20px; }
.published-history-confirm > i { color: #f59e0b; }
.published-history-restored > i { color: #22c55e; }
.published-history-empty > i { color: var(--text-muted); }
.published-history-confirm strong,
.published-history-restored strong,
.published-history-empty strong { display: block; color: var(--text-primary); font-size: 13.5px; }
.published-history-confirm small,
.published-history-empty small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 11.5px; line-height: 1.55; }
.published-history-restored a { display: inline-block; margin-top: 6px; color: var(--accent-color); font-size: 12px; font-weight: 700; }

@media (max-width: 560px) {
  .ph-head { flex-wrap: wrap; }
  .ph-open { width: 100%; justify-content: center; }
  .ph-entry-body { padding-left: 13px; }
  .ph-entry-preview { height: 170px; }
  .ph-restore { width: 100%; }
}

/* --------------------------------------------------------------------------
   Editor ad bar
   flex: 0 0 auto on the slot is essential - without it the 728px creative is
   squeezed by its neighbours and renders clipped. The label and close button
   are absolutely positioned so they take no width from the creative.
   -------------------------------------------------------------------------- */
.editor-ad-bar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  min-height: 58px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

@media (min-width: 768px) {
  .editor-ad-bar { min-height: 98px; }
}

.editor-ad-slot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.editor-ad-label {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary);
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

/* Deliberately loud: a dismiss control nobody can find is worse than none. */
.editor-ad-hide {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  color: #fff;
  background: var(--accent-color);
  border: 2px solid var(--bg-secondary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.editor-ad-hide:hover { background: var(--accent-hover); transform: translateY(-50%) scale(1.1); }
.editor-ad-hide:active { transform: translateY(-50%) scale(0.92); }
.editor-ad-hide:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

body.ads-hidden .editor-ad-bar,
body.zen-mode .editor-ad-bar,
body.preview-faux-fullscreen .editor-ad-bar { display: none; }

/* ===========================================================================
   Modal text weight

   Every modal card carries a heavier minimum weight. Set on the containers so
   it is inherited, rather than forced onto each element: anything that already
   declares its own weight - headings, labels, buttons, the 146 rules that set
   700 and above - keeps it, so the difference between a heading and its
   description survives. Only text that had no weight of its own is lifted.

   Code samples are deliberately excluded. A monospace font at 600 loses the
   even spacing that makes code readable, and the syntax colours already do the
   work of separating one token from another.
   =========================================================================== */
#appDialog,
#collabModal,
#settingsModal,
#projectLibraryModal,
#fontPickerModal,
#fontAwesomeIconModal,
#githubRepoModal,
#previewZoomModal,
#projectSearchModal,
#settingsColorPickerModal,
#tutorialModal,
#tutorialCard,
#announcementPopup,
#modalBody,
.dev-panel {
  font-weight: 600;
}

/* Descendants that set their own lighter weight, or none at all, are lifted to
   match. Written with the modal id so it outranks a plain class rule. */
#appDialog :is(p, small, span, li, td, th, label, div),
#collabModal :is(p, small, span, li, td, th, label, div),
#settingsModal :is(p, small, span, li, td, th, label, div),
#projectLibraryModal :is(p, small, span, li, td, th, label, div),
#fontPickerModal :is(p, small, span, li, td, th, label, div),
#githubRepoModal :is(p, small, span, li, td, th, label, div),
#tutorialCard :is(p, small, span, li, td, th, label, div),
#announcementPopup :is(p, small, span, li, td, th, label, div),
#modalBody :is(p, small, span, li, td, th, label, div),
.dev-panel :is(p, small, span, li, td, th, label) {
  font-weight: 600;
}

/* Anything already bolder stays bolder, so the hierarchy is not flattened. */
#appDialog :is(strong, b, h1, h2, h3, h4, button),
#collabModal :is(strong, b, h1, h2, h3, h4, button),
#settingsModal :is(strong, b, h1, h2, h3, h4, button),
#projectLibraryModal :is(strong, b, h1, h2, h3, h4, button),
#tutorialCard :is(strong, b, h1, h2, h3, h4, button),
#modalBody :is(strong, b, h1, h2, h3, h4, button),
.dev-panel :is(strong, b, h1, h2, h3, h4, button) {
  font-weight: 800;
}

/* Code keeps its normal weight - see the note above. */
#appDialog :is(code, pre, kbd, textarea, .token),
#collabModal :is(code, pre, kbd, textarea, .token),
#settingsModal :is(code, pre, kbd, textarea, .token),
#modalBody :is(code, pre, kbd, textarea, .token),
#tutorialCard :is(code, pre, kbd),
.dev-panel :is(code, pre, kbd, .token) {
  font-weight: inherit;
}

/* ===========================================================================
   Tutorial: nothing moves

   The animated demos and the pointer that travelled to each button are gone
   from the markup, but the rules that drove them are still in this file. This
   switches every one of them off at the source, so nothing can start again if
   a class is set somewhere that was missed - and so the panel cannot flicker
   between a step opening and the new content being written into it.

   Written last so it wins on order against the rules above without needing to
   edit or delete any of them.
   =========================================================================== */
.tutorial-live-demo,
.tutorial-live-demo *,
.tutorial-tool-pointer,
.tutorial-tool-pointer * {
  animation: none !important;
}

/* The pointer, the pulsing live dot, the sweep across the panel, the timeline
   bar and the replay button all belonged to the animation. */
.tutorial-tool-pointer,
.tutorial-live-dot,
.tutorial-demo-sweep,
.tutorial-demo-timeline,
.tutorial-demo-replay,
.tutorial-demo-progress {
  display: none !important;
}

/* ===========================================================================
   Publish and Device Transfer cards match the session cards

   Both were painted with solid colour fills - green, blue and purple - while
   Create Session and Join Session sit on the plain panel background with a
   thin border. Three dialogs that do the same job should not look like three
   different products.

   These rules undo the fills and hand the cards back to .collab-choice-card,
   which they already extend. Written last so it wins on order, and the colour
   variables above are left in place so a fill is one deletion away if it is
   ever wanted again.
   =========================================================================== */
.publish-choice-card,
.device-transfer-choice-card,
.device-transfer-choice-card:nth-child(2),
.device-transfer-choice-card.device-transfer-scan-card {
  color: var(--text-primary);
  border-color: var(--border-color);
  /* Same subtle accent wash the session cards use, not a solid fill. */
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 62%),
    var(--bg-primary);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* The icon squares were white-on-colour; on a plain card they take the accent
   colour instead, exactly as the session cards do. */
.publish-choice-card i,
.device-transfer-choice-card i {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
}

/* Hover lifts the border rather than changing the fill. */
.publish-choice-card:hover,
.device-transfer-choice-card:hover {
  color: var(--text-primary);
  border-color: var(--accent-color);
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 62%),
    var(--bg-primary);
}

/* Supporting text uses --text-primary, not --text-muted.

   --text-primary is #e6edf3 on the dark themes - near enough white - and
   #24292f on Daylight. A literal white would be correct on dark and invisible
   on Daylight, so the variable is used instead: it is white where white is
   right, and dark where the background is light. */
.publish-choice-card small,
.publish-choice-card span,
.device-transfer-choice-card small,
.device-transfer-choice-card span {
  color: var(--text-primary);
}

.publish-choice-card strong,
.device-transfer-choice-card strong {
  color: var(--text-primary);
}

/* ===========================================================================
   Cursor picker with 24 choices

   At three fixed columns, 24 options are eight rows - twelve on a phone at two
   columns - which pushed the name and colour fields off the screen. The grid
   is given its own scroll and fits as many columns as the width allows, so the
   form around it stays visible and the choices are still one flick away.
   =========================================================================== */
.collab-cursor-choice-grid {
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  max-height: 208px;
  overflow-y: auto;
  padding-right: 4px;
  /* Stops a flick inside the grid from scrolling the dialog behind it. */
  overscroll-behavior: contain;
}

@media (max-width: 520px) {
  .collab-cursor-choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    max-height: 176px;
  }
}

/* ===========================================================================
   Publish history: Open link button sits at its natural width

   Two earlier rules stretched it across the whole row below 560px, so on a
   phone a short "Open link" label sat in a button several times wider than its
   text. It only ever needed to stop overlapping the project name, and the row
   already wraps for that.

   Written last so it wins over both without editing them.
   =========================================================================== */
.ph-open,
.ph-head .ph-open {
  width: auto;
  max-width: max-content;
  /* Centred in the row, not pinned to the top. flex-start left it sitting
     above the project name instead of level with it. */
  align-self: center;
  flex: 0 0 auto;
  padding: 8px 14px;
  justify-content: center;
  /* Pulls the button to the right edge of the header, so it lines up with the
     card rather than floating a gap short of it. */
  margin-left: auto;
}

/* Restore is the action that changes something, so it keeps the full width it
   has - only the link button is narrowed. */
@media (max-width: 420px) {
  .ph-open { padding: 9px 13px; }
}

/* The close cross sat 13px in from the corner while the cards inside the
   dialog stop at the card padding, which made it read as floating rather than
   tucked into the corner. 10px brings it in without crowding the edge, and the
   title keeps its clearance so a long one cannot run underneath. */
.modal-card-close-absolute {
  top: 10px !important;
  right: 10px !important;
}

/* ===========================================================================
   Published link dialog: the warning and the button row
   =========================================================================== */

/* The verification key is shown once and can never be recovered, so the notice
   about saving it has to look like a warning rather than a footnote. It was
   12px muted grey, the same weight as ordinary help text, and easy to skip
   past on the way to the Done button. */
.publish-key-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--error-color, #cf222e);
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--error-color, #cf222e) 10%, transparent);
  color: var(--error-color, #cf222e);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.publish-key-warning i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 15px;
}

.publish-key-warning strong { font-weight: 800; }

/* Copy link, Copy key and Done on one line. The shared actions row wraps by
   default, which is right for two long buttons but put Done on its own line
   here. nowrap keeps them together and each button shares the width evenly. */
#appDialogActions.publish-actions-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: stretch;
}

#appDialogActions.publish-actions-row .run-button {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}

/* Narrow phones: the icons carry the meaning and the labels would otherwise
   force the row to wrap after all. */
@media (max-width: 420px) {
  #appDialogActions.publish-actions-row .run-button { font-size: 11px; gap: 5px; }
  #appDialogActions.publish-actions-row .run-button strong { font-size: 11px; }
}

/* ===========================================================================
   Preview device sizes

   The Responsive badge is gone from the header - it only ever stated the
   default, taking space on a panel header that is tight on a phone. The
   button below replaces it: its icon turns the accent colour when a device
   size is active, and its tooltip carries the exact dimensions.
   =========================================================================== */
#previewDeviceBtn.is-active {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
}

.preview-device-menu {
  position: fixed;
  z-index: 12000;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

.preview-device-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  /* 44px so it is comfortable with a thumb, not just a mouse. */
  min-height: 44px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.preview-device-option:hover { background: var(--bg-tertiary); }

.preview-device-option.is-current {
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
}

.preview-device-option > i:first-child {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 14px;
}

.preview-device-option span {
  flex: 1 1 auto;
  min-width: 0;
}

.preview-device-option strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
}

.preview-device-option small {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 11px;
}

.preview-device-option.is-current small { color: inherit; opacity: 0.8; }

/* Separated, because it changes the current size rather than choosing one. */
.preview-device-rotate {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
}

/* ===========================================================================
   Manage session: hierarchy

   Everything in this card sat at roughly the same visual weight - section
   cards, meta boxes, participant rows and control buttons all used the same
   border, the same radius and a similar background. On a phone that reads as
   one long undifferentiated list, and the eye has nothing to anchor to.

   These rules do not move anything. They change weight: headings get a marker
   and more space above them, the session facts sit on a quieter surface than
   the things you can act on, participant rows lift on hover, and the row you
   are in is marked. Written last so it wins on order.
   =========================================================================== */

/* --- Section headings ---------------------------------------------------- */
/* A short accent bar makes each heading a landmark you can scroll to, instead
   of a slightly bolder line of text. */
#collabModal .collab-section-title,
#modalBody .collab-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#collabModal .collab-section-title::before,
#modalBody .collab-section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent-color);
}

/* --- Section cards ------------------------------------------------------- */
#collabModal .collab-section-card,
#modalBody .collab-section-card {
  margin: 0 0 16px;
  padding: 15px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-tertiary) 45%, transparent);
}

#collabModal .collab-section-card:last-child,
#modalBody .collab-section-card:last-child { margin-bottom: 0; }

/* --- Session facts ------------------------------------------------------- */
/* These are read, not pressed, so they sit flatter than anything clickable -
   no border, a quieter surface, and the label smaller than the value. */
#collabModal .collab-meta-item,
#modalBody .collab-meta-item {
  padding: 11px 12px;
  border: none;
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
}

#collabModal .collab-meta-label,
#modalBody .collab-meta-label {
  margin-bottom: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

#collabModal .collab-meta-value,
#modalBody .collab-meta-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* --- Group controls ------------------------------------------------------ */
/* Pressable, so these lift off the surface rather than sinking into it. */
#collabModal .collab-control-btn,
#modalBody .collab-control-btn {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
  background: var(--bg-primary);
  transition: border-color 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
}

#collabModal .collab-control-btn:hover,
#modalBody .collab-control-btn:hover {
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

#collabModal .collab-control-btn:active,
#modalBody .collab-control-btn:active { transform: translateY(0); }

#collabModal .collab-control-title,
#modalBody .collab-control-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-primary);
}

#collabModal .collab-control-desc,
#modalBody .collab-control-desc {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* --- Participants -------------------------------------------------------- */
#collabModal .collab-participant-row,
#modalBody .collab-participant-row {
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
  background: var(--bg-primary);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

#collabModal .collab-participant-row:hover,
#modalBody .collab-participant-row:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
}

/* Your own row, marked so you can find yourself in a room of twenty. */
#collabModal .collab-participant-row.is-me,
#modalBody .collab-participant-row.is-me {
  border-color: color-mix(in srgb, var(--accent-color) 60%, var(--border-color));
  background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-primary));
}

#collabModal .collab-participant-name,
#modalBody .collab-participant-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
}

#collabModal .collab-participant-meta,
#modalBody .collab-participant-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Actions wrap under the name on a narrow phone instead of squeezing it. */
#collabModal .collab-participant-row-actions,
#modalBody .collab-participant-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  #collabModal .collab-participant-row,
  #modalBody .collab-participant-row {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  #collabModal .collab-participant-row-actions,
  #modalBody .collab-participant-row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* --- Role pills ---------------------------------------------------------- */
/* Host, co-host and participant were the same grey. Colour makes the roles
   scannable, which matters most on the screen where you change them. */
#collabModal .collab-pill,
#modalBody .collab-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#collabModal .collab-pill[data-role="host"],
#modalBody .collab-pill[data-role="host"] {
  background: color-mix(in srgb, var(--accent-color) 20%, transparent);
  color: var(--accent-color);
}

#collabModal .collab-pill[data-role="co-host"],
#modalBody .collab-pill[data-role="co-host"] {
  background: color-mix(in srgb, #3b82f6 20%, transparent);
  color: #60a5fa;
}

/* ===========================================================================
   Manage session: control buttons and participant rows

   The controls were solid dark gradients with white text forced on - twelve of
   them, each a different deep colour, stacked in one panel. Any one looks
   fine; together they read as a wall of heavy blocks, and the dark fills fight
   whichever workspace theme is on.

   They become light cards instead: panel background, thin border, and the
   colour moved into the icon square where it still tells the controls apart at
   a glance. The tone variables above are untouched, so each control keeps its
   own colour - it is only where that colour is applied that changes.
   =========================================================================== */
.collab-control-btn {
  border: 1px solid var(--border-color) !important;
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.collab-control-btn:hover {
  border-color: var(--collab-control-tone) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--collab-control-tone) 18%, transparent) !important;
}

/* The icon carries the colour now. A tinted square rather than a full fill,
   so twelve of them together stay calm. */
.collab-control-btn > i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--collab-control-tone) 15%, transparent);
  color: var(--collab-control-tone);
  font-size: 15px;
}

.collab-control-title {
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.collab-control-desc {
  color: var(--text-muted);
  font-weight: 600;
}

/* An active control is filled, so what is switched on is obvious at a glance -
   the one place a solid colour earns its place. */
.collab-control-btn.is-active {
  border-color: var(--collab-control-tone) !important;
  background: color-mix(in srgb, var(--collab-control-tone) 12%, var(--bg-primary)) !important;
}

.collab-control-btn.is-active > i {
  background: var(--collab-control-tone);
  color: #ffffff;
}

.collab-control-btn.is-active .collab-control-title { color: var(--collab-control-tone); }

/* --- participant rows --- */
.collab-participant-row {
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
  transition: border-color 0.16s ease;
}

.collab-participant-row:hover { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)); }

/* Row buttons were full-strength solid colours competing with the person's own
   colour dot. Outlined instead, so the dot stays the loudest thing in the row. */
.collab-participant-row-actions .run-button {
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 800;
}

.collab-participant-row-actions .run-button:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* Except the two that change someone's standing, which stay coloured because
   they deserve a moment's thought before tapping. */
.collab-participant-row-actions .participant-role-btn:hover {
  border-color: #7c3aed;
  color: #7c3aed;
}

.collab-participant-row-actions .participant-more-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* --- manage session: the panel around the controls --------------------- */

/* Section headings were the same weight as the controls beneath them, so the
   panel read as one long list. A rule beside the label separates the groups
   without adding another box. */
#collabModal .collab-section-title,
#modalBody .collab-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#collabModal .collab-section-title::after,
#modalBody .collab-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-color);
}

#collabModal .collab-section-note,
#modalBody .collab-section-note {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Two columns where there is room, so twelve controls are not one long scroll
   on a laptop. auto-fill rather than a fixed count, so it collapses on a phone
   without a breakpoint. */
.collab-control-grid,
.collab-group-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px;
}

/* The participant list gets its own scroll so the controls above stay reachable
   in a busy room rather than being pushed off the top. */
.collab-participant-list {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

@media (max-width: 520px) {
  .collab-control-btn { min-height: 68px; }
  .collab-control-btn > i { width: 34px; height: 34px; font-size: 14px; }
  .collab-participant-list { max-height: 260px; }
}

/* Participant row buttons stay inside the row.

   The row is a flex line: colour dot, name, then the actions. With MAKE
   CO-HOST, RENAME and MORE all present, the labels were wide enough to push
   the last one past the border. The actions block may now shrink, the labels
   are hidden on narrow screens so the icons carry the meaning, and the row
   wraps rather than overflowing. */
.collab-participant-row-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.collab-participant-row-actions .run-button {
  min-width: 0;
  padding: 5px 9px;
  font-size: 10.5px;
  white-space: nowrap;
}

.collab-participant-row-actions .run-button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RENAME sits between MAKE CO-HOST and MORE, whose labels change length as
   roles change. Sized by its own text it made the row jump about and ran long
   next to the short MORE. A fixed width keeps it the same size in every row. */
.collab-participant-row-actions .participant-rename-btn {
  flex: 0 0 auto;
  width: 96px;
  justify-content: center;
}

/* Below 560px the icons alone are enough, and it is the only way three
   buttons fit beside a name on a phone. */
@media (max-width: 560px) {
  .collab-participant-row-actions .run-button strong { display: none; }
  .collab-participant-row-actions .run-button {
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
    padding: 6px;
  }
  /* The label is hidden here, so the fixed width above would leave a wide
     button around a single icon. */
  .collab-participant-row-actions .participant-rename-btn { width: 38px; }
}

/* ===========================================================================
   Group Controls and Participant Info: colourful control cards

   These were flat panel-coloured cards with only a small tinted icon square,
   so on a dark theme a whole grid of them read as grey blocks. Each control
   already carries its own tone, so the tone is put back on the card itself:
   a lit gradient, a soft gloss at the top corner, a frosted icon tile and a
   shine that sweeps across on hover.

   The tone variables further up are untouched. Only where the colour lands
   changes, so every control keeps the exact colour it already had.
   =========================================================================== */
.collab-control-btn,
#collabModal .collab-control-btn,
#modalBody .collab-control-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--collab-control-tone) 45%, #ffffff 30%) !important;
  background:
    linear-gradient(
      148deg,
      color-mix(in srgb, var(--collab-control-tone) 88%, #ffffff 12%) 0%,
      var(--collab-control-tone) 45%,
      var(--collab-control-deep) 100%
    ) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--collab-control-deep) 40%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent) !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease;
}

/* Gloss. A soft light in the top-left corner so the card reads as a lit
   surface rather than a printed rectangle. */
.collab-control-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    130% 85% at 10% -15%,
    color-mix(in srgb, #ffffff 34%, transparent) 0%,
    transparent 62%
  );
}

/* Shine. A narrow band of light that crosses the card on hover. */
.collab-control-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  width: 45%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: rotate(18deg) translateX(0);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #ffffff 30%, transparent) 50%,
    transparent 100%
  );
  transition: transform 0.7s ease, opacity 0.25s ease;
}

.collab-control-btn:hover::after {
  opacity: 1;
  transform: rotate(18deg) translateX(340%);
}

/* The icon and the words sit above the gloss and the shine. */
.collab-control-btn > i,
.collab-control-btn .collab-control-text {
  position: relative;
  z-index: 1;
}

/* Frosted tile for the icon, so it still separates from the card now that the
   card is coloured too. */
.collab-control-btn > i,
#collabModal .collab-control-btn > i,
#modalBody .collab-control-btn > i {
  border: 1px solid color-mix(in srgb, #ffffff 42%, transparent);
  background: color-mix(in srgb, #ffffff 22%, transparent);
  color: #ffffff;
  box-shadow:
    0 6px 14px color-mix(in srgb, var(--collab-control-deep) 45%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
}

.collab-control-title,
#collabModal .collab-control-title,
#modalBody .collab-control-title {
  color: #ffffff !important;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--collab-control-deep) 55%, transparent);
}

.collab-control-desc,
#collabModal .collab-control-desc,
#modalBody .collab-control-desc {
  color: color-mix(in srgb, #ffffff 80%, transparent) !important;
}

.collab-control-btn:hover,
#collabModal .collab-control-btn:hover,
#modalBody .collab-control-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06) saturate(1.06);
  border-color: color-mix(in srgb, #ffffff 48%, var(--collab-control-tone)) !important;
  box-shadow:
    0 16px 32px color-mix(in srgb, var(--collab-control-deep) 50%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 42%, transparent) !important;
}

.collab-control-btn:active,
#collabModal .collab-control-btn:active,
#modalBody .collab-control-btn:active {
  transform: translateY(0);
}

/* Switched on: brighter card, a halo ring, and the icon tile flips to solid
   white so an active control is obvious across a full grid. */
.collab-control-btn.is-active,
#collabModal .collab-control-btn.is-active,
#modalBody .collab-control-btn.is-active {
  outline: none;
  outline-offset: 0;
  border-color: color-mix(in srgb, #ffffff 65%, var(--collab-control-tone)) !important;
  background:
    linear-gradient(
      148deg,
      color-mix(in srgb, var(--collab-control-tone) 66%, #ffffff 34%) 0%,
      var(--collab-control-tone) 52%,
      var(--collab-control-deep) 100%
    ) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--collab-control-tone) 34%, transparent),
    0 14px 30px color-mix(in srgb, var(--collab-control-deep) 52%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 46%, transparent) !important;
}

.collab-control-btn.is-active > i,
#collabModal .collab-control-btn.is-active > i,
#modalBody .collab-control-btn.is-active > i {
  border-color: transparent;
  background: #ffffff;
  color: var(--collab-control-deep);
}

.collab-control-btn.is-active .collab-control-title,
#collabModal .collab-control-btn.is-active .collab-control-title,
#modalBody .collab-control-btn.is-active .collab-control-title {
  color: #ffffff !important;
}

/* The shine is decoration, so it is dropped when motion is turned down. */
@media (prefers-reduced-motion: reduce) {
  .collab-control-btn::after,
  .collab-control-btn:hover::after {
    transition: none;
    opacity: 0;
    transform: rotate(18deg);
  }
}

/* ===========================================================================
   Buttons, icons and the code editor: a livelier finish

   The controls were flat accent rectangles and the editor was a plain box on
   a plain background. Everything here is surface treatment only - no size,
   spacing or layout property is touched, so nothing moves on the page.

   Collaboration control cards are excluded throughout. They have their own
   colour treatment further up and would otherwise be overwritten by these
   rules, which come later in the file.
   =========================================================================== */

/* --- buttons ------------------------------------------------------------- */
.run-button:not(.collab-control-btn) {
  position: relative;
  isolation: isolate;
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease,
    border-color 0.22s ease;
}

/* Gloss. A soft light across the top so the button reads as a raised, lit
   surface. Painted behind the label, never clipped, so the unread-message
   badge that hangs off the corner still shows. */
.run-button:not(.collab-control-btn)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffffff 28%, transparent) 0%,
    color-mix(in srgb, #ffffff 6%, transparent) 46%,
    transparent 100%
  );
  opacity: 0.9;
  transition: opacity 0.22s ease;
}

.run-button:not(.collab-control-btn):hover {
  transform: translateY(-1.5px);
  filter: saturate(1.08) brightness(1.04);
  border-color: color-mix(in srgb, #ffffff 34%, var(--accent-color));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 24px color-mix(in srgb, var(--accent-color) 34%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.22);
}

.run-button:not(.collab-control-btn):hover::before { opacity: 1; }

/* A real press: the button sinks and the gloss dims, the way a physical key
   goes dark as it goes down. */
.run-button:not(.collab-control-btn):active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.26),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

.run-button:not(.collab-control-btn):active::before { opacity: 0.45; }

.run-button:not(.collab-control-btn):focus-visible {
  outline: 2px solid color-mix(in srgb, #ffffff 70%, var(--accent-color));
  outline-offset: 2px;
}

.run-button:disabled,
.run-button:disabled:hover {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* --- icons inside buttons ------------------------------------------------ */
/* Font Awesome glyphs and the inline SVGs are treated as one, so a button
   does not behave differently depending on which kind of icon it holds. */
.run-button i,
.run-button .btn-icon,
.file-item button i,
.preview-icon-button i,
.editor-value-icon-button i,
.github-icon-button i {
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.2s ease,
    color 0.2s ease;
}

.run-button:not(.collab-control-btn):hover i,
.run-button:not(.collab-control-btn):hover .btn-icon {
  transform: scale(1.14);
  filter: drop-shadow(0 0 7px color-mix(in srgb, #ffffff 62%, transparent));
}

.run-button:not(.collab-control-btn):active i,
.run-button:not(.collab-control-btn):active .btn-icon {
  transform: scale(0.94);
}

/* Small icon-only buttons get the same life: a tinted pad appears under the
   glyph on hover rather than the icon simply changing colour. */
.file-item button,
.preview-icon-button,
.editor-value-icon-button,
.github-icon-button {
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.preview-icon-button:hover i,
.editor-value-icon-button:hover i,
.github-icon-button:hover i,
.file-item button:hover i {
  transform: scale(1.16) rotate(-3deg);
}

/* Actions that mean "again" turn, because that is what the glyph draws. */
.run-button:not(.collab-control-btn):hover i.fa-rotate,
.run-button:not(.collab-control-btn):hover i.fa-rotate-right,
.run-button:not(.collab-control-btn):hover i.fa-arrows-rotate,
.run-button:not(.collab-control-btn):hover i.fa-refresh {
  transform: scale(1.14) rotate(150deg);
}

/* A gear turns. A play button leans forward. */
.run-button:not(.collab-control-btn):hover i.fa-gear,
.run-button:not(.collab-control-btn):hover i.fa-sliders {
  transform: scale(1.14) rotate(45deg);
}

.run-button:not(.collab-control-btn):hover i.fa-play {
  transform: scale(1.2) translateX(2px);
}

/* --- header icon buttons ------------------------------------------------- */
/* On a phone these are square icon tiles. A halo on press makes a tap feel
   answered on a screen with no hover state at all. */
header > .run-button:active,
header > .header-more-menu > .run-button:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.28),
    0 0 0 4px color-mix(in srgb, var(--accent-color) 26%, transparent);
}

/* --- workspace tabs ------------------------------------------------------ */
.mobile-workspace-tabs button {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.22s ease;
}

.mobile-workspace-tabs button i {
  font-size: 13px;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;
}

.mobile-workspace-tabs button:not([aria-selected="true"]):hover {
  border-color: color-mix(in srgb, var(--accent-color) 50%, var(--border-color));
  color: var(--text-primary);
}

.mobile-workspace-tabs button:not([aria-selected="true"]):hover i {
  color: var(--accent-color);
  transform: translateY(-1px);
}

.mobile-workspace-tabs button[aria-selected="true"] {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 6px 18px color-mix(in srgb, var(--accent-color) 42%, transparent);
}

.mobile-workspace-tabs button[aria-selected="true"] i {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* A lit bar along the bottom of the open tab, so the selected view is obvious
   even at a glance. */
.mobile-workspace-tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.mobile-workspace-tabs button:active { transform: scale(0.97); }

/* --- the code editor ----------------------------------------------------- */
/* The panel lifts off the page instead of sitting flush against it, and gains
   an accent edge while you are actually typing in it. */
.editors {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.editors:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-color) 52%, transparent),
    0 14px 34px rgba(0, 0, 0, 0.24);
}

/* Line numbers read as a quiet gutter, with a hairline of accent along the
   edge where they meet the code. */
.line-numbers {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent-color) 5%, transparent),
      transparent 60%
    ),
    var(--bg-secondary);
  border-right-color: color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
}

/* The caret and the selection take the editor's accent, so the theme reaches
   the part of the screen the eye is actually on. */
#activeEditor {
  caret-color: var(--accent-color);
  transition: background-color 0.25s ease;
}

#activeEditor::selection {
  background: color-mix(in srgb, var(--accent-color) 34%, transparent);
  color: inherit;
}

#activeEditor::-moz-selection {
  background: color-mix(in srgb, var(--accent-color) 34%, transparent);
  color: inherit;
}

/* --- file list ----------------------------------------------------------- */
/* Rows answer the pointer, and the open file carries a bright edge rather
   than only a fill. */
.file-item {
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s ease;
}

.file-item:hover {
  transform: translateX(2px);
}

.file-item.active {
  box-shadow:
    inset 3px 0 0 rgba(255, 255, 255, 0.9),
    0 4px 14px color-mix(in srgb, var(--accent-color) 34%, transparent);
}

/* --- motion --- */
/* Every effect above is decoration, so all of it stops when the person has
   asked their device for less movement. */
@media (prefers-reduced-motion: reduce) {
  .run-button:not(.collab-control-btn),
  .run-button:not(.collab-control-btn)::before,
  .run-button i,
  .run-button .btn-icon,
  .mobile-workspace-tabs button,
  .mobile-workspace-tabs button i,
  .file-item {
    transition: none !important;
    transform: none !important;
  }
}

/* ===========================================================================
   BREAKROOMS

   Everything here is new and scoped to the breakroom-* class names, so no
   existing screen is affected. Every row wraps rather than scrolls sideways,
   so the screen works from a small phone up to a wide desktop.
   =========================================================================== */

/* The "Create a group" card. A whole card is the target, not a small button,
   so it is easy to hit with a thumb. */
.breakroom-create-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0 0 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--accent-color) 55%, var(--border-color));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  color: var(--text-primary);
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.breakroom-create-card:hover {
  transform: translateY(-1.5px);
  border-style: solid;
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 15%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 26%, transparent);
}

.breakroom-create-card:active { transform: translateY(1px) scale(0.99); }

.breakroom-create-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.breakroom-create-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.breakroom-create-text strong { font-size: 14px; font-weight: 800; }
.breakroom-create-text small { font-size: 12px; color: var(--text-muted); }

/* --- group cards --- */
.breakroom-group-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.breakroom-group-card {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.breakroom-group-card:hover {
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

.breakroom-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.breakroom-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
}

.breakroom-group-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakroom-group-title i { color: var(--accent-color); }

.breakroom-group-count {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.breakroom-member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.breakroom-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.breakroom-member-chip.is-gone { opacity: 0.55; text-decoration: line-through; }

.breakroom-member-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.breakroom-empty-note {
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

/* Wraps onto a second line on a narrow phone instead of pushing sideways. */
.breakroom-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.breakroom-group-actions .run-button {
  flex: 1 1 auto;
  min-width: 96px;
  justify-content: center;
  padding: 7px 10px;
  font-size: 11px;
}

.breakroom-group-actions .breakroom-delete-btn {
  background: #d32f2f;
  border-color: color-mix(in srgb, #d32f2f 70%, #ffffff 12%);
}

.breakroom-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
}

.breakroom-tally strong { color: var(--text-primary); }

/* --- task, timer and starting files --- */
/* The global textarea rule is written for the code editor: absolutely
   positioned, 100% high, transparent text, no wrapping. Every one of those
   has to be undone here or this box covers the whole card, which is exactly
   what it was doing. The GitHub dialog further up needs the same treatment
   for the same reason. */
.breakroom-task-input {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  width: 100%;
  height: auto;
  min-height: 74px;
  white-space: pre-wrap;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.breakroom-task-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.breakroom-toggle-row,
.breakroom-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.breakroom-toggle-row:hover,
.breakroom-choice:hover {
  border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
}

.breakroom-toggle-text,
.breakroom-choice-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.breakroom-toggle-text strong,
.breakroom-choice-text strong {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.breakroom-toggle-text small,
.breakroom-choice-text small {
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.breakroom-choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.breakroom-minutes-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
}

.breakroom-minutes-row[hidden] { display: none; }

.breakroom-minutes-input {
  width: 92px;
  padding: 9px 11px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}

.breakroom-minutes-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

/* Someone already placed in another group cannot be picked here. */
.collab-bulk-participant-option.is-locked {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .breakroom-create-card { padding: 12px; }
  .breakroom-create-icon { width: 36px; height: 36px; }
  .breakroom-group-actions .run-button { min-width: 0; flex: 1 1 30%; }
}

/* ===========================================================================
   Header buttons: show the labels on tablets

   Two rules hide the header button labels. The phone one is correct and is
   left exactly as it is - six full labels will not fit across a phone.

   The other covers tablet landscape, 700px to 1100px. There is room for the
   words there, so the labels are restored: normal auto-width buttons with
   the icon and the wording side by side, the same as desktop.

   The full wording is used, so the collaborate button reads COLLAB WITH
   FRIENDS rather than anything shortened.
   =========================================================================== */
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
  header > .run-button strong,
  header > .header-more-menu > .run-button strong {
    display: inline !important;
  }

  header > .run-button,
  header > .header-more-menu > .run-button {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 38px;
    padding: 8px 12px !important;
    gap: 7px;
    border-radius: 10px;
    white-space: nowrap;
  }
}

/* ===========================================================================
   Participant rows: keep the word RENAME, and close the gap beside it
   =========================================================================== */

/* A pencil on its own is not obvious enough, so the word stays beside it at
   every width. MAKE CO-HOST and MORE still drop to icons on a phone, because
   their labels are long and three full labels will not fit next to a name. */
.collab-participant-row-actions .participant-rename-btn strong {
  display: inline !important;
}

@media (max-width: 560px) {
  /* The fixed width further up was sized for the icon alone. With the word
     back the button sizes to its own content again. */
  .collab-participant-row-actions .participant-rename-btn {
    width: auto;
    min-width: 0;
    gap: 6px;
    padding: 6px 11px;
  }
}

/* The buttons sit on their own line under the name on a phone.

   A rule higher up turns this row into flex-direction: column at this width.
   In a column the main axis is vertical, so flex-basis: 100% means 100% of
   the HEIGHT - it does nothing for width, and the children collapse to the
   width of their own contents, leaving the rest of the card empty.

   width is used instead, which means the same thing whichever direction the
   row happens to be running in. */
@media (max-width: 480px) {
  #collabModal .collab-participant-row,
  #modalBody .collab-participant-row {
    width: 100%;
    align-items: stretch;
  }

  #collabModal .collab-participant-main,
  #modalBody .collab-participant-main {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  #collabModal .collab-participant-row-actions,
  #modalBody .collab-participant-row-actions {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  /* Sized by their own labels, never stretched, never wider than the row. */
  #collabModal .collab-participant-row-actions .run-button,
  #modalBody .collab-participant-row-actions .run-button {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }
}

/* ===========================================================================
   PUBLISHED PROJECT STATS

   All new, all prefixed cxstat-, so nothing existing is affected. Every row
   wraps and every bar is sized as a percentage, so it fits a narrow phone as
   readily as a desktop.
   =========================================================================== */
.cxstat-wrap { text-align: left; }

.cxstat-head { margin-bottom: 14px; }
.cxstat-head strong { display: block; font-size: 15px; color: var(--text-primary); }

.cxstat-link {
  display: block;
  margin-top: 3px;
  color: var(--accent-color);
  font-size: 12px;
  word-break: break-all;
}

.cxstat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.cxstat-tile {
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
}

.cxstat-tile small {
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cxstat-tile strong {
  display: block;
  margin-top: 3px;
  color: var(--accent-color);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
}

.cxstat-section { margin-bottom: 16px; }

.cxstat-section h5 {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Thirty bars across whatever width is available. */
.cxstat-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 78px;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 11px;
  background: var(--bg-primary);
}

.cxstat-bar {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    180deg,
    var(--accent-color),
    color-mix(in srgb, var(--accent-color) 45%, transparent)
  );
}

.cxstat-note {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.cxstat-pages {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cxstat-page {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

.cxstat-page:last-child { border-bottom: none; }

.cxstat-page-name {
  flex: 1 1 40%;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-code);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cxstat-page-bar {
  flex: 1 1 40%;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-color) 70%, transparent);
  overflow: hidden;
}

.cxstat-page-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-color);
}

.cxstat-page-count {
  flex: 0 0 auto;
  min-width: 30px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.cxstat-empty {
  padding: 10px 0;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.cxstat-dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.cxstat-dates span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.cxstat-dates strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
}

/* The dialog body keeps line breaks so plain sentences read properly. The
   stats card is built from real elements instead, so those breaks were being
   drawn as blank lines between every tile and every row. */
#appDialog[data-dialog-kind="published-stats"] #appDialogMessage {
  white-space: normal !important;
  text-align: left;
}

/* Tighter on a phone, where the card has the least room to give away. */
@media (max-width: 480px) {
  .cxstat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .cxstat-tile { padding: 9px 10px; }
  .cxstat-tile strong { font-size: 18px; }
  .cxstat-section { margin-bottom: 13px; }
  .cxstat-chart { height: 64px; }
  .cxstat-dates { grid-template-columns: 1fr; gap: 6px; }
  .cxstat-page { padding: 6px 0; }
  .cxstat-page-name { flex: 1 1 46%; }
  .cxstat-page-bar { flex: 1 1 34%; }
}

/* The numbers refresh themselves while the card is open, so the newest ones
   arrive without a jump. */
#appDialog[data-dialog-kind="published-stats"] .cxstat-tile strong,
#appDialog[data-dialog-kind="published-stats"] .cxstat-page-bar i,
#appDialog[data-dialog-kind="published-stats"] .cxstat-bar {
  transition: all 0.35s ease;
}

/* ===========================================================================
   EDITOR BANNER BAR

   Pinned along the bottom of the workspace with a close button. It sits above
   the editor but below every dialog, so it can never cover a modal or the
   collaboration panel.
   =========================================================================== */
.editor-ad-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 46px 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
  background: var(--bg-secondary);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.22);
  /* Sits just off the bottom until ads.js opens it, so it slides in rather
     than appearing under the person's hands. */
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.editor-ad-bar.is-open { transform: translateY(0); }

.editor-ad-bar[hidden] { display: none; }

/* Keeps its height while the creative loads, so nothing jumps when it lands. */
.editor-ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 50px;
  overflow: hidden;
}

.editor-ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.editor-ad-close:hover {
  border-color: #e53935;
  background: #e53935;
  color: #ffffff;
}

.editor-ad-close:active { transform: scale(0.94); }

.editor-ad-close:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .editor-ad-bar { min-height: 50px; padding: 6px 42px 6px 8px; }
  .editor-ad-close { width: 28px; height: 28px; top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-ad-bar { transition: none; }
}

/* ===========================================================================
   BREAKROOMS: the bar shown while you are inside a room

   Fixed to the top of the workspace, under the header. The task sits on it
   rather than behind a button, because the task is the whole reason the room
   exists and hiding it would mean asking people to remember it.
   =========================================================================== */
.breakroom-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 880;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent-color) 88%, #ffffff 12%),
    color-mix(in srgb, var(--accent-color) 62%, #000000 22%)
  );
  color: #ffffff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color) 34%, transparent);
  font-size: 12.5px;
}

.breakroom-banner-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 22%, transparent);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Wraps onto its own line on a phone rather than being cut off. */
.breakroom-banner-task {
  flex: 1 1 240px;
  min-width: 0;
  line-height: 1.4;
  opacity: 0.95;
}

.breakroom-banner-task.is-empty {
  font-style: italic;
  opacity: 0.75;
}

/* The bar is fixed, so the workspace is pushed down by its height instead of
   having its first row hidden underneath it. */
body.in-breakroom header { margin-top: 42px; }

@media (max-width: 480px) {
  .breakroom-banner { padding: 8px 11px; font-size: 11.5px; }
  body.in-breakroom header { margin-top: 56px; }
}

/* The task shown to the host on the running screen. */
.breakroom-running-task {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.breakroom-running-task strong {
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.breakroom-running-task span {
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}

/* ===========================================================================
   BREAKROOMS: the clock
   =========================================================================== */
.breakroom-banner-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #000000 24%, transparent);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.breakroom-banner-handin {
  flex: 0 0 auto;
  padding: 5px 13px;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, #ffffff 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 16%, transparent);
  color: #ffffff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  transition: background-color 0.18s ease, transform 0.16s ease;
}

.breakroom-banner-handin:hover { background: #ffffff; color: #14532d; }
.breakroom-banner-handin:active { transform: scale(0.96); }

/* The last stretch. The whole bar changes rather than only the number, so it
   is noticed by someone looking at their code instead of at the clock. */
.breakroom-banner.is-warning {
  border-bottom-color: #f59e0b;
  background: linear-gradient(120deg, #d97706, #b45309);
  animation: breakroomPulse 1.6s ease-in-out infinite;
}

.breakroom-banner.is-warning .breakroom-banner-clock {
  background: #7c2d12;
}

@keyframes breakroomPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(217, 119, 6, 0.34); }
  50% { box-shadow: 0 6px 26px rgba(217, 119, 6, 0.7); }
}

/* The host's copy of the same clock. */
.breakroom-running-clock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--border-color));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.breakroom-running-clock span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.breakroom-running-clock b {
  color: var(--accent-color);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.breakroom-running-clock.is-open b {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .breakroom-banner.is-warning { animation: none; }
}

/* ===========================================================================
   BREAKOUT ROOMS: the host moving about
   =========================================================================== */

/* The visiting bar is blue rather than green, so a glance tells the host
   whether they are in the main session or standing in somebody's room. */
.breakroom-banner.is-visiting {
  border-bottom-color: color-mix(in srgb, #2563eb 55%, transparent);
  background: linear-gradient(120deg, #3b82f6, #1d4ed8);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.34);
}

/* Unread count on a room the host has not looked in on. */
.breakroom-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53935;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  animation: breakroomNudge 1.8s ease-in-out infinite;
}

@keyframes breakroomNudge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

.breakroom-visit-btn {
  background: #2563eb;
  border-color: color-mix(in srgb, #2563eb 70%, #ffffff 14%);
}

/* Picking who joins a room that is already running. */
.breakroom-pick-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}

.breakroom-pick {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.breakroom-pick:hover {
  border-color: color-mix(in srgb, var(--accent-color) 50%, var(--border-color));
}

.breakroom-pick > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.breakroom-pick-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .breakroom-unread { animation: none; }
}

/* Assigned to a room but not currently in it — closed their tab, or has not
   made the move yet. Shown rather than hidden, because a host needs to know
   the difference between a group of four and a group of four where two left. */
.breakroom-member-chip.is-away {
  opacity: 0.55;
  border-style: dashed;
}

/* ===========================================================================
   Publish link field: the counter and its message

   Both sit under the field rather than appearing as a toast. A toast is gone
   in three seconds, and the thing it was explaining - characters disappearing
   as you type - is still happening.
   =========================================================================== */
.publish-link-meter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Directly under the input it belongs to, tight enough to read as part of
     the field rather than a separate line of the dialog. */
  margin: 6px 0 2px;
  font-size: 11.5px;
}

.publish-link-note {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-muted);
  line-height: 1.4;
  text-align: left;
}

.publish-link-note.is-bad {
  color: #e5484d;
  font-weight: 700;
}

.publish-link-count {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* At the limit the count turns red too, so it is obvious why nothing more is
   being typed. */
.publish-link-count.is-full { color: #e5484d; }

/* ===========================================================================
   Notifications on a phone: smaller

   Desktop is left exactly as it was. On a phone the toast was taking a big
   bite out of a small screen - 360px wide, a 38px icon tile and 14px of
   padding - for a message that is usually five words long and gone in three
   seconds. Everything here is scaled down; nothing is removed, so a long
   message still wraps and still reads.
   =========================================================================== */
@media (max-width: 560px) {
  .codx-notification {
    right: 10px;
    width: min(300px, calc(100vw - 20px));
    gap: 9px;
    padding: 10px 12px;
    border-radius: 11px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
  }

  .codx-notification-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 9px;
    font-size: 14px;
  }

  .codx-notification-title {
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }

  .codx-notification-message {
    font-size: 12px;
    line-height: 1.4;
  }

  /* The progress line at the bottom is decoration at this size, so it is
     thinned rather than dropped - it still says how long is left. */
  .codx-notification::after { height: 2px; }
}

/* Narrower still: the icon goes, because at this width it is competing with
   the words for room and the colour of the toast already says the same thing. */
@media (max-width: 380px) {
  .codx-notification {
    width: calc(100vw - 16px);
    right: 8px;
    padding: 9px 11px;
  }

  .codx-notification-icon { display: none; }
  .codx-notification-message { font-size: 11.5px; }
}

/* ===========================================================================
   QR CODE ON THE PUBLISH SCREEN
   =========================================================================== */
.published-qr {
  display: flex;
  justify-content: center;
  margin: 16px 0 4px;
}

.published-qr canvas {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5);
}

/* Empty when the QR could not be drawn, so it takes no room at all. */
.published-qr:empty { display: none; margin: 0; }

/* ===========================================================================
   Editor ad bar: a bigger, red close button

   28px was under the 44px a thumb actually needs, and grey made it read as
   part of the advert rather than the way out of it.
   =========================================================================== */
.editor-ad-close {
  width: 38px !important;
  height: 38px !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%);
  border-color: #e5484d !important;
  background: #e5484d !important;
  color: #ffffff !important;
  font-size: 17px !important;
}

.editor-ad-close:hover {
  border-color: #c62828 !important;
  background: #c62828 !important;
}

.editor-ad-close:active { transform: translateY(-50%) scale(0.93); }

.editor-ad-bar { padding-right: 54px; }

@media (max-width: 480px) {
  .editor-ad-close {
    width: 36px !important;
    height: 36px !important;
    right: 6px !important;
    font-size: 16px !important;
  }
  .editor-ad-bar { padding-right: 48px; }
}

/* ===========================================================================
   Editor action row: one line on a tablet

   The row wraps, so on a tablet the buttons broke onto a second line and ate
   a strip of the editor for no reason - there is room for all of them across.
   They share the width instead, and their labels shorten before they wrap.
   =========================================================================== */
@media (min-width: 561px) and (max-width: 1180px) {
  .editor-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: hidden;
  }

  .editor-actions > * {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap;
  }

  /* A long label shortens rather than pushing the row onto a second line. */
  .editor-actions > * strong {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* Tighter still, and the words go before the row does. */
@media (min-width: 561px) and (max-width: 820px) {
  .editor-actions > * strong { display: none; }
  .editor-actions > * { flex: 0 1 auto; min-width: 40px; }
  .editor-actions > * i { font-size: 14px; }
}

/* ===========================================================================
   Indent guides: actually visible

   They were drawn at 26% of the muted text colour. On a dark theme that is a
   faint grey at a quarter strength against a near-black background - present
   in the markup and invisible on the screen.

   Both colours are variables now, so they can be tuned in one place rather
   than hunted through the file.
   =========================================================================== */
:root {
  --indent-guide-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  --indent-guide-active-color: color-mix(in srgb, var(--accent-color) 85%, transparent);
}

.indent-guide {
  width: 1px;
  background: var(--indent-guide-color);
}

/* The level the caret sits inside is the useful one, so it is drawn solidly
   and slightly thicker - it is the line you actually follow upwards to find
   the tag you are inside. */
.indent-guide.active {
  width: 2px;
  background: var(--indent-guide-active-color);
}

@media (prefers-contrast: more) {
  :root {
    --indent-guide-color: color-mix(in srgb, var(--text-muted) 80%, transparent);
    --indent-guide-active-color: var(--accent-color);
  }
}