/*! floating-notch v0.1.4 */
@property --fn-ear { syntax: "<length>"; inherits: true; initial-value: 15px; }
@property --fn-round { syntax: "<length>"; inherits: true; initial-value: 24px; }
/* Floating Notch: estilos. Visual da referencia congelada (reference/codenotch): pilula preta soldada a borda com cantos internos
   invertidos, discos de 44 com anel de progresso, card de detalhe com cauda. Tema por tokens (--fn-*): o host pode sobrescrever
   no :root ou em .fn-root. Sem marca. */
.fn-root {
  /* tema escuro (padrao): pilula preta com contorno; aneis neon medidos no quadro da referencia */
  --fn-pill: #000000; --fn-disc: transparent; --fn-disc-hover: #1b1b1b; --fn-track: #303030; --fn-ink: #ffffff; --fn-ink-soft: rgb(255 255 255 / 0.62); --fn-muted: #8e8e93;
  --fn-edge: rgb(255 255 255 / 0.22); --fn-rule: var(--fn-attention); --fn-fixed: var(--fn-attention); --fn-underline: transparent; --fn-font-label: inherit; --fn-label-transform: none; --fn-label-tracking: normal; --fn-font-display: inherit; --fn-title-transform: none; --fn-font-mono: inherit; --fn-ring-ok: #00ff88; --fn-ring-warn: #f2ff00; --fn-ring-high: #ff3d00;
  --fn-card: #000000; --fn-card-edge: rgb(255 255 255 / 0.08); --fn-card-radius: 16px; --fn-round: 24px; --fn-ear: 0px; --fn-ear-open: 0px; --fn-round-open: 40px; /* barra quadrada; o host pode devolver a curva com --fn-ear-open (ex.: 60px) */
  --fn-spine: 24px; --fn-panel: 72px; --fn-shift: 6px; --fn-rest: 88px; --fn-cell-h: 96px; --fn-gear-h: 48px; --fn-ring: 48px; --fn-ring-inset: 4px; /* botoes compactos: anel 48, disco 40, celula 72 x 96 (grade de 4 e 8) */
  --fn-bg: #0a0a0a; --fn-fg: #ffffff; --fn-border: rgb(255 255 255 / 0.16); --fn-hairline: rgb(255 255 255 / 0.08);
  --fn-btn: #161616; --fn-btn-hover: #232323; --fn-input: #121212; --fn-undo: rgb(255 255 255 / 0.08); --fn-error: #ff8a9a;
  --fn-accent: #ffffff; --fn-accent-fg: #000000; --fn-accent-hover: #e6e6e6; --fn-focus: #ffffff; --fn-scrim: rgb(0 0 0 / 0.62);
  --fn-toast-bg: #000000; --fn-toast-fg: #ffffff; --fn-attention: #ffffff; /* cor do convite (setinha que pisca); o host liga a cor principal do design system dele */
  --fn-shadow: 0 0 0 0 transparent; /* sem sombra difusa (design system do Make): contraste por cor e linha solida */ --fn-radius: 20px; --fn-btn-radius: 999px; --fn-field-radius: 14px; --fn-blur: 6px; --fn-z: 2147483000;
  --fn-spring: cubic-bezier(0.34, 1.32, 0.5, 1); --fn-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --fn-expand-ms: 460ms; --fn-collapse-ms: 300ms;
  --fn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  font: 16px/1.4 var(--fn-font); color: var(--fn-fg); -webkit-font-smoothing: antialiased;
}
@supports (transition-timing-function: linear(0, 1)) { .fn-root { --fn-spring: linear(0, 0.0231, 0.0839, 0.1707, 0.2737, 0.3844, 0.4961, 0.6036, 0.7032, 0.7923, 0.8696, 0.9343, 0.9866, 1.0271, 1.0568, 1.077, 1.089, 1.0943, 1.0941, 1.0898, 1.0826, 1.0734, 1.0632, 1.0525, 1.0421, 1.0323, 1.0234, 1.0155, 1.0089, 1.0034, 0.999, 0.9958, 1); } } /* mola fisica: passa ~9% do alvo e assenta (a referencia nao anda em velocidade constante) */
/* tema claro: superficie clara, tinta escura, aneis mais fundos (o neon some no branco). O host sobrescreve estes tokens com o design system dele. */
.fn-root[data-theme="light"] {
  --fn-pill: #ffffff; --fn-disc-hover: #f0f0f3; --fn-track: #e3e3e8; --fn-ink: #111418; --fn-ink-soft: rgb(17 20 24 / 0.62); --fn-muted: #5e5e63;
  --fn-edge: rgb(0 0 0 / 0.22); --fn-ring-ok: #12994f; --fn-ring-warn: #a87a00; --fn-ring-high: #d93a0b;
  --fn-card: #ffffff; --fn-card-edge: rgb(0 0 0 / 0.1);
  --fn-bg: #ffffff; --fn-fg: #111418; --fn-border: rgb(0 0 0 / 0.22); --fn-hairline: rgb(0 0 0 / 0.1);
  --fn-btn: #f2f2f5; --fn-btn-hover: #e6e6ea; --fn-input: #ffffff; --fn-undo: rgb(0 0 0 / 0.06); --fn-error: #b3261e;
  --fn-accent: #111418; --fn-accent-fg: #ffffff; --fn-accent-hover: #2b2f36; --fn-focus: #1a56db; --fn-scrim: rgb(0 0 0 / 0.45);
  --fn-toast-bg: #111418; --fn-toast-fg: #ffffff; --fn-attention: #111418; --fn-shadow: 0 0 0 0 transparent;
}
/* blindagem contra CSS global do host (ex.: `nav { background; border-bottom }`, `button { text-transform: uppercase }`, `ul, li { margin }`):
   as regras do menu usam classes e este bloco zera o que o host costuma estilizar por elemento; tudo o que e intencional vem depois e vence. */
