/* ═════════════════════════════════════════════════════════════
   Vitrine — direção "Privé": tinta profunda, champanhe e rosé,
   vidro líquido em todas as superfícies e feed em cascata.
   Os tokens abaixo são a fonte única de cor, vidro e tipografia.
   ═════════════════════════════════════════════════════════════ */
:root {
  --bg: #07060a; --ink: #0d0b12;
  --text: #f5efe6; --muted: rgba(245, 239, 230, .56); --faint: rgba(245, 239, 230, .34);
  --line: rgba(255, 255, 255, .11); --chip: rgba(255, 255, 255, .07); --card: rgba(255, 255, 255, .055);
  --gold: #e4c48f; --gold-deep: #b8915a; --rose: #ecb3c1; --brand: #e4c48f; --brand-2: #ef9fb3;
  --grad: linear-gradient(115deg, #f8e6c4 0%, #d6ae74 38%, #c99a62 55%, #ecb6c2 100%);
  --on-gold: #1c1408;
  --ok: #8fe0b8; --ok-bg: rgba(52, 211, 153, .14); --warn: #f4cf8a; --warn-bg: rgba(245, 180, 70, .14); --danger: #ff9a9a; --danger-bg: rgba(255, 90, 90, .15);

  /* vidro líquido */
  --glass: linear-gradient(140deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 32%, rgba(255,255,255,.025) 60%, rgba(255,255,255,.09) 100%);
  --glass-strong: linear-gradient(140deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 35%, rgba(255,255,255,.04) 65%, rgba(255,255,255,.12) 100%);
  --blur: blur(28px) saturate(210%) brightness(1.06);
  --blur-xl: blur(44px) saturate(240%) brightness(1.08);
  --edge: inset 0 1px 0 rgba(255,255,255,.42), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.07), inset -1px 0 0 rgba(255,255,255,.05),
          inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -18px 30px -24px rgba(255,255,255,.18);
  --drop: 0 30px 70px -30px rgba(0,0,0,.85), 0 10px 24px -12px rgba(0,0,0,.6);

  --display: "Didot", "Bodoni 72", "Bodoni Moda", "Playfair Display", "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  --radius: 26px; --nav-h: 66px; --top-h: 58px; --dock-gap: 12px; --shadow: none;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
html, body { margin: 0; color: var(--text); font: 16px/1.5 var(--sans); letter-spacing: .005em; -webkit-font-smoothing: antialiased; }
body { padding-bottom: calc(var(--nav-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom)); overscroll-behavior-y: none; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: rgba(228, 196, 143, .35); }

/* ───── fundo vivo: auroras lentas atrás do vidro + grão fino ───── */
.aurora { position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; filter: blur(70px) saturate(140%); }
.aurora i { position: absolute; border-radius: 50%; opacity: .5; animation: drift 38s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 60vmax; height: 60vmax; left: 0; top: 0; background: radial-gradient(circle, #a9824a 0%, transparent 62%); }
.aurora i:nth-child(2) { width: 55vmax; height: 55vmax; right: 0; top: 18vmax; background: radial-gradient(circle, #8a3358 0%, transparent 62%); animation-duration: 46s; animation-delay: -12s; }
.aurora i:nth-child(3) { width: 50vmax; height: 50vmax; left: 18vmax; bottom: 0; background: radial-gradient(circle, #3d2f74 0%, transparent 62%); animation-duration: 52s; animation-delay: -20s; }
.aurora i:nth-child(4) { width: 34vmax; height: 34vmax; right: 22vmax; bottom: 14vmax; background: radial-gradient(circle, #1d4a4a 0%, transparent 62%); opacity: .4; animation-duration: 60s; }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(8vmax,-6vmax,0) scale(1.15); } 100% { transform: translate3d(-6vmax,7vmax,0) scale(.95); } }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .aurora i, .tile { animation: none !important; } }

/* ───── receita do vidro líquido (uma só, aplicada a toda superfície) ───── */
.glass, .top, .bottom, .card, .post, .sheet, .kpi, .tier, .opt, .toast, .banner, .seg, .thread, .compose, .phead, .tabs, .msg, .timeline .date, .stories, .subbar, .hero, .empty, .tile .cap, .chipg {
  position: relative; isolation: isolate; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--edge), var(--drop); border: 0;
}
/* brilho especular que segue o dedo/cursor (--mx/--my vêm do app.js) */
.glass::after, .top::after, .bottom::after, .card::after, .post::after, .sheet::after, .kpi::after, .tier::after, .tile::after, .hero::after, .subbar::after, .phead::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--mx, 18%) var(--my, -10%), rgba(255,255,255,.17), transparent 42%),
              linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%);
  mix-blend-mode: screen; transition: opacity .3s;
}

/* ───── barra superior flutuante e dock inferior ───── */
.top { position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 30; height: var(--top-h); margin: calc(10px + env(safe-area-inset-top)) 10px 0; padding: 0 8px 0 18px;
  display: flex; align-items: center; gap: 6px; border-radius: 22px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl); }
/* LOGO — igual em todos os temas (versão sobre o vermelho): não herda fonte, cor nem tamanho do tema */
.logo { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; line-height: 1;
  font-family: "Avenir Next", "Avenir", "Jost", "Helvetica Neue", Arial, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  color: #fbf3ee; -webkit-text-fill-color: #fbf3ee; background: none; text-transform: none; }
.logo .mark-tile { width: 1.5em; height: 1.5em; flex: none; border-radius: 24%; box-shadow: 0 0 0 1px rgba(255, 228, 220, .22), 0 6px 14px -6px rgba(10, 2, 4, .8); }
.logo .word em { font-style: italic; font-family: "Didot", "Bodoni 72", "Playfair Display", Georgia, serif; font-weight: 400; font-size: 1.08em; letter-spacing: 0; margin-left: .04em; }
@media (max-width: 360px) { .logo { font-size: 19px; } }
.logo small { font-family: var(--sans); font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; -webkit-text-fill-color: var(--muted); font-weight: 600; }
.top .title { font-family: var(--display); font-size: 21px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .spacer { flex: 1; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; font-size: 19px; color: var(--text); transition: background .2s, transform .2s; }
.iconbtn:hover { background: var(--chip); } .iconbtn:active { transform: scale(.92); }
.ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dot { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--grad); color: var(--on-gold); font-size: 10.5px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg), 0 0 14px rgba(228,196,143,.6); }

.bottom { position: fixed; z-index: 30; left: var(--dock-gap); right: var(--dock-gap); bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom)); height: var(--nav-h); padding: 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 33px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl); max-width: 520px; margin: 0 auto; }
.bottom a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); position: relative; border-radius: 27px; transition: color .25s; z-index: 3; }
.bottom a .i { display: grid; place-items: center; font-size: 22px; line-height: 1; }
.bottom a.on { color: var(--text); }
/* a "gota": lente de vidro mais densa atrás da aba ativa */
.bottom a.on::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.26), rgba(255,255,255,.06) 60%, rgba(255,255,255,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.12), 0 6px 18px -6px rgba(0,0,0,.6); }
.bottom a.on .i { color: var(--gold); filter: drop-shadow(0 0 8px rgba(228,196,143,.55)); }
.bottom a.plus .i { width: 48px; height: 48px; border-radius: 50%; color: var(--on-gold); font-size: 26px;
  background: radial-gradient(circle at 32% 25%, #fff6e2 0%, #ecd09d 28%, #c79a5e 62%, #8f6a39 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.8), inset 0 -4px 8px rgba(90,60,20,.55), 0 8px 24px -6px rgba(228,196,143,.65); }
.bottom a.plus span:last-child { display: none; }
.bottom a.plus.on::before { display: none; }
.bottom .dot { top: 5px; right: calc(50% - 24px); }

main { max-width: 640px; margin: 0 auto; min-height: calc(100vh - var(--top-h) - var(--nav-h)); padding-top: 8px; }
main.wide { max-width: 1480px; }
.pad { padding: 14px; }
@media (min-width: 900px) {
  body { padding-bottom: 24px; padding-left: 250px; }
  .top { margin-left: 0; margin-right: 16px; }
  .bottom { top: 16px; bottom: 16px; left: 16px; right: auto; width: 218px; height: auto; max-width: none; margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 92px 12px 16px; border-radius: 30px; }
  .bottom .rail-logo { display: block; position: absolute; top: 24px; left: 22px; right: 12px; padding: 0; background: none !important; }
  .bottom a { flex-direction: row; justify-content: flex-start; gap: 14px; font-size: 12px; padding: 14px 16px; border-radius: 18px; flex: none; }
  .bottom a:hover { background: var(--chip); color: var(--text); }
  .bottom a.plus { order: 9; margin-top: auto; justify-content: center; background: var(--grad); color: var(--on-gold); font-weight: 700; }
  .bottom a.plus .i { width: auto; height: auto; background: none; box-shadow: none; font-size: 20px; }
  .bottom a.plus span:last-child { display: inline; }
  .bottom .dot { position: static; margin-left: auto; }
  .top .logo { visibility: hidden; }
}

/* ───── blocos ───── */
.card { border-radius: var(--radius); padding: 18px; margin: 0 0 14px; }
.flat { border-bottom: 1px solid var(--line); }
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.center { text-align: center; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; }
.eyebrow { font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--grad); flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.22), 0 4px 12px rgba(0,0,0,.5); }
.av.sm { width: 30px; height: 30px; } .av.lg { width: 104px; height: 104px; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 0 4.5px rgba(228,196,143,.55), 0 18px 40px -10px rgba(0,0,0,.8); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.badge.ppv { background: linear-gradient(120deg, rgba(248,230,196,.24), rgba(201,154,98,.18)); color: #f8e2b8; }
.badge.sub { background: rgba(236,179,193,.16); color: #f6cbd5; }
.badge.x { background: rgba(255,110,140,.18); color: #ffc0cc; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--danger-bg); color: var(--danger); }
.verified { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); color: var(--on-gold); font-size: 10px; font-weight: 900; vertical-align: 1px; box-shadow: 0 0 10px rgba(228,196,143,.5); }

/* botões: vidro por padrão; o principal é ouro líquido */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; font-weight: 650; letter-spacing: .02em; cursor: pointer;
  background: rgba(255,255,255,.08); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.1); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  transition: transform .18s, box-shadow .25s, background .25s; }
.btn:hover { background: rgba(255,255,255,.13); }
.btn.primary { background: var(--grad); color: var(--on-gold); box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -3px 8px rgba(120,80,30,.35), 0 10px 30px -10px rgba(228,196,143,.7); }
.btn.primary:hover { box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 -3px 8px rgba(120,80,30,.35), 0 14px 38px -8px rgba(228,196,143,.85); }
.btn.ok { background: rgba(52,211,153,.22); color: var(--ok); } .btn.danger { background: rgba(255,90,90,.2); color: var(--danger); } .btn.ghost { background: transparent; box-shadow: none; }
.btn.block { width: 100%; } .btn.sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:active:not(:disabled) { transform: scale(.97); }
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; color: var(--muted); }
.input { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 16px; border: 0; background: rgba(255,255,255,.06); outline: none; font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1); transition: box-shadow .2s; }
.input:focus { box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 0 0 1px rgba(228,196,143,.7), 0 0 0 4px rgba(228,196,143,.14); }
.input::placeholder { color: var(--faint); }
select.input option { background: #16131c; }
textarea.input { resize: vertical; min-height: 96px; }
.seg { display: flex; padding: 4px; border-radius: 999px; gap: 2px; }
.seg button { flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: none; font-weight: 600; color: var(--muted); cursor: pointer; font-size: 13.5px; letter-spacing: .03em; transition: all .25s; }
.seg button.on { background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,.08)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px -4px rgba(0,0,0,.6); }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ───── stories ───── */
.stories { display: flex; gap: 14px; overflow-x: auto; padding: 14px 14px 12px; margin: 0 10px 4px; border-radius: var(--radius); scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 70px; text-align: center; cursor: pointer; border: 0; background: none; padding: 0; color: var(--text); }
.story .ring { width: 66px; height: 66px; border-radius: 50%; padding: 2.5px; background: rgba(255,255,255,.18); margin: 0 auto 6px; }
.story.new .ring { background: conic-gradient(from 210deg, #f8e6c4, #c99a62, #ecb6c2, #f8e6c4); box-shadow: 0 0 18px rgba(228,196,143,.45); }
.story .ring img, .story .ring .add { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); background: rgba(255,255,255,.06); display: grid; place-items: center; font-size: 24px; color: var(--gold); }
.story .n { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer { position: fixed; inset: 0; z-index: 80; background: #000; color: #fff; display: flex; flex-direction: column; }
.viewer .bars { display: flex; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 10px 6px; }
.viewer .bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.viewer .bars i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f8e6c4, #ecb6c2); }
.viewer .who { display: flex; align-items: center; gap: 10px; padding: 4px 12px; }
.viewer .stage { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; }
.viewer .stage img, .viewer .stage video { max-height: 100%; width: 100%; object-fit: contain; }
.viewer .tap { position: absolute; top: 0; bottom: 0; width: 35%; } .viewer .tap.l { left: 0; } .viewer .tap.r { right: 0; }

/* ───── publicação (vista em lista e página do post) ───── */
.post { margin: 0 10px 16px; border-radius: var(--radius); overflow: hidden; }
.post .head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; position: relative; z-index: 3; }
.post .name { font-weight: 650; }
.post .body { padding: 0 16px 12px; white-space: pre-wrap; word-wrap: break-word; position: relative; z-index: 3; }
.carousel { position: relative; background: #000; margin: 0 8px; border-radius: 20px; overflow: hidden; z-index: 3; }
.carousel .track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center; aspect-ratio: 4 / 5; max-height: 78vh; }
.carousel .slide img, .carousel .slide video { width: 100%; height: 100%; object-fit: cover; }
.carousel .dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.carousel .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.45); transition: width .25s; }
.carousel .dots i.on { width: 18px; background: #fff; }
.carousel .count { position: absolute; top: 12px; right: 12px; background: rgba(20,16,24,.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.locked { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; overflow: hidden; margin: 0 8px; border-radius: 20px; z-index: 3;
  background: radial-gradient(120% 80% at 20% 10%, #5b4127, transparent 60%), radial-gradient(100% 80% at 90% 90%, #5a2238, transparent 60%), #120e16; color: #fff; }
.locked > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.4) brightness(.85); transform: scale(1.15); }
.locked .over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 24px 20px 26px; text-align: center;
  background: linear-gradient(180deg, transparent 30%, rgba(7,6,10,.55)); }
.locked .lock { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: auto; margin-top: 16%; font-size: 30px;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,.08) 55%, rgba(255,255,255,.18)); -webkit-backdrop-filter: blur(18px) saturate(200%); backdrop-filter: blur(18px) saturate(200%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.6), inset 0 -6px 14px rgba(255,255,255,.12), 0 18px 40px -12px rgba(0,0,0,.8); }
.locked .teaser { font-family: var(--display); font-size: 23px; max-width: 440px; text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.locked .meta { font-size: 12.5px; opacity: .9; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; letter-spacing: .02em; }
.locked .btn { min-width: 240px; }
.post .stats { padding: 12px 16px 0; font-size: 12.5px; color: var(--muted); position: relative; z-index: 3; }
.post .actions { display: flex; padding: 4px 8px 8px; position: relative; z-index: 3; }
.post .actions button, .post .actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border: 0; background: none; border-radius: 999px; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 14px; }
.post .actions .on { color: var(--rose); }
.post .actions :hover { background: var(--chip); color: var(--text); }

