.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); }
.info-ticker { display:flex; align-items:center; width:min(100%,clamp(32rem,48vw,42rem)); min-width:0; height:2.45rem; overflow:hidden; border:1px solid rgba(34,211,238,.65); border-radius:.65rem; background:linear-gradient(120deg,rgba(2,6,23,.98),rgba(8,47,73,.9)); box-shadow:inset 0 0 14px rgba(8,145,178,.16),0 0 12px rgba(34,211,238,.13); color:#67e8f9; }
.info-ticker__viewport { position:relative; display:block; min-width:0; height:100%; flex:1 1 auto; overflow:hidden; }
.info-ticker__message { position:absolute; top:50%; left:100%; display:block; width:max-content; padding-right:var(--info-ticker-gap,3rem); white-space:nowrap; transform:translate3d(0,-50%,0); will-change:transform; color:#67e8f9; font-family:"Courier New",ui-monospace,monospace; font-size:.92rem; font-weight:700; letter-spacing:.08em; line-height:1; text-shadow:0 0 .55rem rgba(34,211,238,.7); animation:info-ticker-overlap var(--info-ticker-cycle-duration,40.5s) linear infinite; animation-delay:var(--info-ticker-delay,0s); }
@keyframes info-ticker-overlap { 0% { transform:translate3d(0,-50%,0); } 44.444444% { transform:translate3d(calc(-100% - var(--info-ticker-viewport-width,0px) - var(--info-ticker-tail,0px)),-50%,0); } 100% { transform:translate3d(calc(-100% - var(--info-ticker-viewport-width,0px) - var(--info-ticker-tail,0px)),-50%,0); } }
@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} .info-ticker__message{position:static; height:100%; display:flex; align-items:center; padding:0 .7rem; transform:none; animation:none; font-size:.76rem} }
@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:767px) { .info-ticker{width:100%;max-width:none;height:2.3rem} .info-ticker__message{font-size:.83rem;letter-spacing:.055em} }
@media (max-width:389px) { .weblistener-title{font-size:1.18rem} .weblistener-icon{width:2.35rem;height:2.35rem} .weblistener-player-state{font-size:.57rem} .info-ticker{height:2.2rem} .info-ticker__message{font-size:.76rem;letter-spacing:.04em} }

