/**
 * TellersTech Ship It Weekly Shared Styles
 * Styles shared across SIW landing, episode, and news pages
 * Version: 1.0.87
 */

/* SIW-specific color override to match cover art */
:root{--blue:#4DA2D0}

/* Gradient text animation */
@keyframes gradientMove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Universal lightbox for any image */
img.lightbox-img{cursor:zoom-in;transition:transform .3s}
@media(hover:hover){img.lightbox-img:hover{transform:scale(1.02)}}
.tt-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10000;display:none;align-items:center;justify-content:center;cursor:zoom-out}
.tt-lightbox.active{display:flex}
.tt-lightbox img{max-width:90vw;max-height:90vh;border-radius:16px;box-shadow:0 0 60px rgba(0,0,0,.5)}

/* Copy toast notification */
.copy-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(15,23,42,.98);border:1px solid var(--blue);color:var(--text);padding:14px 24px;border-radius:12px;font-size:.95rem;font-weight:500;z-index:10001;opacity:0;transition:all .3s ease;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.copy-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
body:has(.mini-player.visible) .copy-toast{bottom:180px}
@media(max-width:768px){.copy-toast{bottom:80px;padding:12px 20px;font-size:.9rem}body:has(.mini-player.visible) .copy-toast{bottom:160px}}

/* Button styles */
.btn{padding:14px 28px;border-radius:12px;font-size:1rem;font-weight:600;text-decoration:none!important;transition:all .3s;display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff!important;box-shadow:0 4px 20px rgba(14,165,233,.3)}
.btn-primary:focus,.btn-primary:active{outline:none;box-shadow:0 4px 20px rgba(14,165,233,.3)}
.btn-sponsor{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff!important;box-shadow:0 4px 20px rgba(139,92,246,.3)}
.btn-sponsor:focus,.btn-sponsor:active{outline:none;box-shadow:0 4px 20px rgba(139,92,246,.3)}
@media(hover:hover){
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(14,165,233,.4)}
.btn-sponsor:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(139,92,246,.4)}
}
.btn-sm{padding:10px 18px;font-size:.9rem}

/* Platform buttons */
.platform-btn{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--card);border:1px solid rgba(14,165,233,.08);border-radius:12px;color:var(--text)!important;text-decoration:none!important;font-size:.95rem;font-weight:500;transition:all .3s;cursor:pointer;font-family:inherit;outline:none;-webkit-tap-highlight-color:transparent}
.platform-btn:focus,.platform-btn:active{outline:none;background:var(--card);border-color:rgba(14,165,233,.08)}
@media(hover:hover){.platform-btn:hover{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.3);transform:translateY(-2px)}}
.platform-btn .icon{width:24px;height:24px;flex-shrink:0}
.platform-btn .icon svg{width:24px;height:24px}

/* Platform expand/collapse */
.platform-more{margin-top:10px;max-width:800px;margin-left:auto;margin-right:auto}
.platform-grid.secondary{display:none;margin-bottom:10px;grid-template-columns:repeat(4,1fr);gap:10px}
.platform-more.expanded .platform-grid.secondary{display:grid}
@media(max-width:768px){.platform-grid.secondary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.platform-grid.secondary{grid-template-columns:1fr}}
.platform-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px;background:transparent;border:none;border-radius:8px;color:var(--dim);font-size:.85rem;font-weight:400;cursor:pointer;transition:all .3s;outline:none;-webkit-tap-highlight-color:transparent}
.platform-toggle:focus,.platform-toggle:active{outline:none;background:transparent}
@media(hover:hover){.platform-toggle:hover{background:rgba(14,165,233,.1);color:var(--text)}}
.platform-more.expanded .platform-toggle,.platform-more.expanded .platform-toggle:focus,.platform-more.expanded .platform-toggle:active{background:rgba(14,165,233,.1);color:var(--text)}
.platform-toggle .toggle-icon{transition:transform .3s}
.platform-toggle .toggle-icon svg{width:18px;height:18px;display:block}
.platform-more.expanded .platform-toggle .toggle-icon{transform:rotate(180deg)}
.platform-more.expanded .toggle-text::before{content:'Hide '}

/* Resume toast - positioned at top to avoid interfering with mini player transcript */
.resume-toast{position:fixed;top:100px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:9999;background:rgba(15,23,42,.98);border:1px solid rgba(14,165,233,.3);border-radius:12px;padding:16px 20px;box-shadow:0 8px 32px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:all .3s}
.resume-toast.visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.resume-content{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.resume-content span{color:var(--text);font-size:.95rem;font-weight:500}
.resume-actions{display:flex;gap:10px;align-items:center}
.resume-yes{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;border:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:transform .2s;outline:none;-webkit-tap-highlight-color:transparent}
.resume-yes:hover{transform:scale(1.05)}
.resume-yes:focus,.resume-yes:active{outline:none;transform:none}
.resume-no{background:transparent;color:var(--dim);border:1px solid rgba(255,255,255,.15);padding:8px 16px;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s;outline:none;-webkit-tap-highlight-color:transparent}
.resume-no:hover{border-color:var(--blue);color:var(--text)}
.resume-no:focus,.resume-no:active{outline:none;background:transparent}
.resume-close{width:32px;height:32px;background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--dim);font-size:14px;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all .2s;outline:none;-webkit-tap-highlight-color:transparent}
.resume-close:hover{border-color:rgba(239,68,68,.5);color:#ef4444;background:rgba(239,68,68,.1)}
.resume-close:focus,.resume-close:active{outline:none;background:transparent}

/* Tap to play overlay - shown when mobile autoplay is blocked */
.tap-to-play-overlay{position:absolute;inset:0;background:rgba(15,23,42,.95);display:flex;align-items:center;justify-content:center;z-index:100;border-radius:24px;cursor:pointer;animation:tapFadeIn .3s ease}
@keyframes tapFadeIn{from{opacity:0}to{opacity:1}}
.tap-to-play-btn{display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;font-weight:600;font-size:1.1rem;padding:24px 32px;background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:16px;box-shadow:0 8px 32px rgba(14,165,233,.4);transition:transform .2s}
.tap-to-play-btn:active{transform:scale(.95)}
.tap-to-play-btn svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}

