/* oide.cam: UI em vidro (08/11/2026). Camada carregada depois do app.css.
   Referência aprovada: foto quente de ponta a ponta, cápsulas de vidro fosco com brilho interno, régua de pontos com
   cursor fino, pílulas de vidro, cacho de três botões fundidos com o do meio branco e trilho vertical fino com números.
   Desempenho: nada de backdrop-filter sobre o visor ao vivo nem sobre fundo que já é borrado (o fosco em canvas faz
   esse papel); o desfoque real fica só em peças pequenas sobre foto nítida e nas folhas. */
:root {
  --v-fill: rgba(255, 255, 255, 0.15);
  --v-fill-2: rgba(255, 255, 255, 0.26);
  --v-fill-esc: rgba(34, 20, 12, 0.34);
  --v-hi: inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 0.5px rgba(255, 255, 255, 0.22);
  --v-sh: 0 10px 30px rgba(24, 10, 2, 0.2);
  --v-blur: blur(20px) saturate(1.5);
  --v-txt: rgba(255, 255, 255, 0.94);
  --v-mut: rgba(255, 255, 255, 0.72);
  --v-sombra-txt: 0 1px 16px rgba(20, 8, 0, 0.28);
  --barra-h: 36px;
}

/* ---------- material ---------- */
.vidro { background: var(--v-fill); box-shadow: var(--v-hi), var(--v-sh); border-radius: 99px; }
.vidro.desfoca { -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }

/* títulos de interface em Jost leve; a marca segue no logotipo (imagem) */
.rl-head h1, .es-head h1, .es-body h2, .ob-body h1, .pw-body h2 {
  font-family: var(--sans); font-variation-settings: normal; font-weight: 300; letter-spacing: -0.025em;
  text-shadow: var(--v-sombra-txt);
}
.es-body h2, .ob-body h1, .pw-body h2 { font-size: clamp(32px, 10.4vw, 42px); line-height: 1.02; }
.ob-body h1 { font-size: clamp(34px, 11vw, 44px); }

/* rótulo em pílula de vidro (substitui o sobrescrito em caixa alta) */
.kick, .es-body .kick, .ob-body .kick {
  justify-self: start; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 99px;
  font: 400 13px/1 var(--sans); letter-spacing: 0; color: var(--v-txt);
  background: var(--v-fill); box-shadow: var(--v-hi);
}

