/* Theme */
html, body { height: 100%; margin: 0; }
body { background: #171848; color: #F7FFFA; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial; }
body.theme-gallery { background: #171848 url("../images/spiriletics-bg.jpg") no-repeat center/cover fixed; }


.site-header { background:#00019A !important; color:#F7FFFA; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.25); }
.header-inner { display:flex; align-items:center; justify-content:center; position:relative; min-height:80px; }
.logo-link { position:absolute; left:20px; top:50%; transform:translateY(-50%); line-height:0; }
.site-logo { height:48px; width:auto; max-width:180px; object-fit:contain; }
@media (max-width:768px){ .site-logo{height:38px; left:10px;} }


.site-footer { background:#00019A !important; color:#F7FFFA; padding:24px 16px; text-align:center; }


.player-shell{max-width:1000px;margin:22px auto 60px;padding:0 16px;display:grid;gap:22px}
.status{background:linear-gradient(135deg, rgba(46,57,214,.15), rgba(24,224,168,.10));border:1px solid rgba(255,255,255,.08);padding:14px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pill{padding:8px 12px;border-radius:999px;background:#3a3f55;color:#0c0f14;font-weight:700}
.pill.live{background:#18e0a8;box-shadow:0 0 18px rgba(24,224,168,.6),0 0 2px rgba(24,224,168,1)}
.player{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:16px}
#playerSlot video,#playerSlot audio{width:100%;max-height:65vh;display:block;border-radius:10px;background:rgba(0,0,0,.25);object-fit:contain}
.transport{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;margin-top:12px}
.btn{appearance:none;border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;background:linear-gradient(180deg, rgba(0,1,154,.25), rgba(46,57,214,.2));color:#fff}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35)}
.meta{margin-top:10px}
.track-title{font-size:18px;font-weight:700}
.track-artist{opacity:.85}
.track-desc{margin:.4rem 0 .6rem}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:.3rem 0 .6rem}
.tag{padding:6px 10px;border-radius:999px;font-weight:600;font-size:.85rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15)}
.more-share{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.more-link{font-weight:700;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.5);padding-bottom:2px}
.share{display:flex;gap:8px}
.share-btn{min-width:36px;min-height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-weight:800;cursor:pointer}
.share-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 6px}


/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;justify-content:center;align-items:center;z-index:10000}
.lightbox.hidden{display:none}
.lightbox-content{position:relative;max-width:90%;max-height:90%}
.lightbox-content video{width:100%;height:auto;border-radius:8px;box-shadow:0 0 30px rgba(0,0,0,.6)}
.close-lightbox{position:absolute;top:-14px;right:-14px;background:#00019A;color:#fff;border:0;border-radius:50%;font-size:22px;width:36px;height:36px;cursor:pointer}
.close-lightbox:hover{background:#18e0a8}