/* oide.cam clean (wireframe aprovado em 08/11/2026, layouts-camera/08_wireframe_clean/WIREFRAME_CLEAN.html).
   A foto em uso vira o fundo, desfocada; a interface flutua em vidro leve (12%), contorno quase invisível, letra fina
   e pouco texto. O laranja fica só na ação principal. A câmera é a única tela escura e sobe por cima da aba.
   Cartões, fotos e painéis em superelipse (corner-shape; no iPhone, recorte do casca.js). Camada carregada por último. */
:root {
  --vd: rgba(255, 255, 255, 0.12);
  --vd-2: rgba(255, 255, 255, 0.2);
  --vd-3: rgba(255, 255, 255, 0.28);
  --brilho: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --fosco: blur(24px) saturate(1.5);
  --t1: #fff;
  --t2: rgba(255, 255, 255, 0.74);
  --t3: rgba(255, 255, 255, 0.55);
  --acc: #fa7014;
  --acc-luz: #ffb27a;
  --esc: #120d0a;
  --tinta: #1e1611;
  --mola: cubic-bezier(0.32, 0.72, 0, 1);
  --barra-h: 64px;
}
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- moldura: tela inteira, sem a TV de tubo ---------- */
.tube { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; background: #5d4c41; }
.crt, .crt-static, .osd { display: none !important; }
.tube.zap { animation: none; }
@media (min-width: 700px) {
  .tube { left: 50%; right: auto; width: 430px; margin-left: -215px; top: 14px; bottom: 14px; border-radius: 52px; corner-shape: squircle; }
}

/* ---------- abas e câmera por cima ---------- */
.chs { display: block; overflow: clip !important; scroll-snap-type: none; }
/* clip: nem foco nem scrollIntoView conseguem rolar a camada para o lado */
.ch { position: absolute; inset: 0; flex: none; overflow: clip; }
.tube, .ov, .pw { overflow: clip; }
.ch-rolos, .ch-estudio { opacity: 0; visibility: hidden; transition: opacity 0.32s ease, visibility 0s linear 0.32s; }
.tube[data-base="2"] .ch-rolos, .tube[data-base="3"] .ch-estudio { opacity: 1; visibility: visible; transition: opacity 0.32s ease, visibility 0s; }
.ch-cam { z-index: 30; transform: translate3d(0, 100%, 0); visibility: hidden; transition: transform 0.55s var(--mola), visibility 0s linear 0.55s; background: var(--esc); }
.tube[data-canal="1"] .ch-cam { transform: none; visibility: visible; transition: transform 0.55s var(--mola), visibility 0s; }

/* ---------- fundo fosco: a foto em uso, desfocada ---------- */
.rl-fundo, .es-fundo, .rolo-fundo { position: absolute; inset: -25%; overflow: hidden; pointer-events: none; z-index: 0; background: radial-gradient(120% 80% at 70% 20%, #c4551a 0%, #6e2c0e 45%, #1c0f07 100%); }
.rl-fundo canvas, .es-fundo canvas, .rolo-fundo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: blur(52px) saturate(1.6) brightness(0.84); transform: scale(1.05); opacity: 0; transition: opacity 0.6s ease; }
.rl-fundo canvas.ok, .es-fundo canvas.ok, .rolo-fundo canvas.ok { opacity: 1; }
.rl-fundo::after, .es-fundo::after, .rolo-fundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 60% at 15% 20%, rgba(255, 255, 255, 0.1), transparent 60%), linear-gradient(180deg, rgba(24, 14, 8, 0.2), rgba(24, 14, 8, 0.12) 40%, rgba(24, 14, 8, 0.3)); }
.ch-rolos, .ch-estudio { background: #5d4c41; color: var(--t1); }

/* ---------- peças comuns ---------- */
.bola { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--t1); background: var(--vd); box-shadow: var(--brilho); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); transition: transform 0.4s var(--mola), background 0.2s; }
.bola:active { transform: scale(0.92); transition-duration: 0.1s; }
.bola svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bola img { display: none; }
.pill { font-weight: 400; }
.pill.acc { background: var(--acc); color: #fff; box-shadow: 0 10px 26px rgba(250, 112, 20, 0.3); }
.pill.white { background: #fff; color: var(--tinta); }
.pill.line { background: var(--vd); box-shadow: var(--brilho); color: var(--t1); }

/* ---------- barra flutuante ---------- */
.chan-dots.dock {
  left: 16px; right: 16px; bottom: calc(var(--sb) + 16px); transform: none; height: auto; padding: 0; gap: 10px; display: flex; align-items: center;
  background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity 0.3s ease, translate 0.45s var(--mola);
}
.tube[data-canal="1"] .chan-dots.dock { opacity: 0; translate: 0 26px; pointer-events: none; }
.dock .chan-ind { display: none; }
.nav-capsula { display: flex; gap: 2px; padding: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); box-shadow: var(--brilho), 0 10px 26px rgba(20, 10, 4, 0.1); }
.chan-dots .tb { position: relative; width: 52px; height: 52px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: rgba(255, 255, 255, 0.72); background: transparent; font: 400 17px/1 var(--sans); transition: background 0.25s, color 0.25s, transform 0.4s var(--mola); }
.chan-dots .tb::after, .chan-dots .cam-bt::after { content: none; }
.chan-dots .tb.perto { color: rgba(255, 255, 255, 0.72); }
.chan-dots .tb[aria-current="true"] { background: rgba(255, 255, 255, 0.22); color: #fff; }
.chan-dots .tb:active { transform: scale(0.92); }
.chan-dots .tb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tb.eu.com-ini svg { display: none; }
.chan-dots .cam-bt { position: relative; margin-left: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: rgba(250, 112, 20, 0.28); box-shadow: 0 10px 26px rgba(250, 112, 20, 0.3); transition: transform 0.4s var(--mola); }
.chan-dots .cam-bt:active { transform: scale(0.92); transition-duration: 0.1s; }
.chan-dots .cam-bt .in { width: 56px; height: 56px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; }
.cam-bt svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cam-bt .n { position: absolute; top: -4px; right: -4px; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 99px; background: #fff; color: var(--tinta); font: 400 11px/20px var(--mono); text-align: center; box-shadow: 0 4px 12px rgba(20, 10, 4, 0.2); }
.cam-bt .n[hidden] { display: none; }

/* ---------- Rolos (tela 01) ---------- */
.ch-rolos .rl-scroll { z-index: 1; padding-bottom: calc(var(--sb) + 110px); }
.rl-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--st) + 10px) 16px 8px; background: none; }
.rl-head::before { background: rgba(40, 22, 12, 0.24); }
.rl-logo { height: 24px; width: auto; display: block; filter: drop-shadow(0 1px 10px rgba(20, 8, 0, 0.2)); }
.rl-head .bola[hidden] { display: none; }
.rl-caps { display: flex; gap: 12px; padding: 14px 16px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.rl-caps::-webkit-scrollbar { display: none; }
.rl-caps[hidden] { display: none; }
.cap { flex: 0 0 auto; width: 74px; display: grid; justify-items: center; gap: 10px; padding: 3px 0 0; transition: transform 0.4s var(--mola); }
.cap:active { transform: scale(0.95); transition-duration: 0.1s; }
.cap .c { width: 74px; height: 98px; border-radius: 44%; corner-shape: squircle; background: rgba(255, 255, 255, 0.1) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); display: grid; place-items: center; color: #fff; }
.cap .c svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cap.aberto .c { background: linear-gradient(160deg, rgba(250, 112, 20, 0.55), rgba(120, 40, 10, 0.55)); box-shadow: 0 0 0 2px var(--acc); }
.cap.aberto.vazio .c { background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.cap.revelando .c { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); animation: revela 2.4s ease-in-out infinite; }
@keyframes revela { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 22px rgba(255, 178, 122, 0.35); } }
.cap.novo .c { box-shadow: 0 0 0 2px #fff; }
.cap .num { font: 400 11.5px/1 var(--mono); color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 10px rgba(20, 8, 0, 0.25); }
.ch-rolos .sec { display: flex; justify-content: space-between; align-items: center; padding: 22px 16px 12px; }
.ch-rolos .sec h2 { margin: 0; font: 300 22px/1 var(--sans); letter-spacing: -0.01em; text-shadow: 0 1px 14px rgba(20, 8, 0, 0.18); }
.ch-rolos .view-toggle { position: static; padding: 3px; gap: 2px; background: var(--vd); box-shadow: var(--brilho); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); }
.ch-rolos .view-toggle button { width: 36px; height: 36px; color: rgba(255, 255, 255, 0.72); }
.ch-rolos .view-toggle button[aria-checked="true"] { background: rgba(255, 255, 255, 0.22); color: #fff; }
.ch-rolos .view-toggle svg { width: 18px; height: 18px; }
.ch-rolos .rl-list { padding: 0 16px; display: block; gap: 0; }
.capas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 46vw, 196px); gap: 10px; }
.capa { position: relative; border-radius: 46px; corner-shape: squircle; background: rgba(255, 255, 255, 0.1) center / cover no-repeat; overflow: hidden; transition: transform 0.4s var(--mola); }
.capa:active { transform: scale(0.97); transition-duration: 0.1s; }
.capa .chip, .vw-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; color: #fff; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28); }
.capa .chip { position: absolute; left: 12px; bottom: 12px; height: 22px; padding: 0 9px; font: 400 10.5px/1 var(--mono); }
.ch-rolos .roll { margin-bottom: 12px; border-radius: 46px; corner-shape: squircle; background: var(--vd); box-shadow: var(--brilho); }
.ch-rolos .vazio-msg { margin-top: 4px; border-radius: 42px; corner-shape: squircle; background: var(--vd); box-shadow: var(--brilho); font: 300 15px/1.45 var(--sans); }
.ch-rolos .vazio-msg b { font-weight: 300; }

