:root{--bg:#0b132b;--card:#111a3a;--muted:#9fb3c8;--text:#e6edf3;--accent:#5bc0be;--shadow:0 10px 30px rgba(0,0,0,.25)}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
header.app{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#0b132b,#0e1840);box-shadow:var(--shadow);padding:.7rem .9rem}
.brand{display:flex;gap:.7rem;align-items:center}.logo{font-size:1.6rem}.sub{color:var(--muted);font-size:.85rem;margin-top:.1rem}
.nav{margin-top:.6rem;display:flex;gap:.6rem}.nav a{background:#162039;border:1px solid #2a355e;color:var(--text);border-radius:12px;padding:.5rem .8rem}
.nav a.active{background:var(--accent);color:#123;font-weight:700;border-color:transparent}
main{padding:1rem .8rem;max-width:1100px;margin:0 auto}
.controls{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.date-controls{display:flex;gap:.4rem;align-items:center}
.date-controls button,.quick button{background:#162039;border:1px solid #2a355e;color:var(--text);border-radius:10px;padding:.45rem .6rem;cursor:pointer}
.quick{display:flex;gap:.4rem;align-items:center}
.select{appearance:none;background:#162039;border:1px solid #2a355e;color:var(--text);border-radius:10px;padding:.5rem .7rem;min-width:210px}
.summary{color:var(--muted);margin:.4rem 0 .6rem}
.cards{display:grid;grid-template-columns:1fr;gap:.7rem}
.card{background:var(--card);border:1px solid #223160;border-radius:16px;padding:.8rem;box-shadow:var(--shadow)}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.teams{display:flex;gap:.6rem;align-items:center;flex:1 1 auto}
.team{display:grid;grid-template-columns:auto 1fr;gap:.35rem .5rem;align-items:center}
.team .name{font-weight:700}.team .rec{color:var(--muted);font-size:.85rem}.at{color:var(--muted);margin:0 .4rem}
.score{font-weight:800;font-size:1.1rem}
.badge{padding:.15rem .4rem;border-radius:999px;background:#0e2547;color:var(--muted);font-size:.75rem;border:1px solid #2a355e}
.badge.final{background:#143b2c;color:#bff4cf;border-color:#2e6f55}
.badge.live{background:#3f1f1f;color:#ffd1d1;border-color:#a74444}
.small{font-size:.85rem;color:var(--muted)}
.table{width:100%;border-collapse:separate;border-spacing:0;margin-top:.4rem}
.table th,.table td{border-bottom:1px solid #23305f;padding:.45rem .35rem;text-align:left}
.table th{color:#b8c7e0;font-weight:700;background:#0f2047;position:sticky;top:0}
tr.highlight{background:#0f255d !important;box-shadow:inset 0 0 0 2px #5bc0be}
footer.app{padding:1rem .8rem;color:var(--muted);border-top:1px solid #202b55}
@media (min-width:720px){.cards{grid-template-columns:1fr 1fr}}@media (min-width:1024px){.cards{grid-template-columns:1fr 1fr 1fr}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:1rem}
.modal-card{background:#0f1a3b;border:1px solid #2a3a74;border-radius:16px;max-width:900px;width:100%;max-height:85vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.5);padding:1rem}
.modal-title{font-weight:800;margin-bottom:.6rem}
.modal-close{position:sticky;top:0;float:right;background:#15265a;border:1px solid #2a3a74;color:#e6edf3;border-radius:10px;padding:.35rem .55rem;cursor:pointer}
.modal-body pre{white-space:pre-wrap;word-wrap:break-word;font-size:.85rem;background:#0b1330;border:1px solid #223160;border-radius:12px;padding:.5rem}
.btn{border:1px solid #2a355e;background:#162039;color:#e6edf3;border-radius:10px;padding:.3rem .5rem;cursor:pointer}
a.btn{display:inline-block}