/* =====================================================================
   Arcadian Hub · identidade Arcadian
   Tokens do Design System Arcadian (fonte da verdade: artifact de 04/11/2026)
   Tema padrão: Ônix (escuro). data-theme="light" ativa Mármore.
   ===================================================================== */

:root {
  color-scheme: dark;
  /* Paleta */
  --onix-950:#090807; --onix-900:#0f0e0c; --onix-800:#171513; --onix-700:#22201d; --onix-600:#33312e;
  --pedra-700:#46433e; --pedra-600:#5d5a55; --pedra-500:#77746d; --pedra-400:#97938c;
  --pedra-300:#bbb7b0; --pedra-200:#d9d5cf; --pedra-100:#e9e6e0; --pedra-50:#f3f1ec;
  --marmore:#faf8f3; --pentelico:#f4eee1; --branco:#ffffff;
  --ouro-50:#fcf6ed; --ouro-100:#f5ebdc; --ouro-200:#e7d7bd; --ouro-300:#d2ba97; --ouro-400:#b99c74;
  --ouro-500:#a08258; --ouro-600:#876b43; --ouro-700:#705734; --ouro-800:#564226; --ouro-900:#3c2e1a; --ouro-950:#231a0e;
  --egeu-700:#2c5d7e; --egeu-300:#97c1dd; --egeu-950:#112431; --egeu-50:#e7f2fa;
  --terracota-700:#9a4127; --terracota-300:#e6a48d; --terracota-950:#341912; --terracota-50:#fdece6;

  /* Semânticos · Ônix */
  --surface:var(--onix-900); --surface-raised:var(--onix-800); --surface-alt:var(--onix-950);
  --surface-gold:var(--ouro-950); --surface-inverse:var(--marmore);
  --ink:var(--pedra-50); --ink-muted:var(--pedra-300); --ink-subtle:var(--pedra-400);
  --ink-gold:var(--ouro-500); --ink-inverse:var(--onix-900);
  --gold:var(--ouro-500);
  --action:var(--ouro-500); --action-hover:var(--ouro-400); --on-action:var(--onix-900);
  --line:var(--onix-700); --line-strong:var(--pedra-500);
  --grid-line:var(--onix-600);
  --focus-ring:var(--ouro-300);
  --positive:var(--egeu-300); --positive-soft:var(--egeu-950);
  --negative:var(--terracota-300); --negative-soft:var(--terracota-950);
  --chart-main:var(--ouro-500); --chart-compare:var(--pedra-300);
  --chart-2:var(--egeu-300); --chart-3:var(--ouro-300); --chart-4:var(--terracota-300);
  --chart-5:var(--pedra-400); --chart-6:var(--egeu-700); --chart-7:var(--ouro-700); --chart-8:var(--terracota-700);
  --shadow-overlay:0 21px 55px rgba(0,0,0,.6);
  --veil:rgba(15,14,12,.55);

  /* Tipo */
  --font-display:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --font-sans:Jost,"Futura PT",Futura,"Century Gothic",sans-serif;

  /* Espaço (Fibonacci) */
  --space-2:2px; --space-3:3px; --space-5:5px; --space-8:8px; --space-13:13px; --space-21:21px;
  --space-34:34px; --space-55:55px; --space-89:89px; --space-144:144px; --space-233:233px;

  /* Forma */
  --radius-none:0px; --radius-sm:2px; --radius-full:9999px;
  --border-hairline:1px; --border-focus:2px;
  --measure:610px; --content:987px; --container:1280px;
  --opacity-disabled:.4;
  --duration-fast:233ms; --duration-base:377ms; --duration-slow:610ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

[data-theme="light"] {
  color-scheme: light;
  --surface:var(--marmore); --surface-raised:var(--branco); --surface-alt:var(--pentelico);
  --surface-gold:var(--ouro-50); --surface-inverse:var(--onix-900);
  --ink:var(--onix-900); --ink-muted:var(--pedra-700); --ink-subtle:var(--pedra-600);
  --ink-gold:var(--ouro-700); --ink-inverse:var(--marmore);
  --gold:var(--ouro-500);
  --action:var(--onix-900); --action-hover:var(--ouro-700); --on-action:var(--marmore);
  --line:var(--pedra-100); --line-strong:var(--pedra-500);
  --grid-line:var(--pedra-200);
  --focus-ring:var(--ouro-700);
  --positive:var(--egeu-700); --positive-soft:var(--egeu-50);
  --negative:var(--terracota-700); --negative-soft:var(--terracota-50);
  --chart-main:var(--ouro-500); --chart-compare:var(--pedra-700);
  --chart-2:var(--egeu-700); --chart-3:var(--ouro-700); --chart-4:var(--terracota-700);
  --chart-5:var(--pedra-500); --chart-6:var(--egeu-300); --chart-7:var(--ouro-300); --chart-8:var(--terracota-300);
  --shadow-overlay:0 21px 55px rgba(15,14,12,.12);
}

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing:border-box; }
html { font-optical-sizing:auto; }
body {
  margin:0;
  font-family:var(--font-sans);
  font-size:16px; line-height:26px;
  background:var(--surface); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
::selection { background:var(--gold); color:var(--onix-900); }
a { color:inherit; }
img { max-width:100%; }

.arc-for-light { display:none !important; }
[data-theme="light"] .arc-for-light { display:block !important; }
[data-theme="light"] .arc-for-dark { display:none !important; }

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; color:var(--ink); margin:0; }
h1 { font-size:42px; line-height:1.15; letter-spacing:-.01em; }
h2 { font-size:34px; line-height:1.2; }
h3 { font-size:26px; line-height:1.3; }
h1 em, h2 em, h3 em { font-style:italic; }
p { margin:0 0 var(--space-21); max-width:var(--measure); }
.num, td.is-num, .arc-table { font-variant-numeric:tabular-nums; }

