/* Placar do Foco — estilo do design system Foco 21 (tokens copiados de design-system/project/tokens.json). */

:root {
  color-scheme: light;
  --paper: #f7f5f4; --paper-warm: #eeeae7; --surface: #ffffff; --surface-sunken: #eae4de; --line: #e3ded8;
  --ink: #111111; --ink-soft: #6a6a6a; --ink-muted: #8c8986; --on-ink: #ffffff;
  --pastel-yellow: #feef5b; --pastel-sky: #c1e7ea; --pastel-lime: #e1ea86; --pastel-pink: #fad6de; --pastel-peach: #fbd5b8;
  --note-yellow: #fff8b4; --note-sky: #d8eef2;
  --aura-yellow: #f1cb62; --aura-peach: #fdd9aa; --aura-pink: #f6c3d6; --aura-lilac: #e3d2f5; --aura-sky: #cbe6f3; --aura-sage: #dfeac6;
  --success: #2f7a3f; --success-soft: #ddf0d8; --danger: #b3261e; --focus: #111111;
  --deg-0: var(--note-yellow); --deg-1: var(--pastel-yellow); --deg-2: var(--pastel-lime);
  --deg-3: var(--pastel-sky); --deg-4: var(--pastel-pink); --deg-5: var(--aura-lilac);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 36px; --radius-pill: 999px;
  --shadow-float: 0 1px 2px rgba(17,17,17,.04), 0 12px 32px rgba(17,17,17,.08);
  --font: Satoshi, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--paper);
  background-image:
    radial-gradient(60% 40% at 50% 0%, var(--aura-yellow) 0%, rgba(241,203,98,0) 100%),
    radial-gradient(40% 30% at 85% 10%, var(--aura-pink) 0%, rgba(246,195,214,0) 100%),
    radial-gradient(40% 30% at 12% 8%, var(--aura-sky) 0%, rgba(203,230,243,0) 100%);
  opacity: .55; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.22em; }

.app { max-width: 540px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; }
.topo { display: flex; align-items: center; justify-content: space-between; padding-block: 6px 18px; }
.wordmark { font-weight: 900; letter-spacing: -.03em; font-size: 20px; line-height: 1; }
.headline { font-size: 34px; line-height: 1.04; font-weight: 500; letter-spacing: -.025em; margin: 0 0 22px; text-wrap: balance; }
.headline span { display: block; color: var(--ink-muted); }
.secao { margin-top: 28px; }
.secao-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 20px; font-weight: 500;
  letter-spacing: -.015em; margin: 0 0 12px; }
.sub { color: var(--ink-soft); font-size: 14px; }
.over { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* superfícies */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: 18px; }
.painel { background: var(--surface-sunken); border-radius: var(--radius-xl); padding: 14px; }
.nota { background: var(--note-yellow); border-radius: var(--radius-lg); padding: 18px; }
.aviso { display: flex; gap: 12px; align-items: flex-start; background: var(--note-sky); border-radius: var(--radius-lg); padding: 14px 16px; font-size: 14px; }
.aviso.amarelo { background: var(--note-yellow); }
.aviso.rosa { background: var(--pastel-pink); }
.tile { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; }
.tile .ico { width: 22px; height: 22px; }

/* botões e etiquetas */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; font-weight: 500; font-size: 15px; background: var(--ink); color: var(--on-ink); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.contorno { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.suave { background: var(--surface-sunken); color: var(--ink); }
.btn.perigo { background: var(--danger); }
.btn.pequeno { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn.largo { width: 100%; }
.btn[disabled] { opacity: .35; cursor: not-allowed; }
.icone-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface-sunken); display: inline-grid; place-items: center; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; background: var(--pastel-lime); white-space: nowrap; }
.tag.escura { background: var(--ink); color: var(--on-ink); }

/* campos */
label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.campo input, .campo textarea, input.livre { width: 100%; min-height: 48px; border-radius: var(--radius-md); border: 1.5px solid var(--line);
  background: var(--surface); padding: 12px 14px; font-size: 16px; }
.campo textarea { min-height: 88px; resize: vertical; }
.nota input.livre { background: rgba(255,255,255,.7); border-color: transparent; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500; cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--ink); }

/* blocos */
.bloco { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bloco-topo { display: flex; align-items: center; gap: 12px; }
.bloco-topo b { font-weight: 500; font-size: 17px; }
.bloco.ok { background: var(--success-soft); }
.bloco.cel { background: var(--pastel-pink); }
.bloco.rodando { background: var(--ink); color: var(--on-ink); }
.relogio { display: flex; align-items: center; gap: 18px; }
.relogio svg { width: 112px; height: 112px; flex: none; }
.relogio .tempo { font-size: 44px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.bloco.rodando .btn.contorno { color: var(--on-ink); border-color: var(--on-ink); }
.bloco.rodando .btn.suave { background: #2a2a2a; color: var(--on-ink); }
.pausa { background: var(--note-sky); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.pausa .tempo { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }

/* distrações, estrelas */
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chip-wrap { position: relative; }
.chip-dist { width: 100%; min-height: 56px; border-radius: var(--radius-md); border: 0; background: var(--surface); font-size: 13px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px; }
.chip-dist b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-dist.tem { background: var(--pastel-pink); }
.menos { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255,255,255,.75); display: grid; place-items: center; }
.estrelas { display: flex; gap: 6px; }
.estrelas button { width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--line); }
.estrelas button.on { color: var(--aura-yellow); background: var(--note-yellow); }
.estrelas .ico { width: 26px; height: 26px; }

/* pontos */
.pontos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pontos div { background: var(--surface); border-radius: var(--radius-md); padding: 12px 8px; text-align: center; }
.pontos b { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pontos small { font-size: 11px; color: var(--ink-soft); font-weight: 500; }
.pontos div.total { background: var(--ink); color: var(--on-ink); }
.pontos div.total small { color: #c9c6c2; }

/* escada */
.escada { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.degrau { aspect-ratio: .78; border: 0; border-radius: 12px; padding: 6px 5px; display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-start; text-align: left; position: relative; min-width: 0; }
.degrau small { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.degrau b { font-size: 17px; font-weight: 700; line-height: 1; }
.degrau .estado { align-self: flex-end; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center; }
.degrau .estado .ico { width: 13px; height: 13px; }
.degrau.feito .estado { background: var(--ink); color: var(--on-ink); }
.degrau.parcial .estado { background: var(--surface); color: var(--danger); }
.degrau.atual { outline: 2.5px solid var(--ink); outline-offset: 1px; }
.degrau.sel { box-shadow: 0 0 0 4px rgba(17,17,17,.15); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.legenda span { font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: var(--radius-pill); }

/* placar */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--surface); border-radius: var(--radius-lg); padding: 16px; }
.kpi b { display: block; font-size: 36px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi small { display: block; margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.kpi.destaque { background: var(--note-yellow); }
.barra { height: 12px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; margin-top: 12px; }
.barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f6ecb0, var(--aura-yellow) 50%, var(--aura-pink)); }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico text { font-family: var(--font); font-size: 10px; fill: var(--ink-soft); }

/* navegação */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(247,245,244,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.nav div { max-width: 540px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center; border-radius: var(--radius-md);
  font-size: 12px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.nav a .ico { width: 24px; height: 24px; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface); }

/* boas-vindas */
.boas-vindas { min-height: 100dvh; }
.vazio { text-align: center; padding: 28px 16px; color: var(--ink-soft); }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; z-index: 20; max-width: calc(100% - 32px); text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (min-width: 720px) { .headline { font-size: 42px; } }