/* GERADO por gerar_tokens.py de tokens.json v1.1.0 — não editar à mão. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --ds-paper: #fbf9f4;
  --ds-surface: #ffffff;
  --ds-ink: #0d0f22;
  --ds-muted: #4a4f63;
  --ds-line: #d9dbe6;
  --ds-brand: #6113fc;
  --ds-brand-soft: #efe9ff;
  --ds-blue: #0e5df6;
  --ds-violet: #9c08fe;
  --ds-on-brand: #ffffff;
  --ds-sun: #ffc94a;
  --ds-mint: #8ee3b0;
  --ds-coral: #ff8a73;
  --ds-sky: #7fd3ff;
  --ds-lilac: #cdb8ff;
  --ds-on-accent: #0d0f22;
  --ds-positive: #0f7a43;
  --ds-danger: #c2291d;
  --ds-tab-area: #fdfcf9;
  --ds-tab-border: #cfe1e7;
  --ds-line-strong: #767b8f;
  --ds-warning: #f5b400;
  --ds-on-warning: #0d0f22;
  --ds-info: #0e5df6;
  --ds-on-info: #ffffff;
  --ds-focus-ring: #6113fc;
  --ds-disabled: #e9eaf0;
  --ds-on-disabled: #5c6075;
  --ds-overlay: rgba(13, 15, 34, 0.56);
  --ds-hero: #07172e;
  --ds-on-hero: #f8f9fe;
  --ds-on-danger: #ffffff;
  --ds-voice: #d2521e;
  --ds-on-voice: #fbf9f4;
  --ds-font-marca: Montserrat, system-ui, sans-serif;
  --ds-font-interface: Inter, system-ui, sans-serif;
  --ds-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ds-font-manuscrita: Caveat, 'Patrick Hand', cursive;
  --ds-type-titulo-entrada: 700 clamp(40px, 7vw, 100px)/1.02;
  --ds-type-h1: 600 clamp(36px, 5vw, 64px)/1.06;
  --ds-type-h2: 600 clamp(28px, 3.4vw, 40px)/1.15;
  --ds-type-corpo: 400 18px/28px;
  --ds-type-sidebar: 700 16px/24px;
  --ds-type-label: 600 14px/20px;
  --ds-type-caption: 500 14px/18px;
  --ds-type-legenda: 500 18px/26px;
  --ds-type-legenda-celular: 500 16px/24px;
  --ds-type-assinatura: 400 12px/1.4;
  --ds-radius-botao: 12px;
  --ds-radius-cartao: 16px;
  --ds-radius-palco: 24px;
  --ds-radius-pilula: 999px;
  --ds-shadow-botao: 0 2px 0 rgba(13,15,34,.08);
  --ds-shadow-cartao: 0 8px 24px rgba(13,15,34,.06);
  --ds-target-min: 40px;
  --ds-hover-lift: translateY(-1px);
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  /* breakpoints: @media não aceita var(); o número literal se repete na media query. */
  --ds-bp-sm: 640px;
  --ds-bp-md: 768px;
  --ds-bp-lg: 1024px;
  --ds-bp-xl: 1280px;
  --ds-z-base: 0;
  --ds-z-dropdown: 100;
  --ds-z-sticky: 200;
  --ds-z-overlay: 300;
  --ds-z-modal: 400;
  --ds-z-toast: 500;
  /* modal: componente único do Design System — centrado, móvel e redimensionável. */
  --ds-modal-radius: 16px;
  --ds-modal-shadow: 0 8px 24px rgba(13,15,34,.06);
  --ds-modal-backdrop: rgba(13, 15, 34, 0.56);
  --ds-modal-z: 400;
  --ds-modal-sm: 480px;
  --ds-modal-md: 720px;
  --ds-modal-lg: 960px;
  --ds-modal-xl: min(1200px, calc(100vw - 48px));
  --ds-modal-min-w: 360px;
  --ds-modal-min-h: 240px;
  --ds-modal-margin: 16px;
  --ds-modal-margin-xl: 48px;
  --ds-modal-mobile: 600px;
  --ds-modal-step: 16px;
  --ds-modal-step-shift: 64px;
  --ds-modal-handle: 8px;
  --ds-dur-curto: 220ms;
  --ds-dur-medio: 450ms;
  --ds-dur-longo: 750ms;
  --ds-ease: cubic-bezier(.25,1,.5,1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ds-paper: #050823;
  --ds-surface: #0d1233;
  --ds-ink: #f8f9fe;
  --ds-muted: #b4b9d0;
  --ds-line: #2a3160;
  --ds-brand: #a98bff;
  --ds-brand-soft: #1c1650;
  --ds-blue: #6fa2ff;
  --ds-violet: #d29bff;
  --ds-on-brand: #050823;
  --ds-sun: #ffc94a;
  --ds-mint: #8ee3b0;
  --ds-coral: #ff8a73;
  --ds-sky: #01e2fe;
  --ds-lilac: #cdb8ff;
  --ds-on-accent: #0d0f22;
  --ds-positive: #5fd99a;
  --ds-danger: #ff8f86;
  --ds-tab-area: #0b1019;
  --ds-tab-border: #24414c;
  --ds-line-strong: #6a729c;
  --ds-warning: #ffc94a;
  --ds-on-warning: #0d0f22;
  --ds-info: #6fa2ff;
  --ds-on-info: #050823;
  --ds-focus-ring: #a98bff;
  --ds-disabled: #1a1f45;
  --ds-on-disabled: #9ea3bd;
  --ds-overlay: rgba(5, 8, 35, 0.72);
  --ds-hero: #07172e;
  --ds-on-hero: #f8f9fe;
  --ds-on-danger: #0d0f22;
  --ds-voice: #d2521e;
  --ds-on-voice: #fbf9f4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ds-paper: #050823;
    --ds-surface: #0d1233;
    --ds-ink: #f8f9fe;
    --ds-muted: #b4b9d0;
    --ds-line: #2a3160;
    --ds-brand: #a98bff;
    --ds-brand-soft: #1c1650;
    --ds-blue: #6fa2ff;
    --ds-violet: #d29bff;
    --ds-on-brand: #050823;
    --ds-sun: #ffc94a;
    --ds-mint: #8ee3b0;
    --ds-coral: #ff8a73;
    --ds-sky: #01e2fe;
    --ds-lilac: #cdb8ff;
    --ds-on-accent: #0d0f22;
    --ds-positive: #5fd99a;
    --ds-danger: #ff8f86;
    --ds-tab-area: #0b1019;
    --ds-tab-border: #24414c;
    --ds-line-strong: #6a729c;
    --ds-warning: #ffc94a;
    --ds-on-warning: #0d0f22;
    --ds-info: #6fa2ff;
    --ds-on-info: #050823;
    --ds-focus-ring: #a98bff;
    --ds-disabled: #1a1f45;
    --ds-on-disabled: #9ea3bd;
    --ds-overlay: rgba(5, 8, 35, 0.72);
    --ds-hero: #07172e;
    --ds-on-hero: #f8f9fe;
    --ds-on-danger: #0d0f22;
    --ds-voice: #d2521e;
    --ds-on-voice: #fbf9f4;
  }
}
/* Porta instalada pelo ativo versionado de login; não editar o bloco canônico. */

