.weblistener-card {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  max-width: 28rem;
  gap: .65rem;
  padding: .8rem;
  overflow: hidden;
  background: rgba(15, 23, 42, .68);
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 8px 28px rgba(2, 6, 23, .24);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.weblistener-brand { display:flex; align-items:center; justify-content:center; gap:.65rem; min-width:0; }
.weblistener-icon { display:inline-flex; width:2.55rem; height:2.55rem; flex:0 0 auto; overflow:hidden; border-radius:.85rem; border:1px solid rgba(248,113,113,.25); background:rgba(2,6,23,.36); }
.weblistener-icon-image { display:block; width:100%; height:100%; }
.weblistener-title { margin:0; color:#f43f4f; font-family:"EA3 Kalam",cursive; font-size:clamp(1.21rem,2.35vw,1.62rem); font-style:normal; font-weight:700; line-height:1.12; letter-spacing:-.035em; text-align:center; -webkit-text-stroke:.5px rgba(255,255,255,.92); paint-order:stroke fill; text-shadow:0 1px 3px rgba(2,6,23,.32),0 2px 12px rgba(244,63,79,.2); }
.weblistener-main { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(8.6rem,.85fr); gap:.65rem; align-items:stretch; }
.weblistener-display { display:grid; grid-template-columns:1fr; align-content:center; gap:.25rem; min-width:0; padding:.55rem .65rem; border:1px solid rgba(163,177,132,.38); border-radius:.65rem; background:linear-gradient(145deg,#b7c29a,#8f9d76); color:#172016; box-shadow:inset 0 1px 5px rgba(20,30,18,.38),0 1px 0 rgba(255,255,255,.08); font-family:"Courier New",ui-monospace,monospace; text-transform:uppercase; }
.weblistener-live-state,.weblistener-listeners,.weblistener-player-state { display:inline-flex; align-items:center; font-weight:700; letter-spacing:.055em; }
.weblistener-live-state { gap:.42rem; font-size:.72rem; white-space:nowrap; }
.weblistener-live-state::before,.weblistener-player-state::before { content:""; width:.48rem; height:.48rem; flex:0 0 auto; border-radius:50%; background:#747f72; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.weblistener-live-on::before { background:#2bd665; box-shadow:0 0 .55rem rgba(43,214,101,.75); animation:weblistener-soft-pulse 3.2s ease-in-out infinite; }
.weblistener-listeners { gap:.35rem; font-size:.69rem; }
.weblistener-listener-number { min-width:2ch; font-family:"DSEG7 Classic","Digital-7","Courier New",ui-monospace,monospace; font-size:1.02rem; font-weight:800; letter-spacing:.08em; line-height:1; text-align:right; }
.weblistener-controls { display:flex; flex-direction:column; justify-content:center; gap:.42rem; min-width:0; }
.weblistener-player-state { justify-content:center; gap:.4rem; min-height:1rem; color:#cbd5e1; font-size:.62rem; text-align:center; white-space:nowrap; }
.weblistener-player-state.is-on { color:#bbf7d0; }
.weblistener-player-state.is-on::before { background:#4ade80; box-shadow:0 0 .55rem rgba(74,222,128,.72); }
.weblistener-toggle { appearance:none; width:100%; padding:.48rem .7rem; border:1px solid rgba(96,165,250,.48); border-radius:.72rem; background:linear-gradient(135deg,rgba(37,99,235,.44),rgba(59,130,246,.2)); color:#eff6ff; cursor:pointer; font-size:.82rem; font-weight:700; line-height:1.2; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.weblistener-toggle:hover { background:linear-gradient(135deg,rgba(37,99,235,.56),rgba(59,130,246,.28)); transform:translateY(-1px); }
.weblistener-toggle:focus-visible { outline:2px solid rgba(147,197,253,.78); outline-offset:2px; }
.weblistener-toggle.is-playing { border-color:rgba(74,222,128,.48); background:linear-gradient(135deg,rgba(22,101,52,.5),rgba(34,197,94,.2)); }
.weblistener-card:hover { background:rgba(15,23,42,.68); box-shadow:0 8px 28px rgba(2,6,23,.24); }
.weblistener-card.is-listening,.weblistener-card.is-listening:hover { background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(15,23,42,.65)); box-shadow:0 8px 28px rgba(2,6,23,.22),inset 0 1px 0 rgba(255,255,255,.13); }
.weblistener-card.is-listening.is-live { border-color:rgba(74,222,128,.48); box-shadow:0 0 18px rgba(74,222,128,.12),0 8px 28px rgba(2,6,23,.22); }
@keyframes weblistener-soft-pulse { 0%,100%{opacity:.72;transform:scale(.92)} 50%{opacity:1;transform:scale(1.08)} }
@media (prefers-reduced-motion:reduce) { .weblistener-live-on::before{animation:none} .weblistener-card,.weblistener-toggle{transition:none} }
@media (max-width:767px) { .weblistener-card{max-width:none;padding:.75rem} .weblistener-main{grid-template-columns:1fr} .weblistener-display{grid-template-columns:minmax(0,1fr) auto;align-items:center} .weblistener-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(7.8rem,.72fr);align-items:center} }
@media (max-width:389px) { .weblistener-title{font-size:1.18rem} .weblistener-icon{width:2.35rem;height:2.35rem} .weblistener-player-state{font-size:.57rem} }
@font-face {
  font-family: "EA3 Kalam";
  src: url("../fonts/kalam-bold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}