/* Painel Monte Sua Dieta · mesma identidade da página de vendas */
:root{
  --bg:#0a0a0a; --bg2:#141414; --card:rgba(30,30,30,.65); --border:#3a3a3a;
  --texto:#fff; --suave:#c9c9c9; --fraco:#8a8a8a; --rotulo:#b4b4b4;
  --laranja:#F76D00; --roxo:#BC40FF; --lime:#E0FC00;
  --verde:#1BE52F; --vermelho:#ff4141; --raio:14px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--texto);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:15px;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Sora",sans-serif; margin:0; line-height:1.2}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* grade sutil no fundo, igual à página. A imagem de atmosfera (quando existir) entra por baixo. */
body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:#0a0a0a url("../assets/bg-painel.webp") center/cover no-repeat; opacity:.5}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent 0 63px,rgba(255,255,255,.03) 63px 64px),
    repeating-linear-gradient(90deg,transparent 0 63px,rgba(255,255,255,.03) 63px 64px);
  -webkit-mask:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%);
          mask:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 85%)}
body > *{position:relative; z-index:1}

/* ── topo */
.topo{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:16px clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(188,64,255,.10),transparent)}
.topo__marca{display:flex; gap:14px; align-items:center}
.topo__marca img{width:104px; height:auto}
.topo__marca strong{display:block; font-family:"Sora",sans-serif; font-size:1rem}
.topo__marca span{font-size:.76rem; color:var(--fraco)}
.topo__ctrl{display:flex; gap:10px; flex-wrap:wrap}
.seg{display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:40px; padding:3px}
.seg button{border:0; background:none; color:var(--suave); cursor:pointer; padding:7px 14px;
  border-radius:40px; font-family:"Poppins",sans-serif; font-size:.8rem; transition:background .2s,color .2s}