/* ═════ CASCATA: o feed em colunas, cada peça uma lâmina de vidro ═════ */
.viewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 14px 10px; }
.viewbar h2 { font-size: 26px; }
.viewbar .seg { width: 252px; } .viewbar .seg button { font-size: 12.5px; }
@media (max-width: 420px) { .viewbar { flex-wrap: wrap; } .viewbar .seg { width: 100%; } }
.cascade { column-count: 2; column-gap: 10px; padding: 0 10px 10px; }
@media (min-width: 700px) { .cascade { column-count: 3; column-gap: 14px; padding: 0 14px 14px; } }
@media (min-width: 1150px) { .cascade { column-count: 4; } }
@media (min-width: 1500px) { .cascade { column-count: 5; } }
.cascade > .empty { column-span: all; }
@media (max-width: 330px) { .cascade { column-count: 1; } }
.tile { position: relative; display: block; break-inside: avoid; margin: 0 0 10px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #120e16; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.3), 0 22px 50px -24px rgba(0,0,0,.9);
  transform: translateZ(0); animation: cascade .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@media (min-width: 700px) { .tile { margin-bottom: 14px; border-radius: 28px; } }
@keyframes cascade { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(6px); } }
.tile .media { display: block; position: relative; }
.tile .media img, .tile .media video { width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.tile:hover .media img, .tile:hover .media video { transform: scale(1.05); }
.tile .media.blurred img { filter: blur(16px) saturate(1.4) brightness(.8); transform: scale(1.2); }
.tile .media.blank { aspect-ratio: 4 / 5; background: radial-gradient(120% 80% at 20% 10%, #5b4127, transparent 60%), radial-gradient(100% 80% at 90% 90%, #5a2238, transparent 60%), #120e16; }
/* véu inferior escuro para a legenda de vidro ler bem sobre qualquer imagem */
.tile .media::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(7,6,10,.55)); pointer-events: none; }
.tile .chips { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; justify-content: space-between; align-items: flex-start; z-index: 3; pointer-events: none; }
.chipg { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #fff;
  background: linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,.06)); -webkit-backdrop-filter: blur(16px) saturate(220%); backdrop-filter: blur(16px) saturate(220%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 16px -8px rgba(0,0,0,.7); }