/* ---------- botões ---------- */
.glass-btn { background: var(--v-fill); box-shadow: var(--v-hi), 0 6px 18px rgba(20, 8, 0, 0.16); }
.glass-btn:active { background: var(--v-fill-2); }
.glass-btn svg { stroke-width: 1.5; }
.glass-btn.white-btn { background: #fff; color: #17100b; box-shadow: 0 6px 18px rgba(20, 8, 0, 0.22); }
.tool[aria-pressed="true"] { background: #fff; color: #17100b; }
.pill { font-weight: 500; letter-spacing: -0.005em; }
.pill.white { background: #fff; color: #17100b; box-shadow: 0 8px 24px rgba(20, 8, 0, 0.18); }
.pill.line { background: var(--v-fill); box-shadow: var(--v-hi); color: var(--v-txt); }
.pill.line.danger { color: #ffb4a3; }
.ok-btn { background: #fff; color: #17100b; }

/* abas: pílulas de vidro com a branca deslizando */
.tabs button { height: 32px; padding: 0 15px; font: 500 13px/1 var(--sans); color: var(--v-txt); background: var(--v-fill); box-shadow: var(--v-hi); }
.tabs .tab-ind { height: 32px; background: #fff; box-shadow: 0 4px 14px rgba(20, 8, 0, 0.2); }
.tabs button[aria-selected="true"] { color: #17100b; }
.tabs.sans { background: var(--v-fill); box-shadow: var(--v-hi); }
.tabs.sans button { box-shadow: none; }
.tabs.sans button[aria-selected="true"], .tabs.sans button[aria-checked="true"] { background: #fff; color: #17100b; }

/* ---------- régua em cápsula ---------- */
.ruler {
  height: 54px; margin: 0 16px; border-radius: 99px; overflow: hidden; cursor: pointer;
  -webkit-mask-image: none; mask-image: none;
  background: var(--v-fill); box-shadow: var(--v-hi);
}
.ruler-nome, .ruler-lbl {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; z-index: 2;
  font: 400 15px/1 var(--sans); letter-spacing: -0.005em; color: var(--v-txt); text-shadow: 0 1px 8px rgba(20, 8, 0, 0.25); pointer-events: none;
}
.ruler-nome { left: 20px; }
.ruler-lbl { left: auto; right: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.ruler-pista { position: absolute; top: 0; bottom: 0; left: 112px; right: 76px; }
.ruler .ruler-ticks { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; display: flex; align-items: center; justify-content: space-between; transform: none !important; }
.ruler .ruler-ticks i { width: 4px; height: 4px; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); }
.ruler .ruler-ticks i.big { width: 5px; height: 5px; background: rgba(255, 255, 255, 0.85); }
.ruler-ench {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; border-radius: 99px;
  width: calc(112px + var(--f, 0) * (100% - 188px) + 16px); transition: width 0.12s var(--ease);
  background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 0 0 0.5px rgba(255, 255, 255, 0.26), 6px 0 16px rgba(20, 8, 0, 0.12);
}
.ruler.arrasta .ruler-ench { transition: none; }
.ruler-pista { z-index: 1; }
.ruler .ruler-mark { top: 50%; left: 50%; width: 2.5px; height: 26px; margin: -13px 0 0 -1.25px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.55); transition: left 0.12s var(--ease); }
.ruler.arrasta .ruler-mark { transition: none; }
.ruler::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 40%); }

/* ---------- câmera ---------- */
/* sem véu escuro atrás dos controles: o fosco em canvas já segura o contraste */
.deck::before { background: linear-gradient(180deg, rgba(20, 10, 4, 0), rgba(20, 10, 4, 0.12) 50%, rgba(20, 10, 4, 0.22)); }
.ed-deck::before { background: linear-gradient(180deg, rgba(20, 10, 4, 0), rgba(20, 10, 4, 0.14) 50%, rgba(20, 10, 4, 0.26)); }
.deck { padding-bottom: calc(var(--sb) + var(--barra-h) + 20px); gap: 12px; }
.deck-info b { font-weight: 400; font-size: 18px; }
.deck-info span { font: 400 12px/1.3 var(--sans); }
.sw-disc { box-shadow: var(--v-hi); }
.sw-item[aria-checked="true"] .sw-disc { box-shadow: 0 0 0 2.5px rgba(20, 10, 4, 0.35), 0 0 0 4.5px #fff; }
.sw-item small { font-weight: 400; color: var(--v-mut); }
.sw-item[aria-checked="true"] small { color: #fff; font-weight: 500; }

/* cacho de três botões fundidos: última foto, obturador branco, virar câmera */
.shoot-row {
  display: flex; align-items: center; justify-content: center; gap: 2px; width: max-content; margin: 2px auto 0; padding: 5px;
  border-radius: 99px; background: var(--v-fill); box-shadow: var(--v-hi), var(--v-sh);
}
.shoot-row > :first-child, .shoot-row > :last-child { justify-self: auto; }
.shoot-row .last, .shoot-row .glass-btn { width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: none; backdrop-filter: none; }
.shoot-row .glass-btn svg { width: 24px; height: 24px; }
.last-stack span:first-child { display: none; }
.last-stack span:last-child { inset: 5px; border-radius: 50%; transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.08); }
.last .dot { top: 3px; right: 3px; box-shadow: 0 0 8px var(--acc-glow), 0 0 0 2px rgba(255, 255, 255, 0.9); }
.shutter {
  width: 80px; height: 80px; margin: -9px 0; background: #fff;
  box-shadow: 0 8px 26px rgba(20, 8, 0, 0.3), inset 0 -3px 8px rgba(120, 90, 60, 0.12);
}
.shutter::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(23, 16, 11, 0.1); }

/* trilho vertical: número em cima, linha fina, número embaixo */
.trilho {
  position: absolute; z-index: 21; width: 34px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 9px;
  font: 400 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--v-txt); text-shadow: 0 1px 8px rgba(20, 8, 0, 0.35); pointer-events: none;
}
.trilho .t-linha { position: relative; width: 1.5px; border-radius: 1px; background: rgba(255, 255, 255, 0.34); box-shadow: 0 0 6px rgba(20, 8, 0, 0.18); }
.trilho .t-ench { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 1px; background: #fff; transition: height 0.45s var(--ease); }
.trilho .t-ponto { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); will-change: transform; }
.trilho[hidden] { display: none; }

/* poses: o display de 7 segmentos dá lugar ao trilho (tirei / total) */
.cam-top .poses { position: absolute; right: -6px; top: 0; height: var(--trilho-h, 46vh); padding: 4px 0; pointer-events: auto; font-size: 12px; }
.cam-top .poses #posesSeg, .cam-top .poses > small { display: none; }
.cam-top .poses .t-a { font-size: 15px; font-weight: 500; }
.poses.tick .t-a { animation: tick 0.45s var(--ease); }

/* ---------- barra de canais com rótulo ---------- */
.chan-dots {
  bottom: calc(var(--sb) + 10px); gap: 0; padding: 3px; height: var(--barra-h); border-radius: 99px; color: var(--v-txt);
  background: var(--v-fill-esc); box-shadow: var(--v-hi), var(--v-sh);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.chan-dots.claro { color: var(--v-txt); }
.chan-dots button { position: relative; z-index: 1; width: auto; height: 30px; padding: 0 14px; border-radius: 99px; font: 500 12.5px/1 var(--sans); letter-spacing: 0; color: var(--v-txt); transition: color 0.25s; }
.chan-dots button.perto { color: #17100b; }
.chan-dots .chan-ind { position: absolute; z-index: 0; left: 0; top: 3px; width: 0; height: 30px; border-radius: 99px; background: #fff; box-shadow: 0 4px 12px rgba(20, 8, 0, 0.2); will-change: transform, width; pointer-events: none; }

.osd {
  font: 500 12px/1 var(--sans); letter-spacing: 0.04em; color: var(--v-txt); text-shadow: none; padding: 9px 14px; border-radius: 99px;
  background: var(--v-fill-esc); box-shadow: var(--v-hi); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur);
}
.crt-scan { opacity: 0.1; }

/* ---------- rolos no escuro, sobre a última foto borrada ---------- */
.ch-rolos { background: #1c0f07; color: var(--v-txt); }
.rl-fundo { position: absolute; inset: -16% -10%; overflow: hidden; pointer-events: none; will-change: transform; background: radial-gradient(120% 80% at 70% 20%, #c4551a 0%, #6e2c0e 45%, #1c0f07 100%); }
.rl-fundo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: blur(28px) saturate(1.5) brightness(0.78); transform: scale(1.1); opacity: 0; transition: opacity 0.6s var(--ease); }
.rl-fundo canvas.ok { opacity: 1; }
.rl-fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 15, 7, 0.1), rgba(28, 15, 7, 0.45)); }
.rl-head { background: none; padding: calc(var(--st) + 14px) 16px 14px 22px; transition: padding 0.35s var(--ease); }
.rl-head::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s var(--ease); background: rgba(40, 22, 12, 0.36); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.16); }
.rl-head h1 { font-size: 40px; transform-origin: 0 60%; transition: transform 0.35s var(--ease); }
.rl-head.colado { padding-top: calc(var(--st) + 8px); padding-bottom: 8px; }
.rl-head.colado::before { opacity: 1; }
.rl-head.colado h1 { transform: scale(0.7); }
.round-white svg { stroke: #17100b; }
.rl-list { padding: 4px 12px calc(var(--sb) + 130px); display: grid; gap: 12px; }
.roll { padding: 18px 0 20px; border-radius: 32px; background: var(--v-fill); box-shadow: var(--v-hi), var(--v-sh); }
.roll h2 { font-weight: 400; font-size: 20px; color: var(--v-txt); }
.roll p { color: var(--v-mut); font-size: 13px; }
.roll .acao { background: #fff; color: #17100b; font-weight: 500; }
.card { box-shadow: 0 12px 28px rgba(20, 8, 0, 0.28), 0 0 0 2.5px rgba(255, 255, 255, 0.92); }
.card.vazio { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28); }
.card.mais-card { background: rgba(255, 255, 255, 0.12); }
.rl-av { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 6px 16px rgba(20, 8, 0, 0.3); }
.stack .timer small { color: var(--v-mut); }
.rl-grid { padding: 0 0 calc(var(--sb) + 120px); }
.rl-grid h3 { color: var(--v-txt); font-weight: 400; }
.vazio-msg { color: var(--v-mut); padding: 40px 28px; border-radius: 32px; background: var(--v-fill); box-shadow: var(--v-hi); }
.vazio-msg b { color: var(--v-txt); font-weight: 400; font-size: 22px; }
.view-toggle { bottom: calc(var(--sb) + var(--barra-h) + 22px); background: var(--v-fill-esc); box-shadow: var(--v-hi), var(--v-sh); }
.view-toggle button { color: var(--v-txt); }
.view-toggle button[aria-checked="true"] { background: #fff; color: #17100b; }
.rl-trilho { right: 4px; top: calc(var(--st) + 92px); bottom: calc(var(--sb) + var(--barra-h) + 96px); }

/* ---------- estúdio ---------- */
.ch-estudio { background: #1c0f07; }
.es-scroll { padding-bottom: calc(var(--sb) + var(--barra-h) + 26px); }
.es-head h1 { font-size: 40px; }
.es-card { box-shadow: var(--v-hi); }
.es-body p, .ob-body p { color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 12px rgba(20, 8, 0, 0.3); }
.es-trilho { right: 2px; top: calc(var(--st) + 96px); bottom: calc(var(--sb) + var(--barra-h) + 60px); }

/* ---------- visualizador: foto de ponta a ponta no alto, o resto é a própria foto borrada ---------- */
.vw-amb { filter: blur(40px) saturate(1.5) brightness(0.72); }
.vw-track { top: 0; bottom: 0; padding: 0; }
.vw-card { place-items: start stretch; }
.vw-cap {
  width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 4; border-radius: 0; background: transparent; box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.vw-cap::after { display: none; }
.vw-cap img { will-change: transform; }
.vw-top { gap: 8px; }
.vw-av { box-shadow: var(--v-hi), 0 6px 18px rgba(20, 8, 0, 0.18); background: var(--v-fill); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
.vw-av img { opacity: 0; }
.vw-top .ov-title { padding: 7px 14px; border-radius: 99px; background: var(--v-fill); box-shadow: var(--v-hi); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); flex: 0 1 auto; }
.vw-top .ov-title b { font-weight: 500; font-size: 14px; }
.vw-top .ov-title small { font-size: 11.5px; color: var(--v-mut); }
.vw-top .counter { margin-left: auto; padding: 0 13px; height: 34px; display: inline-flex; align-items: center; border-radius: 99px; font: 400 13px/1 var(--sans); letter-spacing: 0; text-shadow: none; background: var(--v-fill); box-shadow: var(--v-hi); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
.vw-top .counter sup { vertical-align: baseline; font-size: 13px; margin-left: 3px; color: var(--v-mut); }
.vw-top .acc-btn { width: 40px; height: 40px; background: var(--v-fill); color: #fff; box-shadow: var(--v-hi); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }
.vw-bottom { gap: 16px; padding-bottom: calc(var(--sb) + 20px); }
.vw-meta b { font-weight: 500; }
.vw-meta span { color: var(--v-mut); }
.vw-acts { display: flex; justify-content: center; gap: 2px; width: max-content; margin: 0 auto; padding: 5px; border-radius: 99px; background: var(--v-fill); box-shadow: var(--v-hi), var(--v-sh); }
.vw-act { width: 62px; height: 62px; min-width: 0; min-height: 0; border-radius: 50%; display: grid; place-items: center; gap: 0; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.24); }
.vw-act small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vw-main { width: 78px; height: 78px; margin: -8px 0; background: #fff; color: #17100b; box-shadow: 0 8px 26px rgba(20, 8, 0, 0.3); }
.heart[aria-pressed="true"] svg { fill: #fff; stroke: #fff; }
.vw-trilho { right: 4px; top: calc(var(--st) + 74px); bottom: calc(var(--sb) + 196px); }

/* ---------- editor e modelos: barra de três em cápsula ---------- */
.bar3 { margin: 0 16px; padding: 5px; border-radius: 99px; background: var(--v-fill); box-shadow: var(--v-hi), var(--v-sh); }
.bar3 h2 { font-weight: 500; font-size: 15px; }
.bar3 .glass-btn { width: 52px; height: 52px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar3 .ok-btn { background: #fff; color: #17100b; }
.ed-note, .md-hint { font: 400 12px/1.35 var(--sans); color: var(--v-mut); }
.compare-tag, .ed-busy p { font: 500 11.5px/1 var(--sans); letter-spacing: 0.06em; background: var(--v-fill-esc); box-shadow: var(--v-hi); -webkit-backdrop-filter: var(--v-blur); backdrop-filter: var(--v-blur); }

/* ---------- boas-vindas: foto de ponta a ponta ---------- */
.ob-slide .frosted { inset: 0; border-radius: 0; }
.ob-body { left: 0; right: 0; bottom: 0; padding: 0 24px calc(var(--sb) + 26px); gap: 14px; }
.ob-dots i { background: #fff; }
.ob-note { color: var(--v-mut); }

/* ---------- assinatura ---------- */
.pw-list { gap: 8px; font-size: 15px; }
.pw-list li::before { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
.plan { padding: 15px 18px; border-radius: 28px; background: var(--v-fill); box-shadow: var(--v-hi); }
.plan[aria-checked="true"] { background: var(--v-fill-2); box-shadow: var(--v-hi), inset 0 0 0 1.5px #fff, var(--v-sh); }
.plan b { font-weight: 500; }
.plan .pr { font-weight: 500; }
.pw-teste { font: 500 11px/1.3 var(--sans); letter-spacing: 0.06em; }

/* ---------- folhas e aviso ---------- */
.panel { border-radius: 32px; background: rgba(46, 28, 18, 0.62); box-shadow: var(--v-hi), 0 20px 60px rgba(10, 4, 0, 0.45); }
.panel h2 { font-weight: 300; font-size: 30px; font-stretch: normal; letter-spacing: -0.02em; }
.row { border-bottom-color: rgba(255, 255, 255, 0.14); }
.row-lbl, .det-grid small { font: 500 11px/1 var(--sans); letter-spacing: 0.06em; }
.seg2 { background: var(--v-fill); box-shadow: var(--v-hi); }
.seg2 button[aria-checked="true"] { background: #fff; }
.sw:checked { background: #fff; }
.sw:checked::after { background: var(--acc); }
.toast { background: rgba(46, 28, 18, 0.62); box-shadow: var(--v-hi), var(--v-sh); }

@media (hover: hover) and (pointer: fine) {
  .glass-btn:hover, .pill.line:hover, .vw-act:hover { background: var(--v-fill-2); }
  .tabs button:hover { background: var(--v-fill-2); }
}

/* ---------- parallax (motor do VISUALS/ACERVO: medir uma vez, só transform, inércia, desliga em movimento reduzido) ---------- */
.rl-fundo-x { position: absolute; inset: 0; }
.roll .stack, .es-body, .ob-logo, .ob-body .kick, .ob-body h1, .ob-body > p { will-change: transform; }
/* o mosaico de filmes da assinatura deriva devagar por trás do fosco (propriedade translate, soma com o rotate) */
.pw-bg { animation: deriva-pw 26s ease-in-out infinite alternate; }
@keyframes deriva-pw { from { translate: 0 0; } to { translate: -3% -9%; } }
@media (prefers-reduced-motion: reduce) {
  .pw-bg { animation: none; }
  .roll .stack, .es-body, .ob-logo, .ob-body .kick, .ob-body h1, .ob-body > p { will-change: auto; }
}