:root{--paper:#202124;--muted:#6d7278;--line:#e5e7eb;--accent:#d9292f;--lime:#b7df38}
body{background:#fff;color:var(--paper)}
.topbar{height:64px;padding:0 22px;background:#202124;border:0;color:#fff;gap:16px}
.menu-button{border:0;background:transparent;color:#d8d8d8;font-size:18px;cursor:pointer}
.brand{color:#fff;font-size:22px}
.brand small{color:#aeb1b5}
.top-search{width:min(440px,38vw);margin-left:35px;padding:9px 15px;border:1px solid #45474b;border-radius:22px;color:#adb0b5;background:#303134;font-size:12px}
.top-search span{margin-left:8px;color:#a5a7aa}
.top-actions{gap:14px}
.top-icon{border:0;background:transparent;color:#c7c9cc;font-size:18px;cursor:pointer}
.operator-link{color:#c9f56a!important}
.profile-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d9292f;color:#fff;font-size:10px;font-weight:800}
.portal-shell{display:flex;min-height:calc(100vh - 64px)}
.sidebar{width:205px;flex:none;padding:16px 10px;border-right:1px solid var(--line);background:#fff}
.side-item{display:flex;align-items:center;gap:16px;padding:11px 14px;border-radius:8px;color:#5f6368;font-size:12px;text-decoration:none}
.side-item span{width:17px;text-align:center;font-size:16px}
.side-item:hover,.side-item.active{color:#202124;background:#f1f3f4}
.side-item.active{font-weight:700}
.side-item.active span{color:var(--accent)}
.side-rule{height:1px;margin:15px 13px;border-top:1px solid var(--line)}
.side-title{display:block;padding:0 14px 7px;color:#9aa0a6;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.side-footer{margin-top:30px;padding:18px 14px;border-top:1px solid var(--line);color:#9aa0a6;font-size:10px}
.side-footer strong{display:block;margin-top:3px;color:#3c4043;font-size:11px}
.side-footer small{display:block;margin-top:3px;color:#9aa0a6}
.light-main{min-width:0;flex:1;max-width:1500px;margin:0 auto;padding:35px 44px 65px;background:#fff}
.welcome-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:5px 0 25px}
.welcome-row h1{margin:6px 0 5px;color:#202124;font-size:31px;letter-spacing:-.055em}
.welcome-row h1 em{color:var(--accent);font-style:normal}
.welcome-row p{margin:0;color:var(--muted);font-size:12px}
.filter-button{padding:8px 12px;border:1px solid #dadce0;border-radius:4px;background:#fff;color:#5f6368;font-size:10px;cursor:pointer}
.filter-button span{margin-left:18px}
.category-row{display:flex;gap:9px;margin-bottom:31px;overflow-x:auto}
.category{padding:8px 14px;border:1px solid #dadce0;border-radius:18px;background:#fff;color:#5f6368;white-space:nowrap;font-size:10px;cursor:pointer}
.category:hover,.category.active{border-color:#202124;background:#202124;color:#fff}
.content-section{margin-bottom:38px}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}
.section-head h2{margin:0;color:#202124;font-size:19px;letter-spacing:-.04em}
.section-note{display:block;margin-top:3px;color:#9aa0a6;font-size:10px}
.section-head>a{color:#5f6368;font-size:10px;text-decoration:none}
.section-head>a:hover{color:var(--accent)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
.light-card{border:0;background:#fff}
.light-card:hover{transform:none;border:0}
.thumb{border-radius:7px;aspect-ratio:16/9}
.light-live-thumb{background:linear-gradient(135deg,#0c4d46,#3d9a72 48%,#173d35);box-shadow:inset 0 0 0 8px #654a3d,inset 0 0 0 10px #14362d;}
.light-live-thumb:before{inset:13% 8%;border-color:#d5f07a99}
.light-live-thumb:after{opacity:.8}
.light-fixture-thumb{background:radial-gradient(circle at 50% 48%,#111 0 27px,#f0f0f0 28px 34px,transparent 35px),linear-gradient(135deg,#e8f0e8,#b1d0bd)}
.replay-thumb{background:linear-gradient(135deg,#0a4b43,#4b9e74);box-shadow:inset 0 0 0 8px #654a3d}
.replay-thumb.alt{background:linear-gradient(135deg,#285e86,#afc4da);box-shadow:inset 0 0 0 8px #654a3d}
.replay-thumb.dark{background:linear-gradient(135deg,#141c2b,#386b63);box-shadow:inset 0 0 0 8px #654a3d}
.card-live{top:10px;left:10px;border-radius:2px;background:var(--accent);color:#fff}
.thumb-score{left:10px;bottom:10px;border-radius:3px;background:#202124dd}
.thumb-play{right:11px;bottom:10px;border-color:#fff;color:#fff}
.pool-rack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;transform:rotate(-18deg)}
.pool-rack i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e6b82e;color:#222;font:800 10px Georgia,serif;box-shadow:inset -3px -3px 4px #0005}
.pool-rack i:first-child{background:#070707;color:#fff}
.pool-rack i:last-child{background:#d94a3d}
.large-eight{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;transform:translate(-50%,-50%);background:#070707;color:#fff;font:800 27px Georgia,serif;box-shadow:inset -8px -8px 12px #000b,0 4px 12px #0006}
.fixture-date{top:12px;left:13px;color:#5f6368;font-weight:700}
.fixture-tag{bottom:12px;left:13px;color:#2e7d4a;background:#ffffffdd;padding:3px 5px;border-radius:2px}
.replay-duration{position:absolute;right:9px;bottom:8px;padding:3px 5px;border-radius:2px;background:#202124dd;color:#fff;font-size:9px}
.card-body{padding:10px 1px}
.card-line{font-size:9px}
.card-line span{color:#5f6368}
.card-line strong{color:#a33b3b}
.card-body h3{margin:6px 0 3px;color:#202124;font-size:13px}
.card-body p{color:#6d7278;font-size:10px}
.card-actions{margin-top:10px}
.watch{padding:7px 10px;border-color:#202124;border-radius:3px;background:#202124;color:#fff}
.pool{padding:7px 10px;border-color:#c8d2dc;border-radius:3px;color:#356ca0;background:#fff}
.empty-card{padding:30px;border:1px dashed #dadce0;color:#9aa0a6;font-size:12px}
footer{display:flex;justify-content:space-between;padding:18px 28px;border-top:1px solid var(--line);background:#fff;color:#9aa0a6;font-size:10px}
footer span:first-child{color:#202124;font-weight:800}
footer a{color:#356ca0;text-decoration:none}
@media(max-width:850px){.sidebar{width:70px;padding:16px 7px}
.side-item{justify-content:center;padding:12px 8px}
.side-item span{font-size:17px}
.side-item{font-size:0}
.side-rule,.side-title,.side-footer{display:none}
.light-main{padding:25px 20px 50px}
.top-search{margin-left:10px;width:40vw}
.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:540px){.topbar{padding:0 12px}
.brand small,.operator-link,.top-icon{display:none}
.top-search{margin-left:auto;width:auto;flex:1}
.top-search span{display:none}
.light-main{padding:22px 14px 40px}
.welcome-row{display:block}
.filter-button{margin-top:15px}
.card-grid{grid-template-columns:1fr}
.category-row{margin-bottom:23px}
}


/* Bright white client shell */
:root{--paper:#111827;--muted:#667085;--line:#e2e8f0;--accent:#2878e8;--lime:#8ac926}

body{background:#fff;color:#111827;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:600}

.topbar{background:#fff;color:#111827;border-bottom:1px solid #e2e8f0;box-shadow:0 5px 18px #1118270a}
.brand{color:#111827}
.brand b{color:#13a8d4}
.brand small{color:#98a2b3}
.top-search{border-color:#d8e0e8;background:#f8fafc;color:#475467}
.top-icon,.menu-button{color:#475467}
.operator-link{color:#2878e8!important}
.portal-shell,.light-main{background:#fff}
.sidebar{background:#fff;border-color:#e2e8f0}
.side-item{color:#475467;font-weight:600}
.side-item:hover,.side-item.active{color:#111827;background:#eff6ff}
.side-item.active span{color:#2878e8}
.welcome-row h1,.section-head h2,.card-body h3{color:#111827;font-weight:800}
.welcome-row p,.section-note,.card-body p,.card-line span{color:#667085}
.filter-button,.category{border-color:#d8e0e8;background:#fff;color:#475467;font-weight:700}
.category:hover,.category.active{border-color:#2878e8;background:#2878e8;color:#fff}
.light-card{border:1px solid #e2e8f0;border-radius:12px;padding:0 12px 12px;box-shadow:0 8px 22px #1118270a}
.card-live{background:#ef476f;color:#fff}
.watch{background:#b8ed45;border-color:#8ac926;color:#132000}
.pool{border-color:#9bc2f5;color:#2878e8;background:#eff6ff}
.replay-duration,.thumb-score{background:#111827dd}
.section-head>a,footer a{color:#2878e8}
footer{background:#fff;border-color:#e2e8f0;color:#667085}
@media (max-width:700px){.topbar{min-height:64px;height:auto;flex-wrap:wrap;padding-block:12px}.top-search{order:3;flex-basis:100%;width:100%;margin:0}.portal-shell{display:block}.sidebar{display:flex;width:100%;padding:8px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;gap:4px;scrollbar-width:thin}.side-item{flex:0 0 auto;gap:8px;padding:10px 12px;white-space:nowrap;font-size:11px}.side-item span{width:auto;font-size:15px}.side-rule,.side-title,.side-footer{display:none}.light-main{padding:22px 14px 42px}.welcome-row{align-items:flex-start;flex-wrap:wrap}.section-head{align-items:flex-start;flex-wrap:wrap;gap:8px}.card-actions{flex-wrap:wrap}.card-actions>*{flex:1 1 105px;text-align:center}}
@media (max-width:380px){.brand{font-size:20px}.top-actions{gap:6px}.light-card{padding-inline:9px}}

.top-search{display:flex;align-items:center;gap:8px}.top-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:inherit}.top-search input::placeholder{color:#a5a7aa}.match-card[hidden],.content-section[hidden],.match-search-status[hidden]{display:none!important}.match-search-status{margin:0 0 18px;color:#667085;font-size:13px}