/* ── RESET ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }

    /* ── TEMAS ──────────────────────────────────────────────────────── */
    :root {
      --red: oklch(42% 0.195 22); --color-error: oklch(55% 0.22 22); --red-text: var(--red); --on-red: #fff;
      --font-display: 'Bebas Neue', sans-serif;
      --font-body:    'Plus Jakarta Sans', sans-serif;
      --font-label:   'Oswald', sans-serif;
    }

    /* Noite — Studio Noir */
    [data-theme="dark"] {
      --color-bg:              oklch(10% 0.014 22);
      --color-card-bg:         oklch(15% 0.012 22);
      --color-header:          oklch(19% 0.010 22);
      --color-sidebar:         oklch(19% 0.010 22);
      --color-border:          oklch(28% 0.010 22);
      --color-header-border:   oklch(30% 0.010 22);
      --color-labels:          oklch(90% 0.006 22);
      --color-muted:           oklch(48% 0.010 22);
      --sidebar-labels:        oklch(90% 0.006 22);
      --color-login-bg:        oklch(10% 0.014 22);
      --color-login-card:      oklch(15% 0.012 22);
      --color-login-border:    oklch(28% 0.010 22);
      --color-login-input-bg:  oklch(9%  0.012 22);
      --color-login-input-brd: oklch(26% 0.010 22);
      --color-login-text:      oklch(88% 0.006 22);
      --color-login-sub:       oklch(42% 0.008 22);
      --color-login-label:     oklch(50% 0.010 22);
      --color-login-footer:    oklch(36% 0.008 22);
    }

    /* Dia — Atelier */
    [data-theme="light"] {
      --color-bg:              oklch(95% 0.018 218);
      --color-card-bg:         oklch(99.5% 0.004 218);
      --color-header:          oklch(18% 0.028 218);
      --color-sidebar:         oklch(18% 0.028 218);
      --color-border:          oklch(85% 0.032 218);
      --color-header-border:   oklch(28% 0.025 218);
      --color-labels:          oklch(16% 0.015 218);
      --color-muted:           oklch(52% 0.035 218);
      --sidebar-labels:        oklch(94% 0.010 218);
      --color-login-bg:        oklch(95% 0.018 218);
      --color-login-card:      oklch(18% 0.028 218);
      --color-login-border:    oklch(30% 0.025 218);
      --color-login-input-bg:  oklch(13% 0.022 218);
      --color-login-input-brd: oklch(35% 0.025 218);
      --color-login-text:      oklch(92% 0.008 218);
      --color-login-sub:       oklch(50% 0.020 218);
      --color-login-label:     oklch(56% 0.022 218);
      --color-login-footer:    oklch(48% 0.020 218);
    }

    /* Design System global (admin-controlado) — sobrepõe cor e fonte quando data-ds está presente.
       Login screen fica fora (ver #screen-login abaixo, que reseta as 3 --font-*): usa só claro/escuro,
       DS se aplica à área autenticada. --color-header/--color-sidebar ficam de fora de propósito — o
       header é sempre escuro nos dois temas (invariante existente, logo branco depende
       disso e não tem fallback para header claro); só a área de conteúdo re-skina. */
    [data-ds] {
      --color-bg: var(--ds-bg);
      --color-card-bg: var(--ds-card-bg);
      --color-border: var(--ds-border);
      --color-labels: var(--ds-text);
      --color-muted: var(--ds-text-muted);
      --red: var(--ds-primary);
      --red-text: var(--ds-primary-text, var(--ds-primary));
      --on-red: var(--ds-on-primary, #fff);
      --font-display: var(--ds-font-display);
      --font-body: var(--ds-font-body);
      --font-label: var(--ds-font-mono);
    }

    /* Login fica isolado do DS global — mantém sempre as fontes padrão da marca, mesmo com [data-ds] ativo */
    #screen-login {
      --font-display: 'Bebas Neue', sans-serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;
      --font-label: 'Oswald', sans-serif;
      --red: oklch(42% 0.195 22);
      --red-text: var(--red);
      --on-red: #fff;
    }

    /* ── BASE ───────────────────────────────────────────────────────── */
    body {
      font-family: var(--font-body);
      background: var(--color-bg);
      color: var(--color-labels);
      transition: background .2s, color .2s;
    }

    /* ── LAYOUT ─────────────────────────────────────────────────────── */
    #app { min-height: 100vh; display: flex; flex-direction: column; }

    /* ── LOGIN ──────────────────────────────────────────────────────── */
    #screen-login {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-login-bg);
      padding: 1rem;
      transition: background .2s;
    }
    .login-card {
      background: var(--color-login-card);
      border: 1px solid var(--color-login-border);
      border-radius: 10px;
      padding: 2rem 2.25rem;
      width: 100%;
      max-width: 360px;
    }
    .login-logo {
      font-family: var(--font-display);
      font-size: 1.75rem;
      letter-spacing: .04em;
      color: var(--color-login-text);
      margin-bottom: 2px;
    }
    .login-logo span { color: var(--red-text); }
    .login-subtitle {
      font-family: var(--font-label);
      font-size: .6rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--color-login-sub);
      margin-bottom: 1.75rem;
    }
    .login-label {
      font-family: var(--font-label);
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--color-login-label);
      margin-bottom: .3rem;
      display: block;
    }
    .login-input {
      width: 100%;
      background: var(--color-login-input-bg);
      border: 1px solid var(--color-login-input-brd);
      border-radius: 5px;
      height: 2.5rem;
      padding: 0 .75rem;
      color: var(--color-login-text);
      font-family: var(--font-body);
      font-size: .85rem;
      margin-bottom: 1rem;
      outline: none;
      transition: border-color .15s;
    }
    .login-input:focus { border-color: oklch(50% 0.050 22); }
    .login-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
    .login-btn {
      width: 100%;
      height: 2.5rem;
      background: var(--red);
      color: var(--on-red);
      border: none;
      border-radius: 5px;
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      cursor: pointer;
      transition: opacity .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
      margin-top: .25rem;
    }
    .login-btn:hover { opacity: .88; }
    .login-btn:active { transform: scale(.97); }
    .login-btn:disabled { opacity: .5; cursor: default; }
    .login-error {
      font-size: .75rem;
      color: var(--color-error);
      margin-top: .75rem;
      text-align: center;
      min-height: 1rem;
    }
    .login-footer {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-login-footer);
      text-align: center;
      margin-top: 1.25rem;
    }

    /* ── DASHBOARD ──────────────────────────────────────────────────── */
    #screen-dashboard { flex: 1; display: flex; flex-direction: column; }

    /* header */
    .dash-header {
      background: var(--color-header);
      border-bottom: 1px solid var(--color-header-border);
      padding: .75rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: .6rem;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .header-logo { height: 36px; object-fit: contain; display: block; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .dash-header-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
    @media (max-width: 640px) {
      .dash-header-right { gap: .5rem; }
      .theme-label { display: none; }
      .btn-manual { padding: 0 8px; }
    }

    /* tema switcher */
    .theme-switcher {
      display: flex;
      align-items: center;
      gap: 2px;
      background: oklch(0% 0 0 / .25);
      border: 1px solid oklch(100% 0 0 / .08);
      border-radius: 6px;
      padding: 3px 4px;
    }
    :focus-visible {
      outline: 2px solid var(--red) !important;
      outline-offset: 2px !important;
    }
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      .modal-overlay, .modal-card, .tab-content {
        transition: opacity 0.05s ease !important;
        transform: none !important;
      }
    }
    .theme-btn {
      width: 28px; height: 28px; border-radius: 6px;
      border: 1px solid var(--color-border);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
    }
    .theme-btn::after {
      content: '';
      position: absolute;
      inset: -8px -8px;
    }
    .theme-btn:hover { border-color: oklch(100% 0 0 / .30); }
    .theme-btn.active { border-color: var(--red) !important; }
    .theme-btn[data-theme-val="light"] { background: oklch(95% 0.018 218); }
    .theme-btn[data-theme-val="dark"]  { background: oklch(10% 0.014 22); }
    .theme-pip { width: 8px; height: 8px; border-radius: 50%; }
    .theme-btn[data-theme-val="light"] .theme-pip { background: oklch(18% 0.028 218); }
    .theme-btn[data-theme-val="dark"]  .theme-pip { background: var(--red); }
    .ds-btn {
      min-width: 32px; height: 24px; padding: 0 8px;
      border: 1px solid oklch(100% 0 0 / .15); border-radius: 4px;
      background: transparent; cursor: pointer;
      font-size: .7rem; letter-spacing: .04em; font-weight: 600;
      color: var(--color-muted);
      transition: color .15s, border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .ds-btn::after { content: ''; position: absolute; inset: -10px -6px; }
    .ds-btn:hover:not(.active) { color: var(--red-text) !important; border-color: var(--red) !important; background-color: transparent !important; }
    .ds-btn:active { transform: scale(.92); }
    .ds-btn.active { background-color: var(--red) !important; border-color: var(--red) !important; color: var(--on-red) !important; }
    .btn-manual {
      min-height: 32px; padding: 0 12px;
      border: 1px solid var(--color-muted); border-radius: 6px;
      background: transparent; cursor: pointer;
      font-size: .65rem; letter-spacing: .05em; text-transform: uppercase;
      color: var(--color-muted);
      transition: color .15s, border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-manual::after { content: ''; position: absolute; inset: -6px -4px; }
    .btn-manual:hover { color: var(--red-text) !important; border-color: var(--red) !important; background-color: transparent !important; }
    .btn-manual:active { transform: scale(.96); }
    .btn-pipeline {
      min-height: 32px; padding: 0 12px;
      border: 1px solid var(--red); border-radius: 6px;
      background: transparent; cursor: pointer;
      font-size: .65rem; letter-spacing: .05em; text-transform: uppercase;
      color: var(--red-text);
      transition: color .15s, border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-pipeline::after { content: ''; position: absolute; inset: -6px -4px; }
    .btn-pipeline:hover { color: var(--color-muted) !important; border-color: var(--color-muted) !important; background-color: transparent !important; }
    .btn-pipeline:active { transform: scale(.96); }
    .btn-executive {
      min-height: 32px; padding: 0 12px;
      border: 1px solid var(--red); border-radius: 6px;
      background: transparent; cursor: pointer;
      font-size: .65rem; letter-spacing: .05em; text-transform: uppercase;
      color: var(--red-text);
      transition: color .15s, border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
      position: relative;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-executive::after { content: ''; position: absolute; inset: -6px -4px; }
    .btn-executive:hover { color: var(--color-muted) !important; border-color: var(--color-muted) !important; background-color: transparent !important; }
    .btn-executive:active { transform: scale(.96); }
    .manual-card {
      width: min(760px, 92vw); max-height: 86vh; overflow-y: auto;
      text-align: left; line-height: 1.55;
    }
    .manual-card h3 {
      font-size: .95rem; letter-spacing: .05em; text-transform: uppercase;
      color: var(--red-text); margin: 1.4rem 0 .5rem;
      border-bottom: 1px solid var(--color-border); padding-bottom: .3rem;
    }
    .manual-card h3:first-of-type { margin-top: .5rem; }
    .manual-card h4 { font-size: .8rem; margin: .9rem 0 .3rem; color: var(--color-labels); }
    .manual-card p, .manual-card li { font-size: .78rem; color: var(--color-muted); margin: .3rem 0; }
    .manual-card li { margin-left: 1.1rem; }
    .manual-card strong { color: var(--color-labels); font-weight: 600; }
    .manual-card code {
      font-size: .7rem; padding: .05rem .3rem; border-radius: 4px;
      background: oklch(50% 0 0 / .12); color: var(--color-labels);
    }
    .manual-card table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
    .manual-card th, .manual-card td {
      font-size: .72rem; text-align: left; padding: .3rem .5rem;
      border: 1px solid var(--color-border); color: var(--color-muted);
    }
    .manual-card th { color: var(--color-labels); }
    .theme-label {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: oklch(64% 0.008 22);
      padding: 0 4px;
    }
    /* header é sempre escuro nos dois temas — texto do label fica claro sempre (ver invariante
       documentada acima em [data-ds]); nada a inverter aqui, ao contrário de --color-labels */

    /* user chip */
    .user-chip {
      font-family: var(--font-label);
      font-size: .6rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: oklch(82% 0.038 218);
      background: oklch(28% 0.022 218);
      border-radius: 4px;
      padding: .25rem .6rem;
      border: 1px solid oklch(40% 0.028 218);
    }
    [data-theme="light"] .user-chip {
      color: oklch(88% 0.022 218);
      background: oklch(26% 0.025 218);
      border-color: oklch(44% 0.030 218);
    }
    .logout-btn {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-muted);
      background: transparent;
      border: 1px solid var(--color-muted);
      border-radius: 4px;
      padding: .25rem .6rem;
      cursor: pointer;
      transition: color .15s, border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .logout-btn:hover { color: var(--red-text) !important; border-color: var(--red) !important; background-color: transparent !important; }
    .logout-btn:active { transform: scale(.96); }

    /* body */
    .dash-body {
      flex: 1;
      padding: 2rem 1.5rem;
      max-width: 960px;
      margin: 0 auto;
      width: 100%;
    }

    /* section header */
    .section-label {
      font-family: var(--font-label);
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--color-muted);
      margin-bottom: .75rem;
    }

    /* sistemas grid */
    .systems-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: .875rem;
      margin-bottom: 2rem;
    }
    .system-card {
      background: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 1rem 1.1rem;
      cursor: pointer;
      transition: box-shadow .15s, transform .1s;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      text-decoration: none;
    }
    .system-card:hover {
      box-shadow: 0 6px 24px oklch(20% 0.03 218 / .15);
    }
    [data-theme="dark"] .system-card:hover {
      box-shadow: 0 6px 24px oklch(8% 0.015 22 / .55);
    }
    /* specs dos 3 DS proíbem box-shadow em cards — trocar affordance de hover por deslocamento */
    [data-ds] .system-card:hover {
      box-shadow: none;
      transform: translateY(-2px);
    }
    .system-card.coming-soon { opacity: .45; cursor: default; }
    .system-card.coming-soon:hover { transform: none; box-shadow: none; }
    /* Card em destaque exclusivo (Hub de Artistas) - fundo sólido var(--red)/on-red,
       mesmo tratamento aplicado nos cards de destaque do hub-artistas (Radar de
       Prospects, Lançamentos, Instagram) — consistência visual entre subprojetos.
       Funciona no Paperfish, DG, 1987 e default. */
    html .system-card.system-card-featured,
    html[data-ds] .system-card.system-card-featured,
    html[data-ds="paperfish"] .system-card.system-card-featured {
      background: var(--red) !important;
      border-color: color-mix(in oklch, var(--red) 85%, black) !important;
    }
    html .system-card.system-card-featured:hover,
    html[data-ds] .system-card.system-card-featured:hover,
    html[data-ds="paperfish"] .system-card.system-card-featured:hover {
      background: color-mix(in oklch, var(--red) 88%, black) !important;
      border-color: var(--on-red) !important;
    }
    html .system-card.system-card-featured .card-icon,
    html[data-ds] .system-card.system-card-featured .card-icon,
    html[data-ds="paperfish"] .system-card.system-card-featured .card-icon {
      background: rgba(255,255,255,.16) !important;
    }
    html .system-card.system-card-featured .card-icon svg,
    html[data-ds] .system-card.system-card-featured .card-icon svg,
    html[data-ds="paperfish"] .system-card.system-card-featured .card-icon svg {
      stroke: var(--on-red) !important;
    }
    html .system-card.system-card-featured .card-name,
    html[data-ds] .system-card.system-card-featured .card-name,
    html[data-ds="paperfish"] .system-card.system-card-featured .card-name {
      color: var(--on-red) !important;
    }
    html .system-card.system-card-featured .card-desc,
    html[data-ds] .system-card.system-card-featured .card-desc,
    html[data-ds="paperfish"] .system-card.system-card-featured .card-desc {
      color: color-mix(in oklch, var(--on-red) 75%, transparent) !important;
    }
    html .system-card.system-card-featured .card-status,
    html[data-ds] .system-card.system-card-featured .card-status,
    html[data-ds="paperfish"] .system-card.system-card-featured .card-status {
      color: var(--on-red) !important;
      background: rgba(255,255,255,.18) !important;
      border-color: rgba(255,255,255,.35) !important;
    }
    .card-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--card-accent, var(--red)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .card-name {
      font-family: var(--font-display);
      font-size: 1.1rem;
      letter-spacing: .04em;
      color: var(--color-labels);
    }
    .card-desc {
      font-size: .78rem;
      color: var(--color-muted);
      line-height: 1.45;
    }
    .card-status {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 3px;
      align-self: flex-start;
      margin-top: .15rem;
      border: 1px solid transparent;
    }
    .mms-acervo-card:hover {
      border-color: var(--red) !important;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.35);
    }
    .status-active {
      color: var(--red-text);
      background: color-mix(in oklch, var(--red) 10%, var(--color-card-bg));
      border-color: color-mix(in oklch, var(--red) 32%, var(--color-card-bg));
    }
    .status-soon { background: var(--color-border); color: var(--color-muted); }

    /* stats */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: .75rem;
    }
    .stat-card {
      background: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 7px;
      padding: .85rem 1rem;
    }
    .stat-value {
      font-family: var(--font-display);
      font-size: 1.8rem;
      color: var(--color-labels);
      line-height: 1;
    }
    .stat-label {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--color-muted);
      margin-top: .2rem;
    }

    /* admin users panel */
    .users-section { margin-top: 2.5rem; }
    .users-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .users-table th {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--color-muted);
      text-align: left;
      padding: .5rem .75rem;
      border-bottom: 1px solid var(--color-border);
    }
    .users-table td {
      padding: .6rem .75rem;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-labels);
    }
    .role-badge {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 3px;
    }
    .role-admin  { background: var(--red); color: var(--on-red); }
    .role-editor { background: oklch(20% 0.022 218); color: oklch(72% 0.045 218); }
    [data-theme="light"] .role-editor { background: oklch(88% 0.030 218); color: oklch(28% 0.040 218); }

    /* ── FILA DE POSTAGEM (MAKE.COM) ─────────────────────────────────── */
    .queue-section {
      margin-top: 2rem;
      background: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      padding: 1.25rem 1.5rem;
    }
    [data-ds] .queue-section { border-radius: 0; }
    .queue-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: .75rem;
    }
    .queue-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      letter-spacing: .04em;
      color: var(--color-labels);
    }
    .queue-subtitle {
      font-family: var(--font-label);
      font-size: .65rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--color-muted);
    }
    .queue-grid {
      display: flex; flex-direction: column; gap: .6rem;
    }
    .queue-item {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 5px;
      padding: .65rem .85rem;
      gap: 1rem;
    }
    [data-ds] .queue-item { border-radius: 0; }
    .queue-item-left { display: flex; align-items: center; gap: .85rem; }
    .queue-n {
      font-family: var(--font-label);
      font-size: .85rem;
      font-weight: 700;
      color: var(--red-text);
      background: color-mix(in oklch, var(--red) 14%, transparent);
      padding: 3px 8px;
      border-radius: 4px;
    }
    .queue-details { display: flex; flex-direction: column; gap: 2px; }
    .queue-item-title {
      font-family: var(--font-body);
      font-size: .85rem;
      font-weight: 600;
      color: var(--color-labels);
    }
    .queue-item-meta {
      font-family: var(--font-label);
      font-size: .65rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--color-muted);
    }
    .queue-item-right { display: flex; align-items: center; gap: .75rem; }
    .queue-date {
      font-family: var(--font-label);
      font-size: .75rem;
      letter-spacing: .08em;
      color: var(--color-labels);
    }
    .queue-badge {
      font-family: var(--font-label);
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 3px;
    }
    .badge-ready { background: oklch(40% 0.16 142); color: #fff; }

    /* hidden utility */
    .hidden { display: none !important; }

    /* ── MODAL ─────────────────────────────────────────────────────── */
    /* Padrão portado do insta (projects/insta-research .modal): opacity+pointer-events
       em vez de display:none, para animar ENTRADA e SAÍDA (display:none nunca transiciona).
       .modal-closed é dedicada a estes 4 modais — não usa a .hidden compartilhada (que tem
       !important e serve outros toggles do arquivo: screen-login/dashboard, switchers etc). */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 100;
      background: oklch(0% 0 0 / .6);
      display: flex; align-items: center; justify-content: center;
      padding: 1rem;
      opacity: 1;
      pointer-events: auto;
      transition: opacity 180ms ease-out;
    }
    .modal-overlay.modal-closed {
      opacity: 0;
      pointer-events: none;
    }
    .modal-card {
      background: var(--color-card-bg);
      border: 1px solid var(--color-border);
      border-radius: 10px;
      padding: 1.75rem 2rem;
      width: 100%; max-width: 400px;
      display: flex; flex-direction: column; gap: .85rem;
      transform: scale(1);
      opacity: 1;
      transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease-out;
    }
    .modal-overlay.modal-closed .modal-card {
      transform: scale(.95);
      opacity: 0;
    }
    /* Sob um DS ativo (os 3 são brutalistas — radius 0 em tudo menos pill/círculo), os
       containers modais seguem essa linguagem, tal como .ds-card já faz. Fora de DS,
       mantêm o 10px do tema Make. */
    [data-ds] .modal-card,
    [data-ds] .login-card { border-radius: 0; }
    .modal-title {
      font-family: var(--font-display);
      font-size: 1.3rem;
      letter-spacing: .04em;
      color: var(--color-labels);
    }
    .modal-label {
      font-family: var(--font-label);
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--color-muted);
      margin-bottom: .25rem;
      display: block;
    }
    .modal-input {
      width: 100%;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 5px;
      height: 2.4rem;
      padding: 0 .75rem;
      color: var(--color-labels);
      font-family: var(--font-body);
      font-size: .82rem;
      outline: none;
      transition: border-color .15s;
    }
    .modal-input:focus { border-color: var(--red); }
    .modal-input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
    .modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
    .modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .4rem; }
    .modal-btn {
      font-family: var(--font-label);
      font-size: .65rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      height: 2.25rem;
      padding: 0 1rem;
      border-radius: 5px;
      cursor: pointer;
      border: none;
      transition: opacity .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .modal-btn:hover { opacity: .85; }
    .modal-btn-close { width: 2.25rem; padding: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; flex-shrink: 0; }
    .modal-btn:active { transform: scale(.97); }
    .modal-btn-save   { background: var(--red); color: var(--on-red); }
    .modal-btn-cancel { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
    .modal-btn-danger { background: transparent; color: var(--color-error); border: 1px solid var(--color-error); }

    /* visualizador de design systems */
    .ds-viewer-card { width: 90vw; height: 90vh; max-width: none; padding: 1rem; }
    .ds-viewer-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; flex-shrink: 0; }
    .ds-viewer-tabs { display: flex; gap: .4rem; flex: 1; }
    .ds-tab {
      font-family: var(--font-label); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
      background: transparent; color: var(--color-muted); border: 1px solid var(--color-border);
      border-radius: 4px; padding: .3rem .6rem; cursor: pointer;
    }
    .ds-tab.active { color: var(--on-red); background: var(--red); border-color: var(--red); }
    #ds-viewer-frame, #ecosystem-viewer-frame { width: 100%; flex: 1; min-height: 0; border: 1px solid var(--color-border); background: var(--color-card-bg); }

    /* botão adicionar usuário */
    .add-user-btn {
      font-family: var(--font-label);
      font-size: .6rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: var(--red);
      color: var(--on-red);
      border: none;
      border-radius: 4px;
      padding: .35rem .75rem;
      cursor: pointer;
      transition: opacity .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .add-user-btn:hover { opacity: .85; }
    .add-user-btn:active { transform: scale(.96); }
    .action-btn {
      font-family: var(--font-label);
      font-size: .7rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: transparent;
      border: 1px solid var(--color-border);
      border-radius: 3px;
      padding: .4rem .85rem;
      min-height: 44px;
      cursor: pointer;
      color: var(--color-muted);
      transition: color .15s, border-color .15s, transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .action-btn:hover { color: var(--color-labels); border-color: var(--color-labels); }
    .action-btn.del:hover { color: var(--color-error); border-color: var(--color-error); }
    .action-btn:active { transform: scale(.96); }