/* ══════ PORTA CANÔNICA IconsAI · INÍCIO ══════ */
/* Ativo da skill `login`. NÃO EDITE AQUI: melhoria de porta entra pelo
   ativo e chega a todos os aplicativos de uma vez.
   origem 81539ce · 348 declarações
   reimplantar: node ~/.claude/skills/login/scripts/porta.mjs --implanta . */
:root {
  --access-bg: #05070d;
  --access-surface: rgba(12, 16, 24, 0.88);
  --access-input: #080b12;
  --access-panel: #0b0f17;
  --access-border: #1e293b;
  --access-field-border: #334155;
  --access-text: #eef2ff;
  --access-muted: #94a3b8;
  --access-dim: #7c8ba3;
  --access-danger: #ef4444;
  --access-context: #047857;
  --access-action: #047857;
  --font-display: var(--font-jakarta, "Plus Jakarta Sans"), system-ui, sans-serif;
  --font-ui: var(--font-inter, Inter), system-ui, sans-serif;
  --font-mono: var(--font-mono-jb, "JetBrains Mono"), ui-monospace, monospace;
  --font-logo: var(--font-jakarta, "Plus Jakarta Sans"), system-ui, sans-serif;
  --font-logo-i: var(--font-baskerville, "Libre Baskerville"), Georgia, serif;
}

