/* Super-Trader painel: tokens e classes da Slyv, copiados de alinhamento/assets/tokens.css e bundle.css (T-069).
   Fontes Barlow Condensed, IBM Plex Sans e Mono: auto-hospedadas em fontes/ (WOFF2, OFL); a fonte do sistema é só fallback. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fontes/BarlowCondensed-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fontes/IBMPlexSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fontes/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fontes/IBMPlexMono-Medium.woff2') format('woff2');
}
:root, [data-theme="light"] {
  --ground: #FAFBFC; /* Fundo da página (com a grade de 32px em line-subtle por cima). Escuro: o mesmo preto do terminal. */
  --ground-pure: #FFFFFF; /* Superfície de destaque extremo em relação ao ground: branco absoluto no claro, preto quase absoluto no escuro. */
  --ground-subtle: #F1F4F8; /* Hover do botão ghost e áreas levemente rebaixadas. */
  --ground-elevated: #FFFFFF; /* Superfícies elevadas (cartões, painéis) sobre o ground. */
  --ink: #0D1117; /* Texto principal, títulos e traços do desenho técnico. 18.27:1 sobre ground no claro, 17.39:1 no escuro. */
  --ink-soft: #485260; /* Texto de apoio: lede, parágrafos de cartão, navegação, rodapé. 7.64:1 sobre ground no claro; 9.63:1 no escuro (8.81:1 sobre ground-subtle). */
  --ink-muted: #626D7B; /* Metadados de menor peso (carimbo do rodapé, eixos). Claro: 5.08:1 sobre ground, 4.77:1 sobre ground-subtle. Escuro: 6.15:1 sobre ground, 5.62:1 sobre ground-subtle. */
  --line: #D0D7DE; /* Divisórias de seção, bordas de célula e da etiqueta de status. Decorativa: não carrega informação sozinha. */
  --line-subtle: #E8ECF0; /* A grade de fundo de 32px do body. */
  --line-strong: #0D1117; /* Borda do botão ghost, cantos de registro dos cartões, eixo da timeline e contorno dos marcadores. 18:1 / 17:1. */
  --lime: #C6FF3D; /* Cor-assinatura: preenchimento do botão primário, marcadores quadrados, ponto do terminal. Texto sobre lime é sempre on-lime (16.02:1). NUNCA como texto sobre fundo claro; no tema escuro pode ser texto (16.02:1 sobre ground). */
  --on-lime: #0D1117; /* Texto e ícones sobre preenchimento lime (botão primário), nos dois temas. 16.02:1. */
  --lime-dim: rgba(198, 255, 61, 0.20); /* Realce translúcido de lime sobre ground (preenchimentos de fundo). */
  --lime-glow: rgba(198, 255, 61, 0.45); /* Brilho de lime; só no tema escuro. */
  --lime-border: #7CB800; /* Lime escuro para blocos de composição (capa). 2.33:1 sobre ground claro: nunca texto nem borda que carrega informação. */
  --terminal-ground: var(--ground-elevated); /* Fundo do bloco Terminal e do Aviso: segue o tema (alias de ground-elevated). O bloco não é mais uma ilha escura. */
  --terminal-ink: var(--ink); /* Texto principal no Terminal e no Aviso (alias de ink). */
  --terminal-ink-soft: var(--ink-soft); /* Texto de apoio no Terminal e no Aviso (alias de ink-soft; 7.64:1 claro, 8.81:1 escuro sobre ground-elevated). */
  --terminal-line: var(--line-strong); /* Borda do Aviso (alias de line-strong). */
  --mk: var(--ink); /* Cor da marca S no header (a SVG inline herda via currentColor). */
  --lime-txt: var(--ink); /* Texto do eyebrow: ink no claro (lime nunca é texto sobre fundo claro), lime no escuro (16.02:1). */
  --focus-ring: var(--ink); /* Anel de foco do teclado: 2px sólido com 2px de folga. Claro: ink (18:1 sobre ground, 16:1 sobre lime). Escuro: lime (16:1). */
  --status-ok: var(--lime); /* Ponto de estado OK (quadrado). Sempre com contorno line-strong: o contorno dá o 3:1 sobre o fundo claro. */
  --status-wait: #E8A317; /* Ponto de estado AGUARDANDO (losango). Sempre com contorno line-strong e texto ao lado; nunca texto. */
  --status-error: #C62828; /* Ponto de estado ERRO (círculo). 5.43:1 sobre ground claro, 6.77:1 no escuro. */
  --success-ink: #3F6B00; /* Texto de sucesso (mensagem, marcador + do diff). 6.12:1 sobre ground claro, 16:1 no escuro. */
  --warn-ink: #8A5300; /* Texto de atenção (código vencido, risco médio). 6.11:1 sobre ground claro, 5.36:1 sobre warn-dim; 10.67:1 no escuro. */
  --danger-ink: #B42318; /* Texto de erro e de risco alto. 6.35:1 sobre ground claro, 5.21:1 sobre danger-dim; 8.29:1 no escuro. */
  --danger: #B42318; /* Preenchimento e borda de ação destrutiva (botão Apagar, faixa e borda do cartão). Texto em on-danger. */
  --on-danger: #FFFFFF; /* Texto sobre danger: branco no claro (6.57:1), preto no escuro (7.44:1). */
  --danger-dim: rgba(180, 35, 24, 0.12); /* Fundo de linha removida no diff, de campo com erro e da etiqueta de risco alto. ink e danger-ink seguem AA sobre ele. */
  --warn-dim: rgba(232, 163, 23, 0.18); /* Fundo da etiqueta de risco médio e do aviso de código vencido. */
  --diff-add: rgba(198, 255, 61, 0.25); /* Fundo de linha adicionada no diff. Texto continua ink; o marcador + usa success-ink. */
  --scrim: rgba(13, 17, 23, 0.55); /* Véu atrás de diálogo. */
  --glow-lime: 0 0 6px #c6ff3d; /* Brilho do ponto do Terminal, só no tema escuro. Única sombra do sistema. */
}
[data-theme="dark"] {
  --ground: #0D1117; /* Fundo da página (com a grade de 32px em line-subtle por cima). Escuro: o mesmo preto do terminal. */
  --ground-pure: #010409; /* Superfície de destaque extremo em relação ao ground: branco absoluto no claro, preto quase absoluto no escuro. */
  --ground-subtle: #161B22; /* Hover do botão ghost e áreas levemente rebaixadas. */
  --ground-elevated: #161B22; /* Superfícies elevadas (cartões, painéis) sobre o ground. */
  --ink: #F0F6FC; /* Texto principal, títulos e traços do desenho técnico. 18.27:1 sobre ground no claro, 17.39:1 no escuro. */
  --ink-soft: #B1BAC4; /* Texto de apoio: lede, parágrafos de cartão, navegação, rodapé. 7.64:1 sobre ground no claro; 9.63:1 no escuro (8.81:1 sobre ground-subtle). */
  --ink-muted: #8B949E; /* Metadados de menor peso (carimbo do rodapé, eixos). Claro: 5.08:1 sobre ground, 4.77:1 sobre ground-subtle. Escuro: 6.15:1 sobre ground, 5.62:1 sobre ground-subtle. */
  --line: #30363D; /* Divisórias de seção, bordas de célula e da etiqueta de status. Decorativa: não carrega informação sozinha. */
  --line-subtle: #161B22; /* A grade de fundo de 32px do body. */
  --line-strong: #F0F6FC; /* Borda do botão ghost, cantos de registro dos cartões, eixo da timeline e contorno dos marcadores. 18:1 / 17:1. */
  --lime: #C6FF3D; /* Cor-assinatura: preenchimento do botão primário, marcadores quadrados, ponto do terminal. Texto sobre lime é sempre on-lime (16.02:1). NUNCA como texto sobre fundo claro; no tema escuro pode ser texto (16.02:1 sobre ground). */
  --on-lime: #0D1117; /* Texto e ícones sobre preenchimento lime (botão primário), nos dois temas. 16.02:1. */
  --lime-dim: rgba(198, 255, 61, 0.20); /* Realce translúcido de lime sobre ground (preenchimentos de fundo). */
  --lime-glow: rgba(198, 255, 61, 0.45); /* Brilho de lime; só no tema escuro. */
  --lime-border: #7CB800; /* Lime escuro para blocos de composição (capa). 2.33:1 sobre ground claro: nunca texto nem borda que carrega informação. */
  --terminal-ground: var(--ground-elevated); /* Fundo do bloco Terminal e do Aviso: segue o tema (alias de ground-elevated). O bloco não é mais uma ilha escura. */
  --terminal-ink: var(--ink); /* Texto principal no Terminal e no Aviso (alias de ink). */
  --terminal-ink-soft: var(--ink-soft); /* Texto de apoio no Terminal e no Aviso (alias de ink-soft; 7.64:1 claro, 8.81:1 escuro sobre ground-elevated). */
  --terminal-line: var(--line-strong); /* Borda do Aviso (alias de line-strong). */
  --mk: var(--ink); /* Cor da marca S no header (a SVG inline herda via currentColor). */
  --lime-txt: var(--lime); /* Texto do eyebrow: ink no claro (lime nunca é texto sobre fundo claro), lime no escuro (16.02:1). */
  --focus-ring: var(--lime); /* Anel de foco do teclado: 2px sólido com 2px de folga. Claro: ink (18:1 sobre ground, 16:1 sobre lime). Escuro: lime (16:1). */
  --status-ok: var(--lime); /* Ponto de estado OK (quadrado). Sempre com contorno line-strong: o contorno dá o 3:1 sobre o fundo claro. */
  --status-wait: #E8A317; /* Ponto de estado AGUARDANDO (losango). Sempre com contorno line-strong e texto ao lado; nunca texto. */
  --status-error: #FF6B5E; /* Ponto de estado ERRO (círculo). 5.43:1 sobre ground claro, 6.77:1 no escuro. */
  --success-ink: var(--lime); /* Texto de sucesso (mensagem, marcador + do diff). 6.12:1 sobre ground claro, 16:1 no escuro. */
  --warn-ink: #F5B84A; /* Texto de atenção (código vencido, risco médio). 6.11:1 sobre ground claro, 5.36:1 sobre warn-dim; 10.67:1 no escuro. */
  --danger-ink: #FF8A80; /* Texto de erro e de risco alto. 6.35:1 sobre ground claro, 5.21:1 sobre danger-dim; 8.29:1 no escuro. */
  --danger: #FF7A6E; /* Preenchimento e borda de ação destrutiva (botão Apagar, faixa e borda do cartão). Texto em on-danger. */
  --on-danger: #0D1117; /* Texto sobre danger: branco no claro (6.57:1), preto no escuro (7.44:1). */
  --danger-dim: rgba(255, 122, 110, 0.16); /* Fundo de linha removida no diff, de campo com erro e da etiqueta de risco alto. ink e danger-ink seguem AA sobre ele. */
  --warn-dim: rgba(232, 163, 23, 0.16); /* Fundo da etiqueta de risco médio e do aviso de código vencido. */
  --diff-add: rgba(198, 255, 61, 0.16); /* Fundo de linha adicionada no diff. Texto continua ink; o marcador + usa success-ink. */
  --scrim: rgba(1, 4, 9, 0.72); /* Véu atrás de diálogo. */
}
:root {
  --space-8: 8px; /* Gap entre ponto e texto na barra do terminal; recuo do marcador do eyebrow. */
  --space-12: 12px; /* Gap entre botões na cta-row. */
  --space-16: 16px; /* Gap do lockup do header; recuo do texto após o filete lime-border. */
  --space-20: 20px; /* Margem sob o eyebrow; gutter lateral no mobile (<560px). */
  --space-24: 24px; /* Margem sobre o lede; padding horizontal das etapas do pipeline; gap da timeline. */
  --space-28: 28px; /* Padding horizontal da célula proof e do terminal. */
  --space-32: 32px; /* Padding vertical da célula proof e do terminal; gap da grade de diferenciais; passo da grade de fundo. */
  --space-40: 40px; /* Gutter lateral do wrap e do header no desktop; margem sobre a grade de diferenciais. */
  --space-56: 56px; /* Padding vertical de seção (sistema-section, cta-final); gap do hero. */
  --space-72: 72px; /* Padding vertical do hero (48px no mobile). */
  --space-80: 80px; /* Padding vertical da seção tese (48px no mobile). */
  --radius-none: 0; /* Tudo: botões, cartões, terminal, etiquetas. O sistema é de cantos retos. */
  --radius-dot: 50%; /* Só círculos: o ponto do Terminal, o ponto de estado de ERRO e o Widget flutuante. */
  --border-hairline: 1px; /* Divisórias em line e line-subtle; borda do terminal. */
  --border-strong: 1.5px; /* Borda do botão ghost; cantos de registro dos cartões e eixo da timeline em line-strong. */
  --border-accent: 2px; /* Largura do anel de foco e das marcas fortes. */
  --focus-width: 2px; /* Espessura do anel de foco (outline). */
  --focus-offset: 2px; /* Folga entre o elemento e o anel de foco; nas células de prova o anel entra para dentro (-4px). */
  --wrap-max: 1120px; /* Largura máxima do conteúdo (.wrap). */
  --header-height: 76px; /* Altura do header fixo de marca + navegação. */
  --grid-cell: 32px; /* Célula da grade de fundo em line-subtle. */
  --bp-tablet: 680px; /* Abaixo disso: grades viram uma coluna, hero empilha, h1 vai a 40px. */
  --bp-mobile: 560px; /* Abaixo disso: gutter 20px, assinatura some do header, proof em uma coluna. */
  --app-window-w: 1100px; /* Largura padrão da janela do app Sled. */
  --app-window-h: 720px; /* Altura padrão da janela do app Sled. */
  --app-sidebar: 224px; /* Largura da barra lateral de navegação do app. */
  --app-topbar: 64px; /* Altura da barra de título de cada tela do app. */
  --target-min: 36px; /* Altura mínima de itens clicáveis densos (menu, abas compactas); botões e campos ficam em 44px. */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-corpo: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --text-display-h1: 700 76px/0.94 var(--font-display); /* Título da página, sempre em caixa alta. Fluido: clamp(44px, 7vw, 76px); 40px abaixo de 680px. */
  --text-display-thesis: 700 44px/1.05 var(--font-display); /* Frase-tese centralizada, caixa alta, até 32ch. Fluido: clamp(28px, 4vw, 44px). */
  --text-display-title: 700 34px/1.4 var(--font-display); /* Nome de sistema / título de seção (proof-title). Caixa como escrito. */
  --text-display-card: 700 20px/1.4 var(--font-display); /* Título de cartão de diferencial e de etapa do pipeline, caixa alta. */
  --text-display-timeline: 700 18px/1.4 var(--font-display); /* Título de marco da timeline, caixa alta. */
  --text-lede: 400 17px/1.55 var(--font-corpo); /* Parágrafo de abertura, em ink-soft, até 46ch. */
  --text-body: 400 14px/1.5 var(--font-corpo); /* Texto de cartão (proof-text, dif-text), em ink-soft. */
  --text-body-sm: 400 13px/1.5 var(--font-corpo); /* Texto da timeline, em ink-soft. */
  --text-eyebrow: 400 11px/1.4 var(--font-mono); /* Rótulo de documento acima do título, caixa alta, com o marcador lime de 5px. */
  --text-label: 400 11px/1.4 var(--font-mono); /* Botões, navegação, proof-label e linha do rodapé, caixa alta. */
  --text-tag: 400 10px/1.4 var(--font-mono); /* IDs (01.1, PORTA_01), status do sistema e rótulos do desenho técnico. */
  --text-stamp: 400 9px/1.4 var(--font-mono); /* Carimbo do rodapé, em ink-muted. */
  --text-app-title: 700 28px/1 var(--font-display); /* Título da tela no app, caixa alta. */
  --text-app-card-title: 700 18px/1.1 var(--font-display); /* Título de cartão de camada, papel de modelo, skill. */
  --text-app-body: 400 14px/1.5 var(--font-corpo); /* Texto corrido do app. */
  --text-app-code: 400 12px/1.6 var(--font-mono); /* Linhas do visualizador de diff. */
  --text-app-digit: 500 28px/1 var(--font-mono); /* Dígitos do campo de código. */
}
.display-h1 {
  font-family: var(--font-display);
  font-size: 76px;
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.display-thesis {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
}
.display-title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}
.display-card {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}
.display-timeline {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0;
}
.lede {
  font-family: var(--font-corpo);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-corpo);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-corpo);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.14em;
}
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.tag {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.app-title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.app-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.app-body {
  font-family: var(--font-corpo);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.app-code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.app-digit {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
}
/* Slyv Solutions — classes do site (static/css/base.css REV. 1.0). As famílias vêm de tokens.css (--font-display, --font-corpo, --font-mono). */
*{box-sizing:border-box}
html,body{margin:0}
body{background-color:var(--ground);background-image:linear-gradient(to right, var(--line-subtle) 1px, transparent 1px), linear-gradient(to bottom, var(--line-subtle) 1px, transparent 1px);background-size:32px 32px;color:var(--ink);font-family:var(--font-corpo)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 40px}

.site-header{height:76px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;padding:0 40px}
.lockup{display:flex;align-items:center;gap:16px}
.mk{display:block;height:38px;color:var(--mk)}
.mk svg{height:100%;width:auto;display:block}
.sig-header{height:44px;width:auto;display:block}
.nav{display:flex;gap:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.nav a:hover{color:var(--ink)}

.hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding:72px 0}
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime-txt);margin:0 0 20px}
h1{font-family:var(--font-display);font-weight:700;font-size:clamp(44px, 7vw, 76px);line-height:.94;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin:0}
.lede{font-family:var(--font-corpo);font-weight:400;font-size:17px;line-height:1.55;
  color:var(--ink-soft);max-width:46ch;margin:24px 0 0}
