:root[data-theme="light"]{
  --bg:#f6f7f9; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --border:#e5e7eb; --brand:#2563eb; --brand-weak:#93c5fd;
  --pos:#16a34a; --neg:#dc2626; --warn:#f59e0b;
  --stripe:#f8fafc; --hover:#f1f5f9;
}
:root[data-theme="dark"]{
  --bg:#0b0f19; --card:#121826; --text:#e5e7eb; --muted:#94a3b8;
  --border:#1f2937; --brand:#60a5fa; --brand-weak:#1e3a8a;
  --pos:#22c55e; --neg:#f87171; --warn:#fbbf24;
  --stripe:#0f1625; --hover:#0f172a;
}

html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}

.navbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 18px;background:linear-gradient(180deg, color-mix(in oklab, var(--card), #000 6%), transparent);
  border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{height:28px}
.nav{display:flex;align-items:center;gap:14px}
.nav a{color:var(--text);opacity:.9;text-decoration:none;font-weight:600}
.nav a.active,.nav a:hover{opacity:1;color:var(--brand)}
.theme-toggle{border:1px solid var(--border);background:var(--card);color:var(--text);
  padding:6px 10px;border-radius:999px;cursor:pointer}

.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px #00000014}
.hero{padding:22px}
.hero h1{margin:0 0 8px 0}
.cta{display:flex;gap:10px;margin-top:12px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.link{padding:16px;text-decoration:none;color:inherit}
.link h3{margin:0 0 6px 0}
.footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);
  padding:16px;color:var(--muted);margin-top:24px}

.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
th{background:color-mix(in oklab, var(--card), var(--stripe) 60%);text-align:left;color:var(--muted);font-weight:700}
tr:nth-child(even) td{background:var(--stripe)}
tr:hover td{background:var(--hover)}
.pill{padding:4px 8px;border-radius:999px;font-weight:700;font-size:12px;color:#fff}
.pill.ok{background:var(--pos)} .pill.warn{background:var(--warn)} .pill.bad{background:var(--neg)}
/* estrutura do menu */
.nav {display:flex; align-items:center; gap:14px}
.nav-list {display:flex; gap:16px; list-style:none; margin:0; padding:0}
.nav-list > li > a {text-decoration:none; font-weight:600; color:var(--text); opacity:.9}
.nav-list > li > a:hover, .nav-list > li > a.active {opacity:1; color:var(--brand)}

/* dropdown */
.has-dd {position:relative}
.dd {
  position:absolute; top:100%; left:0; min-width:260px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:8px; margin-top:10px; box-shadow:0 8px 28px #00000033;
  display:none; z-index:30;
}
.has-dd:hover > .dd {display:block}          /* desktop: abre no hover */
.dd li {list-style:none}
.dd a {display:block; padding:10px 12px; border-radius:8px; color:var(--text); text-decoration:none}
.dd a:hover {background:var(--hover); color:var(--brand)}
.dd .sep {padding:8px 12px; font-size:12px; color:var(--muted); text-transform:uppercase}

/* mobile */
.hamb {display:none; border:1px solid var(--border); background:var(--card); border-radius:10px; padding:6px 10px}
@media (max-width: 960px){
  .hamb{display:block}
  .nav-list{
    position:fixed; inset:56px 0 0 0; background:var(--card);
    display:none; flex-direction:column; padding:12px; gap:6px; overflow:auto; z-index:40;
    border-top:1px solid var(--border);
  }
  .nav-list.open{display:flex}
  .has-dd > .dd {position:static; display:none; border:none; box-shadow:none; padding:6px; margin:0; background:transparent}
  .has-dd.open > .dd {display:block}
}