/* Centro de Metabolismo Dr. Igor Marques — Design System
   Gerado a partir de tokens.json. Um arquivo, sem dependência externa.
   Temas: claro (padrão) e escuro, por [data-theme="escuro"] ou pelo sistema operacional. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');

@font-face {
  font-family: "Instrument Sans";
  src: url('fonts/InstrumentSans-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url('fonts/InstrumentSans-Italic-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
:root,
[data-theme="claro"] {
  --brand-navy: #0c2539;
  --brand-navy-deep: #061520;
  --brand-bronze: #a37a5c;
  --brand-bronze-light: #b8937a;
  --brand-steel: #828b93;
  --brand-sand: #c1b9b4;
  --surface-base: #f8f8f8;
  --surface-raised: #ffffff;
  --surface-sunken: #eff1f3;
  --surface-inverse: #0c2539;
  --surface-accent: #f4ece5;
  --surface-scrim: rgba(12, 37, 57, 0.55);
  --ink-strong: #0c2539;
  --ink-body: #22384a;
  --ink-muted: #5f6a73;
  --ink-inverse: #f8f8f8;
  --ink-accent: #6f4f38;
  --ink-on-brand: #f8f8f8;
  --ink-on-accent: #061520;
  --ink-on-accent-display: #f8f8f8;
  --border-subtle: #e3e7ea;
  --border-default: #828b93;
  --border-strong: #4a535b;
  --border-accent: #a37a5c;
  --action-primary-bg: #0c2539;
  --action-primary-bg-hover: #1f4462;
  --action-primary-fg: #f8f8f8;
  --action-accent-bg: #a37a5c;
  --action-accent-bg-hover: #8d6749;
  --action-accent-fg: #061520;
  --action-ghost-bg-hover: #e9edf0;
  --focus-ring: #a37a5c;
  --state-success-fg: #0f766e;
  --state-success-surface: #e3f4f0;
  --state-warning-fg: #9a6700;
  --state-warning-surface: #f8efdb;
  --state-danger-fg: #b3261e;
  --state-danger-surface: #fbe9e7;
  --state-info-fg: #2f5a7d;
  --state-info-surface: #e6eef5;
  --chart-cat-1: #0b5c8f;
  --chart-cat-2: #c07a2b;
  --chart-cat-3: #009e73;
  --chart-cat-4: #cc79a7;
  --chart-seq-1: #e3ecf3;
  --chart-seq-2: #b7cfe0;
  --chart-seq-3: #7fa8c5;
  --chart-seq-4: #4a7fa4;
  --chart-seq-5: #1f5077;
  --chart-div-neg-2: #9c5420;
  --chart-div-neg-1: #d2a074;
  --chart-div-mid: #eae7e3;
  --chart-div-pos-1: #7fa8c2;
  --chart-div-pos-2: #17587a;
  --chart-grid: #e3e7ea;
  --chart-axis: #828b93;
  --chart-band: rgba(163, 122, 92, 0.16);
  --shadow-sm: 0 1px 2px rgba(12, 37, 57, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 37, 57, 0.10);
  --shadow-lg: 0 16px 40px rgba(12, 37, 57, 0.16);
}

[data-theme="escuro"] {
  --brand-navy: #0c2539;
  --brand-navy-deep: #061520;
  --brand-bronze: #a37a5c;
  --brand-bronze-light: #b8937a;
  --brand-steel: #828b93;
  --brand-sand: #c1b9b4;
  --surface-base: #0c2539;
  --surface-raised: #143349;
  --surface-sunken: #061520;
  --surface-inverse: #f8f8f8;
  --surface-accent: #27343f;
  --surface-scrim: rgba(3, 10, 16, 0.68);
  --ink-strong: #f8f8f8;
  --ink-body: #dce3e9;
  --ink-muted: #9fadb8;
  --ink-inverse: #0c2539;
  --ink-accent: #cdb09c;
  --ink-on-brand: #f8f8f8;
  --ink-on-accent: #0c2539;
  --ink-on-accent-display: #f8f8f8;
  --border-subtle: #1d3648;
  --border-default: #6b7780;
  --border-strong: #9fadb8;
  --border-accent: #cdb09c;
  --action-primary-bg: #2f5a7d;
  --action-primary-bg-hover: #3d6d94;
  --action-primary-fg: #f8f8f8;
  --action-accent-bg: #b8937a;
  --action-accent-bg-hover: #cba58e;
  --action-accent-fg: #0c2539;
  --action-ghost-bg-hover: #1c3c55;
  --focus-ring: #cdb09c;
  --state-success-fg: #4fd1c5;
  --state-success-surface: #10322f;
  --state-warning-fg: #e5a83c;
  --state-warning-surface: #33260c;
  --state-danger-fg: #f2897f;
  --state-danger-surface: #3a1512;
  --state-info-fg: #8fb6d4;
  --state-info-surface: #12293a;
  --chart-cat-1: #418ad1;
  --chart-cat-2: #ca8038;
  --chart-cat-3: #24ab7e;
  --chart-cat-4: #b855a6;
  --chart-seq-1: #15334a;
  --chart-seq-2: #1e4b6b;
  --chart-seq-3: #2f6a91;
  --chart-seq-4: #4b8cb3;
  --chart-seq-5: #79b0d3;
  --chart-div-neg-2: #e8a86c;
  --chart-div-neg-1: #b07a4c;
  --chart-div-mid: #2b3d4b;
  --chart-div-pos-1: #4d7f9f;
  --chart-div-pos-2: #8fc2e0;
  --chart-grid: #1d3648;
  --chart-axis: #6b7780;
  --chart-band: rgba(205, 176, 156, 0.18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --brand-navy: #0c2539;
    --brand-navy-deep: #061520;
    --brand-bronze: #a37a5c;
    --brand-bronze-light: #b8937a;
    --brand-steel: #828b93;
    --brand-sand: #c1b9b4;
    --surface-base: #0c2539;
    --surface-raised: #143349;
    --surface-sunken: #061520;
    --surface-inverse: #f8f8f8;
    --surface-accent: #27343f;
    --surface-scrim: rgba(3, 10, 16, 0.68);
    --ink-strong: #f8f8f8;
    --ink-body: #dce3e9;
    --ink-muted: #9fadb8;
    --ink-inverse: #0c2539;
    --ink-accent: #cdb09c;
    --ink-on-brand: #f8f8f8;
    --ink-on-accent: #0c2539;
    --ink-on-accent-display: #f8f8f8;
    --border-subtle: #1d3648;
    --border-default: #6b7780;
    --border-strong: #9fadb8;
    --border-accent: #cdb09c;
    --action-primary-bg: #2f5a7d;
    --action-primary-bg-hover: #3d6d94;
    --action-primary-fg: #f8f8f8;
    --action-accent-bg: #b8937a;
    --action-accent-bg-hover: #cba58e;
    --action-accent-fg: #0c2539;
    --action-ghost-bg-hover: #1c3c55;
    --focus-ring: #cdb09c;
    --state-success-fg: #4fd1c5;
    --state-success-surface: #10322f;
    --state-warning-fg: #e5a83c;
    --state-warning-surface: #33260c;
    --state-danger-fg: #f2897f;
    --state-danger-surface: #3a1512;
    --state-info-fg: #8fb6d4;
    --state-info-surface: #12293a;
    --chart-cat-1: #418ad1;
    --chart-cat-2: #ca8038;
    --chart-cat-3: #24ab7e;
    --chart-cat-4: #b855a6;
    --chart-seq-1: #15334a;
    --chart-seq-2: #1e4b6b;
    --chart-seq-3: #2f6a91;
    --chart-seq-4: #4b8cb3;
    --chart-seq-5: #79b0d3;
    --chart-div-neg-2: #e8a86c;
    --chart-div-neg-1: #b07a4c;
    --chart-div-mid: #2b3d4b;
    --chart-div-pos-1: #4d7f9f;
    --chart-div-pos-2: #8fc2e0;
    --chart-grid: #1d3648;
    --chart-axis: #6b7780;
    --chart-band: rgba(205, 176, 156, 0.18);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-curva: 96px;
  --opacity-disabled: 0.45;
  --opacity-scrim: 0.55;
  --font-sans: "Instrument Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- estilos de texto ---------- */