.cta-row{display:flex;gap:12px;margin-top:34px}
.btn{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 22px;display:inline-block}
.btn-primary{background:var(--lime);color:var(--on-lime);border:none}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-ghost:hover{background:var(--ground-subtle)}
.eyebrow::before{content:"";display:inline-block;width:5px;height:5px;background:var(--lime);outline:1px solid var(--ink);margin-right:8px;vertical-align:1px}

.td{width:100%;height:auto;max-width:520px}
.td-grid line{stroke:var(--line);stroke-width:1;opacity:.65}
.td-axis{stroke:var(--ink-muted);stroke-width:1;stroke-dasharray:7 5;animation:td-scan 8s linear infinite}
.td-body{fill:none;stroke:var(--ink);stroke-width:1.75}
.td-eye{fill:var(--lime);fill-opacity:.16;stroke:var(--ink);stroke-width:1.5;animation:td-pulso 3.2s ease-in-out infinite}
.td-dim line{stroke:var(--ink-soft);stroke-width:1}
.td-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;fill:var(--ink);text-transform:uppercase;font-weight:500}
.td-fig{fill:var(--ink);font-weight:700}

.td-eye:nth-of-type(2){animation-delay:1.6s}
@keyframes td-pulso{0%,100%{fill-opacity:.16}50%{fill-opacity:.28}}
@keyframes td-scan{from{stroke-dashoffset:0}to{stroke-dashoffset:-24}}

