*{box-sizing:border-box}
body{margin:0;color:var(--color-text);background:var(--color-surface);font-family:var(--font-family);font-synthesis:none;letter-spacing:var(--tracking-normal)}
button{font:inherit}
a{color:var(--color-action);text-decoration:none}
a:hover{color:var(--color-text)}
:where(button,a):focus-visible{outline:var(--border-width-strong) solid var(--color-primary-ink);outline-offset:3px}
/* Optical baseline: Flama Condensed sits high in its em box. Put text next to an icon in .fab-optical so caps center on the icon. */
.fab-optical{display:inline-block;line-height:1;transform:translateY(.08em)}
@keyframes fab-fade-in{from{opacity:0}to{opacity:1}}
@keyframes fab-spin{to{transform:rotate(360deg)}}
@keyframes fab-card-enter{from{opacity:0;transform:translateY(-15px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fab-bar-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fab-bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fab-slide-up{from{transform:translate3d(0,16px,0) scale(.985);opacity:0;filter:blur(2px)}to{transform:none;opacity:1;filter:blur(0)}}
/* Icon micro-motions — add data-motion="bounce|pop|rise|tilt|spin|swing|nudge" to an <Icon>; plays once on hover/focus of its button or link. */
@keyframes fab-ico-bounce{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px)}65%{transform:translateY(1px)}}
@keyframes fab-ico-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(.94)}}
@keyframes fab-ico-rise{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.72)}65%{transform:scaleY(1.12)}}
@keyframes fab-ico-tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}62%{transform:rotate(7deg)}}
@keyframes fab-ico-spin{0%{transform:rotate(0)}55%{transform:rotate(100deg)}100%{transform:rotate(90deg)}}
@keyframes fab-ico-swing{0%,100%{transform:rotate(0)}40%{transform:rotate(-22deg)}75%{transform:rotate(6deg)}}
@keyframes fab-ico-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(-3px)}}
[data-motion]{transform-origin:50% 50%;will-change:transform}
[data-motion="rise"]{transform-origin:50% 100%}
[data-motion="bounce"]{--fab-m:fab-ico-bounce;}[data-motion="pop"]{--fab-m:fab-ico-pop;}[data-motion="rise"]{--fab-m:fab-ico-rise;}[data-motion="tilt"]{--fab-m:fab-ico-tilt;}[data-motion="spin"]{--fab-m:fab-ico-spin;;transition:transform 260ms var(--motion-ease-emphasized)}[data-motion="swing"]{--fab-m:fab-ico-swing;}[data-motion="nudge"]{--fab-m:fab-ico-nudge;}
@media (hover:hover){:where(button,a,[role="button"]):hover [data-motion]{animation:var(--fab-m) 480ms cubic-bezier(.34,1.56,.64,1) both}}
:where(button,a,[role="button"]):focus-visible [data-motion]{animation:var(--fab-m) 480ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes fab-tip-in{from{opacity:0;transform:translate(-4px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes fab-indicator{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fab-check-in{0%{transform:scale(.4) rotate(-20deg);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:none}}
/* Micro-interações de desktop (out/2026) — mesmo vocabulário do kit de celular (mk-pop, mk-shake, mk-flash):
   .fab-reveal[data-open]  bloco que abre/fecha por altura (grid 0fr→1fr) + filhos sobem em cascata (--i = ordem)
   .fab-stagger            filhos entram em cascata (use style="--i:n"; display:contents funciona em grades)
   .fab-shake              "não deu" (ação bloqueada) · .fab-flash = valor que acabou de mudar · .fab-landed = card que acabou de chegar
   fab-pop-in              popover/menu abrindo · fab-toast-in = aviso subindo do rodapé */
@keyframes fab-pop-in{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fab-toast-in{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fab-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fab-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes fab-flash{0%{background:color-mix(in srgb,var(--color-action) 16%,transparent)}100%{background:transparent}}
@keyframes fab-landed{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--color-success-dark) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
.fab-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--motion-duration-base) var(--motion-ease-emphasized),opacity var(--motion-duration-fast) ease}
.fab-reveal[data-open="true"]{grid-template-rows:1fr;opacity:1}
.fab-reveal>*{min-height:0;overflow:hidden}
.fab-reveal[data-open="true"]>*>*{animation:fab-rise 360ms var(--motion-ease-emphasized) both;animation-delay:calc(var(--i,0) * 50ms + 60ms)}
.fab-stagger>*{animation:fab-rise 360ms var(--motion-ease-emphasized) both;animation-delay:calc(var(--i,0) * 40ms)}
.fab-shake{animation:fab-shake 380ms ease both}
.fab-flash{border-radius:var(--radius-sm);animation:fab-flash 900ms ease-out}
.fab-landed{border-radius:var(--radius-lg);animation:fab-landed 700ms ease-out}
.fab-count{display:inline-block;animation:fab-ico-pop 380ms cubic-bezier(.34,1.56,.64,1)}
/* Entrada e troca de vista (desktop, out/2026) — uma só linguagem em todos os apps:
   .fab-enter      tela/aba que acabou de abrir (sobe 16px + desfoque, 360ms; backwards = não prende position:fixed)
   .fab-view-next  troca de vista para a direita (Coluna → Calendário) · .fab-view-prev para a esquerda
   fab-col-in      colunas de quadro em cascata: animation: fab-col-in 460ms var(--motion-ease-emphasized) {i*60}ms backwards */
@keyframes fab-col-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes fab-view-from-right{from{opacity:0;transform:translate3d(28px,0,0) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes fab-view-from-left{from{opacity:0;transform:translate3d(-28px,0,0) scale(.985);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.fab-enter{animation:fab-slide-up 360ms var(--motion-ease-emphasized) backwards;min-width:0}
.fab-view-next{animation:fab-view-from-right 420ms var(--motion-ease-emphasized) backwards;transform-origin:right top}
.fab-view-prev{animation:fab-view-from-left 420ms var(--motion-ease-emphasized) backwards;transform-origin:left top}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}