/* Folhinha VIP · identidade "Blocos". Tokens de design, componentes e layout.
   Celular: menu inferior. Tablet e computador: abas no topo. Aluno: cantos mais redondos (.tone-aluno). */
:root{
  /* marca */
  --navy-900:#0B1326; --navy-800:#121D36; --navy-700:#1A2A4A; --navy-600:#26406F; --navy-500:#3A5A96;
  --blue-300:#8FB0FF; --blue-400:#7EA2FF; --blue-500:#2457D6; --blue-600:#1B47BD; --blue-700:#173F9F;
  --sun-300:#FFD45A; --sun-500:#FFB92B; --sun-700:#8A5A00;
  --coral-400:#FF7F6E; --coral-500:#F2503F; --coral-600:#C8382A;
  --mint-400:#46DBA9; --mint-500:#1CA97B; --mint-700:#107A58;
  /* semânticas (tema claro) */
  --bg:#EEF2F8; --surface:#FFFFFF; --soft:#E6EDF9; --line:#CBD6E6; --ink:#14213D; --muted:#586A82;
  --primary:var(--blue-500); --primary-hover:var(--blue-600); --on-primary:#FFFFFF; --primary-edge:var(--blue-700);
  --reward:var(--sun-500); --on-reward:var(--navy-900); --reward-text:var(--sun-700); --reward-edge:#C98A12;
  --ok:var(--mint-700); --ok-fill:var(--mint-500); --danger:var(--coral-600); --danger-fill:var(--coral-500);
  --nav-bg:#FFFFFF; --hero-a:#2F67E8; --hero-b:#1B3FA8;
  --shadow-1:0 1px 2px rgba(20,33,61,.06),0 2px 8px rgba(20,33,61,.06); --shadow-2:0 6px 24px rgba(20,33,61,.12); --shadow-3:0 16px 48px rgba(20,33,61,.22);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --font-ui:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* nomes antigos, usados no restante do CSS */
  --paper:var(--surface); --accent:var(--primary); --accent-ink:var(--on-primary); --mark:var(--danger); --warn:var(--reward-text);
  --chest-gold:var(--sun-500); --chest-dark:#7A4A22;
  color-scheme:light;
}
.tone-aluno{--r-md:18px;--r-lg:28px}
@media (prefers-color-scheme:dark){:root{
  --bg:var(--navy-900); --surface:var(--navy-800); --soft:var(--navy-700); --line:#26385C; --ink:#E8EEF9; --muted:#93A4C0;
  --primary:var(--blue-400); --primary-hover:var(--blue-300); --on-primary:var(--navy-900); --primary-edge:#4F73C9;
  --reward:var(--sun-300); --reward-text:var(--sun-300); --reward-edge:#D9A21F;
  --ok:var(--mint-400); --ok-fill:var(--mint-400); --danger:var(--coral-400); --danger-fill:var(--coral-400);
  --nav-bg:var(--navy-800); --hero-a:#26406F; --hero-b:#16264C;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 24px rgba(0,0,0,.45); --shadow-3:0 16px 48px rgba(0,0,0,.6);
  --chest-gold:var(--sun-300); color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.5;
  padding-block:max(20px,env(safe-area-inset-top,0px)) max(48px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.05rem}
p{margin:0}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.loading{color:var(--muted);text-align:center;padding:40px 0}
.muted{color:var(--muted)} .small-t{font-size:.85rem} .center{text-align:center} .grow{flex:1 1 200px;min-width:0}
.gap{margin-top:12px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.brand small{display:block;font-weight:400;font-size:.8rem;color:var(--muted);letter-spacing:0}
.who{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted);flex-wrap:wrap}
.btn{border:0;border-radius:999px;padding:12px 22px;font-weight:600;background:var(--primary);color:var(--on-primary);box-shadow:0 2px 0 var(--primary-edge)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--primary-edge)}
.btn.reward{background:var(--reward);color:var(--on-reward);box-shadow:0 3px 0 var(--reward-edge)}
.btn.block{width:100%;padding:16px 24px;font-size:1.05rem}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.soft{background:var(--soft);color:var(--primary);box-shadow:none}
.btn.small{padding:8px 14px;font-size:.85rem;font-weight:500;box-shadow:none}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger);box-shadow:none}
.btn[disabled]{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--accent);font-size:.9rem;text-decoration:underline;text-align:left}
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500}
.panel{background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:20px;min-width:0}
.panel.center{display:flex;flex-direction:column;gap:12px;align-items:center}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.foot-note{text-align:center;color:var(--muted);font-size:.9rem}

