*{box-sizing:border-box}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#0b1220;
    color:#ffffff;
}

/* ================= TOP BAR ================= */
.topbar{
    background:#111827;
    padding:12px 15px;
    font-size:16px;
    font-weight:bold;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid #1f2937;
    color:#ffffff;
}
.live-dot{
    background:#dc2626;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:4px;
}

/* ================= INDEX PAGE ================= */
.match-list{
    padding:10px;
}

.match-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#111827;
    padding:12px;
    margin-bottom:8px;
    border-radius:6px;
    text-decoration:none;
    color:#ffffff;
}
.match-card:hover{
    background:#1f2937;
}

.match-left .teams{
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
}
.match-left .meta{
    font-size:11px;
    color:#d1d5db;
    margin-top:3px;
}

.match-right{
    display:flex;
    gap:6px;
}

.badge{
    font-size:11px;
    padding:4px 7px;
    border-radius:4px;
    font-weight:bold;
    color:#ffffff;
}
.badge.bm{background:#2563eb}
.badge.fancy{background:#92400e}

/* ================= MATCH PAGE ================= */
.match-header{
    background:#111827;
    padding:12px;
    font-size:16px;
    font-weight:bold;
    border-bottom:1px solid #1f2937;
    color:#ffffff;
}

.match-container{
    padding:10px;
}

/* ================= MARKET ================= */
.market{
    background:#111827;
    margin-bottom:12px;
    border-radius:6px;
    overflow:hidden;
    color:#ffffff;
}
.market-title{
    padding:8px 10px;
    font-size:12px;
    background:#1f2937;
    color:#e5e7eb;
}

/* ================= RUNNER ROW ================= */
.runner-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border-top:1px solid #1f2937;
    color:#ffffff;
}
.runner-name{
    width:45%;
    font-size:13px;
    color:#ffffff;
}

/* ================= ODDS ================= */
.runner-odds{
    display:flex;
    gap:6px;
}
.odd{
    width:64px;
    text-align:center;
    border-radius:4px;
    padding:4px 0;
    color:#ffffff;
}
.odd .price{
    font-weight:bold;
    font-size:14px;
    color:#ffffff;
}
.odd .size{
    font-size:11px;
    color:#e5e7eb;
}

.odd.back{background:#14532d}
.odd.lay{background:#7f1d1d}

/* ================= FANCY ================= */
.fancy-lock{
    padding:14px;
    text-align:center;
    color:#facc15;
    background:#1f2937;
}

/* ================= BLINK ================= */
@keyframes upBlink{50%{box-shadow:0 0 12px #22c55e}}
@keyframes downBlink{50%{box-shadow:0 0 12px #ef4444}}
.blink-up{animation:upBlink .6s}
.blink-down{animation:downBlink .6s}

/* ================= MOBILE ================= */
@media(max-width:600px){
    .runner-name{width:50%}
    .odd{width:58px}
}