/* ── Wordmark icons.ai — skill `logo`, cores imutáveis ─────────────────────── */

.logo-iconsai { display: inline-flex; align-items: center; gap: 0.02em; font-family: var(--font-logo); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; cursor: pointer; line-height: 1;
}

.logo-i { font-family: var(--font-logo-i); font-size: 1.55em; font-weight: 700; font-style: normal; color: #f97316; -webkit-text-fill-color: #f97316;
}

.logo-cons { font-weight: 800; color: #ffffff; -webkit-text-fill-color: #ffffff;
}

.logo-ai { font-weight: 800; color: #ef4444; -webkit-text-fill-color: #ef4444;
}

/* ── Shell de acesso (visual-spec §4) ─────────────────────────────────────── */

.access-page {
  /* A PORTA PINTA O PRÓPRIO TEXTO.
   *
   * `.access-h1` e `.access-card h2` não declaram `color` — herdavam do
   * `body { color: var(--access-text) }` daqui. Mas o ativo da porta NÃO leva o
   * `body`: levá-lo repintaria o aplicativo inteiro, e isso já foi medido como
   * defeito no fiscal em 27/08/2026.
   *
   * Resultado: a porta chegava nos outros aplicativos com a cor de texto do
   * HOSPEDEIRO. No Atlas, cujo body é #020817, a manchete renderizou PRETA
   * SOBRE FUNDO PRETO — `getComputedStyle('.access-h1').color = rgb(2, 8, 23)`
   * — com o gate respondendo CONFORME 290.
   *
   * É a família do CLAUDE.md §1: as 290 declarações estavam certas e
   * respondiam a outra pergunta — "a folha está certa?", não "a tela está
   * legível?". `.access-page` já pinta o próprio fundo; pinta o próprio texto
   * pelo mesmo motivo, e com o token do próprio ativo. */
  color: var(--access-text);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--access-context) 14%, transparent), transparent 32rem),
    radial-gradient(circle at 82% 90%, color-mix(in srgb, var(--access-action) 9%, transparent), transparent 30rem),
    var(--access-bg);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .access-page {
      background:
        radial-gradient(circle at 18% 12%, rgba(8, 145, 178, 0.14), transparent 32rem),
        radial-gradient(circle at 82% 90%, rgba(234, 88, 12, 0.09), transparent 30rem),
        var(--access-bg);
  }
}

.access-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px clamp(22px, 5vw, 72px);
}

.access-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.access-product {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--access-dim);
}

.access-back {
  font-size: 13px;
  color: var(--access-muted);
  text-decoration: none;
  cursor: pointer;
}

.access-back:hover {
  color: var(--access-context);
}

.access-main {
  width: min(1040px, calc(100% - 36px));
  margin: 0 auto;
  padding: 52px 0 76px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(36px, 7vw, 86px);
  align-items: center;
}

.access-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  --access-context: #22d3ee;
  color: var(--access-context);
  margin: 0 0 18px;
}

.access-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 22px;
  /* SEM ISTO A MANCHETE DEIXA PALAVRA ÓRFÃ.
   *
   * Medido em 28/08/2026 no tools: "A central de / ferramentas / do /
   * ecossistema." — a preposição "do" sozinha numa linha. `text-wrap: wrap`
   * quebra onde couber; `balance` distribui as linhas para não sobrar uma
   * palavra solta.
   *
   * A porta é implantada em N produtos, e cada um tem uma manchete de
   * comprimento diferente: o que cabe bem aqui quebra mal lá. Deixar isso para
   * quem escreve o texto é pedir que ele conte caracteres — e ele não vai. */
  text-wrap: balance;
}

.access-h1 em {
  font-style: normal;
  color: var(--access-action);
}

@media (max-width: 1440px) {
  .access-h1 {
      font-size: clamp(30px, 3.2vw, 40px);
  }
}

.access-lede {
  font-size: 16px;
  line-height: 1.68;
  color: var(--access-muted);
  max-width: 48ch;
  margin: 0;
}

.access-card {
  background: var(--access-surface);
  border: 1px solid var(--access-border);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
  max-width: 560px;
  width: 100%;
}

