/* Main layout and panel structure */

main {
  display: grid;
  grid-template-columns: 2fr 5fr 2fr;
  grid-template-rows: 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-dim) 100%);
  max-width: 100vw;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(var(--primary-rgb), 0.16);
}

.left-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  min-width: 0;
  background: linear-gradient(90deg, rgba(var(--accent-honey-rgb), 0.06) 0%, transparent 22%);
}

.preview-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
  background: radial-gradient(ellipse 85% 55% at 50% 0%, rgba(var(--primary-rgb), 0.08), transparent 65%);
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  overflow-y: auto;
  min-width: 0;
  background: linear-gradient(270deg, rgba(var(--accent-clay-rgb), 0.06) 0%, transparent 22%);
}