/* GDV v2 — Design System (clone UTMify, tema escuro azul) */
:root{
  --bg:#0d1320; --sidebar:#0a1019; --surface:#161e2e; --surface2:#1b2436;
  --border:#1e2940; --border2:#232c3d;
  --accent:#2f6bff; --accent-h:#1f57e0;
  --text:#e6eaf2; --muted:#8b97a8;
  --ok:#5dcaa5; --warn:#f0b24b; --err:#e8746b;
  --r:8px; --r-lg:12px;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--ui);background:var(--bg);color:var(--text);display:flex;min-height:100vh;-webkit-font-smoothing:antialiased;font-size:13px}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}::-webkit-scrollbar-track{background:transparent}

/* Sidebar */
.side{width:210px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:40}
.side .brand{display:flex;align-items:center;gap:8px;padding:18px 16px;font-size:17px;font-weight:600;color:#fff}
.side .brand b{color:var(--accent)}
.side nav{padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.side nav .grp{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:14px 10px 5px;opacity:.7}
.side nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r);color:var(--muted);font-size:13px;cursor:pointer;transition:.15s}
.side nav a i{font-size:17px;width:20px;text-align:center}
.side nav a:hover{background:var(--surface);color:var(--text)}
.side nav a.active{background:var(--accent);color:#fff}

/* Main */
.main{margin-left:210px;flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:30}
.topbar h1{font-size:16px;font-weight:600}
.topbar .sp{margin-left:auto}
.topbar .av{width:34px;height:34px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;color:#fff}
.page{display:none;padding:22px}.page.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Cards & métricas */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.metric .lbl{font-size:12px;color:var(--muted)}
.metric .val{font-size:22px;font-weight:600;margin-top:4px}
.metric .val.neg{color:var(--err)}.metric .val.pos{color:var(--ok)}

/* Form */
label{display:block;font-size:12px;color:var(--muted);margin:0 0 4px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);font:inherit;font-size:13px;padding:9px 11px;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,255,.15)}
textarea{resize:vertical;min-height:60px}
::placeholder{color:var(--muted)}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:var(--r);font:inherit;font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;transition:.15s}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent-h)}
.btn-s{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}.btn-s:hover{border-color:var(--accent)}

/* Tabs internas */
.subtabs{display:flex;gap:20px;border-bottom:1px solid var(--border);margin-bottom:16px;font-size:13px}
.subtabs a{color:var(--muted);padding:0 0 9px;cursor:pointer}
.subtabs a.on{color:#fff;border-bottom:2px solid var(--accent)}

/* Tabela */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{color:var(--muted);font-weight:400;text-align:right;padding:8px 8px;white-space:nowrap}
.tbl th:nth-child(-n+2){text-align:left}
.tbl td{text-align:right;padding:10px 8px;border-top:1px solid var(--border);white-space:nowrap}
.tbl td:nth-child(-n+2){text-align:left}
.tbl tr.total td{border-top:1px solid var(--border2);font-weight:600;color:#fff}
.tbl .pos{color:var(--ok)}.tbl .neg{color:var(--err)}

/* Toggle */
.tg{display:inline-block;width:32px;height:18px;border-radius:10px;background:#39435a;position:relative;cursor:pointer;transition:.15s}
.tg.on{background:var(--accent)}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.15s}
.tg.on::after{left:16px}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
.badge.ok{background:rgba(93,202,165,.14);color:var(--ok)}
.badge.mut{background:rgba(139,151,168,.14);color:var(--muted)}
.badge.warn{background:rgba(240,178,75,.14);color:var(--warn)}

.hidden{display:none!important}
@media(max-width:760px){.side{width:54px}.side .brand b,.side nav a span,.side nav .grp{display:none}.main{margin-left:54px}}