.fn-root, .fn-root * { box-sizing: border-box; }
.fn-root, .fn-root :where(nav, ul, li, div, span, button, form, label, fieldset, legend, h2, h3, p, strong, input) { text-transform: none; letter-spacing: normal; font-style: normal; text-shadow: none; text-indent: 0; }
.fn-root :where(nav, ul, li, button) { margin: 0; box-shadow: none; }
.fn-root :where(ul, li) { padding: 0; list-style: none; }
/* recolhido: espinha fina com flares pequenos; aberto: pilula com flares e cantos grandes (a mola anima os dois) */
.fn-root { transition: --fn-ear var(--fn-collapse-ms) var(--fn-spring), --fn-round var(--fn-collapse-ms) var(--fn-spring); }
.fn-root[data-open="true"], .fn-root[data-forced="true"] { --fn-ear: var(--fn-ear-open); --fn-round: var(--fn-round-open); transition: --fn-ear var(--fn-expand-ms) var(--fn-spring), --fn-round var(--fn-expand-ms) var(--fn-spring); } /* abre devagar e elastico; fecha mais rapido */
.fn-root button, .fn-root input { font: inherit; }
.fn-root :focus-visible { outline: 2px solid var(--fn-focus); outline-offset: 2px; }

/* dock: so layout (transparente a cliques); quem recebe evento e a pilula, senao a caixa invisivel roubaria os cliques do host */
.fn-dock { position: fixed; z-index: var(--fn-z); display: flex; pointer-events: none; }
.fn-dock[hidden] { display: none; }
.fn-root[data-edge="right"] .fn-dock { right: 0; top: 0; bottom: 0; margin: auto 0; height: fit-content; max-height: 100vh; justify-content: flex-end; }
.fn-root[data-edge="left"] .fn-dock { left: 0; top: 0; bottom: 0; margin: auto 0; height: fit-content; max-height: 100vh; }
.fn-root[data-edge="top"] .fn-dock { top: 0; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: 100vw; }
.fn-root[data-edge="bottom"] .fn-dock { bottom: 0; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: 100vw; }
.fn-root[data-forced="true"] .fn-dock { inset: 0; margin: auto; width: fit-content; height: fit-content; }

/* pilula: espinha (lingueta) + painel formam um unico corpo preto; as "orelhas" (::before/::after) criam os cantos internos
   invertidos que fazem o corpo parecer parte da borda da tela */
