:root {
  color-scheme: light dark;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --text: #16212b;
  --muted: #5b6b78;
  --line: #dde4ea;
  --accent: #0b6e4f;
  --accent-soft: #e2f2ea;
  --danger: #c0392b;
  --danger-soft: #fbe7e3;
  --warn-bg: #fff6dd;
  --warn-line: #d9a400;
  --warn-text: #6b4e00;
  --chip-blue: #e8effc;
  --chip-blue-text: #1d4fa3;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(16, 33, 43, 0.08), 0 4px 14px rgba(16, 33, 43, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", Ubuntu, Cantarell, sans-serif;
}
[data-theme="dark"] {
  --bg: #0f1419;
  --surface: #182028;
  --surface-2: #202a34;
  --text: #eef3f6;
  --muted: #9fb0bd;
  --line: #2b3742;
  --accent: #3ecf8e;
  --accent-soft: #123b2a;
  --danger: #ff7a6b;
  --danger-soft: #3d1f1b;
  --warn-bg: #3a2f10;
  --warn-line: #d9a400;
  --warn-text: #f2d47e;
  --chip-blue: #1d2f52;
  --chip-blue-text: #a9c4f5;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1419;
    --surface: #182028;
    --surface-2: #202a34;
    --text: #eef3f6;
    --muted: #9fb0bd;
    --line: #2b3742;
    --accent: #3ecf8e;
    --accent-soft: #123b2a;
    --danger: #ff7a6b;
    --danger-soft: #3d1f1b;
    --warn-bg: #3a2f10;
    --warn-line: #d9a400;
    --warn-text: #f2d47e;
    --chip-blue: #1d2f52;
    --chip-blue-text: #a9c4f5;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font-size: 15px;
}
h1, h2, h3 { margin: 0; line-height: 1.2; }

.num, td.n, .card-value, .hero-value, th.n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 14px 48px; }

