/*!
 * Órbita — kit HTML/CSS/JS. vidro fumê sobre o brilho de um planeta, fios de luz e sinais em ciano e coral
 * Família de kits, contrato 2.0: núcleo estrutural comum + pele própria. Gerado por build.py a partir de src/.
 */
/* =====================================================================
   NÚCLEO ESTRUTURAL — contrato 2.0 da família (gerado; não edite aqui)
   Só mecânica: layout, posição, estados, acessibilidade e o mínimo para
   nada sumir. Cor, forma, tipo e movimento são da PELE do kit, logo abaixo.
   ===================================================================== */
.ob { -webkit-font-smoothing: antialiased; }
.ob-icon { display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.ob-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
html.ob-is-locked { overflow: hidden; }

/* ações */
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap; font: inherit; text-decoration: none; position: relative; }
.ob-btn:disabled, .ob-btn[aria-disabled="true"] { cursor: not-allowed; }
.ob-btn--block { display: flex; width: 100%; }
.ob-btn.is-loading { pointer-events: none; }
.ob-spinner { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ob-spin .8s linear infinite; flex: none; }
@keyframes ob-spin { to { transform: rotate(360deg); } }
.ob-iconbtn { display: inline-grid; place-items: center; cursor: pointer; position: relative; flex: none; font: inherit; }
.ob-iconbtn[data-dot]::after { content: ""; position: absolute; top: 18%; right: 18%; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-danger); }
.ob-seg { display: inline-flex; position: relative; isolation: isolate; max-width: 100%; }
.ob-seg__opt { position: relative; z-index: 1; cursor: pointer; font: inherit; white-space: nowrap; }
.ob-seg__thumb { position: absolute; left: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip { display: inline-flex; align-items: center; gap: 6px; font: inherit; white-space: nowrap; }
button.ob-chip { cursor: pointer; }
.ob-chip__x { display: inline-grid; place-items: center; cursor: pointer; font: inherit; }
.ob-chip.is-leaving { opacity: 0; transform: scale(.9); transition: opacity .2s, transform .2s; }
.ob-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* formulários */
.ob-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ob-field__error { display: flex; align-items: center; gap: 6px; }
.ob-input { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-input input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: none; padding: 0; }
.ob-textarea { font: inherit; resize: vertical; width: 100%; }
.ob-select { position: relative; }
.ob-select__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; font: inherit; text-align: left; }
.ob-select__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 0; list-style: none; visibility: hidden; opacity: 0; }
.ob-select.is-open .ob-select__list { visibility: visible; opacity: 1; }
.ob-select__opt { cursor: pointer; }
.ob-search { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.ob-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ob-check, .ob-radio, .ob-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.ob-check input, .ob-radio input, .ob-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ob-check__box, .ob-radio__dot, .ob-switch__track { flex: none; position: relative; display: inline-grid; place-items: center; }
.ob-switch__thumb { position: absolute; top: 50%; }
.ob-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
.ob-range input { grid-column: 1 / -1; width: 100%; margin: 0; cursor: pointer; }
.ob-range__label { grid-row: 1; grid-column: 1; }
.ob-range__out { grid-row: 1; grid-column: 2; }
.ob-range input { grid-row: 2; }
.ob-stepper { display: inline-flex; align-items: center; }
.ob-stepper__btn { display: inline-grid; place-items: center; cursor: pointer; font: inherit; }
.ob-stepper__input { text-align: center; font: inherit; min-width: 0; }

/* navegação */
.ob-topbar { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ob-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; white-space: nowrap; }
.ob-brand__mark { display: inline-grid; place-items: center; flex: none; }
.ob-topbar__nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ob-topbar__nav::-webkit-scrollbar { display: none; }
.ob-topbar__link { white-space: nowrap; text-decoration: none; }
.ob-topbar__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.ob-tabs { display: flex; position: relative; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ob-tabs::-webkit-scrollbar { display: none; }
.ob-tab { cursor: pointer; font: inherit; white-space: nowrap; position: relative; z-index: 1; }
.ob-tabs__ink { position: absolute; left: 0; bottom: 0; pointer-events: none; }
.ob-tabpanel[hidden] { display: none; }
.ob-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.ob-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ob-pager__btn { display: inline-grid; place-items: center; cursor: pointer; font: inherit; }
.ob-pager__btn:disabled { cursor: not-allowed; }
.ob-steps { display: flex; margin: 0; padding: 0; list-style: none; }
.ob-step { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; position: relative; }
.ob-step__dot { display: inline-grid; place-items: center; flex: none; }
.ob-dock { display: flex; position: relative; isolation: isolate; }
.ob-dock__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; font: inherit; position: relative; z-index: 1; }
.ob-dock__ink { position: absolute; left: 0; pointer-events: none; z-index: 0; }
.ob-navlist { display: flex; flex-direction: column; }
.ob-navlist__item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ob-navlist__label { flex: 1; min-width: 0; }
.ob-navlist__count:empty, .ob-kpi__pre:empty, .ob-kpi__unit:empty { display: none; }

/* exibição */
.ob-card { display: flex; flex-direction: column; min-width: 0; position: relative; }
.ob-card__head, .ob-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ob-card__body { flex: 1; }
.ob-tag, .ob-badge, .ob-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ob-avatar { display: inline-grid; place-items: center; flex: none; overflow: hidden; user-select: none; }
.ob-avatars { display: flex; align-items: center; }
.ob-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ob-person__text { display: flex; flex-direction: column; min-width: 0; }
.ob-alert { display: flex; align-items: flex-start; gap: 12px; overflow: hidden; }
.ob-alert__body { flex: 1; min-width: 0; }
.ob-alert.is-leaving, .ob-toast.is-leaving { opacity: 0; height: 0 !important; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; transition: opacity .2s, height .3s .05s, padding .3s .05s, margin .3s .05s; }
.ob-empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ob-skel-group { display: flex; flex-direction: column; gap: 12px; }
.ob-skel { display: block; position: relative; overflow: hidden; }
.ob-skel--circle { border-radius: 50%; flex: none; }
.ob-skel--line { width: var(--w, 100%); }
.ob-tip { position: fixed; z-index: 1000; pointer-events: none; opacity: 0; max-width: 260px; }
.ob-tip.is-on { opacity: 1; }

/* indicadores */
.ob-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ob-kpi { display: flex; flex-direction: column; min-width: 0; }
.ob-kpi__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ob-delta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ob-spark { display: block; width: 100%; height: 30px; }
.ob-spark--lg { width: 160px; height: 36px; }
.ob-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ob-spark__line { fill: none; stroke: var(--ob-series-1); vector-effect: non-scaling-stroke; }
.ob-spark__area { fill: var(--ob-series-1); opacity: .14; stroke: none; }
.ob-spark__dot { fill: var(--ob-series-1); }
.ob-progress-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.ob-progress { grid-column: 1 / -1; position: relative; overflow: hidden; }
.ob-progress__bar { display: block; height: 100%; width: calc(var(--v, 0) * 100%); }
.ob-ring { position: relative; display: inline-grid; place-items: center; }
.ob-ring svg { width: 100%; height: 100%; display: block; }
.ob-ring__val { stroke: var(--ob-accent); }
.ob-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ob-gauge { position: relative; display: flex; flex-direction: column; align-items: center; }
.ob-gauge svg { width: 100%; display: block; overflow: visible; }
.ob-gauge__needle { transition: none; }
.ob-gauge__readout { display: flex; flex-direction: column; align-items: center; }

/* gráficos */
.ob-chart { position: relative; min-width: 0; }
.ob-chart__plot { position: relative; width: 100%; }
.ob-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.ob-chart__line { fill: none; stroke: var(--s); stroke-linejoin: round; stroke-linecap: round; }
.ob-chart__bar { fill: var(--s); transition: y .6s cubic-bezier(.2,.8,.2,1), height .6s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.ob-chart__area { fill: var(--s); opacity: .12; stroke: none; }
.ob-chart__dot, .ob-chart__hover { fill: var(--s); }
.ob-chart__grid, .ob-chart__cross { stroke: var(--ob-line); }
.ob-chart__axis { fill: var(--ob-ink-2); }
.ob-donut__seg { transition: stroke-dasharray 1s cubic-bezier(.2,.8,.2,1), stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1), stroke-width .2s; }
.ob-ring__val { transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.ob-chart__cross, .ob-chart__hover { opacity: 0; pointer-events: none; }
.ob-chart.is-hover .ob-chart__cross, .ob-chart.is-hover .ob-chart__hover { opacity: 1; }
.ob-chart__tip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; white-space: nowrap; }
.ob-chart.is-hover .ob-chart__tip { opacity: 1; }
.ob-chart__tip span { display: flex; align-items: center; gap: 6px; }
.ob-chart__tip i { width: 8px; height: 8px; border-radius: 2px; background: var(--s); display: inline-block; }
.ob-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ob-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ob-legend__swatch { width: 10px; height: 10px; display: inline-block; background: var(--s); flex: none; }
.ob-donut { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ob-donut__plot { position: relative; width: 180px; max-width: 100%; aspect-ratio: 1; }
.ob-donut__plot svg { width: 100%; height: 100%; display: block; }
.ob-donut__seg { stroke: var(--s); cursor: pointer; }
.ob-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }

/* dados */
.ob-table-wrap { overflow-x: auto; max-width: 100%; position: relative; }
.ob-table { width: 100%; border-collapse: collapse; }
.ob-table th[data-sort] { cursor: pointer; user-select: none; }
.ob-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ob-table__sel { width: 1%; }
.ob-list { list-style: none; margin: 0; padding: 0; }
.ob-list__item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ob-list__lead { display: inline-grid; place-items: center; flex: none; }
.ob-list__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ob-list__trail { flex: none; }
.ob-feed { list-style: none; margin: 0; padding: 0; }
.ob-feed__item { display: flex; align-items: center; gap: 12px; }
.ob-feed__mark { display: inline-grid; place-items: center; flex: none; }
.ob-feed__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ob-feed__time { flex: none; font-variant-numeric: tabular-nums; }

/* sobreposições */
.ob-modal, .ob-sheet { position: fixed; inset: 0; z-index: 900; display: grid; }
.ob-modal[hidden], .ob-sheet[hidden] { display: none; }
.ob-modal { place-items: center; padding: 16px; }
.ob-modal__scrim, .ob-sheet__scrim { position: absolute; inset: 0; }
.ob-modal__box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.ob-modal__head, .ob-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-modal__foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ob-sheet { align-items: end; justify-items: center; }
.ob-sheet__panel { position: relative; width: min(520px, 100%); max-height: 86vh; overflow: auto; }
.ob-sheet__grip { display: block; margin: 0 auto; }
.ob-menuwrap { position: relative; display: inline-block; }
.ob-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; min-width: 200px; visibility: hidden; opacity: 0; display: flex; flex-direction: column; }
.ob-menuwrap.is-open .ob-menu { visibility: visible; opacity: 1; }
.ob-menu__item { display: flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; text-align: left; width: 100%; }
.ob-menu__sep { border: 0; margin: 4px 0; height: 1px; }
.ob-toasts { position: fixed; z-index: 1000; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.ob-toast { display: flex; align-items: flex-start; gap: 12px; position: relative; overflow: hidden; }
.ob-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-toast__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left; background: currentColor; opacity: .35; }

/* fundamentos */
.ob-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ob-swatch { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ob-swatch__chip { display: block; height: 56px; background: var(--c); }
.ob-swatch__name { overflow-wrap: anywhere; }
.ob-samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px; }
.ob-sample { aspect-ratio: 1.3; display: grid; place-items: end start; padding: 8px; border-radius: var(--r, var(--ob-r-md)); }
.ob-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.ob-icons__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ob-icons__item figcaption { overflow-wrap: anywhere; text-align: center; }
.ob-num { font-variant-numeric: tabular-nums; }

