/* =====================================================================
   Stölben UI — Design System (tema "Infra Premium")
   Derivado do site stolben.com. Voltado a aplicativos web reais (CRUD).
   CSS puro, sem build. Prefixo de classe: .ds-
   Carregue junto das fontes Manrope + Inter.
   ===================================================================== */

/* ------------------------------- TOKENS ------------------------------ */
:root {
  /* Superfícies */
  --ds-bg: #eef0f4;          /* fundo da janela */
  --ds-panel: #f7f8fa;       /* painel/coluna principal */
  --ds-surface: #ffffff;     /* cartões e campos */
  --ds-ink: #0f1115;         /* escuro forte (hero/realce) */
  --ds-ink-soft: #171a21;    /* escuro suave (áreas interativas) */
  --ds-topbar-bg: rgba(247, 248, 250, 0.85); /* fundo translúcido do topbar */

  /* Azul da marca (acento padrão) */
  --ds-blue: #2563eb;
  --ds-blue-light: #3b82f6;
  --ds-blue-dark: #1d4ed8;
  --ds-blue-50: #eff4ff;
  --ds-blue-100: #dbe6ff;

  /* Acento temável: cada app troca SÓ --ds-accent (ver classes .ds-theme-*).
     Os tons (light/dark/50/100/fg) são DERIVADOS daqui, para que o tema escuro
     consiga recalculá-los sozinho (senão um .ds-theme-* no body sobreporia os
     tons claros no escuro). Componentes usam --ds-accent*, nunca --ds-blue. */
  --ds-accent: var(--ds-blue);
  --ds-accent-light: color-mix(in srgb, var(--ds-accent), white 24%);
  --ds-accent-dark:  color-mix(in srgb, var(--ds-accent), black 28%);
  --ds-accent-50:    color-mix(in srgb, var(--ds-accent) 10%, white);
  --ds-accent-100:   color-mix(in srgb, var(--ds-accent) 20%, white);
  --ds-accent-fg:    var(--ds-accent);   /* acento como TEXTO/ícone (clareia no escuro) */
  --ds-on-accent:    #ffffff;            /* texto SOBRE o acento (botão sólido); escuro p/ acentos claros */

  --ds-text-strong: var(--ds-ink);    /* texto mais forte (valores, números) */
  --ds-subtle: #f3f4f6;               /* fundo neutro de chips/segmentos/badges */

  /* Estados semânticos */
  --ds-success: #15803d; --ds-success-50: #ecfdf3; --ds-success-100: #d1fadf;
  --ds-warn: #b45309;    --ds-warn-50: #fffaeb;    --ds-warn-100: #fef0c7;
  --ds-danger: #dc2626;  --ds-danger-50: #fef2f2;  --ds-danger-100: #fee2e2;
  --ds-info: var(--ds-accent); --ds-info-50: var(--ds-accent-50); --ds-info-100: var(--ds-accent-100);

  /* Texto */
  --ds-t-900: #111827;
  --ds-t-700: #374151;
  --ds-t-500: #586070;
  --ds-t-400: #8b91a0;
  /* Sobre escuro */
  --ds-on-dark: #e5e7eb;
  --ds-on-dark-dim: #9aa3b2;
  --ds-on-dark-faint: #6b7685;

  /* Linhas */
  --ds-line: #e7e9ee;
  --ds-line-strong: #d8dbe2;
  --ds-line-dash: #cfd3da;
  --ds-line-dark: rgba(255, 255, 255, 0.1);

  /* Tipografia */
  --ds-font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --ds-font-display: "Manrope", "Inter", sans-serif;
  --ds-fs-hero: clamp(2.4rem, 5.5vw, 4rem);
  --ds-fs-h1: clamp(2rem, 4vw, 3rem);
  --ds-fs-h2: clamp(1.6rem, 3vw, 2.3rem);
  --ds-fs-h3: 1.25rem;

  /* Raios */
  --ds-radius-xl: 2.5rem;
  --ds-radius-lg: 1.5rem;
  --ds-radius-md: 1rem;
  --ds-radius-sm: 0.6rem;
  --ds-radius-pill: 999px;

  /* Espaço (escala de 4px) */
  --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;    --ds-space-5: 1.25rem; --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;    --ds-space-10: 2.5rem; --ds-space-12: 3rem;
  --ds-space-16: 4rem;

  /* Sombras */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ds-shadow-card: 0 18px 40px rgba(15, 17, 21, 0.05);
  --ds-shadow-block: 0 30px 60px rgba(15, 17, 21, 0.18);
  --ds-shadow-glow-blue: 0 0 22px color-mix(in srgb, var(--ds-accent) 32%, transparent);
  --ds-shadow-menu: 0 12px 34px rgba(15, 17, 21, 0.16);

  /* Efeitos / movimento */
  --ds-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ds-dur-fast: 160ms;
  --ds-dur: 220ms;
  --ds-dur-slow: 700ms;
  --ds-blur: 14px;
  --ds-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* --------------------------- BASE (.ds-root) ------------------------- */
.ds-root, .ds-root * { box-sizing: border-box; }
.ds-root {
  font-family: var(--ds-font-sans);
  color: var(--ds-t-900);
  background: var(--ds-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ds-root a { color: inherit; text-decoration: none; }
.ds-root img { display: block; max-width: 100%; }
.ds-root ::selection { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-root h1, .ds-root h2, .ds-root h3 { text-wrap: balance; }
.ds-root :where(button, a, input, textarea, select, label) { -webkit-tap-highlight-color: transparent; }

/* ------------------------- FUNDO / SHELL ----------------------------- */
.ds-app {
  position: relative;
  max-width: 80rem;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--ds-panel);
  border-left: 1px dashed var(--ds-line-dash);
  border-right: 1px dashed var(--ds-line-dash);
  overflow: hidden;
}
.ds-lines { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 1rem; opacity: 0.2; pointer-events: none; z-index: 0; }
.ds-lines span { width: 1px; background: var(--ds-line-strong); }
.ds-noise { position: absolute; inset: 0; background-image: var(--ds-noise); opacity: 0.06; mix-blend-mode: soft-light; pointer-events: none; }
.ds-glow { position: absolute; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ds-accent) 20%, transparent), transparent 70%); filter: blur(50px); pointer-events: none; }