.proof{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr}
.proof-cell{border-left:1px solid var(--line);padding:32px 28px;display:block}
.proof-cell:first-child{border-left:none}
.proof-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.proof-title{font-family:var(--font-display);font-weight:700;font-size:34px;
  color:var(--ink);margin:8px 0 0}
.proof-text{font-family:var(--font-corpo);font-weight:400;font-size:14px;line-height:1.5;
  color:var(--ink-soft);margin:10px 0 0}

.site-footer{border-top:1px solid var(--line);padding:44px 0 56px;display:flex;
  flex-direction:column;align-items:center;gap:18px}
.sig{height:84px;width:auto}
.footer-line{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.footer-stamp{font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-muted);opacity:1;margin-top:-10px}

.sistema-section{border-top:1px solid var(--line);padding:56px 0}
.sys-stamp{display:flex;align-items:baseline;gap:14px;margin:0 0 20px}
.sys-stamp .eyebrow{margin:0}
.sys-stamp .sys-status{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);
  padding:3px 8px}
.dif-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px}
/* rev.2: cantos de registro (folha técnica) no lugar do filete lateral lime */
.dif-card{position:relative;padding:22px 22px 24px}
.dif-card::before,.dif-card::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--line-strong)}
.dif-card::before{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.dif-card::after{right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.dif-id{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-soft);margin:0 0 6px}
.dif-id::before{content:"";display:inline-block;width:5px;height:5px;background:var(--lime);outline:1px solid var(--line-strong);margin-right:8px;vertical-align:1px}
.dif-title{font-family:var(--font-display);font-weight:700;font-size:20px;
  text-transform:uppercase;color:var(--ink);margin:0}
.dif-text{font-family:var(--font-corpo);font-weight:400;font-size:14px;line-height:1.5;
  color:var(--ink-soft);margin:10px 0 0}
.cta-final{border-top:1px solid var(--line);padding:56px 0;text-align:center}

.pipeline{display:flex;border-top:1px dashed var(--line);margin-top:44px}
.pipeline-step{flex:1;position:relative;padding:22px 24px 0 24px;border-left:1px dashed var(--line)}
.pipeline-step:first-child{border-left:none;padding-left:0}
.pipeline-gate{position:absolute;top:-9px;left:24px;background:var(--ground);
  padding:0 8px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink)}
