/* =========================================================
   buk universe · skin v2 — ref. Figma 31-254 (UI kit):
   fundo claro, cards pretos flutuantes, títulos Chillax em
   minúsculas, Geist Mono com tracking largo, pills 100%
   redondos com ativo BRANCO, sliders de valor solto, logo
   cobalto. Todo o tema vive em custom properties.
   ========================================================= */

:root {
  --bg: #ebebeb;
  --card: #0C0C1A;   /* navy da marca = o "preto" (pedido do Felipe) */
  --tx: #f0f1f4;
  --tx-dim: #85878e;
  --topbar-fill: #bec0c6;
  --seed-tx: #54565e;
  --ink: #0C0C1A;
  --cobalto: #2440e0;
  --w07: #ffffff12;
  --w08: #ffffff14;
  --w10: #ffffff1a;
  --radius: 14px;
  --pill: 999px;
  --mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --title: "Chillax", -apple-system, "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  font-family: var(--title);
  color: var(--ink);
  display: grid;
  grid-template-columns: 244px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 12px;
  padding: 12px;
  height: 100vh;
  overflow: hidden;
}

/* ---------- header ---------- */
#topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 12px;
}
#topbar .grow { flex: 1; }
#topbar .seg {
  background: var(--topbar-fill);
  border-radius: var(--pill);
  padding: 3px;
}
#topbar .seg button {
  color: var(--seed-tx);
  border-radius: var(--pill);
  padding: 7px 14px;
  /* min-width:0 solta o piso de min-content ⇒ flex:1 reparte igual e os 4
     pilares ficam do MESMO tamanho (antes Imagem/Ícones vinham mais largos
     que Malha/Texto por causa do comprimento do texto). */
  min-width: 0;
}
#topbar .seg button.sel { background: #fff; color: var(--ink); }
#seedbox {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--seed-tx);
  background: var(--topbar-fill);
  border: 0;
  border-radius: var(--pill);
  padding: 8px 12px;
  width: 88px;
  text-align: center;
}
#regen {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--ink);
  color: var(--tx);
  border: 0;
  border-radius: var(--pill);
  padding: 10px 18px;
  cursor: pointer;
}
#regen:active { transform: translateY(1px); }

/* ---------- painel ---------- */
.panels {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.panels::-webkit-scrollbar { display: none; }

/* cards SÓLIDOS (modo vidro removido 100%, pedido do Felipe 2026-07-22):
   fundo navy chapado, sem translucidez/blur/glow. */
.card {
  background: var(--card);
  color: var(--tx);
  border-radius: var(--radius);
  padding: 14px 14px 16px;
  flex-shrink: 0;
}
.card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card h2 {
  font-family: var(--title);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: lowercase;
}
.card .readout {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--tx-dim);
}
.card .body { display: flex; flex-direction: column; gap: 10px; }
/* card do MODO FELICIDADE ativo: o coração do DNA acende */
.card.ligado { box-shadow: inset 0 0 0 1.5px var(--cobalto); }
.card.ligado h2 { color: #fff; }

/* linhas de slider: label mono espaçado + VALOR solto à direita */
.row { display: flex; flex-direction: column; gap: 5px; }
.row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.row-top label {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--tx-dim);
}
.val { display: flex; align-items: baseline; gap: 3px; }
.val input {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tx);
  background: transparent;
  border: 0;
  width: 44px;
  padding: 2px 0;
  text-align: right;
}
.val input:focus { outline: 0; color: #fff; }
.val .unit {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--tx-dim);
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--w10);
  border-radius: 1px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  margin-top: -4.5px;
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: var(--w10);
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px;
  border: 0; border-radius: 50%;
  background: #fff;
}

/* pills segmentadas — ativo BRANCO, tudo 100% redondo */
.seg {
  display: flex;
  gap: 2px;
  background: var(--w07);
  border-radius: var(--pill);
  padding: 3px;
}
.seg button {
  flex: 1;
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--tx-dim);
  background: transparent;
  border: 0;
  border-radius: var(--pill);
  padding: 7px 4px;
  cursor: pointer;
  white-space: nowrap;
}
.seg button.sel { background: #fff; color: var(--ink); }

.switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.switch span {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--tx-dim);
}
.switch input { accent-color: var(--cobalto); }

.btn {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--w08);
  color: var(--tx);
  border: 0;
  border-radius: var(--pill);
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--w10); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-row { display: flex; gap: 6px; }
.btn-row .btn { flex: 1; }

/* transição (ref Figma 156-745): dois thumbnails A · B com preview real da
   imagem + pílula de rótulo; clicar troca aquela imagem */