.ds-panel-dark { position: relative; border-radius: var(--ds-radius-xl); overflow: hidden; background: var(--ds-ink); color: #fff; box-shadow: var(--ds-shadow-block); }
.ds-surface { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); }

/* Imagem de fundo (foto real) com gradiente de leitura */
.ds-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ds-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.ds-media-grad { position: absolute; inset: 0; background: linear-gradient(120deg, var(--ds-ink) 30%, rgba(15, 17, 21, 0.6) 62%, rgba(15, 17, 21, 0.35)); }
.ds-media-grad--bottom { background: linear-gradient(to top, var(--ds-ink) 8%, rgba(15, 17, 21, 0.55) 46%, rgba(15, 17, 21, 0.82)); }

/* ----------------------------- TIPOGRAFIA ---------------------------- */
.ds-display { font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.ds-h1 { font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-fs-h1); letter-spacing: -0.035em; line-height: 1.05; }
.ds-h2 { font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-fs-h2); letter-spacing: -0.03em; line-height: 1.08; }
.ds-h3 { font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-fs-h3); letter-spacing: -0.01em; }
.ds-lead { font-size: 1.1rem; color: var(--ds-t-700); }
.ds-muted { color: var(--ds-t-400); }
.ds-kicker { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ds-accent-fg); font-weight: 600; }
.ds-eyebrow { font-size: 0.85rem; color: var(--ds-t-500); }
.ds-mono { font-variant-numeric: tabular-nums; }

/* ------------------------------ BOTÕES ------------------------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--ds-font-sans); font-weight: 500; font-size: 0.95rem; line-height: 1;
  padding: 0.65rem 1.1rem; border-radius: var(--ds-radius-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: background var(--ds-dur-fast), color var(--ds-dur-fast),
    border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast), transform var(--ds-dur-fast);
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn svg { width: 1.05em; height: 1.05em; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Sombra nítida e direcional, tintada no acento (evita o glow difuso/"sujo"
   ao redor que um box-shadow 0 0 22px produzia). */
