:root {
      /* PALETTE ADMIN
         Cambia questi colori per personalizzare il pannello admin. */
      --bg: #091014; /* Sfondo generale del pannello admin. */
      --panel: rgba(255,255,255,.06); /* Sfondo dei pannelli e delle sezioni admin. */
      --panel-strong: rgba(255,255,255,.09); /* Variante piu visibile per elementi importanti. */
      --line: rgba(255,255,255,.12); /* Bordi di pannelli, input, pulsanti e separatori. */
      --text: #f4faf7; /* Testo principale. */
      --muted: #adc0b8; /* Testo secondario, descrizioni e help. */
      --accent: #21e6a2; /* Colore principale: pulsanti attivi, focus, tab selezionate. */
      --danger: #ff6b6b; /* Azioni pericolose: elimina, reset, errori. */

      /* FORME */
      --radius: 8px; /* Angoli di input, bottoni, card e controlli. */
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        /* Glow azzurro decorativo in alto a sinistra. */
        radial-gradient(circle at 18% 8%, rgba(78,200,255,.16), transparent 34rem),
        /* Glow verde/accento decorativo in alto a destra. */
        radial-gradient(circle at 88% 10%, rgba(33,230,162,.18), transparent 30rem),
        /* Fondo scuro principale del pannello. */
        linear-gradient(180deg, #0b1418, #070b0e);
    }
    a { color: inherit; }
    .shell { width: min(1360px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0 40px; }
    header {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand i {
      width: 44px; height: 44px; display: grid; place-items: center;
      border: 1px solid rgba(33,230,162,.34); border-radius: var(--radius);
      color: var(--accent); background: rgba(33,230,162,.1);
    }
    h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 3.2rem); line-height: 1; }
    .muted { color: var(--muted); }
    .top-actions, .form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .admin-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 18px;
    }
    .tab-button {
      min-height: 42px;
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.055);
    }
    .tab-button.active {
      color: #06100c;
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent), #7affc9);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .projects-layout.tab-panel.active { display: grid; }
    button, .btn {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      padding: 10px 13px;
      color: var(--text);
      background: rgba(255,255,255,.07);
      font: inherit;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
    }
    .primary { color: #06100c; border-color: transparent; background: linear-gradient(135deg, var(--accent), #7affc9); }
    .danger { color: #260707; border-color: transparent; background: linear-gradient(135deg, var(--danger), #ffaaa3); }
    .projects-layout { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
    .saved-projects-panel {
      position: sticky;
      top: 18px;
      max-height: calc(100vh - 36px);
      display: flex;
      flex-direction: column;
    }
    .saved-projects-panel .list { max-height: calc(100vh - 180px); }
    .project-editor-panel { min-width: 0; }
    .project-editor-toolbar {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }
    .project-editor-toolbar .primary { flex: 0 0 auto; }
    .image-field small {
      color: var(--muted);
      font-size: .78rem;
      font-weight: 700;
    }
    .inline-input-action {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }
    .inline-input-action button {
      min-width: 112px;
    }
    .panel {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
      box-shadow: 0 24px 80px rgba(0,0,0,.26);
      overflow: hidden;
    }
    .panel-head { padding: 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.04); }
    .panel-head h2 { margin: 0; font-size: 1.05rem; }
    .list { display: grid; gap: 8px; padding: 12px; max-height: calc(100vh - 190px); overflow: auto; }
    .item {
      width: 100%;
      justify-content: flex-start;
      min-height: auto;
      padding: 12px;
      text-align: left;
      background: rgba(255,255,255,.045);
    }
    .item.active { border-color: rgba(33,230,162,.44); background: rgba(33,230,162,.1); }
    .item strong, .item span { display: block; }
    .item span { margin-top: 4px; color: var(--muted); font-size: .86rem; font-weight: 650; }
    form { padding: 16px; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .full { grid-column: 1 / -1; }
    label { display: grid; gap: 7px; color: var(--muted); font-size: .86rem; font-weight: 800; }
    input, select, textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      padding: 11px 12px;
      color: var(--text);
      background: rgba(4,9,12,.72);
      font: inherit;
      outline: none;
    }
    textarea { min-height: 92px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-color: rgba(33,230,162,.48); box-shadow: 0 0 0 3px rgba(33,230,162,.1); }
    .help { margin: 8px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
    .json-box { min-height: 180px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .84rem; }
    .status { min-height: 24px; color: var(--accent); font-weight: 800; }
    .hidden-file { display: none; }
    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 50;
      display: grid;
      place-items: center;
      padding: 20px;
      background:
        radial-gradient(circle at 20% 12%, rgba(33,230,162,.18), transparent 30rem),
        rgba(5, 9, 12, .92);
      backdrop-filter: blur(18px);
    }
    .login-screen.is-hidden { display: none; }
    .login-card {
      width: min(440px, 100%);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 24px;
      background: rgba(12, 20, 25, .96);
      box-shadow: 0 28px 100px rgba(0,0,0,.5);
    }
    .login-card h2 { margin: 0 0 8px; font-size: 1.6rem; }
    .login-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
    .hero-editor {
      margin-bottom: 18px;
    }
.text-groups {
  display: grid;
  gap: 16px;
}
.text-section {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(4,9,12,.34);
  overflow: hidden;
}
.text-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.text-section-head > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(33,230,162,.28);
  border-radius: var(--radius);
  color: var(--accent);
  background: rgba(33,230,162,.09);
}
.text-section-head h3 {
  margin: 0;
  font-size: 1rem;
}
.editable-section-title {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: text;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.editable-section-title:hover,
.editable-section-title:focus {
  border-color: rgba(33,230,162,.45);
  background: rgba(33,230,162,.08);
  box-shadow: 0 0 0 3px rgba(33,230,162,.08);
}
.editable-section-title:empty::before {
  content: "Nome sezione";
  color: var(--muted);
}
.editable-section-description {
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: text;
  outline: none;
}
.editable-section-description:hover,
.editable-section-description:focus {
  border-color: rgba(33,230,162,.34);
  background: rgba(33,230,162,.07);
}
.editable-section-description:empty::before {
  content: "Descrizione sezione";
  color: var(--muted);
}
.text-section.is-disabled {
  opacity: .62;
}
.text-section.is-disabled .text-section-head {
  background: rgba(255, 107, 107, .055);
}
.text-section .grid {
  padding: 16px;
}
.custom-section-editor {
  display: grid;
  gap: 12px;
  padding: 16px 16px 0;
}
.custom-section-row {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(4,9,12,.42);
  overflow: hidden;
}
.custom-section-row__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.custom-section-row__top span {
  color: var(--muted);
  font-size: .82rem;
  margin-right: auto;
}
.custom-section-row .grid {
  padding: 12px;
}
.custom-section-empty {
  margin: 0;
}
.menu-editor {
  display: grid;
  gap: 10px;
  padding: 16px 16px 0;
}
.button-editor {
  display: grid;
  gap: 10px;
  padding: 0 16px;
}
.menu-item-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(220px, 1.4fr) minmax(140px, .7fr) 46px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(4,9,12,.42);
}
.hero-button-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(190px, 1.2fr) minmax(130px, .8fr) minmax(120px, .7fr) minmax(130px, .7fr) 46px;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(4,9,12,.42);
}
.section-actions {
  padding: 12px 16px 16px;
}
.icon-only {
  width: 44px;
  padding: 0;
  justify-content: center;
}
.html-editor-panel {
      margin-top: 0;
    }