/* DASH-2.26: compact SDR directory following the dashboard panel vocabulary. */
.sdr-ea3-card{display:flex;flex-direction:column;min-width:0;padding:.46rem;overflow:hidden}
.sdr-ea3-heading{flex:0 0 auto;min-width:0;padding:.12rem .24rem .27rem}
.sdr-ea3-heading-main{display:flex;align-items:center;min-width:0;gap:.22rem;color:#f0f9ff;font-size:.72rem;font-weight:800;letter-spacing:.045em;line-height:1;white-space:nowrap}
.sdr-ea3-heading-icon{width:.92rem;height:.92rem;flex:0 0 auto;color:#67e8f9}
.sdr-ea3-heading-separator{flex:0 0 auto;color:rgba(186,230,253,.58);font-size:.65rem;font-weight:600}
.sdr-ea3-heading-subtitle{min-width:0;overflow:hidden;color:rgba(224,242,254,.64);font-size:.54rem;font-weight:600;letter-spacing:.005em;text-overflow:ellipsis}
.sdr-ea3-panel{display:flex;flex:1 1 auto;min-height:0;min-width:0;flex-direction:column;padding:.25rem .45rem .22rem;border:1px solid rgba(255,255,255,.09);border-radius:.62rem;background:rgba(15,23,42,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.sdr-ea3-rows{display:grid;min-width:0;height:100%}
.sdr-ea3-row{display:flex;align-items:center;min-width:0;min-height:1.22rem;padding:.055rem .14rem;border-bottom:1px solid rgba(148,163,184,.14);border-radius:.3rem;color:rgba(240,249,255,.91);font-size:.64rem;font-weight:700;letter-spacing:.014em;line-height:1;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.sdr-ea3-row:last-child{border-bottom-color:transparent}
.sdr-ea3-row:hover{border-bottom-color:rgba(103,232,249,.36);background:rgba(14,116,144,.2);color:#ecfeff;box-shadow:inset 0 0 0 1px rgba(103,232,249,.16)}
.sdr-ea3-row:focus-visible{outline:2px solid rgba(103,232,249,.85);outline-offset:1px;background:rgba(14,116,144,.22)}
@media (hover:none),(pointer:coarse){.sdr-ea3-row:active,.sdr-ea3-row.sdr-ea3-tap-active{border-bottom-color:rgba(103,232,249,.8)!important;background-color:rgba(14,116,144,.42)!important;color:#ecfeff!important;box-shadow:inset 0 0 0 1px rgba(103,232,249,.6),0 0 .45rem rgba(34,211,238,.18)!important}.sdr-ea3-row:active .sdr-ea3-row-icon,.sdr-ea3-row:active .sdr-ea3-chevron,.sdr-ea3-row.sdr-ea3-tap-active .sdr-ea3-row-icon,.sdr-ea3-row.sdr-ea3-tap-active .sdr-ea3-chevron{color:#a5f3fc!important;opacity:1}.sdr-ea3-row:active .sdr-ea3-row-name,.sdr-ea3-row.sdr-ea3-tap-active .sdr-ea3-row-name{color:#ecfeff!important}}
.sdr-ea3-row-icon{width:.76rem;height:.76rem;margin-right:.34rem;flex:0 0 auto;color:#67e8f9}
.sdr-ea3-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdr-ea3-chevron{width:.74rem;height:.74rem;margin-left:auto;flex:0 0 auto;color:#67e8f9;opacity:.88}
@media (max-width:767px){.sdr-ea3-card{height:142px;padding:.38rem}.sdr-ea3-heading{padding:.08rem .12rem .18rem}.sdr-ea3-heading-main{gap:.18rem;font-size:.65rem}.sdr-ea3-heading-icon{width:.78rem;height:.78rem}.sdr-ea3-heading-separator{font-size:.57rem}.sdr-ea3-heading-subtitle{font-size:.47rem}.sdr-ea3-panel{padding:.18rem .34rem .16rem}.sdr-ea3-row{min-height:.92rem;padding:.025rem .08rem;font-size:.55rem}.sdr-ea3-row-icon{width:.64rem;height:.64rem;margin-right:.27rem}.sdr-ea3-chevron{width:.66rem;height:.66rem}}
@media (max-width:389px){.sdr-ea3-card{height:142px;padding:.34rem}.sdr-ea3-heading-main{font-size:.61rem}.sdr-ea3-heading-subtitle{font-size:.44rem}.sdr-ea3-panel{padding:.16rem .3rem .14rem}.sdr-ea3-row{min-height:.9rem;font-size:.53rem}.sdr-ea3-row-icon{margin-right:.24rem}}
@media (prefers-reduced-motion:reduce){.sdr-ea3-row{transition:none}}
@font-face {
  font-family: "EA3 Kalam";
  src: url("../fonts/kalam-bold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* DASH-2.29: five-SDR composition; outer card and dashboard grid remain unchanged. */
.sdr-ea3-rows{grid-template-rows:repeat(5,minmax(0,1fr));align-content:center;gap:.035rem}
.sdr-ea3-row{min-height:1.42rem;padding:.09rem .22rem;font-size:.69rem;letter-spacing:.018em}
.sdr-ea3-row-icon{margin-right:.4rem}
@media (max-width:767px){.sdr-ea3-rows{gap:.03rem}.sdr-ea3-row{min-height:1.04rem;padding:.05rem .12rem;font-size:.59rem;letter-spacing:.012em}.sdr-ea3-row-icon{margin-right:.3rem}}
@media (max-width:389px){.sdr-ea3-row{min-height:1rem;padding:.045rem .1rem;font-size:.57rem}.sdr-ea3-row-icon{margin-right:.27rem}}