.ds-btn--solid { background: var(--ds-accent); color: var(--ds-on-accent); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ds-accent) 60%, transparent); }
.ds-btn--solid:hover { background: var(--ds-accent-dark); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--ds-accent) 70%, transparent); }
.ds-btn--primary { background: var(--ds-ink); color: #fff; }
.ds-btn--primary:hover { background: #000; }
.ds-btn--ghost { background: var(--ds-surface); color: var(--ds-t-900); border-color: var(--ds-line-strong); }
.ds-btn--ghost:hover { border-color: var(--ds-t-700); background: var(--ds-accent-50); }
.ds-btn--subtle { background: var(--ds-subtle); color: var(--ds-t-900); }
.ds-btn--subtle:hover { background: var(--ds-accent-50); color: var(--ds-accent-fg); }
.ds-btn--danger { background: var(--ds-danger); color: #fff; }
.ds-btn--danger:hover { background: #b91c1c; }
.ds-btn--sm { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.ds-btn--lg { padding: 0.85rem 1.5rem; font-size: 1.05rem; }
.ds-btn--block { width: 100%; }
.ds-btn--icon { padding: 0.55rem; width: 2.4rem; height: 2.4rem; }
.ds-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-t-500); cursor: pointer; transition: color var(--ds-dur-fast), border-color var(--ds-dur-fast), background var(--ds-dur-fast); }
.ds-icon-btn:hover { color: var(--ds-accent-fg); border-color: var(--ds-accent-100); background: var(--ds-accent-50); }
.ds-icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* ---------------------- CABEÇALHO / TOPBAR --------------------------- */
.ds-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.25rem; background: var(--ds-topbar-bg); backdrop-filter: blur(var(--ds-blur)); border-bottom: 1px solid var(--ds-line); transition: box-shadow var(--ds-dur); }
.ds-topbar.is-scrolled { box-shadow: 0 8px 24px rgba(15, 17, 21, 0.06); }
.ds-topbar-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ds-t-900); }
.ds-topbar-brand .ds-logo { width: 1.85rem; height: 1.85rem; border-radius: 0.55rem; background: var(--ds-ink); color: #fff; display: grid; place-items: center; font-size: 0.9rem; }
.ds-topbar-nav { display: flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; }
.ds-topbar-nav a { padding: 0.45rem 0.8rem; border-radius: var(--ds-radius-sm); font-size: 0.9rem; color: var(--ds-t-500); transition: color var(--ds-dur-fast), background var(--ds-dur-fast); }
.ds-topbar-nav a:hover { color: var(--ds-t-900); background: var(--ds-accent-50); }
.ds-topbar-nav a.is-active { color: var(--ds-accent-fg); background: var(--ds-accent-50); }
.ds-topbar-spacer { flex: 1; }
.ds-topbar-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Cabeçalho escuro (variante hero/app dark) */
.ds-topbar--dark { background: rgba(15, 17, 21, 0.82); border-color: var(--ds-line-dark); }
.ds-topbar--dark .ds-topbar-brand { color: #fff; }
.ds-topbar--dark .ds-topbar-nav a { color: var(--ds-on-dark-dim); }
.ds-topbar--dark .ds-topbar-nav a:hover, .ds-topbar--dark .ds-topbar-nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Avatar / user chip */
.ds-avatar { width: 2.25rem; height: 2.25rem; border-radius: var(--ds-radius-pill); background: var(--ds-accent); color: var(--ds-on-accent); display: grid; place-items: center; font-weight: 600; font-size: 0.85rem; font-family: var(--ds-font-display); flex-shrink: 0; }

/* ------------------- NAV FLUTUANTE (pílula de site) ------------------ */
/* Pílula de navegação fixa (mesma do site stolben.com): fundo escuro semi-
   sólido + blur, borda discreta, sombra simples. Pensada para flutuar sobre
   um hero escuro/foto (texto branco). Diferente do .ds-topbar (barra de apps
   com sidebar). Coloque [data-ds-nav] para o JS escurecer ao rolar
   (classe .is-scrolled). A página precisa de espaço no topo (a nav é fixa).
   Marque o acento do logo com <span class="ds-nav-accent">. */
.ds-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 1.1rem 1rem; pointer-events: none; }
.ds-nav-pill {
  pointer-events: auto; display: flex; align-items: center; gap: 1.4rem;
  padding: 0.5rem 0.6rem 0.5rem 1.25rem; font-size: 0.9rem;
  border-radius: var(--ds-radius-pill);
  background: rgba(15, 17, 21, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  transition: background var(--ds-dur), box-shadow var(--ds-dur);
}
.ds-nav.is-scrolled .ds-nav-pill {
  background: rgba(15, 17, 21, 0.9);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}
/* .ds-nav-pill .ds-* eleva a especificidade acima de `.ds-root a {color:inherit}` */
.ds-nav-pill .ds-nav-brand { color: #fff; font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 0.95rem; }
.ds-nav-pill .ds-nav-brand .ds-nav-accent { color: var(--ds-accent-light); }
.ds-nav-links { display: flex; align-items: center; gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.ds-nav-pill .ds-nav-links a { color: var(--ds-on-dark-dim); font-size: 0.88rem; transition: color var(--ds-dur-fast); }
.ds-nav-pill .ds-nav-links a:hover, .ds-nav-pill .ds-nav-links a.is-active { color: #fff; }
.ds-nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.ds-nav-pill .ds-nav-cta { background: #fff; color: #000; padding: 0.45rem 1.1rem; border-radius: var(--ds-radius-pill); font-weight: 500; white-space: nowrap; transition: background var(--ds-dur-fast); }
.ds-nav-pill .ds-nav-cta:hover { background: var(--ds-accent-50); }
/* Controle de tema na nav. Duas opções:
   (a) 3-vias (recomendado): .ds-segment.ds-mode + [data-ds-theme-mode] com
       botões claro/auto/escuro — já fica em vidro dentro da pílula.
   (b) Simples (2 estados): .ds-nav-toggle + [data-ds-dark-toggle] com dois
       ícones <svg class="ds-icon-moon"> e <svg class="ds-icon-sun">. */
.ds-nav-pill .ds-segment { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); }
.ds-nav-pill .ds-segment button { color: rgba(255, 255, 255, 0.65); }
.ds-nav-pill .ds-segment button:hover { color: #fff; }
.ds-nav-pill .ds-segment button.is-active { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; }

.ds-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; color: #fff; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--ds-radius-pill); transition: background var(--ds-dur-fast), border-color var(--ds-dur-fast); }
.ds-nav-toggle:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); }
.ds-nav-toggle svg { width: 1.05rem; height: 1.05rem; }
.ds-nav-toggle .ds-icon-sun { display: none; }
.ds-dark .ds-nav-toggle .ds-icon-moon { display: none; }
.ds-dark .ds-nav-toggle .ds-icon-sun { display: inline; }

/* ------------------------------ CARTÕES ------------------------------ */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); transition: box-shadow var(--ds-dur-slow) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.ds-card--hover:hover { box-shadow: var(--ds-shadow-card); transform: translateY(-3px); }
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.ds-stat { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 1.4rem 1.6rem; }
.ds-stat strong { display: block; font-family: var(--ds-font-display); font-weight: 600; font-size: 1.8rem; letter-spacing: -0.02em; color: var(--ds-text-strong); font-variant-numeric: tabular-nums; }
.ds-stat span { font-size: 0.9rem; color: var(--ds-t-500); }
.ds-icon-box { width: 2.75rem; height: 2.75rem; border-radius: var(--ds-radius-md); background: var(--ds-accent-50); border: 1px solid var(--ds-accent-100); color: var(--ds-accent-fg); display: grid; place-items: center; }
.ds-icon-box svg { width: 1.4rem; height: 1.4rem; }

/* ------------------------------ BADGES ------------------------------- */
.ds-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 500; padding: 0.25rem 0.65rem; border-radius: var(--ds-radius-pill); border: 1px solid transparent; line-height: 1.3; }
.ds-badge .ds-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.ds-badge--neutral { color: var(--ds-t-700); background: var(--ds-subtle); border-color: var(--ds-line); }
.ds-badge--info { color: var(--ds-accent-dark); background: var(--ds-info-50); border-color: var(--ds-info-100); }
.ds-badge--success { color: var(--ds-success); background: var(--ds-success-50); border-color: var(--ds-success-100); }
.ds-badge--warn { color: var(--ds-warn); background: var(--ds-warn-50); border-color: var(--ds-warn-100); }
.ds-badge--danger { color: var(--ds-danger); background: var(--ds-danger-50); border-color: var(--ds-danger-100); }

/* ---------------------------- FORMULÁRIOS ---------------------------- */
.ds-field { display: block; margin-bottom: 1rem; }
.ds-label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--ds-t-700); margin-bottom: 0.4rem; }
.ds-label .ds-req { color: var(--ds-danger); }
.ds-input, .ds-textarea, .ds-select {
  width: 100%; font-family: inherit; font-size: 0.95rem; color: var(--ds-t-900);
  background: var(--ds-surface); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-sm);
  padding: 0.65rem 0.85rem; transition: border-color var(--ds-dur-fast), box-shadow var(--ds-dur-fast);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-t-400); }
