/* Painel do cliente — mesma base do admin (style.css), com a identidade do site: azul-marinho + ciano */
:root {
  --brand: #0f6fd6; --brand-2: #19c3e6; --brand-soft: #e3f3fb; --navy: #0a1630;
  --p-smiles: #ff7a1a; --p-latam: #e3245c; --p-azul-fidelidade: #2f6bff; --p-azul: #19c3e6; --p-aa: #8a9bb8;
}
:root[data-theme="dark"] { --brand: #3fb2ff; --brand-2: #19c3e6; --brand-soft: #0f2640; --bg: #070f22; --surface: #0e1c3c; --surface-2: #12224a; --surface-3: #1a2c58; --line: #1c2c52; --line-2: #26396a; }
.logo .mark { background: linear-gradient(135deg, #0a1630, #10224a); color: #19c3e6; box-shadow: 0 6px 16px rgba(10, 22, 48, .35); }
.logo { text-decoration: none; }
.logo .cy { color: var(--brand-2); }
.btn.primary { box-shadow: 0 8px 20px -6px rgba(15, 111, 214, .55); }
.btn.big { width: 100%; min-height: 50px; font-size: 15.5px; border-radius: 14px; }
.btn.light { background: #fff; color: var(--navy); border-color: transparent; }
.btn.ghost-l { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .28); }
.iconbtn.sm { width: 34px; height: 34px; border-radius: 10px; flex: none; }
.center { text-align: center; }
.form-err { color: var(--bad); font-size: 13.5px; min-height: 18px; margin: 6px 0 10px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; background: var(--surface-2); border-radius: 6px; padding: .1em .4em; }
.pw .eye { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }

/* ---------- entrar / cadastro ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--bg); }
.auth-side { background: radial-gradient(700px 400px at 0% 0%, rgba(25, 195, 230, .28), transparent), linear-gradient(160deg, #0a1630, #10224a 70%, #0b3a66); color: #fff; padding: calc(22px + env(safe-area-inset-top)) 20px 26px; }
.auth-side .logo { color: #fff; } .auth-side .logo small { color: rgba(255, 255, 255, .6); }
.auth-side h1 { font-size: clamp(22px, 6vw, 38px); margin: 22px 0 10px; line-height: 1.12; }
.auth-side p { color: rgba(255, 255, 255, .78); margin: 0; max-width: 520px; }
.auth-pts { list-style: none; padding: 0; margin: 18px 0 0; display: none; gap: 12px; }
.auth-pts li { display: flex; gap: 12px; align-items: center; color: rgba(255, 255, 255, .85); }
.auth-pts svg.i { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: rgba(25, 195, 230, .16); color: #19c3e6; }
.auth-main { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; }
.auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; box-shadow: var(--shadow-lg); margin-top: -34px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 14px; padding: 4px; margin-bottom: 18px; }
.auth-tabs a { text-align: center; padding: 9px; border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--ink-2); font-size: 14.5px; }
.auth-tabs a.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgba(16, 28, 56, .12); }
.auth-card a, .auth-foot a { color: var(--brand); font-weight: 650; }
.auth-card .check { align-items: flex-start; margin-bottom: 4px; } .auth-card .check input { margin-top: 2px; }
.auth-foot { margin-top: 18px; }
@media (min-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .auth-side { display: flex; align-items: center; padding: 48px; }
  .auth-side-in { max-width: 520px; margin: 0 auto; }
  .auth-pts { display: grid; }
  .auth-main { justify-content: center; padding: 40px; }
  .auth-card { margin-top: 0; padding: 28px; }
}

/* ---------- casca ---------- */
.credit-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 13.5px; text-decoration: none; }
.credit-pill svg.i { width: 16px; height: 16px; }
.side .foot .who { padding: 0 4px; word-break: break-all; }
.side .foot a.btn { text-decoration: none; }

/* ---------- inicio ---------- */
.cli-hero { grid-template-columns: 1fr; margin-bottom: 16px; }
.kpi.hero.balance { background: radial-gradient(500px 240px at 100% 0%, rgba(25, 195, 230, .35), transparent), linear-gradient(140deg, #0a1630, #0f3b78); padding: 20px; }
.kpi.hero.balance.empty-bal { background: radial-gradient(500px 240px at 100% 0%, rgba(245, 165, 36, .3), transparent), linear-gradient(140deg, #0a1630, #3a2a10); }
.bignum { display: block; font-size: clamp(30px, calc(17vw - var(--len) * 1.2vw), 52px); line-height: 1.05; letter-spacing: -.035em; }
.kpis.mini { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.mini .kpi { padding: 12px; } .kpis.mini .ic { margin-bottom: 6px; } .kpis.mini .v { font-size: clamp(17px, 5vw, 24px); }
.progs { display: flex; flex-direction: column; gap: 2px; }
.prog { display: flex; align-items: center; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.prog:last-child { border: 0; } .prog code { margin-left: auto; font-size: 11.5px; }
pre.code-ex { font-size: 11.8px; white-space: pre; overflow-x: auto; word-break: normal; }
.welcome { text-align: center; padding: 6px 4px 4px; }
.wl-ic { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto 12px; }
.wl-ic svg.i { width: 30px; height: 30px; } .wl-ic.big { width: 72px; height: 72px; border-radius: 24px; }
.wl-ic.good { background: var(--good-soft); color: var(--good); } .wl-ic.warn { background: var(--warn-soft); color: var(--warn); }
.note svg.i { width: 17px; height: 17px; vertical-align: -3px; }

/* ---------- testar ---------- */
.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.seg button { flex: none; border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 8px 14px; font-weight: 650; font-size: 13.5px; display: inline-flex; align-items: center; color: var(--ink-2); }
.seg button.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.sform { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 8px; align-items: end; }
.sform .field:nth-of-type(n+3), .sform .btn { grid-column: 1 / -1; }
.sform .swap { margin-bottom: 14px; }
.loading-card { display: flex; gap: 14px; align-items: center; }
@media (min-width: 700px) { .sform { grid-template-columns: 1fr auto 1fr 1fr 1fr 90px; } .sform .field:nth-of-type(n+3) { grid-column: auto; } .sform .btn { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .sform { grid-template-columns: 1fr auto 1fr; } .sform .field:nth-of-type(n+3) { grid-column: 1 / -1; } }

/* ---------- comprar ---------- */
.price-card { display: grid; gap: 16px; grid-template-columns: 1fr; background: radial-gradient(500px 200px at 100% 0%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent), var(--surface); }
.price-main { display: flex; flex-direction: column; }
.price-main b { font-size: clamp(34px, 10vw, 46px); letter-spacing: -.035em; line-height: 1.1; color: var(--brand); }
.price-k { font-weight: 700; color: var(--ink-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.price-ex { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.ex-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.ex-row.tot { border-top: 1px dashed var(--line-2); margin-top: 6px; padding-top: 8px; }
.ex-row.tot b { color: var(--good); }
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pack { position: relative; border: 2px solid var(--line); background: var(--surface); border-radius: 18px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: .15s; box-shadow: var(--shadow); }
.pack.on { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.pack-q { font-size: clamp(20px, 6vw, 26px); font-weight: 800; letter-spacing: -.03em; }
.pack-l { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pack-p { margin-top: 6px; font-weight: 750; color: var(--brand); }
.pack-tag { position: absolute; top: -10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; text-transform: uppercase; }
.buy-bar { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.buy-bar .btn.big { width: auto; flex: 1 1 200px; }
.buy-total { display: flex; flex-direction: column; min-width: 120px; }
.buy-total b { font-size: 24px; letter-spacing: -.02em; }
.orow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.orow:last-child { border: 0; } .orow > div:first-child { flex: 1; min-width: 140px; }
.orow-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.empty svg.i { width: 30px; height: 30px; margin-bottom: 6px; }
.pix-h { display: flex; justify-content: space-between; align-items: center; } .pix-h h2 { margin: 0; }
.pix-sum { display: flex; justify-content: space-between; align-items: baseline; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; margin: 12px 0; }
.pix-sum b { font-size: 22px; color: var(--brand); }
.pix-qr { background: #fff; border-radius: 16px; padding: 12px; width: min(260px, 70vw); margin: 0 auto 12px; border: 1px solid var(--line); }
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-wait { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.pix .keybox { margin: 6px 0 12px; } .pix .keybox span { font-size: 11.5px; }
.pix-steps { padding-left: 18px; margin: 0 0 10px; } .pix-steps li { margin-bottom: 3px; }
.pix-ok { text-align: center; padding: 16px 0 6px; }
@media (min-width: 700px) {
  .cli-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .kpis.mini { grid-template-columns: 1fr; } .kpis.mini .kpi { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 12px; }
  .kpis.mini .ic { margin: 0; grid-row: span 2; } .kpis.mini .v { grid-row: span 2; grid-column: 3; text-align: right; } .kpis.mini .l { grid-column: 2; } .kpis.mini .d { grid-column: 2; }
  .price-card { grid-template-columns: 1fr 1fr; align-items: center; }
  .packs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- consumo ---------- */
.pbar { margin-bottom: 14px; } .pbar .row { margin-bottom: 6px; font-size: 14px; }
.pos { color: var(--good); } .neg { color: var(--bad); }
.card h2 svg.i { width: 18px; height: 18px; vertical-align: -3px; color: var(--brand); }
a.btn { text-decoration: none; }

/* status do programa no seletor da busca de teste */
.pst:empty { display: none; }
.pst { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--warn-soft); color: var(--warn); }