.fn-pill { position: relative; display: flex; background: var(--fn-pill); color: var(--fn-ink); pointer-events: auto; box-shadow: var(--fn-rule-x, 0px) var(--fn-rule-y, 0px) 0 0 var(--fn-rule) inset; }
/* linha solida de 2 px SO no lado voltado para a pagina, como o filete dos cards do Hub: sem contorno em volta, sem sombra difusa */
.fn-root[data-edge="right"] .fn-pill { --fn-rule-x: 2px; } .fn-root[data-edge="left"] .fn-pill { --fn-rule-x: -2px; } .fn-root[data-edge="top"] .fn-pill { --fn-rule-y: -2px; } .fn-root[data-edge="bottom"] .fn-pill { --fn-rule-y: 2px; }
/* orelhas: silhueta de UMA curva suave (duas cubicas ajustadas ao quadro da referencia: 99% de sobreposicao), sem trecho reto e sem contorno duro.
   Mascara SVG esticada na caixa da orelha (largura = espessura da pilula, altura = --fn-ear), entao a curva acompanha a mola de abertura. */
.fn-pill::before, .fn-pill::after { content: ""; position: absolute; pointer-events: none; background: var(--fn-pill);
  -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat; }
.fn-root[data-edge="right"] .fn-pill::before, .fn-root[data-edge="right"] .fn-pill::after, .fn-root[data-edge="left"] .fn-pill::before, .fn-root[data-edge="left"] .fn-pill::after { width: 100%; height: calc(var(--fn-ear) + 0.5px); }
.fn-root[data-edge="top"] .fn-pill::before, .fn-root[data-edge="top"] .fn-pill::after, .fn-root[data-edge="bottom"] .fn-pill::before, .fn-root[data-edge="bottom"] .fn-pill::after { height: 100%; width: calc(var(--fn-ear) + 0.5px); }
.fn-root[data-edge="right"] .fn-pill { flex-direction: row-reverse; }
.fn-root[data-edge="left"] .fn-pill { flex-direction: row; }
.fn-root[data-edge="top"] .fn-pill { flex-direction: column; }
.fn-root[data-edge="bottom"] .fn-pill { flex-direction: column-reverse; }
.fn-root[data-edge="right"] .fn-pill::before { right: 0; top: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%201000%20C0%201000%2032%20171%20755%20171%20C845%20171%20876%20109%201000%200%20L1000%201000%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="right"] .fn-pill::after { right: 0; bottom: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20C0%200%2032%20829%20755%20829%20C845%20829%20876%20891%201000%201000%20L1000%200%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="left"] .fn-pill::before { left: 0; top: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1000%201000%20C1000%201000%20968%20171%20245%20171%20C155%20171%20124%20109%200%200%20L0%201000%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="left"] .fn-pill::after { left: 0; bottom: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1000%200%20C1000%200%20968%20829%20245%20829%20C155%20829%20124%20891%200%201000%20L0%200%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="top"] .fn-pill::before { top: 0; left: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1000%201000%20C1000%201000%20171%20968%20171%20245%20C171%20155%20109%20124%200%200%20L1000%200%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="top"] .fn-pill::after { top: 0; right: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%201000%20C0%201000%20829%20968%20829%20245%20C829%20155%20891%20124%201000%200%20L0%200%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="bottom"] .fn-pill::before { bottom: 0; left: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1000%200%20C1000%200%20171%2032%20171%20755%20C171%20845%20109%20876%200%201000%20L1000%201000%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-edge="bottom"] .fn-pill::after { bottom: 0; right: calc(var(--fn-ear) * -1); --m: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20C0%200%20829%2032%20829%20755%20C829%20845%20891%20876%201000%201000%20L0%201000%20Z'/%3E%3C/svg%3E"); }
.fn-root[data-forced="true"] .fn-pill { flex-direction: column; border-radius: var(--fn-round); }
.fn-root[data-forced="true"] .fn-pill::before, .fn-root[data-forced="true"] .fn-pill::after { display: none; }

/* espinha: lingueta fixa na borda. Recolhido, e a propria pilula (fina); aberto, e a haste que recolhe. Alvo de toque de 48 ao
   longo da borda; a espessura visivel e a da referencia, e a area de toque se estende para dentro enquanto nao ha painel */
.fn-tab { position: relative; flex: none; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--fn-ink); border-radius: inherit; }
.fn-root[data-edge="right"] .fn-tab, .fn-root[data-edge="left"] .fn-tab { width: var(--fn-spine); min-height: var(--fn-rest); }
.fn-root[data-edge="top"] .fn-tab, .fn-root[data-edge="bottom"] .fn-tab { height: var(--fn-spine); min-width: var(--fn-rest); }
.fn-tab::before { content: ""; position: absolute; }
.fn-root[data-edge="right"] .fn-tab::before { right: 100%; width: 24px; top: 0; bottom: 0; }
.fn-root[data-edge="left"] .fn-tab::before { left: 100%; width: 24px; top: 0; bottom: 0; }
.fn-root[data-edge="top"] .fn-tab::before { top: 100%; height: 24px; left: 0; right: 0; }
.fn-root[data-edge="bottom"] .fn-tab::before { bottom: 100%; height: 24px; left: 0; right: 0; }
.fn-root[data-open="true"] .fn-tab::before, .fn-root[data-forced="true"] .fn-tab::before { display: none; }
.fn-grip { position: absolute; inset: 0; display: grid; place-items: center; }
.fn-dot { position: absolute; width: 8px; height: 8px; border-radius: 0; /* dot QUADRADO: o ponto da marca (botao REC), sem arredondar */ background: var(--fn-attention, var(--fn-ink)); opacity: 0.9; transition: opacity 0.2s ease, scale 0.2s ease; }
.fn-root[data-open="true"] .fn-dot { opacity: 0; scale: 0.4; }
.fn-root:not([data-open="true"]) .fn-chevron { opacity: 0; }
.fn-chevron { width: 14px; height: 14px; opacity: 0.5; transition: transform var(--fn-collapse-ms) var(--fn-spring), opacity 0.2s ease; }
.fn-root[data-open="true"] .fn-chevron { transition: transform var(--fn-expand-ms) var(--fn-spring), opacity 0.2s ease; }
.fn-root[data-open="true"] .fn-tab:hover .fn-chevron { opacity: 1; }
/* convite: recolhido, o ponto pisca (cor principal do sistema) ate a pessoa interagir, para ela saber que ha uma barra */
.fn-root[data-beckon="true"]:not([data-open="true"]) .fn-dot { animation: fn-dot-blink 1.2s step-end 5; /* 5 piscadas e para (WCAG 2.2.2); o fim chama stopBeckon */ }
@keyframes fn-dot-blink { /* pisca seco, como a luz de REC: aceso, apagado, sem esmaecer e sem halo */
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0.12; }
}
/* seta: aponta para dentro quando recolhido (convida a abrir) e para a borda quando aberto (recolher) */
.fn-root[data-edge="right"] .fn-chevron { transform: rotate(180deg); }
.fn-root[data-edge="left"] .fn-chevron { transform: rotate(0deg); }
.fn-root[data-edge="top"] .fn-chevron { transform: rotate(90deg); }
.fn-root[data-edge="bottom"] .fn-chevron { transform: rotate(-90deg); }
.fn-root[data-open="true"][data-edge="right"] .fn-chevron { transform: rotate(0deg); }
.fn-root[data-open="true"][data-edge="left"] .fn-chevron { transform: rotate(180deg); }
.fn-root[data-open="true"][data-edge="top"] .fn-chevron { transform: rotate(-90deg); }
.fn-root[data-open="true"][data-edge="bottom"] .fn-chevron { transform: rotate(90deg); }