/* ---------- topo ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, #0b6e4f 0%, #12a571 60%, #0b6e4f 100%);
  color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .brand-mark, :root:not([data-theme="light"]) .brand-mark { color: #fff; }
.brand h1 { font-size: 17px; letter-spacing: -0.01em; }
.brand small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }

.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
select, input[type="date"], input[type="text"], input[type="number"], input[type="password"] {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  max-width: 100%;
}
button {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 14px;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] button.primary { color: #06281d; }
button:disabled { opacity: 0.6; cursor: wait; }
.icon-btn { padding: 8px 10px; line-height: 1; }

:focus-visible {
  outline: 3px solid #2b7fff;
  outline-offset: 2px;
}

.nav-tabs { display: flex; gap: 4px; }
.nav-tabs button { border-color: transparent; background: transparent; }
.nav-tabs button[aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
  border-color: var(--line);
}

.custom-dates { display: none; gap: 6px; align-items: center; }
.custom-dates.open { display: inline-flex; }
.custom-dates input { width: 132px; }

.period-scroll { display: none; }
.period-btn { flex: none; white-space: nowrap; }
.period-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
[data-theme="dark"] .period-btn[aria-pressed="true"] { color: #06281d; }
.filter-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- cartões ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.cards-7 { margin-top: 10px; }
.card-wide { grid-column: span 2; }
.help-link { color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 4px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  min-width: 0;
}
.card-label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.card-value { font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.hero {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-left: 6px solid var(--accent);
}
.hero.profit-pos { border-left-color: var(--accent); }
.hero.profit-neg { border-left-color: var(--danger); }
.hero .card-label { font-size: 14px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.hero-value { font-size: clamp(34px, 7vw, 48px); font-weight: 800; letter-spacing: -0.02em; }
.profit-pos .hero-value, .pos { color: var(--accent); }
.profit-neg .hero-value, .neg { color: var(--danger); }
.hero-sub { font-size: 13px; color: var(--muted); }
.profit-equation {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- painéis ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 14px;
  padding: 14px;
}
.panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { font-size: 16px; }
.panel-head .hint { font-size: 12.5px; color: var(--muted); }

.level-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.level-tabs button[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* G2: desempenho Meta */
.performance-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px}.level-tabs{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:10px}.level-tabs button{border:0;background:transparent;padding:7px 12px;border-radius:8px;color:var(--muted);font-weight:650;cursor:pointer}.level-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(20,30,25,.10)}.column-picker{position:relative}.column-picker summary{cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-weight:650;background:var(--surface)}.column-picker summary::-webkit-details-marker{display:none}.column-options{position:absolute;right:0;z-index:20;width:230px;max-height:360px;overflow:auto;margin-top:6px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(18,38,28,.16)}.column-options label{display:flex;align-items:center;gap:9px;padding:7px;border-radius:7px;font-size:13px}.column-options label:hover{background:var(--surface-2)}.column-options input{accent-color:var(--accent)}.mobile-level-tabs{display:none}.table-scroll{overflow-x:auto;overscroll-behavior-inline:contain;max-width:100%;border:1px solid var(--line);border-radius:12px}#perf-table{min-width:1680px}#perf-table th{padding:11px 10px;white-space:nowrap;background:var(--surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.045em}#perf-table td{padding:12px 10px;vertical-align:middle;white-space:nowrap;font-size:13px}#perf-table tbody tr{border-top:1px solid var(--line)}#perf-table tbody tr:hover{background:var(--surface-2)}.num,.n,.hero-value,.card-value{font-variant-numeric:tabular-nums}.name{min-width:220px;white-space:normal!important}.name strong,.name .parent-name{display:block}.parent-name{color:var(--muted);font-size:11px;margin-top:3px}.power-btn{width:34px;height:20px;border:0;border-radius:999px;background:var(--line);padding:2px;cursor:pointer}.power-btn span{display:block;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .18s cubic-bezier(.2,.8,.2,1)}.power-btn.on{background:var(--accent)}.power-btn.on span{transform:translateX(14px)}.power-btn:disabled{opacity:.55;cursor:wait}.edit-budget{border:0;background:transparent;color:var(--accent);font-weight:800;cursor:pointer;padding:2px 5px}.status{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:750}.status.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}.status.paused{background:color-mix(in srgb,#d97706 14%,var(--surface));color:#a65d05}.positive{color:var(--accent)}.negative{color:#c2413b}.confirm-layer{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(8,18,14,.48);backdrop-filter:blur(5px)}.confirm-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 24px 70px rgba(5,20,14,.28)}.confirm-card h2{margin:0 0 8px}.confirm-card p{color:var(--muted);line-height:1.55}.confirm-card label{display:grid;gap:6px;margin-top:16px;font-weight:650}.confirm-card input{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.primary.danger{background:#b93b35;color:#fff}.confirm-error{color:#b42318!important;background:color-mix(in srgb,#b42318 9%,var(--surface));padding:10px;border-radius:9px}.actions-list{display:grid;gap:2px}.action-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:11px 4px;border-top:1px solid var(--line)}.action-row:first-child{border-top:0}.action-row p,.action-row time{margin:2px 0 0;color:var(--muted);font-size:12px}.action-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-weight:800}.action-icon.ok{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}.action-icon.bad{background:color-mix(in srgb,#c2413b 14%,transparent);color:#c2413b}.quiet-btn{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font-weight:650;cursor:pointer}
@media(max-width:700px){.performance-toolbar{display:none}.mobile-level-tabs{display:flex;margin:0 0 10px;overflow-x:auto}.mobile-level-tabs button{flex:1 0 auto;padding:9px 10px}.wrap{padding-left:12px;padding-right:12px}.table-scroll{margin-left:-1px;margin-right:-1px}.column-options{position:fixed;left:12px;right:12px;top:70px;width:auto}.confirm-card{padding:20px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr}.topbar-inner{padding-left:12px;padding-right:12px}}

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 14px; }
thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  text-align: left;
  padding: 10px 12px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--text); }
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
th.n, td.n { text-align: right; white-space: nowrap; }
td.name, th.name {
  position: sticky; left: 0;
  background: var(--surface);
  min-width: 170px; max-width: 240px;
}
tbody tr:hover td.name { background: var(--surface-2); }
thead th.name { background: var(--surface-2); z-index: 2; }
.parent-name { display: block; font-size: 12px; color: var(--muted); }
tr.untracked td { font-style: italic; background: var(--surface-2); }