.pipeline-step:first-child .pipeline-gate{left:0}

/* rev.2: eixo contínuo com nós lime no lugar do filete lateral */
.timeline{display:flex;gap:0;margin-top:44px}
.timeline-item{position:relative;flex:1;border-top:1.5px solid var(--line-strong);padding:22px 24px 0 0}
.timeline-item::before{content:"";position:absolute;top:-4.25px;left:0;width:7px;height:7px;background:var(--lime);outline:1px solid var(--line-strong)}
.timeline-id{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink-soft);margin:0 0 6px}
.timeline-title{font-family:var(--font-display);font-weight:700;font-size:18px;
  text-transform:uppercase;color:var(--ink);margin:0}
.timeline-text{font-family:var(--font-corpo);font-weight:400;font-size:13px;line-height:1.5;
  color:var(--ink-soft);margin:10px 0 0}

/* rev.5: o Terminal segue o tema — painel com cantos de registro, não uma ilha escura */
.technical-terminal{background:var(--ground-elevated);color:var(--ink);border:1px solid var(--line);padding:32px 28px;margin-top:32px;position:relative}
.technical-terminal::before,.technical-terminal::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--line-strong);pointer-events:none}
.technical-terminal::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.technical-terminal::after{right:-1px;bottom:-1px;border-right-width:1.5px;border-bottom-width:1.5px}
.terminal-bar{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--lime-txt);margin-bottom:20px;text-transform:uppercase}
.terminal-dot{width:7px;height:7px;background:var(--lime);border-radius:50%;outline:1px solid var(--line-strong)}
[data-theme="dark"] .terminal-dot{box-shadow:var(--glow-lime)}
.technical-terminal .lede{color:var(--ink-soft)}

