:root{
  --relva:#0B8A4B; --relva-bg:#e3f3ea; --relva-d:#076638;
  --ouro:#F4B740; --ouro-bg:#FBEFD2; --ouro-d:#8a6a12;
  --ceu:#2F80ED; --ceu-bg:#e7f0fd; --ceu-d:#1c5bb8;
  --carvao:#14241C; --marfim:#F7F6F1; --linha:#e3e1d8;
  --muted:#5b6b62; --muted2:#9aa39d;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--marfim); color:var(--carvao);
  overscroll-behavior:none; -webkit-user-select:none; user-select:none;
}
.d,.brand{font-family:'Unbounded',sans-serif;}
#app{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;}
.hidden{display:none !important;}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--marfim);
  padding:calc(var(--safe-top) + 12px) 18px 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:0.5px solid var(--linha);
}
.brand{font-weight:800;font-size:22px;color:var(--carvao);}
.brand span{color:var(--ouro);}
.presence{font-size:12px;color:var(--relva);background:var(--relva-bg);padding:5px 10px;border-radius:20px;font-weight:500;display:flex;align-items:center;gap:6px;border:none;font-family:inherit;cursor:pointer;}
.presence .dot{width:8px;height:8px;border-radius:50%;background:var(--relva);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(11,138,75,.5);}70%{box-shadow:0 0 0 7px rgba(11,138,75,0);}100%{box-shadow:0 0 0 0 rgba(11,138,75,0);}}

/* Views */
.view{flex:1;padding:16px 16px 96px;}

/* Progress ring */
.ring-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0 4px;}
.ring{transform:rotate(-90deg);}
.ring .bg{stroke:var(--linha);}
.ring .fg{stroke:var(--relva);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);}
.ring-label{font-family:'Unbounded';font-weight:800;font-size:38px;}
.ring-sub{font-size:13px;fill:var(--muted);}

/* Stat cards */
.stats{display:flex;gap:10px;margin:10px 0 4px;}
.stat{flex:1;border-radius:14px;padding:12px;text-align:center;background:#fff;border:0.5px solid var(--linha);}
.stat.gold{background:var(--ouro-bg);border:none;}
.stat .n{font-family:'Unbounded';font-weight:600;font-size:21px;}
.stat.gold .n{color:var(--ouro-d);}
.stat .l{font-size:11px;color:var(--muted);}
.stat.gold .l{color:var(--ouro-d);}

/* Section label */
.sec-label{font-size:10px;letter-spacing:.06em;color:var(--muted2);text-transform:uppercase;margin:18px 0 9px;}

/* Responsável (admin da família) */
.resp-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.02em;
  background:var(--relva);color:#fff;border-radius:9px;padding:1px 7px;vertical-align:middle;}
.resp-nudge{margin-top:10px;font-size:12px;line-height:1.4;color:var(--muted);
  background:#fbefd2;border:0.5px solid #f0d79a;border-radius:11px;padding:9px 11px;}
.mem-devices{margin:0 0 6px 4px;padding-left:10px;border-left:2px solid var(--linha);}
.mem-dev{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 0;font-size:12px;color:var(--muted);}
.mem-dev code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--carvao);}

/* Closest teams (linha clicável → Álbum) */
.closest-row{display:flex;align-items:center;gap:9px;margin-bottom:11px;width:100%;
  background:transparent;border:none;padding:2px 0;font-family:inherit;color:inherit;
  text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:fadeUp .35s ease both;animation-delay:calc(var(--i,0)*55ms);}
.closest-row .fl{width:22px;height:16px;border-radius:3px;background-size:cover;flex:none;}
.closest-row .code{font-size:12px;font-weight:500;width:38px;}
.bar{flex:1;height:7px;background:var(--linha);border-radius:4px;overflow:hidden;}
.bar > i{display:block;height:100%;background:var(--relva);border-radius:4px;
  transform-origin:left center;animation:barfill .65s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(.12s + var(--i,0)*55ms);}
.closest-row .frac{font-size:11px;color:var(--muted);width:42px;text-align:right;}
.closest-row .chev{font-size:16px;color:var(--muted2);flex:none;transition:transform .15s;}
.closest-row:active{transform:scale(.985);}
.closest-row:active .chev{transform:translateX(2px);}
.closest-row:focus-visible{outline:2px solid var(--relva);outline-offset:3px;border-radius:8px;}

/* Feed de atividade da família */
.act-row{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px;
  border-bottom:0.5px solid var(--linha);animation:fadeUp .35s ease both;
  animation-delay:calc(var(--i,0)*55ms);}