.chip {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  margin-top: 4px; white-space: nowrap;
}
.chip.profit { background: var(--accent-soft); color: var(--accent); }
.chip.loss { background: var(--danger-soft); color: var(--danger); }
.chip.none { background: var(--chip-blue); color: var(--chip-blue-text); }
.chip.neutral { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }

/* ---------- gráfico ---------- */
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: auto; font-size: 11px; }
.chart-wrap svg text { font-size: 11px; font-family: var(--font); }
.chart-tip {
  position: absolute;
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  display: none;
  z-index: 5;
}
.chart-legend { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ---------- topo no celular ---------- */
@media (max-width: 760px) {
  .period-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .period-scroll::-webkit-scrollbar { display: none; }
  .period-desktop { display: none; }
  #dash-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .controls { gap: 8px; }
  .filter-actions { flex: 1 1 auto; }
  .filter-actions select { flex: 1 1 auto; min-width: 0; }
  .filter-actions #sync-btn { flex: 0 0 auto; white-space: nowrap; }
  .custom-dates { width: 100%; }
  .custom-dates input { flex: 1 1 0; width: auto; min-width: 0; }
  .topbar-inner { gap: 8px; padding: 10px 10px; }
  .brand h1 { font-size: 15px; }
  .wrap { padding-left: 10px; padding-right: 10px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 11px 10px; }
  .card-label, .card-sub { overflow-wrap: anywhere; }
  .card-value { font-size: 18px; }
  .hero { grid-column: 1 / -1; }
  .card-wide { grid-column: auto; }
  .card-break { grid-column: 1 / -1; }
  .panel { padding: 11px; margin-top: 12px; }
  .table-scroll { max-width: 100%; }
  .footer { margin-top: 12px; }
}

/* ---------- rodapé / avisos ---------- */
.footer { margin-top: 14px; font-size: 13px; color: var(--muted); display: grid; gap: 8px; }
.warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-text);
  border-radius: 10px;
  padding: 10px 12px;
}

/* ---------- projetos ---------- */
.proj-list { display: grid; gap: 10px; margin-bottom: 14px; }
.proj {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: grid; gap: 4px;
}
.proj-name { font-weight: 700; }
.proj code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2);
  padding: 2px 6px; border-radius: 6px; font-size: 13px;
  word-break: break-all;
}
.proj-fees { font-size: 13px; color: var(--muted); }
.form-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.token-once {
  margin-top: 12px;
  border: 2px dashed var(--accent);
  border-radius: 10px;
  padding: 12px;
  display: grid; gap: 8px;
}
.token-once code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; word-break: break-all;
  background: var(--surface-2); padding: 8px; border-radius: 8px;
}
.instructions {
  font-size: 13px;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px;
  word-break: break-word;
}

/* ---------- estados ---------- */
.state { padding: 26px 14px; text-align: center; color: var(--muted); }
.state .big { font-size: 16px; margin-bottom: 8px; color: var(--text); }
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  min-height: 18px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.error-box { color: var(--danger); }
.hidden { display: none !important; }

/* ---------- login ---------- */
.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px 24px;
  width: 100%; max-width: 380px;
  display: grid; gap: 12px;
}
.login-card h1 { font-size: 20px; }
.login-card p { margin: 0; color: var(--muted); font-size: 14px; }
.login-err {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
}
/* G6 — filtros da tabela, última atualização e linha de totais */
.filter-actions{flex-wrap:wrap;align-items:flex-end;gap:10px}
.meta-filtro{display:grid;gap:5px;font-size:12px;font-weight:650;color:var(--muted)}
.meta-filtro input,.meta-filtro select{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;min-width:190px;min-height:40px}
#perf-table .last-change{white-space:normal;min-width:230px;max-width:300px;font-size:12px;color:var(--muted);line-height:1.5}
#perf-total th,#perf-total td{position:sticky;bottom:0;background:var(--surface-2);border-top:2px solid var(--line);font-weight:800;padding:12px 10px;font-size:13px;white-space:nowrap;text-align:right}
#perf-total th{text-align:left}
#perf-total th.chave,#perf-total td:first-child{min-width:54px;background:var(--surface-2)}
#perf-table tbody tr:last-child td{border-bottom:1px solid var(--line)}
#perf-table td.negative{color:var(--danger);font-weight:700}
#perf-table th[title],#perf-table td[title]{cursor:help}