/* foco visível — a pele pode refinar, nunca remover */
.ob :focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ob *, .ob *::before, .ob *::after, .ob-toasts *, .ob-tip { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* ===================================================================== FIM DO NÚCLEO */

/* =====================================================================
   ÓRBITA — PELE
   Painel de monitoramento: vidro fumê sobre o brilho difuso de um planeta,
   fios de luz finos, sinais em ciano e coral e dado que respira.
   Escuro por padrão; o claro é o mesmo vidro sob luz de dia nublado.
   ===================================================================== */

/* ---------------------------------------------------------------- tokens: escuro (padrão) */
:root, [data-theme="dark"] {
  color-scheme: dark;
  /* obrigatórios */
  --ob-bg: #0b1117; --ob-surface: #18212b; --ob-surface-2: #1f2a35; --ob-line: rgba(255, 255, 255, .08);
  --ob-ink: #e8eef3; --ob-ink-2: #aab6c2; --ob-muted: #909eab;
  --ob-accent: #45d3ea; --ob-on-accent: #06212a;
  --ob-on-danger: #2a0a04; --ob-av-ink: #07121a; --ob-av-a: 58%; --ob-av-mix-a: #fff; --ob-av-b: 100%;
  --ob-ok: #5ee0a0; --ob-warn: #ffb547; --ob-danger: #ff7a5e; --ob-info: #6aabff;
  --ob-series-1: #45d3ea; --ob-series-2: #4f9bff; --ob-series-3: #ff6f52; --ob-series-4: #ffb547;
  /* próprios: sinais */
  --ob-cyan: #45d3ea; --ob-cyan-deep: #1b8fb0; --ob-blue: #4f9bff; --ob-coral: #ff6f52; --ob-coral-deep: #c9412a;
  --ob-amber: #ffb547; --ob-green: #5ee0a0;
  --ob-cyan-ink: #7fe3f3; --ob-blue-ink: #8fbcff; --ob-coral-ink: #ff9f8b; --ob-amber-ink: #ffc877; --ob-green-ink: #86ebba;
  /* próprios: superfícies e fios */
  --ob-void: #070b10;
  --ob-panel: rgba(34, 45, 57, .62); --ob-panel-hi: rgba(255, 255, 255, .03);
  --ob-pop: rgba(20, 28, 36, .95);
  --ob-cell: rgba(255, 255, 255, .045); --ob-cell-hover: rgba(255, 255, 255, .075);
  --ob-well: rgba(255, 255, 255, .06); --ob-field: rgba(0, 0, 0, .22); --ob-chip: rgba(0, 0, 0, .28);
  --ob-line-strong: rgba(255, 255, 255, .14); --ob-line-hover: rgba(255, 255, 255, .22);
  --ob-edge: rgba(255, 255, 255, .10); --ob-faint: #4d5a67; --ob-sheen: rgba(255, 255, 255, .55);
  --ob-tint: rgba(255, 255, 255, .07); --ob-tint-2: rgba(255, 255, 255, .11);
  --ob-cyan-soft: rgba(69, 211, 234, .14); --ob-coral-soft: rgba(255, 111, 82, .14); --ob-amber-soft: rgba(255, 181, 71, .13);
  --ob-green-soft: rgba(94, 224, 160, .12); --ob-blue-soft: rgba(79, 155, 255, .14);
  --ob-glow: .9; /* intensidade dos brilhos: fio de luz sobre o escuro */
  --ob-planet-a: rgba(150, 190, 215, .22); --ob-planet-b: rgba(90, 140, 175, .10); --ob-planet-c: rgba(210, 230, 240, .12);
  --ob-dust: rgba(255, 255, 255, .035);
  --ob-cv-ink: #e8eef3; --ob-cv-hi: #ffffff; --ob-cv-band: #ebfcff; --ob-cv-line: rgba(232, 238, 243, .55);
  --ob-scrim: rgba(4, 7, 10, .62);
  --ob-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 var(--ob-edge);
  --ob-shadow-pop: 0 24px 50px -16px rgba(0, 0, 0, .7);
  /* escalas de sombra */
  --ob-shadow-1: 0 10px 24px -14px rgba(0, 0, 0, .75), inset 0 1px 0 var(--ob-edge);
  --ob-shadow-2: 0 30px 60px -24px rgba(0, 0, 0, .85), 0 0 0 1px var(--ob-line), inset 0 1px 0 var(--ob-edge);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  color-scheme: light;
  --ob-bg: #e7edf2; --ob-surface: #f8fafc; --ob-surface-2: #eef3f7; --ob-line: rgba(14, 34, 52, .11);
  --ob-ink: #0d1822; --ob-ink-2: #384857; --ob-muted: #53616e;
  --ob-accent: #08728a; --ob-on-accent: #ffffff;
  --ob-on-danger: #ffffff; --ob-av-ink: #ffffff; --ob-av-a: 80%; --ob-av-mix-a: #000; --ob-av-b: 60%;
  --ob-ok: #0b7446; --ob-warn: #8a5800; --ob-danger: #bf3419; --ob-info: #1d5cc2;
  --ob-series-1: #0b9ab5; --ob-series-2: #2f6fe0; --ob-series-3: #e0492b; --ob-series-4: #d18a0c;
  --ob-cyan: #0b9ab5; --ob-cyan-deep: #0a7c94; --ob-blue: #2f6fe0; --ob-coral: #e0492b; --ob-coral-deep: #bf3419;
  --ob-amber: #d18a0c; --ob-green: #14a266;
  --ob-cyan-ink: #075f72; --ob-blue-ink: #1b4fae; --ob-coral-ink: #a8301a; --ob-amber-ink: #744b00; --ob-green-ink: #0a6640;
  --ob-void: #dfe6ec;
  --ob-panel: rgba(255, 255, 255, .64); --ob-panel-hi: rgba(255, 255, 255, .5);
  --ob-pop: rgba(250, 252, 253, .97);
  --ob-cell: rgba(255, 255, 255, .62); --ob-cell-hover: rgba(255, 255, 255, .92);
  --ob-well: rgba(14, 34, 52, .07); --ob-field: rgba(255, 255, 255, .7); --ob-chip: rgba(14, 34, 52, .07);
  --ob-line-strong: rgba(14, 34, 52, .18); --ob-line-hover: rgba(14, 34, 52, .3);
  --ob-edge: rgba(255, 255, 255, .9); --ob-faint: #b3bfca; --ob-sheen: rgba(255, 255, 255, .7);
  --ob-tint: rgba(14, 34, 52, .05); --ob-tint-2: rgba(14, 34, 52, .09);
  --ob-cyan-soft: rgba(11, 154, 181, .12); --ob-coral-soft: rgba(224, 73, 43, .1); --ob-amber-soft: rgba(209, 138, 12, .13);
  --ob-green-soft: rgba(20, 162, 102, .12); --ob-blue-soft: rgba(47, 111, 224, .11);
  --ob-glow: .45;
  --ob-planet-a: rgba(120, 170, 205, .34); --ob-planet-b: rgba(160, 196, 222, .2); --ob-planet-c: rgba(255, 255, 255, .7);
  --ob-dust: rgba(14, 34, 52, .045);
  --ob-cv-ink: #1b2b39; --ob-cv-hi: #06394a; --ob-cv-band: #04323f; --ob-cv-line: rgba(27, 43, 57, .45);
  --ob-scrim: rgba(40, 56, 70, .38);
  --ob-shadow: 0 30px 60px -32px rgba(20, 44, 66, .38), inset 0 1px 0 var(--ob-edge);
  --ob-shadow-pop: 0 24px 50px -18px rgba(20, 44, 66, .35);
  --ob-shadow-1: 0 10px 24px -14px rgba(20, 44, 66, .35), inset 0 1px 0 var(--ob-edge);
  --ob-shadow-2: 0 30px 60px -26px rgba(20, 44, 66, .45), 0 0 0 1px var(--ob-line), inset 0 1px 0 var(--ob-edge);
} }
[data-theme="light"] {
  color-scheme: light;
  --ob-bg: #e7edf2; --ob-surface: #f8fafc; --ob-surface-2: #eef3f7; --ob-line: rgba(14, 34, 52, .11);
  --ob-ink: #0d1822; --ob-ink-2: #384857; --ob-muted: #53616e;
  --ob-accent: #08728a; --ob-on-accent: #ffffff;
  --ob-on-danger: #ffffff; --ob-av-ink: #ffffff; --ob-av-a: 80%; --ob-av-mix-a: #000; --ob-av-b: 60%;
  --ob-ok: #0b7446; --ob-warn: #8a5800; --ob-danger: #bf3419; --ob-info: #1d5cc2;
  --ob-series-1: #0b9ab5; --ob-series-2: #2f6fe0; --ob-series-3: #e0492b; --ob-series-4: #d18a0c;
  --ob-cyan: #0b9ab5; --ob-cyan-deep: #0a7c94; --ob-blue: #2f6fe0; --ob-coral: #e0492b; --ob-coral-deep: #bf3419;
  --ob-amber: #d18a0c; --ob-green: #14a266;
  --ob-cyan-ink: #075f72; --ob-blue-ink: #1b4fae; --ob-coral-ink: #a8301a; --ob-amber-ink: #744b00; --ob-green-ink: #0a6640;
  --ob-void: #dfe6ec;
  --ob-panel: rgba(255, 255, 255, .64); --ob-panel-hi: rgba(255, 255, 255, .5);
  --ob-pop: rgba(250, 252, 253, .97);
  --ob-cell: rgba(255, 255, 255, .62); --ob-cell-hover: rgba(255, 255, 255, .92);
  --ob-well: rgba(14, 34, 52, .07); --ob-field: rgba(255, 255, 255, .7); --ob-chip: rgba(14, 34, 52, .07);
  --ob-line-strong: rgba(14, 34, 52, .18); --ob-line-hover: rgba(14, 34, 52, .3);
  --ob-edge: rgba(255, 255, 255, .9); --ob-faint: #b3bfca; --ob-sheen: rgba(255, 255, 255, .7);
  --ob-tint: rgba(14, 34, 52, .05); --ob-tint-2: rgba(14, 34, 52, .09);
  --ob-cyan-soft: rgba(11, 154, 181, .12); --ob-coral-soft: rgba(224, 73, 43, .1); --ob-amber-soft: rgba(209, 138, 12, .13);
  --ob-green-soft: rgba(20, 162, 102, .12); --ob-blue-soft: rgba(47, 111, 224, .11);
  --ob-glow: .45;
  --ob-planet-a: rgba(120, 170, 205, .34); --ob-planet-b: rgba(160, 196, 222, .2); --ob-planet-c: rgba(255, 255, 255, .7);
  --ob-dust: rgba(14, 34, 52, .045);
  --ob-cv-ink: #1b2b39; --ob-cv-hi: #06394a; --ob-cv-band: #04323f; --ob-cv-line: rgba(27, 43, 57, .45);
  --ob-scrim: rgba(40, 56, 70, .38);
  --ob-shadow: 0 30px 60px -32px rgba(20, 44, 66, .38), inset 0 1px 0 var(--ob-edge);
  --ob-shadow-pop: 0 24px 50px -18px rgba(20, 44, 66, .35);
  --ob-shadow-1: 0 10px 24px -14px rgba(20, 44, 66, .35), inset 0 1px 0 var(--ob-edge);
  --ob-shadow-2: 0 30px 60px -26px rgba(20, 44, 66, .45), 0 0 0 1px var(--ob-line), inset 0 1px 0 var(--ob-edge);
}
:root {
  --ob-r-xs: 6px; --ob-r-sm: 10px; --ob-r-md: 14px; --ob-r-lg: 20px; --ob-r-xl: 26px; --ob-r-pill: 999px;
  --ob-font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ob-font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ob-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ob-ease: cubic-bezier(.2, .8, .2, 1);
  --ob-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ob-dur: .3s;
  --ob-blur: 22px;
}

