:root{
  --ink:#1B2721; --ink-soft:#4A5D54; --ink-faint:#7C8C82;
  --surface:#F3F5F0; --surface-raised:#FFFFFF; --surface-sunken:#E9EDE6;
  --line:#DCE1D9; --line-strong:#C3CBC0;
  --accent:#B8722A; --accent-ink:#FFFFFF;
  --series-projetado:#B8722A; --series-realizado:#2F6FA8;
  --good:#2F7D52; --good-bg:#E4F1E9;
  --bad:#B23B3B; --bad-bg:#F7E6E4;
  --warn:#9C6B12; --warn-bg:#F5EBD3;
  --neutral-bg:#EAECE6; --neutral-ink:#5B675E;
  --focus:#2F6FA8;
  --shadow: 0 1px 2px rgba(27,39,33,.06), 0 4px 14px rgba(27,39,33,.06);
  --font-display:'Newsreader',ui-serif,Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E7ECE6; --ink-soft:#A9B6AE; --ink-faint:#78877D;
    --surface:#141B17; --surface-raised:#1B2420; --surface-sunken:#101613;
    --line:#2A342E; --line-strong:#38453D;
    --accent:#C4863A; --accent-ink:#141B17;
    --series-projetado:#C4863A; --series-realizado:#4A90CC;
    --good:#57B98A; --good-bg:#1C3327;
    --bad:#E07575; --bad-bg:#3A2020;
    --warn:#D9A441; --warn-bg:#392E17;
    --neutral-bg:#1F2721; --neutral-ink:#9DAA9F;
    --focus:#4A90CC;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ink:#E7ECE6; --ink-soft:#A9B6AE; --ink-faint:#78877D;
  --surface:#141B17; --surface-raised:#1B2420; --surface-sunken:#101613;
  --line:#2A342E; --line-strong:#38453D;
  --accent:#C4863A; --accent-ink:#141B17;
  --series-projetado:#C4863A; --series-realizado:#4A90CC;
  --good:#57B98A; --good-bg:#1C3327;
  --bad:#E07575; --bad-bg:#3A2020;
  --warn:#D9A441; --warn-bg:#392E17;
  --neutral-bg:#1F2721; --neutral-ink:#9DAA9F;
  --focus:#4A90CC;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 18px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; font-size:14px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- shell nav ---------- */
.shell-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--surface-raised); }
.shell-nav .brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:16px; text-decoration:none; }
.shell-nav .brand .mark{ width:20px; height:20px; border-radius:5px; background:var(--accent); display:inline-block; }
.shell-nav .crumbs{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.shell-nav .nav-right{ display:flex; align-items:center; gap:14px; }
.shell-nav .nav-user{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.shell-nav .logout-form{ margin:0; }
.shell-nav .logout-form .btn-text{ padding:2px 0; }
#app-root, .page-wrap{ max-width:1180px; margin:0 auto; padding:28px 22px 64px; }

/* ---------- module launcher ---------- */
.module-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:20px; }
.module-card{ display:block; text-decoration:none; color:inherit; background:var(--surface-raised); border:1px solid var(--line); border-radius:12px; padding:20px; box-shadow:var(--shadow); transition:transform .1s; }
.module-card:hover{ transform:translateY(-2px); }
.module-card.disabled{ opacity:.55; pointer-events:none; }
.module-card .icon{ font-size:22px; margin-bottom:10px; display:block; }
.module-card h3{ font-size:16px; margin-bottom:6px; }
.module-card p{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.55; }
.module-card .tag{ display:inline-block; margin-top:12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.module-card .tag.soon{ color:var(--ink-faint); }

/* ---------- topbar ---------- */
.topbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.topbar .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 4px; }
.topbar h1{ font-size:26px; }
.topbar .sub{ color:var(--ink-soft); font-size:13px; margin-top:4px; max-width:56ch; }
.save-status{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); font-family:var(--font-mono); padding:7px 12px; border:1px solid var(--line); border-radius:100px; background:var(--surface-raised); box-shadow:var(--shadow); white-space:nowrap; }
.save-dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); flex:none; }
.save-status[data-state="saved"] .save-dot{ background:var(--good); }
.save-status[data-state="saving"] .save-dot{ background:var(--series-realizado); animation:pulse 1s ease-in-out infinite; }
.save-status[data-state="error"] .save-dot, .save-status[data-state="readonly"] .save-dot{ background:var(--bad); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@media (prefers-reduced-motion:reduce){ .save-dot{ animation:none !important; } }

/* ---------- kpi strip ---------- */
.kpi-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.kpi-group-label{ grid-column:1/-1; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:14px 0 -2px; }
.kpi-group-label:first-child{ margin-top:0; }
.kpi{ background:var(--surface-raised); border:1px solid var(--line); border-radius:10px; padding:14px 16px; box-shadow:var(--shadow); }
.kpi .label{ font-size:11.5px; color:var(--ink-soft); margin-bottom:6px; }
.kpi .value{ font-family:var(--font-mono); font-size:21px; font-weight:600; letter-spacing:-.01em; }
.kpi .value.muted{ color:var(--ink-faint); font-size:16px; font-weight:500; }
@media (max-width:820px){ .kpi-strip{ grid-template-columns:repeat(2,1fr); } }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto; }
.tab-btn{ appearance:none; background:none; border:none; border-bottom:2px solid transparent; color:var(--ink-soft); font-size:13.5px; font-weight:500; padding:10px 14px; cursor:pointer; white-space:nowrap; margin-bottom:-1px; }
.tab-btn:hover{ color:var(--ink); }
.tab-btn[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

/* ---------- panels / cards ---------- */
.panel{ display:flex; flex-direction:column; gap:20px; }
.card{ background:var(--surface-raised); border:1px solid var(--line); border-radius:12px; padding:20px 22px; box-shadow:var(--shadow); }
.card h2{ font-size:17px; margin-bottom:4px; }
.card .desc{ color:var(--ink-soft); font-size:12.5px; margin-bottom:16px; max-width:70ch; }

fieldset{ border:none; padding:0; margin:0 0 18px; }
fieldset legend{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding:0 0 10px; }
.field-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px 18px; }
.field label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:5px; }
.field .hint{ font-size:11px; color:var(--ink-faint); margin-top:4px; }
.field .input-wrap{ position:relative; display:flex; align-items:center; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-sunken); border:1px solid var(--line); border-radius:7px;
  padding:8px 10px; color:var(--ink); font-family:var(--font-mono); font-size:13.5px;
}
.field textarea{ font-family:var(--font-body); resize:vertical; min-height:56px; }
.field .suffix{ position:absolute; right:10px; color:var(--ink-faint); font-size:12.5px; pointer-events:none; font-family:var(--font-mono); }
.field input[type="month"]{ font-family:var(--font-body); }