/* ---------------- Tipos utilitários ---------------- */
.arc-eyebrow {
  display:inline-flex; align-items:center; gap:var(--space-13); margin:0;
  font-size:11px; line-height:16px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-gold);
}
.arc-eyebrow--rule::before { content:""; flex:none; width:var(--space-34); border-top:var(--border-hairline) solid var(--gold); }
.arc-eyebrow--muted { color:var(--ink-muted); }
.arc-label { font-size:13px; line-height:16px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.arc-small { font-size:13px; line-height:21px; color:var(--ink-subtle); }
.arc-muted { color:var(--ink-muted); }

/* ---------------- Botões ---------------- */
.arc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-13);
  min-height:48px; padding:0 var(--space-34);
  border:var(--border-hairline) solid transparent; border-radius:var(--radius-none);
  background:transparent; color:var(--ink);
  font-family:var(--font-sans); font-size:13px; line-height:16px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none; white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.arc-btn:focus-visible { outline:var(--border-focus) solid var(--focus-ring); outline-offset:var(--space-3); }
.arc-btn--primary { background:var(--action); color:var(--on-action); }
.arc-btn--primary:hover { background:var(--action-hover); }
[data-theme="light"] .arc-btn--primary:hover { color:var(--marmore); }
.arc-btn--secondary { border-color:var(--line-strong); color:var(--ink); }
.arc-btn--secondary:hover { border-color:var(--gold); }
.arc-btn--text { min-height:0; padding:0 0 var(--space-5); border:0; border-bottom:var(--border-hairline) solid var(--gold); color:var(--ink); }
.arc-btn--text:hover { color:var(--ink-gold); }
.arc-btn--sm { min-height:40px; padding:0 var(--space-21); font-size:11px; letter-spacing:.2em; }
.arc-btn--xs { min-height:32px; padding:0 var(--space-13); font-size:11px; letter-spacing:.16em; }
.arc-btn--danger { border-color:var(--negative); color:var(--negative); background:transparent; }
.arc-btn--danger:hover { background:var(--negative-soft); }
.arc-btn svg { width:16px; height:16px; flex:none; }
.arc-btn[disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; pointer-events:none; }