.theme-lab {
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(4,9,12,.42);
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.theme-card {
  min-height: 118px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: 12px;
  text-align: left;
}
.theme-card.active,
.theme-card:hover {
  border-color: rgba(33,230,162,.48);
  background: rgba(33,230,162,.08);
}
.theme-sample {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--a), var(--b), var(--c));
}
.theme-card strong,
.theme-card small {
  display: block;
}
.theme-card small {
  color: var(--muted);
  line-height: 1.35;
}
.theme-actions {
  margin-top: 14px;
}
.themes-panel {
  overflow: hidden;
}
.theme-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .65fr);
  gap: 16px;
  padding: 16px;
}
.theme-library,
.theme-editor {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(4,9,12,.38);
}
.theme-preview-strip {
  width: 180px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--a), var(--b), var(--c));
}
.theme-meta-grid {
  margin-top: 14px;
}
.theme-color-editor {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.theme-color-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 56px minmax(120px, .8fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(0,0,0,.14);
}
.theme-color-row span {
  color: var(--text);
}
.theme-color-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .74rem;
}
.theme-color-row input[type="color"] {
  min-height: 42px;
  padding: 4px;
}
.layout-panel {
  overflow: hidden;
}
.layout-section-board {
  padding: 16px 16px 0;
}
.layout-section-board .layout-column {
  max-width: 760px;
}
.section-sortable-list {
  grid-template-columns: 1fr;
}
.layout-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px;
}
.layout-column {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(4,9,12,.38);
  overflow: hidden;
}
.layout-column-head {
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.layout-column-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 1rem;
}
.layout-column-head h3 i {
  color: var(--accent);
}
.sortable-list {
  display: grid;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
  touch-action: none;
}
.layout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  color: var(--text);
  background: rgba(4,9,12,.72);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  cursor: grab;
  user-select: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .2s ease;
}
.layout-item:hover,
.layout-item:focus-visible {
  border-color: rgba(33,230,162,.48);
  background: rgba(33,230,162,.08);
  outline: none;
}
.layout-item:active {
  cursor: grabbing;
}
.layout-item.is-dragging {
  opacity: .62;
  transform: scale(.985);
  border-color: rgba(33,230,162,.72);
  background: rgba(33,230,162,.12);
}
.layout-item > i {
  color: var(--accent);
  font-size: 1rem;
}
.layout-item span {
  display: block;
  min-width: 0;
}
.layout-item strong,
.layout-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layout-item small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.section-layout-item {
  min-height: 72px;
}
.section-layout-item > i {
  font-size: 1.08rem;
}
.layout-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}
.layout-status {
  padding: 0 16px 16px;
}
.color-lab {
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(4,9,12,.42);
}
.color-lab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.color-lab-head h3 {
  margin: 0;
  font-size: 1rem;
}
.color-preview {
  width: 76px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  background: #21e6a2;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 12px 30px rgba(0,0,0,.22);
}
.color-tools {
  display: grid;
  grid-template-columns: 120px minmax(160px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr);
  gap: 12px;
}
.color-tools input[type="color"] {
  min-height: 44px;
  padding: 4px;
}
.color-actions {
  margin-top: 12px;
}
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.swatch {
  min-height: 44px;
  justify-content: flex-start;
  padding: 8px;
  overflow: hidden;
}
.swatch-dot {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.swatch-code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .78rem;
}
.html-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}
.ide-lab {
  margin: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(4,9,12,.38);
  overflow: hidden;
}
.ide-lab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ide-lab-head h3 {
  margin: 0;
}
.ide-head-actions {
  margin: 0;
  flex: 0 0 auto;
}
.ide-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 160px repeat(3, auto);
  gap: 10px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ide-tools button {
  min-height: 43px;
}
.ide-workspace {
  --ide-sidebar-width: 320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8px minmax(230px, var(--ide-sidebar-width));
  gap: 0;
  padding: 16px;
}
.ide-main,
.ide-sidebar {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(4,9,12,.42);
  overflow: hidden;
}
.ide-bar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ide-bar strong {
  display: block;
  color: var(--text);
}
.ide-bar span {
  display: inline-flex;
  margin-top: 4px;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
}
.ide-actions {
  margin: 0;
}
.ide-resizer {
  cursor: col-resize;
  position: relative;
}
.ide-resizer::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.ide-resizer:hover::before,
.ide-resizer.is-dragging::before {
  background: var(--accent);
}
.ide-sidebar {
  order: 2;
}
.ide-sidebar-head {
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ide-sidebar-head strong,
.ide-sidebar-head small {
  display: block;
}
.ide-sidebar-head small {
  margin-top: 4px;
  color: var(--muted);
}
.ide-file-tree {
  max-height: 650px;
  overflow: auto;
  padding: 10px;
}
.ide-folder,
.ide-file {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: .88rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.ide-folder {
  justify-content: space-between;
  color: var(--text);
  cursor: pointer;
}
.ide-folder span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ide-folder .fa-chevron-down {
  color: var(--muted);
  font-size: .74rem;
  transition: transform .18s ease;
}
.ide-folder.is-collapsed .fa-chevron-down {
  transform: rotate(-90deg);
}
.ide-file:hover,
.ide-file:focus-visible,
.ide-file.active {
  color: var(--text);
  background: rgba(33,230,162,.12);
  outline: none;
}
.ide-file-tree ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ide-file-tree ul ul {
  margin: 3px 0 8px 17px;
  padding-left: 9px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.ide-file-tree li.is-collapsed > ul {
  display: none;
}
.legacy-code-source {
  display: none;
}
.CodeMirror {
  height: 650px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .86rem;
  line-height: 1.55;
}
.ide-main .CodeMirror {
  border-radius: 0;
}
.preview-editor-layout {
  padding: 16px 16px 0;
}
.preview-editor-layout label,
.html-editor-layout label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
.code-editor-layout {
  padding-top: 14px;
}
.code-editor {
  min-height: 560px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .82rem;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.preview-frame {
  width: 100%;
  min-height: min(72vh, 760px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  background: #fff;
}
.ide-fullscreen-modal[hidden] {
  display: none;
}
.ide-fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}
.ide-fullscreen-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}
.ide-fullscreen-dialog {
  position: relative;
  z-index: 1;
  width: min(1500px, 100%);
  height: min(920px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: #071014;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
  overflow: hidden;
}
.ide-fullscreen-head {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
}
.ide-fullscreen-head strong,
.ide-fullscreen-head span {
  display: block;
}
.ide-fullscreen-head span {
  margin-top: 4px;
  color: var(--muted);
  font-size: .84rem;
}
.ide-fullscreen-body {
  min-height: 0;
  overflow: hidden;
}
.ide-fullscreen-body .ide-workspace {
  height: 100%;
  padding: 14px;
}
.ide-fullscreen-body .CodeMirror {
  height: calc(100dvh - 150px);
}
body.ide-fullscreen-open {
  overflow: hidden;
}
@media (max-width: 960px) {
      header, .projects-layout { grid-template-columns: 1fr; }
      header { align-items: flex-start; flex-direction: column; }
      .saved-projects-panel { position: static; max-height: none; }
      .saved-projects-panel .list { max-height: none; }
      .project-editor-toolbar { flex-direction: column; }
      .grid { grid-template-columns: 1fr; }
  .menu-item-row { grid-template-columns: 1fr; }
  .hero-button-row { grid-template-columns: 1fr; }
  .icon-only { width: 100%; }
  .layout-board { grid-template-columns: 1fr; }
  .section-sortable-list { grid-template-columns: 1fr; }
  .color-lab-head { flex-direction: column; }
  .theme-manager { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: 1fr; }
  .theme-color-row { grid-template-columns: 1fr; }
  .color-tools { grid-template-columns: 1fr; }
  .ide-lab-head { flex-direction: column; }
  .ide-tools { grid-template-columns: 1fr; }
  .ide-workspace { grid-template-columns: 1fr; }
  .ide-resizer { display: none; }
  .ide-sidebar { order: -1; }
  .ide-bar { align-items: flex-start; flex-direction: column; }
  .ide-file-tree,
  .CodeMirror { max-height: none; height: 520px; }
  .ide-fullscreen-modal { padding: 0; }
  .ide-fullscreen-dialog {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }
  .ide-fullscreen-body .CodeMirror {
    height: 58dvh;
  }
  .html-editor-layout { grid-template-columns: 1fr; }
  .html-editor-layout label:last-child { grid-column: auto; }
  .list { max-height: none; }
}