/* Réplicas ilustrativas das telas do app (geradas por demo-screens.js). Tudo fica sob .nt-demo. */
.nt-demo {
  --nt-paper: #080a08;
  --nt-surface: #111510;
  --nt-soft: #171e14;
  --nt-field: #0b0e0a;
  --nt-line: #2a3325;
  --nt-ink: #edf2e8;
  --nt-muted: #a3af9a;
  --nt-accent: #baff39;
  --nt-accent-ink: #baff39;
  --nt-accent-bg: #1b2810;
  --nt-accent-contrast: #10150b;
  --nt-pos: #baff39;
  --nt-neg: #ff7b82;
  --nt-neg-bg: #2a1416;
  --nt-grid: #253022;
  --nt-label: #93a08b;
  --nt-shadow: 0 18px 48px rgba(0, 0, 0, .38);

  container-type: inline-size;
  container-name: nt-demo;
  display: block;
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  color: var(--nt-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}
@media (prefers-color-scheme: light) {
  .nt-demo {
    --nt-paper: #eef1f4;
    --nt-surface: #ffffff;
    --nt-soft: #e9edf1;
    --nt-field: #f7f8fa;
    --nt-line: #d9dfe5;
    --nt-ink: #152239;
    --nt-muted: #66748a;
    --nt-accent-ink: #3b5a12;
    --nt-accent-bg: #eaf8cf;
    --nt-pos: #2f6b0c;
    --nt-neg: #c5414d;
    --nt-neg-bg: #fbe9ea;
    --nt-grid: #dfe4e9;
    --nt-label: #8591a1;
    --nt-shadow: 0 18px 44px rgba(21, 34, 57, .12);
  }
}
.nt-demo *, .nt-demo *::before, .nt-demo *::after { box-sizing: border-box; min-inline-size: 0; }
.nt-demo p { margin: 0; }

/* Janela */
.nt-demo__frame {
  background: var(--nt-paper);
  border: 1px solid var(--nt-line);
  border-radius: 16px;
  box-shadow: var(--nt-shadow);
  overflow: hidden;
}
.nt-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--nt-surface);
  border-bottom: 1px solid var(--nt-line);
  font-size: 12px;
  color: var(--nt-muted);
}
.nt-demo__dots { display: inline-flex; gap: 5px; flex: none; }
.nt-demo__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--nt-line); }
.nt-demo__brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--nt-ink); white-space: nowrap; }
.nt-demo__logo {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  background: var(--nt-accent); color: var(--nt-accent-contrast); font-size: 11px; font-weight: 800;
}
.nt-demo__wallet {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 4px 9px; border: 1px solid var(--nt-line); border-radius: 999px; background: var(--nt-soft);
  color: var(--nt-ink); white-space: nowrap;
}
.nt-demo__wallet-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nt-accent); }
.nt-demo__period { white-space: nowrap; }
.nt-demo__period::first-letter { text-transform: uppercase; }
.nt-demo__body { display: grid; gap: 12px; padding: 16px; }

/* Cabeçalho da tela */
.nt-demo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.nt-demo__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; color: var(--nt-muted); margin-bottom: 4px !important; }
.nt-demo__title { font-size: 22px; font-weight: 750; letter-spacing: -.3px; line-height: 1.15; }
.nt-demo__muted { margin-top: 4px !important; font-size: 12.5px; color: var(--nt-muted); }
.nt-demo__pill {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: .8px; padding: 6px 9px; border-radius: 999px;
  background: var(--nt-accent-bg); color: var(--nt-accent-ink); white-space: nowrap;
}

