*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#f5f5f5;background:#08090d}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#17202b 0,#08090d 48%,#030405 100%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0 45%,rgba(255,255,255,.025) 50%,transparent 55%)}
.app{width:min(720px,94%);margin:0 auto;padding:24px 0 40px}
header{text-align:center;margin-bottom:16px}
h1{font-size:clamp(25px,7vw,42px);margin:0;font-weight:900;letter-spacing:1px}
.subtitle{margin:8px 0 0;color:#aeb7c4;font-size:13px;letter-spacing:2px}
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.counters div{background:#11151c;border:1px solid #252c37;border-radius:12px;padding:13px;text-align:center;box-shadow:0 8px 25px #0005}
.counters span{display:block;font-size:12px;color:#aeb7c4;font-weight:800}
.counters b{display:block;font-size:27px;margin-top:4px}
.signal-card,.card{background:linear-gradient(180deg,#121720,#0d1016);border:1px solid #29313d;border-radius:16px;padding:18px;box-shadow:0 12px 35px #0006}
.signal-card{text-align:center}
h2{font-size:15px;letter-spacing:1px;margin:0 0 14px}
.signal{font-size:clamp(24px,7vw,38px);font-weight:900;padding:16px 8px;border-radius:12px;transition:.25s}
.signal.neutral{background:#171b22;color:#d5d9df}
.signal.blue{background:#0b315e;color:#54a9ff}
.signal.red{background:#5b1117;color:#ff6671}
.signal.draw{background:#3d3d3d;color:#fff}
#analysis{color:#aeb7c4;margin:10px 0 0;font-size:13px}
.result-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:14px 0}
button{border:0;border-radius:12px;padding:15px 10px;color:white;font-weight:900;cursor:pointer;background:#171c24;border:1px solid #303846;transition:.15s}
button:hover{transform:translateY(-2px);filter:brightness(1.15)}
button:active{transform:scale(.98)}
button.blue{background:#0c477f}.result-buttons button.red{background:#8c1720}.result-buttons button.draw{background:#484848}
.patterns{margin-top:0}
.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pattern-grid div{background:#090c11;border-radius:10px;padding:12px;text-align:center}
.pattern-grid b{display:block;font-size:23px}.pattern-grid span{font-size:10px;color:#8f99a7}
.confidence{display:flex;justify-content:space-between;margin:16px 0 7px;font-size:12px;color:#aeb7c4}
.confidence b{color:#fff}.bar{height:7px;background:#252b34;border-radius:20px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#fff;transition:.35s}
.history{margin-top:14px}.section-title{display:flex;align-items:center;justify-content:space-between}.section-title span{font-size:11px;color:#8993a1}
.history-list{display:flex;flex-wrap:wrap;gap:7px;max-height:250px;overflow:auto;padding-top:3px}
.result{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;font-size:18px;border:1px solid #333}
.result.azul{background:#0b477e}.result.vermelho{background:#851a22}.result.empate{background:#555}
.empty{color:#737d8a;font-size:13px;padding:12px 0}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:480px){.app{padding-top:18px}.result-buttons{grid-template-columns:1fr}.actions{grid-template-columns:1fr}.pattern-grid{grid-template-columns:1fr 1fr 1fr}.counters b{font-size:23px}}