/* ---------------------------------------------------------------- base */
.ob { font-family: var(--ob-font); color: var(--ob-ink); font-size: 14px; line-height: 1.45; font-feature-settings: "tnum" 1; }
.ob :focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.ob button { font-family: inherit; }

/* =====================================================================
   O MATERIAL — palco com o brilho de um planeta, vidro fumê, célula
   ===================================================================== */
.ob-stage { position: relative; background: var(--ob-bg); overflow: hidden; isolation: isolate; }
.ob-stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 72%; aspect-ratio: 1; left: 28%; top: -8%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ob-planet-a), var(--ob-planet-b) 55%, transparent 72%),
              radial-gradient(closest-side at 40% 38%, var(--ob-planet-c), transparent 60%);
  filter: blur(8px);
}
.ob-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(var(--ob-dust) 1px, transparent 1px); background-size: 3px 3px; }
.ob-panel {
  position: relative; border-radius: var(--ob-r-xl); padding: 20px; min-width: 0;
  background: linear-gradient(180deg, var(--ob-panel-hi), transparent 40%), var(--ob-panel);
  -webkit-backdrop-filter: blur(var(--ob-blur)) saturate(120%); backdrop-filter: blur(var(--ob-blur)) saturate(120%);
  border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow);
}
.ob-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ob-panel__title { flex: 1; min-width: 0; }
.ob-panel__actions { display: flex; gap: 8px; }
.ob-cell { position: relative; border-radius: var(--ob-r-md); padding: 12px; background: var(--ob-cell); border: 1px solid var(--ob-line);
  transition: background-color .25s ease, border-color .25s ease, opacity .3s ease, transform .35s var(--ob-ease); }
.ob-cell--hover:hover, .ob-cell.is-on { background: var(--ob-cell-hover); border-color: var(--ob-line-strong); }
.ob-meta { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .04em; color: var(--ob-muted); text-transform: uppercase; }
.ob-time { font-family: var(--ob-font-mono); font-size: 12px; color: var(--ob-cyan-ink); }
.ob-big { font-size: 34px; line-height: 38px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-big small { font-size: 15px; font-weight: 400; color: var(--ob-muted); margin-left: 4px; letter-spacing: 0; }
.ob-big--coral { color: var(--ob-coral-ink); }
.ob-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-green); flex: none; }
.ob-glyph { width: 30px; height: 30px; border-radius: var(--ob-r-xs); background: var(--ob-well); display: inline-grid; place-items: center; color: var(--ob-muted); flex: none; }

/* =====================================================================
   FUNDAMENTOS
   ===================================================================== */
.ob-eyebrow { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-muted); }
.ob-display { margin: 0; font: 300 clamp(38px, 5vw, 52px)/1 var(--ob-font-display); letter-spacing: -.03em; color: var(--ob-ink); }
.ob-h1 { margin: 0; font: 400 30px/36px var(--ob-font-display); letter-spacing: -.02em; }
.ob-h2 { margin: 0; font: 500 22px/28px var(--ob-font-display); letter-spacing: -.01em; }
.ob-h3 { margin: 0; font: 500 16px/22px var(--ob-font); }
.ob-body { margin: 0; font: 400 14px/22px var(--ob-font); color: var(--ob-ink-2); }
.ob-small { margin: 0; font: 400 12.5px/18px var(--ob-font); color: var(--ob-muted); }
.ob-mono { font: 400 12.5px/20px var(--ob-font-mono); color: var(--ob-cyan-ink); background: var(--ob-cyan-soft); padding: 2px 8px; border-radius: var(--ob-r-xs); }
.ob-num { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.ob-swatches { gap: 14px; }
.ob-swatch { gap: 7px; }
.ob-swatch__chip { height: 58px; border-radius: var(--ob-r-md); box-shadow: inset 0 0 0 1px var(--ob-line-strong), inset 0 1px 0 var(--ob-edge); }
.ob-swatch__name { font: 400 11px/1.3 var(--ob-font-mono); color: var(--ob-ink-2); }
.ob-samples { gap: 16px; }
.ob-sample { font: 400 11px/1 var(--ob-font-mono); color: var(--ob-ink-2); background: var(--ob-panel); border: 1px solid var(--ob-line); }
.ob-sample--shadow-1 { box-shadow: var(--ob-shadow-1); border-radius: var(--ob-r-lg); }
.ob-sample--shadow-2 { box-shadow: var(--ob-shadow-2); border-radius: var(--ob-r-lg); }
.ob-icons { gap: 10px; }
.ob-icons__item { padding: 14px 6px 10px; border-radius: var(--ob-r-md); background: var(--ob-cell); border: 1px solid var(--ob-line); color: var(--ob-ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ob-icons__item:hover { background: var(--ob-cell-hover); color: var(--ob-cyan); border-color: var(--ob-line-strong); }
.ob-icons__item figcaption { font: 400 10.5px/1.2 var(--ob-font-mono); color: var(--ob-muted); }
.ob-icon { display: inline-grid; }

/* =====================================================================
   AÇÕES
   ===================================================================== */
.ob-btn {
  height: 36px; padding: 0 16px; border-radius: var(--ob-r-sm); border: 1px solid var(--ob-line-strong);
  background: var(--ob-cell); color: var(--ob-ink); font-size: 13px; font-weight: 500; letter-spacing: .01em;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .15s var(--ob-ease), color .2s ease;
}
.ob-btn:hover { background: var(--ob-cell-hover); border-color: var(--ob-line-hover); }
.ob-btn:active { transform: scale(.97); }
.ob-btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--ob-accent) 88%, #fff), var(--ob-accent)); color: var(--ob-on-accent); border-color: transparent;
  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--ob-accent) calc(var(--ob-glow) * 80%), transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.ob-btn--primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--ob-accent) 76%, #fff), color-mix(in srgb, var(--ob-accent) 92%, #fff)); border-color: transparent; }
.ob-btn--secondary { background: var(--ob-cell); }
.ob-btn--ghost { background: transparent; border-color: transparent; color: var(--ob-ink-2); }
.ob-btn--ghost:hover { background: var(--ob-tint); color: var(--ob-ink); border-color: transparent; }
.ob-btn--danger { background: var(--ob-coral-soft); color: var(--ob-coral-ink); border-color: color-mix(in srgb, var(--ob-coral) 40%, transparent); }
.ob-btn--danger:hover { background: color-mix(in srgb, var(--ob-coral) 22%, transparent); border-color: color-mix(in srgb, var(--ob-coral) 60%, transparent); }
.ob-btn--sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--ob-r-xs); }
.ob-btn--lg { height: 44px; padding: 0 20px; font-size: 14px; border-radius: var(--ob-r-md); }
.ob-btn--block { justify-content: center; }
.ob-btn:disabled, .ob-btn[aria-disabled="true"] { opacity: .45; transform: none; box-shadow: none; }
.ob-btn.is-loading { color: var(--ob-muted); }
.ob-spinner { border-width: 1.6px; border-color: var(--ob-line-strong); border-top-color: var(--ob-cyan); border-right-color: var(--ob-line-strong); }

.ob-iconbtn { width: 36px; height: 36px; border-radius: var(--ob-r-sm); border: 1px solid var(--ob-line-strong); background: var(--ob-cell); color: var(--ob-ink-2);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--ob-ease), box-shadow .25s ease; }
.ob-iconbtn:hover { background: var(--ob-cell-hover); color: var(--ob-ink); border-color: var(--ob-line-hover); }
.ob-iconbtn:active { transform: scale(.94); }
.ob-iconbtn--sm { width: 28px; height: 28px; border-radius: var(--ob-r-xs); }
.ob-iconbtn--filled { background: var(--ob-accent); color: var(--ob-on-accent); border-color: transparent; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ob-accent) calc(var(--ob-glow) * 80%), transparent); }
.ob-iconbtn--filled:hover { background: color-mix(in srgb, var(--ob-accent) 85%, #fff); color: var(--ob-on-accent); }
.ob-iconbtn[aria-pressed="true"] { color: var(--ob-amber-ink); background: var(--ob-amber-soft); border-color: color-mix(in srgb, var(--ob-amber) 45%, transparent); }
.ob-iconbtn[data-dot]::after { top: 5px; right: 5px; background: var(--ob-coral); box-shadow: 0 0 0 2px var(--ob-surface), 0 0 8px color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 100%), transparent); }
.ob-iconbtn:disabled { opacity: .45; cursor: not-allowed; }

.ob-seg { padding: 3px; gap: 2px; border-radius: var(--ob-r-sm); background: var(--ob-tint); border: 1px solid var(--ob-line); }
.ob-seg__opt { height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ob-ink-2); font-size: 12.5px; font-weight: 500; transition: color .2s ease; }
.ob-seg__opt:hover { color: var(--ob-ink); }
.ob-seg__opt[aria-checked="true"] { color: var(--ob-ink); }
.ob-seg__thumb { top: 3px; bottom: 3px; border-radius: 7px; background: var(--ob-tint-2); box-shadow: inset 0 1px 0 var(--ob-edge), 0 0 0 1px var(--ob-line);
  transition: transform .4s var(--ob-spring), width .4s var(--ob-spring); }

.ob-chips { gap: 8px; }
.ob-chip { height: 28px; padding: 0 12px; border-radius: var(--ob-r-pill); border: 1px solid var(--ob-line-strong); background: var(--ob-cell); color: var(--ob-ink-2); font-size: 12.5px; font-weight: 500;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease; }
button.ob-chip:hover { color: var(--ob-ink); border-color: var(--ob-line-hover); }
.ob-chip[aria-pressed="true"] { background: var(--ob-cyan-soft); color: var(--ob-cyan-ink); border-color: color-mix(in srgb, var(--ob-cyan) 45%, transparent);
  box-shadow: 0 0 14px -6px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 100%), transparent); }
.ob-chip[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-green); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-green) calc(var(--ob-glow) * 100%), transparent); }
.ob-chip--removable { padding-right: 5px; color: var(--ob-ink); }
.ob-chip--removable > .ob-icon { color: var(--ob-cyan); }
.ob-chip__x { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ob-tint); color: var(--ob-muted); transition: background-color .2s ease, color .2s ease; }
.ob-chip__x:hover { background: var(--ob-coral-soft); color: var(--ob-coral-ink); }
.ob-link { color: var(--ob-cyan-ink); text-decoration: none; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--ob-cyan) 40%, transparent); transition: border-color .2s ease, color .2s ease; }
.ob-link:hover { border-bottom-color: currentColor; }
.ob-link--quiet { color: var(--ob-ink-2); border-bottom-color: var(--ob-line-strong); }
.ob-link--quiet:hover { color: var(--ob-ink); }

/* =====================================================================
   FORMULÁRIOS — campo com brilho de foco
   ===================================================================== */