.ds-input:focus, .ds-textarea:focus, .ds-select:focus { outline: none; border-color: var(--ds-accent-fg); box-shadow: 0 0 0 3px var(--ds-accent-100); }
.ds-textarea { resize: vertical; min-height: 6rem; }
.ds-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; }
.ds-input--invalid, .ds-textarea--invalid { border-color: var(--ds-danger); }
.ds-input--invalid:focus { box-shadow: 0 0 0 3px var(--ds-danger-100); }
.ds-help { font-size: 0.8rem; color: var(--ds-t-500); margin-top: 0.35rem; }
.ds-help--error { color: var(--ds-danger); }

/* Search */
.ds-search { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 22rem; }
.ds-search svg { position: absolute; left: 0.75rem; width: 1.05rem; height: 1.05rem; color: var(--ds-t-400); pointer-events: none; }
.ds-search .ds-input { padding-left: 2.4rem; }

/* Checkbox / radio */
.ds-check { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; color: var(--ds-t-700); }
.ds-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--ds-accent-fg); cursor: pointer; }

/* Switch */
.ds-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; color: var(--ds-t-700); }
.ds-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-switch-track { width: 2.5rem; height: 1.4rem; border-radius: var(--ds-radius-pill); background: var(--ds-line-strong); position: relative; transition: background var(--ds-dur); flex-shrink: 0; }
.ds-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: var(--ds-shadow-sm); transition: transform var(--ds-dur) var(--ds-ease); }
.ds-switch input:checked + .ds-switch-track { background: var(--ds-accent); }
.ds-switch input:checked + .ds-switch-track::after { transform: translateX(1.1rem); }
.ds-switch input:focus-visible + .ds-switch-track { outline: 2px solid var(--ds-accent-light); outline-offset: 2px; }

/* ------------------------------ TABELA ------------------------------- */
.ds-table-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-surface); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ds-table thead th { text-align: left; font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-t-500); padding: 0.85rem 1rem; background: var(--ds-panel); border-bottom: 1px solid var(--ds-line); white-space: nowrap; }
.ds-table tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--ds-line); color: var(--ds-t-700); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr { transition: background var(--ds-dur-fast); }
.ds-table tbody tr:hover { background: var(--ds-accent-50); }
.ds-table tbody tr.is-selected { background: var(--ds-accent-50); }
.ds-table .ds-td-strong { color: var(--ds-t-900); font-weight: 500; }
.ds-table .ds-td-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table th.ds-th-sort { cursor: pointer; user-select: none; }
.ds-table th.ds-th-sort:hover { color: var(--ds-t-700); }
.ds-table th.ds-th-sort::after { content: "↕"; margin-left: 0.35rem; opacity: 0.45; }
.ds-table th[aria-sort="ascending"]::after { content: "↑"; opacity: 1; color: var(--ds-accent-fg); }
.ds-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--ds-accent-fg); }
.ds-row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; }

/* Toolbar (lista CRUD: busca + filtros + ação) */
.ds-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ds-toolbar-spacer { flex: 1; }

/* Paginação */
.ds-pagination { display: flex; align-items: center; gap: 0.3rem; }
.ds-pagination button { min-width: 2.2rem; height: 2.2rem; padding: 0 0.5rem; border-radius: var(--ds-radius-sm); border: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-t-700); font-size: 0.88rem; cursor: pointer; font-variant-numeric: tabular-nums; transition: color var(--ds-dur-fast), border-color var(--ds-dur-fast), background var(--ds-dur-fast); }
.ds-pagination button:hover:not(:disabled) { border-color: var(--ds-accent-100); background: var(--ds-accent-50); color: var(--ds-accent-fg); }
.ds-pagination button[aria-current="page"] { background: var(--ds-ink); color: #fff; border-color: var(--ds-text-strong); }
.ds-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------- TABS -------------------------------- */
.ds-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--ds-line); }
.ds-tab { appearance: none; border: 0; background: none; font: inherit; cursor: pointer; padding: 0.7rem 1rem; font-size: 0.92rem; color: var(--ds-t-500); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ds-dur-fast), border-color var(--ds-dur-fast); }
.ds-tab:hover { color: var(--ds-t-900); }
.ds-tab.is-active { color: var(--ds-accent-fg); border-bottom-color: var(--ds-accent-fg); }
.ds-tabpanel[hidden] { display: none; }

/* ------------------------- ALERTAS / TOASTS -------------------------- */
.ds-alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1.1rem; border-radius: var(--ds-radius-md); border: 1px solid; font-size: 0.92rem; }
.ds-alert svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: 0.05rem; }
.ds-alert-title { font-weight: 600; }
.ds-alert--info { color: var(--ds-accent-dark); background: var(--ds-info-50); border-color: var(--ds-info-100); }
.ds-alert--success { color: var(--ds-success); background: var(--ds-success-50); border-color: var(--ds-success-100); }
.ds-alert--warn { color: var(--ds-warn); background: var(--ds-warn-50); border-color: var(--ds-warn-100); }
.ds-alert--danger { color: var(--ds-danger); background: var(--ds-danger-50); border-color: var(--ds-danger-100); }