/* ---------------- Cartões ---------------- */
.arc-card {
  display:flex; flex-direction:column; gap:var(--space-13);
  padding:var(--space-34);
  background:var(--surface-raised); color:var(--ink);
  border:var(--border-hairline) solid var(--line); border-radius:var(--radius-none);
  text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-out);
  min-width:0;
}
.arc-card__title { margin:0; font-family:var(--font-display); font-size:26px; line-height:1.3; font-weight:400; color:var(--ink); }
.arc-card__text { margin:0; font-size:16px; line-height:26px; color:var(--ink-muted); }
.arc-card__footer { margin-top:auto; padding-top:var(--space-21); }
a.arc-card:hover { border-color:var(--gold); }
a.arc-card:focus-visible { outline:var(--border-focus) solid var(--focus-ring); outline-offset:var(--space-3); }
.arc-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--space-21); }

/* ---------------- Stat / KPI ---------------- */
.arc-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:var(--space-21) var(--space-34); }
.arc-stat { display:grid; align-content:start; gap:var(--space-8); min-width:0; padding-top:var(--space-13); border-top:var(--border-hairline) solid var(--gold); }
.arc-stat--muted { border-top-color:var(--line-strong); }
.arc-stat__label { font-size:11px; line-height:16px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-muted); }
.arc-stat__value { font-family:var(--font-display); font-size:34px; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arc-stat__value--xl { font-size:55px; line-height:1; }
.arc-stat__unit { font-size:.5em; letter-spacing:0; margin-right:.12em; color:var(--ink-muted); }
.arc-stat__delta { display:inline-flex; align-items:center; gap:var(--space-5); font-size:13px; line-height:21px; font-weight:500; }
.arc-stat__delta--up { color:var(--positive); }
.arc-stat__delta--down { color:var(--negative); }
.arc-stat__delta--flat { color:var(--ink-muted); }
.arc-stat__note { font-size:13px; line-height:21px; color:var(--ink-subtle); }

/* ---------------- Tag ---------------- */
.arc-tag {
  display:inline-flex; align-items:center; gap:var(--space-5);
  min-height:26px; padding:0 var(--space-8);
  border:var(--border-hairline) solid var(--line-strong); border-radius:var(--radius-sm);
  font-size:11px; line-height:16px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink-muted); text-decoration:none;
}
.arc-tag--gold { border-color:var(--gold); background:var(--surface-gold); color:var(--ink-gold); }
.arc-tag--positive { border-color:transparent; background:var(--positive-soft); color:var(--positive); }
.arc-tag--negative { border-color:transparent; background:var(--negative-soft); color:var(--negative); }

/* ---------------- Formulários ---------------- */
.arc-form { display:grid; gap:var(--space-21); }
.arc-form--grid { grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); align-items:end; }
.arc-field { display:grid; gap:var(--space-8); min-width:0; }
.arc-field__label { font-size:11px; line-height:16px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-muted); }
.arc-input, .arc-select, .arc-textarea {
  width:100%; min-height:48px; margin:0; padding:0 var(--space-13);
  background:var(--surface-raised); color:var(--ink);
  border:var(--border-hairline) solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:16px; line-height:26px;
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--duration-fast) var(--ease-out);
}
.arc-input--sm, .arc-select--sm { min-height:40px; font-size:13px; }
.arc-textarea { min-height:121px; padding:var(--space-13); resize:vertical; }
.arc-select { padding-right:var(--space-34); cursor:pointer; }
.arc-input::placeholder, .arc-textarea::placeholder { color:var(--ink-subtle); opacity:1; }
.arc-input:hover, .arc-select:hover, .arc-textarea:hover { border-color:var(--ink-muted); }
.arc-input:focus-visible, .arc-select:focus-visible, .arc-textarea:focus-visible { outline:var(--border-focus) solid var(--focus-ring); outline-offset:var(--space-2); border-color:var(--gold); }
.arc-select-wrap { position:relative; }
.arc-select-wrap::after { content:""; position:absolute; right:var(--space-13); top:50%; width:7px; height:7px; border-right:1.25px solid var(--ink-muted); border-bottom:1.25px solid var(--ink-muted); transform:translateY(-75%) rotate(45deg); pointer-events:none; }
.arc-field__help { font-size:13px; line-height:21px; color:var(--ink-subtle); }
.arc-field__error { font-size:13px; line-height:21px; color:var(--negative); }

