:root {
      /* Neutros e semânticas: valores de `processo/gerar-tokens.py`. O accent é
         escrito pelo seletor de tenant, em tempo de leitura. */
      --surface-page: #fcfbf8;
      --surface-raised: #ffffff;
      --surface-subtle: #f5f4f5;
      --surface-hover: #eeecee;
      --surface-pressed: #e4e2e4;
      --rule: #d9d4da;
      --border-subtle: #aaa2ac;
      --border: #998f9b;
      --text-muted: #665f67;
      --text-strong: #211b22;
      --text-disabled: #867c88;
      --text-on-solid: #ffffff;
      --solid: #211b22;
      --solid-hover: #372d39;
      --danger-wash: #fcf4f3;
      --danger-soft: #f9dcd8;
      --danger-border: #da7262;
      --danger-solid: #d43d25;
      --danger-text: #ab3726;
      --success-wash: #f4fbf8;
      --success-soft: #daf6e9;
      --success-border: #37a471;
      --success-solid: #1f8455;
      --success-text: #1a6140;
      --warning-wash: #fef9f1;
      --warning-soft: #fdeed3;
      --warning-border: #c3861d;
      --warning-solid: #a36b0a;
      --warning-text: #714f14;
      --info-wash: #f3f6fc;
      --info-soft: #d7e5f9;
      --info-border: #6492d8;
      --info-solid: #3474d5;
      --info-text: #2b62b6;

      --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px; --space-sm: 16px;
      --space-md: 24px;  --space-lg: 32px;  --space-xl: 48px; --space-2xl: 64px;
      --space-3xl: 96px;

      --radius-none: 0;  --radius-sm: 4px;  --radius-pill: 16px;
      --border-thin: 1px; --border-strong: 2px;
      --target-min: 48px;
      --shadow-overlay: 0 8px 24px rgba(33, 27, 34, 0.16);
      --motion-fast: 120ms; --motion-base: 200ms;

      --display: 'Plus Jakarta Sans', 'Trebuchet MS', sans-serif;
      --body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;

      color-scheme: light;
    }

    /* Modo único, por decisão (0007): não há paleta escura a definir. Todas as
       cores são pintadas explicitamente para a página não pegar emprestado o
       fundo do host. */

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--surface-page);
      color: var(--text-strong);
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ── tipografia do sistema ── */
    .display    { font-family: var(--display); font-size: 56px; line-height: 1.1;  font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; margin: 0; }
    .display-lg { font-family: var(--display); font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
    .title      { font-family: var(--display); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
    .title-sm   { font-family: var(--display); font-size: 20px; line-height: 1.3;  font-weight: 600; margin: 0; }
    .body-lg    { font-size: 18px; line-height: 1.5; margin: 0; }
    .small      { font-size: 14px; line-height: 1.5; margin: 0; }
    .caption    { font-size: 12px; line-height: 1.4; color: var(--text-muted); margin: 0; }
    .eyebrow {
      font-family: var(--display); font-size: 12px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.4;
      color: var(--text-muted); margin: 0;
    }
    .muted { color: var(--text-muted); }
    .prose { max-width: 66ch; }
    code {
      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      font-size: 0.88em; background: var(--surface-subtle);
      border: var(--border-thin) solid var(--rule); padding: 1px 5px;
    }
    a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }

    /* ── casca da página ── */
    .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
    .rail {
      position: sticky; top: 0; height: 100vh; overflow-y: auto;
      border-right: var(--border-thin) solid var(--rule);
      background: var(--surface-page);
      padding: var(--space-md) var(--space-sm);
      display: flex; flex-direction: column; gap: var(--space-md);
    }
    .rail nav { display: flex; flex-direction: column; }
    .rail nav a {
      color: var(--text-muted); text-decoration: none; font-size: 14px;
      padding: 7px 0; border-top: var(--border-thin) solid var(--rule);
    }
    .rail nav a:first-child { border-top: 0; }
    .rail nav a:hover, .rail nav a:focus-visible { color: var(--text-strong); }
    .rail nav a[aria-current="true"] { color: var(--text-strong); font-weight: 600; }
    main { min-width: 0; }
    section {
      padding: var(--space-2xl) var(--space-lg);
      border-top: var(--border-thin) solid var(--rule);
      max-width: 1200px;
    }
    section:first-child { border-top: 0; }
    .sec-head { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
    .grid { display: grid; gap: var(--space-sm); }
    .cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .cols-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-start; }
    .stack { display: flex; flex-direction: column; gap: var(--space-xs); }

    /* ── o espécime: moldura que separa exemplo de documento ── */
    .specimen {
      border: var(--border-thin) solid var(--border-subtle);
      background: var(--surface-raised);
      display: flex; flex-direction: column;
    }
    .specimen > figcaption {
      border-bottom: var(--border-thin) solid var(--rule);
      padding: var(--space-2xs) var(--space-xs);
      display: flex; justify-content: space-between; gap: var(--space-2xs);
      font-family: var(--display); font-size: 12px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted);
    }
    .specimen > .stage { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
    .stage.on-page { background: var(--surface-page); }
    .spec-note {
      border-top: var(--border-thin) solid var(--rule);
      padding: var(--space-2xs) var(--space-xs);
      font-size: 12px; line-height: 1.5; color: var(--text-muted);
    }

    /* ── tabelas de token ── */
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .scroll { overflow-x: auto; }
    th {
      text-align: left; font-family: var(--display); font-size: 12px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--text-muted); padding: var(--space-2xs) var(--space-xs) var(--space-2xs) 0;
      border-bottom: var(--border-thin) solid var(--border-subtle); white-space: nowrap;
    }
    td { padding: 9px var(--space-xs) 9px 0; border-bottom: var(--border-thin) solid var(--rule); vertical-align: top; }
    td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
    .swatch { width: 40px; height: 24px; border: var(--border-thin) solid var(--border-subtle); display: block; }
    .pass { color: var(--success-text); font-weight: 600; font-variant-numeric: tabular-nums; }
    .fail { color: var(--danger-text); font-weight: 600; font-variant-numeric: tabular-nums; }

    /* ── componentes do produto, especificados ── */
    .btn {
      font-family: var(--body); font-size: 16px; font-weight: 500;
      min-height: var(--target-min); padding: 12px 24px;
      border-radius: var(--radius-sm); border: var(--border-thin) solid var(--solid);
      background: var(--solid); color: var(--text-on-solid);
      display: inline-flex; align-items: center; gap: var(--space-2xs);
      cursor: pointer; transition: background var(--motion-fast) linear;
    }
    .btn:hover { background: var(--solid-hover); border-color: var(--solid-hover); }
    .btn--ghost { background: var(--surface-raised); color: var(--text-strong); border-color: var(--border); }
    .btn--ghost:hover { background: var(--surface-hover); }
    .btn--wide { width: 100%; justify-content: space-between; }
    .btn[disabled] { background: var(--surface-subtle); border-color: var(--rule); color: var(--text-disabled); cursor: not-allowed; }
    .btn--onink { background: var(--surface-raised); color: var(--text-strong); border-color: var(--surface-raised); }
    .btn:focus-visible, .field input:focus-visible, .rail nav a:focus-visible,
    .swatch-btn:focus-visible, .toggle:focus-visible {
      outline: var(--border-strong) solid var(--accent-solid); outline-offset: 2px;
    }

    .field { display: flex; flex-direction: column; gap: var(--space-3xs); }
    .field > label { font-size: 14px; font-weight: 500; }
    .field input {
      font-family: var(--body); font-size: 16px; color: var(--text-strong);
      min-height: var(--target-min); padding: 0 var(--space-xs);
      border: var(--border-thin) solid var(--border); border-radius: var(--radius-none);
      background: var(--surface-raised);
    }
    .field input::placeholder { color: var(--text-muted); }
    .field--error input { border-color: var(--danger-border); border-width: var(--border-strong); }
    .field--error .hint { color: var(--danger-text); }
    .hint { font-size: 12px; color: var(--text-muted); }

    .card {
      border: var(--border-thin) solid var(--border-subtle);
      background: var(--surface-raised); padding: var(--space-sm);
      display: flex; flex-direction: column; gap: var(--space-2xs);
    }
    .card--focus { border: var(--border-strong) solid var(--accent-solid); background: var(--accent-wash); }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 500; padding: 3px var(--space-2xs);
      border: var(--border-thin) solid; border-radius: var(--radius-none);
    }
    .dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
    .listitem {
      border-top: var(--border-thin) solid var(--rule);
      padding: var(--space-xs) 0; display: flex; justify-content: space-between;
      align-items: center; gap: var(--space-xs);
    }
    .avatars { display: flex; }
    .avatars span {
      width: 36px; height: 36px; margin-right: -8px; border-radius: 999px;
      border: 2px solid var(--surface-raised); background: var(--accent-soft);
      color: var(--accent-text); font-size: 12px; font-weight: 600;
      display: grid; place-items: center;
    }
    .iconpill {
      width: 52px; height: 52px; border-radius: var(--radius-pill);
      border: var(--border-thin) solid var(--accent-solid); background: var(--accent-wash);
      color: var(--accent-solid); display: grid; place-items: center; transform: rotate(-3deg);
    }

    /* jornada */
    .journey { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
    .journey span { position: relative; height: 22px; border-top: var(--border-strong) solid var(--rule); }
    .journey span::before {
      content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px;
      border-radius: 999px; border: var(--border-thin) solid var(--border); background: var(--surface-raised);
    }
    .journey span[data-state="done"] { border-top-color: var(--accent-solid); }
    .journey span[data-state="done"]::before { border-color: var(--accent-solid); background: var(--accent-solid); }
    .journey span[data-state="current"] { border-top-color: var(--accent-solid); }
    .journey span[data-state="current"]::before {
      top: -8px; width: 14px; height: 14px;
      border: 3px solid var(--accent-soft); background: var(--accent-ink);
    }
    .journey-label { display: flex; justify-content: space-between; align-items: baseline; }

    /* navegação */
    .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: var(--border-thin) solid var(--rule); background: var(--surface-raised); }
    .tabbar span { min-height: var(--target-min); padding: var(--space-2xs) 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--text-muted); }
    .tabbar span[aria-current="true"] { color: var(--text-strong); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent-solid); }
    .sidenav { display: flex; flex-direction: column; gap: 2px; }
    .sidenav span { min-height: var(--target-min); display: flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-xs); font-size: 14px; color: var(--text-muted); }
    .sidenav span[aria-current="true"] { color: var(--text-strong); font-weight: 600; background: var(--surface-subtle); box-shadow: inset 2px 0 0 var(--accent-solid); }

    /* chat */
    .fab { width: var(--target-min); height: var(--target-min); border-radius: 999px; background: var(--solid); color: var(--text-on-solid); display: grid; place-items: center; }
    .overlay { border: var(--border-thin) solid var(--border-subtle); background: var(--surface-raised); box-shadow: var(--shadow-overlay); }

    /* cabeçalho do portal — o espelho do da LP */
    .appheader { border-bottom: var(--border-thin) solid var(--rule); background: var(--surface-page); }
    .appheader .top { min-height: var(--target-min); padding: var(--space-2xs) var(--space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2xs); }
    .wordmark { font-family: var(--display); font-weight: 700; letter-spacing: -0.055em; }
    .chancela { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent-text); }
    .glyph { width: 10px; height: 10px; transform: rotate(45deg); background: var(--accent-solid); flex-shrink: 0; }
    .appheader .ctx { border-top: var(--border-thin) solid var(--rule); padding: 5px var(--space-sm); font-size: 12px; color: var(--text-muted); }

    /* telas em 360 */
    .screens { display: flex; gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-2xs); }
    .screen { width: 360px; flex: 0 0 360px; border: var(--border-thin) solid var(--border-subtle); background: var(--surface-page); display: flex; flex-direction: column; }
    .screen .body { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
    .screen .cap { border-top: var(--border-thin) solid var(--rule); padding: 6px var(--space-2xs); font-size: 12px; color: var(--text-muted); }

    /* seletor de tenant */
    .switcher {
      position: sticky; top: 0; z-index: 5;
      border-bottom: var(--border-thin) solid var(--border-subtle);
      background: var(--surface-raised);
      padding: var(--space-xs) var(--space-lg);
      display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center;
    }
    .swatch-btn {
      font-family: var(--body); font-size: 13px; font-weight: 500;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px var(--space-2xs); cursor: pointer;
      border: var(--border-thin) solid var(--border); border-radius: var(--radius-sm);
      background: var(--surface-raised); color: var(--text-strong);
    }
    .swatch-btn[aria-pressed="true"] { background: var(--solid); border-color: var(--solid); color: var(--text-on-solid); }
    .swatch-btn i { width: 12px; height: 12px; display: block; border: var(--border-thin) solid rgba(33,27,34,.25); }
    .hue { display: flex; align-items: center; gap: var(--space-2xs); font-size: 13px; }
    input[type="range"] { accent-color: var(--accent-ink); width: 160px; }

    .anti { display: flex; gap: var(--space-2xs); border-top: var(--border-thin) solid var(--rule); padding: var(--space-xs) 0; }
    .anti .mark { color: var(--danger-text); font-weight: 700; }
    .pend { border-left: var(--border-strong) solid var(--warning-border); padding: 2px 0 2px var(--space-xs); }

    @media (max-width: 900px) {
      .shell { grid-template-columns: minmax(0, 1fr); }
      .rail { position: static; height: auto; border-right: 0; border-bottom: var(--border-thin) solid var(--border-subtle); }
      .rail nav { flex-flow: row wrap; gap: var(--space-2xs); }
      .rail nav a { border-top: 0; }
      section { padding: var(--space-xl) var(--space-sm); }
      .display { font-size: 40px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }