/* Fadehouse: telas logadas (entrar, conectar, painel, backoffice).
   Mesma família da landing: tokens.css, mesmos raios (pill = botões e chips | 10px = campos | 18px = painéis | 28px = molduras),
   luz de "No ar", rack de módulos. Animação só em transform/opacity. Tudo respeita prefers-reduced-motion. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root {
  --fh-alerta: #e8604f;
  --gut: clamp(16px, 4.5vw, 56px);
  --maxw: 1240px;
  --z-nav: 50; --z-grain: 1;
}
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--fh-noite); color: var(--fh-papel);
  font-family: var(--fh-fonte-ui); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before { /* lamparina embaixo à esquerda, sinal no alto à direita, como no hero da LP */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 0% 100%, rgb(242 179 94 / .12), transparent 70%), radial-gradient(45% 45% at 100% 0%, rgb(61 219 185 / .1), transparent 70%);
}
body::after { /* grão fixo, só textura */
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .045;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--fh-sinal); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--fh-sinal); outline-offset: 3px; border-radius: 6px; }
.mono { font-family: var(--fh-fonte-mono); letter-spacing: 0; }
.muted { color: var(--fh-nevoa); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--fh-papel); color: var(--fh-noite); padding: 12px 18px; border-radius: var(--fh-raio-pill); font-weight: 600; text-decoration: none; transition: transform .3s var(--fh-ease-saida); }
.skip:focus { top: 12px; }
.wrap { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- navegação (pílula, como na LP) ---------- */
.nav {
  position: sticky; z-index: var(--z-nav); top: 12px; margin: 12px auto 0; width: min(1180px, calc(100% - 24px)); height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 18px; border-radius: var(--fh-raio-pill);
  background: rgb(15 18 17 / .78); border: 1px solid var(--fh-borda); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fh-papel); min-height: 44px; }
.mark { width: 44px; aspect-ratio: 136 / 74; height: auto; flex: none; overflow: visible; }
.mark--lg { width: clamp(88px, 12vw, 132px); }
.brand__name { font-family: var(--fh-fonte-titulo); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; font-variation-settings: "SOFT" 40; }
.nav__end { display: flex; align-items: center; gap: 4px; }
.nav__end a, .nav__end button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; background: none; color: color-mix(in oklab, var(--fh-papel) 80%, transparent); text-decoration: none; border-radius: var(--fh-raio-pill); transition: color .25s, background-color .25s; }
.nav__end a:hover, .nav__end button:hover { color: var(--fh-papel); background: rgb(242 237 227 / .06); }
.nav__end a[aria-current="page"] { color: var(--fh-papel); background: rgb(242 237 227 / .07); }
@media (max-width: 560px) { .nav__end a[aria-current="page"] { display: none; } .nav { padding-left: 12px; } .mark { width: 38px; } }
@media (max-width: 420px) { .brand__name { font-size: 1.3rem; } .nav__end a, .nav__end button { padding: 0 10px; } }

/* ---------- tipografia ---------- */
.h1, .h2, .h3, .bigfig, .total__v { font-family: var(--fh-fonte-titulo); font-weight: 540; font-variation-settings: "SOFT" 40; text-wrap: balance; }
.h1 { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; word-spacing: .05em; }
.h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.08; letter-spacing: -.022em; }
.h3 { font-size: 1.3rem; line-height: 1.15; font-weight: 580; letter-spacing: -.01em; }
.h1 em, .h2 em { font-style: italic; font-weight: 500; color: var(--fh-sinal); padding-right: .05em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: color-mix(in oklab, var(--fh-papel) 82%, transparent); max-width: 46ch; text-wrap: pretty; }
.chap { display: inline-flex; align-items: center; gap: 10px; margin-bottom: .9rem; font-family: var(--fh-fonte-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--fh-nevoa); }
.chap span { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 8px; border-radius: var(--fh-raio-pill); background: var(--fh-sinal-suave); color: var(--fh-sinal); letter-spacing: .04em; }