.ob-field__label { font-size: 12px; font-weight: 500; color: var(--ob-ink-2); letter-spacing: .01em; }
.ob-field__hint { font-size: 12px; color: var(--ob-muted); }
.ob-field__error { font-size: 12px; color: var(--ob-coral-ink); }
.ob-input, .ob-search, .ob-select__btn, .ob-textarea {
  border-radius: var(--ob-r-sm); background: var(--ob-field); border: 1px solid var(--ob-line-strong); color: var(--ob-ink);
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.ob-input, .ob-search { height: 38px; padding: 0 12px; color: var(--ob-muted); }
.ob-input input, .ob-search input { color: var(--ob-ink); font-size: 13px; }
.ob-input input::placeholder, .ob-search input::placeholder, .ob-textarea::placeholder { color: var(--ob-muted); }
.ob-input:hover, .ob-search:hover, .ob-select__btn:hover, .ob-textarea:hover { border-color: var(--ob-line-hover); }
.ob-input:focus-within, .ob-search:focus-within, .ob-textarea:focus, .ob-select.is-open .ob-select__btn {
  border-color: color-mix(in srgb, var(--ob-cyan) 70%, transparent); color: var(--ob-cyan);
  box-shadow: 0 0 0 3px var(--ob-cyan-soft), 0 0 18px -4px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 50%), transparent); outline: none;
}
.ob-input :focus-visible, .ob-search :focus-visible { outline: 0; }
.ob-field.is-invalid .ob-input { border-color: color-mix(in srgb, var(--ob-coral) 75%, transparent); box-shadow: 0 0 0 3px var(--ob-coral-soft); color: var(--ob-coral); }
.ob-input:has(input:disabled) { opacity: .55; background: transparent; border-style: dashed; }
.ob-input input:disabled { cursor: not-allowed; }
.ob-textarea { padding: 10px 12px; font-size: 13px; line-height: 1.55; min-height: 92px; }
.ob-select__btn { height: 38px; padding: 0 12px; font-size: 13px; color: var(--ob-ink); }
.ob-select__btn > .ob-icon { color: var(--ob-muted); transition: transform .3s var(--ob-ease), color .2s ease; }
.ob-select.is-open .ob-select__btn > .ob-icon { transform: rotate(180deg); color: var(--ob-cyan); }
.ob-select__list { padding: 6px; border-radius: var(--ob-r-md); background: var(--ob-pop); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop), inset 0 1px 0 var(--ob-edge);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .18s ease, transform .25s var(--ob-ease), visibility 0s .25s; }
.ob-select.is-open .ob-select__list { transform: none; transition: opacity .18s ease, transform .3s var(--ob-spring), visibility 0s; }
.ob-select__opt { display: flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--ob-ink-2); font-size: 13px; font-weight: 500; outline: 0; }
.ob-select__opt:hover, .ob-select__opt:focus-visible { background: var(--ob-tint); color: var(--ob-ink); }
.ob-select__opt[aria-selected="true"] { color: var(--ob-ink); }
.ob-select__opt[aria-selected="true"]::after { content: ""; margin-left: auto; width: 5px; height: 9px; border: solid var(--ob-cyan); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -1px); }
.ob-kbd { font: 400 11px var(--ob-font-mono); color: var(--ob-muted); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--ob-line-strong); background: var(--ob-tint); }

.ob-check, .ob-radio, .ob-switch { font-size: 13px; color: var(--ob-ink-2); user-select: none; }
.ob-check:has(input:checked), .ob-radio:has(input:checked), .ob-switch:has(input:checked) { color: var(--ob-ink); }
.ob-check__box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--ob-muted); transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease; }
.ob-check__box::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid var(--ob-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ob-spring); }
.ob-check input:checked + .ob-check__box { background: var(--ob-accent); border-color: var(--ob-accent); box-shadow: 0 0 10px -2px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 70%), transparent); }
.ob-check input:checked + .ob-check__box::after { transform: rotate(45deg) scale(1); }
.ob-check input:focus-visible + .ob-check__box, .ob-radio input:focus-visible + .ob-radio__dot, .ob-switch input:focus-visible + .ob-switch__track { outline: 2px solid var(--ob-accent); outline-offset: 2px; }
.ob-radio__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ob-muted); transition: border-color .2s ease; }
.ob-radio__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ob-accent); transform: scale(0); transition: transform .3s var(--ob-spring); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 100%), transparent); }
.ob-radio input:checked + .ob-radio__dot { border-color: var(--ob-accent); }
.ob-radio input:checked + .ob-radio__dot::after { transform: scale(1); }
.ob-switch__track { width: 36px; height: 20px; border-radius: 999px; background: var(--ob-tint-2); border: 1px solid var(--ob-line-strong); transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ob-switch__thumb { left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ob-muted); transform: translateY(-50%); transition: transform .35s var(--ob-spring), background-color .25s ease; }
.ob-switch input:checked + .ob-switch__track { background: color-mix(in srgb, var(--ob-cyan) 28%, transparent); border-color: color-mix(in srgb, var(--ob-cyan) 60%, transparent);
  box-shadow: 0 0 14px -3px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 60%), transparent); }
.ob-switch input:checked + .ob-switch__track .ob-switch__thumb { transform: translate(16px, -50%); background: var(--ob-accent); }
.ob-switch input:disabled ~ * { opacity: .45; cursor: not-allowed; }

.ob-range { font-size: 12px; }
.ob-range__label { font-size: 12px; font-weight: 500; color: var(--ob-ink-2); }
.ob-range__out { font: 500 13px var(--ob-font); color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.ob-range input { -webkit-appearance: none; appearance: none; height: 20px; background: transparent; }
.ob-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ob-cyan-deep), var(--ob-cyan) calc(var(--p, .5) * 100%), var(--ob-tint-2) calc(var(--p, .5) * 100%)); }
.ob-range input::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ob-cyan-deep), var(--ob-cyan) calc(var(--p, .5) * 100%), var(--ob-tint-2) calc(var(--p, .5) * 100%)); }
.ob-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 4px var(--ob-cyan-soft), 0 0 14px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 90%), transparent), 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ob-spring); }
.ob-range input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 4px var(--ob-cyan-soft), 0 0 14px var(--ob-cyan); }
.ob-range input:active::-webkit-slider-thumb { transform: scale(1.2); }
.ob-range input:focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 4px; border-radius: 4px; }
.ob-stepper { align-self: flex-start; padding: 3px; gap: 2px; border-radius: var(--ob-r-sm); background: var(--ob-field); border: 1px solid var(--ob-line-strong); }
.ob-stepper__btn { width: 30px; height: 30px; border: 0; border-radius: 7px; background: var(--ob-tint); color: var(--ob-ink-2); transition: background-color .2s ease, color .2s ease, transform .15s var(--ob-ease); }
.ob-stepper__btn:hover { background: var(--ob-tint-2); color: var(--ob-cyan); }
.ob-stepper__btn:active { transform: scale(.9); }
.ob-stepper__input { width: 46px; border: 0; background: transparent; color: var(--ob-ink); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ob-stepper__input:focus-visible { outline: none; }
.ob-stepper.is-bump .ob-stepper__input { animation: ob-tick .6s var(--ob-ease); }

/* =====================================================================
   NAVEGAÇÃO — abas em pílula com ponto verde, indicador que desliza
   ===================================================================== */
.ob-topbar { padding: 10px 12px 10px 16px; border-radius: var(--ob-r-lg); background: var(--ob-panel); border: 1px solid var(--ob-line);
  -webkit-backdrop-filter: blur(var(--ob-blur)); backdrop-filter: blur(var(--ob-blur)); box-shadow: var(--ob-shadow); }
.ob-brand { gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ob-ink); }
.ob-brand__tail { font-weight: 300; margin-left: -6px; }
.ob-brand__mark { position: relative; width: 30px; height: 30px; border-radius: 50%; color: var(--ob-ink); isolation: isolate; }
.ob-brand__mark::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 210deg, var(--ob-cyan), transparent 40%, var(--ob-coral) 70%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.ob-topbar__nav { justify-content: safe center; gap: 2px; padding: 4px; border-radius: var(--ob-r-md); background: var(--ob-tint); border: 1px solid var(--ob-line); flex: 0 1 auto; margin: 0 auto; }
.ob-topbar__link { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: var(--ob-r-sm); color: var(--ob-ink-2); font-size: 13px; font-weight: 500; transition: color .2s ease, background-color .25s ease; }
.ob-topbar__link:hover { color: var(--ob-ink); }
.ob-topbar__link[aria-current="page"] { color: var(--ob-ink); background: var(--ob-tint-2); box-shadow: inset 0 1px 0 var(--ob-edge); }
.ob-topbar__link[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-green); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-green) calc(var(--ob-glow) * 100%), transparent); }
.ob-topbar__actions .ob-avatar { margin-left: 4px; }

.ob-tabs { padding: 4px; gap: 2px; border-radius: var(--ob-r-md); background: var(--ob-tint); border: 1px solid var(--ob-line); isolation: isolate; width: max-content; }
.ob-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink-2); font-size: 13px; font-weight: 500; transition: color .2s ease; }
.ob-tab:hover { color: var(--ob-ink); }
.ob-tab[aria-selected="true"] { color: var(--ob-ink); }
.ob-tab[aria-selected="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-green); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-green) calc(var(--ob-glow) * 100%), transparent); }
.ob-tabs__ink { top: 4px; bottom: 4px; z-index: 0; border-radius: var(--ob-r-sm); background: var(--ob-tint-2); box-shadow: inset 0 1px 0 var(--ob-edge), 0 0 0 1px var(--ob-line);
  transition: transform .4s var(--ob-spring), width .4s var(--ob-spring); }
.ob-tabpanel { padding: 14px 4px 0; }

.ob-crumbs { font-size: 12.5px; color: var(--ob-muted); }
.ob-crumbs ol { gap: 6px; }
.ob-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.ob-crumbs li + li::before { content: "/"; color: var(--ob-faint); }
.ob-crumbs a { color: var(--ob-ink-2); text-decoration: none; border-radius: 4px; }
.ob-crumbs a:hover { color: var(--ob-cyan-ink); }
.ob-crumbs [aria-current] { color: var(--ob-ink); font-weight: 500; }

.ob-pager { gap: 4px; }
.ob-pager__btn { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--ob-ink-2); font: 500 12.5px var(--ob-font); font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ob-pager__btn:hover:not(:disabled) { background: var(--ob-tint); color: var(--ob-ink); }
.ob-pager__btn[aria-current="page"] { background: var(--ob-cyan-soft); color: var(--ob-cyan-ink); border-color: color-mix(in srgb, var(--ob-cyan) 40%, transparent); }
.ob-pager__btn:disabled { opacity: .35; }
.ob-pager__gap { color: var(--ob-muted); padding: 0 4px; }

.ob-steps { gap: 8px; }
.ob-step { gap: 8px; }
.ob-step:not(:last-child)::after { content: ""; flex: 1; min-width: 12px; height: 1px; background: var(--ob-line-strong); }
.ob-step.is-done:not(:last-child)::after { background: linear-gradient(90deg, var(--ob-cyan), color-mix(in srgb, var(--ob-cyan) 30%, transparent)); box-shadow: 0 0 6px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 60%), transparent); }
.ob-step__dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--ob-line-strong); background: var(--ob-cell); font-size: 12px; font-weight: 500; color: var(--ob-ink-2); }
.ob-step.is-done .ob-step__dot { background: var(--ob-cyan-soft); border-color: color-mix(in srgb, var(--ob-cyan) 55%, transparent); color: var(--ob-cyan-ink); }
.ob-step.is-current .ob-step__dot { border-color: var(--ob-cyan); color: var(--ob-ink); box-shadow: 0 0 0 4px var(--ob-cyan-soft), 0 0 14px -2px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 80%), transparent); }
.ob-step__label { font-size: 12.5px; font-weight: 500; color: var(--ob-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ob-step.is-done .ob-step__label { color: var(--ob-ink-2); }
.ob-step.is-current .ob-step__label { color: var(--ob-ink); }

.ob-dock { padding: 6px; gap: 2px; border-radius: var(--ob-r-lg); background: var(--ob-panel); border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow);
  -webkit-backdrop-filter: blur(var(--ob-blur)); backdrop-filter: blur(var(--ob-blur)); }
.ob-dock__item { padding: 8px 0 6px; border: 0; border-radius: var(--ob-r-md); background: transparent; color: var(--ob-ink-2); transition: color .2s ease; }
.ob-dock__item:hover { color: var(--ob-ink); }
.ob-dock__item[aria-current="page"] { color: var(--ob-cyan-ink); }
.ob-dock__label { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.ob-dock__ink { top: 6px; bottom: 6px; border-radius: var(--ob-r-md); background: var(--ob-tint-2); box-shadow: inset 0 1px 0 var(--ob-edge);
  transition: transform .45s var(--ob-spring), width .45s var(--ob-spring); }

.ob-navlist { gap: 2px; padding: 8px; border-radius: var(--ob-r-lg); background: var(--ob-panel); border: 1px solid var(--ob-line); }
.ob-navlist__item { position: relative; height: 38px; padding: 0 10px; border-radius: var(--ob-r-sm); color: var(--ob-ink-2); font-size: 13px; font-weight: 500; transition: color .2s ease, background-color .25s ease; }
.ob-navlist__item:hover { color: var(--ob-ink); background: var(--ob-tint); }
.ob-navlist__item[aria-current="page"] { color: var(--ob-ink); background: var(--ob-tint-2); box-shadow: inset 0 1px 0 var(--ob-edge); }
.ob-navlist__item[aria-current="page"] > .ob-icon { color: var(--ob-cyan); }
.ob-navlist__item[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ob-cyan);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 100%), transparent); }
.ob-navlist__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-navlist__count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 600; background: var(--ob-tint-2); color: var(--ob-ink); }
.ob-navlist__item[aria-current="page"] .ob-navlist__count { background: var(--ob-cyan-soft); color: var(--ob-cyan-ink); }