/* formulários */
.form{display:flex;flex-direction:column;gap:14px}
.form.inline{flex-direction:row;align-items:flex-end;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:500;border:0;padding:0;margin:0;min-width:0}
.field legend{padding:0;margin-bottom:6px;font-size:.9rem;font-weight:500}
.field small{font-weight:400;color:var(--muted);font-size:.8rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input:not([type]),select{
  font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;min-width:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.radio{display:flex;gap:8px;align-items:center;font-weight:400;padding:4px 0}
.chks{display:flex;gap:6px;flex-wrap:wrap}
.chk{position:relative}
.chk input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chk span{display:block;padding:8px 12px;border:1px solid var(--line);border-radius:8px;min-width:3.2rem;text-align:center;font-weight:500}
.chk input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chk input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.msg{font-size:.92rem;color:var(--muted);min-height:1.2em}
.msg.bad{color:var(--mark)} .msg.good{color:var(--ok)}
.authbox,.pinbox{max-width:440px;width:100%;margin:0 auto}
.tabs{display:flex;gap:6px;margin-bottom:16px}
.tab{flex:1;border:1px solid var(--line);background:transparent;border-radius:10px;padding:10px;font-weight:600}
.tab.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.linkrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.linkrow input{flex:1 1 220px;font-family:var(--font-num);font-size:.85rem}
.code{font-family:var(--font-num);font-size:1.4rem;letter-spacing:.1em}

/* cartões e painéis */
.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{text-align:left;display:flex;flex-direction:column;gap:6px;width:100%}
.card{cursor:pointer;transition:box-shadow .15s,transform .15s}.card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-name{font-size:1.1rem;overflow-wrap:anywhere}
.lvlchip{font-family:var(--font-num);font-weight:600;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);border-radius:99px;padding:1px 10px;font-size:.85rem}
.now{display:flex;flex-direction:column;gap:14px}
.now .lvl{font-family:var(--font-num);font-weight:600;font-size:3.2rem;line-height:1;color:var(--accent)}
.now .nm{font-size:1.15rem;font-weight:600}
.stamps{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--muted);flex-wrap:wrap}
.row-gap{display:flex;gap:8px}
.stamp{width:34px;height:34px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--muted) 50%,transparent);display:grid;place-items:center;color:transparent;font-weight:700}
.stamp.on{border:2px solid var(--primary);background:var(--surface);color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sun-500) 70%,transparent);transform:rotate(-8deg)}
.today{font-size:1rem}
.reward{color:var(--ink)}
.big-pts{font-family:var(--font-num);font-weight:600;font-size:2.6rem;line-height:1.1;margin:6px 0 10px}
.big-pts span{font-size:1.2rem;color:var(--muted)}
.bar{height:12px;background:var(--soft);border-radius:99px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint-500),var(--mint-400));border-radius:99px}
.bar.reward i{background:linear-gradient(90deg,var(--sun-500),var(--sun-300))}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.miss li{font-size:.92rem}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.85rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:7px 10px 7px 0;border-top:1px solid var(--line);white-space:nowrap}
th{font-weight:500;color:var(--muted);border-top:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:500;background:var(--soft);color:var(--muted);white-space:nowrap}
.tag.ok{background:color-mix(in srgb,var(--ok-fill) 18%,transparent);color:var(--ok)} .tag.bad{background:color-mix(in srgb,var(--danger-fill) 16%,transparent);color:var(--danger)}
details summary{cursor:pointer;color:var(--muted);font-size:.95rem}
details .form{margin-top:12px}
.sheetview{margin-top:16px;border-top:2px solid var(--ink);padding-top:14px}
.sv{margin:12px 0 0;padding:0 0 0 1.4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.sv li{min-width:0}
.sv .q{font-family:var(--font-num);font-weight:500}
.sv li.bad .q{color:var(--mark)}

/* PIN */
.pinbox{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.dots4{display:flex;gap:14px;margin:6px 0}
.dots4 i{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink)}
.dots4 i.on{background:var(--ink)}
.keypad{display:grid;grid-template-columns:repeat(3,76px);gap:12px;margin-top:6px}
.key{height:64px;border-radius:50%;border:0;box-shadow:var(--shadow-1);background:var(--surface);font-family:var(--font-num);font-size:1.6rem;font-weight:600}
.key:active{background:var(--accent);color:var(--accent-ink)}

/* folha */
.paper{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 1px 0 var(--line),0 12px 30px -18px rgba(20,35,60,.35);
  max-width:760px;width:100%;margin:0 auto;padding:22px 24px 26px;display:flex;flex-direction:column;gap:18px}
.sh-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 16px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sh-head div{min-width:0}
.sh-head .k{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sh-head .v{font-family:var(--font-num);font-weight:600;font-size:1.05rem;overflow-wrap:anywhere}
.timer.over .v{color:var(--warn)}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:6px 36px}
.row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dotted var(--line);flex-wrap:wrap;min-width:0}
.row .n{font-size:.75rem;color:var(--muted);width:1.6rem;flex:none;font-variant-numeric:tabular-nums}
.row .q{font-family:var(--font-num);font-weight:500;font-size:1.35rem;white-space:pre-wrap}
.ans{position:relative;display:inline-block}
.ans input{font-family:var(--font-num);font-weight:600;font-size:1.35rem;width:5ch;text-align:center;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);padding:2px 0;border-radius:0}
.ans input:focus{outline:none;border-bottom-color:var(--accent);background:var(--soft)}
.row.ok .ans::after{content:"";position:absolute;inset:-7px -12px;border:2.5px solid var(--mark);border-radius:52% 48% 55% 45%/50% 55% 45% 50%;transform:rotate(-3deg);pointer-events:none}
.row.ok .ans input{border-bottom-color:transparent}
.row.bad .ans input{color:var(--mark);border-bottom-color:var(--mark)}
.row.bad .q{color:var(--mark)}
.row .tip{flex-basis:100%;padding-left:2.5rem;font-size:.82rem;color:var(--warn)}
.sh-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.sh-foot .msg{flex:1 1 220px}

