:root{
  --bg:#060c14;
  --sidebar:#08121f;
  --card:#0a1424;
  --border:#00c7ff44;
  --text:#eee;
  --muted:#bbb;
  --orange:#00c7ff;
  --orange2:#00c7ff;
  --tableHead:#0d1b2a;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
}

/* MENU LATERAL */
.sidebar{
  width:260px;
  background:var(--sidebar);
  height:100vh;
  overflow:auto;
  padding:20px;
  position:fixed;
  left:0;
  top:0;
}
.sidebar h2{
  color:var(--orange);
  margin:0 0 18px;
  font-size:18px;
}
.sidebar a{
  display:block;
  color:var(--muted);
  text-decoration:none;
  padding:8px 0;
  transition:.2s;
  font-size:14px;
}
.sidebar a:hover{ color:#fff; padding-left:6px; }
.sidebar a.active{ color:#fff; font-weight:700; }

/* CONTEÚDO */
.content{
  margin-left:260px;
  padding:30px;
  width:100%;
}

.section{ margin-bottom:60px; }
.section h1{
  color:var(--orange);
  border-bottom:1px solid #333;
  padding-bottom:6px;
  margin:0 0 15px;
  font-size:22px;
}

/* CARDS */
.box{
  background:var(--card);
  padding:15px;
  border-radius:10px;
  border:1px solid var(--border);
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
  margin-bottom:14px;
}
.card h3{
  margin:0 0 10px;
  color:var(--orange2);
  font-size:16px;
}

/* TABELAS */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
table th, table td{
  border:1px solid #333;
  padding:8px;
  text-align:left;
}
table th{
  background:var(--tableHead);
  color:var(--orange2);
  font-weight:700;
}

/* RESPONSIVO */
@media(max-width:900px){
  .sidebar{ position:relative; width:100%; height:auto; }
  .content{ margin-left:0; }
}

.card{
  box-shadow:0 0 8px #00c7ff33;
}