/* ---------- botões, chips, luz ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .9rem; min-height: 52px; padding: 6px 6px 6px 26px;
  border-radius: var(--fh-raio-pill); text-decoration: none; font-weight: 600; font-size: 1.0625rem; white-space: nowrap;
  border: 1px solid transparent; background: none; transition: transform .45s var(--fh-ease-mola), background-color .3s, border-color .3s, opacity .3s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgb(7 17 14 / .14); transition: transform .5s var(--fh-ease-mola); }
.btn:hover:not(:disabled) .btn__ico { transform: translate(3px, -1px) scale(1.06); }
.btn--sinal { background: var(--fh-sinal); color: var(--fh-texto-sobre-sinal); }
.btn--sinal:hover:not(:disabled) { background: #55e6c8; }
.btn--line { border-color: var(--fh-borda-forte); color: var(--fh-papel); }
.btn--line:hover:not(:disabled) { border-color: var(--fh-sinal); background: var(--fh-sinal-suave); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn--escuro { background: var(--fh-noite); color: var(--fh-papel); }
.btn--escuro:hover:not(:disabled) { background: #1d2322; }
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fh-nevoa); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--fh-borda-forte); transition: color .25s; }
.linkbtn:hover { color: var(--fh-papel); }
.linkbtn--danger:hover, .linkbtn--danger[data-armed] { color: var(--fh-alerta); text-decoration-color: var(--fh-alerta); }
.btn--ghost-danger { border-color: var(--fh-borda-forte); color: var(--fh-nevoa); }
.btn--ghost-danger[data-armed] { border-color: var(--fh-alerta); color: var(--fh-alerta); background: rgb(232 96 79 / .1); }
.btn--sinal[data-armed] { background: var(--fh-lamparina); color: var(--fh-texto-sobre-sinal); }

.chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 28px; padding: 0 12px 0 10px; border-radius: var(--fh-raio-pill); background: var(--fh-superficie-3); border: 1px solid var(--fh-borda); font-family: var(--fh-fonte-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--fh-nevoa)); box-shadow: 0 0 8px var(--c, transparent); }
.chip--sinal { --c: var(--fh-sinal); border-color: color-mix(in oklab, var(--fh-sinal) 45%, transparent); background: var(--fh-sinal-suave); }
.chip--lamp { --c: var(--fh-lamparina); border-color: color-mix(in oklab, var(--fh-lamparina) 55%, transparent); background: var(--fh-lamparina-suave); }
.chip--alerta { --c: var(--fh-alerta); border-color: color-mix(in oklab, var(--fh-alerta) 55%, transparent); background: rgb(232 96 79 / .1); }
.chip--off i { box-shadow: none; opacity: .6; }

.onair { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--fh-fonte-mono); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; padding: 7px 14px 7px 12px; border-radius: var(--fh-raio-pill); border: 1px solid color-mix(in oklab, var(--fh-lamparina) 55%, transparent); background: var(--fh-lamparina-suave); }
.onair i { width: 9px; height: 9px; border-radius: 50%; background: var(--fh-sinal); box-shadow: 0 0 10px var(--fh-sinal); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.lamp { --c: var(--fh-nevoa); flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 16%, transparent); }
.lamp[data-on] { box-shadow: 0 0 16px var(--c), 0 0 0 4px color-mix(in oklab, var(--c) 22%, transparent); }

/* medidores segmentados (os mesmos da LP) */
.meter { position: relative; display: block; overflow: hidden; border-radius: 2px; }
.meter .gain, .meter .beat { position: absolute; inset: 0; display: block; }
.meter .beat { background: linear-gradient(var(--dir, to top), var(--fh-sinal) 0 62%, var(--fh-lamparina) 82%, var(--fh-alerta) 100%); }
.meter--h { --dir: to right; height: 12px; min-width: 0; background: rgb(142 154 150 / .14); -webkit-mask-image: repeating-linear-gradient(to right, #000 0 5px, transparent 5px 8px); mask-image: repeating-linear-gradient(to right, #000 0 5px, transparent 5px 8px); }
.meter--h .gain { transform-origin: left; transform: scaleX(var(--v, .7)); transition: transform .8s var(--fh-ease-saida); }
.meter--h .beat { transform-origin: left; }
.meter--h .fill { position: absolute; inset: 0; background: var(--mc, var(--fh-sinal)); }
@keyframes bh { from { transform: scaleX(.55); } to { transform: scaleX(1); } }

/* peça de hardware: parafusos nos cantos */
.screws { position: relative; }
.screws::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at 15px 15px, #070908 0 1.5px, #39423f 2px 4px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 15px) 15px, #070908 0 1.5px, #39423f 2px 4px, transparent 4.6px),
    radial-gradient(circle at 15px calc(100% - 15px), #070908 0 1.5px, #39423f 2px 4px, transparent 4.6px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #070908 0 1.5px, #39423f 2px 4px, transparent 4.6px);
}

/* ---------- campos ---------- */
.field { display: grid; gap: 8px; font-size: .9rem; font-weight: 500; color: color-mix(in oklab, var(--fh-papel) 80%, transparent); }
.field small { font-weight: 400; color: var(--fh-nevoa); }
input[type="text"], input[type="email"], input[type="number"], input:not([type]), textarea {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--fh-raio-s); background: var(--fh-superficie-3); color: var(--fh-papel);
  border: 1px solid var(--fh-borda); font: 400 1.05rem var(--fh-fonte-ui); box-shadow: inset 0 2px 6px rgb(0 0 0 / .4);
  transition: border-color .25s, box-shadow .25s;
}
input::placeholder { color: color-mix(in oklab, var(--fh-nevoa) 85%, transparent); opacity: 1; }
input:hover, textarea:hover { border-color: var(--fh-borda-forte); }
input:focus-visible, textarea:focus-visible { outline: none; border-color: var(--fh-sinal); box-shadow: inset 0 2px 6px rgb(0 0 0 / .4), 0 0 0 3px var(--fh-sinal-suave); }
.msg { min-height: 1.5em; margin-top: 12px; font-size: .95rem; text-wrap: pretty; }
.msg:empty { min-height: 0; margin: 0; }
.msg--err { color: #ff9b8c; }
.msg--ok { color: var(--fh-sinal); }

/* =========================================================
   ENTRAR e CONECTAR: portão pequeno, com a marca grande
   ========================================================= */
.gate { flex: 1; display: grid; align-content: center; gap: clamp(28px, 5vw, 64px); padding-block: clamp(28px, 6vw, 72px) clamp(40px, 7vw, 96px); }
@media (min-width: 960px) { .gate { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 88px; } }
.gate__txt { display: grid; gap: 1.4rem; justify-items: start; }
.gate__txt .mark--lg { margin-bottom: .6rem; filter: drop-shadow(0 0 38px rgb(61 219 185 / .28)); }
.gate .h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); max-width: 13ch; }
.gate__txt, .faceplate { animation: rise 1s var(--fh-ease-saida) both; }
.faceplate { animation-delay: .12s; }
.ticks { display: grid; gap: 0; width: min(100%, 420px); margin-top: .6rem; }
.ticks li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--fh-borda); font-size: .98rem; color: color-mix(in oklab, var(--fh-papel) 80%, transparent); }
.ticks li:last-child { border-bottom: 1px solid var(--fh-borda); }
.ticks li span { color: var(--fh-lamparina); font-size: .78rem; }

.faceplate { position: relative; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--fh-raio-l); background: linear-gradient(170deg, var(--fh-superficie-2), var(--fh-superficie-3)); border: 1px solid var(--fh-borda-forte); box-shadow: 0 0 0 6px rgb(242 237 227 / .025), 0 50px 90px -40px rgb(61 219 185 / .28), inset 0 1px 0 rgb(242 237 227 / .06); }
.faceplate > * { position: relative; }
.faceplate__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; font-family: var(--fh-fonte-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--fh-nevoa); }
.faceplate__top .lamp { --c: var(--fh-sinal); transition: background-color .4s, box-shadow .4s; }
.faceplate form { display: grid; gap: 20px; animation: rise .7s var(--fh-ease-saida) both; }
.faceplate form[hidden] { display: none; }

.codebox { position: relative; border-radius: var(--fh-raio-s); background: var(--fh-superficie-3); border: 1px solid var(--fh-borda); box-shadow: inset 0 2px 6px rgb(0 0 0 / .4); overflow: hidden; transition: border-color .25s, box-shadow .25s; font-size: clamp(1.6rem, 8vw, 2.1rem); width: fit-content; max-width: 100%; }
.codebox:focus-within { border-color: var(--fh-sinal); box-shadow: inset 0 2px 6px rgb(0 0 0 / .4), 0 0 0 3px var(--fh-sinal-suave); }
.codebox input.code {
  display: block; box-sizing: content-box; width: 9em; max-width: none; min-height: 0; height: 2.1em; padding: 0; border: 0; border-radius: 0; box-shadow: none; background:
    repeating-linear-gradient(90deg, transparent 0 calc(1.5em - 1px), var(--fh-borda) calc(1.5em - 1px) 1.5em);
  font: 500 1em/2.1 var(--fh-fonte-mono); letter-spacing: calc(1.5em - 1ch); text-indent: calc((1.5em - 1ch) / 2); color: var(--fh-papel); caret-color: var(--fh-sinal);
}
.codebox input.code:focus-visible { box-shadow: none; }
.leds { display: flex; gap: 6px; margin-top: 12px; }
.leds i { width: 100%; max-width: 1.5em; height: 4px; border-radius: 4px; background: rgb(142 154 150 / .24); transition: background-color .25s, box-shadow .25s; font-size: clamp(1.6rem, 8vw, 2.1rem); }
.leds i[data-on] { background: var(--fh-sinal); box-shadow: 0 0 10px var(--fh-sinal); }
.hint { font-size: .9rem; color: var(--fh-nevoa); text-wrap: pretty; }
.code-wide { text-align: center; font: 500 clamp(1.6rem, 7vw, 2.1rem)/1 var(--fh-fonte-mono) !important; letter-spacing: .18em; text-transform: uppercase; min-height: 68px !important; padding: 0 12px !important; }
.code-wide::placeholder { letter-spacing: .18em; }

.done { display: grid; gap: 14px; justify-items: start; padding: 20px; border-radius: var(--fh-raio-m); background: var(--fh-sinal-suave); border: 1px solid color-mix(in oklab, var(--fh-sinal) 45%, transparent); animation: rise .6s var(--fh-ease-saida) both; }
.done b { font-family: var(--fh-fonte-titulo); font-size: 1.35rem; font-weight: 580; }
.done__row { display: flex; align-items: center; gap: 12px; }

/* =========================================================
   PAINEL
   ========================================================= */
.app { display: grid; gap: clamp(28px, 4vw, 52px); padding-block: clamp(28px, 4vw, 56px) 96px; }
.app > * { animation: rise .9s var(--fh-ease-saida) both; }
.app > :nth-child(2) { animation-delay: .08s; } .app > :nth-child(3) { animation-delay: .16s; } .app > :nth-child(4) { animation-delay: .24s; }

.head { display: grid; gap: 28px; align-items: end; }
@media (min-width: 980px) { .head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 72px; } }
.head__txt { display: grid; gap: 1.1rem; justify-items: start; }
.head__hello { font-size: .85rem; color: var(--fh-nevoa); }

/* estado da assinatura: placa com luz própria */
.status { --c: var(--fh-nevoa); position: relative; padding: 26px 28px 24px; border-radius: var(--fh-raio-l); background: radial-gradient(90% 90% at 0% 0%, color-mix(in oklab, var(--c) 14%, transparent), transparent 70%), linear-gradient(170deg, var(--fh-superficie-2), var(--fh-superficie-1)); border: 1px solid color-mix(in oklab, var(--c) 40%, var(--fh-borda)); display: grid; gap: 14px; transition: border-color .6s, background-color .6s; }
.status[data-st="trial"] { --c: var(--fh-lamparina); }
.status[data-st="active"] { --c: var(--fh-sinal); }
.status[data-st="past_due"] { --c: var(--fh-lamparina); }
.status[data-st="expired"] { --c: var(--fh-alerta); }
.status[data-st="canceled"], .status[data-st="none"] { --c: var(--fh-nevoa); }
.status__top { display: flex; align-items: center; gap: 12px; font-family: var(--fh-fonte-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; }
.status .lamp { --c: inherit; }
.status[data-st="active"] .lamp, .status[data-st="trial"] .lamp { animation: pulse 2.6s ease-in-out infinite; }
.status[data-st="past_due"] .lamp { animation: blink 1.1s steps(2, jump-none) infinite; }
.status[data-st="expired"] .lamp, .status[data-st="canceled"] .lamp, .status[data-st="none"] .lamp { box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 16%, transparent); opacity: .85; }
.status__fig { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-family: var(--fh-fonte-titulo); font-weight: 560; font-variation-settings: "SOFT" 40; line-height: 1; letter-spacing: -.03em; }
.status__fig b { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 560; font-variant-numeric: tabular-nums; }
.status__fig span { font-family: var(--fh-fonte-ui); font-size: 1.05rem; letter-spacing: 0; font-weight: 500; color: color-mix(in oklab, var(--fh-papel) 78%, transparent); }
.status .meter--h { --mc: var(--c); height: 12px; }
.status .meter--h .fill { background: var(--c); }
.status__fine { font-size: .92rem; color: color-mix(in oklab, var(--fh-papel) 75%, transparent); text-wrap: pretty; }
.status[data-just] { animation: ignite 1.6s var(--fh-ease-saida); }
@keyframes ignite { 0% { box-shadow: 0 0 0 0 rgb(61 219 185 / .0); } 20% { box-shadow: 0 0 0 14px rgb(61 219 185 / .22), 0 0 90px 10px rgb(61 219 185 / .35); } 100% { box-shadow: 0 0 0 0 rgb(61 219 185 / 0), 0 0 0 0 rgb(61 219 185 / 0); } }