.thesis-section{border-top:1px solid var(--line);padding:80px 0;text-align:center}
.thesis-text{font-family:var(--font-display);font-weight:700;font-size:clamp(28px, 4vw, 44px);line-height:1.05;text-transform:uppercase;color:var(--ink);max-width:32ch;margin:0 auto}

/* rev.2: foco de teclado */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
.proof-cell:focus-visible{outline-offset:-4px}

/* rev.2: tema escuro — as marcas via <img> saem pretas; inverte para branco */
[data-theme="dark"] img.sig,[data-theme="dark"] img.sig-header{filter:invert(1)}
/* rev.5: assinatura inline (<svg><use>) herda a cor do tema, sem inverter */
svg.sig{width:104px;color:var(--ink)}
svg.sig-header{width:55px;color:var(--ink)}

.scene-track{position:relative}
.scene-stage{position:relative}
html.has-scroll .scene-stage{position:sticky;top:0;min-height:calc(100svh - 76px);overflow:clip}

@media (max-width:680px){
  .dif-grid{grid-template-columns:1fr}
  .pipeline{flex-direction:column;border-top:none;gap:28px}
  .pipeline-step{border-left:none;border-top:1px dashed var(--line);padding:22px 0 0 0}
  .pipeline-step:first-child{border-top:none;padding-top:0}
  .pipeline-gate{left:0;padding-left:0;background:transparent}
  .timeline{flex-direction:column;gap:0}
  .timeline-item{border-top:none;border-left:1.5px solid var(--line-strong);padding:0 0 28px 20px}
  .timeline-item::before{top:0;left:-4.25px}
  .hero{grid-template-columns:1fr;padding:48px 0}
  .hero>div:first-child{order:1}
  .hero>div:last-child{order:2;margin-top:32px}
  h1{font-size:40px}
  .thesis-section{padding:48px 0}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .site-header{padding:0 20px}
  .sig-header{display:none}
  .nav{gap:14px;font-size:10px}
  .proof{grid-template-columns:1fr}
  .proof-cell{border-left:none;border-top:1px solid var(--line)}
  .proof-cell:first-child{border-top:none}
}

@media (prefers-reduced-motion: reduce){
  .td-eye, .td-axis{animation:none}
  .td-eye{fill-opacity:.28}
  html.has-scroll .scene-track{height:auto !important;min-height:auto !important}
  html.has-scroll .scene-stage{position:static;min-height:auto;overflow:visible}
  .scene-track, .scene-stage{animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important}
  .thesis-text, .proof-cell, .dif-card, .pipeline-step{animation:none !important;opacity:1 !important;transform:none !important}
}

/* =====================================================================
   rev.3 — componentes de APLICATIVO (Sled, desktop Windows/Ubuntu)
   Prefixo sl-. Só tokens; cantos retos; sem sombra.
   ===================================================================== */