/* Indicadores */
.nt-demo__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nt-demo__kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nt-demo__kpi {
  display: grid; gap: 4px; align-content: start; padding: 12px 13px;
  background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 12px;
}
.nt-demo__kpi-label { font-size: 11px; color: var(--nt-muted); }
.nt-demo__kpi-value { font-size: 19px; font-weight: 750; letter-spacing: -.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-demo__kpi-sub { font-size: 11px; color: var(--nt-label); }
.nt-demo .is-pos { color: var(--nt-pos); }
.nt-demo .is-neg { color: var(--nt-neg); }

/* Painéis */
.nt-demo__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; }
.nt-demo__grid--analysis { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.nt-demo__panel {
  display: grid; gap: 10px; align-content: start; padding: 14px;
  background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 12px;
}
.nt-demo__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nt-demo__panel-title { font-size: 14px; font-weight: 700; }
.nt-demo__panel-sub { margin-top: 2px !important; font-size: 11.5px; color: var(--nt-muted); }
.nt-demo__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.nt-demo__figure strong { font-size: 20px; font-weight: 750; letter-spacing: -.3px; }
.nt-demo__figure span { font-size: 12px; font-weight: 600; color: var(--nt-muted); }
.nt-demo__figure span.is-pos { color: var(--nt-pos); }
.nt-demo__note { font-size: 11.5px; color: var(--nt-muted); }

/* Gráficos */
.nt-demo__chart { display: block; width: 100%; overflow: visible; }
.nt-demo__plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.nt-demo__yaxis {
  display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0;
  font-size: 10px; color: var(--nt-label); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.nt-demo__chart--equity { height: clamp(110px, 30cqi, 190px); }
.nt-demo__chart--drawdown { height: clamp(70px, 16cqi, 110px); }
.nt-demo__chart--bar { height: 8px; border-radius: 4px; overflow: hidden; }
.nt-demo__axis { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--nt-label); }
.nt-demo__plot + .nt-demo__axis { padding-left: 4px; }
.nt-demo__gridline { stroke: var(--nt-grid); stroke-width: 1; }
.nt-demo__base { stroke: var(--nt-label); stroke-width: 1; stroke-dasharray: 4 4; opacity: .6; }
.nt-demo__area { fill: var(--nt-accent); opacity: .14; stroke: none; }
.nt-demo__line { fill: none; stroke: var(--nt-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.nt-demo__area.is-neg { fill: var(--nt-neg); opacity: .2; }
.nt-demo__line.is-neg { stroke: var(--nt-neg); stroke-width: 1.8; }
@media (prefers-color-scheme: light) {
  .nt-demo__line { stroke: var(--nt-pos); }
  .nt-demo__area { fill: var(--nt-accent); opacity: .35; }
}
.nt-demo__track { fill: var(--nt-soft); }
.nt-demo__bar-fill.is-pos { fill: var(--nt-accent); }
.nt-demo__bar-fill.is-neg { fill: var(--nt-neg); }
.nt-demo__bar-fill.is-flat { fill: var(--nt-label); }
.nt-demo__zero { stroke: var(--nt-label); stroke-width: 1; }

/* Setups */
.nt-demo__setups { display: grid; gap: 12px; }
.nt-demo__setup { display: grid; gap: 5px; }
.nt-demo__setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.nt-demo__setup-name { font-weight: 600; }
.nt-demo__setup-head strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-demo__setup-meta { font-size: 11px; color: var(--nt-muted); }

/* Leitura */
.nt-demo__insight {
  display: grid; gap: 5px; padding: 10px 11px; border-radius: 10px;
  background: var(--nt-accent-bg); border: 1px solid transparent; font-size: 12.5px;
}
.nt-demo__insight.is-pos, .nt-demo__insight.is-neg { color: var(--nt-ink); }
.nt-demo__insight.is-neg { background: var(--nt-neg-bg); }
.nt-demo__insight-tag { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--nt-accent-ink); }
.nt-demo__insight.is-neg .nt-demo__insight-tag { color: var(--nt-neg); }

/* Revisão do dia */
.nt-demo__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-demo__chip {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 6px 10px; font-size: 12px;
  background: var(--nt-surface); border: 1px solid var(--nt-line); border-radius: 8px;
}
.nt-demo__chip span { color: var(--nt-muted); }
.nt-demo__status { font-size: 11.5px; color: var(--nt-muted); }
.nt-demo__previous {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; font-size: 12.5px;
  border-radius: 10px; background: var(--nt-accent-bg); color: var(--nt-ink);
}
.nt-demo__previous-icon { color: var(--nt-accent-ink); font-weight: 700; }
.nt-demo__field { display: grid; gap: 5px; }
.nt-demo__label { font-size: 12.5px; font-weight: 650; }
.nt-demo__textarea {
  padding: 9px 11px; min-height: 2.9em; font-size: 13px; line-height: 1.45;
  background: var(--nt-field); border: 1px solid var(--nt-line); border-radius: 9px;
}
.nt-demo__actions { display: flex; justify-content: flex-end; }
.nt-demo__button {
  display: inline-block; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  background: var(--nt-accent); color: var(--nt-accent-contrast);
}

/* Selo */
.nt-demo__badge {
  display: table; margin: 10px 0 0 auto !important; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--nt-muted);
  border: 1px dashed var(--nt-line);
}

/* Tamanhos menores do contêiner */
@container nt-demo (max-width: 720px) {
  .nt-demo__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nt-demo__kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nt-demo__grid, .nt-demo__grid--analysis { grid-template-columns: minmax(0, 1fr); }
  .nt-demo__chart--drawdown { height: 70px; }
}
@container nt-demo (max-width: 520px) {
  .nt-demo__body { padding: 12px; gap: 10px; }
  .nt-demo__bar { padding: 8px 10px; gap: 8px; font-size: 11px; }
  .nt-demo__period { display: none; }
  .nt-demo__title { font-size: 19px; }
  .nt-demo__muted { font-size: 12px; }
  .nt-demo__kpis--3 { grid-template-columns: minmax(0, 1fr); }
  .nt-demo__kpis--3 .nt-demo__kpi { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .nt-demo__kpis--3 .nt-demo__kpi-sub { display: none; }
  .nt-demo__kpi { padding: 10px 11px; }
  .nt-demo__kpi-value { font-size: 16px; white-space: normal; }
  .nt-demo__panel { padding: 12px; }
}
@container nt-demo (max-width: 380px) {
  .nt-demo__dots { display: none; }
  .nt-demo__head { flex-direction: column; }
  .nt-demo__kpi-value { font-size: 15px; }
  .nt-demo__yaxis { display: none; }
  .nt-demo__plot { grid-template-columns: minmax(0, 1fr); }
}