/* painel: cresce a partir da espinha com mola; o conteudo fica ancorado do lado da borda e e revelado pelo recorte */
.fn-panel { display: flex; overflow: hidden; scrollbar-width: none; visibility: hidden; opacity: 0; background: none; border: 0; padding: 0; margin: 0; box-shadow: none;
  transition: width var(--fn-collapse-ms) var(--fn-spring), height var(--fn-collapse-ms) var(--fn-spring), max-height var(--fn-collapse-ms) var(--fn-spring), max-width var(--fn-collapse-ms) var(--fn-spring),
    opacity 0.16s ease, visibility 0s linear var(--fn-collapse-ms); }
.fn-panel::-webkit-scrollbar { display: none; }
.fn-root[data-edge="right"] .fn-panel, .fn-root[data-edge="left"] .fn-panel { flex-direction: column; width: 0; max-height: 0; }
.fn-root[data-edge="right"] .fn-panel { align-items: flex-end; }
.fn-root[data-edge="top"] .fn-panel, .fn-root[data-edge="bottom"] .fn-panel { flex-direction: row; height: 0; max-width: 0; }
.fn-root[data-edge="bottom"] .fn-panel { align-items: flex-end; }
.fn-root[data-open="true"] .fn-panel, .fn-root[data-forced="true"] .fn-panel { visibility: visible; opacity: 1; transition-delay: 0s;
  transition: width var(--fn-expand-ms) var(--fn-spring), height var(--fn-expand-ms) var(--fn-spring), max-height var(--fn-expand-ms) var(--fn-spring), max-width var(--fn-expand-ms) var(--fn-spring), opacity 0.16s ease, visibility 0s linear 0s; }