.sl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.sl-grid{background-color:var(--ground);background-image:linear-gradient(to right,var(--line-subtle) 1px,transparent 1px),linear-gradient(to bottom,var(--line-subtle) 1px,transparent 1px);background-size:32px 32px}
.btn{cursor:pointer;border-radius:0;line-height:1.2;text-align:center}
.btn-danger{background:var(--danger);color:var(--on-danger);border:none}
.btn-danger:hover{outline:1.5px solid var(--danger);outline-offset:2px}
.btn-sm{padding:10px 14px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn-link{background:none;border:0;padding:0;font:inherit;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- Casca do app ---- */
.sl-app{display:grid;grid-template-columns:224px minmax(0,1fr);color:var(--ink);font-family:var(--font-corpo);font-size:14px;line-height:1.5}
.sl-side{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--ground-elevated);min-height:0}
.sl-side-brand{display:flex;align-items:center;gap:12px;height:64px;padding:0 20px;border-bottom:1px solid var(--line)}
.sl-wordmark{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.sl-nav{display:flex;flex-direction:column;padding:12px 0;margin:0;list-style:none}
.sl-nav-item{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 20px;background:none;border:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:left;cursor:pointer}
.sl-nav-item::before{content:"";width:5px;height:5px;flex:none;outline:1px solid transparent}
.sl-nav-item:hover{color:var(--ink);background:var(--ground-subtle)}
.sl-nav-item[aria-current="page"]{color:var(--ink);background:var(--ground-subtle)}
.sl-nav-item[aria-current="page"]::before{background:var(--lime);outline-color:var(--line-strong)}
.sl-nav-item:focus-visible{outline-offset:-4px}
.sl-count{margin-left:auto;min-width:20px;padding:1px 6px;background:var(--ink);color:var(--ground);font-size:10px;letter-spacing:.06em;text-align:center}
.sl-side-foot{margin-top:auto;padding:16px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.sl-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.sl-topbar{display:flex;align-items:center;gap:16px;height:64px;flex:none;padding:0 28px;border-bottom:1px solid var(--line);background:var(--ground)}
.sl-title{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1;letter-spacing:0;text-transform:uppercase;color:var(--ink);margin:0}
.sl-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin:0}
.sl-card-title{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.1;text-transform:uppercase;color:var(--ink);margin:0}
.sl-text{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0}
.sl-text-sm{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0}
.sl-panel{background:var(--ground-elevated);border:1px solid var(--line)}
.sl-corners{position:relative}
.sl-corners::before,.sl-corners::after{content:"";position:absolute;width:12px;height:12px;border:0 solid var(--line-strong);pointer-events:none}
.sl-corners::before{top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px}
.sl-corners::after{right:-1px;bottom:-1px;border-right-width:1.5px;border-bottom-width:1.5px}

/* ---- ET: placeholder da logo ---- */
.sl-et{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--ink);color:var(--ground);font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em;line-height:1}

/* ---- Botão só com ícone ---- */
.sl-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;padding:0;background:none;border:1px solid transparent;color:inherit;cursor:pointer}
.sl-icon-btn:hover{border-color:var(--line)}
.sl-icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:square}

/* ---- Ponto de estado ---- */
.sl-dot{display:inline-block;width:10px;height:10px;flex:none;background:var(--status-ok);outline:1.5px solid var(--line-strong)}
.sl-dot[data-state="wait"]{background:var(--status-wait);transform:rotate(45deg) scale(.86)}
.sl-dot[data-state="error"]{background:var(--status-error);border-radius:50%}
.sl-dot[data-state="off"]{background:transparent}
.sl-status{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* ---- Etiqueta ---- */
.sl-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--line);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;line-height:1.4}
.sl-tag[data-tone="ink"]{color:var(--ink);border-color:var(--line-strong)}
.sl-tag[data-tone="ok"]{color:var(--success-ink);border-color:currentColor}
.sl-tag[data-tone="warn"]{color:var(--warn-ink);border-color:currentColor;background:var(--warn-dim)}
.sl-tag[data-tone="danger"]{color:var(--danger-ink);border-color:currentColor;background:var(--danger-dim)}

/* ---- Campos ---- */
.sl-label{display:block;margin:0 0 8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sl-input,.sl-select,.sl-textarea{display:block;width:100%;min-height:44px;padding:10px 12px;border:1.5px solid var(--ink-muted);border-radius:0;background:var(--ground-elevated);color:var(--ink);font:inherit;font-size:14px;line-height:1.4}
.sl-input::placeholder,.sl-textarea::placeholder{color:var(--ink-muted)}
.sl-textarea{resize:none}
.sl-select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer}
.sl-select-wrap{position:relative}
.sl-select-wrap::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.sl-help{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.sl-help[data-tone="error"]{color:var(--danger-ink)}
.sl-help[data-tone="warn"]{color:var(--warn-ink)}
.sl-help[data-tone="ok"]{color:var(--success-ink)}
.sl-help .sl-icon{margin-top:2px}
.sl-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink);cursor:pointer}
.sl-check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:1px 0 0;border:1.5px solid var(--line-strong);border-radius:0;background:var(--ground-elevated);display:grid;place-content:center;cursor:pointer}
.sl-check input:checked{background:var(--lime)}
.sl-check input:checked::after{content:"";width:8px;height:4px;border-left:2px solid var(--on-lime);border-bottom:2px solid var(--on-lime);transform:rotate(-45deg) translate(1px,-1px)}

/* ---- Toggle (interruptor) ---- */
.sl-toggle{display:inline-flex;align-items:center;gap:12px;min-height:36px;padding:0;background:none;border:0;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.sl-toggle-track{position:relative;width:40px;height:22px;flex:none;border:1.5px solid var(--line-strong);background:var(--ground-subtle)}
.sl-toggle-thumb{position:absolute;top:3px;left:3px;width:13px;height:13px;background:var(--ink-muted)}
.sl-toggle[aria-checked="true"] .sl-toggle-track{background:var(--lime)}
.sl-toggle[aria-checked="true"] .sl-toggle-thumb{left:21px;background:var(--on-lime)}
.sl-toggle-state{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);min-width:5.5em}
.sl-toggle[disabled]{opacity:.45;cursor:not-allowed}

