*{box-sizing:border-box}
body{margin:0;background:#f4f6f8;color:#182231;font-family:Arial,Helvetica,sans-serif;line-height:1.45}
header{height:68px;background:#0d213b;color:#fff;padding:0 7%;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;font-size:20px}
.logo span{font-weight:400;color:#9db7d7}
.mode{font-size:12px;letter-spacing:1.2px;color:#b9c9dc}
.mode.demo{color:#e8c66a}
main{max-width:1040px;margin:44px auto;padding:0 20px}
.hero{margin-bottom:22px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:#2767c8}
.hero h1{font-size:34px;margin:8px 0}
.hero p{color:#687587;max-width:720px}
.hero-note{display:block;margin-top:8px;font-size:13px;color:#8a95a4}
.box,.result{background:#fff;border-radius:16px;padding:30px;box-shadow:0 8px 30px rgba(20,35,55,.08)}
label{display:block;font-size:13px;font-weight:700;margin:17px 0 7px}
label small{color:#8a95a4;font-weight:400}
.box input{width:100%;padding:14px;border:1px solid #d4dbe4;border-radius:9px;font-size:15px}
button{width:100%;margin-top:20px;padding:15px;border:0;border-radius:9px;background:#1769e0;color:#fff;font-weight:800;letter-spacing:.4px;cursor:pointer}
button:disabled{opacity:.65}
.erro{background:#fdecea;color:#b3261e;border:1px solid #f5c6c0;border-radius:9px;padding:13px;margin-top:16px;font-size:14px}
.hidden{display:none}
.result{margin-top:24px}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid #e7ebf0;padding-bottom:18px;flex-wrap:wrap}
.result h2{margin:6px 0 0;font-size:24px;word-break:break-all}
.sub{color:#7a8594;font-size:13px;margin-top:8px}
.sub span{margin-right:18px}
.badges{display:flex;gap:8px;align-items:center}
.status{background:#e9f3ff;color:#1769e0;border-radius:20px;padding:8px 13px;font-size:12px;font-weight:800}
.canal{background:#0d8768;color:#fff;border-radius:20px;padding:8px 13px;font-size:12px;font-weight:800}
.canal.c-vermelho{background:#b3261e}
.canal.c-amarelo,.canal.c-laranja{background:#b26a00}
.canal.c-cinza{background:#5c6672}
.canal.c-verde{background:#0d8768}
.result h3{font-size:15px;letter-spacing:.6px;color:#182231;margin:28px 0 12px;text-transform:uppercase}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid div{background:#f7f8fa;padding:14px;border-radius:9px}
.grid small{display:block;color:#7a8594;margin-bottom:6px}
.grid b{font-size:14px;word-break:break-word}
.tablewrap{overflow:auto;border:1px solid #e7ebf0;border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #edf0f3}
th{background:#f2f5f8;font-size:12px;letter-spacing:.4px}
tr:last-child td{border-bottom:0}
.empty{color:#8a95a4}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card{background:#f7f8fa;border:1px solid #e7ebf0;border-radius:10px;padding:12px}
.card b{display:block;font-size:13px;margin-bottom:4px}
.card span{font-size:13px;color:#182231}
.card small{display:block;color:#7a8594;margin-top:6px;font-size:12px}
.info{white-space:pre-wrap;margin-top:24px;background:#fbfbf6;border:1px solid #ecead9;border-radius:10px;padding:14px;font-size:13px;color:#5c6672}
footer{margin:54px auto 30px;text-align:center;color:#8a95a4;font-size:12px;padding:0 20px}
@media(max-width:720px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}