.btn{ appearance:none; border:1px solid transparent; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--surface-sunken); }
.btn-text{ background:none; border:none; color:var(--series-realizado); font-size:12.5px; font-weight:600; cursor:pointer; padding:4px 6px; }
.btn-text.danger{ color:var(--bad); }
.btn-row{ display:flex; gap:10px; align-items:center; margin-top:6px; }

.banner{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:9px; font-size:12.5px; line-height:1.55; }
.banner.info{ background:var(--neutral-bg); color:var(--neutral-ink); }
.banner.warn{ background:var(--bad-bg); color:var(--bad); }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table{ border-collapse:collapse; width:100%; min-width:760px; font-size:12.8px; }
thead th{ position:sticky; top:0; background:var(--surface-sunken); text-align:right; font-weight:600; font-size:11px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
thead th:first-child, tbody td:first-child{ text-align:left; }
tbody td{ text-align:right; padding:8px 12px; border-bottom:1px solid var(--line); font-family:var(--font-mono); white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr.total-row td{ font-weight:700; background:var(--surface-sunken); font-family:var(--font-mono); }
tbody tr.group-row td{ background:var(--surface-sunken); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; padding:7px 12px; text-align:left; }
tbody tr:hover td{ background:var(--neutral-bg); }
td.label-cell, th.label-cell{ font-family:var(--font-body); }
.actions-cell{ text-align:right !important; }

.badge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px 3px 7px; border-radius:100px; font-family:var(--font-body); white-space:nowrap; }
.badge.good{ background:var(--good-bg); color:var(--good); }
.badge.bad{ background:var(--bad-bg); color:var(--bad); }
.badge.warn{ background:var(--warn-bg); color:var(--warn); }
.badge.neutral{ background:var(--neutral-bg); color:var(--neutral-ink); }

/* ---------- status cards (Controle de KM) ---------- */
.status-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.status-card{ background:var(--surface-raised); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); border-left:3px solid var(--line-strong); }
.status-card.status-good{ border-left-color:var(--good); }
.status-card.status-warn{ border-left-color:var(--warn); }
.status-card.status-bad{ border-left-color:var(--bad); }
.status-card h4{ font-size:14px; margin:0 0 8px; font-family:var(--font-display); font-weight:600; }
.status-card .status-line{ font-size:12.5px; color:var(--ink-soft); margin-bottom:3px; }
.status-card .status-line b{ color:var(--ink); font-family:var(--font-mono); font-weight:600; }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

.legend{ display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
.legend-item{ display:flex; align-items:center; gap:7px; }
.legend-swatch{ width:12px; height:3px; border-radius:2px; }
.legend-swatch.dot{ width:9px; height:9px; border-radius:50%; }

.chart-card svg{ display:block; width:100%; height:auto; overflow:visible; }
.chart-tooltip{ position:fixed; pointer-events:none; background:var(--ink); color:var(--surface); font-family:var(--font-mono); font-size:11.5px; padding:8px 10px; border-radius:7px; box-shadow:var(--shadow); z-index:50; opacity:0; transform:translate(-50%,-115%); transition:opacity .08s; line-height:1.6; white-space:nowrap; }
.chart-tooltip.visible{ opacity:1; }
.chart-tooltip b{ color:var(--surface); }
.guideline{ stroke:var(--line-strong); stroke-width:1; }
.gridline{ stroke:var(--line); stroke-width:1; }
.axis-label{ fill:var(--ink-faint); font-family:var(--font-mono); font-size:9.5px; }

footer.note{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:11.5px; line-height:1.7; max-width:80ch; }
.empty-state{ text-align:center; padding:32px 20px; color:var(--ink-faint); font-size:13px; }
.archi-box{ border:1px dashed var(--line-strong); border-radius:10px; padding:16px 18px; background:var(--surface-sunken); font-size:12.5px; color:var(--ink-soft); line-height:1.65; }
.archi-box h3{ font-size:13px; margin-bottom:8px; color:var(--ink); }
.archi-box code{ font-family:var(--font-mono); background:var(--neutral-bg); padding:1px 5px; border-radius:4px; font-size:11.5px; }