/* ---- Campo de código (6 dígitos) ---- */
.sl-code{display:flex;align-items:center;gap:10px;margin:0;padding:0;border:0}
.sl-code-gap{width:10px;height:1.5px;background:var(--ink-muted);flex:none}
.sl-code-cell{width:56px;height:68px;flex:none;padding:0;border:1.5px solid var(--ink-muted);border-radius:0;background:var(--ground-elevated);color:var(--ink);font-family:var(--font-mono);font-size:28px;font-weight:500;text-align:center;caret-color:var(--ink)}
.sl-code-cell.is-filled{border-color:var(--line-strong)}
.sl-code-cell.is-active{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);border-color:var(--line-strong)}
.sl-code[data-state="error"] .sl-code-cell{border:2px solid var(--danger);background:var(--danger-dim)}
.sl-code[data-state="expired"] .sl-code-cell{border-style:dashed;border-color:var(--ink-muted);background:var(--ground-subtle);color:var(--ink-muted)}
.sl-code[data-state="done"] .sl-code-cell{border-color:var(--line-strong);background:var(--diff-add)}
.sl-attempts{display:inline-flex;align-items:center;gap:4px}
.sl-attempts span{width:8px;height:8px;border:1px solid var(--line-strong)}
.sl-attempts span.is-left{background:var(--ink)}

/* ---- Cartão de camada ---- */
.sl-layer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:start;padding:14px 16px;background:var(--ground-elevated);border:1px solid var(--line)}
.sl-layer-num{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);padding-top:1px}
.sl-layer-desc{grid-column:2 / 4;font-size:13px;line-height:1.45;color:var(--ink-soft);margin:0}
.sl-layer-meta{grid-column:2 / 4;display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.sl-progress{position:relative;flex:1;height:8px;border:1px solid var(--line-strong);background:var(--ground)}
.sl-progress-bar{position:absolute;top:0;left:0;bottom:0;background:var(--lime);border-right:1px solid var(--line-strong)}
.sl-layer[data-state="done"] .sl-layer-num::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;background:var(--lime);outline:1px solid var(--line-strong);vertical-align:1px}
.sl-layer[data-state="doing"]{border:1.5px solid var(--line-strong)}
.sl-layer[data-state="todo"]{border:1px dashed var(--ink-muted);background:transparent}

/* ---- Risco ---- */
.sl-risk{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.sl-risk-bars{display:inline-flex;gap:3px}
.sl-risk-bars span{width:16px;height:8px;border:1px solid var(--line-strong)}
.sl-risk[data-level="low"] .sl-risk-bars span:nth-child(-n+1){background:var(--status-ok)}
.sl-risk[data-level="medium"] .sl-risk-bars span:nth-child(-n+2){background:var(--status-wait)}
.sl-risk[data-level="high"] .sl-risk-bars span{background:var(--danger)}
.sl-risk[data-level="high"]{color:var(--danger-ink)}
.sl-risk[data-level="medium"]{color:var(--warn-ink)}
.sl-risk[data-level="low"]{color:var(--success-ink)}

/* ---- Cartão de aprovação ---- */
.sl-approval{display:flex;flex-direction:column;background:var(--ground-elevated);border:1.5px solid var(--line-strong);min-height:0}
.sl-approval-band{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--danger);color:var(--on-danger);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.sl-approval-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sl-approval-body{display:flex;flex-direction:column;gap:14px;padding:16px 20px;min-height:0;overflow:hidden}
.sl-approval-foot{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid var(--line);background:var(--ground-subtle)}
.sl-approval-foot .sl-spacer{flex:1}
.sl-approval.is-destructive{border:2px solid var(--danger)}
.sl-approval.is-destructive .sl-approval-head{border-bottom-color:var(--danger)}
.sl-changes{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.sl-changes b{display:inline-block;width:16px;font-weight:500}

/* ---- Visualizador de diff ---- */
.sl-diff{border:1px solid var(--line);background:var(--ground-elevated);font-family:var(--font-mono);font-size:12px;line-height:1.65;color:var(--ink);overflow:hidden}
.sl-diff-file{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--ground-subtle);font-size:11px;letter-spacing:.04em}
.sl-diff-line{display:grid;grid-template-columns:34px 34px 20px minmax(0,1fr);white-space:pre}
.sl-diff-line .n{padding-right:8px;text-align:right;color:var(--ink-soft);user-select:none}
.sl-diff-line .m{text-align:center;user-select:none}
.sl-diff-line[data-kind="add"]{background:var(--diff-add)}
.sl-diff-line[data-kind="add"] .m{color:var(--success-ink);font-weight:500}
.sl-diff-line[data-kind="del"]{background:var(--danger-dim)}
.sl-diff-line[data-kind="del"] .m{color:var(--danger-ink);font-weight:500}
.sl-diff-line[data-kind="gap"]{color:var(--ink-soft);background:var(--ground-subtle)}

/* ---- Seletor de modelo por papel ---- */
.sl-role{display:grid;grid-template-columns:minmax(0,1.1fr) auto minmax(0,1fr);gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.sl-seg{display:inline-flex;margin:0;padding:0;border:1.5px solid var(--line-strong)}
.sl-seg label{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-left:1px solid var(--line-strong);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.sl-seg label:first-of-type{border-left:none}
.sl-seg label:hover{color:var(--ink);background:var(--ground-subtle)}
.sl-seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sl-seg label:has(input:checked){background:var(--ink);color:var(--ground)}
.sl-seg label:has(input:focus-visible){outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);z-index:1}

/* ---- Abas ---- */
.sl-tabs{display:flex;border-bottom:1px solid var(--line)}
.sl-tab{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;background:none;border:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer}
.sl-tab::before{content:"";width:5px;height:5px;outline:1px solid transparent}
.sl-tab:hover{color:var(--ink)}
.sl-tab[aria-selected="true"]{color:var(--ink)}
.sl-tab[aria-selected="true"]::before{background:var(--lime);outline-color:var(--line-strong)}
.sl-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--line-strong)}
.sl-tab:focus-visible{outline-offset:-4px}

