:root{--zp-bg:#061321;--zp-panel:#0c2034;--zp-panel2:#102a43;--zp-text:#effaff;--zp-muted:#92adbf;--zp-line:rgba(103,219,255,.14);--zp-cyan:#53e3ff;--zp-blue:#238be7}
*{box-sizing:border-box}
html,body.zplay-page{margin:0;width:100%;min-height:100%;background:var(--zp-bg);color:var(--zp-text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body.zplay-page{min-height:100dvh}
.zplay-shell{position:relative;display:flex;flex-direction:column;width:100%;max-width:760px;min-height:100dvh;margin:0 auto;padding:0 16px calc(92px + env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(ellipse at 92% 4%,#10395666,transparent 32%),var(--zp-bg)}
.zplay-header{display:flex;align-items:center;gap:11px;padding:calc(14px + env(safe-area-inset-top)) 0 17px;border-bottom:1px solid var(--zp-line)}
.zplay-back{display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid var(--zp-line);border-radius:50%;color:var(--zp-text);font-size:28px;text-decoration:none}
.zplay-brand-icon{width:43px;height:43px;object-fit:cover;border-radius:13px;border:1px solid #72eaff55;box-shadow:0 5px 18px #00b9ef22}
.zplay-brand{flex:1;min-width:0}.zplay-brand>span,.zplay-eyebrow{color:var(--zp-cyan);font-size:9px;font-weight:850;letter-spacing:.16em}
.zplay-brand h1{margin:2px 0;font-size:22px;letter-spacing:-.04em}.zplay-brand p{margin:0;color:var(--zp-muted);font-size:11px}
.zplay-crown{display:grid;place-items:center;width:35px;height:35px;border:1px solid #59ddff35;border-radius:12px;background:linear-gradient(145deg,#1a4b66,#17264d);color:#a7f3ff;font-size:19px}
.zplay-gate{display:flex;align-items:center;justify-content:center;gap:12px;min-height:55vh;color:var(--zp-muted);font-size:13px;text-align:center}
.zplay-loader{width:22px;height:22px;border:2px solid #53e3ff33;border-top-color:var(--zp-cyan);border-radius:50%;animation:zpSpin .8s linear infinite}
.zplay-content{display:grid;gap:17px;padding-top:17px}
.zplay-hero{position:relative;isolation:isolate;overflow:hidden;padding:23px 20px 19px;border:1px solid #8beaff24;border-radius:25px;background:radial-gradient(circle at 88% 25%,#3e7dff66,transparent 25%),radial-gradient(circle at 68% 100%,#24d8bd3d,transparent 36%),linear-gradient(130deg,#153c59,#112746 54%,#291d4b);box-shadow:0 18px 42px #0003}
.zplay-hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.17;background-image:radial-gradient(#fff 0.7px,transparent .7px);background-size:13px 13px;mask-image:linear-gradient(110deg,transparent,#000)}
.zplay-hero-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);pointer-events:none}.orb-one{width:150px;height:150px;right:-45px;top:-58px;background:radial-gradient(circle at 30% 30%,#7bf3ff66,transparent 70%)}.orb-two{width:100px;height:100px;right:18%;bottom:-65px;background:#bb73ff33;filter:blur(10px)}
.zplay-hero h2{margin:10px 0 9px;font-size:clamp(28px,7vw,39px);line-height:1.04;letter-spacing:-.055em}.zplay-hero h2 em{font-style:normal;color:#8feeff}
.zplay-hero p{max-width:470px;margin:0;color:#c0d7e8;font-size:12px;line-height:1.65}
.zplay-hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.zplay-hero-tags span{padding:7px 10px;border:1px solid #d7f7ff1c;border-radius:20px;background:#ffffff0c;color:#e7fbff;font-size:11px;font-weight:650}
.zplay-player-card,.zplay-discover{padding:17px 14px;border:1px solid var(--zp-line);border-radius:22px;background:linear-gradient(150deg,#10263b,#0a1a2c 80%);box-shadow:0 12px 32px #0002}
.zplay-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.zplay-section-heading h2{margin:4px 0 0;font-size:19px;letter-spacing:-.035em}
.zplay-live-dot{padding:5px 8px;border:1px solid #4ce2ba2b;border-radius:20px;background:#4ce2ba12;color:#74f2c9;font-size:9px;font-weight:850;letter-spacing:.12em}
.zplay-player{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid #8feaff12;border-radius:17px;background:#071725}
.zplay-disc{display:grid;place-items:center;width:56px;height:56px;flex:none;border-radius:17px;background:conic-gradient(from 40deg,#3be1ff,#3155a6,#ab76ff,#28d6bd,#3be1ff);box-shadow:0 6px 22px #3adfff22}
.zplay-disc span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff55;border-radius:50%;background:#0a1c31;color:white;font-size:21px}
.zplay-disc.is-playing{animation:zpSpin 5s linear infinite}
.zplay-player-copy{display:grid;gap:5px;min-width:0}.zplay-player-copy strong{overflow-wrap:anywhere;font-size:13px}.zplay-player-copy small{color:var(--zp-muted);font-size:11px;line-height:1.45}
.zplay-file-actions{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.zplay-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 13px;border:1px solid #5fdfff28;border-radius:13px;background:#102b43;color:var(--zp-text);font:inherit;font-size:12px;font-weight:750;text-decoration:none;cursor:pointer}
.zplay-button-primary{border:0;background:linear-gradient(110deg,#67edff,#39aef6 55%,#8e8bff);color:#041727;box-shadow:0 7px 20px #30bfe52b}
.zplay-media-stage{overflow:hidden;border:1px solid #8feaff18;border-radius:16px;background:#040d17}
.zplay-media-stage audio{display:block;width:100%;margin:12px auto}.zplay-media-stage video{display:block;width:100%;max-height:350px;background:#000}
.zplay-stage-empty{display:grid;justify-items:center;gap:7px;padding:26px 14px;text-align:center}.zplay-stage-empty>span{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:#132e48;color:var(--zp-cyan);font-size:25px}.zplay-stage-empty strong{font-size:12px}.zplay-stage-empty small{color:var(--zp-muted);font-size:10px;line-height:1.5}
.zplay-url-row{display:grid;gap:8px;margin-top:15px}.zplay-url-row>label{font-size:12px;font-weight:750}.zplay-url-row>div{display:flex;gap:7px}.zplay-url-row input,.zplay-search input{width:100%;min-width:0;height:43px;padding:0 12px;border:1px solid #2b4a62;border-radius:12px;outline:none;background:#071827;color:var(--zp-text);font:inherit;font-size:12px}.zplay-url-row input:focus,.zplay-search input:focus{border-color:var(--zp-cyan);box-shadow:0 0 0 3px #53e3ff12}.zplay-url-row button,.zplay-search button{flex:none;padding:0 14px;border:0;border-radius:12px;background:#4cdcf5;color:#041b2b;font:inherit;font-size:12px;font-weight:850}
.zplay-url-row>small{color:var(--zp-muted);font-size:10px;line-height:1.55}
.zplay-download-row{display:flex;align-items:center;gap:10px;margin-top:12px}.zplay-download{flex:none;padding:8px 10px;border:1px solid #4fe6b72b;border-radius:11px;background:#39d9a513;color:#81f3cd;font:inherit;font-size:11px;font-weight:750}.zplay-download-row span{color:var(--zp-muted);font-size:10px;line-height:1.45}
.zplay-search{display:flex;align-items:center;gap:8px;margin-bottom:7px;padding:0 0 0 12px;border:1px solid #28455d;border-radius:14px;background:#071827;color:var(--zp-muted)}.zplay-search>span{font-size:22px}.zplay-search input{height:42px;padding-left:0;border:0;background:transparent}.zplay-search button{align-self:stretch;margin:4px 4px 4px 0}
.zplay-search-note{margin:7px 0 13px;color:var(--zp-muted);font-size:10px;line-height:1.55}
.zplay-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.zplay-service{display:flex;align-items:center;gap:9px;min-width:0;padding:12px 10px;border:1px solid var(--zp-line);border-radius:15px;background:#0b1d2f;color:var(--zp-text);text-decoration:none;transition:transform .18s,border-color .18s}.zplay-service:active{transform:scale(.98)}.zplay-service .service-icon{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:12px;background:#1a3650;color:#a7f3ff;font-size:18px}.zplay-service>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}.zplay-service strong{font-size:11px}.zplay-service small{color:var(--zp-muted);font-size:9px;line-height:1.35}.zplay-service>b{color:#6b94af;font-size:13px}.service-spotify .service-icon{background:#133d31;color:#70efb4}.service-tiktok .service-icon{background:#2a2341;color:#e7ccff}.service-archive .service-icon{background:#38301c;color:#ffe5a1}
.zplay-rights-note{display:flex;gap:10px;padding:12px;border:1px solid #efc66d1c;border-radius:15px;background:#efc66d09;color:#d9d2b9}.zplay-rights-note>span{color:#ffdc8a;font-size:17px}.zplay-rights-note p{margin:0;font-size:10px;line-height:1.6}.zplay-rights-note strong{color:#ffebbb}
.zplay-locked{display:grid;justify-items:center;align-content:center;min-height:72vh;padding:28px 18px;text-align:center}.zplay-lock-art{position:relative;display:grid;place-items:center;width:110px;height:110px;margin-bottom:22px;border:1px solid #64e8ff3b;border-radius:32px;background:radial-gradient(circle at 28% 20%,#6aeaff44,transparent 44%),linear-gradient(145deg,#173d5b,#1b2046);box-shadow:0 18px 55px #00b9ef17}.zplay-lock-art>span{font-size:52px;color:#8ff0ff}.zplay-lock-art>i{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:40px;height:40px;border:3px solid var(--zp-bg);border-radius:50%;background:#f4c65b;font-style:normal;font-size:18px}.zplay-locked h2{max-width:340px;margin:12px 0;font-size:28px;line-height:1.08;letter-spacing:-.04em}.zplay-locked p{max-width:390px;margin:0 0 22px;color:var(--zp-muted);font-size:13px;line-height:1.7}.zplay-locked .zplay-button{width:min(100%,310px)}.zplay-back-link{margin-top:16px;color:#8edff5;font-size:12px;text-decoration:none}
.zplay-bottom-nav{position:fixed;z-index:20;left:50%;bottom:calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:min(420px,calc(100% - 30px));padding:7px;border:1px solid #a1eaff1b;border-radius:25px;background:#0b1b2bf5;box-shadow:0 10px 32px #0007;transform:translateX(-50%);backdrop-filter:blur(18px)}.zplay-bottom-nav a{display:grid;justify-items:center;gap:3px;padding:5px;color:#87a9bd;text-decoration:none}.zplay-bottom-nav a span{font-size:17px}.zplay-bottom-nav a small{font-size:9px}.zplay-bottom-nav a:active{color:var(--zp-cyan)}
@keyframes zpSpin{to{transform:rotate(360deg)}}
@media(max-width:380px){.zplay-shell{padding-right:12px;padding-left:12px}.zplay-hero{padding:19px 16px}.zplay-player-card,.zplay-discover{padding:14px 11px}.zplay-service-grid{grid-template-columns:1fr}.zplay-download-row{align-items:flex-start;flex-direction:column}.zplay-file-actions .zplay-button{flex:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.zplay-media-stage iframe{display:block;width:100%;min-height:250px;border:0;background:#000}.zplay-search-results{display:grid;gap:8px;margin:10px 0 13px}.zplay-search-result{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--zp-line);border-radius:13px;background:#0a1d30;color:var(--zp-text);text-decoration:none}.zplay-search-result>span:first-child{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:#15364d;color:var(--zp-cyan);font-size:16px}.zplay-search-result>span:nth-child(2){display:grid;gap:4px;flex:1;min-width:0}.zplay-search-result strong{font-size:11px}.zplay-search-result small{color:var(--zp-muted);font-size:10px}.zplay-search-result>b{color:#77dff6}

.zplay-search-quicklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.zplay-archive-heading{grid-column:1/-1;margin:12px 0 2px;color:var(--zp-text);font-size:13px}.zplay-archive-status{grid-column:1/-1;margin:3px 0;color:var(--zp-muted);font-size:11px;line-height:1.6}.zplay-archive-card{display:grid;gap:7px;padding:13px;border:1px solid var(--zp-line);border-radius:14px;background:#0a1d30}.zplay-archive-card>strong{color:var(--zp-text);font-size:12px;line-height:1.5}.zplay-archive-card>small,.zplay-archive-rights{color:var(--zp-muted);font-size:10px;line-height:1.55;overflow-wrap:anywhere}.zplay-archive-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.zplay-archive-action{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--zp-line);border-radius:10px;padding:8px 10px;background:#102b42;color:var(--zp-text);font-size:10px;font-weight:750;text-decoration:none;cursor:pointer}.zplay-archive-action.primary{background:#123c4e;border-color:#43d7ed66;color:#9bf2ff}.zplay-archive-rights{display:block;flex-basis:100%;margin-bottom:4px}@media(max-width:420px){.zplay-search-quicklinks{grid-template-columns:1fr}.zplay-archive-actions{align-items:stretch}.zplay-archive-action{flex:1}}
