:root{
	--audio-accent:#005744;
	--audio-accent-strong:#00382c;
	--audio-accent-soft:rgba(0,87,68,.08);
	--audio-on-accent:#f8fafc;
	--audio-surface:#fff;
	--audio-footer:#f5f8f7;
	--audio-line:rgba(15,23,42,.08);
	--audio-text:#0f172a;
	--audio-muted:#64748b;
	--audio-wave-rest:#e2e8e6;
	--audio-pad:clamp(1.15rem,3vw,1.85rem);
}

/* ---------- shells ---------- */
.eghbal-article-audio-shell,.eghbal-playlist{
	position:relative;
	margin:2rem 0;
	padding:var(--audio-pad);
	overflow:hidden;
	border:1px solid var(--audio-line);
	border-radius:24px;
	background:var(--audio-surface);
	box-shadow:0 14px 40px rgba(15,23,42,.06);
}
.eghbal-audio-kicker{margin:0 0 .9rem;color:var(--audio-accent);font-size:.72rem;font-weight:800;letter-spacing:.03em}
.eghbal-playlist-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.eghbal-playlist-heading .eghbal-audio-kicker{margin-bottom:.3rem}
.eghbal-playlist-heading h2{margin:0;color:var(--audio-text);font-size:clamp(1.1rem,3vw,1.45rem);font-weight:900}
.eghbal-playlist-count{display:grid;place-items:center;min-width:2.4rem;height:2.4rem;border-radius:50%;background:var(--audio-accent-soft);color:var(--audio-accent);font-weight:900}

/* ---------- item ---------- */
.eghbal-audio-item{display:flex;flex-direction:column;gap:1rem}

/* playlist: minimal single-line rows — play | waveform | title */
.eghbal-playlist .eghbal-audio-item{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--audio-line);direction:ltr}
.eghbal-playlist .eghbal-audio-item:last-child{border-bottom:0;padding-bottom:.25rem}
.eghbal-playlist .eghbal-audio-head{display:contents}
.eghbal-playlist .eghbal-audio-cover{order:0;width:46px;height:46px;border-radius:12px;box-shadow:none}
.eghbal-playlist .eghbal-audio-play-circle{width:30px;height:30px}
.eghbal-playlist .eghbal-audio-play-icon{margin-left:2px;border-top-width:5px;border-bottom-width:5px;border-left-width:8px}
.eghbal-playlist .eghbal-audio-play.is-playing .eghbal-audio-play-icon{width:9px;height:10px;margin:0;border-right-width:3px;border-left-width:3px}
.eghbal-playlist .eghbal-audio-item.is-loading .eghbal-audio-play-icon{width:14px;height:14px;margin:0;border-width:2px}
.eghbal-playlist .eghbal-audio-track{order:1;flex:1;min-width:200px}
.eghbal-playlist .eghbal-audio-copy{order:2;flex:0 0 clamp(150px,26%,280px)}
.eghbal-playlist .eghbal-audio-title{font-size:.98rem;line-height:1.7}
.eghbal-playlist .eghbal-audio-meta{display:none}
.eghbal-playlist .eghbal-audio-tools{order:3;display:none;flex-basis:100%}
.eghbal-playlist .eghbal-audio-item.is-active .eghbal-audio-tools{display:flex}
.eghbal-playlist .eghbal-audio-wave{height:32px}

.eghbal-audio-head{display:flex;align-items:center;gap:clamp(.85rem,2vw,1.15rem);direction:ltr}

