:root{
  --bg:#0f0f0f;
  --panel:#161616;
  --muted:#bdbdbd;
  --text:#eaeaea;
  --brand:#00ff99;
  --brand-2:#00c483;
  --stroke:#262626;
  --flash-ok:#123d2b;
  --flash-err:#3d1b1b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
}

.container{width:min(1100px, 90vw); margin:0 auto}
.row{display:flex;gap:20px}
.space-between{justify-content:space-between}
.center{align-items:center}

.topbar{
  border-bottom:1px solid var(--stroke);
  background:rgba(0,0,0,.25);
  backdrop-filter:saturate(150%) blur(6px);
  position:sticky; top:0; z-index:10;
}

.brand img{height:40px; display:block}
.nav a{color:var(--text); text-decoration:none; margin-left:18px; opacity:.85}
.nav a:hover{opacity:1}

.hero{text-align:center; padding:56px 0 18px}
.hero h1{
  font-size:clamp(28px, 4vw, 42px);
  margin:0 0 10px;
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
}
.hero-logo-inline{height:42px; width:auto; vertical-align:middle}
@media (max-width:800px){ .hero-logo-inline{height:34px} }
.hero p{max-width:820px; margin:0 auto; color:var(--muted); line-height:1.6}

.contact-card, .card{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:24px;
  margin:24px 0 56px;
}

.footer{border-top:1px solid var(--stroke); padding:20px 0; color:var(--muted); text-align:center}

.flashes{margin:16px auto}
.flash{border-radius:12px; padding:12px 14px; margin:10px 0; border:1px solid var(--stroke)}
.flash.success{background:var(--flash-ok)} .flash.error{background:var(--flash-err)}

.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1 / -1}
label{font-size:.95rem; color:#d6d6d6}
input, textarea{
  background:#101010; border:1px solid var(--stroke); color:var(--text);
  border-radius:10px; padding:12px; outline:none;
}
input:focus, textarea:focus{border-color:#2b2b2b; box-shadow:0 0 0 3px rgba(0,255,153,.08)}
.actions{grid-column:1 / -1; text-align:right}

.btn{appearance:none; border:none; padding:12px 18px; border-radius:12px; font-weight:600; cursor:pointer}
.btn-primary{color:#00110a; background:linear-gradient(180deg, var(--brand),var(--brand-2)); box-shadow:0 8px 24px rgba(0,255,153,.12)}
.btn-primary:hover{filter:saturate(105%) brightness(1.01)}

/* ---- Dashboard base (stats/atalhos/tabela) ---- */
.stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin:8px 0 24px;
}
.stat-card{
  background:#101010; border:1px solid var(--stroke); border-radius:14px; padding:16px;
}
.stat-number{font-size:28px; font-weight:800}
.stat-label{color:var(--muted); margin-top:4px}

.shortcuts{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin:8px 0 24px;
}
.shortcut{
  display:block; text-align:center; padding:12px; border-radius:12px;
  background:#121212; border:1px solid var(--stroke); text-decoration:none; color:var(--text);
}
.shortcut:hover{filter:brightness(1.08)}

.table-wrap{overflow:auto}
.table{width:100%; border-collapse:collapse; font-size:0.95rem}
.table th, .table td{border-bottom:1px solid var(--stroke); padding:10px 8px; text-align:left}
.table th{color:#d8d8d8; font-weight:700}
.table tbody tr:hover{background:#121212}

/* ---- Dashboard layout: gráfico + calendário lado a lado ---- */
.dashboard-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:16px;
  margin: 8px 0 24px;
}
#calendario{ padding: 6px 0; }

/* responsivo */
@media (max-width:1000px){
  .dashboard-grid{ grid-template-columns: 1fr; }
}
@media (max-width:800px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .shortcuts{grid-template-columns:1fr 1fr}
}