/* ---------- Rolo (tela 02) ---------- */
.ov-rolo { background: #5d4c41; color: var(--t1); }
.rolo-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior-y: contain; padding: calc(var(--st) + 76px) 16px calc(var(--sb) + 110px); }
.rolo-topo { position: absolute; z-index: 3; top: calc(var(--st) + 8px); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; }
.rolo-tit { position: absolute; left: 56px; right: 56px; text-align: center; pointer-events: none; text-shadow: 0 1px 14px rgba(20, 8, 0, 0.2); }
.rolo-tit b { display: block; font: 400 17px/1.2 var(--sans); }
.rolo-tit small { display: block; font: 300 12px/1.3 var(--sans); color: var(--t2); margin-top: 2px; }
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100vw - 44px) / 3 * 0.96); grid-auto-flow: dense; gap: 6px; }
@media (min-width: 700px) { .mosaico { grid-auto-rows: 128px; } }
.mosaico .m { border-radius: 26px; corner-shape: squircle; background: rgba(255, 255, 255, 0.1) center / cover no-repeat; transition: transform 0.4s var(--mola); }
.mosaico .m:active { transform: scale(0.96); transition-duration: 0.1s; }
.mosaico .g { grid-column: span 2; grid-row: span 2; border-radius: 40px; }