.access-card h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.access-card-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--access-muted);
  margin: 0 0 24px;
}

/* ═══ TRILHA DAS ETAPAS ═══════════════════════════════════════════════════════
 *
 * A porta tinha as três etapas e não as mostrava: quem estava na tela do código
 * não sabia se faltava uma etapa ou cinco. O `process` e o `tools` já mostram; a
 * forma aqui é a do `tools` (número + rótulo, concluída em ciano), com os tokens
 * medidos deste produto — `--access-context` para o passo vencido e o gradiente
 * de contexto para o atual. Nenhuma cor nova entra: as duas foram validadas por
 * `validate-login-palette.py` e trocar qualquer uma exige rodá-lo de novo. */

.access-progress {
  display: grid;
  /* O NÚMERO DE ETAPAS NÃO É TRÊS. É o que o fluxo tiver.
   *
   * Estava `repeat(3, 1fr)`, escrito na pedra. O fluxo multiempresa tem QUATRO
   * — CNPJ → CPF → CANAL → CÓDIGO — e medido no scraping em 28/08/2026 a quarta
   * caía na linha de baixo, com o traço conector do terceiro item apontando
   * para o vazio.
   *
   * A skill `login` define DUAS máquinas de estados, uma de três etapas e outra
   * de quatro. Uma trilha que só sabe desenhar uma delas contradiz o contrato
   * que ela existe para mostrar. `grid-auto-flow: column` desenha quantas
   * houver, sem ninguém precisar contar. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.access-progress-item {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--access-dim);
}

/* O traço entre um passo e o próximo. `::after` no item, e não uma borda no
 * contêiner, porque ele não pode aparecer depois do último. */

.access-progress-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(100% - 6px);
  width: 14px;
  height: 1px;
  background: var(--access-border);
}

.access-progress-item > span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--access-field-border);
  border-radius: 50%;
  background: var(--access-input);
  color: var(--access-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.access-progress-item small {
  overflow: visible;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-progress-item.is-complete > span {
  border-color: color-mix(in srgb, var(--access-context) 58%, transparent);
  background: color-mix(in srgb, var(--access-context) 10%, transparent);
  color: var(--access-context);
}

.access-progress-item.is-active {
  color: var(--access-text);
}

.access-progress-item.is-active > span {
  border-color: transparent;
  background: var(--access-context);
  color: #ffffff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--access-context) 18%, transparent);
}

@media (max-width: 420px) {
  .access-progress-item small {
      font-size: 9px;
      letter-spacing: 0.06em;
  }
}

/* ═══ CONTAGEM REGRESSIVA DO CÓDIGO ═══════════════════════════════════════════
 *
 * "Vale por 5 minutos" era uma frase, não uma medida — não contava nada, e quem
 * voltasse à aba minutos depois só descobria o vencimento digitando um código
 * morto. Números TABULARES não são preferência: sem eles cada segundo muda a
 * largura do bloco e a linha inteira treme a cada tique. */

.access-timer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
}

.access-timer-ring { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
}

.access-timer-ring svg { width: 44px; height: 44px; transform: rotate(-90deg);
}

.access-timer-ring circle { fill: none; stroke-width: 4;
}

.access-timer-ring-track { stroke: color-mix(in srgb, var(--access-context) 22%, var(--access-border));
}

.access-timer-ring-progress { stroke: var(--access-context); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 18;
}

.access-timer.is-expired .access-timer-ring-track { stroke: color-mix(in srgb, var(--access-danger) 18%, var(--access-border));
}

.access-timer.is-expired .access-timer-ring-progress { stroke: var(--access-danger); stroke-dashoffset: 113;
}

.access-timer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--access-dim);
}

.access-timer-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--access-context);
}

.access-timer.is-expired .access-timer-label,
.access-timer.is-expired .access-timer-value {
  color: var(--access-danger);
}

.access-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--access-muted);
  margin: 0 0 8px;
}

.access-input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  background: var(--access-input);
  border: 1px solid var(--access-field-border);
  border-radius: 10px;
  color: var(--access-text);
  font-family: var(--font-ui);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.access-input:focus-visible {
  border-color: var(--access-context);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--access-context) 30%, transparent);
}

