:root{
  --bg: #0b1220;           /* azul-escuro de fundo */
  --surface: #121a2b;      /* cards/topbar */
  --surface-2: #0f1726;    /* sidebar base */
  --text: #e9eefb;         /* texto principal */
  --muted: #9fb0d1;        /* texto secundário */
  --primary: #3b82f6;      /* azul destaque */
  --primary-600: #2563eb;
  --accent: #60a5fa;       /* azul claro */
  --border: rgba(255,255,255,0.08);
  --shadow: rgba(3,8,20,0.6);
  --success: #22c55e;
  --error: #ef4444;
  --warning: #f59e0b;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  display:flex;
}

/* ====== LAYOUT PRINCIPAL ====== */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  position:sticky;
  top:0;
  background: linear-gradient(180deg, rgba(18,26,43,0.95), rgba(18,26,43,0.85));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
  padding:14px 20px;
  z-index:10;
}
.topbar__title{
  margin:0;
  font-size:18px;
  font-weight:600;
  letter-spacing: .2px;
}

.content{
  padding: 22px;
}

/* ====== COMPONENTES ====== */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: 0 10px 30px -10px var(--shadow);
  overflow:hidden;
}
.card__header{
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.card__title{
  margin:0;
  font-size:16px;
  font-weight:600;
}
.card__body{
  padding:18px;
}

.list{
  margin:8px 0 0;
  padding-left:18px;
}
.list li{ margin:6px 0; }

/* ====== FORM ====== */
.form{
  display:grid;
  gap:12px;
}
.form__label{
  display:grid;
  gap:6px;
  font-size:13px;
  color: var(--muted);
}
.form__input{
  height:40px;
  padding:0 12px;
  border-radius:10px;
  background:#0e1627;
  color: var(--text);
  border:1px solid var(--border);
  outline:none;
}
.form__input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(96,165,250,0.15);
}

/* ====== BUTTONS & LINKS ====== */
.btn{
  height:40px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background: #0f1726;
  color: var(--text);
  cursor:pointer;
  transition: transform .04s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:active{ transform: scale(0.99); }
.btn--primary{
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  border: none;
  color: white;
}
.link{
  color: var(--accent);
  text-decoration: none;
}
.link:hover{ text-decoration: underline; }

/* ====== FLASH MESSAGES ====== */
.flash-container{ display:grid; gap:8px; margin-bottom:12px; }
.flash{
  border-radius:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  background: #0f1726;
}
.flash--success{ border-color: rgba(34,197,94,0.25); color:#a7f3d0; }
.flash--error{ border-color: rgba(239,68,68,0.25); color:#fecaca; }
.flash--warning{ border-color: rgba(245,158,11,0.25); color:#fde68a; }

/* ====== RESPONSIVO ====== */
@media (max-width: 880px){
  .content{ padding: 16px; }
}