@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{--bg:#050512;--card:rgba(255,255,255,.075);--line:rgba(255,255,255,.13);--text:#f8fafc;--muted:#a9b4c7;--green:#1ed760;--cyan:#22d3ee;--violet:#8b5cf6;--pink:#ec4899;--orange:#fb923c;--red:#fb7185;--player-height:118px}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding-bottom:var(--player-height);font-family:'Nunito',Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 8% 12%,rgba(30,215,96,.35),transparent 24%),radial-gradient(circle at 90% 10%,rgba(34,211,238,.28),transparent 26%),radial-gradient(circle at 65% 88%,rgba(236,72,153,.22),transparent 30%),linear-gradient(135deg,#03040b,#0a1024 50%,#050512);overflow-x:hidden}a{color:inherit;text-decoration:none}.app{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:calc(100vh - var(--player-height))}.sidebar{position:sticky;top:0;height:calc(100vh - var(--player-height));padding:24px;background:linear-gradient(180deg,rgba(9,12,26,.92),rgba(6,8,18,.86));border-right:1px solid var(--line);backdrop-filter:blur(26px);z-index:5}.logo{position:relative;display:flex;align-items:center;gap:13px;margin-bottom:30px;font-size:1.55rem;font-weight:900;letter-spacing:-.055em}.logo:before{content:"";width:52px;height:52px;border-radius:20px;background:conic-gradient(from 210deg,var(--green),var(--cyan),var(--violet),var(--pink),var(--orange),var(--green));box-shadow:0 18px 42px rgba(30,215,96,.22)}.logo:after{content:"♪";position:absolute;left:18px;top:10px;color:#06110a;font-weight:900;font-size:1.35rem}.nav{display:grid;gap:10px}.nav a{min-height:50px;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:18px;color:var(--muted);font-weight:900;border:1px solid transparent;transition:.22s}.nav a:hover,.nav a.active{color:var(--text);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.055));border-color:var(--line);transform:translateX(5px)}
.main{width:100%;max-width:1560px;padding:32px}.hero{position:relative;overflow:hidden;min-height:330px;display:grid;align-items:end;padding:clamp(26px,5vw,56px);margin-bottom:24px;border:1px solid var(--line);border-radius:42px;background:linear-gradient(120deg,rgba(30,215,96,.24),rgba(34,211,238,.12) 38%,rgba(139,92,246,.20) 70%,rgba(236,72,153,.18)),rgba(255,255,255,.075);box-shadow:0 28px 90px rgba(0,0,0,.45);backdrop-filter:blur(28px)}.hero:before{content:"";position:absolute;right:70px;top:45px;width:230px;height:230px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.16) 0 2px,transparent 3px 14px),conic-gradient(var(--green),var(--cyan),var(--violet),var(--pink),var(--green));opacity:.42;animation:spinDisc 16s linear infinite}.hero:after{content:"DIE BRENNERSTUBE";position:absolute;left:34px;bottom:-18px;font-size:clamp(3.5rem,12vw,12rem);font-weight:900;letter-spacing:-.08em;color:rgba(255,255,255,.045);white-space:nowrap}@keyframes spinDisc{to{transform:rotate(360deg)}}.badge{width:max-content;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;color:#d1fae5;background:rgba(30,215,96,.16);border:1px solid rgba(30,215,96,.32);font-weight:900}.badge:before{content:"●";color:var(--green);filter:drop-shadow(0 0 8px var(--green))}
h1{position:relative;z-index:1;max-width:900px;margin:18px 0 12px;font-size:clamp(2.8rem,7vw,7.3rem);line-height:.86;letter-spacing:-.085em}h2{margin:0 0 8px;font-size:clamp(1.55rem,2.4vw,2.35rem);letter-spacing:-.045em}h3{margin:0 0 5px}p{color:var(--muted);line-height:1.7}.grid{display:grid;gap:20px}.grid-2{grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.045));border-radius:30px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.28);backdrop-filter:blur(26px)}.stat{min-height:150px;display:flex;flex-direction:column;justify-content:space-between}.stat small{color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;font-weight:900}.stat strong{font-size:clamp(2.2rem,4vw,3.4rem);letter-spacing:-.06em}
.search-row{display:grid;grid-template-columns:minmax(240px,560px) auto;gap:12px;align-items:center;margin:16px 0 22px}.input,select,textarea{width:100%;min-height:52px;border:1px solid var(--line);border-radius:18px;background:rgba(0,0,0,.30);color:var(--text);padding:13px 16px;font:inherit;font-weight:800;outline:none}.input:focus,select:focus,textarea:focus{border-color:rgba(30,215,96,.65);box-shadow:0 0 0 5px rgba(30,215,96,.13)}option{color:#111827}.button{min-height:52px;border:0;border-radius:18px;padding:13px 20px;font:inherit;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--green),#7dff9e);color:#03140a;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:.22s;box-shadow:0 18px 36px rgba(30,215,96,.19)}.button:hover{transform:translateY(-2px) scale(1.015)}.button.alt{color:var(--text);background:rgba(255,255,255,.105);border:1px solid var(--line);box-shadow:none}.button.violet{color:#fff;background:linear-gradient(135deg,var(--violet),#c084fc)}.button.danger{color:#fff;background:linear-gradient(135deg,var(--red),#f43f5e)}.button.small{min-height:42px;padding:9px 14px;border-radius:15px;font-size:.92rem}
.track{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:center;min-height:124px;padding:16px;margin-bottom:14px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.04));transition:.24s}.track:hover{transform:translateY(-3px);box-shadow:0 22px 48px rgba(0,0,0,.22)}.cover{width:96px;height:96px;border-radius:24px;object-fit:cover;background:conic-gradient(from 180deg,var(--green),var(--cyan),var(--violet),var(--pink),var(--orange),var(--green));display:flex;align-items:center;justify-content:center;font-size:40px;border:1px solid rgba(255,255,255,.20);box-shadow:0 18px 42px rgba(0,0,0,.34)}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}.chip{min-height:30px;display:inline-flex;align-items:center;border:1px solid var(--line);color:#d1d9e6;background:rgba(0,0,0,.24);padding:5px 11px;border-radius:999px;font-size:.82rem;font-weight:900}.actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;min-width:220px}
.player{position:fixed;left:0;right:0;bottom:0;min-height:var(--player-height);z-index:60;display:grid;grid-template-columns:380px minmax(260px,1fr) 270px;gap:22px;align-items:center;padding:16px 26px;background:linear-gradient(90deg,rgba(30,215,96,.09),transparent 35%,rgba(139,92,246,.08)),rgba(3,5,12,.955);border-top:1px solid var(--line);backdrop-filter:blur(30px);box-shadow:0 -28px 80px rgba(0,0,0,.50)}.player-track{display:flex;align-items:center;gap:14px;min-width:0}.player-cover{width:76px;height:76px;border-radius:22px;background:conic-gradient(var(--green),var(--cyan),var(--violet),var(--pink),var(--green));display:flex;align-items:center;justify-content:center;overflow:hidden}.player-cover img{width:100%;height:100%;object-fit:cover}.player-title{max-width:260px;font-weight:900;font-size:1.04rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{max-width:260px;color:var(--muted);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{display:grid;gap:10px;justify-items:center}.round-btn{width:54px;height:54px;border-radius:999px;border:0;color:#04140a;background:linear-gradient(135deg,var(--green),#86efac);font-weight:900;cursor:pointer}.progress{display:flex;align-items:center;gap:10px;width:min(100%,760px);color:var(--muted);font-size:.82rem;font-weight:900}.progress input{width:100%;accent-color:var(--green)}.volume{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--muted);font-weight:900}.volume input{accent-color:var(--green)}
.notice,.ok,.error{padding:14px 16px;border-radius:18px;margin:12px 0;font-weight:900}.notice.ok,.ok{color:#bbf7d0;background:rgba(30,215,96,.14);border:1px solid rgba(30,215,96,.32)}.notice.error,.error{color:#fecdd3;background:rgba(251,113,133,.15);border:1px solid rgba(251,113,133,.34)}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:22px}.auth-card{width:min(100%,560px)}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{color:var(--text);font-weight:900;text-align:left;padding:10px 12px}.table td{color:var(--muted);background:rgba(255,255,255,.055);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 12px}.table td:first-child{border-left:1px solid var(--line);border-radius:16px 0 0 16px}.table td:last-child{border-right:1px solid var(--line);border-radius:0 16px 16px 0}pre{white-space:pre-wrap;color:#dbeafe;background:rgba(0,0,0,.34);padding:18px;border-radius:20px;border:1px solid var(--line)}
.visualizer-card,.donation-card{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:center;margin:20px 0;padding:26px;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:radial-gradient(circle at 15% 20%,rgba(30,215,96,.20),transparent 30%),linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045));box-shadow:0 28px 80px rgba(0,0,0,.32);backdrop-filter:blur(26px)}.music-visualizer{height:170px;display:grid;grid-template-columns:repeat(32,1fr);align-items:end;gap:7px;padding:20px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25)}.music-visualizer .vbar{display:block;min-height:12px;border-radius:999px;background:linear-gradient(to top,var(--green),var(--cyan),var(--violet),var(--pink));opacity:.45;transform-origin:bottom center;transition:height .08s linear,opacity .12s,transform .12s}body.is-playing .music-visualizer{border-color:rgba(30,215,96,.28);box-shadow:0 0 40px rgba(30,215,96,.10)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.06)}.setting-row small{color:var(--muted);font-weight:800}.setting-row input[type="checkbox"]{width:54px;height:28px;accent-color:var(--green);cursor:pointer}.paypal-button{background:linear-gradient(135deg,#ffc439,#ffdd76);color:#111827;box-shadow:0 18px 36px rgba(255,196,57,.22);white-space:nowrap}
@media(max-width:1180px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line)}.nav{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.main{padding:20px}.grid-2,.grid-4,.visualizer-card,.donation-card{grid-template-columns:1fr}.track{grid-template-columns:96px 1fr}.actions{grid-column:1/-1;justify-content:flex-start}.player{grid-template-columns:1fr;gap:12px}body{padding-bottom:280px}.volume{justify-content:center}}@media(max-width:650px){.hero{min-height:280px;border-radius:30px;padding:24px}.hero:before{width:150px;height:150px;right:22px;top:28px}h1{font-size:3rem}.search-row{grid-template-columns:1fr}.track{grid-template-columns:1fr}.cover{width:100%;height:210px}.actions{min-width:0}.music-visualizer{grid-template-columns:repeat(16,1fr)}.music-visualizer .vbar:nth-child(n+17){display:none}}