body{
background:#0f1115;
color:white;
font-family:system-ui;
margin:0;
}

.topbar{
display:flex;
justify-content:space-between;
padding:14px 24px;
border-bottom:1px solid #222;
}

.logo{
font-weight:bold;
}

.menu input{
padding:6px;
background:#161a20;
border:1px solid #333;
color:white;
}

.nextdraw{
text-align:center;
padding:10px;
background:#161a20;
}

.grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
padding:20px;
}

.card{
background:#161a20;
padding:18px;
border-radius:6px;
border:1px solid #222;
}

.card:hover{
border-color:#d4af37;
}

.market{
font-weight:bold;
margin-bottom:6px;
}

.status{
font-size:11px;
margin-bottom:8px;
}

.status-open{color:#2ecc71;}
.status-closed{color:#ff7675;}
.status-result{color:#f1c40f;}

button{
background:#d4af37;
border:0;
padding:8px 12px;
cursor:pointer;
}

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.8);
align-items:center;
justify-content:center;
}

.modal-box{
background:#161a20;
padding:30px;
border-radius:6px;
max-width:420px;
width:90%;
}

.hidden{
display:none;
}