.fn-root[data-open="true"][data-edge="right"] .fn-panel, .fn-root[data-open="true"][data-edge="left"] .fn-panel, .fn-root[data-forced="true"] .fn-panel {
  width: var(--fn-panel); max-height: min(calc(var(--fn-n, 1) * var(--fn-cell-h) + var(--fn-gear-h) + 24px), calc(100vh - 2 * var(--fn-ear) - 16px)); overflow: hidden auto; }
.fn-root[data-open="true"][data-edge="top"] .fn-panel, .fn-root[data-open="true"][data-edge="bottom"] .fn-panel {
  height: calc(var(--fn-cell-h) + 8px); max-width: min(calc(var(--fn-n, 1) * var(--fn-panel) + var(--fn-gear-h) + 16px), calc(100vw - 2 * var(--fn-ear) - 16px)); overflow: auto hidden; }

.fn-cells { display: flex; margin: 0; padding: 0; list-style: none; flex: none; }
.fn-root[data-edge="right"] .fn-cells, .fn-root[data-edge="left"] .fn-cells, .fn-root[data-forced="true"] .fn-cells { flex-direction: column; width: var(--fn-panel); padding-top: 16px; }
.fn-root[data-edge="top"] .fn-cells, .fn-root[data-edge="bottom"] .fn-cells { padding-left: 8px; }
.fn-cells li { flex: none; }
.fn-root[data-edge="right"] .fn-cells, .fn-root[data-edge="right"] .fn-gear { margin-right: calc(var(--fn-shift) * -1); }
.fn-root[data-edge="left"] .fn-cells, .fn-root[data-edge="left"] .fn-gear { margin-left: calc(var(--fn-shift) * -1); }

/* celula: disco de 44 dentro de um anel de 56, rotulo abaixo. O anel so tem arco quando ha dado real (sem dado, so a trilha) */
.fn-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--fn-panel); height: var(--fn-cell-h); min-height: 48px; padding: 8px 0 0;
  border: 0; border-radius: 22px; background: transparent; color: var(--fn-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  --fn-dx: 0px; --fn-dy: 0px; opacity: 0; translate: var(--fn-dx) var(--fn-dy);
  transition: opacity 0.2s ease, translate 0.5s var(--fn-spring); }
.fn-root[data-edge="right"] .fn-cell { --fn-dx: 14px; } .fn-root[data-edge="left"] .fn-cell { --fn-dx: -14px; }
.fn-root[data-edge="top"] .fn-cell { --fn-dy: -14px; } .fn-root[data-edge="bottom"] .fn-cell { --fn-dy: 14px; }
.fn-root[data-open="true"] .fn-cell, .fn-root[data-forced="true"] .fn-cell { opacity: 1; translate: 0 0; transition-delay: calc(70ms + var(--i, 0) * 38ms); }
.fn-cell[aria-disabled="true"] { cursor: not-allowed; }
/* botao fixo (primeiro, ninguem edita): anel inteiro na cor principal do sistema, no lugar do cinza dos demais */
.fn-cell[data-fixed="true"] .fn-ring__track { stroke: var(--fn-fixed, var(--fn-attention)); }

.fn-cell[aria-disabled="true"] .fn-ringbox { opacity: 0.45; }
.fn-ringbox { position: relative; display: block; width: var(--fn-ring); height: var(--fn-ring); flex: none; }
.fn-ring { position: absolute; inset: 0; width: var(--fn-ring); height: var(--fn-ring); transform: rotate(-90deg); overflow: visible; }
.fn-ring__track { fill: none; stroke: var(--fn-track); stroke-width: 6; }
.fn-ring__arc { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray 0.95s var(--fn-ease), stroke 0.3s ease, opacity 0.3s ease; }
.fn-ring__arc[data-stale="true"] { opacity: 0.4; }
.fn-glyph { position: absolute; inset: var(--fn-ring-inset); display: grid; place-items: center; border-radius: 50%; background: var(--fn-disc); color: var(--fn-ink); font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
  transition: transform 0.34s var(--fn-spring), background 0.2s ease, color 0.2s ease; }