.access-input::placeholder {
  color: var(--access-dim);
}

.access-otp {
  height: 54px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 26px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.access-cta {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--access-action);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.access-cta:hover:not(:disabled) {
  filter: brightness(1.1);
}

/*
 * Desabilitado precisa CONTINUAR LEGÍVEL (visual-spec §9: "CTA desabilitado sem
 * desaparecer"). A 0.45 o rótulo caía abaixo de 4.5:1 contra o fundo do card e
 * o botão lia como decoração. 0.6 mantém o estado óbvio sem apagar o texto.
 */

.access-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Canais empilhados, nunca lado a lado (visual-spec §7). */

.access-channels {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.access-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 0 18px 0 16px;
  background: var(--access-input);
  border: 1px solid var(--access-field-border);
  border-radius: 10px;
  color: var(--access-text);
  font-family: var(--font-ui);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}

.access-channel:hover:not(:disabled) {
  border-color: var(--access-context);
}

.access-channel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.access-channel-dest {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--access-muted);
}

.access-channel-action {
  color: var(--access-context);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-channel-separator {
  margin: 14px 0 10px;
  color: var(--access-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.access-rebind-note {
  margin: 0 0 8px;
  color: var(--access-muted);
  font-size: 13px;
  line-height: 1.35;
}

.access-link {
  display: inline-block;
  margin-top: 18px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--access-dim);
  cursor: pointer;
}

.access-link:hover {
  color: var(--access-context);
}

/* Ações secundárias do passo do código lado a lado, com respiro entre elas. */
.access-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.access-error {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--access-danger);
}

.access-status {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--access-muted);
}

.access-dev {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--access-field-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--access-muted);
}

.access-footer {
  padding: 0 0 28px;
  text-align: center;
  font-size: 11px;
  color: var(--access-dim);
}

@media (max-width: 760px) {
  .access-main {
      grid-template-columns: 1fr;
      padding: 28px 0 56px;
      width: calc(100% - 36px);
  }
  
  .access-card {
      max-width: none;
  }
}

.painel-nav > .logo-iconsai {
  text-transform: none;
}

/* Claro medido em 26/09/2026: areia, papel e branco. O escuro acima não muda.
   data-theme vence o sistema. Sem atributo, o sistema decide. Escuro explícito
   vence um sistema operacional claro. Os tokens ficam na própria porta para a
   impressão digital enxergá-los. */
:root[data-theme="light"] .access-page {
  --access-bg: #f4f1ea;
  --access-surface: rgba(255, 255, 255, 0.92);
  --access-input: #ffffff;
  --access-panel: #fbf9f4;
  --access-header: #f9f9f7;
  --access-border: #d6d1c6;
  --access-field-border: #8f897d;
  --access-text: #14171a;
  --access-muted: #4a4d52;
  --access-dim: #5c5f64;
  --access-danger: #b91c1c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .access-page {
    --access-bg: #f4f1ea;
    --access-surface: rgba(255, 255, 255, 0.92);
    --access-input: #ffffff;
    --access-panel: #fbf9f4;
    --access-header: #f9f9f7;
    --access-border: #d6d1c6;
    --access-field-border: #8f897d;
    --access-text: #14171a;
    --access-muted: #4a4d52;
    --access-dim: #5c5f64;
    --access-danger: #b91c1c;
    color-scheme: light;
  }
}
/* O kicker crava #22d3ee. Sobre a areia isso mede 1,60:1. No claro, #094c5b mede 8,48:1. */
:root[data-theme="light"] .access-kicker { --access-context: #094c5b; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .access-kicker { --access-context: #094c5b; }
}
/* No claro a caixa é papel sobre areia. A sombra preta de 0.55 é do escuro. */
:root[data-theme="light"] .access-card {
  box-shadow: 0 18px 44px rgba(62, 48, 28, 0.10);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .access-card {
    box-shadow: 0 18px 44px rgba(62, 48, 28, 0.10);
  }
}
:root[data-theme="light"] .logo-cons { color: #111111; -webkit-text-fill-color: #111111; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-cons { color: #111111; -webkit-text-fill-color: #111111; }
}

@keyframes session-countdown-pulse { 50% { opacity: 0.58; } }
/* ══════ PORTA CANÔNICA IconsAI · FIM ══════ */