.thumbs { display: flex; gap: 8px; }
.thumb {
  position: relative;
  flex: 1;
  aspect-ratio: 122 / 114;
  border: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #0c0c1a;
}
.thumb canvas { width: 100%; height: 100%; display: block; object-fit: cover; }
.thumb .lbl {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .10em;
  white-space: nowrap;
  border-radius: var(--pill);
  padding: 5px 12px;
}
.thumb:hover .lbl { background: var(--cobalto); color: #fff; }

.card input[type="file"] { display: none; }

input.text, textarea.text {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tx);
  background: var(--w07);
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  width: 100%;
}
textarea.text { resize: none; line-height: 1.5; }

/* biblioteca de plays (Animações · Carga da imagem): grade 2 colunas,
   ícone-olho cobalto à frente, rótulo em minúsculas (ref 31-254) */
.body.anim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.anim-grid .btn {
  display: flex;
  align-items: center;
  gap: 7px;
  text-transform: lowercase;
  letter-spacing: .06em;
  text-align: left;
  padding: 8px 11px;
  /* rótulo + glifo play/stop numa linha SÓ. Sem isto o ■ (mais largo que o
     ▸) estourava a coluna de 105px e "corrente"/"cintila" caíam pra 2
     linhas — a grade estica a linha inteira e desalinhava. */
  white-space: nowrap;
  min-width: 0;   /* item de grid encolhe até 1fr — sem isto vaza uns px do card */
}
/* rótulo cresce e empurra o play pra direita; encolhe com reticências se
   um dia um nome for longo demais — nunca quebra a linha nem a altura */
.anim-grid .btn .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.anim-grid .btn .play { flex: 0 0 auto; }
.anim-grid .btn::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid var(--tx);
  background: transparent;
}
.anim-grid .btn.wide { grid-column: 1 / -1; }
/* TOCANDO (ref 49-654): pill BRANCO, ícone vira disco marinho, label azul */
.anim-grid .btn.on {
  background: #fff;
  color: var(--cobalto);
}
.anim-grid .btn.on::before {
  border-color: #101e5a;
  background: #101e5a;
}

/* chips de design das células especiais — preview CIRCULAR; seleção =
   contorno quase-quadrado branco (ref: olho dentro da moldura) */
.dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip {
  width: 36px; height: 36px;
  padding: 3px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  opacity: .45;
}
.dchip.sel { border-color: var(--tx); opacity: 1; }
.dchip canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.dchip.custom.sel { border-style: dashed; }

/* editor de célula (módulo Desenho) */
.cell-editor {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: crosshair;
  touch-action: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.chip.sel { border-color: var(--tx); box-shadow: 0 0 0 2px var(--card); }

/* spots de dupla (Estilo): disco = fundo, miolo = figura */
.spots { display: flex; flex-wrap: wrap; gap: 7px; }
.spot {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--w10);
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.spot i { display: block; width: 10px; height: 10px; border-radius: 50%; }
.spot.sel { border-color: var(--tx); box-shadow: 0 0 0 2px var(--card); }

.note {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--tx-dim);
  line-height: 1.5;
}

/* ---------- 4 pilares (Malha | Texto | Imagem | Ícones) ---------- */
.card { display: none; }
body[data-view="texto"]  .card[data-view~="texto"],
body[data-view="malha"]  .card[data-view~="malha"],
body[data-view="imagem"] .card[data-view~="imagem"],
body[data-view="icones"] .card[data-view~="icones"],
body[data-view="design"] .card[data-view~="design"],
body[data-view="data"]   .card[data-view~="data"] { display: block; }
body[data-view="icones"] #art,
body[data-view="design"] #art,
body[data-view="data"]   #art { display: none; }
body:not([data-view="icones"]) #icon-art { display: none; }
body:not([data-view="design"]) #design-art { display: none; }
body:not([data-view="data"]) #data-art { display: none; }
#icon-art { cursor: crosshair; touch-action: none; }
#design-art { cursor: move; touch-action: none; }
.dchip.icon { opacity: 1; }

/* ---------- palco ---------- */
#stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
#stagewrap {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(20, 20, 20, .14);
}
/* DOCK de export (ref 77-527): barra PRETA em pill, fixa na parte
   inferior — tudo do export mora aqui */
#stagebar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--card);
  border-radius: var(--pill);
  padding: 5px 6px 5px 16px;
  box-shadow: 0 10px 34px rgba(20, 20, 20, .28);
  max-width: 100%;
}
body[data-view="icones"] #stagebar,
body[data-view="design"] #stagebar,
body[data-view="data"]   #stagebar { display: none; }
#dock-title {
  font-family: var(--title);
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  text-transform: lowercase;
  margin-right: 6px;
}
#stagebar .seg.dock-seg {
  background: var(--w07);
  padding: 2px;
}
#stagebar .seg.dock-seg button { padding: 6px 9px; }
#stagebar button.sb {
  font-family: var(--mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  background: #e5e6e9;
  border: 0;
  border-radius: var(--pill);
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#stagebar button.sb:hover { background: #fff; }
#stagebar button.sb:disabled { opacity: .55; cursor: default; }
#stagebar button.sb::before {
  content: attr(data-icone);
  font-size: 10px;
  line-height: 1;
}
#stagebar button.sb.on { background: var(--cobalto); color: #fff; }
#stagebar button.sb.dock-dark {
  background: #2a2a2d;
  color: var(--tx);
}
#stagebar button.sb.dock-dark:hover { background: #3a3a3e; }

