/* -------- Core tokens -------- */
:root{
  --bg: #0b0f1a;
  --panel: rgba(255,255,255,0.06);
  --panel-hover: rgba(255,255,255,0.10);
  --txt: #e6e9ef;
  --muted: #9aa6bd;
  --brand: #4f46e5;      /* indigo */
  --accent: #06b6d4;     /* cyan */
  --ring: #06b6d455;
  --danger: #ef4444;
  --radius: 14px;
  --border: 1px solid rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f8fb;
    --panel: #ffffff;
    --panel-hover: #ffffff;
    --txt: #0b1220;
    --muted: #51607a;
    --brand: #2563eb;
    --accent: #14b8a6;
    --ring: #2563eb33;
    --border: 1px solid rgba(0,16,60,0.08);
    --shadow: 0 8px 24px rgba(0,0,0,.08);
  }
}

/* -------- Background minimal, sem formas gigantes -------- */
html,body{
  background:
    radial-gradient(800px 400px at 15% -10%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(700px 380px at 85% -5%, rgba(20,184,166,.18), transparent 60%),
    var(--bg);
  color: var(--txt);
}

/* -------- Header/Admin -------- */
#header, .breadcrumbs{
  background: transparent !important;
  border: 0 !important;
  color: var(--txt) !important;
}
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt); }
.brand-logo{ width:26px; height:26px; fill:var(--brand); }
.brand-name{ font-weight:700; letter-spacing:.25px; }
.top-actions .top-link{ color:var(--muted); text-decoration:none; font-size:13px; }
.top-actions .top-link:hover{ color:var(--txt); }

/* -------- Login layout -------- */
.auth-wrapper{ min-height:calc(100dvh - 80px); display:grid; place-items:center; padding:32px 16px; }
.card{
  width:100%; max-width:440px;
  background:var(--panel); border:var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .15s ease;
}
.card:hover{ background:var(--panel-hover); transform: translateY(-1px); }
.card-header{ margin-bottom:16px; }
.card-header h1{
  font-size:22px; margin:0 0 6px 0;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.muted{ color:var(--muted); font-size:14px; margin:0; }

/* -------- Form -------- */
.field{ display:grid; gap:6px; margin-bottom:14px; }
label{ font-size:13px; color:var(--muted); }
.input{
  background: rgba(0,0,0,.04);
  color: var(--txt);
  border: var(--border);
  border-radius:12px;
  padding:12px 14px;
  outline:none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.input:focus{ border-color:transparent; box-shadow:0 0 0 4px var(--ring); background:rgba(0,0,0,.02); }
.field-error{ color:var(--danger); font-size:12px; }

/* -------- Botões/links -------- */
.btn-primary{
  width:100%; padding:12px 16px; border-radius:12px; border:0;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  color:#fff; font-weight:600; letter-spacing:.2px; cursor:pointer;
  transition: transform .05s ease, filter .15s ease;
}
.btn-primary:hover{ filter: brightness(1.04); }
.btn-primary:active{ transform: translateY(1px) scale(.995); }
.link-muted{ display:inline-block; margin-top:12px; font-size:13px; color:var(--muted); text-decoration:none; }
.link-muted:hover{ color:var(--txt); text-decoration:underline; }

/* -------- Páginas internas (depois do login) -------- */
#content, .module{ background:transparent !important; border:0 !important; }