/* Spotcast – Styles (aus dem Claude-Design-Prototyp übertragen) */
html,body{margin:0;padding:0;background:#0e0e11;height:100%}
*{box-sizing:border-box;font-family:'Outfit',sans-serif;-webkit-tap-highlight-color:transparent}
a{color:#c0a2f7}a:hover{color:#dcc9fb}
::-webkit-scrollbar{display:none}
input::placeholder,textarea::placeholder{color:#6f6880}
button{font-family:'Outfit',sans-serif}
#audio{display:none}

@keyframes vloop{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes eq1{0%,100%{height:5px}50%{height:13px}}
@keyframes eq2{0%,100%{height:11px}50%{height:4px}}
@keyframes eq3{0%,100%{height:7px}50%{height:14px}}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Login ---------- */
.login{min-height:100dvh;min-height:var(--appvh,100dvh);max-width:520px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:calc(36px + env(safe-area-inset-top)) 30px 36px;background:radial-gradient(130% 70% at 50% 0%,#241a3a 0%,#0e0e11 62%);color:#f2eff7}
.login-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:40px}
.login-logo{width:78px;height:78px;border-radius:24px;background:linear-gradient(135deg,#7b5cd6,#c9a6ff);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 40px rgba(139,102,224,.45)}
.login-title{font-size:34px;font-weight:800;letter-spacing:-.5px}
.login-sub{font-size:14px;color:#a09aae;margin-top:-8px}
.login-form{display:flex;flex-direction:column;gap:12px}
.login-form input{width:100%;background:#1e1c26;border:1px solid #2e2a3c;border-radius:14px;padding:15px 16px;color:#f2eff7;font-size:16px;outline:none}
.login-err{color:#ff9db0;font-size:13.5px;padding:0 4px;display:none}
.login-err.show{display:block}
.btn-primary{background:#c0a2f7;color:#17121f;border:none;border-radius:14px;padding:15px;text-align:center;font-weight:700;font-size:16px;cursor:pointer;margin-top:4px;width:100%}
.btn-primary:active{transform:scale(.98)}
.login-note{text-align:center;font-size:12.5px;color:#6f6880;margin-top:26px}

/* ---------- App-Rahmen ---------- */
.app{height:100dvh;height:var(--appvh,100dvh);max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:#0e0e11;color:#f2eff7;position:relative;overflow:hidden;padding-top:env(safe-area-inset-top)}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.screen{padding:22px 18px 150px}
.screen.detail-screen{padding-top:16px}

.h1row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.h1{font-size:24px;font-weight:800}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#7b5cd6,#c9a6ff);display:flex;align-items:center;justify-content:center;font-weight:700;color:#17121f;font-size:15px}
.h2row{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}
.h2{font-size:17px;font-weight:700}
.pillbtn{color:#17121f;background:#c0a2f7;font-size:13px;font-weight:700;border-radius:20px;padding:7px 14px;cursor:pointer;border:none}
.ghostbtn{font-size:13px;color:#a09aae;border:1px solid #2e2a3c;border-radius:20px;padding:6px 14px;cursor:pointer;background:none}
.linkbtn{display:flex;align-items:center;gap:6px;color:#c0a2f7;font-size:13.5px;font-weight:600;cursor:pointer;background:none;border:none;padding:0}
.empty{color:#6f6880;font-size:13.5px;padding:6px 0}

/* ---------- Karten-Reihen (horizontal) ---------- */
.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -18px;padding:0 18px 6px}
.card{flex-shrink:0;cursor:pointer}
.card-resume{width:150px}
.card-pod{width:138px}
.cov{border-radius:12px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-weight:800;color:rgba(255,255,255,.85);overflow:hidden;position:relative}
.cov.vanim{background-size:400% 400%;animation:vloop 8s ease infinite}
.cov img,.cov video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-resume .cov{width:150px;height:150px;font-size:40px;align-items:flex-end;justify-content:flex-start;padding:10px}
.card-pod .cov{width:138px;height:138px;font-size:40px}
.resume-play{width:34px;height:34px;border-radius:50%;background:#c0a2f7;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.minibar{height:3px;background:#2e2a3c;border-radius:2px;margin-top:8px}
.minibar>div{height:3px;background:#c0a2f7;border-radius:2px}
.card-title{font-size:13.5px;font-weight:600;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:12px;color:#a09aae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Listen-Zeilen ---------- */
.row{display:flex;align-items:center;gap:12px;padding:7px 0;cursor:pointer}
.row .cov{width:50px;height:50px;border-radius:8px;flex-shrink:0;font-size:18px;font-weight:700}
.row-main{flex:1;min-width:0}
.row-titlewrap{display:flex;align-items:center;gap:8px}
.row-title{font-size:15px;font-weight:600;color:#f2eff7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-title.cur{color:#c0a2f7}
.row-sub{font-size:12.5px;color:#a09aae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{padding:8px;cursor:pointer;background:none;border:none;display:flex;align-items:center;flex-shrink:0}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px;flex-shrink:0}
.eq div{width:3px;background:#c0a2f7;border-radius:2px}
.eq div:nth-child(1){animation:eq1 .9s ease infinite}
.eq div:nth-child(2){animation:eq2 .8s ease infinite}
.eq div:nth-child(3){animation:eq3 1s ease infinite}
.chev{flex-shrink:0}

/* ---------- Suche ---------- */
.searchbox{display:flex;align-items:center;gap:10px;background:#1e1c26;border:1px solid #2e2a3c;border-radius:14px;padding:12px 14px}
.searchbox input{flex:1;background:none;border:none;outline:none;color:#f2eff7;font-size:15.5px}
.sr-h{font-size:15px;font-weight:700;margin:20px 0 6px;color:#a09aae}
.sr-empty{text-align:center;color:#6f6880;font-size:14px;margin-top:48px}

/* ---------- Detail ---------- */
.det-back{display:flex;align-items:center;gap:6px;color:#a09aae;font-size:14px;cursor:pointer;padding:4px 0 14px;background:none;border:none}
.det-head{display:flex;gap:16px;align-items:flex-end;margin-bottom:14px}
.det-cov{width:118px;height:118px;border-radius:12px;flex-shrink:0;font-size:38px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.det-title{font-size:21px;font-weight:800;line-height:1.15}
.det-sub{font-size:13px;color:#a09aae;margin-top:6px}
.det-desc{font-size:13.5px;color:#a09aae;line-height:1.5;margin-bottom:16px}
.det-actions{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.det-play{display:flex;align-items:center;gap:8px;background:#c0a2f7;color:#17121f;border-radius:24px;padding:11px 22px;font-weight:700;font-size:14.5px;cursor:pointer;border:none}
.det-row{display:flex;align-items:center;gap:12px;padding:9px 0;cursor:pointer;border-bottom:1px solid #1b1b21}
.det-row .cov{width:46px;height:46px;border-radius:8px;flex-shrink:0;font-size:16px;font-weight:700}
.det-state{font-size:12px;color:#a09aae;margin-top:2px}
.det-bar{height:3px;background:#2e2a3c;border-radius:2px;margin-top:6px;max-width:180px}
.det-bar>div{height:3px;background:#c0a2f7;border-radius:2px}
.det-row .row-title{font-size:14.5px}

/* ---------- Admin ---------- */
.adm-row{display:flex;align-items:center;gap:12px;padding:8px 0}
.adm-row .cov{width:46px;height:46px;border-radius:8px;flex-shrink:0;font-size:17px;font-weight:700}
.adm-title{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-sub{font-size:12px;color:#a09aae}
.adm-chapbtn{font-size:12.5px;color:#c0a2f7;border:1px solid #4a3e66;border-radius:16px;padding:5px 11px;cursor:pointer;flex-shrink:0;background:none}
.badge-video{font-size:10.5px;color:#c0a2f7;border:1px solid #4a3e66;border-radius:10px;padding:2px 8px;flex-shrink:0}
.user-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#1b1b21;border-radius:12px;margin-bottom:8px}
.user-name{font-size:15px;font-weight:700;letter-spacing:.3px}
.user-meta{font-size:12.5px;color:#6f6880}
.badge-admin{font-size:10.5px;color:#8fd8a0;border:1px solid #2f4a3a;border-radius:10px;padding:2px 8px;margin-left:8px}

/* ---------- Unterer Bereich: Mini-Player + Nav ---------- */
.bottom{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(14,14,17,0) 0%,#0e0e11 30%);padding-top:18px}
.mini{margin:0 10px 8px;background:#221f2e;border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.mini-inner{display:flex;align-items:center;gap:11px;padding:8px 12px 8px 8px}
.mini .cov{width:42px;height:42px;border-radius:7px;flex-shrink:0;font-size:15px;font-weight:700}
.mini-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-sub{font-size:11.5px;color:#a09aae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-btn{width:38px;height:38px;border-radius:50%;background:#f2eff7;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;border:none}
.mini-track{height:2.5px;background:#3a3745;margin:0 8px 6px}
.mini-track>div{height:2.5px;background:#c0a2f7}
.nav{display:flex;background:#14131a;border-top:1px solid #221f2e;padding:8px 0 calc(10px + env(safe-area-inset-bottom))}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;background:none;border:none;padding:0}
.nav-item span{font-size:10.5px;color:#8d86a0;font-weight:600}
.nav-item svg{stroke:#8d86a0}
.nav-item.on span{color:#c0a2f7}
.nav-item.on svg{stroke:#c0a2f7}
.nav-item.hidden{display:none}

/* ---------- Vollbild-Player ---------- */
.player{position:absolute;inset:0;z-index:50;background:linear-gradient(180deg,#2c2144 0%,#161320 52%,#0e0e11 100%);display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 24px calc(20px + env(safe-area-inset-bottom))}
.pl-top{display:flex;align-items:center;justify-content:space-between}
.pl-ctx{font-size:12px;font-weight:700;color:#a09aae;letter-spacing:1.5px;text-transform:uppercase}
.pl-covwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0;min-height:0}
.pl-cov{width:min(78vw,340px);aspect-ratio:1;border-radius:16px;font-size:72px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.pl-meta{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pl-title{font-size:20px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-sub{font-size:14px;color:#a09aae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.pl-seek{padding:8px 0;cursor:pointer}
.pl-seektrack{height:4px;background:rgba(255,255,255,.16);border-radius:3px;position:relative}
.pl-seekfill{height:4px;background:#c0a2f7;border-radius:3px;position:relative;width:0}
.pl-knob{position:absolute;right:-6px;top:-4px;width:12px;height:12px;border-radius:50%;background:#f2eff7}
.pl-times{display:flex;justify-content:space-between;font-size:11.5px;color:#a09aae;margin-bottom:8px}
.pl-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pl-skip{padding:8px;cursor:pointer;position:relative;background:none;border:none}
.pl-skipnum{position:absolute;left:0;right:0;top:19px;text-align:center;font-size:8px;font-weight:700;color:#f2eff7}
.pl-play{width:66px;height:66px;border-radius:50%;background:#f2eff7;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(192,162,247,.25);border:none}
.pl-play:active{transform:scale(.95)}
.pl-vol{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pl-volbar{flex:1;padding:8px 0;cursor:pointer}
.pl-voltrack{height:4px;background:rgba(255,255,255,.16);border-radius:3px}
.pl-volfill{height:4px;background:#a09aae;border-radius:3px}
.pl-extras{display:flex;align-items:center;justify-content:space-between}
.pl-speed{font-size:13px;font-weight:700;color:#f2eff7;border:1px solid #3a3448;border-radius:16px;padding:6px 13px;cursor:pointer;background:none}
.pl-extra{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#a09aae;cursor:pointer;padding:6px 10px;background:none;border:none}
.pl-extra.on{color:#c0a2f7}
.pl-extra.on svg{stroke:#c0a2f7}

/* ---------- Sheets ---------- */
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:60}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:61;background:#1b1b21;border-radius:20px 20px 0 0;padding:14px 20px calc(26px + env(safe-area-inset-bottom));max-height:78%;overflow-y:auto}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:#3a3745;margin:0 auto 16px}
.sheet-h{font-size:17px;font-weight:800;margin-bottom:14px}
.sheet-sub{font-size:13px;color:#a09aae;margin-bottom:14px;margin-top:-10px}
.sheet-row{display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer;border-bottom:1px solid #26232f}
.sheet-row .cov{width:42px;height:42px;border-radius:8px;flex-shrink:0;font-size:15px;font-weight:700}
.sheet-opt{padding:13px 4px;font-size:15px;font-weight:600;color:#f2eff7;border-bottom:1px solid #26232f;cursor:pointer}
.sheet-opt.on{color:#c0a2f7}
.sheet-opt.dim{color:#a09aae}
.form{display:flex;flex-direction:column;gap:11px}
.form input,.form textarea{width:100%;background:#26232f;border:1px solid #35313f;border-radius:12px;padding:13px 14px;color:#f2eff7;font-size:15px;outline:none;resize:none;font-family:'Outfit',sans-serif}
.form-label{font-size:13px;color:#a09aae;margin-top:2px}
.covpick{display:flex;gap:10px}
.covpick div{width:48px;height:48px;border-radius:10px;cursor:pointer;border:2px solid transparent}
.covpick div.sel{border-color:#c0a2f7}
.filebtn{display:flex;align-items:center;gap:10px;background:#26232f;border:1px dashed #4a4458;border-radius:12px;padding:13px 14px;color:#a09aae;font-size:14px;cursor:pointer}
.filebtn input{display:none}
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:#26232f;border-radius:12px;padding:13px 14px;cursor:pointer}
.toggle-title{font-size:14.5px;font-weight:600;color:#f2eff7}
.toggle-sub{font-size:12px;color:#a09aae}
.toggle{width:44px;height:26px;border-radius:14px;background:#3a3745;position:relative;flex-shrink:0;transition:background .2s}
.toggle.on{background:#c0a2f7}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.toggle.on::after{left:21px}
.btn-sheet{background:#c0a2f7;color:#17121f;border-radius:12px;padding:13px;text-align:center;font-weight:700;font-size:15px;cursor:pointer;margin-top:4px;border:none;width:100%}
.btn-sheet:disabled{opacity:.55}

/* ---------- Toast ---------- */
.toast-wrap{position:absolute;left:0;right:0;bottom:120px;display:flex;justify-content:center;z-index:70;pointer-events:none}
.toast{background:#c0a2f7;color:#17121f;font-size:13.5px;font-weight:700;border-radius:20px;padding:9px 18px;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:toastin .18s ease}