:root{
  --color-primary:#b30000;
  --color-accent:#c0c0c0;
  --color-bg:#0a0a0a;
  --color-card:#151515;
  --color-text:#e8e8e8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 50% -200px, #1a1a1a 0%, var(--color-bg) 40%, #000 100%);
  color:var(--color-text);
}

a{color:var(--color-accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:14px}

.header{
  background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
  border-bottom:1px solid #222;
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
}
.brand{
  display:flex; align-items:center; gap:14px; padding:12px 0;
}
.logo{
  width:56px;height:56px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, #ff3b3b, #5a0000 60%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.15), 0 10px 30px rgba(179,0,0,.3);
  display:grid; place-items:center; font-weight:800; color:#fff;
  text-shadow: 0 1px 0 #550000, 0 0 12px rgba(255,80,80,.6);
}
.brand h1{margin:0;font-size:22px;letter-spacing:.4px}
.brand small{display:block; opacity:.8}

.nav{
  display:flex; gap:10px; flex-wrap:wrap; padding:8px 0 14px;
}
.nav a{
  padding:10px 14px; border-radius:999px;
  background: linear-gradient(180deg, #1c1c1c, #111);
  border:1px solid #262626;
  box-shadow: 0 1px 0 #2a2a2a, inset 0 -2px 6px rgba(0,0,0,.35);
  font-weight:600;
}
.nav a.active, .nav a:hover{
  background: linear-gradient(180deg, var(--color-primary), #5d0000);
  border-color:#6a0000;
  color:#fff;
  text-shadow:0 1px 0 #330000;
}

.banner{
  position:relative;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  border:1px solid #2a2a2a;
  box-shadow: 0 12px 35px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.banner .flag{
  height:72px;
  background: linear-gradient(180deg, #ae0000, #6b0000), 
              linear-gradient(0deg, #fff, #fff), 
              linear-gradient(180deg, #003399, #001a66);
  background-size: 100% 33.33%, 100% 33.34%, 100% 33.33%;
  background-position: 0 0, 0 33.33%, 0 66.66%;
  background-repeat:no-repeat;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
  clip-path: path("M0,50 C200,20 400,80 600,50 C800,20 1000,80 1200,50 L1200,0 L0,0 Z");
}
.banner .inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px;
}
.open247{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:800;
  padding:6px 12px; border-radius:10px;
  background: radial-gradient(circle at 30% 20%, #ff5a5a, #4a0000 70%);
  box-shadow: 0 6px 18px rgba(179,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  text-shadow:0 1px 0 #3a0000, 0 0 8px rgba(255,120,120,.6);
}
.title{
  text-align:center; flex:1;
}
.title .main{font-size:28px; font-weight:900; color:#ffcccc; text-shadow:0 1px 0 #3a0000, 0 0 12px rgba(255,80,80,.5)}
.title .sub{font-size:14px; color:#c8c8c8}

.layout{
  display:grid; gap:16px; margin-top:16px;
  grid-template-columns: 1fr; /* mobile */
}
@media(min-width:900px){
  .layout{grid-template-columns: var(--left,24%) var(--middle,52%) var(--right,24%)}
}
.card{
  background: linear-gradient(180deg, #131313, #0d0d0d);
  border:1px solid #222; border-radius:16px; padding:14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.card h3{margin:0 0 10px 0; font-size:16px; letter-spacing:.3px}

.player{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap
}
.player button{
  padding:12px 16px; border-radius:12px; border:0;
  background: linear-gradient(180deg, var(--color-primary), #5d0000);
  color:#fff; font-weight:800; cursor:pointer;
  box-shadow: 0 6px 18px rgba(179,0,0,.35);
}
.player .status{opacity:.85}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:#1f1f1f; border:1px solid #292929
}
.badge.live{background:#5d0000; color:#fff; border-color:#6a0000}

.list{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.list li{display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; background:#121212; border:1px solid #1f1f1f}

.form label{display:block; font-weight:700; margin-top:10px}
.form input, .form textarea, .form select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid #2a2a2a; background:#0f0f0f; color:var(--color-text)
}
.form button{margin-top:12px}

.footer{
  margin:24px 0 40px; opacity:.8; font-size:13px; text-align:center
}