/* resultado */
.res{max-width:640px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:18px}
.score{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.score .big{font-family:var(--font-num);font-weight:600;font-size:3.6rem;line-height:1}
.seal{width:92px;height:92px;border-radius:50%;border:4px solid var(--primary);color:var(--primary);display:grid;place-items:center;text-align:center;font-weight:700;font-size:.8rem;line-height:1.1;transform:rotate(-10deg);text-transform:uppercase;letter-spacing:.05em}
.seal.no{border-color:var(--line);color:var(--muted);border-style:dashed}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kv div{background:var(--soft);border-radius:var(--r-md);padding:12px}
.kv b{display:block;font-family:var(--font-num);font-size:1.25rem;font-weight:600}
.kv span{font-size:.78rem;color:var(--muted)}
.up{background:var(--soft);border-left:4px solid var(--ok);border-radius:8px;padding:12px 14px;font-weight:500}

#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.92rem;max-width:calc(100% - 32px);z-index:50}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--mark);color:#fff}
@media (prefers-reduced-motion:no-preference){#toast{transition:opacity .2s,transform .2s}.btn{transition:filter .15s}}

@media (max-width:760px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .items{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none}
  .sh-head{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paper{padding:18px 16px 22px}
  .kv,.two,.sv{grid-template-columns:minmax(0,1fr)}
  .now .lvl{font-size:2.6rem}
  .keypad{grid-template-columns:repeat(3,68px)}
  .key{height:58px}
}

.miss .q{font-family:var(--font-num)}

.installbox{display:flex;gap:12px;align-items:center}
.installbox img{border-radius:12px;flex:none}
.lvl .of{font-size:1.1rem;color:var(--muted);font-weight:500;font-family:var(--font-ui)}

/* carimbos e subida de nível */
.stamprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.stamprow .row-gap{flex-wrap:wrap}
.levelup{display:flex;align-items:center;gap:16px;background:var(--soft);border:2px solid var(--ok);border-radius:14px;padding:16px}
.lu-badge{font-family:var(--font-num);font-weight:600;font-size:2.2rem;line-height:1;color:var(--accent-ink);background:var(--accent);border-radius:14px;min-width:64px;height:64px;display:grid;place-items:center;padding:0 12px}
.lu-title{font-weight:700;font-size:1.2rem}
@media (prefers-reduced-motion:no-preference){
  .stamp.pop{animation:stampIn .55s cubic-bezier(.2,1.5,.4,1) .2s both}
  @keyframes stampIn{0%{transform:scale(2.6) rotate(-30deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
  .levelup{animation:luIn .6s cubic-bezier(.2,1.4,.4,1) 1s both}
  .levelup .lu-badge{animation:luPulse 1.2s ease-in-out 1.4s 2}
  @keyframes luIn{0%{opacity:0;transform:translateY(16px) scale(.92)}100%{opacity:1;transform:none}}
  @keyframes luPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18) rotate(-4deg)}}
  .confetti i{animation:fall linear forwards}
  @keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot))}}
}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.confetti i{position:absolute;top:-16px;width:10px;height:16px;border-radius:2px}