/* ---------------- Tabela ---------------- */
.arc-table-wrap { overflow-x:auto; }
.arc-table { width:100%; border-collapse:collapse; font-size:16px; line-height:26px; color:var(--ink); }
.arc-table--compact { font-size:13px; line-height:21px; }
.arc-table caption { caption-side:bottom; text-align:left; padding-top:var(--space-13); font-size:13px; line-height:21px; color:var(--ink-subtle); }
.arc-table th { padding:var(--space-13); text-align:left; vertical-align:bottom; font-size:11px; line-height:16px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; color:var(--ink-muted); border-bottom:var(--border-hairline) solid var(--gold); }
.arc-table td { padding:var(--space-13); border-bottom:var(--border-hairline) solid var(--line); vertical-align:middle; }
.arc-table th:first-child, .arc-table td:first-child { padding-left:0; }
.arc-table th:last-child, .arc-table td:last-child { padding-right:0; }
.arc-table .is-num { text-align:right; }
.arc-table tbody tr:hover td { background:var(--surface-gold); }
.arc-table a { color:var(--ink); }

/* ---------------- Divisores ---------------- */
.arc-rule { display:block; width:100%; height:0; margin:0; border:0; border-top:var(--border-hairline) solid var(--line); }
.arc-rule--gold { border-top-color:var(--gold); }

/* ================================================================
   Chrome do aplicativo
   ================================================================ */

/* Cabeçalho */
.hub-header {
  display:flex; align-items:center; gap:var(--space-34);
  min-height:89px; padding:0 var(--space-55);
  background:var(--surface); border-bottom:var(--border-hairline) solid var(--line);
  position:sticky; top:0; z-index:40;
}
.hub-header__brand { display:inline-flex; flex:none; text-decoration:none; }
.hub-header__brand img { display:block; height:34px; width:auto; }
.hub-header__nav { display:flex; gap:var(--space-34); margin-left:auto; align-items:center; }
.hub-header__nav a {
  padding:var(--space-8) 0; font-size:11px; line-height:16px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink-muted);
  border-bottom:var(--border-hairline) solid transparent;
  transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.hub-header__nav a:hover, .hub-header__nav a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--gold); }
.theme-toggle {
  background:none; border:var(--border-hairline) solid var(--line-strong); color:var(--ink-muted);
  width:40px; height:40px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { border-color:var(--gold); color:var(--ink); }
.theme-toggle svg { width:16px; height:16px; }

/* Página */
.hub-main { max-width:var(--container); margin:0 auto; padding:var(--space-55) var(--space-55) var(--space-144); display:grid; gap:var(--space-34); align-content:start; }
.hub-pagehead { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-21); justify-content:space-between; }
.hub-pagehead > div { display:grid; gap:var(--space-8); }
.hub-pagehead .actions { display:flex; gap:var(--space-13); flex-wrap:wrap; }

/* Abas do projeto */
.hub-tabs { display:flex; gap:var(--space-21); border-bottom:var(--border-hairline) solid var(--line); overflow-x:auto; scrollbar-width:none; }
.hub-tabs::-webkit-scrollbar { display:none; }
.hub-tabs a {
  padding:var(--space-13) 0; white-space:nowrap;
  font-size:11px; line-height:16px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-muted);
  border-bottom:var(--border-focus) solid transparent; margin-bottom:-1px;
  transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.hub-tabs a:hover { color:var(--ink); }
.hub-tabs a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--gold); }

/* Controles segmentados */
.arc-seg { display:inline-flex; border:var(--border-hairline) solid var(--line-strong); border-radius:var(--radius-sm); overflow:hidden; }
.arc-seg a, .arc-seg button {
  padding:var(--space-8) var(--space-13); background:none; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:11px; line-height:16px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-muted); text-decoration:none; white-space:nowrap;
  border-right:var(--border-hairline) solid var(--line);
  transition:background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.arc-seg a:last-child, .arc-seg button:last-child { border-right:0; }
.arc-seg a:hover, .arc-seg button:hover { color:var(--ink); }
.arc-seg .is-active { background:var(--surface-gold); color:var(--ink-gold); }