/* contorno de um desencontro do contrato: o núcleo some com contadores/unidades vazios (display:none) e o
   verificador acusa tamanho zero. Aqui eles ficam presentes com 1 px e sem ocupar espaço visível. */
.ob-navlist__count:empty, .ob-kpi__pre:empty, .ob-kpi__unit:empty { display: inline-block; width: 1px; min-width: 0; height: 1px; padding: 0; margin: 0 -1px 0 0; background: none; overflow: hidden; }

/* =====================================================================
   EXIBIÇÃO
   ===================================================================== */
.ob-card { gap: 12px; padding: 18px; border-radius: var(--ob-r-lg); background: linear-gradient(180deg, var(--ob-panel-hi), transparent 40%), var(--ob-panel);
  border: 1px solid var(--ob-line); box-shadow: var(--ob-shadow); -webkit-backdrop-filter: blur(var(--ob-blur)); backdrop-filter: blur(var(--ob-blur)); }
.ob-card__head .ob-iconbtn { background: transparent; border-color: transparent; }
.ob-card__foot { padding-top: 12px; border-top: 1px solid var(--ob-line); }
.ob-card--accent { overflow: hidden; border-color: color-mix(in srgb, var(--ob-coral) 30%, transparent);
  background: radial-gradient(120% 80% at 80% 125%, color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 55%), transparent), color-mix(in srgb, var(--ob-coral-deep) calc(var(--ob-glow) * 18%), transparent) 48%, transparent 72%), var(--ob-surface); }
.ob-card--accent .ob-eyebrow { color: var(--ob-coral-ink); }

.ob-tag { height: 22px; padding: 0 9px; border-radius: var(--ob-r-pill); font-size: 11.5px; font-weight: 500; background: var(--ob-cyan-soft); color: var(--ob-cyan-ink); border: 1px solid color-mix(in srgb, var(--ob-cyan) 24%, transparent); }
.ob-tag--ok { background: var(--ob-green-soft); color: var(--ob-green-ink); border-color: color-mix(in srgb, var(--ob-green) 24%, transparent); }
.ob-tag--warn { background: var(--ob-amber-soft); color: var(--ob-amber-ink); border-color: color-mix(in srgb, var(--ob-amber) 26%, transparent); }
.ob-tag--danger { background: var(--ob-coral-soft); color: var(--ob-coral-ink); border-color: color-mix(in srgb, var(--ob-coral) 28%, transparent); }
.ob-badge { min-width: 18px; height: 18px; justify-content: center; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--ob-tint-2); color: var(--ob-ink); }
.ob-badge--accent { background: var(--ob-accent); color: var(--ob-on-accent); }
.ob-badge--danger { background: var(--ob-danger); color: var(--ob-on-danger); }
.ob-status { gap: 7px; font-size: 12.5px; color: var(--ob-ink); }
.ob-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ob-muted); flex: none; }
.ob-status--ok::before { background: var(--ob-green); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-green) calc(var(--ob-glow) * 100%), transparent); }
.ob-status--warn::before { background: var(--ob-amber); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-amber) calc(var(--ob-glow) * 100%), transparent); }
.ob-status--danger::before { background: var(--ob-coral); box-shadow: 0 0 8px color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 100%), transparent); }
.ob-status--muted { color: var(--ob-ink-2); }

.ob-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ob-av-ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--av, var(--ob-cyan)) var(--ob-av-a), var(--ob-av-mix-a)), color-mix(in srgb, var(--av, var(--ob-cyan)) var(--ob-av-b), #000)); }
.ob-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.ob-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.ob-avatar--more { background: var(--ob-tint-2); color: var(--ob-ink); }
.ob-avatars > .ob-avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--ob-surface); transition: transform .3s var(--ob-spring); }
.ob-avatars > .ob-avatar:first-child { margin-left: 0; }
.ob-avatars > .ob-avatar:hover { transform: translateY(-3px); z-index: 1; }
.ob-person { gap: 10px; }
.ob-person__name { font-size: 13px; font-weight: 500; color: var(--ob-ink); }
.ob-person__meta { font-size: 12px; color: var(--ob-muted); }

.ob-alert { position: relative; padding: 12px 14px; border-radius: var(--ob-r-md); background: var(--ob-cell); border: 1px solid var(--ob-line); --tone: var(--ob-info); isolation: isolate; }
.ob-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--tone); box-shadow: 0 0 14px var(--tone); }
.ob-alert::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--tone) 14%, transparent), transparent 70%); }
.ob-alert > .ob-icon { color: var(--tone); margin-top: 1px; }
.ob-alert__title { display: block; font-size: 13px; font-weight: 600; margin: 0 0 2px; color: var(--ob-ink); }
.ob-alert__text { font-size: 12.5px; color: var(--ob-ink-2); margin: 0; line-height: 1.5; }
.ob-alert > .ob-iconbtn { margin: -4px -6px 0 0; background: transparent; border-color: transparent; }
.ob-alert--info { --tone: var(--ob-info); }
.ob-alert--ok { --tone: var(--ob-ok); }
.ob-alert--warn { --tone: var(--ob-warn); }
.ob-alert--danger { --tone: var(--ob-danger); }

.ob-empty { gap: 6px; padding: 24px 16px; }
.ob-empty__art { position: relative; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; border: 1px dashed var(--ob-line-hover); color: var(--ob-ink-2); }
.ob-empty__art::after { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--ob-cyan);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 100%), transparent); transform-origin: 3.5px 40px; }
.ob-empty__title { font-size: 15px; font-weight: 500; margin: 0; color: var(--ob-ink); }
.ob-empty__text { font-size: 13px; color: var(--ob-ink-2); margin: 0 0 8px; max-width: 36ch; }

.ob-skel-group { padding: 14px; border-radius: var(--ob-r-md); background: var(--ob-cell); border: 1px solid var(--ob-line); }
.ob-skel { border-radius: 6px; background: linear-gradient(90deg, var(--ob-tint) 25%, var(--ob-tint-2) 45%, var(--ob-tint) 65%); background-size: 300% 100%; }
.ob-skel--line { height: 10px; }
.ob-skel--circle { width: 36px; height: 36px; }
.ob-skel--block { height: 92px; border-radius: var(--ob-r-sm); }
.ob-tip { padding: 8px 10px; border-radius: var(--ob-r-sm); background: var(--ob-pop); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop);
  font: 500 12px/1.45 var(--ob-font); color: var(--ob-ink); transform: translateY(4px); transition: opacity .15s ease, transform .2s var(--ob-ease); }
.ob-tip.is-on { transform: none; }
.ob-tip b { font-weight: 600; }

/* =====================================================================
   INDICADORES
   ===================================================================== */
.ob-kpis { gap: 12px; }
.ob-kpi { position: relative; gap: 6px; padding: 14px 14px 0; overflow: hidden; border-radius: var(--ob-r-md); background: var(--ob-cell); border: 1px solid var(--ob-line); }
.ob-kpi__label { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-muted); }
.ob-kpi__row { justify-content: flex-start; }
.ob-kpi__value { font-size: 28px; line-height: 34px; font-weight: 300; letter-spacing: -.02em; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.ob-kpi__pre { font-size: 14px; font-weight: 400; color: var(--ob-muted); margin-right: 4px; letter-spacing: 0; }
.ob-kpi__unit { font-size: 14px; font-weight: 400; color: var(--ob-muted); margin-left: 3px; letter-spacing: 0; }
.ob-delta { font-size: 12px; font-weight: 600; }
.ob-delta::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.ob-delta--up { color: var(--ob-green-ink); } .ob-delta--up::before { border-bottom: 5px solid currentColor; }
.ob-delta--down { color: var(--ob-coral-ink); } .ob-delta--down::before { border-top: 5px solid currentColor; }
.ob-delta--flat { color: var(--ob-ink-2); } .ob-delta--flat::before { width: 8px; height: 2px; border: 0; background: currentColor; border-radius: 1px; }
.ob-spark { height: 36px; }
.ob-kpi .ob-spark { margin: 4px -14px 0; width: calc(100% + 28px); height: 44px; }
.ob-spark__line { stroke: var(--sc, var(--ob-series-1)); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sc, var(--ob-series-1)) calc(var(--ob-glow) * 60%), transparent)); }
.ob-spark__area { fill: var(--sc, var(--ob-series-1)); opacity: .12; }
.ob-spark__dot { fill: var(--sc, var(--ob-series-1)); }
.ob-kpi:has(.ob-delta--down) .ob-spark { --sc: var(--ob-coral); }
.ob-kpi:has(.ob-delta--flat) .ob-spark { --sc: var(--ob-amber); }

.ob-progress-row { gap: 6px 12px; font-size: 12.5px; color: var(--ob-ink-2); }
.ob-progress-row .ob-num { color: var(--ob-ink); }
.ob-progress { height: 6px; border-radius: 6px; background: var(--ob-well); }
.ob-progress__bar { position: relative; overflow: hidden; border-radius: inherit; min-width: 2px; --c: var(--ob-cyan);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, transparent), var(--c)); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--c) calc(var(--ob-glow) * 100%), transparent); transition: width 1.1s var(--ob-ease); }
.ob-progress__bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--ob-sheen), transparent); transform: translateX(-100%); }
.ob-progress-row:nth-child(2) .ob-progress__bar { --c: var(--ob-coral); }
.ob-progress-row:nth-child(3) .ob-progress__bar { --c: var(--ob-amber); }

.ob-ring { width: 120px; height: 120px; }
.ob-ring--sm { width: 84px; height: 84px; }
.ob-ring__track { stroke: var(--ob-well); }
.ob-ring__val { stroke: var(--ob-green); stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ob-green) calc(var(--ob-glow) * 90%), transparent)); }
.ob-ring--sm .ob-ring__val { stroke: var(--ob-cyan); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 90%), transparent)); }
.ob-ring__label b { font-size: 22px; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-ring__label span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-muted); margin-top: 2px; }
.ob-ring--sm .ob-ring__label b { font-size: 16px; }
.ob-ring--sm .ob-ring__label span { font-size: 9px; }

