:root{
  --blue:#1b2c5d;
  --blue-2:#11254d;
  --blue-3:#0b1835;
  --red:#ff5c57;
  --red-2:#ff6f69;
  --bg:#edf1f7;
  --card:#ffffff;
  --text:#142344;
  --muted:#61708e;
  --line:rgba(27,44,93,.12);
  --shadow:0 20px 55px rgba(17,37,77,.14);
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='38' viewBox='0 0 86 38'%3E%3Cg fill='none' stroke='%23d9deea' stroke-width='1.3'%3E%3Cpath d='M10 19c5-2 8-5 10-10 2 5 5 8 10 10-5 2-8 5-10 10-2-5-5-8-10-10Z'/%3E%3Cpath d='M43 19c5-2 8-5 10-10 2 5 5 8 10 10-5 2-8 5-10 10-2-5-5-8-10-10Z'/%3E%3Cpath d='M76 19c5-2 8-5 10-10 2 5 5 8 10 10-5 2-8 5-10 10-2-5-5-8-10-10Z'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Cairo",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left,rgba(255,92,87,.08),transparent 20%),
    linear-gradient(180deg,#f5f7fb 0%,#eef2f8 100%);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input{font:inherit}
button{border:0}

.topbar{padding:20px 20px 0}
.topbar__inner{
  max-width:1200px;
  margin:auto;
  min-height:78px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:28px;
  background:linear-gradient(135deg,var(--blue-3),var(--blue));
  box-shadow:var(--shadow);
}
.brand img{width:150px;height:auto}
.topbar__side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.live-chip,.meta-chip{
  min-height:40px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:16px;
  color:#fff;
  font-size:.88rem;
  font-weight:800;
}
.live-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}
.live-chip i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px rgba(255,92,87,.15)}
.meta-chip{background:var(--red)}

.ornament-line{
  max-width:1200px;
  height:44px;
  margin:18px auto 6px;
  opacity:.95;
  background-image:var(--pattern);
  background-repeat:repeat-x;
  background-position:center;
}

.stage{
  min-height:calc(100vh - 150px);
  display:flex;
  align-items:center;
  padding:18px 20px 34px;
}
.layout{
  width:min(1200px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:430px minmax(0,1fr);
  gap:24px;
}

.box-cut{
  clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  border-radius:28px;
}
.box-cut-small{
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  border-radius:18px;
}
.box-cut-tiny{
  clip-path:polygon(0 9px,9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  border-radius:14px;
}

.schedule-card,
.player-card{
  overflow:hidden;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
}
.schedule-card{padding:26px 22px}
.schedule-card__head{margin-bottom:18px}
.date-ribbon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 20px;
  color:#fff;
  background:var(--red);
  font-size:1rem;
  font-weight:900;
  letter-spacing:.02em;
}
.schedule-card h1{
  margin:16px 0 6px;
  font-size:2rem;
  line-height:1.3;
  color:var(--blue);
}
.schedule-card p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
}
.program-list{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.program-item{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  background:#f5f7fb;
  border:1px solid var(--line);
}
.program-item.is-next{background:rgba(255,92,87,.08);border-color:rgba(255,92,87,.18)}
.program-time{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  font-size:1rem;
  font-weight:900;
}
.program-item.is-next .program-time{background:linear-gradient(135deg,var(--red),var(--red-2))}
.program-body strong{
  display:block;
  color:var(--blue);
  font-size:1rem;
  font-weight:900;
  line-height:1.5;
}
.program-body span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.6;
}
.program-note{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--red);
  font-size:.74rem;
  font-weight:800;
}
.program-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}

.player-card{display:grid;grid-template-columns:44% 56%;min-height:610px}
.player-visual{position:relative;min-height:100%;background:var(--blue-2)}
.player-visual img{width:100%;height:100%;object-fit:cover}
.player-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,24,53,.92),rgba(11,24,53,.25));
}
.player-badge{
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  min-height:36px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:.85rem;
  font-weight:800;
}
.player-content{
  padding:34px 28px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.player-content::before{
  content:"";
  position:absolute;
  left:24px;
  top:18px;
  width:220px;
  height:36px;
  opacity:.75;
  background-image:var(--pattern);
  background-repeat:repeat-x;
  background-size:auto 100%;
}
.section-mini-title{color:var(--red);font-size:.88rem;font-weight:900;margin-bottom:8px}
.now-title{
  margin:0;
  color:var(--blue);
  font-size:2.1rem;
  line-height:1.35;
  font-weight:900;
}
.now-subtitle{margin:10px 0 0;color:var(--muted);font-size:1rem;line-height:1.8}

.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:26px 0 20px;
}
.stat{
  min-height:96px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#f5f7fb;
  border:1px solid var(--line);
}
.stat span{color:var(--muted);font-size:.78rem;font-weight:700}
.stat strong{
  margin-top:8px;
  color:var(--blue);
  font-size:1rem;
  line-height:1.5;
  font-weight:900;
}
.controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.play-btn{
  width:86px;height:86px;flex:0 0 auto;
  display:grid;place-items:center;
  color:#fff;cursor:pointer;
  border-radius:24px;
  background:linear-gradient(135deg,var(--red),var(--red-2));
  box-shadow:0 18px 35px rgba(255,92,87,.24);
}
.play-btn svg{width:34px;height:34px}
.icon-pause{display:none}
.play-btn.is-playing .icon-play{display:none}
.play-btn.is-playing .icon-pause{display:block}
.volume-wrap{
  flex:1;
  min-height:86px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  background:#f5f7fb;
  border:1px solid var(--line);
}
.volume-wrap span{color:var(--muted);font-size:.82rem;font-weight:800}
.volume{width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:999px;background:linear-gradient(to left,var(--red) 75%,rgba(27,44,93,.15) 75%)}
.volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--red);cursor:pointer}
.volume::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--red);cursor:pointer}
.player-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.action-btn{
  min-height:46px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--blue);
  font-size:.88rem;
  font-weight:800;
}
.action-btn--ghost{background:#eef2f8;color:var(--blue);border:1px solid var(--line)}

@media (max-width: 960px){
  .layout{grid-template-columns:1fr}
  .player-card{grid-template-columns:1fr;min-height:auto}
  .player-visual{height:280px}
}
@media (max-width: 640px){
  .topbar{padding:14px 14px 0}
  .topbar__inner{padding:14px 16px;border-radius:22px;flex-direction:column}
  .brand img{width:132px}
  .stage{padding:14px 14px 24px}
  .schedule-card{padding:20px 16px}
  .date-ribbon{width:100%;justify-content:center;font-size:.95rem}
  .schedule-card h1{font-size:1.6rem}
  .program-item{grid-template-columns:78px minmax(0,1fr)}
  .player-content{padding:24px 18px}
  .now-title{font-size:1.7rem}
  .stats-row{grid-template-columns:1fr}
  .controls{flex-direction:column;align-items:stretch}
  .play-btn{width:100%;height:74px}
  .volume-wrap{width:100%;min-height:auto}
  .player-actions{flex-direction:column}
  .action-btn{width:100%}
}