.chipg.gold { background: linear-gradient(120deg, rgba(248,230,196,.55), rgba(201,154,98,.35)); color: #fff8ea; }
.chipg .ic { width: 13px; height: 13px; stroke-width: 2; }
.tile .cap { position: absolute; left: 7px; right: 7px; bottom: 7px; z-index: 3; display: flex; align-items: center; gap: 7px; padding: 6px 6px 6px 6px; border-radius: 18px;
  background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.05) 45%, rgba(255,255,255,.1)); -webkit-backdrop-filter: blur(22px) saturate(220%); backdrop-filter: blur(22px) saturate(220%);
  transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.tile:hover .cap { transform: translateY(-3px); }
.tile .cap .name { display: block; font-size: 12.5px; font-weight: 650; color: #fff; line-height: 1.2; }
.tile .cap .sub { display: block; font-size: 10.5px; color: rgba(255,255,255,.65); line-height: 1.2; }
.tile .lk { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: rgba(255,255,255,.85); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 6px 4px; border-radius: 999px; }
.tile .lk .ic { width: 17px; height: 17px; }
.tile .lk.on { color: var(--rose); } .tile .lk.on .ic { fill: currentColor; filter: drop-shadow(0 0 6px rgba(236,179,193,.7)); }
/* peça trancada: orbe de vidro, chamada e botão de ouro */
.tile.sealed .media img { height: 100%; min-height: 320px; object-fit: cover; }
.tile.sealed .media.blank { aspect-ratio: auto; min-height: 320px; }
.tile .veil { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 44px 14px 66px; text-align: center; color: #fff; }
.tile .orb { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 18px;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.6), rgba(255,255,255,.1) 55%, rgba(255,255,255,.2)); -webkit-backdrop-filter: blur(14px) saturate(200%); backdrop-filter: blur(14px) saturate(200%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.65), inset 0 -6px 12px rgba(255,255,255,.12), 0 14px 30px -10px rgba(0,0,0,.8); }
.tile .orb .ic { width: 24px; height: 24px; }
.tile .veil .t { font-family: var(--display); font-size: 17px; line-height: 1.2; text-shadow: 0 2px 14px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile .veil .btn { min-height: 34px; padding: 0 14px; font-size: 12.5px; }
/* peça só de texto: citação em serifa sobre vidro */
.tile.quote { background: radial-gradient(130% 90% at 0% 0%, rgba(228,196,143,.22), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(236,179,193,.18), transparent 55%), rgba(255,255,255,.04);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.tile.quote .q { display: block; padding: 24px 18px 74px; font-family: var(--display); font-size: 19px; line-height: 1.32; white-space: pre-wrap; word-wrap: break-word; }
.tile.quote .q::before { content: "“"; display: block; font-size: 54px; line-height: .6; color: var(--gold); margin-bottom: 8px; }

/* ───── perfil ───── */
.cover { height: 210px; margin: 0 10px; border-radius: var(--radius); background: var(--grad) center / cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--drop); position: relative; overflow: hidden; }
.cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7,6,10,.65)); }
@media (min-width: 640px) { .cover { height: 280px; } }
.phead { padding: 0 18px 18px; margin: -60px 18px 14px; border-radius: var(--radius); z-index: 3; }
.phead .top-row { display: flex; align-items: flex-end; gap: 10px; margin-top: -52px; position: relative; z-index: 3; }
.phead > * { position: relative; z-index: 3; }
.phead .top-row .btn.sm { padding: 0 12px; flex: none; }
@media (max-width: 400px) { .av.lg { width: 88px; height: 88px; } }
.phead h1 { font-size: 32px; margin-top: 10px; }
.stats-row { display: flex; gap: 20px; margin: 12px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex-wrap: wrap; }
.stats-row b { display: block; color: var(--text); font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.tabs { display: flex; overflow-x: auto; margin: 0 10px 14px; padding: 4px; border-radius: 999px; scrollbar-width: none; position: sticky; top: calc(var(--top-h) + 18px + env(safe-area-inset-top)); z-index: 5; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 1; text-align: center; padding: 10px 14px; font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; border-radius: 999px; position: relative; z-index: 3; transition: all .25s; }
.tabs a.on { color: var(--text); background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.26), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.gridm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 10px; border-radius: 20px; overflow: hidden; }
.gridm a { position: relative; aspect-ratio: 1; background: var(--chip); overflow: hidden; }
.gridm img { width: 100%; height: 100%; object-fit: cover; }
.gridm .blur { filter: blur(8px); transform: scale(1.15); }
.gridm .tag { position: absolute; top: 6px; right: 6px; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,.6); color: #fff; }
.tier { border-radius: 22px; padding: 18px; margin-bottom: 12px; }
.tier > * { position: relative; z-index: 3; }
.tier.best { box-shadow: var(--edge), inset 0 0 0 1px rgba(228,196,143,.55), 0 0 40px -12px rgba(228,196,143,.45), var(--drop); }
.price { font-family: var(--display); font-size: 34px; font-weight: 400; margin: 4px 0; }
.promo { color: var(--rose); font-weight: 700; font-size: 12px; letter-spacing: .04em; }
.subbar { margin: 0 10px 14px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(120deg, rgba(248,230,196,.2), rgba(201,154,98,.12) 50%, rgba(236,182,194,.18)); color: var(--text); }
.subbar > * { position: relative; z-index: 3; }