/* trilha até o baú */
.trail{display:flex;flex-direction:column;gap:12px}
.trail-line{display:flex;align-items:center;gap:14px}
.track{position:relative;flex:1;min-width:0;height:18px;background:var(--soft);border-radius:99px;margin:8px 0}
.track .fill{height:100%;background:linear-gradient(90deg,var(--sun-500),var(--sun-300));border-radius:99px;min-width:18px}
.prizebox{background:var(--soft);border-radius:12px;padding:12px 14px;font-size:.95rem}
.prizebox .pz-open{display:none}
.prizebox.show{border:2px solid var(--chest-gold)}
.prizebox.show .pz-closed{display:none} .prizebox.show .pz-open{display:block}
.pz-title{font-weight:700;font-size:1.15rem}
.pz-name{font-size:1.05rem}
.trailbox{background:var(--soft);border-radius:12px;padding:14px}
.trailbox .track{background:var(--paper)} .trailbox .prizebox{background:var(--paper)}
@media (prefers-reduced-motion:no-preference){
  .track .fill{transition:width 1.3s cubic-bezier(.3,.8,.3,1)}
  .prizebox.show .pz-open{animation:pzIn .6s cubic-bezier(.2,1.4,.4,1)}
  @keyframes pzIn{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:none}}
}

.tag.warn{background:color-mix(in srgb,var(--sun-500) 22%,transparent);color:var(--reward-text)}