/* cover + play */
.eghbal-audio-cover{position:relative;flex:0 0 auto;width:88px;height:88px;overflow:hidden;border-radius:20px;background:linear-gradient(140deg,#00694f,#00281f);box-shadow:0 10px 24px rgba(0,56,44,.18)}
.eghbal-audio-cover img{width:100%;height:100%;object-fit:cover;display:block}
.eghbal-audio-cover-fallback{position:absolute;inset:0;display:grid;place-items:center;color:rgba(248,250,252,.4)}
.eghbal-audio-cover-fallback svg{width:34px;height:34px}
.eghbal-audio-play{position:absolute;inset:0;display:grid;place-items:center;padding:0;border:0;background:rgba(3,18,14,.32);color:var(--audio-on-accent);cursor:pointer;transition:background-color .2s ease}
.eghbal-audio-play:hover{background:rgba(3,18,14,.45)}
.eghbal-audio-play-circle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--audio-accent);box-shadow:0 6px 18px rgba(0,40,31,.4);transition:transform .18s ease,background-color .18s ease}
.eghbal-audio-play:hover .eghbal-audio-play-circle{transform:scale(1.07);background:var(--audio-accent-strong)}
.eghbal-audio-play:active .eghbal-audio-play-circle{transform:scale(.95)}
.eghbal-audio-play:focus-visible{outline:3px solid rgba(0,87,68,.4);outline-offset:2px;border-radius:20px}
.eghbal-audio-play-icon{display:block;width:0;height:0;margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}
.eghbal-audio-play.is-playing .eghbal-audio-play-icon{width:12px;height:14px;margin:0;border:0;border-right:4px solid currentColor;border-left:4px solid currentColor}
.eghbal-audio-item.is-loading .eghbal-audio-play-icon{width:18px;height:18px;margin:0;border:2px solid rgba(248,250,252,.35);border-top-color:var(--audio-on-accent);border-radius:50%;animation:eghbal-audio-spin .75s linear infinite}

/* copy + meta */
.eghbal-audio-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:.4rem}
.eghbal-audio-title{display:block;overflow:hidden;max-width:100%;color:var(--audio-text);font-size:clamp(1rem,1.6vw,1.18rem);font-weight:900;line-height:1.9;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.eghbal-audio-title:hover{color:var(--audio-accent)}
.eghbal-audio-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;color:var(--audio-muted);font-size:.78rem;font-weight:600}
.eghbal-audio-meta>span{display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap}
.eghbal-audio-meta svg{width:15px;height:15px;flex:0 0 auto;color:var(--audio-accent)}
.eghbal-audio-meta .eghbal-audio-meta-num{font-variant-numeric:tabular-nums}

/* ---------- waveform track ---------- */
.eghbal-audio-track{display:flex;align-items:center;gap:.9rem;direction:ltr}
.eghbal-audio-time{min-width:2.7rem;color:var(--audio-muted);font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.eghbal-audio-wave{position:relative;flex:1;height:44px;border-radius:10px;--audio-progress:0%}
.eghbal-audio-wave:focus-within{box-shadow:0 0 0 3px var(--audio-accent-soft)}
.eghbal-audio-wave-bars{position:absolute;inset:0;display:flex;align-items:center;gap:3px;pointer-events:none}
.eghbal-audio-wave-bars span{flex:1;min-height:4px;height:calc(var(--h,.5)*100%);border-radius:99px;background:var(--audio-wave-rest)}
@media(max-width:560px){.eghbal-audio-wave-bars span:nth-child(3n){display:none}}
.eghbal-audio-wave-bars.is-fill{clip-path:inset(0 calc(100% - var(--audio-progress)) 0 0)}
.eghbal-audio-wave-bars.is-fill span{background:var(--audio-accent)}
input[data-audio-seek]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;opacity:0;cursor:pointer}

/* ---------- tools ---------- */
.eghbal-audio-tools{display:flex;align-items:center;gap:.45rem;direction:ltr}
.eghbal-audio-tool{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;height:34px;min-width:34px;padding:0 .6rem;border:1px solid var(--audio-line);border-radius:999px;background:transparent;color:var(--audio-muted);cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease}
.eghbal-audio-tool svg{width:14px;height:14px}
.eghbal-audio-tool:hover{border-color:rgba(0,87,68,.35);background:var(--audio-accent-soft);color:var(--audio-accent)}
.eghbal-audio-tool:active{transform:scale(.96)}
.eghbal-audio-tool:focus-visible{outline:3px solid rgba(0,87,68,.28);outline-offset:2px}
.eghbal-audio-speed strong{min-width:24px;font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums}

/* standalone: tools become a full-bleed footer strip */
.eghbal-audio-item.is-standalone .eghbal-audio-tools{
	margin:.35rem calc(-1*var(--audio-pad)) calc(-1*var(--audio-pad));
	padding:.75rem var(--audio-pad);
	border-top:1px solid var(--audio-line);
	background:var(--audio-footer);
}