.ds-toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(22rem, 90vw); }
.ds-toast { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; background: var(--ds-ink); color: #fff; border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-menu); font-size: 0.9rem; animation: ds-toast-in var(--ds-dur) var(--ds-ease); }
.ds-toast svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.ds-toast--success svg { color: #4ade80; }
.ds-toast--danger svg { color: #f87171; }
.ds-toast.is-leaving { animation: ds-toast-out var(--ds-dur) var(--ds-ease) forwards; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes ds-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* ------------------------------ MODAL -------------------------------- */
.ds-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15, 17, 21, 0.55); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 1.25rem; opacity: 0; pointer-events: none; transition: opacity var(--ds-dur); }
.ds-overlay.is-open { opacity: 1; pointer-events: auto; }
.ds-modal { width: min(34rem, 100%); background: var(--ds-surface); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-block); overflow: hidden; transform: translateY(12px) scale(0.98); transition: transform var(--ds-dur) var(--ds-ease); overscroll-behavior: contain; }
.ds-overlay.is-open .ds-modal { transform: none; }
.ds-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.1rem 1.1rem 1.5rem; border-bottom: 1px solid var(--ds-line); }
.ds-modal-head .ds-h3 { line-height: 1.2; }
.ds-modal-body { padding: 1.5rem; }
.ds-modal-body .ds-field:last-child { margin-bottom: 0; }
.ds-modal-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.9rem 1.1rem 0.9rem 1.5rem; border-top: 1px solid var(--ds-line); background: var(--ds-panel); }

/* ------------------------- DROPDOWN MENU ----------------------------- */
.ds-menu-wrap { position: relative; display: inline-block; }
.ds-menu { position: absolute; right: 0; top: calc(100% + 0.4rem); min-width: 11rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-menu); padding: 0.35rem; z-index: 40; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--ds-dur-fast), transform var(--ds-dur-fast); }
.ds-menu-wrap.is-open .ds-menu { opacity: 1; transform: none; pointer-events: auto; }
.ds-menu button, .ds-menu a { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.5rem 0.7rem; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--ds-t-700); border-radius: var(--ds-radius-sm); cursor: pointer; }
.ds-menu button:hover, .ds-menu a:hover { background: var(--ds-accent-50); color: var(--ds-accent-fg); }
.ds-menu button svg, .ds-menu a svg { width: 1rem; height: 1rem; }
.ds-menu-sep { height: 1px; background: var(--ds-line); margin: 0.35rem 0.2rem; }
.ds-menu .ds-menu--danger { color: var(--ds-danger); }
.ds-menu .ds-menu--danger:hover { background: var(--ds-danger-50); color: var(--ds-danger); }

/* --------------------------- EMPTY STATE ----------------------------- */
.ds-empty { text-align: center; padding: 3rem 1.5rem; color: var(--ds-t-500); }
.ds-empty .ds-icon-box { margin: 0 auto 1rem; }
.ds-empty h3 { color: var(--ds-t-900); margin-bottom: 0.4rem; }

/* ---------------------- PROGRESS / SPINNER / SKELETON ---------------- */
.ds-progress { height: 0.5rem; border-radius: var(--ds-radius-pill); background: var(--ds-line); overflow: hidden; }
.ds-progress-fill { height: 100%; border-radius: inherit; background: var(--ds-accent); position: relative; overflow: hidden; }
.ds-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: ds-shine 1.4s infinite; }
@keyframes ds-shine { to { transform: translateX(200%); } }
.ds-spinner { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--ds-accent-100); border-top-color: var(--ds-accent-fg); animation: ds-spin 0.7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-skeleton { background: linear-gradient(90deg, #eceef2 25%, #f4f6f9 37%, #eceef2 63%); background-size: 400% 100%; border-radius: var(--ds-radius-sm); animation: ds-skel 1.4s ease infinite; }
@keyframes ds-skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ----------------------- REVELAR AO ROLAR ---------------------------- */
.js .ds-reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--ds-dur-slow) var(--ds-ease), transform var(--ds-dur-slow) var(--ds-ease); will-change: opacity, transform; }
.js .ds-reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------ UTILS -------------------------------- */
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-6); }
.ds-row { display: flex; align-items: center; gap: var(--ds-space-3); }
.ds-grid { display: grid; gap: var(--ds-space-6); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================================================================
   EXTENSÕES v1.1 — layout de app e mais componentes de CRUD
   =================================================================== */

/* ---- App shell com sidebar (layout de admin/CRUD) ---- */
.ds-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.ds-sidebar { background: var(--ds-panel); border-right: 1px solid var(--ds-line); padding: 1rem 0.75rem; display: flex; flex-direction: column; }
.ds-sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 1rem; font-family: var(--ds-font-display); font-weight: 600; color: var(--ds-t-900); }
.ds-sidebar-group { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ds-t-400); padding: 1rem 0.6rem 0.35rem; }
.ds-sidebar-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.6rem; border-radius: var(--ds-radius-sm); font-size: 0.9rem; color: var(--ds-t-700); transition: color var(--ds-dur-fast), background var(--ds-dur-fast); }
.ds-sidebar-link svg { width: 1.1rem; height: 1.1rem; color: var(--ds-t-400); }
.ds-sidebar-link:hover { background: var(--ds-accent-50); color: var(--ds-t-900); }
.ds-sidebar-link.is-active { background: var(--ds-accent-50); color: var(--ds-accent-fg); font-weight: 500; }
.ds-sidebar-link.is-active svg { color: var(--ds-accent-fg); }
.ds-main { min-width: 0; }