/* ───── folha inferior ───── */
.sheet-bg { position: fixed; inset: 0; z-index: 70; background: rgba(4,3,6,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 32px 32px 0 0; padding: 8px 20px calc(22px + env(safe-area-inset-bottom)); animation: up .35s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(160deg, rgba(40,33,46,.78), rgba(18,14,22,.86)); -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl); }
.sheet > * { position: relative; z-index: 3; }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 6px auto 14px; }
.sheet h2 { font-size: 26px; margin-bottom: 14px; }
@media (min-width: 640px) { .sheet-bg { align-items: center; } .sheet { border-radius: 32px; } }
@keyframes up { from { transform: translateY(50px); opacity: .3; } } @keyframes fade { from { opacity: 0; } }
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--edge); transition: box-shadow .25s; }
.opt.on { box-shadow: var(--edge), inset 0 0 0 1.5px rgba(228,196,143,.75), 0 0 28px -10px rgba(228,196,143,.6); }
.opt .total { font-weight: 700; }
.menu a, .menu button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 4px; border: 0; background: none; border-bottom: 1px solid var(--line); font-size: 16px; cursor: pointer; text-align: left; color: var(--text); }
.menu .i { font-size: 20px; width: 28px; text-align: center; }

/* ───── ganhos e painel ───── */
.hero { color: var(--text); border-radius: 28px; padding: 22px; margin-bottom: 14px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(248,230,196,.3), transparent 50%), radial-gradient(100% 100% at 100% 100%, rgba(236,182,194,.22), transparent 55%), var(--glass); }
.hero > * { position: relative; z-index: 3; }
.hero .big { font-family: var(--display); font-size: 46px; font-weight: 400; letter-spacing: 0; line-height: 1.05; }
.hero .btn { background: var(--grad); color: var(--on-gold); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpi { border-radius: 20px; padding: 14px; }
.kpi > * { position: relative; z-index: 3; }
.kpi b { display: block; font-family: var(--display); font-size: 21px; font-weight: 400; }
.steps .step { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps .step:last-child { border: 0; }
.steps .tick { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); font-size: 13px; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.steps .done .tick { background: var(--grad); color: var(--on-gold); }
.progress { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.progress b { display: block; height: 100%; background: var(--grad); transition: width .4s; box-shadow: 0 0 12px rgba(228,196,143,.6); }
.timeline .it { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.timeline .date { width: 56px; flex: none; text-align: center; border-radius: 16px; padding: 7px 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.timeline .date b { display: block; font-family: var(--display); font-size: 21px; font-weight: 400; letter-spacing: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll-x { overflow-x: auto; }

/* ───── verificação ───── */
.wizard .stepper { display: flex; gap: 6px; margin-bottom: 18px; }
.wizard .stepper i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.wizard .stepper i.on { background: var(--grad); box-shadow: 0 0 10px rgba(228,196,143,.5); }
.shot { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.04); cursor: pointer; text-align: center; position: relative;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.3); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.selfie { aspect-ratio: 3 / 4; max-width: 280px; margin: 0 auto; border-radius: 50% / 40%; }
.shot .hint { padding: 20px; color: var(--muted); }
.shot .hint .i { font-size: 40px; display: block; margin-bottom: 6px; }
.spinner { width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.1); border-top-color: var(--gold); animation: spin .9s linear infinite; margin: 20px auto; box-shadow: 0 0 24px rgba(228,196,143,.25); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───── composição ───── */
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thumbs .t { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--chip); }
.thumbs .t img, .thumbs .t video { width: 100%; height: 100%; object-fit: cover; }
.thumbs .t .bar { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 4px; border-radius: 2px; background: rgba(0,0,0,.35); overflow: hidden; }
.thumbs .t .bar b { display: block; height: 100%; background: var(--grad); width: 0; transition: width .15s; }
.thumbs .t .x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; }
.thumbs .t .ok { position: absolute; bottom: 4px; right: 6px; color: #fff; text-shadow: 0 1px 3px #000; }
.thumbs .add { display: grid; place-items: center; aspect-ratio: 1; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); font-size: 26px; color: var(--gold); cursor: pointer; background: rgba(255,255,255,.04); }

/* ───── mensagens ───── */
.thread { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin: 0 10px 8px; border-radius: 22px; }
.thread > * { position: relative; z-index: 3; }
.chat { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 100px; }
.msg { max-width: 78%; padding: 10px 14px; border-radius: 20px 20px 20px 6px; align-self: flex-start; word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--grad); color: var(--on-gold); border-radius: 20px 20px 6px 20px; box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 8px 20px -10px rgba(228,196,143,.6); }
.msg img, .msg video { border-radius: 14px; margin: 4px 0; max-height: 320px; }
.msg.paywall { padding: 0; overflow: hidden; width: 260px; }
.msg.paywall .lk { position: relative; height: 200px; display: grid; place-items: center; color: #fff; background: radial-gradient(120% 80% at 20% 10%, #5b4127, transparent 60%), radial-gradient(100% 80% at 90% 90%, #5a2238, transparent 60%), #120e16; }
.msg.paywall .lk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(12px); margin: 0; border-radius: 0; }
.msg.paywall .lk .btn { position: relative; }
.compose { position: fixed; left: 10px; right: 10px; bottom: calc(var(--nav-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom)); z-index: 20; display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-radius: 28px; max-width: 620px; margin: 0 auto; }
.compose > * { position: relative; z-index: 3; }
.compose .input { min-height: 44px; border-radius: 22px; }
@media (min-width: 900px) { .compose { bottom: 16px; left: calc(250px + 50% - 125px); right: auto; transform: translateX(-50%); width: 620px; } }

/* ───── estados ───── */
.empty { text-align: center; padding: 44px 24px; margin: 0 10px; color: var(--muted); border-radius: var(--radius); }
.empty > * { position: relative; z-index: 3; }
.empty .i { font-size: 40px; display: block; margin-bottom: 12px; }
.empty h3 { color: var(--text); margin-bottom: 8px; font-size: 24px; }
.skel { background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%); background-size: 220% 100%; animation: sk 1.4s infinite; border-radius: 24px; }
@keyframes sk { to { background-position: -220% 0; } }
.toast { position: fixed; z-index: 99; left: 50%; bottom: calc(var(--nav-h) + var(--dock-gap) * 2 + 12px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 13px 20px; border-radius: 999px; font-size: 14.5px; animation: up .3s cubic-bezier(.2,.8,.2,1); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl); }
.toast.err { background: linear-gradient(140deg, rgba(255,110,110,.35), rgba(120,20,30,.35)); }
.banner { display: flex; gap: 10px; align-items: center; padding: 13px 16px; border-radius: 18px; margin-bottom: 12px; background: linear-gradient(140deg, rgba(245,180,70,.2), rgba(245,180,70,.06)); color: var(--warn); font-size: 14px; font-weight: 600; }
.banner.ok { background: linear-gradient(140deg, rgba(52,211,153,.2), rgba(52,211,153,.06)); color: var(--ok); }
.qr { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; background: rgba(255,255,255,.05); padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.card > *, .post > *, .glass > * { position: relative; z-index: 3; }

/* ═════ CASCATA: carrossel 3D de vidro ═════
   O app.js calcula, para cada cartão, a distância até o centro e aplica
   translateX + translateZ + rotateY; aqui ficam só a forma e o vidro. */
.flow { --fw: min(74vw, 300px); --fh: calc(var(--fw) * 1.42); position: relative; padding: 6px 0 4px; outline: none; overflow: hidden; overflow: clip; }
@media (min-width: 700px) { .flow { --fw: 330px; } }
@media (min-width: 1150px) { .flow { --fw: 360px; } }
.flow .stage { position: relative; height: calc(var(--fh) + 70px); perspective: 1500px; perspective-origin: 50% 45%; transform-style: preserve-3d; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.flow .stage.dragging { cursor: grabbing; }
.fc { position: absolute; left: 50%; top: 46%; width: var(--fw); height: var(--fh); border-radius: 30px; overflow: hidden; isolation: isolate; background: #120e16;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.4), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 .5px rgba(0,0,0,.4);
  transition: transform .75s cubic-bezier(.16,.84,.24,1), filter .6s, opacity .5s; will-change: transform;
  -webkit-box-reflect: below 14px linear-gradient(transparent 72%, rgba(255,255,255,.14)); }
.stage.dragging .fc { transition: none; }
.fc .ph { position: absolute; inset: 0; }
.fc .ph img, .fc .ph video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.fc .ph img.bl { filter: blur(18px) saturate(1.4) brightness(.8); transform: scale(1.2); }
.fc.txt .ph { background: radial-gradient(130% 90% at 0% 0%, rgba(228,196,143,.35), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgba(236,179,193,.3), transparent 55%), #17121c; }
.fc .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,6,10,.25) 0%, transparent 22%, transparent 45%, rgba(7,6,10,.7) 100%); }
/* reflexo especular que varre o vidro do cartão central */
.fc::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.13) 45%, transparent 58%); background-size: 260% 100%; background-position: 130% 0; transition: background-position 1.2s cubic-bezier(.2,.8,.2,1); }
.fc.on::after { background-position: -30% 0; }
.fc-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; justify-content: space-between; gap: 6px; opacity: 0; transform: translateY(-6px); transition: all .5s .15s; }
.fc.on .fc-top { opacity: 1; transform: none; }
.fc .orb { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 3; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 20px; color: #fff;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.6), rgba(255,255,255,.1) 55%, rgba(255,255,255,.2)); -webkit-backdrop-filter: blur(14px) saturate(200%); backdrop-filter: blur(14px) saturate(200%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.65), inset 0 -6px 12px rgba(255,255,255,.12), 0 14px 30px -10px rgba(0,0,0,.8); }
.fc .orb .ic { width: 28px; height: 28px; }
/* painel de informações: vidro grosso preso ao pé do cartão */
.fc .info { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; padding: 14px 16px 14px; border-radius: 22px; color: #fff;
  background: linear-gradient(150deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 40%, rgba(20,16,26,.35)); -webkit-backdrop-filter: blur(26px) saturate(220%); backdrop-filter: blur(26px) saturate(220%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 30px -12px rgba(0,0,0,.7); }
.fc .info h3 { font-size: 22px; line-height: 1.15; }
.fc .info .cnt { font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }
.fc .info .sub { font-size: 11.5px; color: rgba(255,255,255,.62); margin-top: 2px; }
.fc .info p { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.fc .info .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: rgba(255,255,255,.6); letter-spacing: .03em; }
.fc .info .meta span { display: inline-flex; align-items: center; gap: 4px; } .fc .info .meta .ic { width: 12px; height: 12px; }
.fc .info .btn { margin-top: 12px; width: 100%; }
.fc .info p, .fc .info .meta, .fc .info .btn, .fc .info .cnt { transition: opacity .4s .1s; }
.fc:not(.on) .info p, .fc:not(.on) .info .meta, .fc:not(.on) .info .btn, .fc:not(.on) .info .cnt { opacity: 0; height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; pointer-events: none; }
.fc.txt .info p { -webkit-line-clamp: 7; font-family: var(--display); font-size: 18px; line-height: 1.3; color: #fff; }
/* barra de controle: pílula de vidro sob o carrossel */
.flowbar { position: relative; z-index: 5; display: flex; align-items: center; gap: 6px; width: min(calc(100% - 20px), 520px); margin: -10px auto 18px; padding: 6px; border-radius: 999px;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl); box-shadow: var(--edge), var(--drop); }
.flowbar .iconbtn { width: 38px; height: 38px; flex: none; background: rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.flowbar .iconbtn .ic { width: 18px; height: 18px; }
.flowbar .flip .ic { transform: scaleX(-1); }
.flowbar .iconbtn.on { color: var(--rose); } .flowbar .iconbtn.on .ic { fill: currentColor; }
.flowbar .grow { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.flowbar .grow b { font-size: 12.5px; font-weight: 650; } .flowbar .grow span { font-size: 10.5px; color: var(--muted); }
.flowbar .chipg { flex: none; }
@media (max-width: 420px) { .flowbar .chipg, .flowbar [data-f=play] { display: none; } }
@media (prefers-reduced-motion: reduce) { .fc, .fc::after { transition: none; } }

/* ═════════════════════════════════════════════════════════════
   TEMA "ATELIER" — luxo discreto: sala ao entardecer (areia, carvalho,
   luz de janela), vidro esfumaçado quente com borda fina e clara,
   tipografia sans geométrica e acento moca. Só tokens e ajustes finos;
   a estrutura é a mesma do tema Privé.
   ═════════════════════════════════════════════════════════════ */
html:is([data-theme="atelier"], [data-theme="club"]) {
  --bg: #3b3029; --ink: #2c231d;
  --text: #fbf6ef; --muted: rgba(251, 246, 239, .64); --faint: rgba(251, 246, 239, .4);
  --line: rgba(255, 246, 236, .16); --chip: rgba(255, 246, 236, .1); --card: rgba(255, 246, 236, .08);
  --gold: #ecd3b4; --gold-deep: #b98a62; --rose: #f0b49b; --brand: #e6c7a4; --brand-2: #f0b49b;
  --grad: linear-gradient(180deg, rgba(196, 142, 106, .92), rgba(152, 102, 72, .92));
  --on-gold: #fffaf4;
  --glass: linear-gradient(180deg, rgba(255, 246, 236, .17) 0%, rgba(120, 92, 70, .2) 55%, rgba(70, 52, 40, .28) 100%);
  --glass-strong: linear-gradient(180deg, rgba(255, 246, 236, .2) 0%, rgba(110, 84, 64, .26) 60%, rgba(64, 48, 37, .34) 100%);
  --blur: blur(18px) saturate(140%); --blur-xl: blur(24px) saturate(150%);
  --edge: inset 0 0 0 1px rgba(255, 248, 240, .34), inset 0 1px 0 rgba(255, 255, 255, .3);
  --drop: 0 20px 44px -24px rgba(28, 18, 10, .7), 0 4px 12px -6px rgba(28, 18, 10, .35);
  --display: "Avenir Next", "Avenir", "Outfit", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --sans: "Avenir Next", "Avenir", -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --radius: 20px;
}
/* a sala: paredes de areia iluminadas pela janela, móvel de carvalho embaixo, sombras de folhagem */
html:is([data-theme="atelier"], [data-theme="club"]) body::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(70% 55% at 12% 6%, rgba(255, 238, 214, .55), transparent 62%),
    radial-gradient(45% 35% at 88% 18%, rgba(255, 210, 160, .28), transparent 65%),
    linear-gradient(180deg, #a8937d 0%, #8d7764 30%, #6f5b4a 58%, #54412f 74%, #3d2f24 100%); }
html:is([data-theme="atelier"], [data-theme="club"]) .aurora { filter: blur(40px); opacity: .9; }
html:is([data-theme="atelier"], [data-theme="club"]) .aurora i { opacity: .55; animation-duration: 70s; }
html:is([data-theme="atelier"], [data-theme="club"]) .aurora i:nth-child(1) { background: radial-gradient(circle, #f6e3c8 0%, transparent 60%); }
html:is([data-theme="atelier"], [data-theme="club"]) .aurora i:nth-child(2) { background: radial-gradient(circle, #c9925f 0%, transparent 60%); opacity: .35; }
html:is([data-theme="atelier"], [data-theme="club"]) .aurora i:nth-child(3) { background: radial-gradient(circle, #6e7a5c 0%, transparent 60%); opacity: .3; }
html:is([data-theme="atelier"], [data-theme="club"]) .aurora i:nth-child(4) { background: radial-gradient(circle, #2a1f18 0%, transparent 60%); opacity: .5; }
/* luz de janela atravessando folhagem: faixas diagonais muito suaves */
html:is([data-theme="atelier"], [data-theme="club"]) body::after { opacity: .5; mix-blend-mode: soft-light;
  background-image: repeating-linear-gradient(118deg, transparent 0 70px, rgba(40, 26, 16, .22) 70px 110px, transparent 110px 190px); filter: blur(14px); }
html:is([data-theme="atelier"], [data-theme="club"]) h1, html:is([data-theme="atelier"], [data-theme="club"]) h2, html:is([data-theme="atelier"], [data-theme="club"]) h3 { font-weight: 500; letter-spacing: -.01em; }
html:is([data-theme="atelier"], [data-theme="club"]) .glass::after, html:is([data-theme="atelier"], [data-theme="club"]) .top::after, html:is([data-theme="atelier"], [data-theme="club"]) .bottom::after, html:is([data-theme="atelier"], [data-theme="club"]) .card::after,
html:is([data-theme="atelier"], [data-theme="club"]) .post::after, html:is([data-theme="atelier"], [data-theme="club"]) .sheet::after, html:is([data-theme="atelier"], [data-theme="club"]) .kpi::after, html:is([data-theme="atelier"], [data-theme="club"]) .tier::after,
html:is([data-theme="atelier"], [data-theme="club"]) .tile::after, html:is([data-theme="atelier"], [data-theme="club"]) .hero::after, html:is([data-theme="atelier"], [data-theme="club"]) .subbar::after, html:is([data-theme="atelier"], [data-theme="club"]) .phead::after { opacity: .45; }
/* marca e moldura como na barra do vídeo: logo em creme, barras finas, itens discretos */
html:is([data-theme="atelier"], [data-theme="club"]) .top { border-radius: 16px; height: 56px; }
html:is([data-theme="atelier"], [data-theme="club"]) .bottom { border-radius: 22px; }
@media (min-width: 900px) { html:is([data-theme="atelier"], [data-theme="club"]) .bottom { border-radius: 22px; } html:is([data-theme="atelier"], [data-theme="club"]) .bottom::before { background: none; color: var(--text); -webkit-text-fill-color: currentColor; font-weight: 600; font-size: 24px; } }
html:is([data-theme="atelier"], [data-theme="club"]) .bottom a { letter-spacing: .02em; text-transform: none; font-size: 11px; }
html:is([data-theme="atelier"], [data-theme="club"]) .bottom a.on::before { background: rgba(255, 246, 236, .14); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .3); border-radius: 16px; }
html:is([data-theme="atelier"], [data-theme="club"]) .bottom a.on .i { color: var(--text); filter: none; }
html:is([data-theme="atelier"], [data-theme="club"]) .bottom a.plus .i { background: var(--grad); box-shadow: inset 0 0 0 1px rgba(255, 238, 220, .45), 0 8px 18px -8px rgba(60, 35, 20, .8); color: #fffaf4; border-radius: 16px; width: 46px; height: 40px; }
html:is([data-theme="atelier"], [data-theme="club"]) .dot { box-shadow: 0 0 0 2px #4a3a2e; }
html:is([data-theme="atelier"], [data-theme="club"]) .eyebrow { letter-spacing: .22em; color: var(--gold); }
/* botões: vidro claro; o principal é moca translúcido com borda fina (o "Log in" do vídeo) */
html:is([data-theme="atelier"], [data-theme="club"]) .btn { border-radius: 12px; font-weight: 600; background: rgba(255, 246, 236, .1); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .3); }
html:is([data-theme="atelier"], [data-theme="club"]) .btn:hover { background: rgba(255, 246, 236, .18); }
html:is([data-theme="atelier"], [data-theme="club"]) .btn.primary { background: var(--grad); color: #fffaf4; box-shadow: inset 0 0 0 1px rgba(255, 232, 210, .5), inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 22px -12px rgba(60, 35, 20, .9); }
html:is([data-theme="atelier"], [data-theme="club"]) .btn.primary:hover { filter: brightness(1.06); box-shadow: inset 0 0 0 1px rgba(255, 232, 210, .6), inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 26px -12px rgba(60, 35, 20, .95); }
html:is([data-theme="atelier"], [data-theme="club"]) .seg, html:is([data-theme="atelier"], [data-theme="club"]) .tabs { border-radius: 14px; }
html:is([data-theme="atelier"], [data-theme="club"]) .seg button, html:is([data-theme="atelier"], [data-theme="club"]) .tabs a { border-radius: 10px; }
html:is([data-theme="atelier"], [data-theme="club"]) .seg button.on, html:is([data-theme="atelier"], [data-theme="club"]) .tabs a.on { background: rgba(255, 246, 236, .2); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .32); }
/* campo de busca/entrada: vidro dentro do vidro, anel claro no foco (como o "Search brokers") */
html:is([data-theme="atelier"], [data-theme="club"]) .input { border-radius: 12px; background: rgba(40, 28, 20, .25); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .28); }
html:is([data-theme="atelier"], [data-theme="club"]) .input:focus { box-shadow: inset 0 0 0 1.5px rgba(255, 238, 220, .75), 0 0 0 4px rgba(255, 238, 220, .12); }
html:is([data-theme="atelier"], [data-theme="club"]) select.input option { background: #3b3029; }
/* detalhes que no Privé brilhavam em ouro passam a creme e moca */
html:is([data-theme="atelier"], [data-theme="club"]) .verified { box-shadow: none; }
html:is([data-theme="atelier"], [data-theme="club"]) .story.new .ring { background: linear-gradient(180deg, #f4e2cc, #c48e6a); box-shadow: none; }
html:is([data-theme="atelier"], [data-theme="club"]) .story .ring img, html:is([data-theme="atelier"], [data-theme="club"]) .story .ring .add { border-color: #5a4636; }
html:is([data-theme="atelier"], [data-theme="club"]) .av { box-shadow: 0 0 0 1.5px rgba(255, 248, 240, .45); }
html:is([data-theme="atelier"], [data-theme="club"]) .av.lg { box-shadow: 0 0 0 3px rgba(255, 248, 240, .5), 0 18px 40px -12px rgba(28, 18, 10, .8); }
html:is([data-theme="atelier"], [data-theme="club"]) .badge, html:is([data-theme="atelier"], [data-theme="club"]) .chipg { background: rgba(255, 246, 236, .16); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .3); color: #fffaf4; }
html:is([data-theme="atelier"], [data-theme="club"]) .badge.ppv, html:is([data-theme="atelier"], [data-theme="club"]) .chipg.gold { background: rgba(176, 122, 88, .62); color: #fffaf4; }
html:is([data-theme="atelier"], [data-theme="club"]) .tier.best, html:is([data-theme="atelier"], [data-theme="club"]) .opt.on { box-shadow: var(--edge), inset 0 0 0 1.5px rgba(236, 211, 180, .75), var(--drop); }
html:is([data-theme="atelier"], [data-theme="club"]) .progress b, html:is([data-theme="atelier"], [data-theme="club"]) .wizard .stepper i.on { box-shadow: none; }
html:is([data-theme="atelier"], [data-theme="club"]) .spinner { border-top-color: var(--text); box-shadow: none; }
html:is([data-theme="atelier"], [data-theme="club"]) .msg.me { box-shadow: inset 0 0 0 1px rgba(255, 232, 210, .45); }
html:is([data-theme="atelier"], [data-theme="club"]) .price, html:is([data-theme="atelier"], [data-theme="club"]) .hero .big, html:is([data-theme="atelier"], [data-theme="club"]) .kpi b, html:is([data-theme="atelier"], [data-theme="club"]) .stats-row b, html:is([data-theme="atelier"], [data-theme="club"]) .timeline .date b { font-weight: 500; letter-spacing: -.02em; }
html:is([data-theme="atelier"], [data-theme="club"]) .hero { background: radial-gradient(120% 120% at 0% 0%, rgba(255, 238, 214, .28), transparent 55%), var(--glass); }
html:is([data-theme="atelier"], [data-theme="club"]) .subbar { background: linear-gradient(180deg, rgba(196, 142, 106, .35), rgba(120, 82, 58, .3)); }
/* fundos de conteúdo trancado/sem imagem em tons de madeira e areia */
html:is([data-theme="atelier"], [data-theme="club"]) .locked, html:is([data-theme="atelier"], [data-theme="club"]) .msg.paywall .lk, html:is([data-theme="atelier"], [data-theme="club"]) .tile .media.blank,
html:is([data-theme="atelier"], [data-theme="club"]) .fc.txt .ph { background: radial-gradient(120% 80% at 15% 5%, rgba(255, 236, 210, .45), transparent 60%), linear-gradient(180deg, #8d7764, #4f3d30); }
html:is([data-theme="atelier"], [data-theme="club"]) .tile.quote { background: radial-gradient(130% 90% at 0% 0%, rgba(255, 236, 210, .3), transparent 55%), rgba(255, 246, 236, .08); }
html:is([data-theme="atelier"], [data-theme="club"]) .tile.quote .q::before { color: var(--gold); }
html:is([data-theme="atelier"], [data-theme="club"]) .tile, html:is([data-theme="atelier"], [data-theme="club"]) .fc { border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .3), 0 24px 50px -24px rgba(28, 18, 10, .85); }
html:is([data-theme="atelier"], [data-theme="club"]) .fc .info { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 246, 236, .18), rgba(70, 52, 40, .38)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .32); }
html:is([data-theme="atelier"], [data-theme="club"]) .tile .cap { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 246, 236, .2), rgba(70, 52, 40, .32)); box-shadow: inset 0 0 0 1px rgba(255, 248, 240, .3); }
html:is([data-theme="atelier"], [data-theme="club"]) .flowbar { border-radius: 16px; }
html:is([data-theme="atelier"], [data-theme="club"]) .flowbar .iconbtn, html:is([data-theme="atelier"], [data-theme="club"]) .iconbtn { border-radius: 10px; }
html:is([data-theme="atelier"], [data-theme="club"]) .sheet { background: linear-gradient(180deg, rgba(120, 96, 78, .82), rgba(62, 48, 38, .9)); border-radius: 22px 22px 0 0; }
@media (min-width: 640px) { html:is([data-theme="atelier"], [data-theme="club"]) .sheet { border-radius: 22px; } }
html:is([data-theme="atelier"], [data-theme="club"]) .toast { border-radius: 14px; }
html:is([data-theme="atelier"], [data-theme="club"]) .viewer .bars i b { background: #fbf6ef; }
html:is([data-theme="atelier"], [data-theme="club"]) .carousel, html:is([data-theme="atelier"], [data-theme="club"]) .locked { border-radius: 14px; }
html:is([data-theme="atelier"], [data-theme="club"]) ::selection { background: rgba(236, 211, 180, .35); }

/* ───── marca: símbolo (redoma de vitrine com o V) + nome ───── */
.bottom .rail-logo { display: none; }
@media (min-width: 900px) { .bottom .rail-logo { display: block; } .bottom .rail-logo .logo { font-size: 24px; } }

/* ═════════════════════════════════════════════════════════════
   TEMA "ROUGE" — identidade VitriniClub (padrão). Herda a estrutura do
   Atelier (vidro esfumaçado, borda fina, sans geométrica) e troca a sala
   de areia por bordô, vinho e terracota, com acento carmim e rosé.
   Paleta oficial em docs/IDENTIDADE.md.
   ═════════════════════════════════════════════════════════════ */
html[data-theme="club"] {
  --bg: #2a1215; --ink: #1f0c0f;
  --text: #fbf3ee; --muted: rgba(251, 243, 238, .66); --faint: rgba(251, 243, 238, .42);
  --line: rgba(255, 236, 230, .16); --chip: rgba(255, 236, 230, .1); --card: rgba(255, 236, 230, .08);
  --gold: #f4c9c0; --gold-deep: #c23b3f; --rose: #f4a9a0; --brand: #f4c9c0; --brand-2: #f0a49a;
  --grad: linear-gradient(180deg, rgba(206, 70, 72, .95), rgba(150, 36, 46, .95));
  --glass: linear-gradient(180deg, rgba(255, 236, 230, .16) 0%, rgba(120, 40, 46, .22) 55%, rgba(60, 18, 24, .32) 100%);
  --glass-strong: linear-gradient(180deg, rgba(255, 236, 230, .19) 0%, rgba(112, 36, 44, .28) 60%, rgba(52, 16, 21, .38) 100%);
  --edge: inset 0 0 0 1px rgba(255, 228, 220, .32), inset 0 1px 0 rgba(255, 255, 255, .28);
  --drop: 0 20px 44px -24px rgba(20, 4, 8, .8), 0 4px 12px -6px rgba(20, 4, 8, .4);
  --display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Avenir", -apple-system, "Helvetica Neue", system-ui, sans-serif;
}
/* tipografia Rouge: Cormorant nos títulos (corpo maior, a fonte é miúda), Jost no texto; o logo mantém o próprio desenho */
html[data-theme="club"] h1, html[data-theme="club"] h2, html[data-theme="club"] h3 { font-weight: 600; letter-spacing: 0; line-height: 1.08; }
html[data-theme="club"] h1 { font-size: 36px; } html[data-theme="club"] h2 { font-size: 30px; } html[data-theme="club"] h3 { font-size: 23px; }
html[data-theme="club"] .fc .info h3 { font-size: 26px; } html[data-theme="club"] .viewbar h2 { font-size: 32px; } html[data-theme="club"] .phead h1 { font-size: 38px; }
html[data-theme="club"] .top .title { font-family: var(--display); font-weight: 600; font-size: 24px; }
html[data-theme="club"] .price, html[data-theme="club"] .hero .big, html[data-theme="club"] .kpi b, html[data-theme="club"] .stats-row b, html[data-theme="club"] .timeline .date b { font-weight: 600; letter-spacing: 0; }
html[data-theme="club"] .eyebrow { font-family: var(--sans); font-weight: 500; }
/* a sala em vermelho: parede de terracota rosada tocada pela luz, veludo vinho embaixo */
html[data-theme="club"] body::before {
  background:
    radial-gradient(70% 55% at 12% 6%, rgba(255, 200, 186, .3), transparent 62%),
    radial-gradient(45% 35% at 88% 18%, rgba(255, 140, 110, .2), transparent 65%),
    linear-gradient(180deg, #8a3d43 0%, #7a2f37 28%, #6a2530 55%, #4a1820 74%, #2a1015 100%); }
html[data-theme="club"] .aurora i:nth-child(1) { background: radial-gradient(circle, #e8a99c 0%, transparent 60%); opacity: .4; }
html[data-theme="club"] .aurora i:nth-child(2) { background: radial-gradient(circle, #d2474a 0%, transparent 60%); opacity: .4; }
html[data-theme="club"] .aurora i:nth-child(3) { background: radial-gradient(circle, #6b1a2b 0%, transparent 60%); opacity: .45; }
html[data-theme="club"] .aurora i:nth-child(4) { background: radial-gradient(circle, #1a0609 0%, transparent 60%); opacity: .55; }
html[data-theme="club"] body::after { background-image: repeating-linear-gradient(118deg, transparent 0 70px, rgba(30, 6, 10, .24) 70px 110px, transparent 110px 190px); }
html[data-theme="club"] .dot { box-shadow: 0 0 0 2px #4a1820; }
html[data-theme="club"] .bottom a.plus .i { box-shadow: inset 0 0 0 1px rgba(255, 210, 200, .45), 0 8px 18px -8px rgba(60, 8, 16, .85); }
html[data-theme="club"] .btn.primary { box-shadow: inset 0 0 0 1px rgba(255, 200, 190, .5), inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -12px rgba(60, 8, 16, .95); }
html[data-theme="club"] .input { background: rgba(30, 8, 12, .28); }
html[data-theme="club"] select.input option { background: #2a1215; }
html[data-theme="club"] .story.new .ring { background: linear-gradient(180deg, #f6d3ca, #c23b3f); }
html[data-theme="club"] .story .ring img, html[data-theme="club"] .story .ring .add { border-color: #5a1f27; }
html[data-theme="club"] .badge.ppv, html[data-theme="club"] .chipg.gold { background: rgba(194, 59, 63, .7); }
html[data-theme="club"] .tier.best, html[data-theme="club"] .opt.on { box-shadow: var(--edge), inset 0 0 0 1.5px rgba(244, 169, 160, .8), var(--drop); }
html[data-theme="club"] .subbar { background: linear-gradient(180deg, rgba(206, 70, 72, .38), rgba(120, 30, 40, .32)); }
html[data-theme="club"] .hero { background: radial-gradient(120% 120% at 0% 0%, rgba(255, 210, 200, .26), transparent 55%), var(--glass); }
html[data-theme="club"] .locked, html[data-theme="club"] .msg.paywall .lk, html[data-theme="club"] .tile .media.blank,
html[data-theme="club"] .fc.txt .ph { background: radial-gradient(120% 80% at 15% 5%, rgba(255, 214, 200, .42), transparent 60%), linear-gradient(180deg, #8a3a40, #3e141b); }
html[data-theme="club"] .tile.quote { background: radial-gradient(130% 90% at 0% 0%, rgba(255, 214, 200, .28), transparent 55%), rgba(255, 236, 230, .08); }
html[data-theme="club"] .fc .info { background: linear-gradient(180deg, rgba(255, 236, 230, .17), rgba(60, 16, 22, .42)); box-shadow: inset 0 0 0 1px rgba(255, 228, 220, .3); }
html[data-theme="club"] .tile .cap { background: linear-gradient(180deg, rgba(255, 236, 230, .19), rgba(60, 16, 22, .36)); box-shadow: inset 0 0 0 1px rgba(255, 228, 220, .3); }
html[data-theme="club"] .tile, html[data-theme="club"] .fc { box-shadow: inset 0 0 0 1px rgba(255, 228, 220, .28), 0 24px 50px -24px rgba(20, 4, 8, .9); }
html[data-theme="club"] .sheet { background: linear-gradient(180deg, rgba(120, 44, 50, .84), rgba(48, 14, 20, .92)); }
html[data-theme="club"] .msg.me { box-shadow: inset 0 0 0 1px rgba(255, 200, 190, .45); }
html[data-theme="club"] .av { box-shadow: 0 0 0 1.5px rgba(255, 228, 220, .45); }
html[data-theme="club"] ::selection { background: rgba(244, 169, 160, .35); }
.iconbtn[data-act=music].on { color: var(--brand-2); }
.iconbtn[data-act=music].on .ic { animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 50% { transform: scale(1.12); opacity: .75; } }

/* barra superior em celulares estreitos: o logo nunca é cortado; os botões encolhem antes */
.top > a:first-child { min-width: 0; flex: none; }
@media (max-width: 420px) {
  .top { padding: 0 6px 0 14px; gap: 2px; }
  .top .iconbtn { width: 36px; height: 36px; }
  .top .btn.sm { padding: 0 12px; min-height: 34px; font-size: 13px; }
}
@media (max-width: 350px) { .top [data-act=theme] { display: none; } }