/* Flash */
.arc-flash { display:flex; align-items:center; gap:var(--space-13); padding:var(--space-13) var(--space-21); border:var(--border-hairline) solid transparent; font-size:13px; line-height:21px; }
.arc-flash--ok { background:var(--positive-soft); color:var(--positive); }
.arc-flash--err { background:var(--negative-soft); color:var(--negative); }

/* Login */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--space-34); background:var(--surface); }
.login-card { width:100%; max-width:420px; display:grid; gap:var(--space-34); padding:var(--space-55) var(--space-34); background:var(--surface-raised); border:var(--border-hairline) solid var(--line); border-top:var(--border-focus) solid var(--gold); }
.login-card .brand { display:grid; justify-items:center; gap:var(--space-21); }
.login-card .brand img { height:55px; width:auto; }

/* Gráficos */
.chart-box { position:relative; width:100%; }
.chart-box svg { display:block; width:100%; height:auto; }
.chart-legend { display:flex; flex-wrap:wrap; gap:var(--space-8) var(--space-21); padding-top:var(--space-13); }
.chart-legend__item { display:inline-flex; align-items:center; gap:var(--space-8); font-size:13px; line-height:21px; color:var(--ink-muted); background:none; border:0; cursor:pointer; font-family:var(--font-sans); padding:0; }
.chart-legend__item .swatch { width:13px; height:3px; background:currentColor; }
.chart-legend__item.is-off { opacity:.35; }
.chart-tip {
  position:absolute; pointer-events:none; z-index:30; min-width:140px;
  background:var(--surface-raised); border:var(--border-hairline) solid var(--line-strong);
  box-shadow:var(--shadow-overlay); padding:var(--space-13); font-size:13px; line-height:21px;
  display:none;
}
.chart-tip.is-on { display:block; }
.chart-tip .t-date { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-subtle); margin-bottom:var(--space-5); }
.chart-tip .t-row { display:flex; justify-content:space-between; gap:var(--space-13); font-variant-numeric:tabular-nums; }
.chart-tip .t-row .t-name { color:var(--ink-muted); }

/* Galeria de criativos */
.creative-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:var(--space-21); }
.creative-card { display:flex; flex-direction:column; gap:var(--space-8); background:var(--surface-raised); border:var(--border-hairline) solid var(--line); padding:var(--space-13); min-width:0; transition:border-color var(--duration-fast) var(--ease-out); }
.creative-card:hover { border-color:var(--gold); }
.creative-card .thumb { aspect-ratio:1/1; width:100%; object-fit:cover; background:var(--surface-alt); display:block; }
.creative-card .thumb--empty { display:grid; place-items:center; color:var(--ink-subtle); font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.creative-card .name { font-size:13px; line-height:21px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.creative-card .meta { display:flex; justify-content:space-between; gap:var(--space-8); font-size:11px; line-height:16px; color:var(--ink-subtle); font-variant-numeric:tabular-nums; }

/* Utilidades de layout */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--space-21); align-items:start; }
.row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-13); }
.row--between { justify-content:space-between; }
.stack { display:grid; gap:var(--space-13); }
.stack--lg { gap:var(--space-21); }
.mono-token { font-size:13px; padding:var(--space-2) var(--space-8); background:var(--surface-alt); border:var(--border-hairline) solid var(--line); word-break:break-all; }
.copy-btn { cursor:pointer; }
.empty-note { display:grid; gap:var(--space-8); justify-items:start; padding:var(--space-34); border:var(--border-hairline) dashed var(--line-strong); color:var(--ink-muted); }

/* Responsivo */
@media (max-width:1023px) {
  .hub-header { padding:0 var(--space-34); }
  .hub-main { padding:var(--space-34) var(--space-34) var(--space-89); }
}
@media (max-width:767px) {
  .hub-header { padding:0 var(--space-21); min-height:68px; gap:var(--space-21); }
  .hub-header__brand img { height:26px; }
  .hub-header__nav { gap:var(--space-21); }
  .hub-main { padding:var(--space-21) var(--space-21) var(--space-89); }
  h1 { font-size:34px; }
  h2 { font-size:26px; }
  .arc-stat__value { font-size:26px; }
  .arc-stat__value--xl { font-size:34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:1ms !important; animation-duration:1ms !important; }
}