.display-xl { font-family: var(--font-sans); font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-sans); font-size: 44px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-sans); font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -0.015em; }
.h1 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; }
.h3 { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; }
.h4 { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 600; }
.body-l { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.button-s { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.metric-xl { font-family: var(--font-sans); font-size: 40px; line-height: 42px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.metric-s { font-family: var(--font-sans); font-size: 20px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }

/* ---------- componentes ---------- */
/* Centro de Metabolismo Dr. Igor Marques — folha do bundle.
   Toda cor, medida e raio vem de tokens.css. Nenhum valor literal de marca aqui. */

.cm-root, .cm-root * { box-sizing: border-box; }
.cm-root {
  font-family: var(--font-sans);
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- foco ---------- */
.cm-focusable:focus-visible,
.cm-root :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Button ---------- */
.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: 15px; line-height: 20px; font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.cm-btn--sm { font-size: 13px; line-height: 18px; padding: var(--space-2) var(--space-3); }
.cm-btn--lg { font-size: 17px; line-height: 24px; padding: var(--space-4) var(--space-8); }
.cm-btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.cm-btn--primary:hover { background: var(--action-primary-bg-hover); }
.cm-btn--accent { background: var(--action-accent-bg); color: var(--action-accent-fg); }
.cm-btn--accent:hover { background: var(--action-accent-bg-hover); }
.cm-btn--outline { background: transparent; color: var(--ink-strong); border-color: var(--border-default); }
.cm-btn--outline:hover { background: var(--action-ghost-bg-hover); border-color: var(--border-strong); }
.cm-btn--ghost { background: transparent; color: var(--ink-strong); }
.cm-btn--ghost:hover { background: var(--action-ghost-bg-hover); }
.cm-btn[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.cm-btn--block { width: 100%; }
.cm-btn--cta, .cm-btn--cta-claro {
  border: 0; outline: 0;
  transition: transform .18s ease, box-shadow .18s ease, background-image .18s ease;
}
.cm-btn--cta:hover, .cm-btn--cta-claro:hover { transform: scale(1.04); }
.cm-btn--cta:active, .cm-btn--cta-claro:active { transform: scale(.99); }
.cm-btn--cta {
  background-image: linear-gradient(135deg, #123048 0%, #1d4667 45%, #2b6291 78%, #3a7cb4 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(6, 21, 32, .2);
}
.cm-btn--cta:hover {
  background-image: linear-gradient(135deg, #0d2438 0%, #173a56 45%, #23537b 78%, #316b9d 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(6, 21, 32, .22);
}
.cm-btn--cta-claro {
  background-image: linear-gradient(135deg, #1d4667 0%, #2b6291 45%, #3f83bb 100%);
  color: #ffffff;
  box-shadow: 0 2px 14px rgba(6, 21, 32, .26);
}
.cm-btn--cta-claro:hover {
  background-image: linear-gradient(135deg, #173a56 0%, #23537b 45%, #3574a5 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(6, 21, 32, .3);
}
.cm-fab {
  position: fixed; right: 20px; bottom: 96px; z-index: 60;
  width: 60px; height: 60px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background-image: linear-gradient(135deg, #3fd07e 0%, #2ebd6b 45%, #199c57 100%);
  color: #ffffff; box-shadow: 0 6px 20px rgba(6, 21, 32, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cm-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6, 21, 32, .4); }
.cm-fab svg { width: 32px; height: 32px; display: block; fill: currentColor; }
.cm-reviews {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.cm-reviews::-webkit-scrollbar { display: none; }
.cm-reviews > * { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 700px) { .cm-reviews > * { flex: 0 0 calc((100% - 24px) / 2); } }
@media (min-width: 1000px) { .cm-reviews > * { flex: 0 0 calc((100% - 48px) / 3); } }
.cm-seta {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--border-default);
  background: var(--surface-base); color: var(--ink-strong); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
}
.cm-seta:hover { background: var(--action-ghost-bg-hover); border-color: var(--border-strong); }
@media (min-width: 860px) { .cm-fab { bottom: 28px; } }

/* ---------- Field ---------- */
.cm-field { display: flex; flex-direction: column; gap: var(--space-2); }
.cm-field__label {
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.cm-field__req { color: var(--state-danger-fg); margin-inline-start: 2px; }
.cm-input, .cm-select, .cm-textarea {
  font-family: inherit; font-size: 15px; line-height: 23px; color: var(--ink-strong);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}
.cm-textarea { min-height: 96px; resize: vertical; }
.cm-select {
  appearance: none; padding-inline-end: var(--space-10);
  background-repeat: no-repeat; background-position: right var(--space-4) center;
}
.cm-input::placeholder, .cm-textarea::placeholder { color: var(--ink-muted); }
.cm-input:hover, .cm-select:hover, .cm-textarea:hover { border-color: var(--border-strong); }
.cm-field--invalid .cm-input,
.cm-field--invalid .cm-select,
.cm-field--invalid .cm-textarea { border-color: var(--state-danger-fg); border-width: 2px; }
.cm-field__help { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cm-field__error { font-size: 13px; line-height: 20px; color: var(--state-danger-fg); font-weight: 600; }
.cm-field__unit { font-family: var(--font-mono); color: var(--ink-muted); }

/* ---------- Checkbox ---------- */
.cm-check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.cm-check__box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-raised);
  display: grid; place-items: center;
}
.cm-check__box svg { width: 14px; height: 14px; display: block; }
.cm-check[data-checked="true"] .cm-check__box {
  background: var(--action-primary-bg); border-color: var(--action-primary-bg);
}
.cm-check__text { font-size: 15px; line-height: 23px; color: var(--ink-body); }
.cm-check__note { display: block; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.cm-check[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; }

/* ---------- Switch ---------- */
.cm-switch { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; background: none; border: 0; padding: 0; text-align: start; }
.cm-switch__track {
  flex: 0 0 auto; width: 44px; height: 26px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-default);
  position: relative; transition: background-color .15s ease, border-color .15s ease;
}
.cm-switch__thumb {
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--ink-muted); transition: transform .15s ease, background-color .15s ease;
}
.cm-switch[data-on="true"] .cm-switch__track { background: var(--action-primary-bg); border-color: var(--action-primary-bg); }
.cm-switch[data-on="true"] .cm-switch__thumb { background: var(--action-primary-fg); transform: translateX(18px); }
.cm-switch__label { font-size: 15px; line-height: 23px; color: var(--ink-body); }

/* ---------- Card ---------- */
.cm-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.cm-card--accent { background: var(--surface-accent); border-color: var(--border-accent); }
.cm-card--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--ink-inverse); }
.cm-card--inverse .cm-card__title, .cm-card--inverse .cm-card__body { color: var(--ink-inverse); }
.cm-card--flat { box-shadow: none; }
.cm-card--raised { box-shadow: var(--shadow-md); }
.cm-card__eyebrow {
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-accent);
}
.cm-card__title { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink-strong); margin: 0; }
.cm-card__body { font-size: 15px; line-height: 23px; color: var(--ink-body); margin: 0; }
.cm-card__footer { margin-top: var(--space-2); display: flex; gap: var(--space-3); }

/* ---------- Badge ---------- */
.cm-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 13px; line-height: 18px; font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.cm-badge--neutral { background: var(--surface-sunken); color: var(--ink-body); border-color: var(--border-subtle); }
.cm-badge--brand   { background: var(--surface-accent); color: var(--ink-accent); border-color: var(--border-accent); }
.cm-badge--success { background: var(--state-success-surface); color: var(--state-success-fg); border-color: var(--state-success-fg); }
.cm-badge--warning { background: var(--state-warning-surface); color: var(--state-warning-fg); border-color: var(--state-warning-fg); }
.cm-badge--danger  { background: var(--state-danger-surface);  color: var(--state-danger-fg);  border-color: var(--state-danger-fg); }
.cm-badge--info    { background: var(--state-info-surface);    color: var(--state-info-fg);    border-color: var(--state-info-fg); }
.cm-badge__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; }

/* ---------- Alert ---------- */
.cm-alert {
  display: flex; gap: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid;
  padding: var(--space-4);
}
.cm-alert__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.cm-alert__title { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 var(--space-1); }
.cm-alert__body { font-size: 15px; line-height: 23px; color: var(--ink-body); margin: 0; }
.cm-alert--success { background: var(--state-success-surface); border-color: var(--state-success-fg); color: var(--state-success-fg); }
.cm-alert--warning { background: var(--state-warning-surface); border-color: var(--state-warning-fg); color: var(--state-warning-fg); }
.cm-alert--danger  { background: var(--state-danger-surface);  border-color: var(--state-danger-fg);  color: var(--state-danger-fg); }
.cm-alert--info    { background: var(--state-info-surface);    border-color: var(--state-info-fg);    color: var(--state-info-fg); }

/* ---------- StatTile ---------- */
.cm-stat {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0;
}
.cm-stat__label {
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.cm-stat__value {
  font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--space-2);
}
.cm-stat__unit { font-size: 15px; line-height: 23px; font-weight: 400; color: var(--ink-muted); }
.cm-stat__delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-stat__delta--up { color: var(--state-success-fg); }
.cm-stat__delta--down { color: var(--state-danger-fg); }
.cm-stat__delta--flat { color: var(--ink-muted); }
.cm-stat__note { font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- RangeMeter ---------- */
.cm-meter { display: flex; flex-direction: column; gap: var(--space-2); }
.cm-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.cm-meter__name { font-size: 15px; line-height: 23px; font-weight: 600; color: var(--ink-strong); }
.cm-meter__value { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-body); font-variant-numeric: tabular-nums; }
.cm-meter__track {
  position: relative; height: 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
}
.cm-meter__band { position: absolute; top: 0; bottom: 0; background: var(--chart-band); border-inline: 1px solid var(--border-accent); }
.cm-meter__marker { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; transform: translateX(-2px); }
.cm-meter__scale { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---------- DataTable ---------- */
.cm-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); }
.cm-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; }
.cm-table caption { text-align: start; padding: var(--space-4) var(--space-4) var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-muted); caption-side: top; }
.cm-table th, .cm-table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--border-subtle); }
.cm-table thead th {
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.cm-table tbody tr:last-child td { border-bottom: 0; }
.cm-table td { color: var(--ink-body); }
.cm-table__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; color: var(--ink-strong); }
.cm-table__name { color: var(--ink-strong); font-weight: 600; }