/* ---------- Foto (tela 03) ---------- */
.ov-vw { background: #3b2e26; --cap-h: min(calc(100dvh - var(--st) - var(--sb) - 330px), 128vw); }
.ov-vw .vw-amb { filter: blur(52px) saturate(1.6) brightness(0.84); }
.ov-vw::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 14, 8, 0.18), rgba(24, 14, 8, 0.1) 40%, rgba(24, 14, 8, 0.3)); }
.ov-vw .vw-track { z-index: 1; top: calc(var(--st) + 66px); bottom: auto; height: var(--cap-h); padding: 0; }
.ov-vw .vw-card { padding: 0 16px; place-items: stretch; }
.ov-vw .vw-cap { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 64px; corner-shape: squircle; -webkit-mask-image: none; mask-image: none; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 40px rgba(20, 10, 4, 0.18); }
.ov-vw .vw-top { z-index: 3; top: calc(var(--st) + 8px); left: 16px; right: 16px; justify-content: space-between; }
.ov-vw .vw-top .ov-title { display: none; }
.ov-vw .vw-top .counter { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; height: auto; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font: 400 15px/1 var(--mono); letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 12px rgba(20, 8, 0, 0.3); }
.ov-vw .vw-top .counter sup { font-size: inherit; vertical-align: baseline; margin: 0; color: var(--t2); }
.ov-vw .vw-av, .ov-vw .vw-top .acc-btn { width: 42px; height: 42px; background: var(--vd); color: #fff; box-shadow: var(--brilho); }
.ov-vw .vw-chip { position: absolute; z-index: 3; left: 30px; top: calc(var(--st) + 66px + var(--cap-h) - 44px); height: 30px; padding: 0 13px 0 5px; display: inline-flex; grid-template-columns: none; gap: 7px; pointer-events: none; }
.ov-vw .vw-chip .vw-mini { display: block; width: 20px; height: 20px; border-radius: 50%; box-shadow: none; }
.ov-vw .vw-chip .vw-meta { display: block; text-align: left; }
.ov-vw .vw-chip .vw-meta b { font: 400 12px/1 var(--sans); text-shadow: none; }
.ov-vw .vw-chip .vw-meta span, .ov-vw .vw-chip .vw-sw { display: none; }
.ov-vw .vw-bottom { z-index: 3; top: calc(var(--st) + 66px + var(--cap-h) + 14px); bottom: auto; padding: 0; gap: 16px; }
.ov-vw .vw-acts { display: flex; justify-content: center; gap: 30px; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
.ov-vw .vw-act { width: 46px; height: 46px; min-width: 0; min-height: 0; border-radius: 50%; background: none; box-shadow: none; color: rgba(255, 255, 255, 0.9); }
.ov-vw .vw-act svg { width: 23px; height: 23px; stroke-width: 1.5; }
.ov-vw .vw-act small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ov-vw .heart[aria-pressed="true"] { color: var(--acc-luz); }
.ov-vw .heart[aria-pressed="true"] svg { fill: var(--acc-luz); stroke: var(--acc-luz); }
.vw-tira { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px; scrollbar-width: none; overscroll-behavior-x: contain; justify-content: safe center; }
.vw-tira::-webkit-scrollbar { display: none; }
.vw-tira .t { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; corner-shape: squircle; background: rgba(255, 255, 255, 0.1) center / cover no-repeat; opacity: 0.7; transition: opacity 0.2s, box-shadow 0.2s; }
.vw-tira .t.on { opacity: 1; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9); }
.ov-vw .vw-trilho { display: none !important; }

/* ---------- Câmera (tela 04) ---------- */
.ch-cam .cam-top {
  top: calc(var(--st) + 6px); left: 16px; right: 16px; height: 58px; padding: 0 10px; border-radius: 30px; corner-shape: squircle;
  display: flex; align-items: center; justify-content: space-around; pointer-events: auto; color: #fff;
  background: rgba(18, 13, 10, 0.28); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.ct-bt { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ct-bt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-bt[hidden] { display: none; }
.ch-cam .tool[aria-pressed="true"], .ch-cam .tool[aria-pressed="true"]:hover { background: none; color: var(--acc); }
.ch-cam .tool .tool-v { bottom: -2px; font: 400 9px/1 var(--mono); color: var(--acc-luz); text-shadow: none; }
.ch-cam .cam-top .poses { position: static; width: auto; height: 44px; padding: 0 8px; display: grid; place-items: center; font: 400 14px/1 var(--mono); color: #fff; pointer-events: auto; }
.ch-cam .cam-top .poses .poses-trilho, .ch-cam .cam-top .poses #posesSeg { display: none; }
.ch-cam #deck {
  left: 10px; right: 10px; bottom: calc(var(--sb) + 10px); padding: 16px 16px 14px; gap: 12px; border-radius: 56px; corner-shape: squircle; color: #fff;
  background: rgba(18, 13, 10, 0.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.ch-cam #deck::before { content: none; }
.ch-cam .deck-info { position: static; opacity: 1; transform: none; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0; margin: 0 auto; pointer-events: auto; text-shadow: none; font: 400 14px/1 var(--sans); color: #fff; }
.ch-cam .deck-info b { font: 400 14px/1 var(--sans); }
.ch-cam .deck-info span { display: none; }
.deck-disco { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.2) center / cover no-repeat; box-shadow: 0 0 0 1.5px #fff; }
.ch-cam #deck:not(.discos) .swatches { display: none; }
.ch-cam #deck.discos .swatches { animation: brota 0.4s var(--mola) both; }
.ch-cam .shoot-row { display: flex; justify-content: space-between; align-items: center; width: auto; margin: 0; padding: 0 8px; gap: 0; background: none; box-shadow: none; border-radius: 0; }
.ch-cam .shoot-row .last { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); overflow: hidden; }
.ch-cam .last-stack span:last-child { inset: 0; border-radius: 50%; box-shadow: none; }
.ch-cam .shutter { width: 78px; height: 78px; margin: 0; background: transparent; box-shadow: inset 0 0 0 4px #fff; }
.ch-cam .shutter::after { inset: 8px; background: #fff; box-shadow: none; transition: transform 0.12s ease; }
.ch-cam .shutter:active::after { transform: scale(0.88); }
.ch-cam .shutter:active { transform: none; }
.ct-gira { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, 0.16); transition: transform 0.4s var(--mola); }
.ct-gira:active { transform: scale(0.92) rotate(-30deg); transition-duration: 0.12s; }
.ct-gira svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* uma régua só: Força, ou Exposição depois de tocar no número */
.ch-cam #deck .ruler { display: block; }
.ch-cam #deck:not(.ev) #ruler, .ch-cam #deck.ev #rulerForca { display: none; }
/* famílias: linha de texto, três por vez, somem nas pontas */
#camTabs { padding: 4px 32%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); justify-content: flex-start; }
#camTabs:not(.abre) { justify-content: flex-start; }
#camTabs:not(.abre) button:not([aria-selected="true"]) { display: inline-flex; }
#camTabs:not(.abre) button[aria-selected="true"] { padding-right: 12px; }
#camTabs:not(.abre) button[aria-selected="true"]::before { content: none; }
#camTabs button, #camTabs button[aria-selected="true"] { height: 30px; padding: 0 12px; background: none; box-shadow: none; color: #fff; font: 400 14px/1 var(--sans); opacity: 0.5; transition: opacity 0.25s; animation: none; }
#camTabs button[aria-selected="true"] { opacity: 1; font-weight: 500; }
#camTabs .tab-ind { display: none; }

/* régua em linha de marcas com agulha (câmera e editor) */
.ruler { height: 44px; margin: 0 4px; border-radius: 0; overflow: visible; background: none; box-shadow: none; cursor: pointer; }
.ruler::after { content: none; }
.ruler .ruler-pista { left: 4px; right: 4px; top: 0; bottom: 18px; }
.ruler .ruler-ticks { top: 50%; height: 16px; margin-top: -8px; }
.ruler .ruler-ticks i { width: 1.5px; height: 10px; border-radius: 1px; background: currentColor; opacity: 0.32; }
.ruler .ruler-ticks i.big { width: 1.5px; height: 16px; opacity: 0.55; }
.ruler .ruler-ench { display: none; }
.ruler .ruler-mark { width: 2px; height: 24px; margin: -12px 0 0 -1px; background: var(--acc); box-shadow: 0 0 10px rgba(250, 112, 20, 0.5); }
.ruler-nome, .ruler-lbl { top: auto; bottom: 0; height: 16px; font: 400 12px/1 var(--mono); text-shadow: none; }
.ruler-nome { left: 6px; font-family: var(--sans); font-weight: 300; color: var(--t3); }
.ruler-lbl { right: 6px; color: #fff; }
.ruler-lbl.troca { cursor: pointer; padding: 0 0 0 10px; pointer-events: auto; z-index: 3; }
.ruler-lbl.troca::before { content: ''; position: absolute; left: -6px; right: -8px; top: -14px; bottom: -14px; }
.ruler-lbl.troca::after { content: '⇄'; margin-left: 6px; opacity: 0.55; font-family: var(--sans); }

/* ---------- Editor (telas 05 e 06) ---------- */
.ov-ed { background: #3b2e26; color: #fff; }
.ov-ed .ed-amb { filter: blur(52px) saturate(1.6) brightness(0.84); }
.ov-ed::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(24, 14, 8, 0.18), rgba(24, 14, 8, 0.1) 40%, rgba(24, 14, 8, 0.32)); }
.ov-ed .ed-photo { z-index: 1; border-radius: 56px; corner-shape: squircle; overflow: hidden; box-shadow: 0 18px 40px rgba(20, 10, 4, 0.22); }
.ov-ed .ed-photo #edCanvas { width: 100%; height: 100%; }
.ov-ed .ed-blur, .ov-ed .ed-photo .vf-ext { display: none; }
.ed-antes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ed-antes[hidden], .ed-corte[hidden] { display: none; }
.ed-corte { position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff; touch-action: none; cursor: ew-resize; }
.ed-corte::before { content: ''; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px; }
.ed-corte b { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 500 13px/1 var(--sans); color: var(--tinta); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
.ov-ed .ed-topo { z-index: 3; top: calc(var(--st) + 8px); left: 16px; right: 16px; justify-content: space-between; }
.ed-meio { display: flex; gap: 4px; }
.ed-ic { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.ed-ic[hidden] { display: none; }
.ed-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-ic.tool[aria-pressed="true"] { color: var(--acc-luz); background: none; }
.ed-ic .tool-v { bottom: -4px; top: auto; font: 400 9px/1 var(--mono); color: var(--acc-luz); text-shadow: none; }
.ed-seg { position: absolute; z-index: 3; top: calc(var(--st) + 60px); left: 50%; transform: translateX(-50%); display: flex; padding: 4px; border-radius: 99px; background: var(--vd); box-shadow: var(--brilho); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); }
.ed-seg button { height: 36px; padding: 0 22px; border-radius: 99px; font: 400 14px/1 var(--sans); color: rgba(255, 255, 255, 0.8); transition: background 0.25s, color 0.25s; }
.ed-seg button[aria-selected="true"] { background: #fff; color: var(--tinta); }
.ov-ed .ed-deck { z-index: 2; gap: 10px; padding: 0 0 calc(var(--sb) + 14px); }
.ov-ed .ed-deck::before { content: none; }
.ov-ed .ed-note { display: none; }
/* filme: Força por padrão, o número troca para a Exposição; estilo: a régua de intensidade do app */
.ov-ed:not(.estilo):not(.ev) #edRuler, .ov-ed:not(.estilo).ev #edRulerForca { display: none; }
.ov-ed.estilo #edTabs { display: none; }
#edTabs [data-etab="estilo"] { display: none; }
#edTabs { padding: 4px 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent); }
#edTabs button, #edTabs button[aria-selected="true"] { height: 30px; padding: 0 12px; background: none; box-shadow: none; color: #fff; font: 400 14px/1 var(--sans); opacity: 0.5; }
#edTabs button[aria-selected="true"] { opacity: 1; font-weight: 500; }
#edTabs .tab-ind { display: none; }
/* discos sem nome: só o escolhido mostra o nome, em laranja claro */
.ov-ed .sw-item small, .ch-cam .sw-item small { opacity: 0; min-height: 1.2em; }
.ov-ed .sw-item[aria-checked="true"] small, .ch-cam .sw-item[aria-checked="true"] small { opacity: 1; color: var(--acc-luz); font: 400 11px/1.15 var(--mono); }
.ov-ed .sw-item[aria-checked="true"] .sw-disc, .ch-cam .sw-item[aria-checked="true"] .sw-disc { box-shadow: 0 0 0 2px var(--acc), 0 0 18px rgba(250, 112, 20, 0.4); }

/* ---------- Estúdio (tela 07) ---------- */
.ch-estudio .es-scroll { z-index: 1; padding: calc(var(--st) + 8px) 16px calc(var(--sb) + 110px); gap: 0; scroll-snap-type: none; }
.ch-estudio .es-head { padding: 10px 0 14px; }
.ch-estudio .es-head h1 { font: 300 34px/1 var(--sans); letter-spacing: -0.02em; }
.ch-estudio .es-card { height: min(calc(100dvh - var(--st) - var(--sb) - 270px), 520px); min-height: 300px; border-radius: 70px; corner-shape: squircle; box-shadow: 0 18px 40px rgba(20, 10, 4, 0.2); }
.ch-estudio .es-card .f-tint { background: linear-gradient(180deg, transparent 55%, rgba(10, 6, 4, 0.22) 100%); }
.ch-estudio .es-body { left: 12px; right: 12px; bottom: 12px; padding: 0; display: block; }
.es-base { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 22px; border-radius: 99px; color: #fff; text-align: left; background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25); transition: transform 0.4s var(--mola); }
.es-base:active { transform: scale(0.97); transition-duration: 0.1s; }
.es-base b { font: 400 16px/1.2 var(--sans); }
.es-base .ir { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--acc); display: grid; place-items: center; flex: none; }
.es-base .ir svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.es-ver { position: absolute; z-index: 3; top: 16px; left: 16px; height: 30px; padding: 0 13px; border-radius: 99px; font: 400 12.5px/1 var(--sans); color: #fff; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28); }
.es-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
.es-porta { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 18px 0 12px; border-radius: 99px; color: #fff; background: var(--vd); box-shadow: var(--brilho); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); transition: transform 0.4s var(--mola); }
.es-porta:active { transform: scale(0.96); transition-duration: 0.1s; }
.es-porta .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); }
.es-porta svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.es-porta b { font: 400 15px/1 var(--sans); }
.es-oculto { display: none !important; }

/* ---------- folhas (Conta, ajustes, rolo, salvar) ---------- */
.panel {
  left: 8px; right: 8px; bottom: calc(var(--sb) + 8px); border-radius: 52px; corner-shape: squircle; padding: 10px 20px 22px; color: #fff;
  background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(34px) saturate(1.5); backdrop-filter: blur(34px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.24);
}
.scrim { background: rgba(24, 14, 8, 0.28); }
.panel h2 { font: 300 28px/1.1 var(--sans); }
.row { font-weight: 300; border-bottom-color: rgba(255, 255, 255, 0.12); }
.row-v { color: var(--t2); }
.grab { background: rgba(255, 255, 255, 0.5); }
.panel-x { background: var(--vd); }
.folha-info { font: 300 15px/1.45 var(--sans); color: var(--t2); margin: 2px 0 16px; }
.folha-acoes { display: grid; gap: 10px; }
.folha-acoes .pill { width: 100%; }
.folha-acoes .timer { display: grid; justify-items: center; font-size: 34px; padding: 4px 0 8px; }

/* ---------- Assinatura (tela 09) ---------- */
.pw { background: #5d4c41; }
.pw .pw-bg { inset: 30px -30px auto; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 62%); mask-image: linear-gradient(180deg, #000 30%, transparent 62%); transform: rotate(-6deg); }
.pw .pw-bg canvas { border-radius: 16px; corner-shape: squircle; }
.pw .pw-frost { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; background: linear-gradient(180deg, rgba(24, 14, 8, 0) 18%, rgba(24, 14, 8, 0.2) 46%, rgba(24, 14, 8, 0.4)); }
.pw .pw-x { top: calc(var(--st) + 10px); right: 16px; width: 42px; height: 42px; background: var(--vd); box-shadow: var(--brilho); -webkit-backdrop-filter: var(--fosco); backdrop-filter: var(--fosco); }
.pw .pw-body h2 { font: 300 36px/1.02 var(--sans); }
.pw .pw-list { display: none; }
.pw .plan { border-radius: 40px; corner-shape: squircle; padding: 14px 18px; }
.pw .plan[aria-checked="true"] { background: var(--vd-2); box-shadow: var(--brilho), inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.pw .plan b, .pw .plan .pr { font-weight: 400; }
.pw #pwComprar, .pw #pwComprar.white { background: var(--acc); color: #fff; box-shadow: 0 10px 26px rgba(250, 112, 20, 0.3); }

/* ---------- boas-vindas: ação principal em laranja ---------- */
.ob-body .pill.white { background: var(--acc); color: #fff; box-shadow: 0 10px 26px rgba(250, 112, 20, 0.3); }

/* ---------- modelos ---------- */
#ov-modelos .bar3 { border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .ch-cam, .ch-rolos, .ch-estudio, .chan-dots.dock { transition: none !important; }
  .cap.revelando .c { animation: none; }
}

/* sem Força (foto em "Original"), a régua de Exposição fica à vista */
.ov-ed #edRulerForca[hidden] + #edRuler { display: block; }
.ch-cam #rulerForca[hidden] + #ruler { display: block; }
/* nomes dos discos: só o escolhido (a roda escreve a opacidade no próprio elemento, então some por visibility) */
.ov-ed .sw-item:not([aria-checked="true"]) small, .ch-cam .sw-item:not([aria-checked="true"]) small { visibility: hidden; }
/* os trilhos laterais saíram da direção clean */
.es-trilho, .rl-trilho, .vw-trilho { display: none !important; }
/* o visor recebe o gesto inteiro: deslizar troca o filme, puxar para baixo fecha a câmera */
.ch-cam .vf { touch-action: none; }

/* ---------- tipografia editorial (wireframe, ajuste de 08/11/2026: "palavras gigantes em contraste com palavras menores")
   Duas vozes: Fraunces 800 macia só na palavra ou no número gigante (uma por tela); Jost 300/400 no resto; DM Mono só em
   número técnico. O texto pequeno senta na linha de base da gigante. Escala 124, 64, 58, 44, 24. ---------- */
.gg { font-family: var(--marca); font-variation-settings: var(--marca-eixos); font-weight: 800; letter-spacing: -0.035em; line-height: 0.86; color: #fff; text-shadow: none; }
.ed-tit { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ed-tit .ln, .ed-num .ln { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ed-tit small, .ed-num small { font: 300 14px/1.3 var(--sans); color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.rl-logo { height: 25px; }

/* Rolos: "Rolos" gigante com a contagem pequena; thumbs em 3 colunas com a data embaixo */
.ch-rolos .sec.ed-tit { padding: 26px 16px 16px; align-items: baseline; }
.ch-rolos .sec .gg { font-size: 64px; margin: 0; }
.ch-rolos .sec .view-toggle { align-self: center; }
.thumbs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
.th3 { display: grid; gap: 7px; text-align: left; transition: transform 0.4s var(--mola); }
.th3:active { transform: scale(0.96); transition-duration: 0.1s; }
.th3 .capa { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: 30px; corner-shape: squircle; position: static; }
.th3 small { font: 400 10.5px/1 var(--mono); color: rgba(255, 255, 255, 0.78); padding-left: 2px; }
.th3:active .capa { transform: none; }

/* tela do rolo: número gigante, "Rolo" pequeno em cima, fotos e data na base; fotos em 4 colunas iguais */
.ov-rolo .rolo-scroll { padding-top: calc(var(--st) + 62px); }
.ed-num { padding: 4px 0 18px; }
.ed-num .sobre { display: block; margin: 0 0 -6px 4px; }
.ed-num .ln { gap: 16px; }
.ed-num .gg { font-size: 124px; }
.ed-num #roloData { line-height: 1.35; }
.mosaico.thumbs4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: row; gap: 6px; }
.mosaico.thumbs4 .m { aspect-ratio: 1; border-radius: 20px; }

/* foto: número gigante, "de 24" na base e o filme à direita; a cápsula sobre a foto e a tira saíram */
.ov-vw { --vw-tit: 62px; --cap-h: min(calc(100dvh - var(--st) - var(--sb) - 340px), 124vw); }
.ov-vw .vw-tit { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(var(--st) + 60px); }
.ov-vw .vw-tit .gg { font-size: 58px; }
.ov-vw .vw-tit .gg small.de { font: 300 15px/1 var(--sans); letter-spacing: 0; color: rgba(255, 255, 255, 0.82); margin-left: 10px; }
.ov-vw .vw-track { top: calc(var(--st) + 60px + var(--vw-tit)); }
.ov-vw .vw-chip, .ov-vw .vw-tira { display: none !important; }
.ov-vw .vw-bottom { top: calc(var(--st) + 60px + var(--vw-tit) + var(--cap-h) + 18px); }
.ov-vw.de-thumb .vw-top, .ov-vw.de-thumb .vw-bottom > *, .ov-vw.de-thumb .vw-tit { animation-delay: 0.18s; }
.voo { position: fixed; z-index: 95; pointer-events: none; background: #222 center / cover no-repeat; box-shadow: 0 18px 40px rgba(20, 10, 4, 0.25); }

/* editor: o filme ou o estilo em gigante embaixo da foto, a dose pequena na mesma base */
.ov-ed .ed-tit { padding: 2px 16px 0; }
.ov-ed .ed-tit .gg { font-size: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ed-val { font: 300 14px/1.3 var(--sans); color: rgba(255, 255, 255, 0.82); white-space: nowrap; padding: 6px 0 6px 10px; }
.ed-val[hidden] { display: none; }
.ed-val.troca::after { content: ' ⇄'; opacity: 0.55; }
.ov-ed .ruler-nome, .ov-ed .ruler-lbl { visibility: hidden; }
.ov-ed .sw-item small { display: none; }

/* Estúdio: "Estúdio" gigante; "Copiar um estilo" em Fraunces sobre a foto com a seta laranja */
.ch-estudio .es-head h1.gg { font-size: 64px; letter-spacing: -0.035em; }
.ch-estudio .es-body { left: 22px; right: 16px; bottom: 20px; }
.es-base { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; align-items: flex-end; }
.es-base b.gg { font-size: 40px; line-height: 0.92; text-shadow: 0 2px 26px rgba(20, 8, 0, 0.28); }
.es-base .ir { width: 54px; height: 54px; box-shadow: 0 10px 24px rgba(250, 112, 20, 0.35); }

/* câmera: o nome do filme é a palavra grande do painel */
.ch-cam .deck-info .deck-disco { display: none; }
.ch-cam .deck-info b { font-family: var(--marca); font-variation-settings: var(--marca-eixos); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.035em; }
.ch-cam .ruler-nome { visibility: hidden; }

/* assinatura: título em duas linhas gigantes e os preços em Fraunces */
.pw .pw-body h2 { font-family: var(--marca); font-variation-settings: var(--marca-eixos); font-weight: 800; font-size: 56px; line-height: 0.86; letter-spacing: -0.035em; }
.pw .plan .pr { font-family: var(--marca); font-variation-settings: var(--marca-eixos); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
.pw .plan .pr small { font: 300 12px/1.3 var(--sans); letter-spacing: 0; margin-top: 4px; }
/* a palavra gigante vence as regras de título anteriores (Jost fina) */
.gg { font-family: var(--marca) !important; font-variation-settings: var(--marca-eixos) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; }
.ch-rolos .sec .gg, .ch-estudio .es-head h1.gg { line-height: 0.86; }
.ov-ed .ed-tit { min-height: 46px; }
/* assinatura em tela baixa: título menor e véu mais firme atrás do texto, que sobe por cima da colagem */
.pw .pw-frost { background: linear-gradient(180deg, rgba(24, 14, 8, 0) 14%, rgba(24, 14, 8, 0.34) 40%, rgba(24, 14, 8, 0.58)); }
.pw .pw-body h2 { text-shadow: 0 2px 24px rgba(20, 8, 0, 0.35); }
@media (max-height: 680px) { .pw .pw-body h2 { font-size: 44px; } }

/* ---------- Estilos de fotógrafo (tela 10): cartões altos com o resultado real ---------- */
.ov-estilos { background: #3b2e26; color: #fff; }
.ov-estilos .rolo-fundo { background: center / cover no-repeat url(../img/estilos/revista.jpg); filter: blur(52px) saturate(1.6) brightness(0.84); }
.ov-estilos .rolo-fundo canvas { display: none; }
.es-topo { z-index: 3; top: calc(var(--st) + 8px); left: 16px; right: 16px; }
.es-tit { position: absolute; z-index: 2; left: 16px; right: 16px; top: calc(var(--st) + 62px); }
.es-tit .gg { font-size: 64px; }
.carrossel { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--st) + 140px); height: min(54dvh, 460px); display: flex; align-items: center; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc((100% - min(72vw, 300px)) / 2); }
.carrossel::-webkit-scrollbar { display: none; }
.ce { position: relative; flex: 0 0 min(72vw, 300px); height: 100%; display: flex; align-items: flex-end; padding: 22px; border-radius: 52px; corner-shape: squircle; overflow: hidden; background: #2a201a center / cover no-repeat; scroll-snap-align: center; scroll-snap-stop: always; box-shadow: 0 22px 46px rgba(20, 10, 4, 0.3); will-change: transform; }
.ce::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(10, 6, 4, 0.5)); }
.ce.antes { background-image: url(../img/demo/praia.jpg) !important; }
.ce-txt { position: relative; display: grid; gap: 9px; }
.ce .gg { font-size: 44px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3); }
.ce small { font: 300 13.5px/1.35 var(--sans); color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.pontos { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--st) + 156px + min(54dvh, 460px)); display: flex; justify-content: center; gap: 7px; }
.pontos i { width: 6px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.4); transition: width 0.3s var(--mola), background 0.3s; }
.pontos i.on { width: 18px; background: #fff; }
.es-usar { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(var(--sb) + 20px); width: auto; }
.es-ver { display: none; }

/* ---------- Layouts (telas 11 e 12): bento com as fotos do rolo ---------- */
.ov-ly { z-index: 56; background: #3b2e26; color: #fff; }
.tube.ly-aberto .chan-dots.dock { opacity: 0; pointer-events: none; }
.ly-topo { z-index: 3; top: calc(var(--st) + 8px); left: 16px; right: 16px; justify-content: space-between; }
.ly-num { position: absolute; left: 50%; transform: translateX(-50%); font: 400 15px/1 var(--mono); letter-spacing: 0.04em; }
.ly-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; overscroll-behavior-y: contain; padding: calc(var(--st) + 62px) 16px calc(var(--sb) + 32px); }
.ly-tit { padding: 0 0 16px; }
.ly-tit .gg { font-size: 64px; }
.ov-ly .ly-seg { position: static; transform: none; width: max-content; margin: 0 auto 16px; }
.galeria-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.galeria-bento figure { margin: 0; }
.galeria-bento figcaption { font: 400 10.5px/1 var(--mono); color: rgba(255, 255, 255, 0.78); margin-top: 8px; padding-left: 2px; }
.ly-item { display: block; width: 100%; transition: transform 0.4s var(--mola); }
.ly-item:active { transform: scale(0.97); transition-duration: 0.1s; }
.bento { display: grid; aspect-ratio: 9 / 16; --k: 1; gap: calc(7px * var(--k)); }
.bento.f45 { aspect-ratio: 4 / 5; }
.bento.mini { --k: 0.46; }
.bento > i { font-style: normal; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; min-height: 0; overflow: hidden; padding: calc(12px * var(--k)); border-radius: calc(26px * var(--k)); corner-shape: squircle; background: rgba(255, 255, 255, 0.1) center / cover no-repeat; color: #fff; }
.bento .bl { background: var(--acc); color: #fff; }
.bento .bc { background: #f9edd4; color: #44281c; }
.bento .bv { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25); }
.bento .gg { color: inherit !important; font-size: calc(46px * var(--k)); overflow-wrap: anywhere; }
.bento .ly-m { font-size: calc(30px * var(--k)); }
.bento small { font: 300 calc(13px * var(--k))/1.2 var(--sans); margin-top: calc(4px * var(--k)); }
.bento .mono { font: 400 calc(12px * var(--k))/1 var(--mono); white-space: nowrap; }
.ly-palco { position: absolute; z-index: 2; top: calc(var(--st) + 64px); bottom: calc(var(--sb) + 98px); left: 16px; right: 16px; display: flex; align-items: center; justify-content: center; }
.bento.grande { --k: 0.92; height: 100%; max-width: 100%; }
.bento.grande.f45 { height: auto; width: 100%; }
.bento .ly-f { cursor: pointer; }
.ly-acoes { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(var(--sb) + 20px); padding: 0; }
.es-porta.acc { background: var(--acc); justify-content: center; box-shadow: 0 10px 26px rgba(250, 112, 20, 0.3); }
.es-porta.acc b { font-weight: 400; }
/* a faixa de arrasto das folhas fica só na altura da alça: com 56 px ela cobria a primeira linha (aviso da sessão de contas) */
.panel-arrasto { height: 30px; }
/* discos sempre à vista entre a régua e as famílias (pedido de 08/11/2026), centrados no escolhido */
.ch-cam #deck .swatches, .ch-cam #deck:not(.discos) .swatches { display: flex; animation: none; }
.ch-cam #deck .swatches { padding-top: 2px; padding-bottom: 0; }
.ch-cam .deck-info { cursor: default; }
/* famílias e abas do editor: todas centradas na mesma altura (a escolhida descia 6 px) */
#camTabs button, #camTabs:not(.abre) button:not([aria-selected="true"]), #edTabs button { display: inline-flex; align-items: center; justify-content: center; }