.ob-gauge { max-width: 260px; width: 100%; margin: 0 auto; }
.ob-gauge__track { stroke: var(--ob-well); stroke-width: 1.2; }
.ob-gauge__val { stroke: var(--ob-cyan); stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 100%), transparent)); }
.ob-gauge__tick { stroke: var(--ob-line-hover); stroke-width: 1.2; }
.ob-gauge__needle line { stroke: var(--ob-ink); stroke-width: 1.4; stroke-linecap: round; }
.ob-gauge__needle circle { fill: var(--ob-surface); stroke: var(--ob-cyan); stroke-width: 1.4; }
.ob-gauge__readout { margin-top: -30px; }
.ob-gauge__value { font-size: 26px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-gauge__label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-muted); margin-top: 2px; }

/* =====================================================================
   GRÁFICOS — fio fino que brilha
   ===================================================================== */
.ob-chart { font-family: var(--ob-font); }
.ob-chart__grid { stroke: var(--ob-line); }
.ob-chart__axis { fill: var(--ob-muted); font-size: 11px; font-family: var(--ob-font); }
.ob-chart__line { stroke-width: 1.8; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--s) calc(var(--ob-glow) * 60%), transparent)); }
.ob-chart__series:nth-of-type(3) .ob-chart__line { stroke-dasharray: 5 4; filter: none; }
.ob-chart__area { opacity: .16; }
.ob-chart__dot { fill: var(--ob-surface); stroke: var(--s); stroke-width: 2; }
.ob-chart__hover { fill: var(--ob-cv-hi); stroke: var(--s); stroke-width: 2; }
.ob-chart__cross { stroke: var(--ob-line-hover); stroke-dasharray: 3 3; }
.ob-chart__bar { transition: y .6s var(--ob-ease), height .6s var(--ob-ease), opacity .2s ease, filter .2s ease; }
.ob-chart.is-hover .ob-chart__bar:not(.is-hot) { opacity: .35; }
.ob-chart__bar.is-hot { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--s) calc(var(--ob-glow) * 100%), transparent)); }
.ob-chart__tip { min-width: 130px; padding: 8px 10px; border-radius: var(--ob-r-sm); background: var(--ob-pop); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop);
  font-size: 12px; color: var(--ob-ink-2); transition: opacity .15s ease; }
.ob-chart__tip b { display: block; font-weight: 600; margin-bottom: 4px; color: var(--ob-ink); }
.ob-chart__tip span { line-height: 20px; }
.ob-chart__tip i { width: 8px; height: 2px; border-radius: 2px; }
.ob-chart__tip em { margin-left: auto; padding-left: 12px; font-style: normal; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.ob-legend { margin-top: 12px; gap: 6px 18px; font-size: 12px; color: var(--ob-ink-2); }
.ob-legend__item { transition: color .2s ease, opacity .2s ease; }
.ob-legend__item em { font-style: normal; margin-left: 4px; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.ob-legend__item.is-hot { color: var(--ob-ink); }
.ob-legend__swatch { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 6px color-mix(in srgb, var(--s) calc(var(--ob-glow) * 70%), transparent); }
.ob-donut { gap: 14px; }
.ob-donut__plot { width: 176px; }
.ob-donut__track { stroke: var(--ob-well); }
.ob-donut__seg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--s) calc(var(--ob-glow) * 80%), transparent)); transition: stroke-dasharray 1s var(--ob-ease), stroke-dashoffset 1s var(--ob-ease), stroke-width .25s var(--ob-spring), opacity .2s ease; }
.ob-donut__seg.is-hot { stroke-width: 10; }
.ob-donut.is-hover .ob-donut__seg:not(.is-hot) { opacity: .35; }
.ob-donut__center { gap: 2px; }
.ob-donut__value { font-size: 26px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-donut__label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ob-muted); max-width: 100px; }

/* =====================================================================
   DADOS
   ===================================================================== */
.ob-table-wrap { border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-cell); }
.ob-table { font-size: 13px; min-width: 560px; }
.ob-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ob-ink-2); padding: 11px 14px; border-bottom: 1px solid var(--ob-line); white-space: nowrap; background: var(--ob-tint); }
.ob-table th.is-num { text-align: right; }
.ob-table td { padding: 10px 14px; border-bottom: 1px solid var(--ob-line); color: var(--ob-ink); white-space: nowrap; }
.ob-table tbody tr { transition: background-color .2s ease; }
.ob-table tbody tr:hover { background: var(--ob-tint); }
.ob-table tbody tr:last-child td { border-bottom: 0; }
.ob-table tr.is-selected { background: var(--ob-cyan-soft); }
.ob-table tr.is-selected:hover { background: color-mix(in srgb, var(--ob-cyan) 18%, transparent); }
.ob-table th[data-sort]:hover { color: var(--ob-ink); }
.ob-table th[data-sort]::after { content: ""; display: inline-block; margin-left: 6px; vertical-align: 2px; border: 3.5px solid transparent; border-top-color: currentColor; opacity: .35; }
.ob-table th[aria-sort="ascending"]::after { border-top-color: transparent; border-bottom-color: var(--ob-cyan); vertical-align: 5px; opacity: 1; }
.ob-table th[aria-sort="descending"]::after { border-top-color: var(--ob-cyan); opacity: 1; }
.ob-table th[aria-sort="ascending"], .ob-table th[aria-sort="descending"] { color: var(--ob-ink); }
.ob-table__sel input, .ob-table__all { width: 15px; height: 15px; accent-color: var(--ob-accent); cursor: pointer; margin: 0; }
.ob-table td .ob-iconbtn { background: transparent; border-color: transparent; }
.ob-table .ob-spark { display: inline-block; width: 88px; height: 24px; vertical-align: middle; }

.ob-list { display: flex; flex-direction: column; }
.ob-list__item { padding: 10px 2px; border-bottom: 1px solid var(--ob-line); }
.ob-list__item:last-child { border-bottom: 0; }
.ob-list__lead { width: 34px; height: 34px; border-radius: var(--ob-r-sm); background: var(--ob-well); color: var(--ob-cyan); border: 1px solid var(--ob-line); }
.ob-list__title { font-size: 13.5px; font-weight: 500; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-list__meta { font-size: 12px; color: var(--ob-muted); }
.ob-list__trail { font: 400 11.5px var(--ob-font-mono); color: var(--ob-ink-2); padding: 3px 8px; border-radius: var(--ob-r-pill); background: var(--ob-chip); }

.ob-feed { display: flex; flex-direction: column; }
.ob-feed__item { gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ob-line); font-size: 12.5px; }
.ob-feed__item:last-child { border-bottom: 0; }
.ob-feed__mark { width: 22px; height: 22px; border-radius: 50%; color: var(--tone, var(--ob-cyan)); background: color-mix(in srgb, var(--tone, var(--ob-cyan)) 14%, transparent);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--tone, var(--ob-cyan)) calc(var(--ob-glow) * 60%), transparent); }
.ob-feed__mark--ok { --tone: var(--ob-ok); }
.ob-feed__mark--info { --tone: var(--ob-info); }
.ob-feed__mark--warn { --tone: var(--ob-warn); }
.ob-feed__mark--danger { --tone: var(--ob-danger); }
.ob-feed__text b { font-weight: 500; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-feed__text span { font-size: 11.5px; color: var(--ob-muted); }
.ob-feed__time { font-family: var(--ob-font-mono); font-size: 11px; color: var(--ob-muted); }

/* =====================================================================
   SOBREPOSIÇÕES
   ===================================================================== */
.ob-modal__scrim, .ob-sheet__scrim { background: var(--ob-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.ob-modal.is-open .ob-modal__scrim, .ob-sheet.is-open .ob-sheet__scrim { opacity: 1; }
.ob-modal__box { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--ob-r-xl); color: var(--ob-ink);
  background: radial-gradient(120% 60% at 50% -10%, var(--ob-cyan-soft), transparent 60%), var(--ob-pop); border: 1px solid var(--ob-line-strong);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), inset 0 1px 0 var(--ob-edge);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .25s ease, transform .4s var(--ob-spring); }
.ob-modal.is-open .ob-modal__box { opacity: 1; transform: none; }
.ob-modal__head { align-items: flex-start; }
.ob-modal__title { margin: 0; font-size: 18px; font-weight: 500; line-height: 24px; }
.ob-modal__text { color: var(--ob-ink-2); font-size: 13.5px; line-height: 1.6; margin: 0; }
.ob-modal__foot { margin-top: 10px; }
.ob-modal__head .ob-iconbtn, .ob-sheet__head .ob-iconbtn { background: transparent; border-color: transparent; }
.ob-sheet__panel { padding: 10px 22px 22px; border-radius: var(--ob-r-xl) var(--ob-r-xl) 0 0; background: var(--ob-pop); border: 1px solid var(--ob-line-strong); border-bottom: 0;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .55), inset 0 1px 0 var(--ob-edge); transform: translateY(100%); transition: transform .45s var(--ob-spring); color: var(--ob-ink); }
.ob-sheet.is-open .ob-sheet__panel { transform: none; }
.ob-sheet__grip { width: 40px; height: 4px; border-radius: 99px; background: var(--ob-line-hover); }
.ob-sheet__head { margin: 12px 0 14px; }
.ob-sheet__title { margin: 0; font-size: 17px; font-weight: 500; }
.ob-sheet__foot { margin-top: 20px; }
.ob-menu { padding: 6px; gap: 1px; border-radius: var(--ob-r-md); background: var(--ob-pop); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop), inset 0 1px 0 var(--ob-edge);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .18s ease, transform .25s var(--ob-ease), visibility 0s .25s; }
.ob-menuwrap.is-open .ob-menu { transform: none; transition: opacity .18s ease, transform .3s var(--ob-spring), visibility 0s; }
.ob-menu__item { height: 34px; padding: 0 10px; border-radius: 8px; border: 0; background: none; color: var(--ob-ink-2); font: 500 13px var(--ob-font); white-space: nowrap; outline: 0; }
.ob-menu__item:hover, .ob-menu__item:focus-visible { background: var(--ob-tint); color: var(--ob-ink); }
.ob-menu__item > .ob-icon { color: var(--ob-muted); }
.ob-menu__item:hover > .ob-icon, .ob-menu__item:focus-visible > .ob-icon { color: var(--ob-cyan); }
.ob-menu__item--danger, .ob-menu__item--danger > .ob-icon { color: var(--ob-coral-ink); }
.ob-menu__item--danger:hover, .ob-menu__item--danger:focus-visible { background: var(--ob-coral-soft); color: var(--ob-coral-ink); }
.ob-menu__item--danger:hover > .ob-icon { color: var(--ob-coral-ink); }
.ob-menu__sep { background: var(--ob-line); margin: 5px 4px; }
.ob-toasts { right: 18px; bottom: 18px; gap: 10px; }
.ob-toast { padding: 12px 10px 14px 14px; border-radius: var(--ob-r-md); background: var(--ob-pop); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ob-ink); --tone: var(--ob-info); animation: ob-toast-in .45s var(--ob-spring); }
.ob-toast > .ob-icon { color: var(--tone); margin-top: 1px; }
.ob-toast--ok { --tone: var(--ob-ok); } .ob-toast--info { --tone: var(--ob-info); } .ob-toast--warn { --tone: var(--ob-warn); } .ob-toast--danger { --tone: var(--ob-danger); }
.ob-toast__body { gap: 2px; }
.ob-toast__title { font-size: 13px; font-weight: 600; }
.ob-toast__text { font-size: 12.5px; color: var(--ob-ink-2); }
.ob-toast__bar { background: var(--tone); opacity: 1; box-shadow: 0 0 8px var(--tone); }
.ob-toast .ob-iconbtn { background: transparent; border-color: transparent; margin: -4px 0 0; }