/* Pix em aberto: bilhete com picote */
.pay { position: relative; display: grid; gap: 28px; padding: clamp(22px, 3vw, 36px); border-radius: var(--fh-raio-l); background: radial-gradient(70% 120% at 0% 0%, rgb(242 179 94 / .12), transparent 70%), linear-gradient(170deg, var(--fh-superficie-2), var(--fh-superficie-1)); border: 1px solid color-mix(in oklab, var(--fh-lamparina) 38%, var(--fh-borda)); box-shadow: 0 50px 100px -50px rgb(242 179 94 / .3); }
@media (min-width: 860px) { .pay { grid-template-columns: auto 1fr; gap: 0; padding: 0; } .pay__qr { padding: 36px 40px 36px 36px; } .pay__body { padding: 36px 40px 36px 44px; border-left: 2px dashed var(--fh-borda-forte); position: relative; } .pay__body::before, .pay__body::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--fh-noite); border: 1px solid color-mix(in oklab, var(--fh-lamparina) 38%, var(--fh-borda)); } .pay__body::before { top: -13px; clip-path: inset(50% 0 0 0); } .pay__body::after { bottom: -13px; clip-path: inset(0 0 50% 0); } }
.pay__qr { display: grid; justify-items: center; align-content: center; gap: 12px; }
.pay__qrimg { width: min(100%, 232px); aspect-ratio: 1; padding: 12px; border-radius: var(--fh-raio-m); background: var(--fh-papel); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .7); display: grid; place-items: center; }
.pay__qrimg img { width: 100%; height: 100%; image-rendering: pixelated; border-radius: 4px; }
.pay__qrcap { font-size: .74rem; color: var(--fh-nevoa); text-transform: uppercase; letter-spacing: .12em; }
.pay__body { display: grid; gap: 16px; align-content: center; }
.pay__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pay__amount { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pay__amount b { font-family: var(--fh-fonte-titulo); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pay__amount span { color: color-mix(in oklab, var(--fh-papel) 78%, transparent); }
.pay__code { display: block; width: 100%; min-height: 88px; padding: 12px 14px; resize: none; font: 400 .8rem/1.5 var(--fh-fonte-mono); color: color-mix(in oklab, var(--fh-papel) 85%, transparent); word-break: break-all; }
.pay__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.pay--wait { padding: 22px 26px; gap: 6px; }
.pay--wait p { max-width: 62ch; }

/* o momento: o Pix caiu, a luz acende */
.paid { position: relative; overflow: hidden; display: grid; gap: 14px; justify-items: start; padding: clamp(26px, 4vw, 44px); border-radius: var(--fh-raio-l); background: radial-gradient(60% 140% at 0% 50%, rgb(61 219 185 / .22), transparent 70%), linear-gradient(170deg, var(--fh-superficie-2), var(--fh-superficie-1)); border: 1px solid color-mix(in oklab, var(--fh-sinal) 55%, transparent); }
.paid__glow { position: absolute; left: clamp(40px, 6vw, 70px); top: 50%; width: 520px; aspect-ratio: 1; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgb(61 219 185 / .55), transparent); pointer-events: none; animation: burst 2.4s var(--fh-ease-saida) both; }
@keyframes burst { 0% { transform: scale(.1); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1); opacity: .22; } }
.paid > *:not(.paid__glow) { position: relative; }
.paid .onair { background: var(--fh-sinal-suave); border-color: color-mix(in oklab, var(--fh-sinal) 55%, transparent); animation: lightup .9s var(--fh-ease-saida) both; }
@keyframes lightup { 0% { filter: brightness(.4); transform: scale(.92); } 40% { filter: brightness(1.8); } 100% { filter: none; transform: none; } }
.paid .onair i { width: 12px; height: 12px; }
.paid p { max-width: 52ch; color: color-mix(in oklab, var(--fh-papel) 85%, transparent); }