/* playing pulse */
.eghbal-audio-eq{display:inline-flex;align-items:center;gap:3px;height:16px;margin-inline-start:auto;opacity:0;transition:opacity .25s ease}
.eghbal-audio-item.is-playing .eghbal-audio-eq{opacity:1}
.eghbal-audio-eq span{width:3px;height:30%;border-radius:99px;background:var(--audio-accent);animation:eghbal-audio-eq 1s ease-in-out infinite}
.eghbal-audio-eq span:nth-child(2){animation-delay:.18s}
.eghbal-audio-eq span:nth-child(3){animation-delay:.36s}
.eghbal-audio-eq span:nth-child(4){animation-delay:.54s}

/* ---------- misc ---------- */
.eghbal-audio-more{display:block;margin:1rem auto 0;padding:.7rem 1.2rem;border:1px solid rgba(0,87,68,.25);border-radius:999px;background:transparent;color:var(--audio-accent);font-weight:800;cursor:pointer}
.eghbal-audio-more:hover{background:var(--audio-accent-soft)}
.eghbal-audio-more[hidden]{display:none}
.eghbal-audio-sentinel{height:1px}
.eghbal-audio-item.is-error{opacity:.65}
.eghbal-audio-item.is-error:after{color:#dc2626;font-size:.75rem;font-weight:600;content:attr(data-error)}

/* ---------- dark ---------- */
.dark{
	--audio-accent:#34d399;
	--audio-accent-strong:#6ee7b7;
	--audio-accent-soft:rgba(52,211,153,.12);
	--audio-on-accent:#03271d;
	--audio-surface:rgba(15,23,42,.88);
	--audio-footer:rgba(30,41,59,.55);
	--audio-line:rgba(255,255,255,.08);
	--audio-text:#f1f5f9;
	--audio-muted:#94a3b8;
	--audio-wave-rest:#334155;
}
.dark .eghbal-article-audio-shell,.dark .eghbal-playlist{box-shadow:0 20px 55px rgba(0,0,0,.32)}
.dark .eghbal-audio-play{background:rgba(2,10,8,.42);color:var(--audio-on-accent)}
.dark .eghbal-audio-play-circle{box-shadow:0 6px 18px rgba(0,0,0,.45)}
.dark .eghbal-audio-item.is-loading .eghbal-audio-play-icon{border-color:rgba(3,39,29,.35);border-top-color:var(--audio-on-accent)}
.dark .eghbal-audio-tool:hover{border-color:rgba(52,211,153,.4)}
.dark .eghbal-audio-item.is-error:after{color:#f87171}

@keyframes eghbal-audio-spin{to{transform:rotate(360deg)}}
@keyframes eghbal-audio-eq{0%,100%{height:30%}50%{height:100%}}

/* ---------- responsive ---------- */
@media(max-width:760px){
	.eghbal-article-audio-shell,.eghbal-playlist{border-radius:18px}
	.eghbal-audio-cover{width:68px;height:68px;border-radius:16px}
	.eghbal-audio-play-circle{width:38px;height:38px}
	.eghbal-audio-wave{height:36px}
	.eghbal-audio-item.is-standalone .eghbal-audio-title{white-space:normal;font-size:.98rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
	.eghbal-playlist .eghbal-audio-cover{width:42px;height:42px}
	.eghbal-playlist .eghbal-audio-copy{order:1;flex:1;min-width:0}
	.eghbal-playlist .eghbal-audio-track{order:2;flex-basis:100%;min-width:0}
	.eghbal-audio-meta{gap:.3rem .8rem;font-size:.72rem}
	.eghbal-audio-track{gap:.6rem}
	.eghbal-audio-tools{flex-wrap:wrap}
}
@media(max-width:420px){
	.eghbal-audio-time{min-width:2.4rem;font-size:.68rem}
	.eghbal-playlist-count{min-width:2.1rem;height:2.1rem}
}
@media(prefers-reduced-motion:reduce){
	.eghbal-audio-play-circle,.eghbal-audio-tool{transition:none}
	.eghbal-audio-item.is-loading .eghbal-audio-play-icon{animation:none}
	.eghbal-audio-eq span{animation:none;height:70%}
}