.act-row:last-child{border-bottom:none;}
.act-row .fl{width:22px;height:16px;border-radius:3px;background-size:cover;flex:none;}
.act-row .fl.ph{display:flex;align-items:center;justify-content:center;background:var(--ouro-bg);}
.act-row .fl.ph i{font-size:12px;color:var(--ouro-d);}
.act-row .act-txt{flex:1;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-row .act-txt b{color:var(--carvao);font-weight:600;}
.act-row .act-time{font-size:11px;color:var(--muted2);flex:none;}

@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes barfill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* Quem prefere menos movimento (acessibilidade) não vê as entradas animadas. */
@media (prefers-reduced-motion:reduce){
  .closest-row,.act-row,.bar > i,.update-bar,.sheet{animation:none !important;}
  .ring .fg{transition:none !important;}
  .paste-ghost{display:none !important;}
}

/* Search */
.search{display:flex;align-items:center;gap:8px;background:#fff;border:0.5px solid var(--linha);border-radius:12px;padding:10px 13px;margin-bottom:12px;}
.search i{color:var(--muted2);}
.search input{border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--carvao);width:100%;}

/* Team chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:6px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}

/* Aviso de nova versão (PWA) */
.update-bar{position:fixed;left:12px;right:12px;bottom:84px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--carvao);color:#fff;padding:10px 12px 10px 16px;border-radius:14px;font-size:13px;box-shadow:0 6px 22px rgba(0,0,0,.20);animation:upbar .25s ease;}
.update-bar button{flex:none;background:var(--ouro);color:var(--carvao);border:0;font-family:inherit;font-weight:600;font-size:13px;padding:8px 14px;border-radius:10px;cursor:pointer;}
.update-bar button:disabled{opacity:.6;cursor:default;}
@keyframes upbar{from{transform:translateY(12px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.chip{flex:none;display:flex;align-items:center;gap:6px;font-size:12px;padding:6px 11px;border-radius:20px;background:#fff;border:0.5px solid var(--linha);color:var(--muted);cursor:pointer;}
.chip .fl{width:18px;height:13px;border-radius:3px;background-size:cover;}
.chip.active{background:var(--relva);color:#fff;border-color:var(--relva);}

/* Team header */
.team-head{display:flex;align-items:center;gap:9px;margin:6px 0 12px;}
.team-head .fl{width:26px;height:19px;border-radius:4px;background-size:cover;}
.team-head .name{font-size:15px;font-weight:600;}
.team-head .abbr{font-size:11px;color:var(--muted2);}
.team-head .frac{margin-left:auto;font-size:11px;color:var(--relva);background:var(--relva-bg);padding:3px 9px;border-radius:20px;}

/* Sticker grid */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.cell{
  aspect-ratio:3/4;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:'Unbounded';font-weight:600;font-size:10.5px;letter-spacing:-.02em;
  position:relative;cursor:pointer;
  background:transparent;border:1px dashed #c8ccc6;color:#b3b8b2;
  transition:transform .08s, background .15s;
  padding:0 2px;margin:0;width:100%;appearance:none;-webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.cell > span{white-space:nowrap;}
@media (max-width:359px){ .cell{font-size:9.5px;} }
.cell:active{transform:scale(.92);}
.cell:focus-visible{outline:3px solid var(--carvao);outline-offset:2px;}
.cell.colada{background:var(--relva);border:1px solid var(--relva);color:#fff;}

/* Animação "Colar figurinha": um clone (ghost) da figurinha curva como papel
   e assenta sobre a célula, com um brilho passando. É um overlay no body,
   INDEPENDENTE da grade — a grade é redesenhada em tempo real pelo Firestore,
   e animar a própria célula não funciona (o re-render destrói o elemento no
   meio da animação). O ghost some sozinho ao terminar. */
.paste-ghost{position:fixed;z-index:55;display:flex;align-items:center;justify-content:center;
  background:var(--relva);color:#fff;border-radius:9px;overflow:hidden;pointer-events:none;
  font-family:'Unbounded';font-weight:600;font-size:10.5px;letter-spacing:-.02em;
  animation:pCurl .55s cubic-bezier(.34,1.4,.5,1) both;transform-origin:bottom right;}
.paste-ghost::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  animation:sweep .55s ease-out both;}
@keyframes pCurl{0%{transform:perspective(180px) rotateX(62deg) rotateZ(-7deg) translateY(-6px);}55%{transform:perspective(180px) rotateX(-12deg) rotateZ(2deg);}78%{transform:perspective(180px) rotateX(5deg);}100%{transform:perspective(180px) rotateX(0) rotateZ(0);}}
@keyframes sweep{0%{opacity:0;transform:translateX(-70%);}25%{opacity:1;}100%{opacity:0;transform:translateX(70%);}}
.cell.rep{background:var(--ouro-bg);border:1px solid var(--ouro);color:var(--ouro-d);}
.cell .badge{position:absolute;top:-5px;right:-5px;background:var(--ouro);color:var(--carvao);font-family:'Inter';font-size:9px;font-weight:600;border-radius:9px;padding:1px 5px;}
.cell .foil{position:absolute;top:4px;left:5px;font-size:9px;color:var(--ouro);}
.cell.colada .foil{color:#fff;}
.hint{text-align:center;font-size:10.5px;color:var(--muted2);padding:14px 0 0;}

/* Segmented */
.seg{display:flex;background:#eceae2;border-radius:11px;padding:3px;margin-bottom:14px;}
.seg button{flex:1;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--muted);padding:8px 0;border-radius:9px;cursor:pointer;font-weight:500;}
.seg button.active{background:#fff;color:var(--carvao);}

/* Trade summary cards */
.troca-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.troca-card{border-radius:14px;padding:12px 14px;}
.troca-card .n{font-size:28px;font-weight:700;line-height:1.1;}
.troca-card .l{font-size:11px;font-weight:500;margin-top:3px;opacity:.75;}
.troca-card.gold{background:var(--ouro-bg);color:var(--ouro-d);}
.troca-card.blue{background:var(--ceu-bg);color:var(--ceu-d);}

/* Share button */
.share-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:13px;background:var(--relva);color:#fff;border:none;border-radius:14px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:16px;letter-spacing:.1px;}
.share-btn i{font-size:19px;}
.share-btn:active{opacity:.85;}

/* Trade groups */
.tg{margin-bottom:14px;}
.tg-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.tg-head .fl{width:20px;height:15px;border-radius:3px;background-size:cover;}
.tg-head .code{font-size:12px;font-weight:500;flex:1;}
.tg-count{font-size:11px;font-weight:600;color:var(--muted2);background:#eceae2;padding:2px 8px;border-radius:20px;}
.tg-chips{display:flex;flex-wrap:wrap;gap:6px;}
.pill{font-size:12px;padding:4px 9px;border-radius:20px;position:relative;}
.pill.gold{background:var(--ouro-bg);color:var(--ouro-d);}
.pill.blue{background:var(--ceu-bg);color:var(--ceu-d);}
.pill .rep-badge{position:absolute;top:-6px;right:-6px;background:var(--ouro);color:#4a2800;font-size:9px;font-weight:700;border-radius:10px;padding:1px 5px;border:2px solid var(--marfim);white-space:nowrap;}
.empty{text-align:center;color:var(--muted2);font-size:13px;padding:40px 20px;}

/* Tab bar */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  max-width:520px;margin:0 auto;background:#fff;border-top:0.5px solid var(--linha);
  display:flex;padding:8px 0 calc(8px + var(--safe-bot));
}
.tab{flex:1;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted2);font-family:inherit;font-size:9.5px;cursor:pointer;}
.tab i{font-size:21px;}
.tab.active{color:var(--relva);}

/* Bottom sheet */
.sheet-overlay{position:fixed;inset:0;z-index:40;background:rgba(20,36,28,.4);display:flex;align-items:flex-end;}
.sheet-overlay.hidden{display:none;}
.sheet{width:100%;max-width:520px;margin:0 auto;background:var(--marfim);border-radius:22px 22px 0 0;padding:20px 20px calc(22px + var(--safe-bot));animation:up .25s cubic-bezier(.2,.8,.2,1);}
@keyframes up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.sheet h3{font-family:'Unbounded';font-weight:600;font-size:18px;margin:0 0 4px;display:flex;align-items:center;gap:8px;}
.sheet .fl{width:24px;height:18px;border-radius:4px;background-size:cover;}
.sheet .sub{font-size:12px;color:var(--muted);margin-bottom:18px;}
.stepper{display:flex;align-items:center;justify-content:space-between;background:#fff;border:0.5px solid var(--linha);border-radius:14px;padding:10px 14px;margin-bottom:12px;}
.stepper .lab{font-size:13px;}
.stepper .ctrls{display:flex;align-items:center;gap:16px;}
.stepper button{width:36px;height:36px;border-radius:50%;border:none;background:var(--relva-bg);color:var(--relva);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.stepper .val{font-family:'Unbounded';font-weight:600;font-size:18px;min-width:22px;text-align:center;}
.sheet-actions{display:flex;gap:10px;}
.btn{flex:1;text-align:center;font-size:14px;font-weight:500;padding:13px;border-radius:13px;border:none;font-family:inherit;cursor:pointer;}
.btn.primary{background:var(--relva);color:#fff;}
.btn.ghost{background:#fff;border:0.5px solid var(--linha);color:var(--carvao);}
.btn:disabled{opacity:.65;cursor:default;}

/* Toggle "Tenho colada" no sheet: switch on/off (sinalizador universal de
   booleano), bem mais óbvio de tocar do que um botão que troca o rótulo. */
.switch-state{font-size:13px;font-weight:600;color:var(--muted);min-width:26px;text-align:right;}
.switch{position:relative;display:inline-flex;flex:none;width:50px;height:30px;cursor:pointer;}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.switch .track{width:50px;height:30px;border-radius:30px;background:var(--linha);transition:background .2s ease;position:relative;}
.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,36,28,.25);transition:transform .2s ease;}
.switch input:checked + .track{background:var(--relva);}
.switch input:checked + .track .knob{transform:translateX(20px);}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--relva-bg);}
.switch.locked{cursor:default;opacity:.55;}
.switch.locked input{cursor:default;}

/* Spinner em botões em estado de carregando (ações de rede). */
.btn.loading{display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;display:inline-block;animation:spin .7s linear infinite;flex:none;}
.btn.ghost .spin{border-color:rgba(20,36,28,.25);border-top-color:var(--carvao);}
@keyframes spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:1.4s;} }

/* Zona de ações avançadas/perigosas no painel da família (escondida num details). */
.danger-zone{margin-top:18px;border-top:0.5px solid var(--linha);padding-top:12px;}
.danger-zone summary{font-size:12px;color:var(--muted2);cursor:pointer;list-style:none;}
.danger-zone summary::-webkit-details-marker{display:none;}
.danger-zone summary::before{content:'⚙ ';}
.danger-note{font-size:12px;color:var(--muted);line-height:1.45;margin:10px 0 12px;}
.btn-danger{width:100%;background:#fdeaea;color:#a3302a;border:0.5px solid #f3c4c0;
  font-family:inherit;font-size:13px;font-weight:600;padding:12px;border-radius:13px;cursor:pointer;}
.btn-danger:disabled{opacity:.6;cursor:default;}

/* Confetti */
.confetti{position:fixed;width:9px;height:9px;z-index:60;pointer-events:none;border-radius:2px;}

/* Gate (login / família) */
.gate{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 20px 96px;}
.gate.hidden{display:none !important;}
.gate .hero{text-align:center;margin-bottom:24px;}
.gate .hero .big{font-family:'Unbounded';font-weight:800;font-size:30px;}
.gate .hero .big span{color:var(--ouro);}
.gate .hero .tag{font-size:14px;color:var(--muted);margin-top:8px;}
.gate .card{background:#fff;border:0.5px solid var(--linha);border-radius:16px;padding:18px;margin-bottom:14px;}
.gate label{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted2);text-transform:uppercase;margin:0 0 7px;}
.gate input{width:100%;border:0.5px solid var(--linha);border-radius:12px;padding:12px 13px;font-family:inherit;font-size:14px;color:var(--carvao);background:var(--marfim);outline:none;margin-bottom:12px;}
.gate input:focus{border-color:var(--relva);}
.gate .row{display:flex;align-items:center;gap:10px;margin:14px 0;}
.gate .row .ln{flex:1;height:0.5px;background:var(--linha);}
.gate .row span{font-size:11px;color:var(--muted2);}
.gate .msg{font-size:13px;border-radius:12px;padding:11px 13px;margin-bottom:12px;}
.gate .msg.ok{background:var(--relva-bg);color:var(--relva-d);}
.gate .msg.err{background:#fdeaea;color:#a3302a;}
.gate .small{font-size:12px;color:var(--muted);text-align:center;margin-top:6px;}
.gate .btn{width:100%;}
.gate .btn + .btn{margin-top:10px;}
.gate .seg{margin-bottom:16px;}
.sharecode{font-family:'Unbounded';font-weight:600;font-size:20px;letter-spacing:.04em;background:var(--ouro-bg);color:var(--ouro-d);border-radius:12px;padding:12px;text-align:center;}