:root{
  --azul:#1f5fbf; --azul2:#16458c; --verde:#1a7f37; --vermelho:#b42318;
  --amarelo:#9a6400; --cinza:#5b6470; --borda:#dce1e7; --fundo:#f4f6f9;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Segoe UI",Arial,sans-serif; color:#1c2430;
      background:var(--fundo); }
a{ color:var(--azul); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* topo */
.topo{ background:var(--azul2); color:#fff; padding:14px 22px; display:flex;
       align-items:center; gap:16px; }
.topo h1{ margin:0; font-size:17px; flex:1 1 auto; }
.topo .quem{ font-size:13px; opacity:.9; }
.topo a.link{ color:#fff; font-size:13px; opacity:.92; }
.topo a.link:hover{ opacity:1; }
.tag-admin{ background:#ffffff22; border:1px solid #ffffff44; padding:2px 8px;
            border-radius:999px; font-size:11px; margin-left:6px; }

main{ max-width:980px; margin:24px auto; padding:0 16px 48px; }

/* cartoes / blocos */
.card{ background:#fff; border:1px solid var(--borda); border-radius:10px;
       padding:18px; margin-bottom:16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card h2{ margin:0 0 12px; font-size:15px; color:var(--azul2);
          border-bottom:1px solid var(--borda); padding-bottom:8px; }

/* botoes */
button,.btn{ font-size:14px; padding:9px 16px; border:0; border-radius:6px;
       background:var(--azul); color:#fff; cursor:pointer; display:inline-block; }
button:hover,.btn:hover{ background:var(--azul2); text-decoration:none; }
.btn.sec,button.sec{ background:#eef1f5; color:#1c2430; border:1px solid var(--borda); }
.btn.sec:hover,button.sec:hover{ background:#e3e8ef; }
.btn.peq{ padding:5px 10px; font-size:12px; }
.btn.perigo{ background:#fbeae8; color:var(--vermelho); border:1px solid #f3c9c4; }
.btn.perigo:hover{ background:#f7d9d5; }

/* formularios */
label{ display:block; font-size:13px; color:var(--cinza); margin:10px 0 4px; }
input[type=text],input[type=password],select{ width:100%; padding:8px 10px;
       font-size:14px; border:1px solid var(--borda); border-radius:6px; background:#fff; }
.linha{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cresce{ flex:1 1 auto; }

/* avisos */
.aviso{ padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.aviso.ok{ background:#e7f6ec; color:var(--verde); border:1px solid #bfe6cd; }
.aviso.err{ background:#fdecea; color:var(--vermelho); border:1px solid #f3c9c4; }

/* login */
.login-wrap{ max-width:380px; margin:8vh auto; }
.login-wrap .card{ padding:26px; }
.login-wrap h2{ border:0; font-size:18px; text-align:center; margin-bottom:4px; }
.login-wrap p.sub{ text-align:center; color:var(--cinza); font-size:13px; margin-top:0; }

/* catalogo (grade de apps) */
.grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
        gap:14px; }
.app{ background:#fff; border:1px solid var(--borda); border-radius:10px;
      padding:16px; display:flex; gap:14px; align-items:flex-start;
      box-shadow:0 1px 2px rgba(0,0,0,.04); }
.app .icone{ width:46px; height:46px; border-radius:10px; color:#fff;
      display:flex; align-items:center; justify-content:center; font-weight:700;
      font-size:16px; flex:0 0 auto; }
.app .corpo{ flex:1 1 auto; }
.app .corpo h3{ margin:0 0 4px; font-size:15px; }
.app .corpo p{ margin:0 0 10px; font-size:13px; color:var(--cinza); }
.badge{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px;
        border-radius:999px; }
.badge.pronto{ background:#e7f6ec; color:var(--verde); }
.badge.breve{ background:#fff5e6; color:var(--amarelo); }
.vazio{ color:var(--cinza); font-style:italic; }

/* tabela admin */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--borda); }
th{ color:var(--cinza); font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px;
       font-weight:600; }
.pill.on{ background:#e7f6ec; color:var(--verde); }
.pill.off{ background:#fdecea; color:var(--vermelho); }
.pill.adm{ background:#e8eefb; color:var(--azul2); }
.apps-check{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
       gap:6px; margin-top:6px; }
.apps-check label{ display:flex; gap:8px; align-items:center; margin:0;
       font-size:13px; color:#1c2430; background:#fafbfc; border:1px solid var(--borda);
       border-radius:6px; padding:7px 10px; cursor:pointer; }
small.dica{ color:var(--cinza); display:block; margin-top:6px; }
.mono{ font-family:Consolas,monospace; font-size:13px; }
.credito-dev{ position:fixed; right:12px; bottom:10px; z-index:50;
  font-size:11px; color:#8a93a0; background:rgba(255,255,255,.72);
  padding:3px 9px; border-radius:6px; pointer-events:none;
  box-shadow:0 1px 2px rgba(0,0,0,.05); }