/* toast global de feedback (copiado/exportado) */
#toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(90px);
  background: var(--card);
  color: var(--tx);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: var(--pill);
  box-shadow: 0 8px 30px rgba(20, 20, 20, .25);
  transition: transform .2s ease;
  pointer-events: none;
  z-index: 99;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* controle travado (ex.: roundness enquanto o ponto fica sempre redondo) */
.row.travado { opacity: .45; }
.row.travado input[type="range"] { cursor: not-allowed; }

/* INTERRUPTOR: trilho + botão deslizante (substitui a caixinha nativa) */
.switch .sw {
  position: relative;
  width: 34px; height: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  display: block;
}
.switch .sw input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.switch .sw i {
  position: absolute; inset: 0;
  background: var(--w10);
  border-radius: var(--pill);
  transition: background .16s ease;
}
.switch .sw i::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--tx-dim);
  transition: transform .16s ease, background .16s ease;
}
.switch .sw input:checked + i { background: var(--cobalto); }
.switch .sw input:checked + i::after { transform: translateX(14px); background: #fff; }
.switch .sw input:focus-visible + i { box-shadow: 0 0 0 2px var(--tx); }

/* editor de texto: simples, porém com presença — a caixa vira um palco */
textarea.text.lettering {
  font-size: 20px;
  letter-spacing: .06em;
  line-height: 1.35;
  padding: 14px 12px;
  background: var(--w08);
  border-radius: 12px;
  min-height: 84px;
}
textarea.text.lettering:focus {
  outline: 0;
  background: var(--w10);
  box-shadow: inset 0 0 0 1.5px var(--cobalto);
}

/* seg com ÍCONES (alinhamento): o botão vira só o desenho */
.seg.icons button {
  display: grid;
  place-items: center;
  padding: 6px 4px;
}
.seg.icons svg { display: block; }
.seg.icons button circle { fill: var(--tx-dim); }
.seg.icons button.sel circle { fill: var(--ink); }

/* seletor de paletas: 6 nomes não cabem numa linha do painel estreito —
   quebra em grade de 3×2. Numa grade de 2 linhas o raio "pílula" (999px)
   do .seg vira uma curva de ~31px que foge do canto e o pill ativo VAZA;
   aqui o container é um RETÂNGULO arredondado cujo raio aninha o dos botões
   (raio do botão 11 + padding 3 = 14) — tudo assenta flush, sem vazamento. */
.seg.rampas { flex-wrap: wrap; border-radius: 14px; }
.seg.rampas button { flex: 0 0 calc(33.333% - 4px); border-radius: 11px; }

/* cores (card Cores): cada azul da rampa = [swatch liga/desliga] + [#HEX
   editável], grade 2×3. Swatch apagado = tom fora da rampa; input mono. */
.tomlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
/* min-width:0 no item de grid: sem isto o tamanho intrínseco do <input>
   (~146px) estoura a coluna 1fr e o hex vaza pra fora do card (crop). */
.tomrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tomrow .chip { flex: 0 0 auto; width: 20px; height: 20px; opacity: .3; filter: grayscale(.5); }
.tomrow .chip.sel { opacity: 1; filter: none; }
.hexin {
  flex: 1 1 0; min-width: 0; width: 100%;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx); background: var(--w07);
  border: 1px solid transparent; border-radius: 7px; padding: 5px 6px;
}
.hexin:focus { outline: none; border-color: var(--cobalto); background: var(--w10); }

/* swatch "auto" do acento: um anel pontilhado marca que a cor é derivada
   do estilo, não fixa — distingue do tom sólido ao lado */
.chips .chip.auto { position: relative; }
.chips .chip.auto::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  border: 1.5px dotted rgba(255,255,255,.9);
}

/* botão de gravação manual no dock: neutro parado, VERMELHO gravando */
.sb.dock-rec[data-icone]::before { color: #E0483C; }
.sb.dock-rec.rec-on {
  background: #2a0f0d; color: #ff6a5a; border-color: #7a2a22;
}
.sb.dock-rec.rec-on[data-icone]::before { color: #ff6a5a; }

/* picker de fonte (card Texto): cards com "Aa" na própria fonte, ref 151-1273 */
.fontcards { display: flex; gap: 6px; }
.fontcard { flex: 1; padding: 0; border: 0; background: transparent; border-radius: 10px;
  overflow: hidden; cursor: pointer; aspect-ratio: 75 / 44; transition: outline-color .12s; outline: 1.5px solid transparent; }
.fontcard canvas { width: 100%; height: 100%; display: block; border-radius: 10px; }
.fontcard.sel { outline-color: #fff; }
.fontcard.off { opacity: .45; cursor: default; }