:root { --bg:#0b1220; --bg2:#0e1729; --card:#111a2c; --borda:#22304a; --txt:#e8edf5; --suave:#93a3ba; --ac:#4cd3f0; --miah:#a78bfa; --ok:#22c55e; --aviso:#fbbf24; --erro:#ef4444; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--txt); font-family:-apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height:1.5; }
a { color:var(--ac); }
button, input, select, textarea { font:inherit; color:inherit; }
.carregando { padding:40px; color:var(--suave); text-align:center; }

/* login */
.entrada { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.caixa-login { width:100%; max-width:400px; background:var(--card); border:1px solid var(--borda); border-radius:18px; padding:26px; }
.caixa-login h1 { margin:0 0 4px; font-size:22px; } .caixa-login p { color:var(--suave); margin:0 0 18px; font-size:14px; }
.campo { display:block; margin-bottom:14px; } .campo span { display:block; font-size:13px; color:var(--suave); margin-bottom:4px; }
.campo input, .campo select, .campo textarea { width:100%; background:var(--bg2); border:1px solid var(--borda); border-radius:10px; padding:10px 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline:2px solid var(--ac); border-color:transparent; }
.btn { background:var(--card); border:1px solid var(--borda); border-radius:10px; padding:9px 14px; cursor:pointer; }
.btn:hover { border-color:var(--ac); }
.btn.forte { background:var(--ac); border-color:var(--ac); color:#000; font-weight:800; }
.btn.miah { background:var(--miah); border-color:var(--miah); color:#000; font-weight:800; }
.btn.peq { padding:4px 10px; font-size:13px; border-radius:8px; }
.btn.perigo { border-color:#7f1d1d; color:#fca5a5; }
.erro-msg { color:#fca5a5; font-size:14px; min-height:20px; margin:4px 0 10px; }
.qr { background:#fff; border-radius:12px; padding:10px; width:max-content; margin:10px auto; }
.codigos { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-family:Consolas, monospace; background:var(--bg2); border-radius:10px; padding:12px; margin:10px 0; }

/* estrutura */
.casca { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }
.menu { background:var(--bg2); border-right:1px solid var(--borda); padding:18px 12px; position:sticky; top:0; height:100vh; overflow:auto; }
.marca { font-weight:900; font-size:17px; padding:0 10px 16px; } .marca small { display:block; color:var(--suave); font-weight:500; font-size:12px; }
.menu a { display:flex; gap:10px; align-items:center; padding:9px 12px; border-radius:10px; color:var(--txt); text-decoration:none; font-size:15px; }
.menu a:hover { background:var(--card); } .menu a.ativo { background:var(--card); outline:1px solid var(--borda); color:var(--ac); font-weight:700; }
.menu .sair { margin-top:14px; color:var(--suave); }
.conteudo { padding:24px; max-width:1200px; width:100%; }
.conteudo h1 { margin:0 0 4px; font-size:24px; } .sub { color:var(--suave); margin:0 0 20px; font-size:14px; }
.grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; }
.cartao { background:var(--card); border:1px solid var(--borda); border-radius:14px; padding:16px; }
.cartao h2 { margin:0 0 10px; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cartao.largo { grid-column:1 / -1; }
.lista { list-style:none; margin:0; padding:0; } .lista li { padding:8px 0; border-bottom:1px solid var(--borda); display:flex; gap:10px; align-items:flex-start; justify-content:space-between; }
.lista li:last-child { border-bottom:0; } .lista small, .muted { color:var(--suave); font-size:13px; }
.ponto { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; margin-top:6px; } .ponto.ok { background:var(--ok); } .ponto.mal { background:var(--erro); } .ponto.meio { background:var(--aviso); }
.etiqueta { font-size:12px; border:1px solid var(--borda); border-radius:999px; padding:1px 8px; color:var(--suave); white-space:nowrap; }
.numero { font-size:30px; font-weight:900; } .numero small { font-size:13px; color:var(--suave); font-weight:500; }
.linha { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.form-linha { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .form-linha input, .form-linha select { background:var(--bg2); border:1px solid var(--borda); border-radius:10px; padding:8px 10px; } .form-linha input[type=text] { flex:1; min-width:180px; }
.kanban { display:grid; grid-template-columns:repeat(4, minmax(220px, 1fr)); gap:12px; overflow-x:auto; }
.coluna { background:var(--bg2); border:1px solid var(--borda); border-radius:14px; padding:10px; min-height:120px; } .coluna h3 { margin:2px 4px 10px; font-size:14px; color:var(--suave); text-transform:uppercase; letter-spacing:.05em; }
.ideia { background:var(--card); border:1px solid var(--borda); border-radius:10px; padding:10px; margin-bottom:8px; } .ideia b { display:block; } .ideia .acoes { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.bolha { padding:8px 12px; border-radius:12px; margin:6px 0; max-width:85%; white-space:pre-wrap; font-size:14px; } .bolha.eu { background:#1e3a2f; margin-left:auto; } .bolha.assistente { background:var(--bg2); border:1px solid var(--borda); }
.cmd { display:flex; gap:8px; align-items:center; background:var(--bg2); border:1px solid var(--borda); border-radius:10px; padding:8px 10px; margin:6px 0; } .cmd code { flex:1; font-family:Consolas, monospace; font-size:13px; overflow-x:auto; white-space:nowrap; }
.aviso { background:rgba(251,191,36,.08); border:1px solid #7c5d10; border-radius:12px; padding:10px 14px; color:#fde68a; font-size:14px; margin-bottom:14px; }
.topo-mobile { display:none; }
@media (max-width: 820px) {
  .casca { grid-template-columns:minmax(0, 1fr); }   /* minmax(0,…): o quadro de ideias rola sozinho, a página não */
  .conteudo { min-width:0; }
  .menu { position:fixed; inset:0 30% 0 0; z-index:20; transform:translateX(-105%); transition:transform .2s; height:100%; }
  .menu.aberto { transform:none; box-shadow:0 0 0 100vmax rgba(0,0,0,.5); }
  .topo-mobile { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--borda); position:sticky; top:0; background:var(--bg); z-index:10; }
  .conteudo { padding:16px; }
  .kanban { grid-template-columns:repeat(4, 80%); }
}