.fn-photo { display: block; width: calc(var(--fn-ring) - 2 * var(--fn-ring-inset)); height: calc(var(--fn-ring) - 2 * var(--fn-ring-inset)); border-radius: 50%; object-fit: cover; background: var(--fn-track); }
.fn-card__glyph .fn-photo { width: 28px; height: 28px; }
.fn-avail__thumb { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; vertical-align: -6px; border-radius: 50%; overflow: hidden; font-size: 10px; font-weight: 700; background: var(--fn-track); }
.fn-avail__thumb .fn-photo { width: 24px; height: 24px; } .fn-avail__thumb .fn-icon { width: 16px; height: 16px; }
.fn-filter { width: 100%; min-height: 48px; margin: 4px 0 8px; padding: 0 14px; border: 1px solid var(--fn-border); border-radius: var(--fn-field-radius); background: var(--fn-input); color: var(--fn-fg); }
.fn-row-d { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; margin-top: 12px; font-size: 14px; }
/* linha clicavel do card: botao que parece linha; o card so recebe o mouse quando tem uma */
.fn-card[data-interactive] { pointer-events: auto; }
button.fn-row-d--act { appearance: none; width: 100%; margin: 8px -8px 0; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: calc(100% + 16px); }
button.fn-row-d--act .fn-row-d__label { color: var(--fn-ink); } button.fn-row-d--act .fn-row-d__value { color: var(--fn-muted); } /* linha clicavel: o item (titulo) em destaque, o complemento (status, data) discreto */
button.fn-row-d--act:hover { background: color-mix(in srgb, var(--fn-ink) 8%, transparent); }
button.fn-row-d--act:focus-visible { outline: 2px solid var(--tone, var(--fn-ink)); outline-offset: 0; }
.fn-row-d__label { color: var(--fn-muted); } .fn-row-d__value { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--fn-font-mono); }
.fn-row-d__delta { grid-column: 1 / -1; text-align: right; font-size: 13px; color: var(--fn-muted); font-variant-numeric: tabular-nums; }
.fn-row-d__delta[data-dir="up"] { color: var(--fn-ring-ok); } .fn-row-d__delta[data-dir="down"] { color: var(--fn-ring-high); }
.fn-card[data-state="loading"] .fn-card__loading { opacity: 0.7; animation: fn-pulse 1.2s ease-in-out infinite; }
@keyframes fn-pulse { 50% { opacity: 0.35; } }
.fn-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* tom (identidade): so na interacao e so quando a celula nao tem arco de status, para nao se misturar com verde, amarelo e laranja */
.fn-cell:not([data-metric="value"]):hover .fn-glyph, .fn-cell:not([data-metric="value"]):focus-visible .fn-glyph { color: var(--tone, var(--fn-ink)); }
.fn-cell:hover .fn-glyph, .fn-cell:focus-visible .fn-glyph { background: var(--fn-disc-hover); transform: scale(1.07); }
.fn-cell:active .fn-glyph { transform: scale(0.93); transition-duration: 0.12s; }
.fn-cell[data-full="true"] .fn-glyph { opacity: 0.55; }
.fn-cell:focus-visible { outline-offset: -2px; }
.fn-label { max-width: calc(var(--fn-panel) - 4px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; font-weight: 400; line-height: 1.15; color: var(--fn-ink); font-variant-numeric: tabular-nums; font-family: var(--fn-font-label); text-transform: var(--fn-label-transform); letter-spacing: var(--fn-label-tracking); text-decoration: underline 2px transparent; text-underline-offset: 4px; }
.fn-cell[data-metric="none"] .fn-label, .fn-cell[data-metric="status"] .fn-label { font-size: 12px; }
.fn-cell:hover .fn-label, .fn-cell:focus-visible .fn-label { text-decoration-color: var(--fn-underline); } /* sublinhado tecnico (Icy Blue no design system) no mouse e no foco */
.fn-cell[data-metric="none"] .fn-label, .fn-cell[data-metric="status"] .fn-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: normal;
  text-align: center; font-size: 12.5px; line-height: 1.2; font-weight: 400; color: var(--fn-ink); }