/* ---- Breadcrumb ---- */
.ds-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; font-size: 0.85rem; color: var(--ds-t-500); }
.ds-breadcrumb li { display: flex; align-items: center; gap: 0.5rem; }
.ds-breadcrumb li + li::before { content: "/"; color: var(--ds-t-400); }
.ds-breadcrumb a:hover { color: var(--ds-accent-fg); }
.ds-breadcrumb [aria-current] { color: var(--ds-t-900); font-weight: 500; }

/* ---- Radio (mesmo alvo do checkbox) ---- */
.ds-radio { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; font-size: 0.92rem; color: var(--ds-t-700); }
.ds-radio input { width: 1.1rem; height: 1.1rem; accent-color: var(--ds-accent-fg); cursor: pointer; }

/* ---- Segmented control / filtros ---- */
.ds-segment { display: inline-flex; background: var(--ds-subtle); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); padding: 0.2rem; }
.ds-segment button { appearance: none; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--ds-t-500); padding: 0.4rem 0.85rem; border-radius: calc(var(--ds-radius-sm) - 0.15rem); cursor: pointer; transition: color var(--ds-dur-fast), background var(--ds-dur-fast); }
.ds-segment button:hover { color: var(--ds-t-900); }
.ds-segment button.is-active { background: var(--ds-surface); color: var(--ds-t-900); box-shadow: var(--ds-shadow-sm); }

/* ---- Description list (tela de detalhe) ---- */
.ds-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem 1.5rem; font-size: 0.92rem; align-items: baseline; }
.ds-dl dt { color: var(--ds-t-500); }
.ds-dl dd { color: var(--ds-t-900); font-weight: 500; }

/* ---- Chips removíveis ---- */
.ds-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; padding: 0.28rem 0.35rem 0.28rem 0.7rem; border-radius: var(--ds-radius-pill); background: var(--ds-accent-50); color: var(--ds-accent-dark); border: 1px solid var(--ds-accent-100); }
.ds-chip button { appearance: none; border: 0; background: none; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; }
.ds-chip button:hover { background: var(--ds-accent-100); }
.ds-chip button svg { width: 0.8rem; height: 0.8rem; }

/* ---- Drawer / slide-over (usa .ds-overlay) ---- */
.ds-overlay--side { place-items: stretch; padding: 0; }
.ds-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(26rem, 100%); background: var(--ds-surface); box-shadow: var(--ds-shadow-block); transform: translateX(100%); transition: transform var(--ds-dur) var(--ds-ease); display: flex; flex-direction: column; overscroll-behavior: contain; margin-left: auto; }
.ds-overlay.is-open .ds-drawer { transform: none; }
.ds-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--ds-line); }
.ds-drawer-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.ds-drawer-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--ds-line); background: var(--ds-panel); }

/* ---- Dropzone (upload) ---- */
.ds-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; padding: 2rem; border: 1.5px dashed var(--ds-line-strong); border-radius: var(--ds-radius-md); background: var(--ds-panel); color: var(--ds-t-500); cursor: pointer; transition: border-color var(--ds-dur-fast), background var(--ds-dur-fast); }
.ds-dropzone:hover, .ds-dropzone.is-drag { border-color: var(--ds-accent-fg); background: var(--ds-accent-50); }
.ds-dropzone strong { color: var(--ds-t-900); }
.ds-dropzone svg { width: 1.6rem; height: 1.6rem; color: var(--ds-t-400); }

/* ---- Accordion ---- */
.ds-accordion { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); overflow: hidden; background: var(--ds-surface); }
.ds-accordion-item + .ds-accordion-item { border-top: 1px solid var(--ds-line); }
.ds-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; background: none; border: 0; font: inherit; font-weight: 500; color: var(--ds-t-900); cursor: pointer; text-align: left; }
.ds-accordion-trigger svg { width: 1.1rem; height: 1.1rem; color: var(--ds-t-400); transition: transform var(--ds-dur); flex-shrink: 0; }
.ds-accordion-item.is-open .ds-accordion-trigger svg { transform: rotate(180deg); }
.ds-accordion-panel { padding: 0 1.1rem 1.1rem; color: var(--ds-t-500); font-size: 0.92rem; }
.ds-accordion-panel[hidden] { display: none; }