/* =====================================================================
   PEÇAS — marcadores miúdos
   ===================================================================== */
/* Medidor segmentado: |||||||| */
.ob-meter { display: inline-flex; gap: 2px; align-items: center; height: 10px; }
.ob-meter i { width: 2px; height: 100%; border-radius: 1px; background: var(--ob-faint); transition: background-color .3s ease; }
.ob-meter i.on { background: var(--ob-ink); }
/* Faixa de risco listrada: ////////  — cor pela proporção de cada nível */
.ob-risk { display: inline-flex; gap: 3px; height: 12px; align-items: center; }
.ob-risk i { width: 3px; height: 100%; border-radius: 1px; transform: skewX(-24deg); background: var(--ob-faint); }
.ob-risk i.c { background: var(--ob-coral); } .ob-risk i.a { background: var(--ob-amber); } .ob-risk i.g { background: var(--ob-cyan); }
/* Contador com ponto de status */
.ob-count { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 7px; flex: none;
  border-radius: var(--ob-r-xs); background: var(--ob-chip); border: 1px solid var(--ob-line);
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
.ob-count::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ob-coral); }
.ob-count--ok::before { background: var(--ob-green); }
.ob-count--warn::before { background: var(--ob-amber); }
/* Barra de proporção com rótulo de porcentagem */
.ob-bar { display: grid; grid-template-columns: 40px 1fr 88px; align-items: center; gap: 12px; height: 30px; padding: 0 12px 0 6px; border-radius: var(--ob-r-sm); background: var(--ob-tint); }
.ob-bar__pct { display: inline-flex; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ob-ink); padding: 2px 0; border-radius: 5px; background: var(--ob-tint-2); }
.ob-bar__label { font-size: 13px; color: var(--ob-ink-2); }
.ob-bar__track { height: 3px; border-radius: 2px; background: var(--ob-well); overflow: hidden; }
.ob-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--ob-ink); width: 0; transition: width 1s var(--ob-ease); }

/* Nó de origem (datacenter) */
.ob-node { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ob-node__head { display: flex; align-items: center; gap: 10px; }
.ob-node__code { display: inline-flex; align-items: center; justify-content: center; height: 18px; min-width: 26px; padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .06em; background: var(--ob-tint-2); color: var(--ob-ink-2); flex: none; }
.ob-node__name { font-size: 14px; font-weight: 500; }
.ob-node__rate { display: flex; align-items: center; gap: 6px; }
.ob-node__tools { margin-left: auto; display: flex; gap: 6px; color: var(--ob-muted); }
.ob-node__det { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px; font-size: 13px; color: var(--ob-ink-2); }
.ob-node__n { color: var(--ob-ink); font-weight: 500; font-variant-numeric: tabular-nums; display: inline-block; }
/* Destino (torre / estação) */
.ob-target { display: flex; align-items: center; gap: 12px; }
.ob-target__icon { width: 30px; height: 30px; border-radius: var(--ob-r-xs); background: var(--ob-well); display: flex; align-items: center; justify-content: center; color: var(--ob-ink-2); flex: none; }
.ob-target__text { flex: 1; min-width: 0; }
.ob-target__name { font-size: 14px; font-weight: 500; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ob-target__rate { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ob-target__rate .ob-meta { white-space: nowrap; }

/* Grafo de fluxo: colunas de origem e destino, curvas SVG por trás */
.ob-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, .6fr) minmax(0, 1.1fr); align-items: start; }
.ob-flow__col { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; min-width: 0; }
.ob-flow__col > .ob-eyebrow { margin-bottom: 6px; }
.ob-flow svg.ob-flow__links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.ob-flow__links path { fill: none; stroke: var(--ob-cv-line); stroke-width: 1; opacity: .45; transition: opacity .3s ease, stroke .3s ease, stroke-width .3s ease; }
.ob-flow__links path.pulse { stroke: var(--ob-cyan); stroke-width: 1.6; opacity: 0; stroke-linecap: round; }
.ob-flow__links path.packet { fill: none; stroke: var(--ob-cv-band); stroke-width: 2; stroke-linecap: round; opacity: 1; filter: drop-shadow(0 0 4px var(--ob-cyan)); }
.ob-flow.has-focus .ob-flow__links path:not(.is-on) { opacity: .08; }
.ob-flow.has-focus .ob-flow__links path.is-on { stroke: var(--ob-cyan); opacity: .95; stroke-width: 1.4; }
.ob-flow.has-focus .ob-cell:not(.is-on) { opacity: .45; }

/* Tela em canvas (fita e feixe) */
.ob-canvas { position: relative; width: 100%; height: var(--h, 200px); }
.ob-canvas canvas { display: block; width: 100%; height: 100%; }
.ob-canvas__axis { position: absolute; white-space: nowrap; font-size: 11px; color: var(--ob-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.ob-canvas__axis.is-strong { color: var(--ob-ink); }
.ob-pins { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ob-pins .ob-check { font-size: 12px; gap: 7px; }
.ob-pins .ob-check__box { width: 13px; height: 13px; border-radius: 3px; }
.ob-pins .ob-check__box::after { width: 3px; height: 6px; border-width: 0 1.6px 1.6px 0; }
.ob-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ob-ink-2); white-space: nowrap; pointer-events: none; }
.ob-pin::before { content: ""; width: 9px; height: 9px; border-radius: 2px; border: 1.2px solid currentColor; }
.ob-pin.is-on { color: var(--ob-ink); }
.ob-pin.is-on::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--ob-surface); }
.ob-scan { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s ease; will-change: transform; }
.ob-scan i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--ob-cv-hi); box-shadow: 0 0 0 3px var(--ob-cyan-soft), 0 0 14px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 100%), transparent); }
.ob-scan span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 6px;
  background: var(--ob-pop); border: 1px solid var(--ob-line-strong); color: var(--ob-ink); font-variant-numeric: tabular-nums; }
.ob-ruler { position: absolute; left: 0; top: 0; bottom: 0; width: 36px; pointer-events: none; }
.ob-ruler span { position: absolute; left: 0; font-size: 11px; color: var(--ob-muted); transform: translateY(-50%); }
.ob-site { position: absolute; left: 44px; transform: translateY(-50%); pointer-events: none; text-shadow: 0 0 8px var(--ob-bg), 0 0 3px var(--ob-bg); }
.ob-site::before { content: ""; position: absolute; left: -32px; top: 8px; width: 24px; height: 1px; background: var(--ob-ink); opacity: .7; }
.ob-site__name { font-size: 13px; font-weight: 500; }
.ob-site__meta { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-ink-2); margin-top: 1px; }
.ob-sat { position: absolute; right: 0; transform: translateY(-50%); text-align: right; pointer-events: none; text-shadow: 0 0 8px var(--ob-bg); }
.ob-sat__name { font-size: 13px; font-weight: 600; }
.ob-sat__meta { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ob-ink-2); }
.ob-beams-wrap { position: relative; }
.ob-beams-wrap > .ob-anomaly { position: absolute; right: 120px; top: 176px; z-index: 2; }

/* Cartão de anomalia: vidro com calor vindo de baixo */
.ob-anomaly { position: relative; width: 236px; border-radius: var(--ob-r-md); padding: 16px; isolation: isolate; color: var(--ob-ink);
  background: radial-gradient(120% 70% at 70% 118%, color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 60%), transparent), color-mix(in srgb, var(--ob-coral-deep) calc(var(--ob-glow) * 20%), transparent) 48%, transparent 72%),
              color-mix(in srgb, var(--ob-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop); }
.ob-anomaly__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.ob-anomaly__title { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 15px; }
.ob-anomaly__head .ob-iconbtn { background: transparent; border-color: transparent; margin: -4px -6px 0 0; }
.ob-anomaly__row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ob-ink-2); padding: 5px 0 7px; }
.ob-anomaly__row b { color: var(--ob-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.ob-anomaly__line { height: 2px; border-radius: 2px; background: var(--ob-well); margin-bottom: 6px; overflow: hidden; }
.ob-anomaly__line i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c, var(--ob-coral)); transition: width 1s var(--ob-ease) .2s; }
.ob-anomaly__chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--ob-r-pill); background: var(--ob-chip); color: var(--ob-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.ob-anomaly__chip.hot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ob-coral); }

/* =====================================================================
   ABERTURA — a capa
   ===================================================================== */
.ob-cover { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: center; min-height: 620px; padding: clamp(24px, 4vw, 56px); border-radius: var(--ob-r-xl); }
.ob-cover::before { left: 38%; top: -18%; width: 78%; animation: none; transform: translate(calc(var(--gx, 50%) - 50%), calc(var(--gy, 50%) - 50%)); transition: transform 1.2s var(--ob-ease); }
.ob-cover__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; }
.ob-cover__text > .ob-eyebrow { display: inline-flex; align-items: center; gap: 9px; }
.ob-cover__name { margin: 0; font: 200 clamp(64px, 9vw, 128px)/.9 var(--ob-font-display); letter-spacing: -.05em; color: var(--ob-ink); }
.ob-cover__name b { font-weight: 600; background: linear-gradient(100deg, var(--ob-cyan-ink), var(--ob-ink) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-cover__tag { margin: 0; max-width: 42ch; font-size: 16px; line-height: 25px; color: var(--ob-ink-2); }
.ob-cover__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-cover__stats { display: flex; flex-wrap: wrap; gap: 14px 34px; padding-top: 18px; border-top: 1px solid var(--ob-line); }
.ob-cover__stats .ob-eyebrow { display: block; margin-bottom: 4px; }
.ob-cover__art { position: relative; height: 540px; min-width: 0; }
.ob-orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ob-orbits ellipse { fill: none; stroke: var(--ob-cv-line); stroke-width: 1; opacity: .35; }
.ob-orbits ellipse.is-lit { stroke: var(--ob-cyan); opacity: .55; stroke-dasharray: 2 6; }
.ob-orbits .ob-orbits__sat { fill: var(--ob-cv-hi); }
.ob-orbits .ob-orbits__halo { fill: var(--ob-cyan); opacity: .25; }
.ob-orbits .ob-orbits__sat--coral { fill: var(--ob-coral); }
.ob-orbits .ob-orbits__planet { fill: url(#ob-planet-grad); }
.ob-float { position: absolute; transform: translate(var(--px, 0), var(--py, 0)); transition: transform .6s var(--ob-ease); }
.ob-cover__anom { right: 2%; top: 4%; }
.ob-cover__tg { left: 0; top: 30%; width: 262px; display: flex; flex-direction: column; gap: 8px; }
.ob-cover__tg .ob-cell { background: color-mix(in srgb, var(--ob-surface) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ob-shadow-pop); }
.ob-cover__rib { left: 10%; right: 0; bottom: 0; }
.ob-cover__rib .ob-panel { padding: 14px 16px 10px; }

/* =====================================================================
   TELAS
   ===================================================================== */
.ob-app { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--ob-r-xl); }
.ob-app__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
.ob-app__left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ob-ops { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 16px; padding: 22px; border-radius: var(--ob-r-xl); align-items: start; }
.ob-ops__side { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.ob-ops .ob-table { min-width: 460px; }
.ob-ops__side .ob-navlist { padding: 0; background: none; border: 0; }
.ob-ops__side .ob-navlist__item[aria-current="page"]::before { left: -14px; }
.ob-ops__group { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ob-muted); padding: 6px 10px 0; }
.ob-ops__me { padding-top: 12px; border-top: 1px solid var(--ob-line); }
.ob-ops__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ob-ops__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ob-ops__head h2 { margin: 6px 0 0; font-size: 24px; font-weight: 400; letter-spacing: -.01em; }
.ob-ops__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ob-ops__tools .ob-search { width: 220px; }
.ob-grid-2 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.ob-grid-2 > .ob-panel { min-width: 0; }
.ob-modal__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ob-coral-soft); color: var(--ob-coral-ink); flex: none; }

/* =====================================================================
   DE PERTO — profundidade de campo
   ===================================================================== */
.ob-close { position: relative; overflow: hidden; margin: 0; border-radius: var(--ob-r-xl); height: var(--h, 340px); isolation: isolate; background: var(--ob-bg); }
.ob-close::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at var(--mx, 50%) var(--my, 50%), var(--ob-planet-a), transparent 70%),
              radial-gradient(40% 50% at 85% 10%, var(--ob-planet-b), transparent 70%); }