.fn-gear { display: flex; align-items: center; justify-content: center; flex: none; width: var(--fn-panel); height: var(--fn-gear-h); min-height: 48px; padding: 0; border: 0; background: transparent;
  color: var(--fn-muted); cursor: pointer; transition: color 0.2s ease; }
.fn-root[data-edge="top"] .fn-gear, .fn-root[data-edge="bottom"] .fn-gear { width: var(--fn-gear-h); height: auto; align-self: stretch; }
.fn-gear svg { transition: transform 0.4s var(--fn-spring); }
.fn-gear:hover { color: var(--fn-ink); } .fn-gear:hover svg { transform: rotate(90deg); }
.fn-gear[hidden] { display: none; }

/* card de detalhe: balao preto com cauda voltada para a celula; so entra com hover (mouse) ou foco por teclado */
.fn-card { position: fixed; left: 0; top: 0; z-index: calc(var(--fn-z) + 2); width: max-content; min-width: 220px; padding: 16px; pointer-events: none;
  background: var(--fn-card); color: var(--fn-ink); border-radius: var(--fn-card-radius); box-shadow: var(--fn-shadow), 0 0 0 1px var(--fn-card-edge);
  opacity: 0; visibility: hidden; transform: scale(0.9); --tail: 24px;
  transition: opacity 0.18s ease, transform 0.34s var(--fn-spring), visibility 0s linear 0.18s; }
.fn-card[data-show] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fn-card[data-side="right"] { transform-origin: calc(100% + 22px) var(--tail); } .fn-card[data-side="left"] { transform-origin: -22px var(--tail); }
.fn-card[data-side="top"] { transform-origin: var(--tail) -22px; } .fn-card[data-side="bottom"] { transform-origin: var(--tail) calc(100% + 22px); }
.fn-card::after { content: ""; position: absolute; background: var(--fn-card); }
.fn-card[data-side="right"]::after { left: calc(100% - 1px); top: calc(var(--tail) - 17px); width: 23px; height: 34px; clip-path: path("M0 0 C9 0 13 7 23 17 C13 27 9 34 0 34 Z"); }
.fn-card[data-side="left"]::after { right: calc(100% - 1px); top: calc(var(--tail) - 17px); width: 23px; height: 34px; clip-path: path("M23 0 C14 0 10 7 0 17 C10 27 14 34 23 34 Z"); }
.fn-card[data-side="top"]::after { bottom: calc(100% - 1px); left: calc(var(--tail) - 17px); width: 34px; height: 23px; clip-path: path("M0 23 C0 14 7 10 17 0 C27 10 34 14 34 23 Z"); }
.fn-card[data-side="bottom"]::after { top: calc(100% - 1px); left: calc(var(--tail) - 17px); width: 34px; height: 23px; clip-path: path("M0 0 C0 9 7 13 17 23 C27 13 34 9 34 0 Z"); }
.fn-card__head { display: flex; align-items: center; gap: 10px; }
.fn-card__glyph { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--tone, var(--fn-ink)); background: color-mix(in srgb, var(--tone, var(--fn-ink)) 18%, var(--fn-card)); font-size: 11px; font-weight: 700; }
.fn-card__glyph .fn-icon { width: 18px; height: 18px; }
.fn-manage__name .fn-icon { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -4px; }
.fn-card__title { font-family: var(--fn-font-display); text-transform: var(--fn-title-transform); font-size: 17px; font-weight: 400; letter-spacing: -0.01em; } /* --fn-font-display: gancho para o host; inerte por padrao */
.fn-card__hint, .fn-card__note { margin-top: 8px; font-size: 13px; color: var(--fn-muted); }
.fn-win { margin-top: 14px; }
.fn-win__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; font-size: 14px; }
.fn-win__reset { font-size: 14px; color: var(--fn-muted); white-space: nowrap; }
.fn-bar { height: 5px; margin: 8px 0 6px; border-radius: 3px; background: var(--fn-track); overflow: hidden; }
.fn-bar__fill { display: block; height: 100%; border-radius: 3px; transition: width 0.7s var(--fn-ease); }
.fn-win__used { font-size: 14px; color: var(--fn-ink); font-variant-numeric: tabular-nums; }

