:root{
  --bg:#0A1614;
  --panel:#122421;
  --line:rgba(255,255,255,.08);
  --ink:#F8FAFC;
  --mute:#95A8A3;
  --accent:#F08A4B;
  --teal:#2DD4BF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:"Plus Jakarta Sans", system-ui, sans-serif;
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(232,99,28,.16), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(15,158,150,.14), transparent 50%),
    var(--bg);
  color:var(--ink);
  overflow:hidden;
}
.ad-shell{min-height:100%; display:flex; flex-direction:column; padding:28px 32px 18px;}
.ad-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
.ad-brand{display:flex; align-items:center; gap:14px;}
.ad-brand img{
  width:56px; height:56px; object-fit:contain; border-radius:12px;
  background:#fff; border:1px solid rgba(255,255,255,.2); padding:0;
}
.ad-brand-name{font-size:22px; font-weight:800; letter-spacing:-.03em;}
.ad-brand-sub{font-size:13px; color:var(--mute); font-weight:600; margin-top:2px;}
.ad-clock{font-size:28px; font-weight:700; letter-spacing:.02em; color:var(--accent);}
.ad-audio-status{
  margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#F59E0B; text-align:right;
}
.ad-audio-status.is-on{color:var(--teal);}
.ad-main{flex:1; display:grid; grid-template-columns:1.4fr 1fr; gap:20px; min-height:0;}
.ad-now{
  background:linear-gradient(160deg, #163532, #0F1E1B 70%);
  border:1px solid var(--line); border-radius:28px; padding:36px 32px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  position:relative; overflow:hidden;
}
.ad-now::before{
  content:""; position:absolute; inset:-40% auto auto -20%; width:60%; height:60%;
  background:radial-gradient(circle, rgba(232,99,28,.18), transparent 70%);
  pointer-events:none;
}
.ad-now-label{
  font-size:14px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin-bottom:18px;
}
.ad-now-no{
  font-size:clamp(56px, 9vw, 104px); font-weight:800; letter-spacing:-.04em; line-height:1;
  color:#fff; text-shadow:0 10px 40px rgba(0,0,0,.35);
}
.ad-now-plat{margin-top:18px; font-size:clamp(22px, 3.4vw, 36px); font-weight:700; color:var(--teal);}
.ad-now-name{margin-top:10px; font-size:20px; font-weight:600; color:var(--ink);}
.ad-now-unit{margin-top:6px; font-size:16px; color:var(--mute); font-weight:500;}
.ad-now.flash{
  animation:adFlash .9s ease;
  border-color:rgba(232,99,28,.55);
}
@keyframes adFlash{
  0%,100%{ box-shadow:0 20px 60px rgba(0,0,0,.35); }
  40%{ box-shadow:0 0 0 4px rgba(232,99,28,.35), 0 20px 80px rgba(232,99,28,.25); }
}
.ad-side{display:flex; flex-direction:column; gap:16px; min-height:0;}
.ad-panel{
  flex:1; background:var(--panel); border:1px solid var(--line); border-radius:22px;
  padding:16px 16px 12px; min-height:0; display:flex; flex-direction:column;
}
.ad-panel-head{
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mute);
  margin-bottom:12px; display:flex; justify-content:space-between; align-items:center;
}
.ad-panel-head span{
  background:rgba(255,255,255,.06); color:var(--ink); border-radius:999px; padding:3px 10px; font-size:12px;
}
.ad-list{overflow:auto; display:flex; flex-direction:column; gap:8px; min-height:0;}
.ad-item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line);
}
.ad-item .no{font-weight:800; font-size:15px;}
.ad-item .meta{font-size:12px; color:var(--mute); text-align:right;}
.ad-foot{margin-top:14px; font-size:12px; color:var(--mute); text-align:center;}
.ad-unlock{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(10,22,20,.72); backdrop-filter:blur(4px); cursor:pointer;
}
.ad-unlock[hidden]{display:none!important;}
.ad-unlock-card{
  background:linear-gradient(160deg,#163532,#0F1E1B); border:1px solid rgba(232,99,28,.45);
  border-radius:18px; padding:22px 28px; text-align:center; box-shadow:0 16px 48px rgba(0,0,0,.4);
  max-width:min(92vw,420px);
}
.ad-unlock-card strong{display:block; font-size:18px; margin-bottom:6px; color:#fff;}
.ad-unlock-card span{font-size:14px; color:var(--mute); font-weight:600;}
@media (max-width: 900px){
  .ad-main{grid-template-columns:1fr;}
  .ad-shell{padding:18px;}
  .ad-clock{font-size:22px;}
}