/* figurinhas e avisos */
.goalicon{width:70px;flex:none}
.goalicon.open{filter:drop-shadow(0 0 8px var(--chest-gold))}
.pack-svg{width:100%;height:auto;display:block}
.sticker{--sh:200;background:hsl(var(--sh) 80% 91%);color:#1d2433;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 1px hsl(var(--sh) 40% 75%),0 3px 8px rgba(20,35,60,.18);padding:8px 6px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.sticker .st-art{width:100%;aspect-ratio:1/1;display:grid;place-items:center;line-height:1}
.sticker .st-art svg{width:100%;height:100%;display:block;border-radius:12px}
.sticker .emo{font-size:2.5rem;line-height:1}
.sticker .st-name{font-weight:600;font-size:.74rem;line-height:1.15;overflow-wrap:normal;word-break:normal;hyphens:manual;max-width:100%}
.sticker .st-no{font:500 .65rem var(--font-num);color:rgba(29,36,51,.6)}
.sticker.dim{opacity:.38;filter:grayscale(.5)}
.sticker.locked{background:var(--soft);border:2px dashed var(--line);box-shadow:none;color:var(--muted)}
.sticker.locked .st-no{color:var(--muted)}
.sticker .st-q{font:700 1.8rem var(--font-num);color:var(--muted)}
.sticker.big{width:180px;margin:0 auto;padding:12px 10px}
.sticker.big .emo{font-size:5rem} .sticker.big .st-name{font-size:1rem}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.recent-stk{display:flex;gap:8px;margin:10px 0}
.recent-stk .sticker{width:92px}
.theme-box{display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:var(--soft);border-radius:10px;padding:12px}
.theme-box .field{width:100%}
@media (prefers-color-scheme:dark){
  .sticker{background:hsl(var(--sh) 40% 27%);color:#fff;border-color:#2b3a52;box-shadow:0 0 0 1px hsl(var(--sh) 35% 40%),0 3px 8px rgba(0,0,0,.4)}
  .sticker .st-no{color:rgba(255,255,255,.65)}
}
/* Giro da figurinha e verso com os detalhes */
.sticker.flippable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.sticker.flippable:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ov-card.flip-ov{max-width:360px;padding:16px 14px;overflow:visible;max-height:none}
.flip{perspective:1400px;width:100%;cursor:pointer;outline:none}
.flip-in{display:grid;transform-style:preserve-3d}
.flip-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-front{display:flex}
.flip-front .sticker.big{width:100%;height:100%;box-sizing:border-box;justify-content:center;padding:14px 12px 10px}
.flip-front .sticker.big .st-art{flex:1;aspect-ratio:auto;min-height:0}
.flip-front .sticker.big .st-art img:not(.flag){max-height:100%}
.flip-front .sticker.big .st-name{font-size:1.2rem}
.flip-back{transform:rotateY(180deg)}
.flip.flipped .flip-in{transform:rotateY(180deg)}
@media (prefers-reduced-motion:no-preference){.flip-in{transition:transform .7s cubic-bezier(.3,1.3,.5,1)}}
.flip-hint{margin:0}
.fc-back{--sh:200;height:100%;box-sizing:border-box;background:hsl(var(--sh) 80% 91%);color:#1d2433;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 1px hsl(var(--sh) 40% 75%),0 3px 8px rgba(20,35,60,.18);padding:12px 12px 8px;text-align:left;display:flex;flex-direction:column;gap:8px}
.fb-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.fb-name{font-size:1.15rem;line-height:1.15}
.fb-sub{font-size:.72rem;opacity:.75}
.fb-tier{margin-top:3px;font:700 .6rem var(--font-num);letter-spacing:.05em;text-transform:uppercase;padding:2px 9px;border-radius:9px;color:#fff;background:#4a78c8}
.fb-tier.tier-ultra{background:linear-gradient(90deg,#e0a21f,#f5c432,#e0a21f);color:#3a2800}
.fb-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fb-row{display:flex;gap:6px;align-items:flex-start;line-height:1.2;background:rgba(255,255,255,.62);border-radius:9px;padding:5px 7px;min-width:0}
.fb-row:first-child,.fb-row:nth-child(2),.fb-row:nth-child(3){grid-column:1/-1}
.fb-ic{font-size:1.05rem;line-height:1.2}
.fb-row small{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.03em;opacity:.65;line-height:1.1;margin-bottom:1px}
.fb-row span:not(.fb-ic){display:block;font-size:.8rem;line-height:1.2;font-weight:600}
.fb-row>div{min-width:0}
.fb-fun{background:rgba(255,255,255,.8);border-radius:9px;padding:6px 8px}
.fb-fun b{font-size:.75rem}
.fb-fun p{margin:2px 0 0;font-size:.8rem;line-height:1.3}
.fb-no{text-align:center;font:500 .65rem var(--font-num);opacity:.6}
@media (prefers-color-scheme:dark){
  .fc-back{background:hsl(var(--sh) 40% 27%);color:#fff;border-color:#2b3a52;box-shadow:0 0 0 1px hsl(var(--sh) 35% 40%),0 3px 8px rgba(0,0,0,.4)}
  .fb-row{background:rgba(255,255,255,.12)}
  .fb-fun{background:rgba(255,255,255,.18)}
}
.overlay{position:fixed;inset:0;z-index:70;background:rgba(8,14,26,.62);display:flex;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.overlay>.ov-card{margin:auto}
.ov-card{background:var(--paper);border-radius:18px;padding:22px;max-width:380px;width:100%;max-height:92vh;overflow:auto;text-align:center;display:flex;flex-direction:column;gap:12px}
.ov-card.wide{max-width:900px;text-align:left}
.ov-actions{justify-content:center}
.pack-reveal{min-height:220px;display:grid;place-items:center}
.pack-reveal .pack-closed{width:110px}
.pack-reveal .pack-card{display:none}
.pack-reveal.opened .pack-closed{display:none}
.pack-reveal.opened .pack-card{display:block}
@media (prefers-reduced-motion:no-preference){
  .pack-reveal .pack-closed{animation:packShake .7s linear infinite}
  @keyframes packShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}}
  .pack-reveal.opened .pack-card{animation:cardPop .7s cubic-bezier(.2,1.5,.4,1)}
  @keyframes cardPop{0%{transform:scale(.3) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}
}

[hidden]{display:none!important}

.sticker .st-sub{font-size:.62rem;line-height:1.1;opacity:.78}
.sticker .st-art img.flag{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.sticker .st-art img:not(.flag){display:block;width:100%;height:100%;object-fit:contain}
.sticker .st-name.long{letter-spacing:-.025em}

/* raridade das figurinhas */
.sticker{position:relative}
.sticker .st-tier{position:absolute;top:-1px;right:-1px;font:700 .55rem var(--font-num);letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:0 11px 0 9px;color:#fff;background:#4a78c8;z-index:2}
.sticker.tier-rara{border-color:#cfe0ff;box-shadow:0 0 0 2px #7aa5ee,0 0 12px 2px rgba(90,140,230,.55)}
.sticker.tier-ultra{border-color:#fff3b0;box-shadow:0 0 0 2px #f5c432,0 0 16px 4px rgba(245,196,50,.7)}
.sticker.tier-ultra .st-tier{background:linear-gradient(90deg,#e0a21f,#f5c432,#e0a21f);color:#3a2800}
.sticker.big .st-tier{font-size:.7rem;padding:3px 10px}
.ov-card.tier-rara{box-shadow:0 0 0 3px #7aa5ee,0 0 40px 6px rgba(90,140,230,.55)}
.ov-card.tier-ultra{box-shadow:0 0 0 3px #f5c432,0 0 60px 12px rgba(245,196,50,.6)}
.tier-title{font-size:1.5rem;letter-spacing:.02em}
.tier-title.tier-rara{color:#3a6fd0}
.tier-title.tier-ultra{color:#b9770e}
.tier-msg{font-weight:600;color:var(--ink)}
.rarity-legend{line-height:1.5}
@media (prefers-reduced-motion:no-preference){
  .sticker.tier-ultra::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%);background-size:250% 100%;animation:shine 2.8s linear infinite}
  .sticker.tier-rara::after{content:"";position:absolute;inset:0;border-radius:11px;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);background-size:250% 100%;animation:shine 4.5s linear infinite}
  @keyframes shine{0%{background-position:150% 0}100%{background-position:-100% 0}}
  .ov-card.tier-ultra{animation:ultraGlow 1.6s ease-in-out infinite alternate}
  @keyframes ultraGlow{from{box-shadow:0 0 0 3px #f5c432,0 0 40px 6px rgba(245,196,50,.45)}to{box-shadow:0 0 0 3px #ffe27a,0 0 80px 18px rgba(245,196,50,.8)}}
}

/* vários álbuns: pacotinho para abrir, lista de álbuns e escolha do pacotinho */
.packbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border:2px solid var(--chest-gold)}
.packbox .goalicon{width:54px}
.albums-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.album-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer;color:inherit;font:inherit}
.album-row .al-art{width:46px;height:46px;flex:none;display:grid;place-items:center;font-size:1.9rem;line-height:1}
.album-row .al-art img{width:100%;height:100%;object-fit:contain;display:block}
.album-row .bar{display:block;margin-top:5px}
.album-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip-btn{border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:99px;padding:5px 13px;font:inherit;font-size:.85rem;cursor:pointer}
.chip-btn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.pack-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pack-choice{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--soft);border:2px solid var(--line);border-radius:14px;padding:10px 6px;cursor:pointer;color:inherit;font:inherit}
.pack-choice:hover:not(:disabled),.pack-choice:focus-visible{border-color:var(--accent)}
.pack-choice:disabled{opacity:.5;cursor:not-allowed}
.pack-choice .pc-art{width:60px;height:60px;display:grid;place-items:center;font-size:2.4rem;line-height:1}
.pack-choice .pc-art img{width:100%;height:100%;object-fit:contain;display:block}
.pack-choice .pc-art img.flag{height:auto;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.pack-choice small{color:var(--muted)}
.theme-pick{display:flex;flex-direction:column;gap:8px}
.theme-opt{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.theme-opt input{width:20px;height:20px;flex:none}
.theme-opt .to-art{width:36px;height:36px;flex:none;display:grid;place-items:center;font-size:1.5rem;line-height:1}
.theme-opt .to-art img{width:100%;height:100%;object-fit:contain;display:block}
.theme-opt .to-txt{flex:1;min-width:0}
.theme-opt .to-txt small{display:block;color:var(--muted)}
.album-detail summary{cursor:pointer;font-weight:600}
.field small.bad,small.bad{color:var(--mark)}
.rule-box{background:var(--soft);border-radius:10px;padding:10px 14px;font-size:.88rem}
.rule-box ul{margin:6px 0 0;padding-left:18px}.rule-box li{margin:3px 0}

/* ---------- estrutura: cabeçalho, abas no topo (tablet e computador) e menu inferior (celular) ---------- */
.shell{display:flex;flex-direction:column;gap:18px}
.appbar{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.appbar>img{width:42px;height:42px;border-radius:11px;flex:none;box-shadow:var(--shadow-1)}
.appbar b{font-size:1.1rem;display:block;line-height:1.15;font-weight:600}
.appbar small{color:var(--muted);display:block;font-size:.8rem;line-height:1.2}
.appbar .grow{flex:1 1 auto;min-width:0}
.appbar .who{flex:none;flex-wrap:nowrap}
.iconbtn{width:42px;height:42px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);display:grid;place-items:center;flex:none}
.iconbtn:hover{background:color-mix(in srgb,var(--primary) 16%,var(--soft))}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.navtop{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.navtop::-webkit-scrollbar{display:none}
.ntab{display:flex;align-items:center;gap:8px;padding:12px 16px;border:0;background:none;border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:500;font-size:.95rem;color:var(--muted);white-space:nowrap}
.ntab:hover{color:var(--ink)}
.ntab.on{color:var(--primary);border-color:var(--primary);font-weight:600}
.ntab svg.i{width:19px;height:19px}
.navbottom{display:none}
.panes{min-width:0}
.pane{display:flex;flex-direction:column;gap:18px;min-width:0}
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pagehead h1{font-size:1.9rem;letter-spacing:-.01em}
.crumb{display:inline-flex;align-items:center;gap:4px;font-size:.9rem}
.crumb svg.i{width:16px;height:16px}
.hero{background:linear-gradient(145deg,var(--hero-a),var(--hero-b));color:#fff;border:0;border-radius:var(--r-lg);padding:22px;position:relative;overflow:hidden;box-shadow:var(--shadow-2)}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.hero .eyebrow{color:#C9D8FF}
.hero h2{margin:6px 0;font-size:1.6rem;letter-spacing:-.01em}
.hero p{color:#DCE6FF;margin:0 0 16px;font-size:.95rem}
.hero p:last-child{margin-bottom:0}
.hero .btn.reward{width:100%}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.stat .v{font-size:1.9rem;font-weight:700;line-height:1.1;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.stat .v small{font-size:.9rem;font-weight:400;color:var(--muted)}
.stat>small{color:var(--muted);font-size:.8rem}
.stat .stamps{margin-top:6px;gap:6px}
.stat .stamp{width:22px;height:22px;font-size:.7rem}
.pack-inline{display:flex;align-items:center;gap:14px}
.pack-inline .goalicon{width:52px}
.who-name{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:767px){
  body{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));padding-top:max(12px,env(safe-area-inset-top,0px))}
  .navtop{display:none}
  .shell{padding-bottom:88px}
  .navbottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--nav-bg);border-top:1px solid var(--line);padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 20px rgba(20,33,61,.08)}
  .nbtn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;font-size:.72rem;font-weight:500;color:var(--muted);padding:2px 0}
  .nbtn .pill{width:56px;height:30px;border-radius:99px;display:grid;place-items:center}
  .nbtn.on{color:var(--primary);font-weight:600}
  .nbtn.on .pill{background:color-mix(in srgb,var(--primary) 16%,transparent)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pagehead h1{font-size:1.5rem}
  .hero{padding:18px}.hero h2{font-size:1.4rem}
  .has-nav #toast{bottom:96px}
  .who-name{display:none}
}
@media (prefers-reduced-motion:no-preference){.nbtn .pill{transition:background .2s}.nbtn:active .pill{transform:scale(.94)}}

.split{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.rule{background:var(--soft);box-shadow:none}.rule p{margin-top:6px;line-height:1.5}
.packbox .btn{flex:none}
.album-head{display:flex;justify-content:space-between}
.num{font-family:var(--font-num);font-weight:600}
.form-narrow{max-width:760px;width:100%}

/* aluno: coluna confortável no computador; formulário do programa centralizado; logotipo no PIN */
.tone-aluno .shell{max-width:880px;margin:0 auto;width:100%}
.form-narrow{margin:0 auto}
.pin-logo{width:72px;height:72px;border-radius:18px;box-shadow:var(--shadow-2)}
.authbox>.logo-row{display:flex;justify-content:center;margin-bottom:10px}

/* ---------- amigos ---------- */
.fr-code{font-family:var(--font-num);font-size:2rem;letter-spacing:.18em;font-weight:700;text-align:center;margin:8px 0}
.fr-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fr-add input{flex:1 1 140px;font-family:var(--font-num);font-size:1.2rem;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.fr-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.fr-row:first-of-type{border-top:0}
.fr-row .grow{flex:1 1 140px}

/* Administração (/adm) */
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.adm-stat{background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.adm-stat b{font-family:var(--font-num);font-size:1.7rem;line-height:1.1}
.adm-stat span{color:var(--muted);font-size:.85rem}
.adm-wrap{overflow-x:auto;margin-top:14px}
.adm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.adm-table th,.adm-table td{text-align:left;padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);vertical-align:top}
.adm-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.adm-table td{overflow-wrap:anywhere}