.ob-close__src { display: none; }
.ob-close__layer { position: absolute; inset: 0; pointer-events: none; }
.ob-close__zoom { position: absolute; left: var(--ox, 0); top: var(--oy, 0); width: var(--w, 420px); transform: scale(calc(var(--k, 1.6) * var(--ks, 1))); transform-origin: var(--fx, 50%) var(--fy, 50%); }
.ob-close__layer--mid { filter: blur(2.5px);
  -webkit-mask-image: radial-gradient(var(--rw, 46%) var(--rh, 52%) at var(--mx, 50%) var(--my, 50%), #000 40%, transparent 100%);
  mask-image: radial-gradient(var(--rw, 46%) var(--rh, 52%) at var(--mx, 50%) var(--my, 50%), #000 40%, transparent 100%); }
.ob-close__layer--near {
  -webkit-mask-image: radial-gradient(calc(var(--rw, 46%) * .72) calc(var(--rh, 52%) * .72) at var(--mx, 50%) var(--my, 50%), #000 55%, transparent 100%);
  mask-image: radial-gradient(calc(var(--rw, 46%) * .72) calc(var(--rh, 52%) * .72) at var(--mx, 50%) var(--my, 50%), #000 55%, transparent 100%); }
.ob-close__layer * { animation: none !important; transition: none !important; }
.ob-close__layer--far .ob-close__zoom { filter: blur(9px); will-change: transform; }
.ob-close__layer--far { opacity: .8; }
.ob-close__layer :is(.ob-panel, .ob-anomaly, .ob-cell) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ob-close__layer .ob-cell { background: color-mix(in srgb, var(--ob-surface) 90%, transparent); }
.ob-close figcaption { position: absolute; z-index: 5; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--ob-r-pill);
  font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ob-ink); background: var(--ob-pop); border: 1px solid var(--ob-line-strong); box-shadow: var(--ob-shadow-pop); }
.ob-close figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--ob-cyan); box-shadow: 0 0 8px var(--ob-cyan); }

/* =====================================================================
   FECHO — slide final
   ===================================================================== */
.ob-finale { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--ob-r-xl); min-height: 660px; padding: clamp(28px, 5vw, 72px); color: var(--ob-ink); background: var(--ob-bg); }
.ob-finale::before { left: 34%; top: -30%; width: 90%; transform: translate(calc(var(--gx, 50%) - 50%), calc(var(--gy, 50%) - 50%)); transition: transform 1.2s var(--ob-ease); }
.ob-finale__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 30% at 78% 108%, color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 35%), transparent), transparent 70%),
              radial-gradient(30% 30% at 12% 90%, color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 18%), transparent), transparent 70%); }
.ob-finale .ob-orbits { left: 28%; top: -6%; width: 90%; height: 112%; }
.ob-finale__title { position: relative; z-index: 3; width: min(560px, 46%); padding-top: 24px; }
.ob-finale__title .ob-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ob-ink-2); }
.ob-finale__title h2 { margin: 22px 0 0; font: 200 clamp(52px, 7.6vw, 112px)/.92 var(--ob-font-display); letter-spacing: -.05em; color: var(--ob-ink); }
.ob-finale__title h2 em { font-style: normal; font-weight: 500; background: linear-gradient(100deg, var(--ob-cyan-ink), var(--ob-coral-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-finale__title p { margin: 24px 0 0; font-size: 16px; line-height: 25px; color: var(--ob-ink-2); max-width: 38ch; }
.ob-finale__title .ob-cover__actions { margin-top: 28px; }
.ob-finale__float { position: absolute; inset: 0; z-index: 2; perspective: 1400px; pointer-events: none; }
.ob-finale__item { position: absolute; left: var(--x); top: var(--y); width: var(--w); pointer-events: auto;
  transform: translate(var(--px, 0), var(--py, 0)) rotateY(var(--ry, -10deg)) rotateZ(var(--rz, 0deg)); transition: transform .5s var(--ob-ease); }
.ob-finale__item > .ob-cell, .ob-finale__item > .ob-kpi { background: color-mix(in srgb, var(--ob-surface) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ob-shadow-pop); }
.ob-finale__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-finale__chips .ob-tag { background: color-mix(in srgb, var(--ob-surface) 80%, transparent); }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1180px) {
  .ob-grid-2, .ob-app__grid { grid-template-columns: minmax(0, 1fr); }
  .ob-app [data-ob-beams] { --h: 820px !important; }
}
@media (max-width: 900px) {
  .ob-cover { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ob-cover__art { height: 500px; }
  .ob-ops { grid-template-columns: minmax(0, 1fr); }
  .ob-ops__side { position: static; }
  .ob-ops__side .ob-navlist { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .ob-ops__side .ob-navlist__item { flex: none; }
  .ob-ops__side .ob-navlist__item[aria-current="page"]::before { display: none; }
  .ob-ops__group, .ob-ops__me { display: none; }
  .ob-finale { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
  .ob-finale__title { width: auto; padding-top: 0; }
  .ob-finale__float { position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; perspective: none; }
  .ob-finale__item { position: relative; left: auto; top: auto; width: min(100%, var(--w)); max-width: 100%; transform: none; }
  .ob-finale__item:nth-child(even) { align-self: flex-end; }
  .ob-finale .ob-orbits { left: -20%; width: 160%; top: 10%; height: 60%; }
}
@media (max-width: 640px) {
  .ob-flow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ob-flow > div:empty, .ob-flow svg.ob-flow__links { display: none; }
  .ob-beams-wrap > .ob-anomaly { position: relative; right: auto; top: auto; margin-top: 12px; }
  .ob-app [data-ob-beams] { --h: 640px !important; }
  .ob-bar { grid-template-columns: 36px 1fr; } .ob-bar__track { display: none; }
  .ob-topbar { flex-wrap: wrap; } .ob-topbar__nav { order: 3; flex: 1 0 100%; margin: 0; }
  .ob-app, .ob-ops { padding: 12px; }
  .ob-cover { padding: 22px 16px; }
  .ob-cover__art { height: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 20px; }
  .ob-cover__art .ob-float { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; transform: none; }
  .ob-cover__art .ob-anomaly { width: 100%; }
  .ob-close { --ks: .74; }
  .ob-ops__tools .ob-search { width: 100%; }
  .ob-ops__tools { width: 100%; }
}

/* =====================================================================
   MOVIMENTO
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .ob-live { animation: ob-live 2.2s ease-out infinite; }
  .ob-count::before { animation: ob-blink 2.8s ease-in-out infinite; }
  .ob-risk i { animation: ob-risk 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 70ms); }
  .ob-flow__links path.pulse { animation: ob-pulse var(--dur, 3.2s) linear infinite; animation-delay: var(--delay, 0s); }
  .ob-anomaly { animation: ob-rise .7s var(--ob-spring) both; }
  .ob-anomaly::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(60% 40% at 70% 110%, color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 40%), transparent), transparent 70%); animation: ob-heat 3.6s ease-in-out infinite alternate; }
  .ob-stage:not(.ob-cover):not(.ob-finale)::before { animation: ob-drift 26s ease-in-out infinite alternate; }
  .ob-skel { animation: ob-shimmer 1.6s linear infinite; }
  .ob-empty__art::after { animation: ob-spin 5s linear infinite; }
  .ob-progress__bar::after { animation: ob-sheen 2.6s ease-in-out infinite; }
  .ob-status--ok::before { animation: ob-live-dot 2.2s ease-out infinite; }
  .ob-status--danger::before { animation: ob-blink 1.2s ease-in-out infinite; }
  .ob-feed__item.is-new { animation: ob-feed-in .6s var(--ob-spring); }
  .is-tick { display: inline-block; animation: ob-tick .9s var(--ob-ease); }
  .ob-count.is-tick, .ob-bar__pct.is-tick, .ob-anomaly__chip.is-tick { display: inline-flex; }
  .is-tick.is-down { animation-name: ob-tick-down; }
  .ob-cell.is-hit { animation: ob-hit 1s ease-out; }
  .ob-cell.is-hit .ob-target__icon { animation: ob-hit-icon 1s ease-out; }
  .ob-meter i { transition: background-color .35s ease, transform .35s var(--ob-ease); }
  .ob-meter i.on { transform: scaleY(1); } .ob-meter i:not(.on) { transform: scaleY(.7); }
  .ob-pin.is-on::before { animation: ob-blink 2.4s ease-in-out infinite; }
  .ob-brand__mark::before { animation: ob-spin 16s linear infinite; }
  .ob-node__code { animation: ob-glow 4s ease-in-out infinite; }
  .ob-finale__item { animation: ob-float var(--t, 7s) ease-in-out var(--dl, 0s) infinite; }
  .ob-finale:not(.is-live) .ob-finale__item, .ob-cover:not(.is-live) .ob-anomaly { animation-play-state: paused; }
  .ob-chart__dot { animation: ob-dot 2.4s ease-in-out infinite; }
}
@keyframes ob-tick { 0% { color: var(--ob-cyan); transform: translateY(-3px); text-shadow: 0 0 10px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 90%), transparent); } 100% { transform: none; text-shadow: none; } }
@keyframes ob-tick-down { 0% { color: var(--ob-coral); transform: translateY(3px); text-shadow: 0 0 10px color-mix(in srgb, var(--ob-coral) calc(var(--ob-glow) * 80%), transparent); } 100% { transform: none; text-shadow: none; } }
@keyframes ob-hit { 0% { border-color: color-mix(in srgb, var(--ob-cyan) 75%, transparent); box-shadow: 0 0 0 0 var(--ob-cyan-soft), 0 0 22px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 30%), transparent); } 100% { box-shadow: 0 0 0 10px transparent, 0 0 0 transparent; } }
@keyframes ob-hit-icon { 0% { color: var(--ob-cyan); background: var(--ob-cyan-soft); } 100% { } }
@keyframes ob-spin { to { transform: rotate(360deg); } }
@keyframes ob-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes ob-sheen { 0%, 30% { transform: translateX(-100%); } 70%, 100% { transform: translateX(100%); } }
@keyframes ob-live-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ob-green) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes ob-feed-in { from { opacity: 0; transform: translateY(-10px); background: var(--ob-cyan-soft); } to { opacity: 1; transform: none; background: transparent; } }
@keyframes ob-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ob-glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ob-cyan) 35%, transparent), 0 0 12px color-mix(in srgb, var(--ob-cyan) calc(var(--ob-glow) * 20%), transparent); } }
@keyframes ob-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ob-green) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes ob-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ob-risk { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ob-pulse { 0% { stroke-dashoffset: var(--len); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ob-heat { from { opacity: .4; } to { opacity: 1; } }
@keyframes ob-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3%, 2%) scale(1.04); } }
@keyframes ob-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes ob-dot { 0%, 100% { stroke-width: 2; } 50% { stroke-width: 4; } }