/* ---- Diálogo ---- */
.sl-scrim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--scrim);z-index:10}
.sl-dialog{width:460px;max-width:calc(100% - 48px);background:var(--ground-elevated);border:1.5px solid var(--line-strong);color:var(--ink)}
.sl-dialog.is-destructive{border:2px solid var(--danger)}
.sl-dialog-head{display:flex;align-items:flex-start;gap:12px;padding:22px 24px 0}
.sl-dialog-title{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.05;text-transform:uppercase;margin:0}
.sl-dialog-body{display:flex;flex-direction:column;gap:14px;padding:12px 24px 22px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.sl-dialog-foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--line);background:var(--ground-subtle)}
.sl-dialog.is-destructive .sl-dialog-head .sl-icon{color:var(--danger-ink);width:22px;height:22px;margin-top:1px}

/* ---- Aviso (toast) ---- */
.sl-toast{display:flex;align-items:flex-start;gap:12px;width:360px;padding:14px 12px 14px 16px;background:var(--ground-elevated);color:var(--ink);border:1.5px solid var(--line-strong)}
.sl-toast .sl-dot{margin-top:4px}
.sl-toast-body{flex:1;min-width:0}
.sl-toast-title{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sl-toast-text{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.sl-toast .btn-link{margin-top:8px;display:inline-block}
.sl-toast .sl-icon-btn{width:32px;height:32px;margin:-6px 0 0}

/* ---- Conversa ---- */
.sl-chat{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--ground-elevated)}
.sl-chat-log{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px;overflow:hidden}
.sl-msg{display:flex;flex-direction:column;gap:4px;max-width:88%}
.sl-msg[data-from="aluno"]{align-self:flex-end;align-items:flex-end}
.sl-msg-who{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.sl-msg-text{margin:0;padding:10px 12px;font-size:13px;line-height:1.5;border:1px solid var(--line);background:var(--ground);color:var(--ink)}
.sl-msg[data-from="aluno"] .sl-msg-text{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.sl-chat-compose{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}

/* ---- Widget flutuante ---- */
.sl-widget{position:relative;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;flex:none;padding:0;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--ground-elevated);color:var(--ink);cursor:pointer}
.sl-widget .sl-et{width:40px;height:40px;font-size:15px}
.sl-widget .sl-dot{position:absolute;right:1px;bottom:1px;width:14px;height:14px;outline:3px solid var(--ground-elevated);border:1.5px solid var(--line-strong)}
.sl-widget .sl-dot[data-state="wait"]{transform:rotate(45deg) scale(.86)}
.sl-widget-panel{width:320px;background:var(--ground-elevated);border:1.5px solid var(--line-strong);color:var(--ink)}
.sl-widget-head{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--line)}
.sl-widget-body{display:flex;flex-direction:column;gap:12px;padding:14px}
.sl-widget-foot{padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft)}

/* ---- Menu (bandeja) ---- */
.sl-menu{width:300px;margin:0;padding:6px 0;list-style:none;background:var(--ground-elevated);border:1.5px solid var(--line-strong);color:var(--ink)}
.sl-menu-head{display:flex;align-items:center;gap:10px;padding:8px 14px 10px}
.sl-menu-item{display:flex;white-space:nowrap;align-items:center;gap:10px;width:100%;min-height:36px;padding:0 14px;background:none;border:0;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.sl-menu-item:hover,.sl-menu-item.is-hover{background:var(--ground-subtle)}
.sl-menu-item:focus-visible{outline-offset:-3px}
.sl-menu-item .sl-menu-meta{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.sl-menu-item[data-tone="danger"]{color:var(--danger-ink)}
.sl-menu-check{width:14px;flex:none;display:inline-flex;justify-content:center}
.sl-menu-sep{height:1px;margin:6px 0;background:var(--line)}

/* ---- Lista de leitura (Explorar) ---- */
.sl-row{display:grid;gap:16px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.sl-mono-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

@media (prefers-reduced-motion: reduce){ .sl-toast,.sl-dialog{animation:none !important;transition:none !important} }

/* rev.4: logo da submarca SLED (ilustração colorida, sempre <img>) */
.sl-logo{display:block;width:32px;height:32px;flex:none;object-fit:contain}
.sl-logo[data-size="sm"]{width:24px;height:24px}
.sl-logo[data-size="xs"]{width:16px;height:16px}
.sl-widget .sl-logo{width:40px;height:40px}

/* ---- Painel: login e casca (T-069) ---- */
.pn-login{min-height:100vh;display:grid;place-items:center;padding:24px 20px}
.pn-login-card{width:100%;max-width:420px;padding:32px 28px;background:var(--ground-elevated);border:1px solid var(--line)}
.pn-login-card h1{font-size:44px;margin:0 0 24px}
.pn-campo{margin:0 0 20px}
.pn-erro{margin:0 0 20px;padding:12px 14px;border:1.5px solid var(--danger);background:var(--danger-dim);color:var(--danger-ink)}
.pn-erro .pn-codigo{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.pn-casca{max-width:var(--wrap-max);margin:0 auto;padding:var(--space-32) var(--space-20)}
.btn-primary{cursor:pointer}
.btn-primary:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}