/* ---- Tooltip (CSS, complementar) ---- */
[data-ds-tip] { position: relative; }
/* Abre PARA BAIXO (controles de topo não cortam no topo da tela) */
[data-ds-tip]::after { content: attr(data-ds-tip); position: absolute; top: calc(100% + 0.45rem); left: 50%; transform: translateX(-50%) translateY(-4px); background: var(--ds-ink); color: #fff; border: 1px solid var(--ds-line-strong); font-size: 0.74rem; line-height: 1.3; padding: 0.3rem 0.55rem; border-radius: var(--ds-radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--ds-dur-fast), transform var(--ds-dur-fast); z-index: 60; }
[data-ds-tip]:hover::after, [data-ds-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
/* Variante para abrir para cima, quando houver espaço */
[data-ds-tip][data-ds-tip-up]::after { top: auto; bottom: calc(100% + 0.45rem); transform: translateX(-50%) translateY(4px); }

/* ---- kbd ---- */
.ds-kbd { font-family: ui-monospace, monospace; font-size: 0.78rem; padding: 0.1rem 0.4rem; border: 1px solid var(--ds-line-strong); border-bottom-width: 2px; border-radius: 0.35rem; background: var(--ds-surface); color: var(--ds-t-700); }

/* ---- Count badge (notificação) ---- */
.ds-icon-btn { position: relative; }
.ds-count { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: var(--ds-radius-pill); background: var(--ds-danger); color: #fff; font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-icon-btn .ds-count { position: absolute; top: -0.35rem; right: -0.35rem; border: 2px solid var(--ds-panel); }

/* ===================================================================
   MOBILE — navegação colapsável (gaveta), reorganização e toque.
   No desktop nada muda; no mobile a sidebar vira gaveta off-canvas
   acionada por um botão hambúrguer (data-ds-nav-toggle).
   =================================================================== */
.ds-topbar-burger { display: none; }   /* só aparece no mobile */
.ds-nav-backdrop { display: none; }

@media (max-width: 820px) {
  .ds-shell { grid-template-columns: 1fr; }
  .ds-dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .ds-dl dt { margin-top: 0.6rem; }

  /* alvos de toque maiores */
  .ds-icon-btn { width: 2.5rem; height: 2.5rem; }
  .ds-sidebar-link { padding-top: 0.7rem; padding-bottom: 0.7rem; }

  /* nav flutuante de site: os links colapsam (mantém brand + ações/CTA) */
  .ds-nav-links { display: none; }

  /* topbar respeita safe-area, mostra o hambúrguer e aperta o espaçamento */
  .ds-topbar { gap: 0.5rem; padding-left: max(0.85rem, env(safe-area-inset-left)); padding-right: max(0.85rem, env(safe-area-inset-right)); }
  .ds-topbar-burger { display: inline-flex; }
  /* a busca global do topbar colapsa no mobile (use a busca da .ds-toolbar) */
  .ds-topbar > .ds-search { display: none; }

  /* sidebar vira gaveta off-canvas */
  .ds-sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(17rem, 82vw); z-index: 80;
    transform: translateX(-100%);
    transition: transform var(--ds-dur) var(--ds-ease);
    border-right: 1px solid var(--ds-line);
    box-shadow: var(--ds-shadow-block);
    overflow-y: auto;
    padding-left: max(0.75rem, env(safe-area-inset-left));
    overscroll-behavior: contain;
  }
  .ds-shell.is-nav-open .ds-sidebar { transform: none; }

  /* backdrop escurece o resto quando a gaveta abre */
  .ds-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(10, 12, 16, 0.5); opacity: 0; pointer-events: none;
    transition: opacity var(--ds-dur);
  }
  .ds-shell.is-nav-open .ds-nav-backdrop { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-sidebar { transition: none; }
}

/* ===================================================================
   TEMAS DE ACENTO — aplique a classe em .ds-root (ou em um container).
   Padrão (sem classe) = azul. Estados success/warn/danger não mudam.
   =================================================================== */
.ds-theme-indigo  { --ds-accent: #4f46e5; }
.ds-theme-violet  { --ds-accent: #7c3aed; }
.ds-theme-teal    { --ds-accent: #0f766e; }
.ds-theme-emerald { --ds-accent: #047857; }
.ds-theme-amber   { --ds-accent: #d97706; --ds-on-accent: #1c1407; }  /* âmbar é claro: texto escuro */
.ds-theme-rose    { --ds-accent: #be123c; }
.ds-theme-slate   { --ds-accent: #475569; }

/* ===================================================================
   TEMA ESCURO — aplique .ds-dark no <html> (ou na raiz). Funciona com
   qualquer .ds-theme-*. Cinzas suaves (sem preto puro), texto off-white
   e acento clareado para leitura confortável. Vem DEPOIS dos temas para
   recalcular os tons de acento (50/100/dark/fg) em versão escura.
   =================================================================== */
.ds-dark {
  color-scheme: dark;
  --ds-bg: #0b0e13;
  --ds-panel: #10141b;
  --ds-surface: #171c25;
  --ds-ink: #0a0d12;
  --ds-ink-soft: #12161d;
  --ds-topbar-bg: rgba(16, 20, 27, 0.85);
  --ds-text-strong: #f3f5f9;
  --ds-t-900: #e6e9f0;
  --ds-t-700: #c2c8d4;
  --ds-t-500: #8b94a3;
  --ds-t-400: #6c7484;
  --ds-line: #232a35;
  --ds-line-strong: #2e3744;
  --ds-line-dash: #2e3744;
  --ds-subtle: #1c222c;
  /* acento derivado: clareia para contraste no escuro */
  --ds-accent-fg: color-mix(in srgb, var(--ds-accent), white 30%);
  --ds-accent-dark: var(--ds-accent-fg);
  --ds-accent-50: color-mix(in srgb, var(--ds-accent) 16%, #161b24);
  --ds-accent-100: color-mix(in srgb, var(--ds-accent) 30%, #161b24);
  /* estados: texto mais claro + fundo escuro tintado */
  --ds-success: #34d399; --ds-success-50: color-mix(in srgb, #34d399 15%, #161b24); --ds-success-100: color-mix(in srgb, #34d399 30%, #161b24);
  --ds-warn:    #fbbf24; --ds-warn-50: color-mix(in srgb, #fbbf24 15%, #161b24);    --ds-warn-100: color-mix(in srgb, #fbbf24 30%, #161b24);
  --ds-danger:  #f87171; --ds-danger-50: color-mix(in srgb, #f87171 15%, #161b24);  --ds-danger-100: color-mix(in srgb, #f87171 30%, #161b24);
  /* sombras menos visíveis no escuro */
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ds-shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35);
  --ds-shadow-block: 0 30px 60px rgba(0, 0, 0, 0.55);
  --ds-shadow-menu: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.ds-dark .ds-skeleton { background: linear-gradient(90deg, #1b212b 25%, #232a35 37%, #1b212b 63%); background-size: 400% 100%; }
.ds-dark .ds-btn--primary { background: var(--ds-t-900); color: var(--ds-bg); }
.ds-dark .ds-btn--primary:hover { background: #fff; }
.ds-dark .ds-switch-track::after { background: #e6e9f0; }

/* Controle de modo claro / automático / escuro (segmento compacto) */
.ds-mode button { padding: 0.42rem 0.6rem; }
.ds-mode button svg { width: 1.05rem; height: 1.05rem; display: block; }
/* Botão único de alternância (variante legada) */
[data-ds-dark-toggle] .ds-i-sun { display: none; }
.ds-dark [data-ds-dark-toggle] .ds-i-moon { display: none; }
.ds-dark [data-ds-dark-toggle] .ds-i-sun { display: inline-flex; }

/* ===================================================================
   VISUALIZAÇÕES DE LISTA — tabela (.ds-table), cards, lista, board.
   Princípio: só o essencial em destaque, com hierarquia clara
   (título forte > valor > status > meta discreta).
   =================================================================== */

/* Alternador de visualização (use .ds-segment com ícones) */
.ds-segment button svg { width: 1.05rem; height: 1.05rem; }

/* ---- Grade de cards de registro ---- */
.ds-record { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: 0.85rem; transition: box-shadow var(--ds-dur-slow) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.ds-record--link { cursor: pointer; }
.ds-record--link:hover { box-shadow: var(--ds-shadow-card); transform: translateY(-3px); }
.ds-record-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ds-record-title { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ds-t-900); }
.ds-record-meta { font-size: 0.86rem; color: var(--ds-t-500); }
.ds-record-value { font-family: var(--ds-font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ds-text-strong); font-variant-numeric: tabular-nums; }
.ds-record-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--ds-line); margin-top: auto; }

/* ---- Lista compacta (linhas) ---- */
.ds-list { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); overflow: hidden; }
.ds-list-item { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--ds-line); transition: background var(--ds-dur-fast); }
.ds-list-item:first-child { border-top: 0; }
.ds-list-item:hover { background: var(--ds-accent-50); }
.ds-list-main { min-width: 0; flex: 1; }
.ds-list-title { font-weight: 500; color: var(--ds-t-900); }
.ds-list-meta { font-size: 0.84rem; color: var(--ds-t-500); }
.ds-list-trail { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }

/* ---- Board / colunas (kanban) ---- */
.ds-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; }
.ds-board-col { background: var(--ds-panel); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); display: flex; flex-direction: column; min-height: 8rem; }
.ds-board-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.85rem 1rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-t-500); border-bottom: 1px solid var(--ds-line); }
.ds-board-col-head .ds-count { background: var(--ds-line); color: var(--ds-t-700); border: 0; }
.ds-board-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem; }
.ds-board-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.5rem; transition: box-shadow var(--ds-dur), border-color var(--ds-dur); }
.ds-board-card:hover { box-shadow: var(--ds-shadow-card); border-color: var(--ds-line-strong); }
.ds-board-card-title { font-weight: 500; color: var(--ds-t-900); font-size: 0.95rem; }
.ds-board-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--ds-t-500); }

/* ---- Gráfico de barras (dashboard) ---- */
.ds-chart { display: flex; align-items: flex-end; gap: 0.6rem; height: 11rem; padding-top: 1.25rem; }
.ds-chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; height: 100%; justify-content: flex-end; }
.ds-chart-bar { width: 100%; max-width: 2.6rem; min-height: 2px; border-radius: var(--ds-radius-sm) var(--ds-radius-sm) 0 0; background: var(--ds-accent); transition: filter var(--ds-dur-fast); }
.ds-chart-bar:hover { filter: brightness(1.12); }
.ds-chart-col--muted .ds-chart-bar { background: var(--ds-accent-100); }
.ds-chart-label { font-size: 0.74rem; color: var(--ds-t-500); }
.ds-chart-val { font-size: 0.72rem; font-weight: 600; color: var(--ds-t-700); font-variant-numeric: tabular-nums; }

/* ---- Timeline / feed de atividade (cronológico) ---- */
.ds-timeline { position: relative; list-style: none; }
.ds-timeline::before { content: ""; position: absolute; left: 0.39rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--ds-line); }
.ds-timeline-item { position: relative; padding: 0 0 1.3rem 1.6rem; }
.ds-timeline-item:last-child { padding-bottom: 0; }
.ds-timeline-dot { position: absolute; left: 0; top: 0.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--ds-surface); border: 2px solid var(--ds-accent); }
.ds-timeline-dot--done { background: var(--ds-accent); }
.ds-timeline-dot--muted { border-color: var(--ds-line-strong); }
.ds-timeline-time { font-size: 0.78rem; color: var(--ds-t-400); }
.ds-timeline-title { font-weight: 500; color: var(--ds-t-900); }
.ds-timeline-text { font-size: 0.9rem; color: var(--ds-t-500); }

/* ------------------------- FOCO / ACESSIBILIDADE --------------------- */
.ds-root :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ds-accent-light); outline-offset: 2px; }

/* ----------------------------- RESPONSIVO ---------------------------- */
@media (max-width: 820px) {
  .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: 1fr; }
  .ds-topbar-nav { display: none; }
  .ds-table-wrap { overflow-x: auto; }
}

/* --------------------- MOVIMENTO REDUZIDO ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ds-root *, .ds-root *::before, .ds-root *::after { animation: none !important; transition: none !important; }
  .js .ds-reveal { opacity: 1 !important; transform: none !important; }
}