:root {
  --workspace-bg: #1f1f1f;
  --editor-bg: #252526;
  --editor-grid: #2d2d30;
  --sidebar-shell: #232327;
  --sidebar-border: #3a3c42;
  --sidebar-frame-bg: #0f1723;
  --shadow-color: rgba(0, 0, 0, 0.35);
  --button-bg: #31343b;
  --button-border: #4a4e57;
  --button-text: #f4f7fb;
  --button-hover: #3a3f49;
  --focus-ring: #75a7ff;
}

body.gallery-page.gallery-theme-light {
  --workspace-bg: #eef2fb;
  --editor-bg: #f7f9fe;
  --editor-grid: #dfe5f4;
  --sidebar-shell: #f2f5fc;
  --sidebar-border: #c8d2e8;
  --sidebar-frame-bg: #ffffff;
  --shadow-color: rgba(66, 80, 108, 0.2);
  --button-bg: #ffffff;
  --button-border: #bcc8df;
  --button-text: #243349;
  --button-hover: #ecf2ff;
  --focus-ring: #2f66d8;
}

body.gallery-page.gallery-theme-high-contrast {
  --workspace-bg: #000000;
  --editor-bg: #000000;
  --editor-grid: #1f1f1f;
  --sidebar-shell: #000000;
  --sidebar-border: #ffffff;
  --sidebar-frame-bg: #000000;
  --shadow-color: rgba(0, 0, 0, 0.6);
  --button-bg: #000000;
  --button-border: #ffffff;
  --button-text: #ffffff;
  --button-hover: #1f1f1f;
  --focus-ring: #ffe761;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body.gallery-page {
  font-family: "Segoe UI", "Trebuchet MS", sans-serif;
  background: var(--workspace-bg);
  color: var(--button-text);
}

.workspace-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

.sidebar-host {
  position: relative;
  background: var(--sidebar-shell);
  border-right: 0;
  min-height: 100vh;
  width: 100%;
}

.sidebar-host iframe {
  width: 100%;
  height: 100vh;
  border: 0;
  display: block;
  background: var(--sidebar-frame-bg);
}

.floating-nav {
  position: absolute;
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 52px);
  right: 8px;
  z-index: 20;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
}

.controls-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--button-border);
  background: color-mix(in oklab, var(--button-bg) 90%, #000000);
  color: var(--button-text);
  border-radius: 999px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 7px 18px var(--shadow-color);
  transition: background 150ms ease, transform 150ms ease;
}

.floating-controls-panel {
  width: min(220px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--sidebar-shell) 82%, transparent);
  border: 1px solid color-mix(in oklab, var(--button-border) 65%, transparent);
  box-shadow: 0 10px 24px var(--shadow-color);
  backdrop-filter: blur(4px);
}

.floating-controls-panel[hidden] {
  display: none;
}

.floating-controls-panel button,
.floating-controls-panel select {
  width: 100%;
  border: 1px solid var(--button-border);
  background: color-mix(in oklab, var(--button-bg) 90%, #000000);
  color: var(--button-text);
  border-radius: 999px;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  cursor: pointer;
}

.floating-controls-panel select {
  min-width: 0;
  padding-right: 26px;
}

.controls-toggle:hover,
.floating-controls-panel button:hover,
.floating-controls-panel select:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
}

.floating-controls-panel button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.controls-toggle:focus-visible,
.floating-controls-panel button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.floating-controls-panel select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.editor-surface {
  display: none;
}

body.gallery-page.mode-region-menu .workspace-shell {
  grid-template-columns: clamp(300px, 30vw, 430px) minmax(0, 1fr);
}



body.gallery-page.mode-region-menu .sidebar-host {
  border-right: 1px solid var(--sidebar-border);
}

body.gallery-page.mode-region-menu .editor-surface {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(to right, transparent 0, transparent 24px, var(--editor-grid) 24px, var(--editor-grid) 25px)
      0 0 / 100% 100%,
    linear-gradient(to bottom, transparent 0, transparent 34px, var(--editor-grid) 34px, var(--editor-grid) 35px)
      0 0 / 100% 100%,
    var(--editor-bg);
  display: block;
}

body.gallery-page.mode-region-menu .editor-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    color-mix(in oklab, #3d414a 30%, transparent) 0%,
    transparent 38%,
    color-mix(in oklab, #3d414a 22%, transparent) 100%
  );
  pointer-events: none;
}

@media (max-width: 900px) {
  .workspace-shell {
    grid-template-columns: 1fr;
  }

  .sidebar-host {
    min-height: 100dvh;
    border-right: 0;
  }

  .sidebar-host iframe {
    height: 100dvh;
  }

  .editor-surface {
    display: none;
  }

  body.gallery-page.mode-region-menu .workspace-shell {
    grid-template-columns: 1fr;
  }

  body.gallery-page.mode-region-menu .sidebar-host {
    border-right: 0;
  }

  body.gallery-page.mode-region-menu .editor-surface {
    display: none;
  }

  .floating-nav {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 48px);
    right: 6px;
  }
}