.fn-live { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: var(--fn-z); max-width: calc(100vw - 32px);
  padding: 10px 18px; border-radius: 999px; background: var(--fn-toast-bg); color: var(--fn-toast-fg); font-size: 14px; box-shadow: var(--fn-shadow), 0 0 0 1px var(--fn-card-edge); }
.fn-live:empty { display: none; }

/* dialogo de configuracao: mesma linguagem preta da pilula */
.fn-overlay { overscroll-behavior: contain; position: fixed; inset: 0; z-index: calc(var(--fn-z) + 1); display: none; background: var(--fn-scrim); -webkit-backdrop-filter: blur(var(--fn-blur)); backdrop-filter: blur(var(--fn-blur)); }
.fn-overlay[data-open] { display: grid; place-items: center; padding: 8px; }
.fn-dialog { overscroll-behavior: contain; width: min(34rem, calc(100vw - 16px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 24px;
  background: var(--fn-bg); color: var(--fn-fg); border: 1px solid var(--fn-border); border-radius: var(--fn-radius); box-shadow: var(--fn-shadow);
  animation: fn-pop 0.38s var(--fn-spring); }
@keyframes fn-pop { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: none; } }
.fn-dialog h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; } .fn-dialog h3 { margin: 28px 0 8px; font-size: 0.95rem; font-weight: 600; color: var(--fn-muted); text-transform: none; }
.fn-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fn-status, .fn-note { margin: 8px 0; color: var(--fn-muted); font-size: 0.875rem; }
.fn-check { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.fn-check input { width: 22px; height: 22px; accent-color: var(--fn-accent); }
.fn-fieldset { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--fn-border); border-radius: var(--fn-field-radius); }
.fn-manage { margin: 0; padding: 0; list-style: none; }
.fn-manage__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--fn-hairline); }
.fn-manage__name { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.fn-row { display: flex; flex-wrap: wrap; gap: 8px; } .fn-row--end { justify-content: flex-end; margin-top: 16px; }
.fn-btn { min-height: 48px; min-width: 48px; padding: 0 18px; border: 1px solid var(--fn-border); border-radius: var(--fn-btn-radius); background: var(--fn-btn); color: var(--fn-fg); cursor: pointer;
  transition: background 0.2s ease, transform 0.2s var(--fn-spring); }
.fn-btn:hover:not(:disabled) { background: var(--fn-btn-hover); } .fn-btn:active:not(:disabled) { transform: scale(0.97); }
.fn-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fn-btn--primary { background: var(--fn-accent); color: var(--fn-accent-fg); border-color: var(--fn-accent); } .fn-btn--primary:hover:not(:disabled) { background: var(--fn-accent-hover); }
.fn-form { display: grid; gap: 8px; } .fn-form label { font-size: 0.875rem; color: var(--fn-muted); }
.fn-form input[type="text"] { min-height: 48px; padding: 0 14px; border: 1px solid var(--fn-border); border-radius: var(--fn-field-radius); background: var(--fn-input); color: var(--fn-fg); width: 100%; }
.fn-form input[type="color"] { min-height: 48px; width: 96px; padding: 4px; border: 1px solid var(--fn-border); border-radius: var(--fn-field-radius); background: var(--fn-input); }
.fn-error { margin: 0; min-height: 1.5em; color: var(--fn-error); font-size: 0.875rem; }
.fn-conflict { margin: 8px 0; padding: 14px; border: 1px solid var(--fn-accent); border-radius: var(--fn-field-radius); }
.fn-conflict p { margin: 4px 0; }
.fn-undo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 14px; border-radius: var(--fn-field-radius); background: var(--fn-undo); }

@media (prefers-reduced-motion: reduce) {
  .fn-root, .fn-root *, .fn-root *::before, .fn-root *::after { transition: none !important; animation: none !important; }
  .fn-cell { opacity: 1; translate: 0 0; }
}

.fn-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.fn-limit { color: var(--fn-muted); }
/* marcador de pendencia: ponto QUADRADO (o dot da marca) no canto do anel */
.fn-badge { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 0; background: var(--fn-attention); pointer-events: none; }
.fn-badge--n { top: -4px; right: -6px; width: auto; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; color: var(--fn-on-attention, #fff); font: 600 11px/16px var(--fn-font-label, inherit); text-align: center; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* com numero: maior que o ponto de convite (8 px), para nao serem confundidos */