/* Interface inspirada no sistema R2JM: sidebar + navy escuro + destaque vermelho/rosa */
:root{
  --bg:#0b1220; --sidebar:#0e1626; --painel:#131c2e; --borda:#24314a;
  --texto:#f1f5f9; --muted:#94a3b8;
  --primary:#f43f5e; --primary-hover:#e11d48; --primary-bg:rgba(244,63,94,.12);
  --ciano:#22d3ee; --ciano-ring:#0891b2;
  --campo:#0f1a2e;
}
*{ box-sizing:border-box; }
body{ font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; margin:0; background:var(--bg); color:var(--texto); }

/* ---- layout com barra lateral ---- */
.app{ display:flex; min-height:100vh; }
.sidebar{ width:210px; flex-shrink:0; background:var(--sidebar); border-right:1px solid var(--borda); padding:18px 14px; display:flex; flex-direction:column; }
.logo{ width:112px; height:112px; border-radius:50%; margin:6px auto 22px; background:#000;
       display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.logo img{ width:100%; height:100%; object-fit:cover; }
.logo .marca{ font-weight:800; font-size:24px; letter-spacing:1px; }
.logo .sub{ font-size:7px; color:var(--muted); letter-spacing:1.5px; margin-top:2px; }
.sidebar nav{ display:flex; flex-direction:column; gap:4px; }
.sidebar nav a{ color:var(--muted); text-decoration:none; font-weight:600; padding:10px 14px; border-radius:9px; border:1px solid transparent; transition:.15s; }
.sidebar nav a:hover{ color:var(--texto); background:#16233a; }
.sidebar nav a.ativo{ color:var(--primary); background:var(--primary-bg); border-color:var(--ciano-ring); }
.sidebar .rodape{ margin-top:auto; font-size:11px; color:var(--muted); padding:10px 14px; }

main{ flex:1; padding:24px 30px; max-width:1040px; }
h1,h2{ font-weight:700; margin-top:0; }

input, textarea, select, button{ font:inherit; padding:9px 12px; border-radius:9px; border:1px solid var(--borda); background:var(--campo); color:var(--texto); }
input:focus, textarea:focus, select:focus{ outline:2px solid var(--ciano); outline-offset:0; border-color:var(--ciano); }
button{ background:var(--primary); border:0; color:#fff; cursor:pointer; font-weight:600; transition:background .15s; }
button:hover{ background:var(--primary-hover); }
button.sec{ background:var(--borda); color:var(--texto); }
button.sec:hover{ background:#2f4066; }

.card{ background:var(--painel); border:1px solid var(--borda); border-radius:14px; padding:18px; margin:14px 0; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.linha{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
label{ display:block; font-size:13px; color:var(--muted); margin:8px 0 4px; }
pre#log{ background:#080e1a; border:1px solid var(--borda); padding:12px; border-radius:9px; max-height:300px; overflow:auto; font-size:12px; color:#cbd5e1; }
table{ width:100%; border-collapse:collapse; }
td, th{ border-bottom:1px solid var(--borda); padding:9px 8px; text-align:left; font-size:14px; }
th{ color:var(--muted); font-weight:600; }
.aviso{ color:#fca5a5; } .ok{ color:#86efac; }

/* ---- login centralizado (sem sidebar) ---- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-wrap .card{ width:100%; max-width:360px; }
.login-wrap .logo{ margin:0 auto 18px; }