.seg button:hover{color:#fff}
.seg button.on{background:linear-gradient(180deg,var(--lime),var(--laranja)); color:#111; font-weight:600}
.seg--modo button.on{background:linear-gradient(150deg,var(--laranja),var(--roxo)); color:#fff}
.seg--lente button.on{background:linear-gradient(150deg,var(--roxo),var(--laranja)); color:#fff}

/* janela personalizada de datas */
.janela{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:12px clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  background:rgba(188,64,255,.07)}
.janela.oculto{display:none}
.janela label{display:flex; gap:8px; align-items:center; font-size:.8rem; color:var(--suave)}
.janela input{background:var(--bg2); border:1px solid var(--border); color:#fff; border-radius:9px;
  padding:7px 10px; font-family:"Poppins",sans-serif; font-size:.82rem; color-scheme:dark}
.janela button{border:0; border-radius:9px; padding:8px 16px; cursor:pointer; font-size:.8rem;
  font-family:"Poppins",sans-serif; font-weight:600; background:linear-gradient(180deg,var(--lime),var(--laranja)); color:#111}
.janela button.fantasma{background:none; border:1px solid var(--border); color:var(--suave); font-weight:400}

.aviso{margin:0; padding:9px clamp(16px,3vw,32px); font-size:.8rem; color:#f6d8b0;
  background:rgba(247,109,0,.12); border-bottom:1px solid rgba(247,109,0,.3)}
.aviso.oculto{display:none}

/* ── abas */
.abas{display:flex; gap:4px; padding:0 clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas a{padding:13px 16px; font-family:"Sora",sans-serif; font-size:.88rem; color:var(--suave);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s,border-color .2s}
.abas a:hover{color:#fff}
.abas a.on{color:#fff; border-bottom-color:var(--laranja)}

main{padding:clamp(18px,3vw,30px) clamp(16px,3vw,32px) 60px; max-width:1500px; margin:0 auto}
.carregando{color:var(--fraco); padding:60px 0; text-align:center}

/* ── KPIs: grade fixa de 4 colunas para nunca sobrar cartão órfão na última linha */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:22px}
.kpis--3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--raio); padding:16px 18px;
  min-width:0}
.kpi h3{font-size:.72rem; font-weight:600; color:var(--rotulo); text-transform:uppercase;
  letter-spacing:.06em; font-family:"Poppins",sans-serif; margin-bottom:7px}
.kpi strong{font-family:"Sora",sans-serif; font-size:1.5rem; font-weight:700; display:block; line-height:1.15;
  overflow-wrap:anywhere}
.kpi small{font-size:.74rem; color:var(--fraco); display:block; margin-top:4px}
.kpi--bom strong{color:var(--verde)} .kpi--ruim strong{color:var(--vermelho)}
.kpi--destaque{border-color:var(--roxo); background:linear-gradient(180deg,rgba(188,64,255,.14),rgba(20,20,20,.7))}
/* chave %/R$ no KPI de reembolso */
.kpi--switch h3{display:flex; align-items:center; justify-content:space-between; gap:8px}
.kpi__sw{display:inline-flex; gap:0; border:1px solid var(--border); border-radius:7px; overflow:hidden}
.kpi__sw button{background:transparent; border:0; color:var(--fraco); font:inherit; font-size:.66rem;
  font-weight:700; padding:2px 8px; cursor:pointer; line-height:1.4; transition:background .15s, color .15s}
.kpi__sw button.on{background:var(--laranja); color:#141414}
.kpi__sw button:not(.on):hover{background:rgba(255,255,255,.08); color:#fff}

.grade{display:grid; gap:16px; margin-bottom:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g23{grid-template-columns:2fr 1fr}
.painel{background:var(--card); border:1px solid var(--border); border-radius:var(--raio); padding:18px;
  min-width:0}
.painel h2{font-size:.95rem; margin-bottom:4px}
.painel p.sub{font-size:.76rem; color:var(--fraco); margin:0 0 12px}
.painel--ad{cursor:pointer; transition:border-color .2s,transform .2s}
.painel--ad:hover{border-color:var(--laranja); transform:translateY(-2px)}
.gr{width:100%; height:300px}
.gr--alto{height:440px}

/* ── miniatura do criativo */
.mini{position:relative; overflow:hidden; border-radius:10px; background:linear-gradient(150deg,#2a1140,#3d1c05);
  display:grid; place-items:center; flex:0 0 auto}
.mini img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mini__letra{font-family:"Sora",sans-serif; font-weight:800; color:rgba(255,255,255,.5)}
.mini--p{width:34px; height:34px} .mini--p .mini__letra{font-size:.85rem}
.mini--m{width:52px; height:52px} .mini--m .mini__letra{font-size:1.1rem}
.mini--g{width:100%; aspect-ratio:1/1; border-radius:12px} .mini--g .mini__letra{font-size:2.4rem}
.cel-mini{display:flex; gap:10px; align-items:center; min-width:0}
.cel-mini span{overflow:hidden; text-overflow:ellipsis}
.cabeca-ad{display:flex; gap:16px; align-items:center; margin-bottom:18px}
.cabeca-ad .mini--g{width:86px; height:86px; aspect-ratio:auto}
.cabeca-ad h1{font-size:1.4rem}
.cabeca-ad .sub{font-size:.8rem; color:var(--fraco); margin:4px 0 0}

/* ── cards de criativo */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.card{background:rgba(16,16,16,.7); border:1px solid var(--border); border-radius:var(--raio);
  padding:12px; cursor:pointer; transition:border-color .2s,transform .2s; min-width:0}
.card:hover{border-color:var(--laranja); transform:translateY(-3px)}
.card__corpo{padding:11px 3px 2px}
.card h3{font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card__sub{font-size:.72rem; color:var(--fraco); margin:3px 0 10px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card__nums{display:flex; justify-content:space-between; gap:8px; font-size:.66rem; color:var(--fraco)}
.card__nums span{display:flex; flex-direction:column; gap:1px}
.card__nums b{font-family:"Sora",sans-serif; font-size:.95rem; color:#fff; font-weight:700}
.card__nums .bom b{color:var(--verde)} .card__nums .ruim b{color:var(--vermelho)}
.card__barra{height:4px; border-radius:4px; background:rgba(255,255,255,.07); margin-top:11px; overflow:hidden}
.card__barra i{display:block; height:100%; background:linear-gradient(90deg,var(--roxo),var(--lime))}

/* ── hotmap da página de vendas */
.hotmap{min-height:120px}
.hm__topo{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.hm__dica{font-size:.74rem; color:var(--fraco); margin:0; flex:1 1 240px}
.hm__corpo{display:grid; grid-template-columns:minmax(0,320px) 1fr; gap:22px 26px; align-items:start}
.hm__rolar{grid-column:1/-1; margin:0 0 -8px; font-size:.7rem; color:var(--fraco)}
.hm__pagina{margin:0; border-radius:12px; border:1px solid var(--border);
  height:620px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;
  scrollbar-color:var(--border) transparent}
.hm__folha{position:relative}
.hm__pagina img{width:100%; display:block; filter:grayscale(.55) brightness(.72)}
.hm__faixas{position:absolute; inset:0}
.hm__faixa{position:absolute; left:0; right:0; mix-blend-mode:screen; transition:filter .2s;
  border-top:1px solid rgba(10,10,10,.6)}
.hm__faixa.hm--on{filter:brightness(1.55)}
.hm__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.hm__lista li{display:grid; grid-template-columns:10px 1fr 58px 68px 58px; gap:10px; align-items:center;
  padding:7px 12px; border-radius:9px; font-size:.8rem; transition:background .2s}
.hm__lista li.hm--on{background:rgba(255,255,255,.06)}
.hm__cab{font-size:.66rem !important; color:var(--fraco); text-transform:uppercase;
  letter-spacing:.06em; border-bottom:1px solid var(--border); border-radius:0 !important; padding-bottom:9px !important}
.hm__cab .hm__valor{color:var(--fraco); font-weight:500}
.hm__cab .hm__valor--on{color:var(--laranja)}
.hm__cab .hm__termo-cab{font-size:.62rem; color:var(--fraco); font-weight:500; text-align:center;
  text-transform:uppercase; letter-spacing:.04em}
.hm__ponto{width:10px; height:10px; border-radius:3px; flex:0 0 auto; display:inline-block}
.hm__nome{color:var(--suave); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hm__valor{font-family:"Sora",sans-serif; font-weight:600; font-variant-numeric:tabular-nums;
  text-align:right; color:var(--fraco); font-size:.78rem}
.hm__valor--on{color:#fff; font-size:.88rem}
/* termômetro: barra proporcional ao tempo parado, cor pela escala de calor */
.hm__termo{height:8px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden}
.hm__termo i{display:block; height:100%; border-radius:5px; transition:width .3s}
.hm__legenda{margin:10px 2px 0; font-size:.72rem; color:var(--fraco); line-height:1.7}
.hm__legenda .hm__ponto{vertical-align:middle; margin:0 2px 0 4px}

/* ── widget de sync da Meta no cabeçalho */
.metasync{display:inline-flex; align-items:center; gap:8px; margin-top:5px; font-size:.72rem; color:var(--fraco)}
.metasync__dot{width:7px; height:7px; border-radius:50%; background:#6a6a6a; flex:0 0 auto}
.metasync__dot--ok{background:var(--verde, #1BE52F); box-shadow:0 0 0 3px rgba(27,229,47,.14)}
.metasync__dot--velho{background:#ffb020; box-shadow:0 0 0 3px rgba(255,176,32,.14)}
.metasync__dot--sync{background:var(--laranja, #F76D00); animation:pisca 1s ease-in-out infinite}
@keyframes pisca{50%{opacity:.35}}
.metasync__txt{font-variant-numeric:tabular-nums; white-space:nowrap}
.metasync__bt{background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--suave);
  font:inherit; font-size:.7rem; padding:2px 9px; border-radius:7px; cursor:pointer; transition:background .15s, border-color .15s}
.metasync__bt:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25)}
.metasync__bt:disabled{opacity:.6; cursor:default}
@media (max-width:720px){ .metasync{flex-wrap:wrap} }

/* ── Ao Vivo */
.avlist,.avstream{max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:6px}
.avvazio{color:var(--fraco); font-size:.82rem; padding:16px 4px}
.avitem{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.03); border:1px solid var(--border)}
.avitem__dev{font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fraco);
  background:rgba(255,255,255,.05); padding:2px 7px; border-radius:6px}
.avitem__meio b{font-size:.84rem; color:var(--suave); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avitem__meio small{font-size:.72rem; color:var(--fraco)}
.avitem__dir{display:flex; align-items:center; gap:8px}
.avitem__t{font-size:.72rem; color:var(--fraco); font-variant-numeric:tabular-nums; white-space:nowrap}
.avev{display:flex; align-items:center; gap:9px; padding:5px 4px; font-size:.8rem; color:var(--suave);
  border-bottom:1px solid rgba(255,255,255,.04)}
.avev__dot{width:6px; height:6px; border-radius:50%; background:var(--lime, #E0FC00); flex:0 0 auto}
.avev__txt{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avev__t{font-size:.72rem; color:var(--fraco); font-variant-numeric:tabular-nums}

/* ── change tracking (anotações) */
.anot__form{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; margin-bottom:14px}
.anot__form input,.anot__form button{background:rgba(255,255,255,.05); border:1px solid var(--border);
  color:#fff; font:inherit; font-size:.82rem; padding:7px 10px; border-radius:8px}
.anot__form button{background:var(--laranja); color:#141414; font-weight:600; cursor:pointer; border-color:transparent}
.anot__erro{grid-column:1/-1; color:var(--vermelho); font-size:.76rem}
.anot__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.anot__lista li{display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center;
  padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.84rem}
.anot__data{color:var(--laranja); font-variant-numeric:tabular-nums; white-space:nowrap; font-size:.78rem}
.anot__texto{color:var(--suave)}
.anot__autor{color:var(--fraco); font-size:.72rem}
.anot__del{background:none; border:0; color:var(--fraco); font-size:1.1rem; cursor:pointer; line-height:1; padding:0 4px}
.anot__del:hover{color:var(--vermelho)}
.anot__vazio,.anot__lista .anot__vazio{color:var(--fraco); font-size:.82rem; padding:10px 4px}
@media (max-width:640px){ .anot__form{grid-template-columns:1fr}
  .anot__lista li{grid-template-columns:1fr auto} .anot__autor{display:none} }

/* ── mapa do Brasil */
.mapabr{width:100%; height:440px}
.mapa-topo{display:flex; justify-content:flex-end; margin-bottom:6px}
.seg--mapa button{font-size:.72rem}

/* ── tabela */
.tabela{width:100%; border-collapse:collapse; font-size:.82rem}
.tabela th{text-align:left; font-family:"Sora",sans-serif; font-size:.72rem; color:var(--rotulo);
  text-transform:uppercase; letter-spacing:.05em; padding:9px 10px; border-bottom:1px solid var(--border);
  white-space:nowrap}
.tabela th.ord{cursor:pointer; user-select:none; transition:color .2s}
.tabela th.ord:hover{color:#fff}
.tabela th.ord i{font-style:normal; margin-left:5px; opacity:.4; font-size:.8em}
.tabela th.ord--on{color:#fff} .tabela th.ord--on i{opacity:1; color:var(--laranja)}
.tabela th.num{text-align:right}
.tabela td{padding:10px; border-bottom:1px solid rgba(255,255,255,.05); color:#e4e4e4}
.tabela tr:hover td{background:rgba(255,255,255,.03)}
.tabela tr.clicavel{cursor:pointer}
.num{text-align:right; font-variant-numeric:tabular-nums}
.bom{color:var(--verde)} .ruim{color:var(--vermelho)} .alerta{color:var(--laranja)}
.tag{display:inline-block; padding:2px 9px; border-radius:20px; font-size:.7rem; font-weight:600}
.tag--bom{background:rgba(27,229,47,.15); color:var(--verde)}
.tag--ruim{background:rgba(255,65,65,.15); color:var(--vermelho)}
.rolagem{overflow-x:auto}

.vazio{padding:40px 20px; text-align:center; color:var(--fraco); font-size:.86rem}
.vazio b{color:#fff; display:block; margin-bottom:6px; font-family:"Sora",sans-serif}

/* ── drill-down */
.voltar{display:inline-flex; align-items:center; gap:7px; color:var(--laranja); font-size:.82rem;
  margin-bottom:14px; cursor:pointer}
.rodape{padding:22px clamp(16px,3vw,32px); border-top:1px solid var(--border);
  color:var(--fraco); font-size:.74rem}

@media (max-width:1200px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .hm__corpo{grid-template-columns:minmax(0,260px) 1fr; gap:16px}
}
@media (max-width:1000px){
  .g3,.g23{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .hm__corpo{grid-template-columns:1fr}
  .hm__pagina{max-width:340px; margin:0 auto}
}
@media (max-width:860px){
  /* três colunas de métrica não cabem: fica só a da lente ativa, senão o nome da seção some */
  .hm__lista li{grid-template-columns:10px 1fr 60px 68px}
  .hm__lista .hm__valor{display:none}
  .hm__lista .hm__valor--on{display:block}
  .hm__cab .hm__termo-cab{display:block}
}
@media (max-width:720px){
  .g2{grid-template-columns:1fr}
  .kpis,.kpis--3{grid-template-columns:repeat(2,1fr)}
  .topo{gap:12px} .topo__ctrl{width:100%}
  .gr{height:260px} .gr--alto{height:420px}
  .kpi strong{font-size:1.25rem}
}
@media (max-width:420px){ .cards{grid-template-columns:1fr} }

/* ══════════ Autenticação: login · seletor de produtos · admin ══════════ */
/* Visibilidade por tela (body[data-tela]) */
#login,#picker{display:none}
body[data-tela="login"] .topo,
body[data-tela="login"] .aviso,
body[data-tela="login"] .abas,
body[data-tela="login"] #tela,
body[data-tela="login"] .rodape,
body[data-tela="login"] .janela{display:none!important}
body[data-tela="login"] #login{display:grid}
body[data-tela="picker"] .topo,
body[data-tela="picker"] .aviso,
body[data-tela="picker"] .abas,
body[data-tela="picker"] #tela,
body[data-tela="picker"] .rodape,
body[data-tela="picker"] .janela{display:none!important}
body[data-tela="picker"] #picker{display:block}

/* Login: cartão de vidro preto, feixes de luz na borda e leve inclinação 3D.
   Fundo preto + a grade do body (body::before). Sem logo, sem Google, só e-mail e senha. */
#login{min-height:100vh; place-items:center; padding:24px; position:relative}
/* glow branco que segue o mouse (posição via JS, em auth.js) */
.lg-glow{position:absolute; left:50%; top:38%; width:620px; height:620px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 62%); filter:blur(50px);
  transition:left .14s ease-out, top .14s ease-out}
.lg-tilt{perspective:1500px; width:min(380px,92vw); z-index:1}
.lg-card{position:relative; transform-style:preserve-3d; transition:transform .12s ease-out}
/* feixes correndo pela borda */
.lg-beams{position:absolute; inset:-1px; border-radius:22px; overflow:hidden; pointer-events:none}
.lg-beams .b{position:absolute; opacity:.6; filter:blur(1px)}
.b-top,.b-bottom{height:2px; width:50%; background:linear-gradient(90deg,transparent,#fff,transparent)}
.b-left,.b-right{width:2px; height:50%; background:linear-gradient(180deg,transparent,#fff,transparent)}
.b-top{top:0; left:-50%; animation:beamTop 3s linear infinite}
.b-bottom{bottom:0; right:-50%; animation:beamBottom 3s linear infinite 1.5s}
.b-left{bottom:-50%; left:0; animation:beamLeft 3s linear infinite .75s}
.b-right{top:-50%; right:0; animation:beamRight 3s linear infinite 2.25s}
@keyframes beamTop{to{left:100%}}
@keyframes beamBottom{to{right:100%}}
@keyframes beamLeft{to{bottom:100%}}
@keyframes beamRight{to{top:100%}}
.dot{position:absolute; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); filter:blur(1px); animation:dotPulse 2.4s ease-in-out infinite}
.d-tl{top:0;left:0}.d-tr{top:0;right:0}.d-br{bottom:0;right:0}.d-bl{bottom:0;left:0}
@keyframes dotPulse{50%{opacity:.25}}
.lg-inner{position:relative; background:rgba(8,8,8,.6); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.06); border-radius:22px; padding:34px 30px; box-shadow:0 40px 90px -30px #000}
.lg-inner::before{content:""; position:absolute; inset:0; border-radius:22px; opacity:.035; pointer-events:none;
  background-image:linear-gradient(135deg,#fff .5px,transparent .5px),linear-gradient(45deg,#fff .5px,transparent .5px); background-size:30px 30px}
.lg-head{text-align:center; margin-bottom:22px; position:relative}
.lg-head h1{font-size:1.2rem; font-weight:800; background:linear-gradient(180deg,#fff,rgba(255,255,255,.72));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lg-head p{color:rgba(255,255,255,.42); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; margin-top:5px}
.lg-form{position:relative; display:flex; flex-direction:column}
.lg-field{position:relative; display:flex; align-items:center; margin-bottom:12px}
.lg-ic{position:absolute; left:12px; width:16px; height:16px; color:rgba(255,255,255,.4); pointer-events:none; transition:color .25s}
.lg-field:focus-within .lg-ic{color:#fff}
.lg-field input{width:100%; height:44px; background:rgba(255,255,255,.05); border:1px solid transparent; border-radius:10px;
  padding:0 40px; color:#fff; font-size:.95rem; font-family:inherit; transition:background .25s,border-color .25s}
.lg-field input::placeholder{color:rgba(255,255,255,.3)}
.lg-field input:focus{outline:none; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2)}
.lg-eye{position:absolute; right:8px; background:none; border:0; cursor:pointer; color:rgba(255,255,255,.4); padding:6px; display:flex}
.lg-eye svg{width:16px; height:16px}
.lg-eye:hover{color:#fff}
.lg-btn{position:relative; width:100%; height:44px; margin-top:6px; border:0; border-radius:10px; cursor:pointer;
  background:#fff; color:#111; font-family:"Sora",sans-serif; font-weight:700; font-size:.9rem; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:transform .2s}
.lg-btn:hover{transform:scale(1.02)}
.lg-btn:disabled{opacity:.7; cursor:default}
.lg-btn::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%); animation:lgSweep 3s ease-in-out infinite}
@keyframes lgSweep{0%,40%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
.lg-btn__arrow{width:14px; height:14px; position:relative}
.lg-erro{color:#ff6b6b; font-size:.8rem; text-align:center; min-height:1.1em; margin:12px 0 0}
@media (prefers-reduced-motion:reduce){.lg-beams .b,.dot,.lg-btn::after{animation:none}.lg-card{transition:none}}

/* Barra de conta (picker + topo do produto) */
.conta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:16px clamp(16px,3vw,32px); border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(188,64,255,.10),transparent)}
.conta__marca{font-family:"Sora",sans-serif; font-weight:700}
.conta__marca b{color:var(--laranja)}
.conta__acoes,.topo__conta{display:flex; gap:8px; flex-wrap:wrap}
.conta__bt{background:var(--bg2); border:1px solid var(--border); color:var(--suave); cursor:pointer;
  padding:8px 14px; border-radius:40px; font-family:"Poppins",sans-serif; font-size:.8rem; transition:.2s}
.conta__bt:hover{color:#fff; border-color:var(--laranja)}

/* Seletor de produtos */
.picker__miolo{max-width:1000px; margin:0 auto; padding:clamp(30px,6vw,70px) 24px}
.picker__ola{color:var(--fraco); font-size:.9rem}
.picker__ola span{color:#fff}
.picker__h{font-size:clamp(1.4rem,3vw,2rem); margin:6px 0 30px}
/* Dock dos produtos: capa + nome, com magnificação estilo macOS (largura via JS) */
.dock{list-style:none; margin:0; padding:24px 0 6px; display:flex; align-items:flex-end;
  justify-content:center; gap:22px; min-height:240px}
.dock__item{display:flex; flex-direction:column; align-items:center; gap:14px}
.dock__btn{position:relative; width:96px; height:96px; padding:0; border:1px solid rgba(255,255,255,.08);
  border-radius:18px; overflow:hidden; cursor:pointer; background:var(--bg2); box-shadow:0 12px 30px -12px #000;
  transition:width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s}
.dock__cover{width:100%; height:100%; object-fit:cover; display:block}
.dock__item:not(.dock__item--off) .dock__btn:hover{border-color:rgba(255,255,255,.7);
  box-shadow:0 22px 50px -14px rgba(0,0,0,.9), 0 0 22px 2px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.6)}
.dock__nome{font-family:"Sora",sans-serif; font-size:.92rem; color:var(--suave); white-space:nowrap; transition:color .2s}
.dock__item:hover .dock__nome{color:#fff}
.dock__by{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:26px;
  color:var(--fraco); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.dock__by img{height:15px; width:auto; opacity:.8}
.dock__item--off .dock__btn{cursor:default}
.dock__item--off .dock__cover{opacity:.55; filter:grayscale(.25)}
.dock__soon{position:absolute; inset:auto 0 0 0; background:rgba(0,0,0,.68); color:#fff; font-size:.6rem;
  text-align:center; padding:3px 0; text-transform:uppercase; letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){ .dock__btn{transition:box-shadow .3s,border-color .3s} }

/* Admin: usuários */
#usuarios{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:20px}
#usuarios.oculto{display:none}
.umodal{width:min(760px,96vw); max-height:88vh; overflow:auto; background:var(--bg2); border:1px solid var(--border);
  border-radius:16px; padding:24px}
.umodal__topo{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.umodal__topo h2{font-size:1.2rem}
.uform{display:grid; grid-template-columns:1fr 1.4fr 1fr auto auto; gap:8px}
.uform input,.uform select{background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:#fff; font-family:inherit; font-size:.85rem}
.uform button{border:0; cursor:pointer; border-radius:8px; padding:9px 14px; font-family:"Sora",sans-serif; font-weight:700; color:#111; background:linear-gradient(180deg,var(--lime),var(--laranja))}
.uerro{color:var(--vermelho); font-size:.82rem; min-height:1em; margin:8px 0 0}
.utab-rolagem{overflow-x:auto}
.utab{width:100%; border-collapse:collapse; font-size:.85rem; margin-top:10px}
.utab th,.utab td{text-align:left; padding:9px 8px; border-bottom:1px solid var(--border); white-space:nowrap}
.utab th{color:var(--fraco); font-weight:600; font-size:.72rem; text-transform:uppercase}
.utab .ok{color:var(--verde)} .utab .off{color:var(--vermelho)} .utab .voce{color:var(--fraco)}
.umini{padding:5px 10px; font-size:.75rem}
@media (max-width:640px){ .uform{grid-template-columns:1fr 1fr} }