/* ══════ GESTOR DE SESSÃO CANÔNICO · INÍCIO ══════ */
/* Ativo da skill `session-toggle`. NÃO EDITE AQUI: melhoria de gestor entra
   pelo ativo e chega a todos os aplicativos de uma vez.
   reimplantar: node ~/.claude/skills/session-toggle/scripts/harness.mjs --implanta . */
/* Gestor de sessão canônico 3.3.0 — contrato dimensional.
   ESTRUTURA é imutável e igual em Light e Dark; só as cores mudam, e as cores
   moram em `session-theme.css`, implantado no arquivo de tokens de tema do app
   (CSS único: nenhum seletor de tema fora dele).
   Toda medida sai de um token: nenhuma largura depende do texto exibido. */
.session-manager{
  --session-height:34px;--session-gap:12px;--session-radius:8px;
  --session-identity-width:170px;--session-mode-width:104px;--session-mode-item:28px;
  --session-time-width:198px;--session-time-value-width:84px;
  --session-ring-size:28px;--session-hours-width:42px;--session-hours-height:26px;
  --session-switch-width:20px;--session-switch-height:11px;--session-thumb-size:8px;
  --session-action-size:34px;--session-reload-width:37px;--session-logout-width:37px;
  --session-icon:15px;
  display:inline-flex;height:var(--session-height);min-width:0;align-items:center;gap:var(--session-gap);
  margin-inline-start:auto;margin-left:auto;justify-content:flex-end;color:var(--session-muted);white-space:nowrap;
}
.session-identity{display:flex;flex-direction:column;justify-content:center;overflow:hidden;width:var(--session-identity-width);max-width:var(--session-identity-width);flex:0 0 var(--session-identity-width);color:var(--session-muted);font-size:12px;font-weight:600;line-height:1.15;text-align:right;white-space:normal}
.session-identity-line{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mode Session — Claro · Escuro · Sistema. O rótulo vive no `title`.
   O gestor reserva o slot; o seletor que o ocupa é o do app (`modeControl`). */
.session-mode-slot{display:inline-flex;width:var(--session-mode-width);height:var(--session-height);flex:0 0 var(--session-mode-width);align-items:center}
.session-mode{display:inline-flex;width:var(--session-mode-width);height:var(--session-height);flex:0 0 var(--session-mode-width);align-items:center;justify-content:space-between;margin:0;padding:0 5px;border:1px solid var(--session-border);border-radius:var(--session-radius);background:transparent}
.session-mode-opcao{display:inline-flex;width:var(--session-mode-item);height:var(--session-mode-item);align-items:center;justify-content:center;border-radius:6px;cursor:pointer}
.session-mode-opcao input{position:absolute;width:1px;height:1px;border:0;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.session-mode-opcao svg{width:16px;height:16px;fill:none;stroke:var(--session-muted);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.session-mode-opcao:hover{background:var(--session-hover)}
.session-mode-opcao:has(input:checked){background:var(--session-hover)}
.session-mode-opcao:has(input:checked) svg{stroke:var(--session-fg)}
.session-mode-opcao:has(input:focus-visible){outline:2px solid var(--session-accent);outline-offset:1px}

/* Tempo — contagem com presença vertical, largura fixa por token. */
.session-time{display:inline-flex;width:var(--session-time-width);height:var(--session-height);flex:0 0 var(--session-time-width);align-items:center;gap:8px}
.session-ring{display:inline-flex;width:var(--session-ring-size);height:var(--session-ring-size);flex:0 0 var(--session-ring-size);align-items:center;justify-content:center}
.session-ring svg{display:block;width:var(--session-ring-size);height:var(--session-ring-size);transform:rotate(-90deg)}
.session-ring-track,.session-ring-value{fill:none;stroke-width:2.5}
.session-ring-track{stroke:var(--session-border)}
.session-ring-value{stroke:var(--session-accent);stroke-dasharray:1;stroke-linecap:round}
.session-countdown{width:var(--session-time-value-width);flex:0 0 var(--session-time-value-width);color:var(--session-countdown);font:650 17px/1 var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-align:left}
.session-hours{display:inline-flex;width:var(--session-hours-width);flex:0 0 var(--session-hours-width);align-items:center}
.session-hours input{box-sizing:border-box;width:var(--session-hours-width);height:var(--session-hours-height);padding:0 5px;border:1px solid var(--session-border);border-radius:7px;outline:none;background:var(--session-surface);color:var(--session-fg);font:600 12px/1 var(--font-mono,"JetBrains Mono",ui-monospace,monospace);text-align:center;font-variant-numeric:tabular-nums}
.session-toggle{display:inline-flex;width:var(--session-switch-width);height:var(--session-height);flex:0 0 var(--session-switch-width);align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer}
.session-track{position:relative;display:block;width:var(--session-switch-width);height:var(--session-switch-height);border-radius:999px;background:var(--session-border)}
.session-thumb{position:absolute;top:1px;left:1px;width:var(--session-thumb-size);height:var(--session-thumb-size);border-radius:50%;background:var(--session-surface)}
.session-toggle[aria-checked="true"] .session-track{background:var(--session-accent)}
.session-toggle[aria-checked="true"] .session-thumb{left:11px}

.session-reload,.session-logout{display:inline-flex;height:var(--session-action-size);align-items:center;justify-content:center;padding:0;border:1px solid var(--session-border);border-radius:var(--session-radius);background:transparent;color:var(--session-muted);cursor:pointer}
.session-reload{width:var(--session-reload-width);flex:0 0 var(--session-reload-width)}
.session-logout{width:var(--session-logout-width);flex:0 0 var(--session-logout-width)}
.session-reload:hover,.session-logout:hover{background:var(--session-hover);color:var(--session-fg)}
.session-reload svg,.session-logout svg{width:var(--session-icon);height:var(--session-icon);fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.session-reload:focus-visible,.session-logout:focus-visible,.session-toggle:focus-visible,.session-hours input:focus-visible{outline:2px solid var(--session-accent);outline-offset:1px}

/* Abaixo de 980px a identidade cede largura — e é o ATIVO que decide quanto,
   não o app. Medido em 19/09/2026 no piloto do `tools`: com 170px fixos, a
   página de Skills em tablet (834px) passou a ter rolagem horizontal (881px).
   O token muda por LARGURA, nunca por tema: Light e Dark seguem idênticos. */
@media(max-width:980px){.session-manager{--session-identity-width:96px}}
@media(max-width:680px){.session-manager{height:auto;flex-wrap:wrap;justify-content:flex-end;gap:9px}.session-identity{width:100%;max-width:100%;flex:1 0 100%}}
/* ══════ GESTOR DE SESSÃO CANÔNICO · FIM ══════ */

/* ══════ CORES DO GESTOR DE SESSÃO · INÍCIO ══════ */
/* Ativo da skill `session-toggle`. NÃO EDITE AQUI.
   reimplantar: node ~/.claude/skills/session-toggle/scripts/harness.mjs --implanta . */
/* Cores do gestor de sessão canônico 3.3.0 — as MESMAS medidas nos dois temas.
   Implantado no arquivo de tokens de tema do app (o único com seletor de tema).
   Sem `data-theme`, vale o modo do sistema; com ele, o modo escolhido.
   Contraste medido: texto ≥ 4,5:1, contorno ≥ 3:1. */
:root{
  --session-accent:#22d3ee;--session-fg:#e2e8f0;--session-muted:#9ca3af;
  --session-surface:#0c1018;--session-border:#526278;--session-countdown:#67e8f9;
  --session-danger:#7f1d1d;--session-danger-fg:#ffffff;--session-hover:#111827;
}
:root[data-theme="light"]{
  --session-accent:#0e7490;--session-fg:#0f172a;--session-muted:#475569;
  --session-surface:#ffffff;--session-border:#7c8ba3;--session-countdown:#0e7490;
  --session-danger:#b91c1c;--session-danger-fg:#ffffff;--session-hover:#e2e8f0;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --session-accent:#0e7490;--session-fg:#0f172a;--session-muted:#475569;
    --session-surface:#ffffff;--session-border:#7c8ba3;--session-countdown:#0e7490;
    --session-danger:#b91c1c;--session-danger-fg:#ffffff;--session-hover:#e2e8f0;
  }
}
/* ══════ CORES DO GESTOR DE SESSÃO · FIM ══════ */