*{box-sizing:border-box}

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

.topbar{
  background:#ffffff;
  color:#111;
  padding:20px 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:4px solid #e30613;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
}

.kicker{
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#e30613;
  font-weight:bold;
}

h1{
  margin:4px 0;
  font-size:34px;
  line-height:1;
  color:#111;
}

.topbar p{
  margin:0;
  color:#555;
}

.live-pill{
  background:#e30613;
  color:#fff;
  padding:12px 18px;
  border-radius:999px;
  font-weight:bold;
}

main{
  max-width:1240px;
  margin:auto;
  padding:18px;
}

.panel{
  background:#fff;
  border-radius:18px;
  padding:16px;
  margin-bottom:18px;
  border:1px solid #dde2ea;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.panel h2{
  margin:0 0 14px;
  color:#111;
  border-bottom:3px solid #e30613;
  padding-bottom:8px;
  font-size:22px;
}

.hero-panel{
  border-top:5px solid #e30613;
}

.live-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.match{
  background:#ffffff;
  color:#111;
  border:2px solid #111;
  border-radius:18px;
  padding:16px;
  min-height:250px;
}

.match-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color:#555;
  font-size:13px;
  margin-bottom:12px;
}

.badge{
  background:#e30613;
  color:white;
  border-radius:999px;
  padding:5px 10px;
  font-weight:bold;
}

.teams{
  display:grid;
  gap:10px;
  text-align:center;
}

.teams div{
  font-size:20px;
}

.teams strong{
  display:block;
  color:#e30613;
  font-size:46px;
  line-height:1;
}

.goal-line{
  margin:14px 0;
  color:#111;
  background:#fff3cd;
  border-left:5px solid #ffc400;
  padding:10px;
  border-radius:10px;
  font-size:14px;
  font-weight:bold;
  line-height:1.35;
}

.mini-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:12px;
}

.mini-stats span{
  background:#f2f4f7;
  padding:9px;
  border-radius:10px;
  font-size:12px;
  color:#222;
}

.mini-stats b{
  color:#e30613;
}

.star{
  background:#111;
  color:#fff;
  border-radius:12px;
  padding:10px;
  margin-top:12px;
  font-weight:bold;
  font-size:13px;
}

.grid{
  display:grid;
  grid-template-columns:1.45fr .75fr;
  gap:18px;
}

.group{
  border:1px solid #dde2ea;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  background:#fff;
}

.group summary{
  cursor:pointer;
  background:#f6f7f9;
  color:#111;
  padding:12px;
  font-weight:bold;
  border-bottom:1px solid #dde2ea;
}

table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

th{
  background:#111;
  color:#fff;
  padding:8px;
  text-align:left;
}

td{
  padding:9px 8px;
  border-bottom:1px solid #edf0f3;
}

td:first-child{
  font-weight:bold;
  width:32px;
}

td:nth-child(7){
  font-size:18px;
  color:#e30613;
}

.compact td{
  vertical-align:middle;
}

.compact .big{
  font-size:30px;
  color:#e30613;
  text-align:center;
}

small{
  display:block;
  color:#666;
  margin-top:2px;
}

em{
  padding:5px 8px;
  border-radius:999px;
  font-style:normal;
  font-size:12px;
  white-space:nowrap;
}

.ok{background:#0a8f45;color:white}
.warn{background:#ffd23f;color:#111}
.danger{background:#e30613;color:white}

.fixture{
  border-left:5px solid #e30613;
  background:#f7f8fa;
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
}

.fixture b{
  display:block;
  color:#e30613;
  margin-bottom:4px;
}

.fixture span{
  display:block;
  font-weight:bold;
}

.video-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.video-card{
  background:#fff;
  color:#111;
  border:1px solid #dde2ea;
  border-radius:14px;
  padding:12px;
}

.video-card iframe{
  width:100%;
  height:230px;
  border:0;
  border-radius:10px;
  background:#000;
  margin-bottom:10px;
}

.video-card b{
  display:block;
}

.video-card small{
  color:#666;
}

.update{
  border-left:5px solid #e30613;
  background:#f7f8fa;
  padding:12px;
  border-radius:10px;
  margin-bottom:10px;
}

.update p{
  margin:6px 0;
  line-height:1.35;
}

.update small{
  color:#777;
}

.source-chip{
  display:inline-block;
  background:#eef1f5;
  color:#333;
  border:1px solid #d5dbe4;
  padding:5px 8px;
  border-radius:999px;
  font-size:12px;
  margin:3px;
}

.social-card{
  border-left:5px solid #111;
  background:#fff;
  padding:12px;
  border-radius:12px;
  margin-bottom:10px;
}

.social-card b{
  color:#e30613;
}

.log-mini{
  position:fixed;
  right:12px;
  bottom:12px;
  width:360px;
  max-width:calc(100vw - 24px);
  background:#050505;
  color:#8cffb3;
  border:1px solid #00b050;
  border-radius:12px;
  overflow:hidden;
  z-index:9999;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.log-mini h3{
  margin:0;
  padding:8px 10px;
  background:#001b0b;
  color:#8cffb3;
  font-size:12px;
  text-transform:uppercase;
}

.log-mini pre{
  margin:0;
  height:90px;
  overflow:auto;
  padding:10px;
  font-size:10px;
  line-height:1.35;
  white-space:pre-wrap;
}

@media(max-width:950px){
  .live-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
}

@media(max-width:650px){
  .topbar{
    display:block;
    padding:18px;
  }

  h1{font-size:28px}

  .topbar p{font-size:14px}

  .live-pill{
    display:inline-block;
    margin-top:12px;
  }

  main{padding:12px}

  .panel{
    padding:12px;
    border-radius:14px;
  }

  table{font-size:12px}

  th,td{padding:7px 5px}

  .teams strong{font-size:42px}

  .video-card iframe{height:200px}

  .log-mini{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
  }

  .log-mini pre{
    height:70px;
  }
}