/* ---------- Tabs ---------- */
.cm-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.cm-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; line-height: 20px; font-weight: 600;
  color: var(--ink-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cm-tab:hover { color: var(--ink-strong); background: var(--action-ghost-bg-hover); }
.cm-tab[aria-selected="true"] { color: var(--ink-strong); border-bottom-color: var(--border-accent); }

/* ---------- AppBar ---------- */
.cm-appbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--surface-inverse); color: var(--ink-inverse);
  padding: var(--space-3) var(--space-5);
}
.cm-appbar__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cm-appbar__title { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink-inverse); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-appbar__sub { font-size: 12px; line-height: 16px; color: var(--ink-inverse); opacity: .8; }
.cm-appbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.cm-appbar__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  color: var(--ink-inverse);
}
.cm-appbar__icon:hover { background: rgba(255,255,255,.12); }

/* ---------- Curva ---------- */
.cm-curva { display: block; width: 100%; height: auto; }
.cm-curva__media { position: relative; overflow: hidden; }

/* ---------- AssinaturaCRM ---------- */
.cm-crm {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; line-height: 20px; color: var(--ink-muted);
  padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);
}
.cm-crm__nome { font-weight: 600; color: var(--ink-strong); font-size: 15px; line-height: 23px; }
.cm-crm__ressalva { font-weight: 600; color: var(--ink-body); letter-spacing: 0.04em; }

/* ---------- Chart ---------- */
.cm-chart { display: flex; flex-direction: column; gap: var(--space-3); }
.cm-chart__title { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--ink-strong); margin: 0; }
.cm-chart__sub { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.cm-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 13px; line-height: 20px; color: var(--ink-body); }
.cm-chart__key { display: inline-flex; align-items: center; gap: var(--space-2); }
.cm-chart__swatch { width: 12px; height: 12px; border-radius: 3px; }
.cm-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cm-chart__axis-text { font-size: 12px; fill: var(--ink-muted); font-family: var(--font-sans); }
.cm-chart__label { font-size: 12px; font-weight: 600; font-family: var(--font-sans); }