:root {
  --bg: #EEF4FF;
  --bg2: #E3ECFF;
  --card: #FFFFFF;
  --ink: #1D1B3A;
  --muted: #6B6F8E;
  --line: #DCE3F5;
  --primary: #5B5BF7;
  --primary-d: #4040D8;
  --good: #22B07D;
  --good-d: #178A60;
  --bad: #F0506E;
  --star: #FFB800;
  --fire: #FF7A1A;
  --radius: 20px;
  --shadow: 0 4px 0 rgba(29, 27, 58, .08), 0 10px 24px rgba(29, 27, 58, .06);
  --nav-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  background-image: radial-gradient(circle at 10% 0%, #FFF4D6 0, transparent 35%), radial-gradient(circle at 100% 30%, #E4F7FF 0, transparent 40%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; font-weight: 900; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .7em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.hidden, [hidden] { display: none !important; }
.error { color: var(--bad); font-weight: 700; min-height: 1.2em; margin: 0; }

.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.c-fire { color: var(--fire); }
.c-star { color: var(--star); }
.c-good { color: var(--good); }

#app { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; }
#app.mobile-layout { max-width: none; }
/* Tablet (iPad e outros com toque): usa a largura toda. A coluna estreita fica só no computador. */
@media (pointer: coarse), (hover: none) {
  #app { max-width: none; }
}
@media (min-width: 700px) and (pointer: coarse), (min-width: 700px) and (hover: none) {
  #app .content { padding-left: 32px; padding-right: 32px; }
  .screen.center { padding: 32px; }
  .bottomnav button { max-width: 180px; }
}
@media (min-width: 700px) {
  #app.mobile-layout .content { padding-left: 32px; padding-right: 32px; }
  #app.mobile-layout .screen.center { padding: 32px; }
  #app.mobile-layout .bottomnav button { max-width: 180px; }
}
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.screen.with-nav { padding-bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }
.content { padding: 16px; flex: 1; width: 100%; }
.screen.center { justify-content: center; align-items: center; text-align: center; padding: 24px; gap: 12px; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; }
/* Ritmo dentro do cartão: texto e ações nunca ficam colados. Linhas de botões, formulários e
   listas de passos ganham 12px dos vizinhos; o último bloco não soma espaço ao padding. */
.card > :last-child { margin-bottom: 0; }
.card > * + :is(.row, .inline-form, .steps, .btn),
.card > :is(.row, .inline-form, .steps, .btn) + * { margin-top: var(--s-3); }
.card > .row > .btn:not(:only-child) { flex: 1 1 auto; }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 16px; font-weight: 800; font-size: 1rem;
  background: var(--bg2); color: var(--ink); box-shadow: 0 4px 0 rgba(29, 27, 58, .12);
  transition: transform .08s, box-shadow .08s, filter .15s; min-height: 48px; text-decoration: none;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(29, 27, 58, .12); }
.btn:disabled { opacity: .5; }
.btn.primary { background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-d); }
.btn.good { background: var(--good); color: #fff; box-shadow: 0 4px 0 var(--good-d); }
.btn.danger { background: var(--bad); color: #fff; box-shadow: 0 4px 0 #C63350; }
.btn.ghost { background: #fff; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.btn.big { font-size: 1.1rem; padding: 14px 24px; min-height: 56px; }
.btn.small { padding: 8px 12px; min-height: 38px; font-size: .88rem; }
.btn.full { width: 100%; }
.btn.grow { flex: 1; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 3px 0 var(--line); flex: none; flex-direction: column; font-size: .7rem; font-weight: 800;
}
.icon-btn .ic { width: 24px; height: 24px; }
.icon-btn.light { background: rgba(255, 255, 255, .25); color: #fff; box-shadow: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Formulários */
.form label { display: block; font-weight: 800; margin: 12px 0 6px; }
.form input[type=text], .form input:not([type]), .form input[inputmode] {
  display: block; width: 100%; margin-top: 6px; padding: 14px; border-radius: 14px; border: 2px solid var(--line);
  background: #F8FAFF; font-size: 1.05rem; font-weight: 700; outline: none;
}
.form input:focus { border-color: var(--primary); background: #fff; }
.form .check { display: flex; gap: 10px; align-items: center; }
.form .btn { margin-top: 14px; }

/* Boas-vindas */
.logo { margin: 0 0 var(--s-2); line-height: 0; }
.logo img { width: min(100%, 420px); height: auto; animation: pop .5s var(--ease-pop); }
.lead { max-width: 340px; color: var(--muted); font-size: 1.1rem; }
.float { animation: float 3s ease-in-out infinite; display: inline-block; }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes blink { 50% { opacity: .35; } }

.page-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }
.page-head h1 { margin: 0; flex: 1; font-size: 1.4rem; }
.page-head.center { flex-direction: column; padding-top: 28px; }
.page-head.inline { padding: 0 0 12px; }
.page-head.inline h2 { margin: 0; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.profile-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.profile-card small { color: var(--muted); font-size: .78rem; }
.profile-card.add { border: 3px dashed var(--line); box-shadow: none; background: transparent; justify-content: center; color: var(--primary); min-height: 150px; }
.profile-card.add .ic { width: 40px; height: 40px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.av-opt { border-radius: 16px; padding: 3px; border: 3px solid transparent; display: flex; justify-content: center; }
.av-opt.sel { border-color: var(--primary); background: #EEF0FF; }

/* Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: rgba(238, 244, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.tb-avatar { display: flex; }
.tb-level { flex: 1; min-width: 0; }
.tb-name { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-name small { color: var(--primary); font-weight: 800; margin-left: 4px; }
.xpbar { height: 10px; border-radius: 10px; background: #D7DEF5; overflow: hidden; margin-top: 3px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #7B7BFF, var(--primary)); border-radius: 10px; transition: width .6s; }
.tb-chip { display: flex; align-items: center; gap: 4px; background: #fff; border-radius: 12px; padding: 6px 10px; box-shadow: 0 2px 0 var(--line); font-weight: 900; }

/* Navegação inferior */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: center;
  background: #fff; border-top: 2px solid var(--line); padding-bottom: var(--safe-b);
}
.bottomnav button {
  flex: 1; max-width: 140px; height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .75rem; font-weight: 800; color: var(--muted);
}
.bottomnav button .ic { width: 26px; height: 26px; }
.bottomnav button.active { color: var(--primary); }
.bottomnav button.active .ic { transform: scale(1.12); }

/* Início */
.hero { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, #fff, #F1F0FF); }
.hero h2 { margin-bottom: 2px; }
.hero p { color: var(--muted); margin-bottom: 10px; }
.hero .btn { padding: 10px 16px; min-height: 44px; font-size: .95rem; }
.daily { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: linear-gradient(135deg, #FFF6D8, #FFE9B0); }
.daily > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.daily small { color: #8A6A10; }
.daily-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--star); color: #fff; display: flex; align-items: center; justify-content: center; }
.daily-ic .ic { width: 26px; height: 26px; }
.section-title { margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-title small { color: var(--muted); font-weight: 700; }

.worlds { display: flex; flex-direction: column; gap: 10px; }
.world-card {
  display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--radius); padding: 12px 14px; text-align: left;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--wc) 45%, #fff), var(--shadow); border-left: 8px solid var(--wc); position: relative;
}
.world-card:active { transform: translateY(2px); }
.wc-num { position: absolute; top: 6px; right: 12px; font-weight: 900; color: var(--line); font-size: 1.4rem; }
.wc-ic { width: 50px; height: 50px; border-radius: 16px; background: var(--wc); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.wc-ic .ic { width: 28px; height: 28px; }
.wc-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.wc-text small { color: var(--muted); font-size: .82rem; }
.wc-stars { font-weight: 900; font-size: .85rem; color: #B58300; white-space: nowrap; align-self: flex-end; }
.wc-stars .ic { color: var(--star); }
.world-card.locked { filter: grayscale(1); opacity: .6; }
.world-card.complete .wc-ic::after { content: ''; position: absolute; }
.progress { display: block; height: 8px; border-radius: 8px; background: #E6EAF7; overflow: hidden; margin-top: 6px; }
.progress i { display: block; height: 100%; background: var(--wc, var(--good)); border-radius: 8px; transition: width .4s; }
.progress.thick { height: 14px; flex: 1; }
.progress.thick i { background: var(--good); }

.install { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; margin-top: 16px; border: 2px dashed var(--primary); box-shadow: none; }
.install .ic { width: 32px; height: 32px; color: var(--primary); }
.install span { display: flex; flex-direction: column; }
.install small { color: var(--muted); }

/* Mundo */
.world-head {
  background: var(--wc); color: #fff; border-radius: var(--radius); padding: 16px; display: flex; gap: 12px; align-items: flex-start; position: relative; overflow: hidden;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--wc) 70%, #000);
}
.world-head h2 { margin: 0; }
.world-head p { margin: 0; opacity: .9; }
.world-head small { font-weight: 800; opacity: .85; }
.world-head > div { flex: 1; }
.wh-ic .ic { width: 70px; height: 70px; opacity: .3; position: absolute; right: 10px; bottom: -6px; }
.path { padding: 20px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.node-row { display: flex; align-items: center; gap: 14px; }
.node-row.l { padding-left: 8%; }
.node-row.r { padding-left: 34%; }
.node {
  width: 74px; height: 70px; border-radius: 50%; background: var(--wc); color: #fff; flex: none; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 7px 0 color-mix(in srgb, var(--wc) 65%, #000); transition: transform .1s;
}
.node:active { transform: translateY(4px); box-shadow: 0 3px 0 color-mix(in srgb, var(--wc) 65%, #000); }
.node .ic { width: 34px; height: 34px; }
.node.open { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }
.node.done { background: color-mix(in srgb, var(--wc) 85%, #fff); }
.node.locked { background: #CBD2E6; box-shadow: 0 7px 0 #A9B1CA; }
.node-label { display: flex; flex-direction: column; line-height: 1.2; }
.node-label small { color: var(--muted); font-weight: 800; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.bridge h3 { display: flex; align-items: center; gap: 8px; }
.bridge.dim { opacity: .7; }
.bridge-grid { display: grid; gap: 10px; }
.bridge-grid small { font-weight: 900; color: var(--muted); }

.stars { display: inline-flex; gap: 2px; color: #D5DBEC; }
.stars .ic { width: 18px; height: 18px; }
.stars .on { color: var(--star); }
.stars.big .ic { width: 46px; height: 46px; }
.stars.big span { animation: popin .4s backwards; }
.stars.big span:nth-child(2) { animation-delay: .15s; }
.stars.big span:nth-child(3) { animation-delay: .3s; }
.stars.big span:nth-child(2) .ic { width: 58px; height: 58px; margin-top: -10px; }
@keyframes popin { from { transform: scale(0) rotate(-60deg); } }

pre.code {
  background: #1E1D3F; color: #E8E9FF; border-radius: 14px; padding: 12px 14px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.5; overflow-x: auto; margin: 10px 0 0; white-space: pre;
}

/* Tela de jogo */
.play { background: transparent; }
.play-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: rgba(238, 244, 255, .94); backdrop-filter: blur(8px);
}
.ph-title { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ph-title small { color: var(--wc); font-weight: 900; font-size: .78rem; }
.ph-title b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-foot {
  position: sticky; bottom: 0; display: flex; gap: 10px; padding: 12px 16px calc(12px + var(--safe-b)); background: #fff;
  border-top: 2px solid var(--line); align-items: center;
}
.play-foot .btn.big { flex: 1; }

.lesson { display: flex; flex-direction: column; align-items: center; }
.lesson-bit { margin: 4px 0 -6px; }
.bubble { width: 100%; position: relative; animation: slidein .3s; }
.bubble::before { content: ''; position: absolute; top: -10px; left: 50%; margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: #fff; }
.bubble p { font-size: 1.1rem; }
@keyframes slidein { from { opacity: 0; transform: translateY(12px); } }
.dots { display: flex; gap: 6px; margin: 6px 0; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--primary); width: 26px; border-radius: 6px; }

.question { animation: slidein .3s; }
.question h2 { font-size: 1.18rem; }
.opts { display: grid; gap: 10px; }
.opt {
  background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 14px 16px; text-align: left; font-weight: 800;
  box-shadow: 0 4px 0 var(--line); transition: transform .08s; min-height: 56px;
}
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.opt.good { border-color: var(--good); background: #E3F8EF; box-shadow: 0 4px 0 var(--good); }
.opt.bad { border-color: var(--bad); background: #FFE8EC; opacity: .7; text-decoration: line-through; }
.answer-form { display: flex; gap: 10px; }
.answer-form input {
  flex: 1; min-width: 0; padding: 14px; font-size: 1.2rem; font-weight: 800; border-radius: 16px; border: 3px solid var(--line); outline: none;
}
.answer-form input:focus { border-color: var(--primary); }
.chip {
  display: flex; align-items: center; gap: 8px; width: 100%; background: #fff; border: 3px solid var(--line); border-radius: 14px;
  padding: 12px 14px; font-weight: 800; text-align: left; box-shadow: 0 3px 0 var(--line); margin-bottom: 8px; min-height: 52px;
  font-family: inherit; word-break: break-word;
}
.chip .n { background: var(--primary); color: #fff; border-radius: 8px; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex: none; }
.chip.picked { border-color: var(--primary); background: #EEF0FF; transform: scale(1.03); }
.chip.good { border-color: var(--good); background: #E3F8EF; color: var(--good-d); }
.chip.bad { border-color: var(--bad); background: #FFE8EC; }
.order-answer { min-height: 70px; border: 3px dashed var(--line); border-radius: 18px; padding: 10px 10px 2px; margin-bottom: 14px; background: rgba(255, 255, 255, .5); }
.order-answer .muted { margin: 12px 0; }
.order-pool { margin-bottom: 10px; }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.match .chip { font-size: .92rem; justify-content: center; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }

.table-wrap { overflow-x: auto; border-radius: 14px; margin: 10px 0; box-shadow: 0 0 0 2px var(--line); background: #fff; }
table.data { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.data th { background: #3A86FF; color: #fff; padding: 8px 10px; text-align: left; font-weight: 900; }
table.data td { padding: 10px; border-top: 1px solid var(--line); }
table.data tr[data-act] { cursor: pointer; }
table.data tr.sel td { background: #E6E9FF; font-weight: 800; }
table.data tr.sel td:first-child { box-shadow: inset 5px 0 0 var(--primary); }
table.data tr.bad td { background: #FFE0E6; }

.feedback {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px calc(14px + var(--safe-b)); flex-wrap: wrap;
  animation: slideup .25s;
}
.feedback.ok { background: #D9F7EA; color: var(--good-d); }
.feedback.no { background: #FFE3E8; color: #B42342; }
.fb-text { flex: 1; min-width: 180px; }
.fb-text p { margin: 2px 0 0; color: var(--ink); font-size: .95rem; }
.feedback .btn { width: 100%; }
@keyframes slideup { from { transform: translateY(100%); } }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Robô */
.robot-main { padding-top: 8px; }
.task { font-weight: 800; margin-bottom: 10px; }
.board-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.board { display: grid; position: relative; border-radius: 16px; padding: 0; background: transparent; }
.cell { width: var(--t); height: var(--t); position: relative; display: flex; align-items: center; justify-content: center; }
.cell.floor { background: #C9F0D8; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.cell.floor.alt { background: #B9E9CC; }
.cell.wall { background: #7D8199; border-radius: 6px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .2); }
.cell.void { background: transparent; }
.cell .goal { color: #E63958; }
.cell .goal .ic { width: 70%; height: 70%; width: calc(var(--t) * .7); height: calc(var(--t) * .7); animation: wave 1s infinite alternate; transform-origin: 20% 90%; }
@keyframes wave { to { transform: rotate(-8deg); } }
.cell .gem .ic { width: calc(var(--t) * .62); height: calc(var(--t) * .62); color: var(--star); filter: drop-shadow(0 2px 0 #C98E00); animation: pulse 1.4s infinite; }
.cell.got .gem { animation: collect .45s forwards; }
@keyframes collect { to { transform: translateY(-24px) scale(1.4); opacity: 0; } }
.cell .mark { width: 46%; height: 46%; border-radius: 50%; border: 4px dashed #8C5CF0; }
.cell.painted { background: #B99CFF !important; }
.cell.painted .mark { border-style: solid; background: #8C5CF0; }
.cell.crash { animation: crash .5s; }
@keyframes crash { 50% { background: #FF9AAE; } }
.robot {
  position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); padding: 3px; z-index: 2;
  transition: transform var(--dur, 360ms) ease-in-out; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25));
}
.robot svg { width: 100%; height: 100%; display: block; }
.robot { filter: none; }
.robot-dir { position: absolute; inset: -4%; transition: transform var(--dur, 360ms) ease-in-out; pointer-events: none; }
.robot-body { position: absolute; inset: -6% 2% 6%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); transition: transform .2s; }
.robot-body.face-w { transform: scaleX(-1); }
.robot-msg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; margin-bottom: 10px; font-weight: 800; animation: slidein .25s; }
.robot-msg.bad { background: #FFE3E8; color: #B42342; }
.robot-msg.info { background: #FFF3CF; color: #7A5A00; }
.robot-msg .bit { flex: none; }

.palette { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.palette::-webkit-scrollbar { display: none; }
.pal {
  flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; color: #fff; font-weight: 800;
  font-size: .9rem; min-height: 48px; box-shadow: 0 4px 0 rgba(0, 0, 0, .22); white-space: nowrap;
}
.pal:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
.cat-motion { --bc: #3A86FF; }
.cat-action { --bc: #8C5CF0; }
.cat-loop { --bc: #FF8A00; }
.cat-logic { --bc: #E0457B; }
.cat-func { --bc: #1FAA74; }
.pal { background: var(--bc); }

.tabs { display: flex; background: #DDE5F8; border-radius: 14px; padding: 4px; gap: 4px; margin-bottom: 12px; }
.tabs button { flex: 1; padding: 10px 6px; border-radius: 11px; font-weight: 800; color: var(--muted); font-size: .9rem; display: flex; align-items: center; justify-content: center; gap: 4px; }
.tabs button.on { background: #fff; color: var(--primary); box-shadow: 0 2px 0 var(--line); }
.tabs.small { margin-bottom: 8px; }

.program { background: #fff; border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); min-height: 90px; }
.program.is-func { background: #EAFBF3; }
.prog-title { font-weight: 900; color: var(--good-d); font-size: .85rem; margin: 0 0 6px 4px; }
.program.running .slot, .program.running .pb-del, .program.running .num-ctl button { visibility: hidden; }
.plist { display: flex; flex-direction: column; gap: 6px; }
.pblock { border-radius: 12px; background: var(--bc); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); transition: transform .15s, box-shadow .15s; }
.pblock.active > .pb-head { outline: 4px solid #FFD84D; outline-offset: -2px; border-radius: 12px; }
.pblock.active { transform: scale(1.02); }
.pblock.error > .pb-head { outline: 4px solid var(--bad); outline-offset: -2px; border-radius: 12px; animation: shake .4s; }
.pb-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; font-weight: 800; min-height: 46px; }
.pb-label { flex: 1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .95rem; }
.pb-label select {
  background: rgba(255, 255, 255, .95); color: var(--ink); border: 0; border-radius: 10px; padding: 6px 8px; font-weight: 800;
  font-size: .85rem; max-width: 100%;
}
.num-ctl { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, .25); border-radius: 10px; padding: 2px; }
.num-ctl button { width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--bc); display: inline-flex; align-items: center; justify-content: center; }
.num-ctl b { min-width: 22px; text-align: center; font-size: 1.1rem; }
.pb-del { width: 32px; height: 32px; border-radius: 10px; background: rgba(0, 0, 0, .15); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pb-del .ic { width: 18px; height: 18px; }
.pb-body { margin: 0 6px 6px 18px; padding: 6px; background: rgba(255, 255, 255, .92); border-radius: 10px; color: var(--ink); }
.pb-else { padding: 2px 12px 4px; font-weight: 900; font-size: .9rem; }
.slot {
  border: 2px dashed #C3CBE3; border-radius: 12px; padding: 10px; font-weight: 800; font-size: .85rem; color: var(--muted); width: 100%;
}
.slot.on { border-color: var(--primary); color: var(--primary); background: #EEF0FF; animation: glow 1.4s infinite; }
@keyframes glow { 50% { background: #DDE1FF; } }
.goal-line { text-align: center; color: var(--muted); font-size: .88rem; margin: 10px 0 0; }
.robot-foot .icon-btn { width: 50px; height: 56px; }
.robot-foot .icon-btn small { font-size: .65rem; }

/* Modal de resultado */
.modal-back {
  position: fixed; inset: 0; background: rgba(29, 27, 58, .55); z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  animation: fade .2s; padding: 16px;
}
@keyframes fade { from { opacity: 0; } }
.modal { width: 100%; max-width: 440px; text-align: center; padding: 20px 18px calc(18px + var(--safe-b)); margin: 0; }
.pop { animation: pop .35s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes pop { from { transform: translateY(40px) scale(.9); opacity: 0; } }
.gains { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; align-items: center; }
.gain { background: #EEF0FF; color: var(--primary); padding: 6px 14px; border-radius: 12px; font-weight: 900; }
.gain.dim { background: #F1F3F9; color: var(--muted); font-weight: 700; font-size: .9rem; }
.gain.bolt { background: #FFF1C9; color: #8A6A10; display: inline-flex; gap: 4px; align-items: center; }
.gain.lvl { background: #E3F8EF; color: var(--good-d); }
.new-badges { margin-bottom: 12px; }
.badge-mini { display: flex; align-items: center; gap: 8px; justify-content: center; text-align: left; background: #FFF6D8; border-radius: 12px; padding: 8px; margin-top: 6px; }
.badge-mini .ic { color: var(--star); width: 26px; height: 26px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn.big { flex: 1; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 24px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; z-index: 70;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 800; max-width: 90vw; text-align: center; transition: .25s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.good { background: var(--good-d); }

/* Ranking */
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 8px 12px; box-shadow: 0 3px 0 var(--line); }
.rank li.me { box-shadow: 0 0 0 3px var(--primary), 0 3px 0 var(--line); }
.pos { width: 30px; height: 30px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; }
.pos.p1 { background: #FFD24D; }
.pos.p2 { background: #D5DBE8; }
.pos.p3 { background: #F0B27A; }
.rk-name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rk-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-name small { color: var(--muted); font-size: .8rem; }
.rk-xp { font-weight: 900; color: var(--primary); display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.rk-xp small { font-size: .7rem; color: var(--muted); }

/* Conquistas */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge { background: #fff; border-radius: var(--radius); padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 3px 0 var(--line); }
.badge small { color: var(--muted); font-size: .78rem; line-height: 1.25; }
.badge-ic { width: 60px; height: 60px; border-radius: 50%; background: #E6EAF5; color: #A8B0C8; display: flex; align-items: center; justify-content: center; }
.badge-ic .ic { width: 32px; height: 32px; }
.badge.on .badge-ic { background: radial-gradient(circle at 30% 30%, #FFE58A, #FFB800); color: #fff; box-shadow: 0 4px 0 #D99A00; }
.badge:not(.on) b { color: var(--muted); }

/* Perfil */
.profile-top { display: flex; align-items: center; gap: 14px; }
.profile-top h2 { margin: 0; }
.lvl-title { color: var(--primary); font-weight: 800; margin: 0; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.stats div { background: #fff; border-radius: 16px; padding: 10px 4px; text-align: center; box-shadow: 0 3px 0 var(--line); display: flex; flex-direction: column; }
.stats b { font-size: 1.15rem; }
.stats small { color: var(--muted); font-size: .7rem; font-weight: 700; }
.menu { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.menu button { display: flex; align-items: center; gap: 12px; padding: 16px; font-weight: 800; text-align: left; border-bottom: 1px solid var(--line); }
.menu button:last-child { border-bottom: 0; }
.menu .ic { color: var(--primary); width: 24px; height: 24px; }
.settings label { font-weight: 800; }
.settings > label:not(.toggle) { display: block; margin: var(--s-3) 0 var(--s-2); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-weight: 800; }
.toggle span { display: flex; align-items: center; gap: 8px; }
.toggle input { width: 48px; height: 28px; appearance: none; -webkit-appearance: none; background: #CBD2E6; border-radius: 20px; position: relative; transition: .2s; flex: none; cursor: pointer; }
.toggle input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .2s; }
.toggle input:checked { background: var(--good); }
.toggle input:checked::after { left: 23px; }
.toggle.small { font-size: .88rem; }
.cloud-card { display: flex; gap: 12px; align-items: center; }
.cloud-card > .ic { width: 36px; height: 36px; color: #3A86FF; }
.cloud-card div { display: flex; flex-direction: column; }
.cloud-card small { color: var(--muted); }
.cloud-card-form h3 { display: flex; align-items: center; gap: 8px; }

.gloss { border-top: 6px solid var(--wc); }
.gloss h3 { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.gloss h3 .ic { color: var(--wc); }
.gloss dt { font-weight: 900; margin-top: 8px; }
.gloss dd { margin: 2px 0 0; color: var(--muted); }
.roadmap { border-left: 8px solid var(--wc); }
.rm-head { display: flex; gap: 12px; align-items: center; }
.rm-head h3 { margin: 0; }
.rm-head small { color: var(--muted); font-weight: 700; }
.rm-n { width: 40px; height: 40px; border-radius: 50%; background: var(--wc); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; font-size: 1.2rem; }
.roadmap ul, .tips { padding-left: 20px; margin: 10px 0 0; }
.roadmap li, .tips li { margin-bottom: 4px; }

/* Responsáveis */
.parent-card .pc-head { display: flex; gap: 12px; align-items: center; }
.pc-head > div { display: flex; flex-direction: column; }
.pc-head small { color: var(--muted); font-size: .8rem; }
.pc-worlds { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 12px 0; }
.pc-worlds div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc-worlds span { width: 100%; height: 44px; background: #E6EAF5; border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.pc-worlds i { display: block; width: 100%; background: var(--wc); }
.pc-worlds small { font-size: .65rem; color: var(--muted); font-weight: 800; }
.parent-card details { margin-bottom: 10px; }
.parent-card summary { font-weight: 800; cursor: pointer; color: var(--bad); }
.parent-card ul { font-size: .88rem; padding-left: 18px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.pc-actions .toggle { flex-basis: 100%; }

/* Certificado */
.cert-screen .page-head { padding-bottom: 12px; }
.certificate { padding: 16px; }
.cert-inner {
  background: #fff; border: 10px solid var(--primary); outline: 3px dashed var(--star); outline-offset: -22px; border-radius: 24px;
  padding: 36px 24px; text-align: center;
}
.cert-small { text-transform: uppercase; letter-spacing: 2px; font-weight: 900; color: var(--muted); font-size: .8rem; }
.cert-inner h1 { font-size: 2rem; color: var(--primary); }
.cert-name { font-size: 2rem; border-bottom: 3px solid var(--star); display: inline-block; padding: 0 16px 4px; margin: 6px 0 14px; }
.cert-date { color: var(--muted); font-weight: 800; margin-top: 16px; }

@media (min-width: 560px) {
  .bridge-grid { grid-template-columns: 1fr 1fr; }
  .modal-back { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: #fff; }
  .no-print, .bottomnav, .topbar { display: none !important; }
  .certificate { padding: 0; }
  .cert-inner { break-inside: avoid; }
}

/* Instalação do app */
.link-btn { color: var(--primary); font-weight: 800; display: inline-flex; align-items: center; gap: 6px; padding: 10px; text-decoration: underline; text-underline-offset: 3px; }
.install { border-style: solid; background: linear-gradient(135deg, #fff, #EEF0FF); }
.install-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.install-ic .ic { width: 26px; height: 26px; color: #fff; }
.sheet { max-height: 90vh; max-height: 90dvh; overflow-y: auto; text-align: left; border-radius: 26px 26px 20px 20px; padding-bottom: 18px; }
.sheet .app-icon { width: 56px; height: 56px; }
.sheet-grip { width: 44px; height: 5px; border-radius: 5px; background: var(--line); margin: -6px auto 12px; }
.sheet-head, .install-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.sheet-head h2, .install-hero h2 { margin: 0 0 2px; }
.sheet-head p, .install-hero p { margin: 0; font-size: .92rem; }
.app-icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 12px rgba(91, 91, 247, .35); flex: none; }
.app-icon.big { width: 80px; height: 80px; border-radius: 20px; }
.benefits { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.benefits li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-weight: 700; font-size: .76rem; line-height: 1.25; background: #EFFAF5; border-radius: 12px; padding: 8px 4px; }
.benefits .ic { color: var(--good); width: 22px; height: 22px; }
.benefits.card { background: #fff; }
.sheet-intro { font-weight: 800; margin: 14px 0 6px; }
.steps { counter-reset: st; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: st; position: relative; padding: 9px 12px 9px 48px; background: #F4F6FE; border-radius: 14px; line-height: 1.6; font-size: .95rem; overflow-wrap: anywhere; }
.steps li::before {
  content: counter(st); position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.ui-chip {
  display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 2px solid var(--line); border-radius: 10px;
  padding: 1px 8px; font-weight: 800; vertical-align: middle; color: #1E6FFF; max-width: 100%;
}
.ui-chip span { color: var(--ink); }
.ui-ic { width: 20px; height: 20px; flex: none; }
.install-note { display: flex; gap: 8px; background: #FFF6D8; color: #6E5410; border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; font-size: .88rem; }
.install-note .ic { color: var(--star); }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px -18px -18px; padding: 12px 18px calc(14px + var(--safe-b)); position: sticky; bottom: -18px; background: #fff; border-top: 1px solid var(--line); }
.sheet-actions .btn { flex: 1; min-width: 110px; }
.guide h2 { margin-bottom: 6px; }
.guide .btn { margin: 6px 0 12px; }
.this-device { display: inline-block; background: #E3F8EF; color: var(--good-d); font-weight: 800; font-size: .8rem; border-radius: 8px; padding: 2px 8px; }
.faq { margin: 0; }
.faq dt { font-weight: 900; margin-top: var(--s-4); }
.faq dt:first-child { margin-top: var(--s-2); }
.faq dd { margin: var(--s-1) 0 0; color: var(--muted); }

/* Arrastar e soltar blocos */
.pal { touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.pb-grip {
  width: 28px; height: 36px; margin-left: -6px; display: flex; align-items: center; justify-content: center; flex: none;
  cursor: grab; touch-action: none; border-radius: 8px; opacity: .85;
}
.pb-grip .ic { width: 18px; height: 18px; }
.pb-grip:active { background: rgba(0, 0, 0, .15); cursor: grabbing; }
.pb-label { cursor: pointer; }
.pblock.selected > .pb-head { outline: 4px dashed #FFD84D; outline-offset: -2px; border-radius: 12px; animation: glow-sel 1s infinite alternate; }
@keyframes glow-sel { to { outline-color: #fff; } }
.pblock.moving { opacity: .35; }
.pblock.drop-replace > .pb-head { outline: 4px solid #FFD84D; outline-offset: -2px; border-radius: 12px; filter: brightness(1.12); }
.pblock.drop-before { box-shadow: 0 -5px 0 #FFD84D, 0 3px 0 rgba(0, 0, 0, .2); }
.pblock.drop-after { box-shadow: 0 5px 0 #FFD84D, 0 3px 0 rgba(0, 0, 0, .2); }
.slot.drop-append { border-color: #FFB800; background: #FFF3CF; color: #7A5A00; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px; background: var(--bc); color: #fff; font-weight: 800; white-space: nowrap;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .3); opacity: .95; transform-origin: 40px 28px;
}
.drag-ghost .pb-del, .drag-ghost .num-ctl button, .drag-ghost select { display: none; }
body.dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.drag-tip { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; color: var(--muted); margin: 8px 0 0; line-height: 1.35; }
.drag-tip .ic { width: 16px; height: 16px; flex: none; color: var(--star); }
.drag-tip .ic:not(:first-child) { color: var(--muted); vertical-align: -3px; }

/* Conta, amigos e ranking */
.at-input { display: flex; align-items: center; margin-top: 6px; border: 2px solid var(--line); border-radius: 14px; background: #F8FAFF; overflow: hidden; }
.at-input:focus-within { border-color: var(--primary); background: #fff; }
.at-input > span { padding: 0 4px 0 14px; font-weight: 900; color: var(--primary); }
.form .at-input input, .add-friend .at-input input { border: 0 !important; margin: 0 !important; background: transparent !important; padding-left: 2px !important; flex: 1; min-width: 0; }
.at-input input { font-size: 1.05rem; font-weight: 700; outline: none; padding: 14px 14px 14px 2px; border: 0; background: transparent; }
.field-hint { font-size: .85rem; color: var(--muted); margin: 6px 2px 0; min-height: 1.2em; }
.field-hint.good { color: var(--good-d); font-weight: 800; }
.field-hint.bad { color: var(--bad); font-weight: 800; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px !important; }
.form input[type=email], .form input[type=password], .pw-wrap input[type=text] {
  display: block; width: 100%; margin-top: 6px; padding: 14px; border-radius: 14px; border: 2px solid var(--line);
  background: #F8FAFF; font-size: 1.05rem; font-weight: 700; outline: none;
}
.form input[type=email]:focus, .form input[type=password]:focus, .pw-wrap input[type=text]:focus { border-color: var(--primary); background: #fff; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin-top: 3px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.step-pill { flex: none; font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--line); border-radius: 999px; padding: 4px 10px; }
.adult-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.adult-head > :first-child { flex: none; }
.adult-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.adult-head p { margin: 0; }
.form .check { font-weight: 700; font-size: .92rem; line-height: 1.35; }
.form .check input { flex: none; margin-top: 2px; }
.privacy { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; color: var(--muted); background: #F1F4FC; border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; }
.privacy .ic { flex: none; color: var(--good); }
.link-btn.danger-link { color: var(--bad); margin-top: 8px; }
.account-card h3 { display: flex; align-items: center; gap: 8px; }
.account-card .row { margin-top: 6px; }
.plan-badge { display: inline-block; margin: 4px 0 0; font-size: .75rem; font-weight: 900; padding: 2px 10px; border-radius: 10px; background: #E6EAF5; color: var(--muted); }
.plan-badge.premium { background: linear-gradient(90deg, #FFD24D, #FFB800); color: #5A3E00; }

.bottomnav button { position: relative; }
.bottomnav button.has-badge::after { content: ''; position: absolute; top: 12px; left: calc(50% + 8px); width: 12px; height: 12px; border-radius: 50%; background: var(--bad); border: 2px solid #fff; }
.tabs .dot { background: var(--bad); color: #fff; border-radius: 10px; font-size: .72rem; padding: 0 6px; margin-left: 4px; }

.medal { display: inline-flex; flex: none; }
.medal .ic { width: 26px; height: 26px; }
.medal.gold { color: #F5B400; }
.medal.silver { color: #9AA4B8; }
.medal.bronze { color: #CD7F32; }
.rank .medal { margin-right: -2px; }
.rk-name em { font-style: normal; color: var(--primary); font-size: .8rem; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 8px 0 16px; }
.pod { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pod b { font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod small { color: var(--muted); font-size: .75rem; font-weight: 800; margin-bottom: 4px; }
.pod .medal { margin-top: -14px; }
.pod .medal .ic { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15)); }
.pod-base { width: 100%; border-radius: 12px 12px 4px 4px; color: #fff; font-weight: 900; font-size: 1.4rem; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; }
.pod-1 .pod-base { height: 86px; background: linear-gradient(#FFD24D, #F5B400); }
.pod-2 .pod-base { height: 64px; background: linear-gradient(#C9D0DE, #9AA4B8); }
.pod-3 .pod-base { height: 48px; background: linear-gradient(#E3A76A, #CD7F32); }
.pod.me b { color: var(--primary); }
.my-rank { text-align: center; margin-top: 12px; }
.requests-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; border: 2px solid var(--bad); }
.requests-card > .ic { width: 32px; height: 32px; color: var(--bad); }
.requests-card span { display: flex; flex-direction: column; }
.requests-card small { color: var(--muted); }

.my-user { text-align: center; }
.my-user small { color: var(--muted); font-weight: 800; }
.big-user { font-size: 1.6rem; font-weight: 900; color: var(--primary); word-break: break-all; }
.add-friend label { margin-top: 0; }
.row.nowrap { flex-wrap: nowrap; align-items: stretch; }
.row.nowrap .at-input { margin-top: 0; }
.grow { flex: 1; min-width: 0; }
.friend-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.friend-list li { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 8px 10px; box-shadow: 0 3px 0 var(--line); flex-wrap: wrap; }
.f-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.friend-list li:has(.btn.good) .f-actions { width: 100%; }
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bg2); }
.more summary::-webkit-details-marker { display: none; }
.more[open] { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.more[open] summary { order: 3; }

/* Cursos, peças de código e teste para pular */
.course-chip {
  display: flex; align-items: center; gap: 10px; width: 100%; background: #fff; border-radius: 18px; padding: 10px 14px; margin-bottom: 12px;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--cc) 40%, #fff); border: 2px solid color-mix(in srgb, var(--cc) 35%, #fff); text-align: left;
}
.cc-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--cc); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.cc-ic.big { width: 52px; height: 52px; border-radius: 16px; }
.cc-ic .ic { width: 24px; height: 24px; }
.cc-ic.big .ic { width: 30px; height: 30px; }
.cc-text { flex: 1; display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.cc-text small { color: var(--muted); font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; }
.cc-pct { font-weight: 900; color: var(--cc); }
.course-chip > .ic:last-child { color: var(--muted); }
.course-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.course-opt, .cert-card { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: #F7F8FE; border-radius: 18px; padding: 12px; border: 3px solid transparent; }
.course-opt.on { border-color: var(--cc); background: #fff; }
.co-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-text small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.cert-card { background: #fff; }
.course-tip { display: flex; gap: 10px; align-items: flex-start; background: #EEF5FF; font-size: .92rem; }
.course-tip .ic { color: var(--star); flex: none; }
.jump-hint { font-size: .76rem; font-weight: 800; color: var(--primary); margin-top: 4px; }
.world-card.locked { filter: none; opacity: 1; background: #F3F4F8; }
.world-card.locked .wc-ic { background: #B7BDD0; }
.world-card.locked .wc-text b, .world-card.locked .wc-text small { color: #8A90A8; }
.jump-rules { list-style: none; padding: 0; margin: 12px 0; text-align: left; display: grid; gap: 8px; }
.jump-rules li { display: flex; gap: 10px; align-items: center; background: #F4F6FE; border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: .92rem; }
.jump-rules .ic { color: var(--primary); flex: none; }
.jump-title { font-weight: 900; color: var(--primary); margin-bottom: 8px; }
.lives { display: flex; gap: 2px; }
.lives span { color: #D5DBEC; display: flex; }
.lives span.on { color: var(--bad); }
.lives .ic { width: 22px; height: 22px; }

.mono, .chip.mono, .tile.mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
.chip.mono .ct { white-space: pre-wrap; font-size: .9rem; }
.build-answer {
  min-height: 64px; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 10px; margin-bottom: 14px;
  border-bottom: 3px solid var(--line); background: rgba(255, 255, 255, .6); border-radius: 14px 14px 0 0;
}
.build-answer .muted { align-self: center; font-size: .9rem; }
.build-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.tile {
  background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 800; font-size: .95rem;
  box-shadow: 0 3px 0 var(--line); min-height: 46px; white-space: pre;
}
.tile:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.tile.ghost { background: #E9ECF6; color: transparent; box-shadow: none; border-color: #E9ECF6; }
.tile.good { border-color: var(--good); background: #E3F8EF; }
.tile.bad { border-color: var(--bad); background: #FFE8EC; }
i.null { color: var(--muted); font-style: italic; font-size: .85em; }
.pc-courses { display: grid; gap: 6px; margin: 12px 0; }
.pc-course { display: grid; grid-template-columns: 56px 1fr 52px; gap: 8px; align-items: center; font-weight: 800; font-size: .85rem; }
.pc-course .progress { margin: 0; }
.pc-course small { color: var(--muted); text-align: right; }
.roadmap .btn { margin-top: 10px; }

/* Perfil público no ranking */
.tappable { cursor: pointer; transition: transform .1s; }
.tappable:active { transform: scale(.97); }
.rank li.tappable::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); margin-left: 4px; flex: none; opacity: .6; }
.user-sheet { text-align: center; }
.us-avatar { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.us-avatar .medal { margin-top: -16px; }
.us-avatar .medal .ic { width: 34px; height: 34px; }
.user-sheet h2 { margin: 6px 0 12px; word-break: break-all; }
.us-stats { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.us-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-bottom: 4px; }
.us-actions .link-btn { align-self: center; }
.rel-tag { display: inline-flex; align-self: center; align-items: center; gap: 6px; background: #F1F4FC; color: var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: 800; margin: 0; }
.rel-tag.good { background: #E3F8EF; color: var(--good-d); }

/* =====================================================================
   Sistema de design: tokens e componentes padrão (documentado em DESIGN.md)
   ===================================================================== */
:root {
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --bad-d: #C63350;
  --info: #3A86FF;
  --ease-pop: cubic-bezier(.2, 1.4, .5, 1);
  --focus: 0 0 0 3px #fff, 0 0 0 6px var(--primary);
}

/* Foco visível para teclado, seleção e rolagem no tom do jogo */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
::selection { background: #D9DBFF; color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: #C3CBE3 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C3CBE3; border-radius: 8px; }
body.no-scroll { overflow: hidden; }

/* Diálogos (substituem confirm e alert) */
.ui-layer { z-index: 90; }
.ui-layer:has(.dialog) { align-items: center; }
.ui-layer.closing { animation: fade .16s reverse forwards; }
.dialog { max-width: 380px; text-align: center; padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-xl); }
.dialog-bit { margin: -4px 0 var(--s-2); display: flex; justify-content: center; }
.dialog h2 { font-size: 1.25rem; margin-bottom: var(--s-2); }
.dialog p { color: var(--muted); margin-bottom: var(--s-4); }
.dialog-actions { display: flex; gap: var(--s-2); }
.dialog-actions .btn { flex: 1; }
.copy-field { width: 100%; padding: var(--s-3); border-radius: var(--r-sm); border: 2px solid var(--line); background: #F8FAFF; font: inherit; font-weight: 700; margin-bottom: var(--s-4); }

/* Lista de opções (substitui select) */
.pick-list { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; }
.pick-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 54px; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md); background: #F4F6FE; border: 3px solid transparent; font-weight: 800; text-align: left;
}
.pick-opt.on { border-color: var(--primary); background: #EEF0FF; color: var(--primary); }
.pick-opt .ic { color: var(--primary); }
.cond-pick {
  display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, .95); color: var(--ink); border-radius: 10px;
  padding: 6px 8px 6px 10px; font-weight: 800; font-size: .85rem; max-width: 100%; text-align: left; box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.cond-pick .ic { width: 18px; height: 18px; flex: none; color: var(--muted); }

/* Avisos rápidos com ícone */
.toast { display: flex; align-items: center; gap: var(--s-2); text-align: left; border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(29, 27, 58, .25); }
.toast .ic { flex: none; width: 22px; height: 22px; }
.toast.info .ic { color: var(--star); }
.toast.bad { background: var(--bad-d); }

/* Caixa de marcar no estilo do jogo */
.check input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 26px; height: 26px; flex: none; border-radius: 8px; margin: 0;
  border: 3px solid #C3CBE3; background: #fff; cursor: pointer; display: inline-grid; place-content: center; transition: .15s;
}
.check input[type=checkbox]::after {
  content: ''; width: 12px; height: 7px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .15s var(--ease-pop);
}
.check input[type=checkbox]:checked { background: var(--primary); border-color: var(--primary); }
.check input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
.form .check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }

/* Botões de texto (ações secundárias sem sublinhado) */
.link-btn { text-decoration: none; border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
.link-btn:active { background: #EEF0FF; }
.link-btn.danger-link { color: var(--bad); }
.link-btn.danger-link:active { background: #FFE8EC; }

/* Blocos expansíveis */
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-2); }
details > summary::-webkit-details-marker { display: none; }
details:not(.more) > summary::after { content: ''; width: 8px; height: 8px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
details[open]:not(.more) > summary::after { transform: rotate(-135deg); margin-top: 4px; }

/* Carregando */
.loading { display: flex; align-items: center; justify-content: center; gap: var(--s-2); color: var(--muted); font-weight: 800; padding: var(--s-5) 0; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

/* Campos de texto: o mesmo visual em todo o app */
.answer-form input, .form input:not([type=checkbox]), .at-input, .copy-field { transition: border-color .15s, background .15s; }
input::placeholder { color: #A2A8C0; font-weight: 700; }

/* Resposta revelada depois de dois erros */
.feedback.reveal { background: #EEF0FF; color: var(--primary-d); }
.inline-hint {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-3); padding: var(--s-3); border-radius: var(--r-md);
  background: #FFE3E8; color: #B42342; animation: pop .25s var(--ease-pop);
}
.fb-answer { font-weight: 900; color: var(--ink) !important; font-size: 1.05rem !important; white-space: pre-wrap; }
table.data tr.good td { background: #D9F7EA; font-weight: 800; }
table.data tr.good td:first-child { box-shadow: inset 5px 0 0 var(--good); }

/* Mascotes animados (js/mascots.js). Partes giram em volta da articulação; --d espelha o lado. */
.mascot { display: inline-block; overflow: visible; vertical-align: middle; }
.mascot .mc-body, .mascot .mc-part, .mascot .mc-lid { transform-box: view-box; }
.mascot .mc-body { transform-origin: 50px 96px; }
.mascot .mc-lid { transform: scaleY(0); animation: mc-blink var(--blink, 4s) infinite; }
@keyframes mc-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }

/* Parado: respira, pisca e mexe as partes devagar. */
.mood-idle .mc-body { animation: mc-breathe 3.2s ease-in-out infinite; }
@keyframes mc-breathe { 50% { transform: scale(1.015, .985); } }
.mc-part { animation: mc-sway 3s ease-in-out infinite; }
.mc-wave { animation: mc-wave 1.8s ease-in-out infinite; }
.mc-tail { animation: mc-sway 1.6s ease-in-out infinite; --a: 7deg; }
.mc-wing { animation: mc-sway 1.4s ease-in-out infinite; --a: 7deg; }
.mc-ear { animation: mc-twitch 4.5s ease-in-out infinite; }
.mc-ant { animation: mc-sway 1.3s ease-in-out infinite; --a: 8deg; }
.mc-tent { animation: mc-sway 2.4s ease-in-out infinite; --a: 4deg; }
.mc-head { animation: mc-sway 3s ease-in-out infinite; --a: 3deg; }
.mc-spin { animation: mc-spin 5s linear infinite; }
.mc-glow { animation: mc-glow 1.8s ease-in-out infinite; }
@keyframes mc-sway { 0%, 100% { transform: rotate(calc(var(--d, 1) * var(--a, 4deg))); } 50% { transform: rotate(calc(var(--d, 1) * var(--a, 4deg) * -1)); } }
@keyframes mc-wave { 0%, 100% { transform: rotate(calc(var(--d) * 8deg)); } 50% { transform: rotate(calc(var(--d) * -10deg)); } }
@keyframes mc-twitch { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(calc(var(--d) * 9deg)); } 90% { transform: rotate(calc(var(--d) * -3deg)); } }
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45) saturate(1.3); } }

/* Alegre: quica e acena. */
.mood-happy .mc-body { animation: mc-bounce 1.1s ease-in-out infinite; }
@keyframes mc-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-4px) scale(.98, 1.03); } 80% { transform: translateY(0) scale(1.03, .97); } }
.mood-happy .mc-wave { animation-duration: .7s; }
.mood-happy .mc-arm { animation: mc-raise .9s ease-in-out infinite; --a: 14deg; }
.mood-happy .mc-tail, .mood-happy .mc-wing { animation-duration: .45s; --a: 10deg; }
.mood-happy .mc-ant { animation-duration: .6s; --a: 12deg; }
.mood-happy .mc-tent { animation-duration: 1s; --a: 8deg; }
.mood-happy .mc-spin { animation-duration: 2s; }
@keyframes mc-raise { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(calc(var(--d) * var(--a) * -1)); } }

/* Acertou: pulo grande, braços para cima e partes agitadas. */
.mood-cheer .mc-body { animation: mc-jump .75s cubic-bezier(.3, 1.5, .5, 1) infinite; }
@keyframes mc-jump { 0%, 100% { transform: translateY(0) scale(1.04, .95); } 40% { transform: translateY(-11px) scale(.97, 1.04); } 70% { transform: translateY(0) scale(1.05, .94); } }
.mood-cheer .mc-wave { animation: mc-wave .35s ease-in-out infinite; }
.mood-cheer .mc-arm { animation: mc-raise .4s ease-in-out infinite; --a: 16deg; }
.mood-cheer .mc-tail, .mood-cheer .mc-wing { animation-duration: .25s; --a: 12deg; }
.mood-cheer .mc-ear { animation: mc-sway .5s ease-in-out infinite; --a: 6deg; }
.mood-cheer .mc-ant { animation-duration: .35s; --a: 16deg; }
.mood-cheer .mc-tent { animation-duration: .5s; --a: 8deg; }
.mood-cheer .mc-head { animation-duration: .5s; --a: 6deg; }
.mood-cheer .mc-spin { animation-duration: .8s; }
.mood-cheer .mc-glow { animation-duration: .5s; }

/* Conquista: salto com giro e tudo se mexendo rápido. */
.mood-wow .mc-body { animation: mc-wow 1.6s ease-in-out infinite; }
@keyframes mc-wow { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-14px) rotate(-8deg) scale(1.05); } 40% { transform: translateY(0) rotate(0) scale(1.06, .94); } 60% { transform: translateY(-8px) rotate(7deg); } 80% { transform: translateY(0) rotate(0); } }
.mood-wow .mc-wave { animation: mc-wave .3s ease-in-out infinite; }
.mood-wow .mc-arm { animation: mc-raise .35s ease-in-out infinite; --a: 20deg; }
.mood-wow .mc-tail, .mood-wow .mc-wing { animation-duration: .2s; --a: 14deg; }
.mood-wow .mc-ear, .mood-wow .mc-ant { animation: mc-sway .3s ease-in-out infinite; --a: 12deg; }
.mood-wow .mc-tent { animation-duration: .4s; --a: 9deg; }
.mood-wow .mc-spin { animation-duration: .5s; }
.mood-wow .mc-glow { animation-duration: .35s; }

/* Pensando: inclina a cabeça de um lado para o outro, devagar. */
.mood-think .mc-body { animation: mc-think 3.2s ease-in-out infinite; }
@keyframes mc-think { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg) translateY(1px); } }
.mood-think .mc-wave, .mood-think .mc-arm { animation: mc-scratch 1.6s ease-in-out infinite; }
@keyframes mc-scratch { 0%, 100% { transform: rotate(calc(var(--d) * -12deg)); } 50% { transform: rotate(calc(var(--d) * -18deg)); } }
.mood-think .mc-tail, .mood-think .mc-wing, .mood-think .mc-tent { animation-duration: 3s; --a: 4deg; }
.mood-think .mc-ear { animation: mc-twitch 2.2s ease-in-out infinite; }
.mood-think .mc-spin { animation-duration: 8s; }

/* Errou: murcha, braços e orelhas caídos, olhos meio fechados. Nunca parece bravo. */
.mood-sad .mc-body { animation: mc-sad 3.6s ease-in-out infinite; }
@keyframes mc-sad { 0%, 100% { transform: translateY(2px) scale(1.01, .97); } 50% { transform: translateY(3px) scale(1.02, .95) rotate(-2deg); } }
.mood-sad .mc-part { animation: none; }
.mood-sad .mc-wave, .mood-sad .mc-arm { transform: rotate(calc(var(--d) * 22deg)); }
.mood-sad .mc-ear, .mood-sad .mc-ant { transform: rotate(calc(var(--d) * 16deg)); }
.mood-sad .mc-tail, .mood-sad .mc-wing, .mood-sad .mc-tent { transform: rotate(calc(var(--d) * 10deg)); }
.mood-sad .mc-head { transform: rotate(6deg); }
.mood-sad .mc-spin { animation: mc-spin 14s linear infinite; }
.mood-sad .mc-lid { animation: none; transform: scaleY(.45); }
.mc-part, .mc-body { transition: transform .3s; }

/* Andando no tabuleiro: passinhos e balanço. */
.mood-walk .mc-body { animation: mc-walk .36s ease-in-out infinite; }
@keyframes mc-walk { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
.mood-walk .mc-wave, .mood-walk .mc-arm { animation: mc-sway .36s ease-in-out infinite; --a: 14deg; }
.mood-walk .mc-tail, .mood-walk .mc-wing, .mood-walk .mc-tent { animation-duration: .36s; --a: 12deg; }

@media (prefers-reduced-motion: reduce) {
  .mascot .mc-body, .mascot .mc-part { animation: none !important; }
  .mascot .mc-lid { animation: none; }
}

/* Avatar parado (listas e ranking): o mascote sobre um círculo colorido. */
.avatar { display: inline-block; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 62%, var(--av, #E3ECFF) 0 56%, transparent 57%); }
.avatar img { width: 100%; height: 100%; display: block; object-fit: contain; }
.av-preview { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 8px; }
.av-preview b { font-weight: 900; color: var(--primary-d); }
.profile-live { flex: none; width: 104px; height: 104px; margin: -10px 0 -6px; }
.av-opt .avatar { pointer-events: none; }

/* Ofensiva: dias seguidos com pelo menos uma atividade. */
:root { --ice: #3FB6F2; --ice-d: #1E8FCB; }
.streak-chip { border: 0; font: inherit; color: inherit; cursor: pointer; }
.streak-chip.off .ic { color: #B9BED6; }
.streak-chip:not(.off) .ic { animation: flame 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes flame { 0%, 100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.12, 1.18) rotate(3deg); } }

.streak-card { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; text-align: left; border: 0; font: inherit; color: inherit; cursor: pointer; margin-bottom: var(--s-4); }
.streak-card.on { background: linear-gradient(135deg, #FFF3E6, #fff 70%); box-shadow: 0 4px 0 #FFD9B8; }
.streak-card.danger { background: linear-gradient(135deg, #FFE3E8, #fff 70%); box-shadow: 0 4px 0 #FFC2CE; animation: nudge 2.6s ease-in-out infinite; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-1deg); } 96% { transform: rotate(1deg); } }
.st-head { display: flex; align-items: center; gap: var(--s-3); }
.st-flame { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #FFE8D4; color: var(--fire); }
.st-flame .ic { width: 30px; height: 30px; }
.streak-card.on .st-flame .ic { animation: flame 1.4s ease-in-out infinite; transform-origin: 50% 90%; }
.streak-card.wait .st-flame, .streak-card.danger .st-flame { background: #EEF0F7; color: #B9BED6; }
.streak-card.danger .st-flame { color: var(--bad); background: #FFE3E8; }
.st-text { display: flex; flex-direction: column; }
.st-text b { font-size: 1.1rem; font-weight: 900; }
.st-text small { color: var(--muted); font-weight: 700; font-size: .85rem; }

.st-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; }
.st-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.st-day small { font-size: .72rem; font-weight: 800; color: var(--muted); }
.st-day i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #EEF0F7; }
.st-day i .ic { width: 18px; height: 18px; }
.st-day.done i { background: var(--fire); color: #fff; box-shadow: 0 3px 0 #D95F07; }
.st-day.frozen i { background: var(--ice); color: #fff; box-shadow: 0 3px 0 var(--ice-d); }
.st-day.today i { background: #fff; border: 3px dashed #FFB27A; }
.st-day.today small, .st-day:last-child small { color: var(--ink); }

.st-big { display: flex; flex-direction: column; align-items: center; margin: 0 auto var(--s-2); color: var(--fire); }
.st-big .ic { width: 96px; height: 96px; filter: drop-shadow(0 5px 0 #FFD9B8); animation: flame 1.3s ease-in-out infinite; transform-origin: 50% 90%; }
.st-big b { margin-top: -6px; font-size: 2.6rem; line-height: 1; font-weight: 900; color: var(--fire); text-shadow: 0 3px 0 #FFD9B8; }
.st-big.off { color: #C9CDE0; }
.st-big.off .ic { animation: none; filter: drop-shadow(0 5px 0 var(--line)); }
.st-big.off b { color: #9AA0BC; text-shadow: 0 3px 0 var(--line); }
.st-big.frozen, .st-big.frozen b { color: var(--ice); }
.st-big.frozen .ic { animation: none; filter: drop-shadow(0 5px 0 #BDE6FA); }
.st-big.frozen b { text-shadow: 0 3px 0 #BDE6FA; }
.st-big.grow { animation: st-grow .6s var(--ease-pop); }
@keyframes st-grow { from { transform: scale(.3); opacity: 0; } }

.streak-sheet { text-align: center; }
.streak-sheet .st-week { margin: var(--s-3) 0; }
.st-goal { display: flex; flex-direction: column; gap: 6px; text-align: left; margin: var(--s-2) 0 var(--s-4); font-weight: 700; }
.st-goal .progress i { background: var(--fire); }
.st-stats { grid-template-columns: 1fr 1fr; }
.st-shields { display: flex; justify-content: center; gap: 2px; }
.st-shields span { color: #D5D9E8; }
.st-shields span.on { color: var(--ice); }
.st-shields .ic { width: 22px; height: 22px; }
.st-how { text-align: left; background: var(--bg); box-shadow: none; }
.st-how p { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font-size: .92rem; }
.st-how .ic { flex: none; width: 20px; height: 20px; color: var(--fire); }
.st-how p + p .ic { color: var(--ice); }
.st-freeze { background: #E3F4FD !important; color: var(--ice-d); margin-top: var(--s-3); }
.st-freeze .ic { color: var(--ice); }
@media (prefers-reduced-motion: reduce) { .streak-card.danger, .st-big .ic, .streak-chip .ic, .st-flame .ic { animation: none !important; } }
.streak-sheet .sheet-actions .btn.primary { flex: 2; white-space: nowrap; }

/* Premium, assinatura, turmas e desafio da semana */
:root { --gold: #FFB800; --gold-d: #C98E00; --gold-bg: #FFF4D6; }
button.plan-badge { border: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.plan-badge .ic { width: 14px; height: 14px; }

.av-opt { position: relative; }
.av-opt.locked .avatar { filter: grayscale(.85); opacity: .55; }
.av-badge { position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #fff; box-shadow: 0 2px 0 var(--gold-d); pointer-events: none; }
.av-badge .ic { width: 13px; height: 13px; }

.world-card.premium { background: var(--gold-bg); }
.world-card.premium .wc-ic { background: var(--gold); }
.world-card.premium .wc-text b { color: var(--ink); }
.prem-hint { color: var(--gold-d); }

.weekly { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); }
.wk-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #EEF0FF; color: var(--primary); }
.wk-ic .ic { width: 26px; height: 26px; }
.wk-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wk-text small { color: var(--muted); font-weight: 700; font-size: .8rem; }
.wk-text b { font-size: 1.02rem; font-weight: 900; }
.weekly.done { background: linear-gradient(135deg, #E3F8EE, #fff 70%); }
.weekly.done .wk-ic { background: var(--good); color: #fff; }
.weekly.done .progress i { background: var(--good); }

.plans-screen .content { padding-bottom: var(--s-6); }
.plans-hero h2 { margin: 6px 0 4px; }
.perks { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: 10px; }
.perks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.perks .ic { flex: none; width: 22px; height: 22px; color: var(--good); }
.perks.small li { font-size: .92rem; }
.plan-list { display: grid; gap: 10px; margin-bottom: var(--s-4); }
.plan-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; background: #fff;
  border: 3px solid var(--line); border-radius: var(--r-md); padding: 14px; box-shadow: 0 4px 0 var(--line); cursor: pointer; }
.plan-opt.on { border-color: var(--primary); box-shadow: 0 4px 0 var(--primary-d); background: #F6F6FF; }
.plan-opt.best { margin-top: 10px; }
.plan-tag { position: absolute; top: -12px; left: 14px; background: var(--gold); color: #5A3E00; font-size: .72rem; font-weight: 900; padding: 2px 10px; border-radius: 10px; }
.plan-radio { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); display: grid; place-items: center; color: #fff; }
.plan-opt.on .plan-radio { background: var(--primary); border-color: var(--primary); }
.plan-radio .ic { width: 16px; height: 16px; }
.plan-text { flex: 1; display: flex; flex-direction: column; }
.plan-text b { font-size: 1.1rem; font-weight: 900; }
.plan-text small, .plan-price small { color: var(--muted); font-weight: 700; font-size: .8rem; }
.plan-price { text-align: right; display: flex; flex-direction: column; }
.plan-price b { font-size: 1.15rem; font-weight: 900; }
.fine { font-size: .78rem; color: var(--muted); line-height: 1.5; margin-top: var(--s-3); }
.fine a { color: var(--primary); font-weight: 800; }
.fine.center { text-align: center; }
.school-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; margin-top: var(--s-4); }
.school-card > .ic:first-child { flex: none; width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: #EEF0FF; color: var(--primary); }
.school-card span { flex: 1; display: flex; flex-direction: column; }
.school-card small { color: var(--muted); font-weight: 700; }
.wl-done { color: var(--good-d); }
.wl-done > .ic { width: 36px; height: 36px; }

.parent-gate { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pg-q { font-size: 1.8rem; font-weight: 900; }
.parent-gate input { width: 140px; text-align: center; font-size: 1.4rem; font-weight: 900; padding: 10px; border-radius: var(--r-md); border: 3px solid var(--line); }
.parent-gate input[type=password] { width: 100%; font-size: 1.1rem; font-weight: 700; text-align: left; }
.parent-gate input:focus { border-color: var(--primary); outline: none; }
.parent-gate .dialog-actions { width: 100%; }

.sub-card .sub-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.sub-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #E6EAF5; color: var(--muted); }
.sub-card.on .sub-ic { background: var(--gold); color: #fff; }
.sub-head div { display: flex; flex-direction: column; }
.sub-head b { font-size: 1.15rem; font-weight: 900; }
.sub-head small { color: var(--muted); font-weight: 700; }
.sub-card.on { background: linear-gradient(135deg, var(--gold-bg), #fff 70%); }
.code-box { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--bg); border: 2px dashed var(--line); border-radius: var(--r-md); padding: 10px 12px; margin: 8px 0; }
.code-box > b { font-size: 1.5rem; letter-spacing: 4px; font-weight: 900; }
.link-text { font-size: .82rem; font-weight: 700; word-break: break-all; color: var(--primary-d); }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; padding: 12px; font-size: 1.1rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--r-md); border: 2px solid var(--line); }
.inline-form input:focus { border-color: var(--primary); outline: none; }
.mini-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.mini-list li { display: flex; align-items: center; gap: 8px; }
.mini-list li b { flex: 1; }

.class-list { list-style: none; padding: 0; margin: var(--s-4) 0; display: grid; gap: 10px; }
.class-list li { display: flex; align-items: center; gap: 12px; margin: 0; }
.cl-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #EEF0FF; color: var(--primary); }
.cl-text { flex: 1; display: flex; flex-direction: column; }
.cl-text small { color: var(--muted); font-weight: 700; }
.class-code { display: flex; align-items: center; justify-content: space-between; }
.class-code div { display: flex; flex-direction: column; }
.class-code small { color: var(--muted); font-weight: 800; }
.class-code b { font-size: 1.8rem; letter-spacing: 5px; font-weight: 900; color: var(--primary-d); }
.st-class { grid-template-columns: repeat(3, 1fr); }
.student-card .link-btn { margin-top: 6px; }

.legal h3 { margin: var(--s-4) 0 4px; font-size: 1.05rem; }
.legal p, .legal li { font-size: .95rem; line-height: 1.55; }
.legal ul { padding-left: 20px; }

/* ---------- Administração (só superadmin) ----------
   Tela de operação: leitura rápida, números alinhados, pouca decoração. */
.sales-card { padding: var(--s-4); }
.sales-card.on { background: #EAF8F2; box-shadow: 0 3px 0 #BFE7D6; }
.sales-row { padding: 0; }
.sales-row > span { flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.sales-row b { font-size: 1.1rem; font-weight: 900; }
.sales-row small { color: var(--muted); font-weight: 700; font-size: .85rem; }
.note-warn { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: #FFF6D8; color: #6E5410; font-size: .85rem; font-weight: 700; }

.kv { list-style: none; margin: 0; padding: 0; }
.kv li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid #EDF1FA; }
.kv li:first-child { border-top: 0; padding-top: 0; }
.kv li > span { color: var(--muted); font-weight: 700; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.kv li > span small { font-size: .75rem; }
.kv li > b { text-align: right; font-variant-numeric: tabular-nums; flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.warn { color: var(--bad-d); }

.env-card.on { box-shadow: 0 0 0 2px var(--primary), 0 4px 0 var(--primary-d); }
.env-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-3); }
.env-head h3 { margin: 0; }
.env-tag { background: var(--primary); color: #fff; font-size: .75rem; font-weight: 900; padding: 3px 10px; border-radius: 999px; }
.key-form { margin-top: var(--s-4); }
.key-form label { display: block; font-weight: 800; font-size: .9rem; margin-bottom: var(--s-2); }
.key-form input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 700; }

.fin-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88rem; }
.fin-table th + th, .fin-table td + td { padding-left: var(--s-2); }
.fin-table th { text-align: right; color: var(--muted); font-size: .75rem; font-weight: 800; padding: 0 0 var(--s-2); }
.fin-table td { text-align: right; padding: var(--s-2) 0; border-top: 1px solid #EDF1FA; font-weight: 700; }
.fin-table th:first-child, .fin-table td:first-child { text-align: left; }
.fin-table td { white-space: nowrap; }

.pay-list { list-style: none; margin: 0; padding: 0; }
.pay-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid #EDF1FA; }
.pay-list li:first-child { border-top: 0; padding-top: 0; }
.pay-list li > div { display: flex; flex-direction: column; min-width: 0; }
.pay-list small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.pay-list small.warn { color: var(--bad-d); }
.pay-val { text-align: right; font-variant-numeric: tabular-nums; }

.fold > summary { font-weight: 800; justify-content: space-between; }
.fold > summary::after { color: var(--primary); flex: none; }
.fold[open] > summary { margin-bottom: var(--s-3); }
.center { text-align: center; }

.page-head .head-end { margin-left: auto; }
.status-strip { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3); border-radius: 999px; background: var(--bg2); color: var(--muted); font-size: .85rem; font-weight: 700; text-align: left; }
.status-strip b { color: var(--ink); font-weight: 900; }
.status-strip span:last-child { margin-left: auto; }
.status-strip .pulse { width: 10px; height: 10px; border-radius: 50%; background: #B7BFD6; flex: none; }
.status-strip.on { background: #E3F6EE; }
.status-strip.on .pulse { background: var(--good); box-shadow: 0 0 0 4px rgba(34, 176, 125, .2); }

.env-pick { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-3); font-size: .82rem; font-weight: 800; color: var(--muted); }
.env-pick span { margin-right: var(--s-1); }
.env-pick button { padding: 5px 12px; border-radius: 999px; font-weight: 800; color: var(--muted); background: transparent; border: 2px solid var(--line); }
.env-pick button.on { color: var(--primary); border-color: var(--primary); background: #fff; }

.ledger { list-style: none; margin: 0; padding: 0; font-variant-numeric: tabular-nums; }
.ledger li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid #EDF1FA; }
.ledger li:first-child { border-top: 0; padding-top: 0; }
.ledger li > span { color: var(--muted); font-weight: 700; min-width: 0; }
.ledger li > b { text-align: right; flex: none; }
.ledger small { color: var(--muted); font-weight: 700; font-size: .78rem; margin-left: 4px; }
.ledger li.minus > b { color: var(--muted); }
.ledger li.total { border-top: 2px solid var(--ink); margin-top: var(--s-1); padding-top: var(--s-3); }
.ledger li.total > span { color: var(--ink); font-weight: 900; }
.ledger li.total > b { font-size: 1.35rem; font-weight: 900; }
.card .foot { margin: var(--s-3) 0 0; font-size: .82rem; color: var(--muted); font-weight: 700; }
.card .foot b { color: var(--ink); }

.subs-line { display: flex; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-2); }
.subs-line b { font-size: 2rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.subs-line span { color: var(--muted); font-weight: 800; }
.plan-split { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.plan-split span { background: var(--bg); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.plan-split b { color: var(--ink); }

.attn { background: #FFF1F3; box-shadow: 0 3px 0 #F6C9D2; }
.attn h3 { display: flex; align-items: center; gap: var(--s-2); color: var(--bad-d); }
.attn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.attn li { display: flex; flex-direction: column; gap: 2px; }
.attn small { color: #8A4152; font-weight: 700; }

.fin-table tfoot td { border-top: 2px solid var(--ink); font-weight: 900; }
.mono-sm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; overflow-wrap: anywhere; }

.setup ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.setup li { display: flex; align-items: center; gap: var(--s-3); color: var(--muted); font-weight: 700; }
.setup li.done { color: var(--muted); text-decoration: line-through; text-decoration-color: #C9D1E6; }
.setup li.next { color: var(--ink); font-weight: 900; }
.setup .dot, .checks .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .8rem; font-weight: 900; background: var(--bg2); color: var(--muted); }
.setup .dot .ic, .checks .dot .ic { width: 16px; height: 16px; }
.setup li.done .dot { background: var(--good); color: #fff; }
.setup li.next .dot { background: var(--primary); color: #fff; }

.checks { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-3); }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; }
.checks li > div { display: flex; flex-direction: column; min-width: 0; }
.checks small { color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.checks li.ok .dot { background: var(--good); color: #fff; }
.checks li.bad .dot { background: var(--bad); color: #fff; }
.key-form .hint { display: block; margin-top: var(--s-2); color: var(--muted); font-weight: 700; font-size: .8rem; }
.env-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.env-actions { gap: var(--s-1) var(--s-3); margin-left: calc(-1 * var(--s-3)); }
.env-actions > * { flex: none; width: auto; margin: 0; }

/* Planos: preço de fundador, teste grátis */
.plan-tag.founder { background: var(--good); color: #fff; }
.plan-price s { color: var(--muted); font-size: .8rem; font-weight: 700; }
.trial-note { display: flex; gap: var(--s-2); align-items: flex-start; background: #EAF8F2; color: #145C42; border-radius: var(--r-md); padding: var(--s-3); font-weight: 700; font-size: .92rem; margin: 0 0 var(--s-3); }
.trial-note .ic { color: var(--good); flex: none; }
#plan-cta > .btn + .fine { margin-bottom: var(--s-4); }
.trial-card { display: flex; align-items: center; gap: var(--s-3); background: #EAF8F2; box-shadow: 0 3px 0 #BFE7D6; }
.trial-card > .ic { color: var(--good); width: 28px; height: 28px; flex: none; }
.trial-card > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.trial-card small { color: #2F6B55; font-weight: 700; }
.trial-card.soon { background: #FFF4D6; box-shadow: 0 3px 0 #F1DA9C; }
.trial-card.soon > .ic { color: var(--gold-d); }
.trial-card.soon small { color: #6E5410; }

/* Painel: aba Planos */
.field-list { list-style: none; margin: 0; padding: 0; }
.field-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid #EDF1FA; }
.field-list li:first-child { border-top: 0; padding-top: 0; }
.field-list label { display: flex; flex-direction: column; min-width: 0; }
.field-list label small { color: var(--muted); font-weight: 700; font-size: .78rem; }
.money-in { display: flex; align-items: center; gap: 4px; border: 2px solid var(--line); border-radius: var(--r-sm); padding: 0 var(--s-2); background: #fff; flex: none; }
.money-in:focus-within, .num-in:focus { border-color: var(--primary); outline: none; }
.money-in span { color: var(--muted); font-weight: 800; font-size: .85rem; }
.money-in input { width: 84px; border: 0; padding: var(--s-2) 0; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; background: transparent; outline: none; }
.num-in { width: 72px; flex: none; border: 2px solid var(--line); border-radius: var(--r-sm); padding: var(--s-2); font-weight: 900; text-align: center; }
.plans-admin .toggle { margin-bottom: var(--s-3); }
.trial-card { flex-wrap: wrap; }
.trial-card > .btn { margin-left: calc(28px + var(--s-3)); }
.plans-admin { margin-bottom: var(--s-4); }
.trial-card > div { flex: 1 1 calc(100% - 28px - var(--s-3) - 1px); }

/* Planos escolares e anúncio da Área do professor */
.school-hero h2 { margin-top: var(--s-2); }
.plan-price b.ask { font-size: .95rem; }
.school-form h3 { margin-bottom: var(--s-1); }
.sf-slot { margin-bottom: var(--s-3); }
.sheet .plan-list { margin-top: var(--s-3); }

/* Painel: aba Escolas */
.admin-tabs { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tabs button { flex: 1 0 auto; padding: 10px 14px; font-size: .88rem; scroll-snap-align: center; white-space: nowrap; }
.grant-form label { display: block; font-weight: 800; font-size: .9rem; }
.grant-form input, .grant-form select { display: block; width: 100%; margin-top: var(--s-1); padding: var(--s-2) var(--s-3); border: 2px solid var(--line); border-radius: var(--r-sm); font-weight: 700; background: #fff; }
.grant-form input:focus, .grant-form select:focus { border-color: var(--primary); outline: none; }
.grant-form > * + * { margin-top: var(--s-3); }
.grant-row { display: grid; grid-template-columns: 1fr 90px; gap: var(--s-3); }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .75rem; font-weight: 900; vertical-align: middle; margin-left: var(--s-1); }
.pay-list li.done { opacity: .6; }
.lead-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); flex: none; }
.pay-val .link-btn { padding: var(--s-1) 0; margin: 0; }
.tab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-left: 4px; vertical-align: top; }
.lead-actions .link-btn { padding: var(--s-1) 0; }

/* Cancelamento da assinatura */
.sub-canceled { display: flex; gap: var(--s-2); align-items: flex-start; background: #F1F4FC; border-radius: var(--r-sm); padding: var(--s-3); font-size: .88rem; color: var(--ink); margin: var(--s-2) 0 0; }
.sub-canceled > .ic { color: var(--good); flex: none; margin-top: 2px; }
.cancel-sheet .cs-bit { display: flex; justify-content: center; }
.cancel-sheet h2 { text-align: center; }
.cs-facts { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; gap: var(--s-3); }
.cs-facts li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: .92rem; }
.cs-facts .ic { flex: none; color: var(--primary); margin-top: 2px; }
.cs-q { font-weight: 800; margin: var(--s-4) 0 var(--s-2); }
.cs-reasons { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.cs-reasons .chip { font-size: .85rem; padding: 6px 12px; min-height: 0; }
.cancel-sheet .sheet-actions { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.cs-reasons .chip { width: auto; flex: 0 0 auto; display: inline-flex; border-radius: 999px; }
.cs-reasons .chip { margin-bottom: 0; border-width: 2px; box-shadow: 0 2px 0 var(--line); }

/* Painel: estrutura em abas com detalhe sob demanda */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.card-head h3 { margin: 0 0 var(--s-3); }
.card-head .link-btn { padding: 0; font-size: .85rem; }
.card-head .link-btn .ic { width: 16px; height: 16px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.trio > div { background: var(--bg); border-radius: var(--r-sm); padding: var(--s-2) var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trio b { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.trio small { color: var(--muted); font-weight: 700; font-size: .74rem; line-height: 1.25; }
.trio b.warn { color: var(--bad-d); }
.attn-item { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; }
.attn-item small { color: #8A4152; font-weight: 700; }
.ledger.tight { margin-top: var(--s-3); }
.ledger .warn { color: var(--bad-d); }
.sub-h { margin: var(--s-4) 0 var(--s-2); font-weight: 800; font-size: .85rem; color: var(--muted); }
.more-btn { margin-top: var(--s-2); padding-left: 0; font-size: .88rem; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; gap: 2px var(--s-2); align-items: baseline; }
.bar-label { grid-area: label; font-weight: 700; font-size: .85rem; color: var(--ink); }
.bar-val { grid-area: val; font-weight: 900; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar-val small { color: var(--muted); font-weight: 700; margin-left: 2px; }
.bar-track { grid-area: track; height: 8px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--primary); }
.seg { display: flex; gap: var(--s-1); background: var(--bg2); border-radius: 999px; padding: 4px; margin-bottom: var(--s-3); }
.seg button { flex: 1; padding: 8px 10px; border-radius: 999px; font-weight: 800; font-size: .85rem; color: var(--muted); }
.seg button.on { background: #fff; color: var(--primary); box-shadow: 0 2px 0 var(--line); }

/* Área dos responsáveis: família e gráfico */
.fam-start h3, .fam-top h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.fam-steps { margin: 0 0 14px; padding-left: 20px; font-size: .92rem; display: grid; gap: 4px; }
.fam-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: .85rem; font-weight: 700; color: var(--ink); }
.fam-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fam-legend i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.fam-legend b { font-variant-numeric: tabular-nums; }
.fam-chart { position: relative; touch-action: pan-y; }
.fam-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.fc-grid { stroke: #E6EBF6; stroke-width: 1; }
.fc-ax { fill: var(--muted); font-size: 10px; font-weight: 700; font-family: inherit; }
.fc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-dot { stroke: #fff; stroke-width: 2; }
.fc-cross { stroke: var(--muted); stroke-width: 1; }
.fc-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--ink); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: .78rem; pointer-events: none; display: grid; gap: 2px; min-width: 120px; z-index: 2; }
.fc-tip span { display: flex; align-items: center; gap: 6px; }
.fc-tip i { width: 10px; height: 3px; border-radius: 2px; }
.fc-tip em { margin-left: auto; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.seg-small { margin: 12px 0 0; }
.seg-small button { padding: 6px 8px; font-size: .8rem; }
.fam-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 10px; }
.fam-list li { display: flex; align-items: center; gap: 10px; }
.fl-av { flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--fc); display: inline-flex; }
.fl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-text b em { font-style: normal; color: var(--muted); font-weight: 700; }
.fl-text small { color: var(--muted); font-size: .8rem; }

/* Administração: jogadores */
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px; border-radius: var(--r-md); border: 2px solid var(--line); background: #fff; }
.pl-list button.on { border-color: var(--primary); background: #EEF0FF; }
.pl-list .fl-text b { overflow-wrap: anywhere; }
#pl-find input { text-transform: none; letter-spacing: normal; font-weight: 700; }
.pl-list { margin-bottom: var(--s-3); }

/* Administração: métricas de SaaS */
.mrr-hero small { color: var(--muted); font-weight: 800; font-size: .8rem; }
.mrr-hero > b { display: block; font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0; }
.mrr-hero p { margin: 0 0 var(--s-3); color: var(--muted); font-weight: 700; font-size: .88rem; }
.mrr-hero .kv-pair { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #EDF1FA; padding-top: var(--s-2); font-weight: 700; color: var(--muted); }
.mrr-hero .kv-pair b { color: var(--ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.up { color: var(--good-d); font-weight: 800; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.metric-grid > div { background: var(--bg); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3) var(--s-3); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.metric-grid b { font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-grid b.warn { color: var(--bad-d); }
.metric-grid small { color: var(--muted); font-weight: 700; font-size: .74rem; line-height: 1.25; }
.table-scroll { overflow-x: auto; }
.glossary summary { font-weight: 800; cursor: pointer; }
.glossary dl { margin: var(--s-3) 0 0; font-size: .88rem; }
.glossary dt { font-weight: 800; margin-top: var(--s-2); }
.glossary dd { margin: 0; color: var(--muted); }

/* Perfil: menus agrupados, com uma linha de apoio */
.menu button > span { display: flex; flex-direction: column; min-width: 0; }
.menu button > span small { color: var(--muted); font-weight: 700; font-size: .8rem; }
.fam-card h4 { margin: var(--s-3) 0 var(--s-2); font-size: .95rem; }
.fam-who { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-3); }
.fam-who > div { display: flex; flex-direction: column; }
.fam-who small { color: var(--muted); font-weight: 700; font-size: .85rem; }
.link-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.link-card b { display: flex; align-items: center; gap: 6px; }
.link-card p { margin: 4px 0 0; }
.invite-stats { margin-bottom: 0; }
.section-title .ic { width: 20px; height: 20px; color: var(--primary); vertical-align: -3px; }