/* Sticky listen button (mobile only) */
.sticky-listen{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);z-index:999;padding:12px 24px;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff!important;border-radius:50px;font-size:.9rem;font-weight:600;text-decoration:none!important;box-shadow:0 4px 20px rgba(14,165,233,.4);opacity:0;visibility:hidden;transition:all .3s}
.sticky-listen.visible{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.sticky-listen svg{width:18px;height:18px;margin-right:8px;vertical-align:middle}
@media(min-width:851px){.sticky-listen{display:none!important}}

/* Keyword tags */
.keywords-list{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.keyword-tag{background:rgba(139,92,246,.15);color:var(--purple);padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:500;border:1px solid rgba(139,92,246,.2)}

/* Host styles */
.host-bio-text{color:var(--dim);font-size:.9rem;line-height:1.8}
.host-bio-text p{margin-bottom:14px}
.host-bio-text p:last-child{margin-bottom:0}
.host-avatar{width:80px;height:80px;border-radius:50%;margin-bottom:12px;object-fit:cover;border:3px solid transparent;background:linear-gradient(var(--deep),var(--deep)) padding-box,linear-gradient(135deg,var(--blue),var(--purple)) border-box;box-shadow:0 0 20px rgba(14,165,233,.3)}
.host-links{display:flex;gap:10px;margin-top:16px}
.host-links a{display:flex;align-items:center;gap:6px;color:var(--blue)!important;text-decoration:none!important;font-size:.85rem;padding:6px 14px;border:1px solid rgba(14,165,233,.3);border-radius:6px;transition:all .3s}
@media(hover:hover){.host-links a:hover{background:rgba(14,165,233,.1)}}
.host-links a svg{width:14px;height:14px}

/* News panel styles */
.news-section{padding:60px 0}
.news-section .section-header{margin-bottom:30px}
.news-panel{background:var(--card);border:1px solid rgba(14,165,233,.15);border-radius:16px;overflow:hidden}
.news-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;transition:background .3s}
@media(hover:hover){.news-header:hover{background:rgba(14,165,233,.05)}}
.news-header-left{display:flex;align-items:center;gap:12px}
.news-title{font-size:1rem;font-weight:600;color:#fff}
.news-teaser{color:var(--dim);font-size:.85rem;margin-left:8px}
.news-meta{display:flex;align-items:center;gap:12px}
.news-date{color:var(--dim);font-size:.75rem;background:rgba(14,165,233,.1);padding:4px 10px;border-radius:20px}
.news-chevron{color:var(--dim);transition:transform .3s}
.news-chevron svg{width:20px;height:20px;display:block}
.news-panel.expanded .news-chevron{transform:rotate(180deg)}
.news-body{max-height:0;overflow:hidden;transition:max-height .4s ease-out}
.news-panel.expanded .news-body{max-height:800px}
.news-content{padding:20px 24px 24px;color:var(--dim);font-size:.95rem;line-height:1.8;border-top:1px solid rgba(14,165,233,.1)}
.news-content p{margin-bottom:12px}
.news-content p:last-child{margin-bottom:0}
.news-content a{color:var(--blue)}
.news-archive-link{margin:20px 24px 8px;padding-top:16px;border-top:1px solid rgba(14,165,233,.1)}
.news-archive-link a{color:var(--blue);font-size:.9rem;font-weight:600;text-decoration:none}
@media(hover:hover){.news-archive-link a:hover{text-decoration:underline}}
.news-read-more{color:var(--blue);font-size:.9rem;font-weight:600;text-decoration:none;display:inline-block;margin-top:8px}
@media(hover:hover){.news-read-more:hover{text-decoration:underline}}

/* Episode card styles (used on landing and archive pages) */
.episode-card{display:grid;grid-template-columns:90px 1fr auto;gap:20px;padding:22px;background:var(--card);border:1px solid rgba(14,165,233,.08);border-radius:16px;transition:all .4s;text-decoration:none!important;align-items:center;position:relative}
.episode-card.latest{border-color:var(--blue);box-shadow:0 0 20px rgba(77,162,208,.15)}
.latest-badge{position:absolute;top:-8px;left:20px;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 10px rgba(77,162,208,.4)}
.episode-thumb{width:90px;height:90px;border-radius:12px;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.episode-content h3{font-size:1.05rem;font-weight:700;color:#fff!important;margin-bottom:6px;transition:color .3s}
@media(hover:hover){
.episode-card:hover{transform:translateY(-4px);border-color:rgba(14,165,233,.2);box-shadow:0 20px 40px rgba(0,0,0,.3)}
.episode-card:hover .episode-content h3{color:var(--blue)!important}
}
.episode-content p{color:var(--dim);font-size:.9rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:90px}
.episode-date{color:var(--dim);font-size:.75rem}
.episode-duration{color:var(--blue);font-size:.8rem;font-weight:600}
.play-btn{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
@media(hover:hover){.episode-card:hover .play-btn{transform:scale(1.1)}}
.play-btn svg{width:18px;height:18px;margin-left:2px}

/* Section styles */
.section-header{text-align:center;margin-bottom:50px}
.section-tag{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(14,165,233,.1),rgba(139,92,246,.1));border:1px solid rgba(14,165,233,.15);color:var(--blue);padding:6px 16px;border-radius:50px;font-size:.8rem;font-weight:500;margin-bottom:16px}
.section-header h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800;margin-bottom:12px;color:#fff}
.section-header h2 .gradient{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.section-header p{color:var(--dim);font-size:1rem}

/* Pagination */
.pagination{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:40px}
.pagination-info{color:var(--dim);font-size:.9rem}
.pagination-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pagination-btn{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--card);border:1px solid rgba(14,165,233,.15);color:var(--text);text-decoration:none;font-weight:600;transition:all .3s}
@media(hover:hover){.pagination-btn:hover{background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.3)}}
.pagination-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Content card styles */
.content-card{background:var(--card);border:1px solid rgba(14,165,233,.08);border-radius:16px;padding:28px}
.content-card h2{font-size:1.1rem;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px;color:#fff;word-wrap:break-word;overflow-wrap:break-word}
.content-card h2 .icon{color:var(--blue)}
.content-text{color:var(--dim);line-height:1.9;word-wrap:break-word;overflow-wrap:break-word}
.content-text p{margin-bottom:14px}
.content-text a{color:var(--blue)!important;text-decoration:underline!important;word-break:break-all}
.content-text a:hover{color:var(--cyan)!important}

/* Guest styles */
.guest-card .guest-name{font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px}
.guest-card .guest-bio{color:var(--dim);font-size:.85rem;line-height:1.7;margin-bottom:12px}
.guest-links{display:flex;gap:8px;flex-wrap:wrap}
.guest-links a{display:flex;align-items:center;gap:6px;color:var(--blue)!important;text-decoration:none!important;font-size:.8rem;padding:6px 12px;border:1px solid rgba(14,165,233,.3);border-radius:6px;transition:all .3s}
.guest-links a:hover{background:rgba(14,165,233,.1)}
.guest-links a svg{width:14px;height:14px}

/* Resource and list styles */
.timestamps-list,.takeaways-list,.resources-list{list-style:none}
.timestamps-list li{padding:10px 0;border-bottom:1px solid rgba(14,165,233,.05);display:flex;gap:14px;color:var(--dim);font-size:.85rem;cursor:pointer;transition:all .2s}
.timestamps-list li:hover{color:var(--blue)}
.timestamps-list li:last-child{border:none}
.timestamp-time{font-family:'JetBrains Mono',monospace;color:var(--blue);font-weight:600;min-width:50px;flex-shrink:0}
.takeaways-list li{padding:10px 0;border-bottom:1px solid rgba(14,165,233,.05);display:flex;gap:10px;color:var(--dim);font-size:.85rem}
.takeaways-list li:last-child{border:none}
.takeaways-list li::before{content:'✓';color:var(--blue);font-weight:bold;flex-shrink:0}
.resources-list li{padding:10px 0;border-bottom:1px solid rgba(14,165,233,.05)}
.resources-list li:last-child{border:none}
.resources-list a{color:var(--blue)!important;text-decoration:none!important;font-size:.85rem;word-break:break-all}

/* News archive page styles */
.news-archive-hero{padding:120px 0 40px}
.news-archive-hero .section-header{margin-bottom:40px}
.news-grid{display:flex;flex-direction:column;gap:24px;padding:0 0 100px}
.news-card{background:var(--card);border:1px solid rgba(14,165,233,.1);border-radius:16px;padding:28px;transition:all .3s}
@media(hover:hover){.news-card:hover{border-color:rgba(14,165,233,.25);transform:translateY(-4px)}}
.news-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.news-card h2{font-size:1.25rem;font-weight:700;color:#fff;margin:0}
.news-card h2 a{color:#fff!important;text-decoration:none!important}
@media(hover:hover){.news-card h2 a:hover{color:var(--blue)!important}}
.news-card-date{color:var(--dim);font-size:.8rem;background:rgba(14,165,233,.1);padding:4px 12px;border-radius:20px;white-space:nowrap}
.news-card-teaser{color:var(--cyan);font-size:.95rem;margin-bottom:12px;font-style:italic}
.news-card-excerpt{color:var(--dim);font-size:.95rem;line-height:1.7;margin-bottom:16px}
.news-card-link{color:var(--blue);font-size:.9rem;font-weight:600;text-decoration:none}
@media(hover:hover){.news-card-link:hover{text-decoration:underline}}
.no-news{text-align:center;padding:60px 0;color:var(--dim)}

/* News single page styles */
.news-single-hero{padding:120px 0 40px}
.news-single-hero h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:800;color:#fff;margin-bottom:16px;line-height:1.3}
.news-single-hero .news-meta{display:flex;align-items:center;gap:16px;color:var(--dim);font-size:.9rem}
.news-single-hero .news-teaser{color:var(--cyan);font-size:1.1rem;font-style:italic;margin-top:16px;margin-left:0}
.news-meta-date{background:rgba(14,165,233,.1);padding:4px 12px;border-radius:20px}
.news-single-content{padding:40px 0 100px}
.news-single-content .tt-container{max-width:800px}
.news-content-body{color:var(--dim);font-size:1.05rem;line-height:1.9}
.news-content-body p{margin-bottom:20px}
.news-content-body a{color:var(--blue)}
.news-content-body img{max-width:100%;height:auto;display:block;margin:20px 0}
.news-content-body img[src^="data:image/svg"]{width:100%;min-height:200px}
.news-nav{display:flex;justify-content:space-between;gap:20px;padding-top:40px;border-top:1px solid rgba(14,165,233,.1);margin-top:40px}
.news-nav a{color:var(--dim);font-size:.9rem;text-decoration:none}
@media(hover:hover){.news-nav a:hover{color:var(--blue)}}
.news-nav .prev::before{content:'← '}
.news-nav .next::after{content:' →'}

/* Back link - used across news pages */
.siw-back-link{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:.9rem;text-decoration:none;margin-bottom:24px}
@media(hover:hover){.siw-back-link:hover{color:var(--blue)}}
.siw-back-link .back-arrow,.episode-back .back-arrow{width:18px;height:18px;transition:transform .2s}
.siw-back-link:hover .back-arrow,.episode-back:hover .back-arrow{transform:translateX(-3px)}

/* WordPress pagination override for news archive */
.news-archive-pagination{display:flex;justify-content:center;gap:8px;padding:40px 0}
.news-archive-pagination a,.news-archive-pagination span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--card);border:1px solid rgba(14,165,233,.15);color:var(--text);text-decoration:none;font-weight:600}
.news-archive-pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Mobile responsive - news */
@media(max-width:768px){
.news-section{padding:40px 0}
.news-header{padding:16px 18px;flex-wrap:wrap;gap:10px}
.news-teaser{display:none}
.news-content{padding:16px 18px 20px}
.episode-card{grid-template-columns:1fr;text-align:center;gap:14px}
.episode-thumb{width:100px;height:100px;margin:0 auto}
.episode-meta{flex-direction:row;justify-content:center;width:100%}
.content-card{padding:24px}
.news-card-header{flex-direction:column;gap:8px}
.news-card{padding:20px}
.news-single-hero{padding:100px 0 30px}
.news-nav{flex-direction:column;text-align:center}
}

/* Sticky Mini Player - uses bottom animation instead of transform to fix iOS scroll issues */
/* Background on container fills gap when iOS Safari bottom bar hides on scroll */
.mini-player{position:fixed;bottom:-200px;left:0;right:0;z-index:10001;transition:bottom .3s ease-out;display:flex;flex-direction:column;background:rgba(15,23,42,.98)}
.mini-player.visible{bottom:0}
.mini-player-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(15,23,42,.98);border-top:1px solid rgba(14,165,233,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-width:100vw;box-sizing:border-box}
.mini-art{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0}
.mini-info{flex:0 0 auto;min-width:100px;max-width:180px}
.mini-title{font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-time-display{font-size:.75rem;color:var(--dim);font-family:'JetBrains Mono',monospace}
.mini-progress{flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:3px;cursor:pointer;min-width:80px}
.mini-progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:3px;width:0;transition:width .1s}
.mini-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.mini-player .skip-btn{width:32px;height:32px;padding:0}
/* SVG Icon Sizing - Astra Theme Override: Astra applies width:0 to SVGs. Use min-width as unbreakable floor. Pattern: width:Xpx!important;min-width:Xpx!important;height:Xpx!important */
.mini-player .skip-btn .skip-icon{width:20px!important;min-width:20px!important;height:20px!important}
.mini-player .skip-btn .skip-time{position:absolute;font-size:.4rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.7);top:50%;left:50%;transform:translate(-50%,-50%);margin-top:1px}
/* Play Button - Astra Theme Override: Astra applies padding:15px 30px to buttons.
   Use padding:0!important and explicit dimensions with CSS variable to maintain circle shape. */
.mini-player .play-pause-btn{width:var(--mini-play-size,42px)!important;height:var(--mini-play-size,42px)!important;min-width:var(--mini-play-size,42px)!important;min-height:var(--mini-play-size,42px)!important;border-radius:50%!important;aspect-ratio:1!important;flex-shrink:0;box-shadow:0 2px 10px rgba(14,165,233,.3);position:relative;background:linear-gradient(135deg,var(--blue),var(--purple))!important;padding:0!important}
.mini-player .play-pause-btn .play-icon,.mini-player .play-pause-btn .pause-icon{position:absolute;transition:opacity .2s,transform .2s;width:18px!important;min-width:18px!important;height:18px!important}
/* Ensure SVGs don't capture clicks */
.mini-player button svg,.mini-player .skip-btn svg,.mini-player .play-pause-btn svg,.mini-player .mini-mute svg,.mini-player .mini-transcript-toggle svg,.mini-player .mini-close svg{pointer-events:none}
.mini-extras{display:flex;align-items:center;gap:6px;flex-shrink:1;min-width:0}
.mini-mute{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;outline:none;-webkit-tap-highlight-color:transparent}
.mini-player .mini-mute svg{width:16px!important;min-width:16px!important;height:16px!important}
.mini-mute .mini-vol-muted{display:none}
.mini-mute.muted .mini-vol-on{display:none}
.mini-mute.muted .mini-vol-muted{display:block}
.mini-volume{width:50px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;-webkit-appearance:none;appearance:none}
.mini-volume::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--blue);border-radius:50%;cursor:pointer}
.mini-volume::-moz-range-thumb{width:12px;height:12px;background:var(--blue);border-radius:50%;cursor:pointer;border:none}
.mini-speed-control{position:relative}
.mini-player .speed-btn{padding:4px 8px;font-size:.7rem}
.mini-speed-menu{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;background:rgba(15,23,42,.98);border:1px solid rgba(14,165,233,.2);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:2px;min-width:60px;box-shadow:0 -4px 20px rgba(0,0,0,.5);z-index:10000}
.mini-speed-menu.open{display:flex}
.mini-speed-menu button{padding:6px 10px;background:transparent;border:none;color:var(--dim);font-size:.75rem;font-weight:500;cursor:pointer;border-radius:6px;transition:all .15s;font-family:'JetBrains Mono',monospace;text-align:center;outline:none;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.mini-speed-menu button:hover{background:rgba(14,165,233,.15);color:#fff}}
.mini-speed-menu button.active{background:rgba(14,165,233,.25);color:var(--blue);font-weight:600}
.mini-transcript-toggle{width:32px;height:32px;border-radius:6px;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;outline:none;-webkit-tap-highlight-color:transparent}
.mini-transcript-toggle.active{background:rgba(14,165,233,.25)}
.mini-player .mini-transcript-toggle svg{width:16px!important;min-width:16px!important;height:16px!important}
.mini-close{width:32px;height:32px;min-width:32px;border-radius:6px;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;outline:none;-webkit-tap-highlight-color:transparent;flex-shrink:0;margin-right:4px;padding:0}
.mini-player .mini-close svg{width:14px!important;min-width:14px!important;height:14px!important}

/* Mini transcript panel */
.mini-transcript{max-height:0;overflow:hidden;transition:max-height .3s ease-out,border-top-width .3s ease-out,opacity .3s ease-out;background:rgba(15,23,42,.95);border-top:0 solid rgba(14,165,233,.1);opacity:0}
.mini-transcript.expanded{max-height:200px;border-top-width:1px;opacity:1}
.mini-transcript.collapsed{max-height:0!important;border-top-width:0!important;opacity:0!important}
.mini-transcript-inner{padding:12px 16px;max-height:180px;overflow-y:auto}
.mini-transcript-inner::-webkit-scrollbar{width:6px}
.mini-transcript-inner::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}
.mini-transcript-inner::-webkit-scrollbar-thumb{background:rgba(14,165,233,.3);border-radius:3px}
.mini-transcript-line{display:flex;gap:12px;padding:6px 8px;border-radius:6px;font-size:.8rem;color:var(--dim);cursor:pointer;transition:all .3s ease}
.mini-transcript-line:hover{background:rgba(14,165,233,.1)}
.mini-transcript-line.active{background:rgba(14,165,233,.2);color:#fff;border-left:2px solid var(--blue)}
.mini-transcript-line.active.pulse{animation:mini-transcript-pulse .6s ease-out}
.mini-transcript-line.active .mini-text{color:#fff;font-weight:500}
.mini-transcript-line.active .mini-time{color:#fff;background:rgba(14,165,233,.3);padding:2px 6px;border-radius:4px}
.mini-transcript-line.fading{background:rgba(14,165,233,.08);border-left:1px solid rgba(14,165,233,.2)}
.mini-transcript-line.fading .mini-text{color:var(--text);font-weight:400}
@keyframes mini-transcript-pulse{0%{box-shadow:0 0 0 0 rgba(14,165,233,.4)}70%{box-shadow:0 0 0 6px rgba(14,165,233,0)}100%{box-shadow:0 0 0 0 rgba(14,165,233,0)}}
.mini-time{font-family:'JetBrains Mono',monospace;color:var(--blue);font-weight:500;min-width:40px;flex-shrink:0;font-size:.75rem;transition:all .2s}
.mini-text{line-height:1.5}

/* ===========================================
   HOVER STYLES (mouse/trackpad only)
   =========================================== */
@media(hover:hover){
.mini-mute:hover{background:rgba(14,165,233,.2)}
.mini-close:hover{color:#ef4444;background:rgba(239,68,68,.2)}
.mini-transcript-toggle:hover{background:rgba(14,165,233,.25)}
}

/* ===========================================
   FOCUS-VISIBLE: Hide focus for mouse/touch, show for keyboard
   This is the modern CSS approach - focus styles only appear
   when user navigates with keyboard (Tab key), not on click/tap.
   JS blur() in siw.js acts as fallback for older browsers.
   =========================================== */
/* Reset ALL focus styles for non-keyboard interactions (mouse/touch) */
.mini-close:focus:not(:focus-visible),
.mini-mute:focus:not(:focus-visible),
.mini-transcript-toggle:focus:not(:focus-visible),
.mini-speed-menu button:focus:not(:focus-visible),
.skip-btn:focus:not(:focus-visible),
.play-pause-btn:focus:not(:focus-visible),
.volume-btn:focus:not(:focus-visible),
.speed-btn:focus:not(:focus-visible),
.speed-menu button:focus:not(:focus-visible),
.transcript-btn:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
/* Touch devices: FORCE reset ALL states - Astra theme applies blue backgrounds via unknown selectors */
@media(hover:none),(pointer:coarse){
/* Reset skip button states only (play button needs its gradient) */
.skip-btn,.skip-btn:hover,.skip-btn:focus,.skip-btn:active{
background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;
outline:none!important;box-shadow:none!important;filter:none!important}
/* Play button: keep gradient, just remove focus/active effects */
.play-pause-btn:focus,.play-pause-btn:active{
outline:none!important;box-shadow:none!important;filter:none!important}
.mini-close,.mini-close:hover,.mini-close:focus,.mini-close:active{
background:rgba(255,255,255,.1)!important;outline:none!important;box-shadow:none!important}
.mini-mute,.mini-mute:hover,.mini-mute:focus,.mini-mute:active{
background:rgba(255,255,255,.1)!important;outline:none!important;box-shadow:none!important}
.mini-transcript-toggle,.mini-transcript-toggle:hover,.mini-transcript-toggle:focus,.mini-transcript-toggle:active{
background:rgba(255,255,255,.08)!important;outline:none!important;box-shadow:none!important}
.speed-btn,.speed-btn:hover,.speed-btn:focus,.speed-btn:active,
.mini-player .speed-btn,.mini-player .speed-btn:hover,.mini-player .speed-btn:focus,.mini-player .speed-btn:active{
background:rgba(255,255,255,.08)!important;outline:none!important;box-shadow:none!important;filter:none!important}
.volume-btn,.volume-btn:hover,.volume-btn:focus,.volume-btn:active,
.transcript-btn,.transcript-btn:hover,.transcript-btn:focus,.transcript-btn:active{
outline:none!important;box-shadow:none!important;filter:none!important}
/* Resume toast buttons */
.resume-yes,.resume-yes:hover,.resume-yes:focus,.resume-yes:active{
background:linear-gradient(135deg,var(--blue),var(--purple))!important;outline:none!important;box-shadow:none!important}
.resume-no,.resume-no:hover,.resume-no:focus,.resume-no:active,
.resume-close,.resume-close:hover,.resume-close:focus,.resume-close:active{
background:transparent!important;outline:none!important;box-shadow:none!important}
}

/* ===========================================
   MINI PLAYER RESPONSIVE - CONSOLIDATED
   All breakpoints merged for consistency
   =========================================== */

/* Tablet: 768-900px */
@media(max-width:900px){
.mini-player{--mini-play-size:40px}
.mini-player-bar{padding:10px 20px 10px 12px;gap:8px}
.mini-art{width:40px;height:40px}
.mini-info{max-width:120px}
.mini-title{font-size:.75rem}
.mini-player .skip-btn{width:36px;height:36px}
.mini-player .skip-btn .skip-icon{width:18px!important;min-width:18px!important;height:18px!important}
.mini-player .skip-btn .skip-time{font-size:.4rem}
.mini-player .speed-btn{padding:6px 10px;font-size:.7rem}
.mini-extras{gap:4px}
.mini-volume{width:40px}
}

/* Small tablet / large phone: 550-700px */
@media(max-width:700px){
.mini-player{--mini-play-size:44px}
.mini-player-bar{gap:6px;padding:10px 25px 10px 12px}
.mini-art{width:36px;height:36px}
.mini-volume{display:none}
.mini-mute{display:none}
.mini-transcript-toggle,.mini-close{width:34px;height:34px;font-size:13px;padding:0}
}

/* Phone: <600px - hide transcript toggle, increase padding for scrollbar */
@media(max-width:600px){
.mini-player-bar{padding-right:50px}
.mini-art{width:32px;height:32px}
.mini-transcript-toggle{display:none}
.mini-close{width:36px;height:36px;min-width:36px;margin-right:0;padding:0}
}
/* Extra padding to avoid scrollbar clipping - Firefox needs more room */
@media(max-width:510px){
.mini-player-bar{padding-right:65px}
}
/* Small phone: progressively hide elements */
@media(max-width:480px){.mini-info{display:none}.mini-player-bar{padding-right:55px}}
@media(max-width:380px){.mini-player .skip-btn{display:none}}
@media(max-width:350px){.mini-speed-control{display:none}}
@media(max-width:320px){.mini-progress{display:none!important}.mini-player-bar{justify-content:center;gap:8px}}
@media(max-width:280px){.mini-close{display:none}.mini-player-bar{padding:6px 8px}}

/* iOS safe area padding - apply to container for full background coverage when Safari bar hides */
@supports(padding-bottom:env(safe-area-inset-bottom)){
.mini-player{padding-bottom:env(safe-area-inset-bottom)}
.mini-player-bar{padding-bottom:12px}
}

/* ===========================================
   SCROLL-TOP POSITIONING
   Uses both :has() (modern browsers) and body classes (JS fallback).
   JS in tellerstech-siw.js manages body.mini-player-active and
   body.transcript-expanded for Safari < 15.4 and Firefox < 121.
   =========================================== */
/* Base: when mini player visible, position scroll-top above mini player bar */
/* Only set bottom position, keep default z-index so speed menu can appear on top */
/* Use high specificity selectors to override shared.css */
body:has(.mini-player.visible) .scroll-top,
body:has(.mini-player.visible) #scrollTop,
body:has(.mini-player.visible) button.scroll-top,
body.mini-player-active .scroll-top,
body.mini-player-active #scrollTop,
body.mini-player-active button.scroll-top{bottom:calc(120px + env(safe-area-inset-bottom,0px))!important}

/* When transcript expanded, hide scroll-to-top button to reduce visual clutter */
/* Users can collapse transcript first if they need to scroll to top */
body:has(.mini-transcript.expanded) .scroll-top,
body:has(.mini-transcript.expanded) #scrollTop,
body:has(.mini-transcript.expanded) button.scroll-top,
body.transcript-expanded .scroll-top,
body.transcript-expanded #scrollTop,
body.transcript-expanded button.scroll-top{display:none!important}

/* Mobile responsive - small screens */
@media(max-width:480px){
.content-card{padding:18px;border-radius:14px}
.content-card h2{font-size:1rem;margin-bottom:14px}
.content-text{font-size:.9rem;line-height:1.8}
.keywords-list{gap:6px}
.keyword-tag{padding:4px 10px;font-size:.75rem}
.timestamps-list li{font-size:.875rem;gap:10px}
.timestamp-time{min-width:42px;font-size:.8rem}
.takeaways-list li{font-size:.875rem}
.resources-list a{font-size:.875rem}
.guest-card .guest-name{font-size:.9rem}
.guest-card .guest-bio{font-size:.875rem}
.host-bio-text{font-size:.875rem}
.host-avatar{width:60px;height:60px}
.guest-links a,.host-links a{font-size:.8rem;padding:5px 10px}
}

/* ========================================
   Episode Page Styles (Main Audio Player)
   ======================================== */
a,button,.transcript-line,.timestamps-list li,.play-pause-btn,.skip-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.page-wrapper{width:100%;overflow-x:hidden;position:relative}
img{max-width:100%;height:auto}
.ep-hero{padding:100px 0 40px}
.episode-back{display:inline-flex;align-items:center;gap:8px;color:var(--dim)!important;text-decoration:none!important;font-size:.9rem;margin-bottom:32px;transition:color .3s}
.episode-back:hover{color:var(--blue)!important}
.ep-header{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start}
.ep-cover{width:200px;height:200px;border-radius:20px;object-fit:cover;box-shadow:0 25px 60px rgba(0,0,0,.5);border:1px solid rgba(14,165,233,.1);flex-shrink:0}
.ep-info h1{font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:800;margin-bottom:16px;line-height:1.25;color:#fff;word-wrap:break-word;overflow-wrap:break-word}
.ep-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.ep-meta span{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:.8rem;background:var(--card);padding:6px 12px;border-radius:8px;border:1px solid rgba(14,165,233,.05)}
.ep-meta .icon{color:var(--blue)}
.location-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.2);color:#22c55e;padding:8px 16px;border-radius:8px;font-size:.85rem;margin-bottom:16px}
.ep-actions{display:flex;gap:10px;flex-wrap:wrap}
.ep-actions .btn{padding:10px 18px;border-radius:10px;font-size:.85rem;font-weight:600;text-decoration:none!important;transition:all .3s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer}
.ep-actions .btn-primary{background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff!important;box-shadow:0 4px 15px rgba(14,165,233,.3)}
.ep-actions .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(14,165,233,.4)}
.ep-actions .btn .icon{display:flex;align-items:center}
.ep-actions .btn .icon svg{width:16px;height:16px}
.rss-link{display:inline-flex;align-items:center;gap:8px;color:var(--dim)!important;text-decoration:none!important;font-size:.8rem;padding:8px 16px;background:rgba(255,255,255,.05);border-radius:8px;transition:all .2s}
.rss-link:hover{background:rgba(14,165,233,.1);color:var(--blue)!important}
.audio-player-container{background:linear-gradient(135deg,rgba(14,165,233,.08),rgba(139,92,246,.08));border:1px solid rgba(14,165,233,.15);border-radius:20px;padding:28px;margin:40px 0}
.player-main{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:center}
.player-art{width:70px;height:70px;border-radius:12px;object-fit:cover;box-shadow:0 8px 24px rgba(0,0,0,.3);flex-shrink:0}
.player-info{min-width:0}
.now-playing-badge{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease,max-height .3s ease}
.now-playing-badge.visible{opacity:1;max-height:20px}
.now-playing-dot{width:8px;height:8px;background:var(--blue);border-radius:50%;animation:nowPlayingPulse 1.5s ease-in-out infinite}
@keyframes nowPlayingPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.player-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;overflow-wrap:break-word}
.player-show{font-size:.8rem;color:var(--dim)}
.player-controls-wrap{display:flex;align-items:center;gap:16px}
.player-controls{display:flex;align-items:center;gap:10px}
.play-pause-btn{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;box-shadow:0 4px 20px rgba(14,165,233,.4);position:relative;flex-shrink:0;outline:none;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.play-pause-btn:hover{transform:scale(1.08)}}
/* SVG Icon Sizing - Astra Theme Override: Astra applies width:0 to SVGs. Use min-width as unbreakable floor. Pattern: width:Xpx!important;min-width:Xpx!important;height:Xpx!important */
.audio-player-container .play-pause-btn .play-icon,.audio-player-container .play-pause-btn .pause-icon{position:absolute;transition:opacity .2s,transform .2s;width:24px!important;min-width:24px!important;height:24px!important}
.play-pause-btn .play-icon{opacity:1;transform:scale(1) translateX(1px)}
.play-pause-btn .pause-icon{opacity:0;transform:scale(.8)}
.play-pause-btn.playing .play-icon{opacity:0;transform:scale(.8)}
.play-pause-btn.playing .pause-icon{opacity:1;transform:scale(1)}
.skip-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:all .2s;flex-shrink:0;outline:none;-webkit-tap-highlight-color:transparent;position:relative}
@media(hover:hover){.skip-btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}}
.audio-player-container .skip-btn .skip-icon{width:24px!important;min-width:24px!important;height:24px!important;stroke-width:1.8}
.skip-btn .skip-time{position:absolute;font-size:.5rem;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--dim);top:50%;left:50%;transform:translate(-50%,-50%);margin-top:1px}
.audio-player-container .play-pause-btn svg,.audio-player-container .skip-btn svg,.audio-player-container .volume-btn svg,.audio-player-container .share-btn svg{pointer-events:none}
.player-progress-wrap{margin-top:20px}
.progress-bar{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:4px;cursor:pointer;position:relative;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:4px;width:0%;transition:width .1s}
.progress-bar:hover .progress-fill{background:linear-gradient(90deg,var(--cyan),var(--blue))}
.player-time{display:flex;justify-content:space-between;font-size:.75rem;color:var(--dim);margin-top:8px;font-family:'JetBrains Mono',monospace}
.player-extras{display:flex;align-items:center;gap:16px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(14,165,233,.1);flex-wrap:wrap}
.player-volume{display:flex;align-items:center;gap:8px}
.volume-btn{color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:6px;background:transparent;border:none;outline:none;-webkit-tap-highlight-color:transparent;transition:all .2s;width:32px;height:32px}
@media(hover:hover){.volume-btn:hover{color:var(--text);background:rgba(255,255,255,.08)}}
.audio-player-container .volume-btn svg{width:18px!important;min-width:18px!important;height:18px!important}
.volume-btn .volume-muted{display:none}
.volume-btn.muted .volume-on{display:none}
.volume-btn.muted .volume-muted{display:block}
.volume-slider{width:80px;height:4px;background:rgba(255,255,255,.1);border-radius:2px;cursor:pointer;-webkit-appearance:none;appearance:none}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--blue);border-radius:50%;cursor:pointer;transition:transform .2s}
@media(hover:hover){.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}}
.speed-control{position:relative}
.speed-btn{padding:6px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--dim);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:'JetBrains Mono',monospace;outline:none;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.speed-btn:hover{background:rgba(255,255,255,.15);color:#fff}}
.speed-menu{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;background:rgba(15,23,42,.98);border:1px solid rgba(14,165,233,.2);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:2px;min-width:70px;box-shadow:0 -4px 20px rgba(0,0,0,.5);z-index:100}
.speed-menu.open{display:flex}
.speed-menu button{padding:8px 12px;background:transparent;border:none;color:var(--dim);font-size:.8rem;font-weight:500;cursor:pointer;border-radius:6px;transition:all .15s;font-family:'JetBrains Mono',monospace;text-align:center;outline:none;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.speed-menu button:hover{background:rgba(14,165,233,.15);color:#fff}}
.speed-menu button.active{background:rgba(14,165,233,.25);color:var(--blue);font-weight:600}
.share-btn{width:34px;height:34px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--dim);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;outline:none;-webkit-tap-highlight-color:transparent}
/* SVG Icon Sizing - Astra Theme Override: Astra applies width:0 to SVGs. Use min-width as unbreakable floor. Pattern: width:Xpx!important;min-width:Xpx!important;height:Xpx!important */
.audio-player-container .share-btn svg{width:16px!important;min-width:16px!important;height:16px!important}
@media(hover:hover){.share-btn:hover{background:rgba(14,165,233,.15);color:var(--blue)}}
.transcript-section{margin-top:20px;padding-top:20px;border-top:1px solid rgba(14,165,233,.1)}
.transcript-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.transcript-header h3{font-size:.95rem;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px}
.transcript-header h3 svg{width:18px;height:18px;color:var(--blue)}
.transcript-controls{display:flex;gap:8px}
.transcript-btn{padding:6px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(14,165,233,.15);border-radius:6px;color:var(--dim);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;outline:none;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.transcript-btn:hover{background:rgba(14,165,233,.1);color:var(--blue)}}
.transcript-btn.active{background:rgba(14,165,233,.2);color:var(--blue);border-color:rgba(14,165,233,.3)}
.transcript-body{max-height:350px;overflow-y:auto;padding:20px;background:rgba(0,0,0,.25);border-radius:12px;font-size:.9rem;line-height:1.9;color:var(--dim);scroll-behavior:smooth}
.transcript-body.collapsed{display:none}
.transcript-body::-webkit-scrollbar{width:6px}
.transcript-body::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:3px}
.transcript-body::-webkit-scrollbar-thumb{background:rgba(14,165,233,.3);border-radius:3px}
.transcript-line{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid rgba(14,165,233,.06);transition:all .3s ease;cursor:pointer}
.transcript-line:last-child{border-bottom:none}
.transcript-line:hover{background:rgba(14,165,233,.05);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:8px}
@keyframes transcript-pulse{0%{box-shadow:0 0 0 0 rgba(14,165,233,.4)}70%{box-shadow:0 0 0 8px rgba(14,165,233,0)}100%{box-shadow:0 0 0 0 rgba(14,165,233,0)}}
.transcript-time{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--blue);min-width:55px;cursor:pointer;padding:4px 8px;background:rgba(14,165,233,.1);border-radius:4px;text-align:center;transition:all .2s;flex-shrink:0;height:fit-content}
@media(hover:hover){.transcript-time:hover{background:rgba(14,165,233,.25);transform:scale(1.05)}}
.transcript-text{color:var(--dim);font-size:.9rem;line-height:1.7;word-wrap:break-word;overflow-wrap:break-word}
.transcript-body.hide-timestamps .transcript-time{display:none}
.transcript-body.hide-timestamps .transcript-line{gap:0}
.transcript-body.hide-timestamps .transcript-text{padding-left:0}
.transcript-line.active{background:rgba(14,165,233,.25);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:8px;border-left:3px solid var(--blue)}
.transcript-line.active.pulse{animation:transcript-pulse .6s ease-out}
.transcript-line.active .transcript-time{background:var(--blue);color:#fff;box-shadow:0 0 12px rgba(14,165,233,.5)}
.transcript-line.active .transcript-text{color:#fff;font-weight:500}
.transcript-line.fading{background:rgba(14,165,233,.1);border-left:2px solid rgba(14,165,233,.3)}
.transcript-line.fading .transcript-time{background:rgba(14,165,233,.2);color:var(--blue)}
.transcript-line.fading .transcript-text{color:var(--text);font-weight:400}
.transcript-body.hide-timestamps .transcript-line.active{background:linear-gradient(90deg,rgba(14,165,233,.3),rgba(139,92,246,.15));border-left:4px solid var(--blue);padding-left:16px}
.transcript-body.hide-timestamps .transcript-line.active .transcript-text{color:#fff;font-weight:600;text-shadow:0 0 20px rgba(14,165,233,.5)}
.episode-body{padding:20px 0 120px}
.content-grid{display:grid;grid-template-columns:1fr 340px;gap:28px}
.main-content,.sidebar{display:flex;flex-direction:column;gap:20px;min-width:0}
.host-links{margin-top:16px}
@media(max-width:1024px){
.ep-header{grid-template-columns:1fr;text-align:center}
.ep-cover{width:180px;height:180px;margin:0 auto}
.ep-meta,.ep-actions,.keywords-list{justify-content:center}
.content-grid{grid-template-columns:1fr}
.sidebar{order:-1}
.player-main{grid-template-columns:60px 1fr}
.player-controls-wrap{grid-column:1/-1;justify-content:center;margin-top:16px}
}
@media(max-width:480px){
.player-volume{display:none}
.ep-hero{padding:100px 0 20px}
.episode-back{font-size:.8rem;margin-bottom:20px}
.ep-cover{width:120px;height:120px;border-radius:16px}
.ep-info h1{font-size:1.25rem}
.ep-meta{gap:8px}
.ep-meta span{font-size:.7rem;padding:4px 8px}
.location-badge{font-size:.75rem;padding:6px 12px}
.audio-player-container{padding:16px;border-radius:14px;margin:24px 0}
.player-main{grid-template-columns:50px 1fr;gap:12px}
.player-art{width:50px;height:50px;border-radius:8px}
.player-title{font-size:.85rem}
.player-show{font-size:.7rem}
.play-pause-btn{width:46px;height:46px}
.skip-btn{width:36px;height:36px}
.player-time{font-size:.7rem}
.transcript-header{flex-direction:column;align-items:flex-start;gap:10px}
.transcript-controls{width:100%;justify-content:flex-start}
.transcript-btn{padding:5px 10px;font-size:.75rem}
.transcript-body{padding:12px;max-height:250px}
.transcript-line{gap:10px;padding:10px 0}
.transcript-time{min-width:42px;font-size:.65rem;padding:3px 5px}
.transcript-text{font-size:.8rem;line-height:1.6}
.episode-body{padding:16px 0 80px}
}