/* ============================================================================
   1ClickBeauty — estrutura
   Cromo translucido flutuando sobre o conteudo (nao faixas opacas).
   ========================================================================= */

/* ─────────────  BARRA SUPERIOR  ───────────── */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  flex: 0 0 auto;
  height: var(--toolbar-h);
  padding: 0 var(--gap-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gap-3);

  background: var(--material);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* aresta clara no topo = luz batendo no material */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 0 var(--separator);
}

.toolbar__group { display: flex; align-items: center; gap: var(--gap-2); min-width: 0; }
.toolbar__group--start  { justify-self: start; }
.toolbar__group--center { justify-self: center; }
.toolbar__group--end    { justify-self: end; }

.toolbar__divider {
  width: 1px; height: 20px; margin: 0 var(--gap-1);
  background: var(--separator-firm);
}

.wordmark {
  font-size: .9375rem; font-weight: var(--w-medium); letter-spacing: -.015em;
  white-space: nowrap;
}
.filename {
  font-size: .75rem; letter-spacing: -.002em; color: var(--label-2);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px var(--gap-2);
  margin-left: var(--gap-1);
  border-radius: var(--r-sm);
  border-left: 1px solid var(--separator);
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.filename:hover { background: var(--fill); color: var(--label); }
.filename:active { background: var(--fill-strong); }

/* ─────────────  PALCO  ───────────── */
/* Presets de um lado, ajustes do outro, a foto no meio. Escolher o visual e
   afinar o visual sao duas tarefas diferentes; separadas, cada uma fica onde a
   mao ja espera e nenhuma esconde a outra atras de uma aba. */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--presets-w) minmax(0, 1fr) var(--inspector-w);
}

/* ─────────────  VISOR  ───────────── */
.viewer {
  grid-column: 2;
  position: relative;
  min-width: 0; min-height: 0;
  background: var(--bg-sunken);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.viewer__surface {
  /* Absoluto de propósito. Como item de grid, o tamanho mínimo automático faz
     a superfície inchar até caber o canvas — que pode ter 4000px. Aí a conta
     de "ajustar à tela" mede a superfície inchada e a foto nunca cabe. Preso
     nas bordas do visor, o espaço disponível é sempre o espaço real. */
  position: absolute; inset: 0;
  display: grid; place-items: center;
  min-width: 0; min-height: 0;
  overflow: hidden;
  padding: var(--gap-5);
}
#glcanvas {
  /* Fora do fluxo. Como item de grid, o canvas em tamanho natural (pode ter
     4000px) define a altura da linha e a foto acaba centrada fora da area
     visivel. Ancorado no centro da superficie, o tamanho dele deixa de
     influenciar qualquer coisa. */
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: center center;
  display: block;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  background: #fff;
  touch-action: none;               /* tracking 1:1, sem gesto do navegador */
  will-change: transform;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
#glcanvas.is-ready { opacity: 1; }
.viewer__badge {
  position: absolute; top: var(--gap-5); left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff;
  font-size: .6875rem; font-weight: var(--w-medium); letter-spacing: .01em;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.viewer__hud {
  position: absolute; right: var(--gap-4); bottom: var(--gap-4);
  padding: 4px 10px; border-radius: 999px;
  background: var(--material); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--shadow-sm);
  font-size: .6875rem; font-weight: var(--w-medium); color: var(--label-2);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* ─────────────  PAINÉIS LATERAIS  ───────────── */
.side {
  min-height: 0;
  display: flex; flex-direction: column;
  background: var(--material);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.side--presets { grid-column: 1; border-right: 1px solid var(--separator); }
.side--edit    { grid-column: 3; border-left:  1px solid var(--separator); }

.side__head {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: var(--gap-2);
  padding: var(--gap-4) var(--gap-4) var(--gap-2);
}
.side__title {
  margin: 0; flex: 1 1 auto;
  font-size: .8125rem; font-weight: var(--w-medium); letter-spacing: -.004em;
}
.side__hint { font-size: .6875rem; color: var(--label-3); white-space: nowrap; }

.side__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: var(--gap-6);
  scrollbar-width: thin;
  mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 100%);
}
.side__scroll::-webkit-scrollbar { width: 5px; }
.side__scroll::-webkit-scrollbar-thumb { background: var(--fill-strong); border-radius: 3px; }

/* As abas só existem quando os dois painéis não cabem lado a lado. */
.panetabs { display: none; }