/* ---------- colunas ---------- */
.cols { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }
@media (min-width: 1040px) { .cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; } }
.col { display: grid; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.sec__head { display: grid; gap: .5rem; margin-bottom: 22px; }
.sec__head p { color: color-mix(in oklab, var(--fh-papel) 70%, transparent); max-width: 52ch; }
.sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.big-count { font-family: var(--fh-fonte-mono); font-size: 1.1rem; color: var(--fh-nevoa); }
.big-count b { font-weight: 500; font-size: 2rem; color: var(--fh-papel); }

/* rack de módulos */
.rackbox { border-radius: var(--fh-raio-m); background: #090c0b; border: 1px solid var(--fh-borda-forte); box-shadow: 0 0 0 6px rgb(242 237 227 / .025), 0 50px 100px -50px rgb(61 219 185 / .2); overflow: hidden; }
.unit { --ear: 34px; position: relative; display: grid; grid-template-columns: 1fr; align-items: center; min-height: 92px; padding: 14px calc(var(--ear) + 10px); background: linear-gradient(180deg, rgb(242 237 227 / .05), transparent 45%), var(--fh-superficie-1); border-bottom: 1px solid #060908; box-shadow: inset 0 1px 0 rgb(242 237 227 / .07); cursor: pointer; transition: background-color .4s; animation: unitin .8s var(--fh-ease-saida) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
@keyframes unitin { from { opacity: 0; transform: translateY(10px); } }
.unit:last-child { border-bottom: 0; }
.unit::before, .unit::after { /* orelhas do rack, com parafuso */
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--ear); background: radial-gradient(circle at 50% 50%, #070908 0 1.5px, #3b4542 2px 5px, transparent 5.6px), linear-gradient(90deg, rgb(0 0 0 / .3), transparent);
}
.unit::before { left: 0; border-right: 1px solid rgb(0 0 0 / .55); } .unit::after { right: 0; border-left: 1px solid rgb(0 0 0 / .55); background: radial-gradient(circle at 50% 50%, #070908 0 1.5px, #3b4542 2px 5px, transparent 5.6px), linear-gradient(270deg, rgb(0 0 0 / .3), transparent); }
.unit__in { display: grid; grid-template-columns: 10px 2.2ch minmax(0, 1fr) 64px auto auto; align-items: center; gap: 4px 16px; }
.unit__led { width: 9px; height: 9px; border-radius: 50%; background: #2a3230; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); transition: background-color .35s, box-shadow .35s; }
.unit__n { font-size: .72rem; color: var(--fh-nevoa); }
.unit__txt { display: grid; gap: 3px; min-width: 0; }
.unit__txt b { font-family: var(--fh-fonte-titulo); font-weight: 560; font-size: 1.35rem; line-height: 1.1; font-variation-settings: "SOFT" 40; }
.unit__txt small { font-size: .88rem; color: color-mix(in oklab, var(--fh-papel) 62%, transparent); line-height: 1.4; text-wrap: pretty; }
.unit .meter--h { height: 10px; opacity: .3; transition: opacity .5s; }
.unit__price { font-size: 1rem; text-align: right; white-space: nowrap; color: var(--fh-nevoa); transition: color .35s; min-width: 7.4ch; }
.unit__price small { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fh-nevoa); }
.unit[data-on] { background: linear-gradient(180deg, rgb(61 219 185 / .1), rgb(61 219 185 / .035) 70%), var(--fh-superficie-1); }
.unit[data-on] .unit__led { background: var(--fh-sinal); box-shadow: 0 0 10px var(--fh-sinal); }
.unit[data-on] .unit__price { color: var(--fh-papel); }
.unit[data-on] .meter--h { opacity: 1; }
.unit[data-on] .meter--h .beat { animation: bh 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.27s); }
.unit .meter--h .beat { transform: scaleX(.5); }
.unit:hover:not(.unit--base) { background-color: #1b2120; }
.unit:has(input:focus-visible) { outline: 2px solid var(--fh-sinal); outline-offset: -3px; border-radius: 0; }
.unit--base { cursor: default; min-height: 132px; background: radial-gradient(90% 120% at 0% 0%, rgb(242 179 94 / .14), transparent 70%), linear-gradient(180deg, rgb(242 237 227 / .06), transparent 45%), var(--fh-superficie-2); }
.unit--base::before, .unit--base::after { background-image: radial-gradient(circle at 50% 22%, #070908 0 1.5px, #3b4542 2px 5px, transparent 5.6px), radial-gradient(circle at 50% 78%, #070908 0 1.5px, #3b4542 2px 5px, transparent 5.6px), linear-gradient(90deg, rgb(0 0 0 / .3), transparent); }
.unit--base::after { background-image: radial-gradient(circle at 50% 22%, #070908 0 1.5px, #3b4542 2px 5px, transparent 5.6px), radial-gradient(circle at 50% 78%, #070908 0 1.5px, #3b4542 2px 5px, transparent 5.6px), linear-gradient(270deg, rgb(0 0 0 / .3), transparent); }
.unit--base .unit__in { grid-template-columns: 10px 44px minmax(0, 1fr) auto auto; }
.unit--base .mark { width: 44px; }
.unit__req { display: inline-flex; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fh-lamparina); padding: 4px 10px; border-radius: var(--fh-raio-pill); border: 1px solid color-mix(in oklab, var(--fh-lamparina) 50%, transparent); white-space: nowrap; }
.unit__vent { position: absolute; right: calc(var(--ear) + 10px); bottom: 10px; width: 120px; height: 14px; opacity: .35; background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 6px); border-radius: 2px; pointer-events: none; display: none; }

/* alavanca: o knob do crossfader, que trava no trilho */
.tg { position: relative; width: 66px; height: 36px; flex: none; border-radius: 9px; background: var(--fh-superficie-3); border: 1px solid var(--fh-borda-forte); box-shadow: inset 0 2px 7px rgb(0 0 0 / .75); }
.tg::before { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgb(142 154 150 / .3); transition: background-color .4s, box-shadow .4s; }
.tg i { position: absolute; left: 3px; top: 3px; width: 26px; height: 28px; border-radius: 7px; background: linear-gradient(var(--fh-lamparina), #d99a43); box-shadow: 0 6px 14px -4px rgb(242 179 94 / .5), inset 0 1px 0 rgb(255 255 255 / .45); transition: transform .5s var(--fh-ease-mola); }
.tg i::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 2px; margin-top: -1px; background: rgb(15 18 17 / .55); border-radius: 2px; }
.unit[data-on] .tg::before { background: var(--fh-sinal); box-shadow: 0 0 12px var(--fh-sinal); }
.unit[data-on] .tg i { transform: translateX(34px); }
.unit input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.unit--base input { display: none; }
.unit:active .tg i { transition-duration: .2s; }

.rackbox__total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px); background: var(--fh-papel); color: var(--fh-noite); }
.total { display: grid; gap: 4px; }
.total__l { font-family: var(--fh-fonte-titulo); font-size: 1.25rem; font-weight: 560; letter-spacing: -.01em; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.total__v { display: inline-flex; align-items: baseline; gap: .2rem; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; transform-origin: left bottom; transition: transform .5s var(--fh-ease-mola); }
.total__v.bump { transform: scale(1.045); }
.total__v .cur { font-size: .42em; margin-right: .15em; font-weight: 500; }
.total__v .cts { font-size: .45em; }
.total__v .per { font-family: var(--fh-fonte-ui); font-size: 1rem; font-weight: 500; letter-spacing: 0; margin-left: .35rem; opacity: .7; }
.total__delta { font-family: var(--fh-fonte-mono); font-size: .78rem; color: #4a524f; min-height: 1.3em; }
.total .chip--lamp { background: #fbe6c3; color: #5b3d0e; border-color: #d9a458; font-size: .66rem; min-height: 24px; }
.rackbox__go { display: grid; gap: 6px; justify-items: end; }
.rackbox__go .msg { margin: 0; text-align: right; color: #1d5c4d; }
.rackbox__go .msg--err { color: #a8321f; }
.rack__note { margin-top: 14px; font-size: .9rem; color: var(--fh-nevoa); max-width: 62ch; }

@media (max-width: 720px) {
  .unit { --ear: 22px; padding-inline: calc(var(--ear) + 8px); min-height: 0; padding-block: 16px; }
  .unit::before, .unit::after { background-size: 100% 100%; }
  .unit__in { grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px 14px; }
  .unit__n, .unit .meter--h { display: none; }
  .unit__price { grid-column: 2; grid-row: 2; text-align: left; }
  .unit__price small { display: inline; margin-left: .4em; }
  .unit__txt { grid-column: 2; }
  .unit .tg { grid-column: 3; grid-row: 1 / span 2; }
  .unit--base .unit__in { grid-template-columns: 36px minmax(0, 1fr); }
  .unit--base .unit__led { display: none; }
  .unit--base .mark { width: 36px; }
  .unit--base .unit__price { grid-column: 2; grid-row: auto; }
  .unit--base .unit__req { grid-column: 2; justify-self: start; }
  .rackbox__total { padding: 20px; }
  .rackbox__go { justify-items: stretch; width: 100%; }
  .rackbox__go .btn { width: 100%; }
  .rackbox__go .msg { text-align: left; }
}

/* PCs: vagas de patch */
.bays { display: grid; gap: 10px; }
.bay { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 84px; padding: 14px 16px 14px 14px; border-radius: var(--fh-raio-m); background: var(--fh-superficie-1); border: 1px solid var(--fh-borda); animation: unitin .8s var(--fh-ease-saida) both; }
.bay__jack { position: relative; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #030504 0 9px, #2a3230 10px 14px, transparent 15px), conic-gradient(from 20deg, #3b4542, #1a2120, #3b4542, #1a2120, #3b4542); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .6); }
.bay__jack::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #030504; }
.bay--on { background: linear-gradient(180deg, rgb(61 219 185 / .1), transparent), var(--fh-superficie-1); border-color: color-mix(in oklab, var(--fh-sinal) 40%, transparent); }
.bay--on .bay__jack::after { background: var(--fh-sinal); box-shadow: 0 0 12px var(--fh-sinal); inset: 17px; }
.bay b { display: block; font-family: var(--fh-fonte-titulo); font-weight: 560; font-size: 1.2rem; line-height: 1.15; overflow-wrap: anywhere; }
.bay small { display: block; font-size: .85rem; color: var(--fh-nevoa); margin-top: 2px; text-wrap: pretty; }
.bay--empty { border-style: dashed; background: transparent; color: var(--fh-nevoa); }
.bay--empty b { color: color-mix(in oklab, var(--fh-papel) 70%, transparent); }
@media (max-width: 420px) { .bay { grid-template-columns: auto minmax(0, 1fr); } .bay .btn { grid-column: 1 / -1; } }

.fichas { display: grid; gap: 18px; }
.fichas .btn { justify-self: start; }

/* faturas: livro-caixa */
.ledger { border-top: 1px solid var(--fh-borda-forte); }
.ledger li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto 8.4rem; align-items: center; gap: 4px 18px; padding: 15px 4px; border-bottom: 1px solid var(--fh-borda); transition: background-color .3s; }
.ledger li:hover { background: rgb(242 237 227 / .025); }
.ledger__d { font-size: .82rem; color: var(--fh-nevoa); }
.ledger__ref { font-size: .98rem; min-width: 0; text-wrap: pretty; }
.ledger__ref small { display: block; color: var(--fh-nevoa); font-size: .8rem; }
.ledger__v { font-size: 1rem; text-align: right; font-variant-numeric: tabular-nums; }
.ledger__s { justify-self: end; }
.ledger li[data-open] { background: linear-gradient(90deg, rgb(242 179 94 / .1), transparent 70%); box-shadow: inset 2px 0 0 var(--fh-lamparina); }
.ledger__empty { padding: 22px 4px; color: var(--fh-nevoa); }
@media (max-width: 560px) { .ledger li { grid-template-columns: 1fr auto; } .ledger__d { grid-column: 1; } .ledger__s { grid-column: 2; grid-row: 1; } .ledger__ref { grid-column: 1; } .ledger__v { grid-column: 2; grid-row: 2; } }

.end { display: grid; gap: 8px; justify-items: start; padding-top: 28px; border-top: 1px solid var(--fh-borda); }
.end p { color: var(--fh-nevoa); font-size: .92rem; max-width: 46ch; }

/* =========================================================
   BACKOFFICE: console
   ========================================================= */
.console-page { display: grid; gap: 28px; padding-block: clamp(24px, 3vw, 40px) 80px; }
.console-page > * { animation: rise .8s var(--fh-ease-saida) both; }
.console-page > :nth-child(2) { animation-delay: .06s; } .console-page > :nth-child(3) { animation-delay: .12s; } .console-page > :nth-child(4) { animation-delay: .18s; }
.ctop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.ctop .h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.ctop .chap { margin-bottom: .5rem; }

.meters { display: grid; border-radius: var(--fh-raio-m); background: linear-gradient(170deg, var(--fh-superficie-2), var(--fh-superficie-3)); border: 1px solid var(--fh-borda-forte); box-shadow: inset 0 1px 0 rgb(242 237 227 / .06); overflow: hidden; }
@media (min-width: 900px) { .meters { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); } }
.mt { padding: 18px 22px 20px; display: grid; gap: 6px; align-content: start; border-bottom: 1px solid var(--fh-borda); }
@media (min-width: 900px) { .mt { border-bottom: 0; border-right: 1px solid var(--fh-borda); } .mt:last-child { border-right: 0; } }
.mt:last-child { border-bottom: 0; }
.mt__l { font-family: var(--fh-fonte-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fh-nevoa); }
.mt__v { font-family: var(--fh-fonte-titulo); font-weight: 580; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; font-variation-settings: "SOFT" 40; }
.mt__v small { font-family: var(--fh-fonte-ui); font-size: .95rem; letter-spacing: 0; color: var(--fh-nevoa); margin-left: .3rem; font-weight: 400; }
.mt--alert .mt__v { color: var(--fh-lamparina); }
.mt__sub { font-size: .82rem; color: var(--fh-nevoa); }
.funnel { display: flex; height: 14px; gap: 3px; margin-top: 8px; }
.funnel i { flex: var(--n) 1 0; min-width: 6px; border-radius: 3px; background: var(--c); transform-origin: left; animation: grow 1s var(--fh-ease-saida) both; }
.funnel i[data-n="0"] { display: none; }
@keyframes grow { from { transform: scaleX(0); } }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: .8rem; color: color-mix(in oklab, var(--fh-papel) 78%, transparent); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.legend b { font-family: var(--fh-fonte-mono); font-weight: 500; }

.split { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1060px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .pane--detail { position: sticky; top: 84px; max-height: calc(100dvh - 100px); overflow: auto; overscroll-behavior: contain; } }
.pane { border-radius: var(--fh-raio-m); background: var(--fh-superficie-1); border: 1px solid var(--fh-borda); min-width: 0; }
.pane__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--fh-borda); position: sticky; top: 0; z-index: 3; background: var(--fh-superficie-1); border-radius: var(--fh-raio-m) var(--fh-raio-m) 0 0; }
.pane__head h2 { font-family: var(--fh-fonte-mono); font-size: .76rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--fh-nevoa); }
.search { position: relative; flex: 1; max-width: 300px; }
.search input { min-height: 40px; font-size: .95rem; padding-left: 36px; }
.search::before { content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border: 1.5px solid var(--fh-nevoa); border-radius: 50%; pointer-events: none; }
.search::after { content: ""; position: absolute; left: 23px; top: 50%; width: 6px; height: 1.5px; margin-top: 4px; background: var(--fh-nevoa); transform: rotate(45deg); pointer-events: none; }

.accs { max-height: 620px; overflow: auto; overscroll-behavior: contain; }
.acc { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; width: 100%; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--fh-borda); background: none; text-align: left; transition: background-color .25s; }
.acc:hover { background: rgb(242 237 227 / .035); }
.acc[aria-current="true"] { background: var(--fh-sinal-suave); box-shadow: inset 2px 0 0 var(--fh-sinal); }
.acc .lamp { width: 9px; height: 9px; box-shadow: none; }
.acc[data-st="active"] .lamp { --c: var(--fh-sinal); box-shadow: 0 0 8px var(--fh-sinal); }
.acc[data-st="trial"] .lamp, .acc[data-st="past_due"] .lamp { --c: var(--fh-lamparina); box-shadow: 0 0 8px var(--fh-lamparina); }
.acc[data-st="expired"] .lamp { --c: var(--fh-alerta); }
.acc__main { min-width: 0; }
.acc__main b { display: block; font-weight: 600; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__main small { display: block; color: var(--fh-nevoa); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__meta { text-align: right; font-size: .78rem; color: var(--fh-nevoa); display: grid; gap: 2px; justify-items: end; }
.acc__meta .mono { color: color-mix(in oklab, var(--fh-papel) 85%, transparent); }
.empty { padding: 36px 24px; color: var(--fh-nevoa); display: grid; gap: 6px; justify-items: start; }
.empty b { font-family: var(--fh-fonte-titulo); font-weight: 560; font-size: 1.3rem; color: var(--fh-papel); }

.dt { padding: 18px 18px 22px; display: grid; gap: 22px; animation: rise .6s var(--fh-ease-saida) both; }
.dt__id { display: grid; gap: 4px; }
.dt__id .h2 { font-size: 1.6rem; overflow-wrap: anywhere; }
.dt__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dt__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.dt__acts .btn { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; border-radius: var(--fh-raio-s); overflow: hidden; background: var(--fh-borda); border: 1px solid var(--fh-borda); }
.kv div { padding: 10px 12px; background: var(--fh-superficie-1); }
.kv dt { font-family: var(--fh-fonte-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fh-nevoa); }
.kv dd { font-size: .95rem; margin-top: 2px; overflow-wrap: anywhere; }
.dt h3 { font-family: var(--fh-fonte-mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--fh-nevoa); margin-bottom: 8px; }
.mini li { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--fh-borda); font-size: .92rem; }
.mini li:last-child { border-bottom: 1px solid var(--fh-borda); }
.mini .btn { min-height: 34px; padding: 0 14px; font-size: .84rem; }
.mini .muted { font-size: .82rem; }
.mini--dev li { grid-template-columns: minmax(0, 1fr) auto; }
.mini--log li { grid-template-columns: 6.6rem minmax(0, 1fr) auto; font-size: .88rem; }
.mini--log { max-height: 260px; overflow: auto; }
.mini__none { padding: 10px 0; color: var(--fh-nevoa); font-size: .92rem; }

/* módulos e preços */
.mods { width: 100%; border-collapse: collapse; }
.mods th { text-align: left; padding: 10px 18px; font-family: var(--fh-fonte-mono); font-size: .68rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--fh-nevoa); border-bottom: 1px solid var(--fh-borda); }
.mods td { padding: 14px 18px; border-bottom: 1px solid var(--fh-borda); vertical-align: middle; }
.mods tr:last-child td { border-bottom: 0; }
.mods td b { font-family: var(--fh-fonte-titulo); font-weight: 560; font-size: 1.15rem; display: block; }
.mods td small { color: var(--fh-nevoa); font-size: .84rem; }
.mods__price { position: relative; width: 150px; }
.mods__price span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--fh-fonte-mono); font-size: .9rem; color: var(--fh-nevoa); pointer-events: none; }
.mods__price input { min-height: 44px; padding-left: 42px; font-family: var(--fh-fonte-mono); font-size: 1rem; }
.mods tr[data-dirty] { background: linear-gradient(90deg, rgb(242 179 94 / .09), transparent 60%); }
.mods .tg { display: block; cursor: pointer; }
.mods .tg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mods .tg:has(input:checked)::before { background: var(--fh-sinal); box-shadow: 0 0 12px var(--fh-sinal); }
.mods .tg:has(input:checked) i { transform: translateX(34px); }
.mods .tg:has(input:disabled) { opacity: .55; }
.mods .tg:has(input:focus-visible) { outline: 2px solid var(--fh-sinal); outline-offset: 3px; }
.mods .btn { min-height: 40px; padding: 0 18px; font-size: .9rem; }
.pane__foot { padding: 12px 18px; border-top: 1px solid var(--fh-borda); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; justify-content: space-between; font-size: .88rem; color: var(--fh-nevoa); }
.pane__foot .msg { margin: 0; min-height: 0; }
@media (max-width: 700px) {
  .mods thead { display: none; }
  .mods, .mods tbody, .mods tr, .mods td { display: block; }
  .mods tr { padding: 14px 18px; border-bottom: 1px solid var(--fh-borda); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; }
  .mods td { padding: 0; border: 0; min-width: 0; }
  .mods td:nth-child(3) { justify-self: end; }
  .mods td:first-child { grid-column: 1 / -1; }
  .mods__price { width: 100%; }
}
@media (max-width: 560px) { .mini li { grid-template-columns: 1fr auto; } .mini li > :first-child { grid-column: 1 / -1; } .mini--log li { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .unit[data-on] .meter--h .beat { transform: scaleX(.8); }
}

/* Módulo anunciado e ainda não vendido (ex.: Cabo virtual). */
.unit--soon { opacity: .6; cursor: default; }
.unit--soon .unit__req { color: var(--fh-lamparina); border-color: color-mix(in oklab, var(--fh-lamparina) 45%, transparent); }

/* Termos e privacidade: texto corrido, largura de leitura. */
.legal { width: min(720px, 100%); margin: 0 auto; padding: clamp(96px, 12vw, 140px) var(--gut, 20px) 96px; }
.legal h1 { font-family: var(--fh-fonte-titulo); font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin: .4rem 0 1.6rem; }
.legal h2 { font-family: var(--fh-fonte-titulo); font-size: 1.45rem; margin: 2.4rem 0 .6rem; }
.legal p, .legal li { color: color-mix(in oklab, var(--fh-papel) 82%, transparent); max-width: 64ch; }
.legal p + p { margin-top: .8rem; }
.legal ul { display: grid; gap: .5rem; padding-left: 1.2rem; list-style: disc; }
.legal a { color: var(--fh-sinal); }
.legal__date { font-size: .78rem; color: var(--fh-nevoa); }
.legal__who { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--fh-borda); font-size: .78rem; color: var(--fh-nevoa); }

/* Download do app no painel */
.dl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.dl .hint { margin: 0; }