:root{
  --bg:#0b101b; --bg2:#0f172a; --grad1:#0ea5e980; --grad2:#8b5cf680;
  --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12); --soft:rgba(255,255,255,.08);
  --text:#e2e8f0; --muted:#94a3b8; --primary:#22d3ee; --accent:#a78bfa;
  --danger:#ef4444; --success:#22c55e; --radius:16px; --shadow:0 18px 60px rgba(0,0,0,.38);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; color:var(--text); font:14px/1.4 Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at -10% -20%,var(--grad1),transparent),
             radial-gradient(1200px 700px at 110% -10%,var(--grad2),transparent),
             linear-gradient(180deg,var(--bg),var(--bg2));
}

/* ---------- Buttons & inputs ---------- */
a{color:#93c5fd; text-decoration:none}
.btn{background:var(--primary); color:#06121c; border:0; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--soft)}
.btn.danger{background:var(--danger); color:#fff}
input,select{width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--soft);
  background:var(--card-2); color:var(--text)}
label{color:var(--muted); font-size:12px}
.row{display:flex; gap:10px} .row>*{flex:1}

/* ---------- Layout ---------- */
.top{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(8px);
}
.brand{font-weight:800; letter-spacing:.3px}
.grow{flex:1}
.userchip{padding:8px 12px; border:1px solid var(--soft); border-radius:999px; color:#c7d2fe; background:rgba(167,139,250,.08)}

.layout{display:grid; grid-template-columns: 250px 1fr; min-height:calc(100vh - 60px)}
.side{
  padding:14px; border-right:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:6px; border-radius:12px; color:var(--text);
  border:1px solid transparent; transition:.15s;
}
.nav a:hover{border-color:var(--soft); background:var(--card-2)}
.nav a.active{border-color:var(--primary); box-shadow:0 0 0 1px inset var(--primary); background:rgba(34,211,238,.08)}

.content{padding:16px 18px}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px;
  box-shadow:var(--shadow);
}
.section-title{display:flex; align-items:center; gap:10px; margin:4px 0 12px}
.section-title h2{margin:0; font-weight:800}

/* ---------- Tables ---------- */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:12px; border-bottom:1px solid var(--soft); vertical-align:middle}
.table th{color:#c7d2fe; font-weight:700}
.table .actions{display:flex; gap:8px; align-items:center}

/* ---------- Alerts ---------- */
.msg{background:#16a34a22; border:1px solid #16a34a55; color:#c7f9cc; padding:10px 12px; border-radius:12px}
.error{background:#ef444422; border:1px solid #ef444499; color:#fecaca; padding:10px 12px; border-radius:12px}

/* ---------- Auth ---------- */
.auth{
  min-height:100vh; display:grid; place-items:center; padding:24px;
}
.auth .auth-card{
  width:min(440px,95vw); padding:22px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.auth h1{margin:0 0 6px; font-size:28px; letter-spacing:.4px}
.auth .subtitle{color:var(--muted); margin:2px 0 16px}
.auth .wide{width:100%; margin-top:10px}

/* ---------- Uploader ---------- */
.uploader{display:flex; gap:10px; align-items:center}
.uploader input[type=file]{max-width:280px}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid var(--soft)}
.badge.admin{background:rgba(167,139,250,.15); color:#1b1b2b; border-color:#a78bfa}
.badge.user{background:rgba(34,211,238,.15); color:#031f24; border-color:#22d3ee}
/* === SELECT PREMIUM (escuro, vidro, com seta custom) === */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  padding: 11px 42px 11px 12px;          /* espaço pra seta */
  border-radius: 12px;
  border: 1px solid var(--soft);

  /* vidro + borda com leve brilho */
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.55), rgba(167,139,250,.35)) border-box;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  /* seta (chevron) via SVG embutido */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
select:focus {
  outline: 0;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(34,211,238,.35), 0 10px 30px rgba(0,0,0,.35);
}

/* Força o dropdown de opções a ficar escuro (funciona nos principais navegadores) */
select option {
  background: #0f172a;      /* fundo do menu */
  color: var(--text);
}
select option:hover,
select option:checked {
  background: #1e293b;
  color: #e2e8f0;
}

/* Remove a setinha velha do IE/Edge antigo (se houver) */
select::-ms-expand { display: none; }