/* RecordsRadio – Global Stylesheet */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@300;400;600;700&family=Barlow+Condensed:wght@400;600;700;900&display=swap'); html{overflow-x:hidden;width:100%} img,video,svg{max-width:100%} :root{ /* RecordsRadio – Default RED Theme, Hintergrund im Logo-Look (Pink/Lila) */ --red:#c8001a; --red2:#e02030; --blue:#3b82f6; --dark:#090012; --dark2:#0f0019; --dark3:#160124; --dark4:#200233; --card:rgba(255,0,140,.035); --border:rgba(255,0,140,.08); --text:#e8e8e8; --muted:#7a6090; --muted2:#4a3060; --green:#22c55e; --yellow:#f59e0b; --purple:#2A003F; } /* ── PINK THEME ── */ body.theme-pink { --red:#FF008C; --red2:#FF4DB3; --dark:#090012; --dark2:#0d0018; --dark3:#120020; --dark4:#1a0030; --card:rgba(255,0,140,.04); --border:rgba(255,0,140,.12); --text:#f0e8ff; --muted:#7a6090; --muted2:#4a3060; } body.theme-pink .logo-name em { background:linear-gradient(90deg,#FF008C,#FF4DB3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } body.theme-pink .sec-t i { background:linear-gradient(90deg,#FF008C,#FF4DB3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } body.theme-pink .ticker { background:linear-gradient(90deg,#FF008C,#c800a0); } body.theme-pink .nav-live { background:#16a34a !important; } body.theme-pink .play-btn { background:#FF008C; box-shadow:0 0 18px color-mix(in srgb, var(--red) 28%, transparent); } body.theme-pink .submit-btn { background:linear-gradient(135deg,#FF008C,#c800a0) !important; } body.theme-pink .ph-title span { background:linear-gradient(90deg,#FF008C,#FF4DB3); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } body.theme-pink::before { content:''; position:fixed; top:0; left:0; right:0; height:300px; pointer-events:none; z-index:0; background:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(255,0,140,.07) 0%,transparent 70%); } /* ── LIGHT THEME ── */ body.theme-light { --dark:#f0f0f5; --dark2:#e8e8f0; --dark3:#dcdce8; --dark4:#d0d0e0; --card:rgba(0,0,0,.04); --border:rgba(0,0,0,.1); --text:#111122; --muted:#667; --muted2:#999; } body.theme-light header { background:rgba(240,240,245,.97); } body.theme-light footer { background:#e0e0ea; } body.theme-light .logo-name { color:#111; } body.theme-light nav a { color:#555; } body.theme-light nav a:hover { color:#111; background:rgba(0,0,0,.05); } body.theme-light .p-title,.body.theme-light .ch-title,.body.theme-light .news-title { color:#111; } body.theme-light .ticker { background:#c8001a; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--dark);color:var(--text);font-family:'Barlow',sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden;position:relative} body.daymode{ --dark:#1a1024; --dark2:#221530; --dark3:#2c1c3d; --dark4:#382548; --card:rgba(255,0,140,.06); --border:rgba(255,0,140,.14); --text:#f5f0ff; --muted:#a996c2; --muted2:#7a6699; } /* Saisonale Hintergrund-Tönung - dezenter Farbverlauf, liegt hinter allem Inhalt, stört Lesbarkeit nicht */ body.season-halloween,body.season-christmas,body.season-newyear,body.season-autumn,body.season-easter{position:relative} body.season-halloween::before,body.season-christmas::before,body.season-newyear::before,body.season-autumn::before,body.season-easter::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; } body.season-halloween::before{background-image:url('seasons/bg_halloween.jpg');background-size:cover;background-position:center bottom;opacity:.5} body.season-christmas::before{background-image:url('seasons/bg_christmas.jpg');background-size:cover;background-position:center bottom;opacity:.5} body.season-newyear::before{background-image:url('seasons/bg_newyear.jpg');background-size:cover;background-position:center bottom;opacity:.5} body.season-autumn::before{background-image:url('seasons/bg_autumn.jpg');background-size:cover;background-position:center bottom;opacity:.5} body.season-easter::before{background-image:url('seasons/bg_easter.jpg');background-size:cover;background-position:center bottom;opacity:.4} body.season-halloween::before,body.season-christmas::before,body.season-newyear::before,body.season-autumn::before,body.season-easter::before{background-repeat:no-repeat;background-attachment:fixed} body.season-halloween header,body.season-christmas header,body.season-newyear header,body.season-autumn header,body.season-easter header, body.season-halloween .wrap,body.season-christmas .wrap,body.season-newyear .wrap,body.season-autumn .wrap,body.season-easter .wrap, body.season-halloween footer,body.season-christmas footer,body.season-newyear footer,body.season-autumn footer,body.season-easter footer{ position:relative;z-index:1; } /* TICKER */ .ticker{height:30px;background:#c8001a;border-bottom:1px solid #a00016;overflow:hidden;display:flex;align-items:center} .ticker-tag{background:#c8001a;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:2px;padding:0 16px;height:100%;display:flex;align-items:center;flex-shrink:0;gap:6px;white-space:nowrap} .ticker-wrap{flex:1;overflow:hidden;position:relative} .ticker-inner{display:inline-flex;white-space:nowrap;animation:tick 50s linear infinite;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:#fff;letter-spacing:.5px} .ticker-inner span{padding:0 48px;display:inline-flex;align-items:center;gap:6px} .ticker-inner span b{color:#FFD700;font-weight:700} .ticker-inner span::before{content:'★';color:#FFD700;margin-right:8px} .ticker-inner span::after{content:'★';color:#FFD700;margin-left:8px} .ticker-inner:hover{animation-play-state:paused} @keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* RUBRIK-FARBEN (wie bei Verlinkung, jede Rubrik ihre eigene Farbe) */ :root{ --cat-start:var(--red); --cat-news:#3b82f6; --cat-charts:#f59e0b; --cat-wunschbox:#FF008C; --cat-chat:#84cc16; --cat-sendeplan:#9333ea; --cat-team:#22c55e; --cat-kuenstler:#ea580c; --cat-partner:#14b8a6; --cat-faq:#06b6d4; --cat-verlinkung:#00ffc8; --cat-bewerbung:#6366f1; --cat-impressum:#94a3b8; --cat-schaubox:#d946ef; } body.pg-start{--cat:var(--cat-start)} body.pg-news{--cat:var(--cat-news)} body.pg-charts{--cat:var(--cat-charts)} body.pg-wunschbox{--cat:var(--cat-wunschbox)} body.pg-chat{--cat:var(--cat-chat)} body.pg-sendeplan{--cat:var(--cat-sendeplan)} body.pg-team{--cat:var(--cat-team)} body.pg-kuenstler{--cat:var(--cat-kuenstler)} body.pg-partner{--cat:var(--cat-partner)} body.pg-faq{--cat:var(--cat-faq)} body.pg-verlinkung{--cat:var(--cat-verlinkung)} body.pg-bewerbung{--cat:var(--cat-bewerbung)} body.pg-impressum{--cat:var(--cat-impressum)} body.pg-schaubox{--cat:var(--cat-schaubox)} /* HEADER */ header{position:sticky;top:0;z-index:1010;border-bottom:1px solid var(--border)} header::after{content:'';position:absolute;inset:0;background:rgba(8,8,15,.97);backdrop-filter:blur(18px);z-index:-1} header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cat-start),var(--cat-news),var(--cat-charts),var(--cat-wunschbox),var(--cat-chat),var(--cat-sendeplan),var(--cat-team),var(--cat-kuenstler),var(--cat-partner),var(--cat-faq),var(--cat-verlinkung),var(--cat-bewerbung),var(--cat-schaubox),var(--cat-impressum));z-index:2} .nav-wrap{max-width:1420px;margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;gap:12px} .logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0} .logo-box{width:35px;height:35px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px} .logo-name{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:3px;color:#fff} .logo-name em{color:var(--red);font-style:normal} nav{display:flex;align-items:center;gap:2px;margin-left:auto;overflow-x:auto;max-width:100%;scrollbar-width:auto;scrollbar-color:#9333ea rgba(255,255,255,.1);padding-bottom:18px;margin-bottom:-18px} nav::-webkit-scrollbar{height:12px} nav::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#c8001a,#f59e0b,#22c55e,#3b82f6,#9333ea,#ec4899);border-radius:8px;border:2px solid var(--dark)} nav::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:8px} .nav-live{flex-shrink:0} .nav-clock{flex-shrink:0} nav a[href="suche.html"]{flex-shrink:0} .nav-icon-link{font-size:15px!important;padding:6px 9px!important} .nav-wrap{height:88px;padding-top:0;padding-bottom:0;align-items:center} nav a{color:var(--muted);text-decoration:none;font-family:'Barlow Condensed',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;padding:7px 12px;border-radius:6px;transition:color .2s,background .2s,border-color .2s;white-space:nowrap;border-bottom:2px solid transparent} nav a[href="index.html"]{--cc:var(--cat-start)} nav a[href="news.html"]{--cc:var(--cat-news)} nav a[href="charts.html"]{--cc:var(--cat-charts)} nav a[href="wunschbox.html"]{--cc:var(--cat-wunschbox)} nav a[href="chat.html"]{--cc:var(--cat-chat)} nav a[href="schaubox.html"]{--cc:var(--cat-schaubox)} nav a[href="sendeplan.html"]{--cc:var(--cat-sendeplan)} nav a[href="team.html"]{--cc:var(--cat-team)} nav a[href="kuenstler.html"]{--cc:var(--cat-kuenstler)} nav a[href="partner.html"]{--cc:var(--cat-partner)} nav a[href="faq.html"]{--cc:var(--cat-faq)} nav a[href="verlinkung.html"]{--cc:var(--cat-verlinkung)} nav a[href="bewerbung.html"]{--cc:var(--cat-bewerbung)} nav a[href="impressum.html"]{--cc:var(--cat-impressum)} nav a:hover{color:var(--text);background:rgba(255,255,255,.05);border-bottom-color:var(--cc,transparent)} nav a.act{color:#fff;background:color-mix(in srgb, var(--cc,var(--red)) 16%, transparent);border-bottom-color:var(--cc,var(--red))} .nav-live{background:#16a34a!important;color:#fff!important;border-radius:14px!important;display:inline-flex!important;align-items:center;gap:5px;padding:5px 12px!important;margin-left:6px} .live-dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:blink 1.1s ease-in-out infinite;flex-shrink:0} @keyframes blink{50%{opacity:.15}} .hbg{display:none;cursor:pointer;padding:5px;flex-direction:column;gap:5px;margin-left:8px;position:relative;z-index:1001} .hbg span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:.25s;transform-origin:center} .hbg.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hbg.open span:nth-child(2){opacity:0} .hbg.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* PAGE HERO */ .page-hero{background:var(--dark2);padding:44px 24px 32px;text-align:center;border-bottom:1px solid var(--border);border-top:3px solid var(--cat,var(--red));position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% -20%,color-mix(in srgb, var(--cat,var(--red)) 12%, transparent) 0%,transparent 65%)} .page-hero-inner{position:relative;z-index:1;max-width:800px;margin:0 auto} .ph-tag{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--cat,var(--red));margin-bottom:10px} .ph-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,6vw,60px);letter-spacing:4px;color:#fff;line-height:1;margin-bottom:8px} .ph-title span{color:var(--cat,var(--red))} .ph-sub{font-size:13px;color:var(--muted);letter-spacing:.5px} /* LAYOUT */ .wrap{max-width:1420px;margin:0 auto;padding:0 22px} .sec{padding:54px 0} .alt{background:var(--dark2)} .sec-hd{margin-bottom:30px} .sec-t{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:3px;color:#fff;line-height:1} .sec-t i{color:var(--red);font-style:normal} .sec-s{font-size:13px;color:var(--muted);margin-top:5px} /* CARDS */ .card{background:var(--card);border:1px solid var(--border);border-radius:12px} .card-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .card-t{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .card-body{padding:20px} /* PLAYER */ .player{background:var(--dark3);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55)} .player-top{display:flex;min-height:108px} .cover{width:108px;flex-shrink:0;background:var(--dark);position:relative;overflow:hidden} .cover-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;opacity:0;transition:opacity .5s} .cover-img.loaded{opacity:1} .cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px} .cover-fallback .vinyl{font-size:38px;animation:spin-slow 4s linear infinite paused} .vinyl.spinning{animation-play-state:running} @keyframes spin-slow{to{transform:rotate(360deg)}} .cover-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;background:rgba(0,0,0,.6)} .cover-load.show{opacity:1} .spinner{width:22px;height:22px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--red);border-radius:50%;animation:spin .7s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .p-info{flex:1;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;min-width:0} .p-station{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red)} .p-artist{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px} .p-title{font-size:18px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .p-next{font-size:12px;color:var(--text)} .p-next b{color:var(--muted)} .p-next b{color:var(--muted)} .p-controls{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(0,0,0,.22);border-top:1px solid var(--border);flex-wrap:wrap} .play-btn{width:48px;height:48px;border-radius:50%;background:var(--red);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,background .2s;box-shadow:0 0 18px color-mix(in srgb, var(--red) 28%, transparent)} .play-btn:hover{transform:scale(1.07);background:var(--red2)} .play-btn svg{width:19px;height:19px;fill:#fff;margin-left:2px;transition:margin .15s} .play-btn.on svg{margin-left:0} .eq{display:flex;align-items:flex-end;gap:2px;height:16px;opacity:0;transition:opacity .3s} .eq.on{opacity:1} .eq span{display:block;width:3px;background:var(--red);border-radius:1px;animation:eqb .55s ease-in-out infinite alternate} .eq span:nth-child(1){height:5px;animation-delay:.0s} .eq span:nth-child(2){height:13px;animation-delay:.15s} .eq span:nth-child(3){height:9px;animation-delay:.3s} .eq span:nth-child(4){height:15px;animation-delay:.07s} .eq span:nth-child(5){height:7px;animation-delay:.22s} @keyframes eqb{from{transform:scaleY(.3)}to{transform:scaleY(1)}} .vol-wrap{display:flex;align-items:center;gap:8px;flex:1;min-width:100px} .vol-ico{font-size:13px;color:var(--muted)} input.vrange{flex:1;-webkit-appearance:none;height:3px;background:linear-gradient(to right,var(--red) 0%,var(--red) var(--v,80%),rgba(255,255,255,.1) var(--v,80%));border-radius:2px;outline:none;cursor:pointer} input.vrange::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:#fff;border-radius:50%;box-shadow:0 0 4px color-mix(in srgb, var(--red) 40%, transparent)} .vote-wrap{display:flex;align-items:center;gap:7px;margin-left:auto} .vote-lbl{font-size:10px;color:var(--muted);font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase} .vbtn{display:flex;align-items:center;gap:4px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;padding:5px 10px;border-radius:14px;cursor:pointer;transition:all .2s} .vbtn:hover{border-color:#444;color:#fff;background:rgba(255,255,255,.05)} .vbtn.top.on{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:var(--green)} .vbtn.flop.on{background:color-mix(in srgb, var(--red) 10%, transparent);border-color:color-mix(in srgb, var(--red) 40%, transparent);color:var(--red)} .vcnt{font-size:10px;opacity:.65} .p-apps{padding:10px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:rgba(0,0,0,.15)} .apps-lbl{font-size:10px;color:var(--muted);font-family:'Barlow Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;margin-right:3px} .app-pill{display:inline-flex;align-items:center;gap:5px;background:var(--card);border:1px solid var(--border);border-radius:7px;padding:4px 10px;font-size:11px;font-weight:600;color:#999;text-decoration:none;cursor:pointer;transition:all .2s} .app-pill:hover{background:rgba(255,255,255,.06);color:#fff;border-color:#333} /* STICKY PLAYER */ .sticky-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(8,8,15,.97);border-top:1px solid var(--border);backdrop-filter:blur(18px);z-index:800;display:none;align-items:center;gap:12px;padding:7px 18px} .sticky-bar.on{display:flex} .sticky-cover{width:36px;height:36px;border-radius:6px;background:var(--dark3);flex-shrink:0;font-size:18px;display:flex;align-items:center;justify-content:center;overflow:hidden} .sticky-cover img{width:100%;height:100%;object-fit:cover} .sticky-info{flex:1;min-width:0} .sticky-artist{font-size:10px;color:var(--muted);font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase} .sticky-title{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sticky-play{width:34px;height:34px;background:var(--red);border:none;border-radius:50%;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s} .sticky-play:hover{background:var(--red2)} /* STATS */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px} .stat-card{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:16px;text-align:center;transition:border-color .2s} .stat-card:hover{border-color:color-mix(in srgb, var(--red) 20%, transparent)} .stat-n{font-family:'Bebas Neue',sans-serif;font-size:36px;color:#fff;line-height:1;letter-spacing:1px} .stat-l{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:4px} .stat-live{color:var(--green);font-size:9px;font-weight:700;margin-top:3px;animation:blink 1s infinite;letter-spacing:1px} .ctry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:9px} .ctry-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 13px;display:flex;align-items:center;gap:10px} .ctry-flag{font-size:20px;flex-shrink:0} .ctry-info{flex:1;min-width:0} .ctry-name{font-size:13px;font-weight:600;color:#ddd} .ctry-bar-bg{height:3px;background:rgba(255,255,255,.07);border-radius:2px;margin-top:4px} .ctry-bar{height:3px;background:var(--red);border-radius:2px;transition:width .6s} .ctry-num{font-family:'Bebas Neue',sans-serif;font-size:20px;color:#fff;flex-shrink:0} /* NEWS */ .news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .news-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;display:block;transition:transform .2s,border-color .2s} .news-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.13)} .news-img{height:140px;display:flex;align-items:center;justify-content:center;font-size:44px;background:var(--dark3);border-bottom:1px solid var(--border)} .news-body{padding:14px} .news-cat{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:5px} .news-title{font-weight:700;font-size:14px;line-height:1.4;color:#fff;margin-bottom:5px} .news-txt{font-size:12px;color:var(--muted);line-height:1.55;margin-bottom:8px} .news-date{font-size:11px;color:var(--muted2)} /* CHARTS */ .chart-list{list-style:none;display:flex;flex-direction:column;gap:6px} .chart-item{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 13px;transition:background .2s,border-color .2s,box-shadow .2s} .chart-item:hover{background:rgba(255,255,255,.045)} body.pg-charts .chart-item{position:relative;overflow:hidden;border-color:color-mix(in srgb, var(--cat,var(--red)) 30%, var(--border))} body.pg-charts .chart-item::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, var(--red), var(--cat,var(--red)), var(--red));opacity:.7} body.pg-charts .chart-item:hover{border-color:color-mix(in srgb, var(--cat,var(--red)) 55%, var(--border));box-shadow:0 0 18px color-mix(in srgb, var(--cat,var(--red)) 10%, transparent)} .ch-rank{font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--muted2);width:30px;text-align:center;flex-shrink:0;line-height:1} .ch-rank.g{color:#fbbf24}.ch-rank.s{color:#9ca3af}.ch-rank.b{color:#cd7c3e} .ch-ico{width:42px;height:42px;border-radius:6px;background:var(--dark4);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0} .ch-meta{flex:1;min-width:0} .ch-title{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff} .ch-artist{font-size:12px;color:var(--muted)} .ch-right{flex-shrink:0;text-align:right} .ch-vbtn{border:1px solid var(--border);background:none;color:var(--muted);border-radius:12px;padding:3px 9px;font-size:10px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase} .ch-vbtn:hover:not(:disabled){border-color:#555;color:#fff} .ch-vbtn:disabled{opacity:.4;cursor:default} .ch-votes{font-size:10px;color:var(--muted2);margin-top:3px} .ch-trend{font-size:10px} /* FORMS */ .form-card{background:linear-gradient(160deg, rgba(255,255,255,.025), rgba(0,0,0,.15));border:1px solid color-mix(in srgb, var(--cat,var(--red)) 30%, var(--border));border-radius:14px;padding:28px;position:relative;overflow:hidden;transition:border-color .2s, box-shadow .2s} .form-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, var(--red), var(--cat,var(--red)), var(--red));opacity:.7} .form-card:hover{border-color:color-mix(in srgb, var(--cat,var(--red)) 55%, var(--border));box-shadow:0 0 24px color-mix(in srgb, var(--cat,var(--red)) 10%, transparent)} .form-card h3{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:#fff;margin-bottom:3px} .form-card .fc-sub{font-size:13px;color:var(--muted);margin-bottom:20px} .info-card{position:relative;overflow:hidden;border-color:color-mix(in srgb, var(--cat,var(--red)) 30%, var(--border))!important;transition:border-color .2s, box-shadow .2s} .info-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, var(--red), var(--cat,var(--red)), var(--red));opacity:.7} .info-card:hover{border-color:color-mix(in srgb, var(--cat,var(--red)) 55%, var(--border))!important;box-shadow:0 0 24px color-mix(in srgb, var(--cat,var(--red)) 10%, transparent)} .artist-card{position:relative;overflow:hidden;border-color:color-mix(in srgb, var(--cat,var(--red)) 30%, var(--border))!important;transition:border-color .2s, box-shadow .2s} .artist-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, var(--red), var(--cat,var(--red)), var(--red));opacity:.7;z-index:1} .artist-card:hover{border-color:color-mix(in srgb, var(--cat,var(--red)) 55%, var(--border))!important;box-shadow:0 0 24px color-mix(in srgb, var(--cat,var(--red)) 10%, transparent)} .fg{margin-bottom:13px} .fg label{display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .fg input,.fg textarea,.fg select{width:100%;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:7px;padding:9px 12px;color:var(--text);font-family:'Barlow',sans-serif;font-size:14px;outline:none;transition:border-color .2s;resize:vertical;-webkit-appearance:none} .fg input:focus,.fg textarea:focus,.fg select:focus{border-color:rgba(255,255,255,.25)} .fg textarea{min-height:80px} .fg select option{background:var(--dark3)} .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px} @media(max-width:540px){.row2{grid-template-columns:1fr}} .spam-row{display:flex;align-items:center;gap:10px} .spam-q{font-size:14px;color:#bbb;font-weight:600;font-family:'Barlow Condensed',sans-serif} .spam-in{width:70px!important} .submit-btn{width:100%;background:var(--dark4);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:8px;padding:13px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .2s;margin-top:6px} .submit-btn:hover{background:#21213a;border-color:rgba(255,255,255,.2)} /* TEAM */ .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px} .team-card{ background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(0,0,0,.2)); border:1px solid color-mix(in srgb, var(--cat,var(--red)) 35%, var(--border));border-radius:18px; overflow:hidden;text-align:left;position:relative; transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s; } .team-card:hover{transform:translateY(-6px) scale(1.015);border-color:color-mix(in srgb, var(--cat,var(--red)) 70%, var(--border));box-shadow:0 12px 32px color-mix(in srgb, var(--cat,var(--red)) 22%, transparent)} .team-photo{width:100%;height:190px;position:relative;background:linear-gradient(135deg,var(--dark3),var(--dark4));overflow:hidden} .team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .team-card:hover .team-photo img{transform:scale(1.08)} .team-photo-emoji{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px} .team-photo-fade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75) 100%)} .team-role-badge{position:absolute;top:12px;left:12px;font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:20px;backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.3)} .team-since-badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:5px 10px;border-radius:20px} .team-body{padding:16px 18px 18px} .team-name-lg{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1px;color:#fff;line-height:1.1} .team-quote{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.55;font-style:italic;position:relative;padding-left:16px;border-left:2px solid color-mix(in srgb, var(--cat,var(--red)) 60%, var(--border))} .team-social-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap} .team-social-icon{width:30px;height:30px;border-radius:9px;background:var(--dark3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;transition:background .2s,transform .2s} .team-card:hover .team-social-icon{transform:translateY(-1px)} .team-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;margin-top:14px;font-weight:700} .team-status .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor} .team-status.active{color:var(--green)} .team-status.open{color:var(--muted)} /* SCHEDULE */ .sch-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:12px} .sch-table{width:100%;border-collapse:collapse;font-size:13px} .sch-table th{background:rgba(255,255,255,.035);font-family:'Barlow Condensed',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)} .sch-table td{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle} .sch-table tr:last-child td{border-bottom:none} .sch-table tr:hover td{background:rgba(255,255,255,.02)} .sch-time{font-family:'Bebas Neue',sans-serif;font-size:18px;color:#fff;letter-spacing:1px} .sch-live td{background:color-mix(in srgb, var(--red) 4%, transparent)!important} .live-tag{display:inline-flex;align-items:center;gap:4px;background:var(--green);color:#fff;font-size:9px;font-weight:700;letter-spacing:1px;padding:2px 7px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase} .autodj-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.2);font-size:9px;font-weight:700;letter-spacing:1px;padding:2px 7px;border-radius:7px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase} /* TABS */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:22px;overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:8px 13px;background:none;border:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;white-space:nowrap} .tab.on{color:#fff;border-bottom-color:#fff} /* IMPRESSUM */ .imp-block{background:linear-gradient(160deg, rgba(255,255,255,.025), rgba(0,0,0,.15));border:1px solid color-mix(in srgb, var(--cat,var(--red)) 30%, var(--border));border-radius:12px;padding:22px;margin-bottom:14px;position:relative;overflow:hidden;transition:border-color .2s, box-shadow .2s;text-align:center} .imp-block address{font-style:normal} .imp-block p,.imp-block address{max-width:560px;margin-left:auto;margin-right:auto} .imp-block::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, var(--red), var(--cat,var(--red)), var(--red));opacity:.7} .imp-block:hover{border-color:color-mix(in srgb, var(--cat,var(--red)) 55%, var(--border));box-shadow:0 0 24px color-mix(in srgb, var(--cat,var(--red)) 10%, transparent)} .imp-h{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cat,var(--red));margin-bottom:10px} .imp-block address,.imp-block p{font-size:13px;color:#aaa;line-height:1.9;font-style:normal} .imp-block a{color:#aaa;text-decoration:underline;text-underline-offset:3px} /* FOOTER */ footer{background:#050509;border-top:1px solid var(--border);padding:50px 22px 22px} .ft-inner{max-width:1420px;margin:0 auto} .ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:42px;margin-bottom:38px} @media(max-width:880px){.ft-grid{grid-template-columns:1fr 1fr}} @media(max-width:500px){.ft-grid{grid-template-columns:1fr}} .ft-brand .logo{margin-bottom:12px} .ft-brand p{font-size:13px;color:var(--muted2);line-height:1.8;max-width:250px;margin-bottom:14px} .ft-col h4{font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:13px} .ft-col a{display:block;font-size:13px;color:#9a9ab0;text-decoration:none;margin-bottom:8px;transition:color .2s} .ft-col a:hover{color:#fff} .ft-bottom{border-top:1px solid rgba(255,255,255,.04);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} .ft-l{font-size:12px;color:#7a7a90;line-height:2} .ft-l strong{color:#c8c8d8} .ft-l a{color:#9a9ab0;text-decoration:none} .ft-l a:hover{color:#fff} .ft-r{font-size:12px;color:#7a7a90} .google-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:#4ade80;border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;text-decoration:none;margin-right:10px;transition:background .2s,border-color .2s;vertical-align:middle} .google-badge:hover{background:rgba(34,197,94,.16);border-color:rgba(34,197,94,.5)} .google-badge svg{width:13px;height:13px;flex-shrink:0} .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none} .ft-r a{color:#9a9ab0;text-decoration:none} /* TOAST */ .toast{position:fixed;bottom:20px;right:20px;background:var(--dark3);border:1px solid var(--border);border-radius:9px;padding:11px 17px;font-size:13px;font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:9999;transform:translateY(60px);opacity:0;transition:all .28s;max-width:320px} .toast.on{transform:translateY(0);opacity:1} .toast.ok{border-left:3px solid var(--green)} .toast.err{border-left:3px solid var(--red)} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border:none;transition:all .2s;text-decoration:none} .btn-sm{padding:5px 10px;font-size:10px} .btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted)} .btn-outline:hover{border-color:#444;color:#fff;background:rgba(255,255,255,.04)} /* TWO COL */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px} @media(max-width:760px){.two-col{grid-template-columns:1fr}} /* RESPONSIVE */ .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;opacity:0;transition:opacity .28s} .nav-overlay.open{display:block;opacity:1} @media(max-width:1024px){ nav{ display:flex;flex-direction:column;align-items:stretch; position:fixed;top:0;right:0;bottom:0;width:280px;max-width:82vw; background:var(--dark2);border-left:1px solid var(--border); padding:70px 14px 20px;z-index:1000;max-height:none;overflow-y:auto; transform:translateX(100%);transition:transform .28s ease; box-shadow:-10px 0 34px rgba(0,0,0,.55); } nav.open{transform:translateX(0)} nav a{padding:13px 14px;border-radius:7px;font-size:13.5px;border-bottom:none!important;border-left:3px solid transparent} nav a:hover{border-left-color:var(--cc,transparent)} nav a.act{border-left-color:var(--cc,var(--red))} .hbg{display:flex} .stats-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:700px){ .player-top{flex-direction:column} .cover{width:100%;height:110px} } /* ── STATS ── */ .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:4px} .sm{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px 16px;text-align:center} .sm-n{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:#fff;line-height:1} .sm-l{font-size:11px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:1px} .sec-t-sm{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:2px;color:var(--muted)} .ctry-grid{display:flex;flex-direction:column;gap:6px} @media(max-width:600px){.stats-row{grid-template-columns:repeat(2,1fr)}} .team-status.pending{color:#f39c12} .team-status.pending .dot{background:#f39c12} .team-status.inactive{color:var(--muted)} .team-status.inactive .dot{background:var(--muted)} .ch-vbtn{background:var(--red);color:#fff;border:none;padding:5px 12px;border-radius:6px;font-size:11px;cursor:pointer;font-weight:700;white-space:nowrap;transition:background .2s} .ch-vbtn:hover:not(:disabled){background:#e00} .ch-vbtn.voted,.ch-vbtn:disabled{background:var(--dark2);color:var(--muted);cursor:default;border:1px solid var(--border)} /* ── THEME SWITCHER ── */ #themeSwitcher { position:fixed; bottom:20px; right:20px; z-index:9000; display:flex; flex-direction:column; align-items:flex-end; gap:8px; } #themeToggleBtn { width:44px; height:44px; border-radius:50%; background:var(--dark3); border:1px solid var(--border); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,.4); transition:transform .2s; } #themeToggleBtn:hover { transform:scale(1.1); } #themeOptions { display:none; flex-direction:column; gap:6px; background:var(--dark3); border:1px solid var(--border); border-radius:12px; padding:10px; min-width:140px; box-shadow:0 8px 32px rgba(0,0,0,.5); } #themeOptions.open { display:flex; } .theme-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; border:none; background:none; color:var(--text); font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; transition:background .2s; width:100%; text-align:left; } .theme-opt:hover { background:rgba(255,255,255,.06); } .theme-opt.active { background:rgba(255,255,255,.08); } .theme-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; } /* ── NAV LIVE OVERRIDE (always green) ── */ .nav-live, body.theme-pink .nav-live, body.theme-light .nav-live { background: var(--red) !important; } body.theme-pink .nav-live { background: #FF008C !important; } .nav-live .live-dot { background: #22c55e !important; } /* ── SENDEPLAN DESIGN ── */ .sch-table tr { border-bottom: 1px solid var(--border); transition: background .15s; } .sch-table tr:hover td { background: rgba(255,255,255,.02); } .sch-table td { padding: 14px; vertical-align: middle; } .sch-table tr.sch-live td { background: rgba(var(--red-rgb,.2,0,.1),.04); } .sch-table tr.sch-live .sch-time { color: var(--red); } .sch-time { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: #fff; } .live-tag { background: var(--green); color: #fff; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; } .autodj-tag { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } @keyframes pulse-badge { 0%,100%{opacity:1}50%{opacity:.6} } .sch-tab { padding: 8px 18px; background: var(--dark3); border: 1px solid var(--border); border-radius: 20px; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: all .2s; } .sch-tab.on { background: var(--red); border-color: var(--red); color: #fff; } .sch-tab:hover:not(.on) { border-color: rgba(255,255,255,.15); color: #fff; } @media(max-width:600px) { .hide-sm { display: none; } } /* ── BLAU-WEISS-ROT THEME ── */ body.theme-blue { --red:#0044cc; --red2:#2266ee; --dark:#00050f; --dark2:#000a1a; --dark3:#001030; --dark4:#001a45; --card:rgba(0,68,204,.05); --border:rgba(0,68,204,.18); --text:#e8f0ff; --muted:#5577aa; --muted2:#334466; } body.theme-blue .ticker { background:linear-gradient(90deg,#cc0011,#0044cc); } body.theme-blue .nav-live { background:#cc0011 !important; } body.theme-blue .logo-name em { color:#0044cc; } body.theme-blue .ph-title span { color:#0044cc; } body.theme-blue .play-btn { background:#0044cc; box-shadow:0 0 22px rgba(0,68,204,.4); } /* ── ULTRA DARK THEME ── */ body.theme-dark2 { --red:#00ffcc; --red2:#00ddaa; --dark:#000000; --dark2:#050505; --dark3:#0a0a0a; --dark4:#111; --card:rgba(0,255,204,.03); --border:rgba(0,255,204,.1); --text:#ccffee; --muted:#336655; --muted2:#1a3322; } body.theme-dark2 .ticker { background:#0a0a0a; border-bottom:1px solid #00ffcc44; } body.theme-dark2 .ticker-inner { color:#00ffcc; } body.theme-dark2 .ticker-inner span::before, body.theme-dark2 .ticker-inner span::after { color:#00ffcc; } body.theme-dark2 .nav-live { background:#00ffcc !important; color:#000 !important; } body.theme-dark2 .nav-live .live-dot { background:#000 !important; } body.theme-dark2 .play-btn { background:#00ffcc; box-shadow:0 0 22px rgba(0,255,204,.4); } body.theme-dark2 .play-btn svg { color:#000; } /* ── GOLD & SCHWARZ THEME ── */ body.theme-gold { --red:#f59e0b; --red2:#fbbf24; --dark:#0a0800; --dark2:#140f00; --dark3:#1a1200; --dark4:#231800; --card:rgba(245,158,11,.04); --border:rgba(245,158,11,.15); --text:#fff8e1; --muted:#7a6030; --muted2:#4a3a10; } body.theme-gold .ticker { background:linear-gradient(90deg,#b7791f,#d97706); } body.theme-gold .nav-live { background:#d97706 !important; } body.theme-gold .logo-name em { color:#f59e0b; } body.theme-gold .play-btn { background:#f59e0b; box-shadow:0 0 22px rgba(245,158,11,.4); } body.theme-gold .play-btn svg { color:#000; } body.theme-gold .ph-title span { color:#f59e0b; } body.theme-gold .sec-t i { color:#f59e0b; } /* ── PURPLE THEME ── */ body.theme-purple{--red:#7c3aed;--red2:#8b5cf6;--dark:#07040f;--dark2:#0d0820;--dark3:#130b2a;--dark4:#1a1035;--card:rgba(124,58,237,.05);--border:rgba(124,58,237,.15);--text:#ede9ff;--muted:#6d5f90;--muted2:#3d3060} body.theme-purple .ticker{background:linear-gradient(90deg,#7c3aed,#5b21b6)} body.theme-purple .nav-live{background:#7c3aed!important} body.theme-purple .play-btn{background:#7c3aed;box-shadow:0 0 22px rgba(124,58,237,.4)} /* ── TEAL THEME ── */ body.theme-teal{--red:#06b6d4;--red2:#22d3ee;--dark:#00080f;--dark2:#001525;--dark3:#001e30;--dark4:#00263d;--card:rgba(6,182,212,.05);--border:rgba(6,182,212,.15);--text:#e0f7ff;--muted:#3d7a8a;--muted2:#1a4a55} body.theme-teal .ticker{background:linear-gradient(90deg,#0891b2,#06b6d4)} body.theme-teal .nav-live{background:#0891b2!important} body.theme-teal .play-btn{background:#06b6d4;box-shadow:0 0 22px rgba(6,182,212,.4)} body.theme-teal .play-btn svg{color:#000} /* ── ORANGE THEME ── */ body.theme-orange{--red:#ea580c;--red2:#f97316;--dark:#0f0600;--dark2:#1a0a00;--dark3:#220d00;--dark4:#2d1100;--card:rgba(234,88,12,.05);--border:rgba(234,88,12,.15);--text:#fff8f0;--muted:#8a5a40;--muted2:#4a2e15} body.theme-orange .ticker{background:linear-gradient(90deg,#c2410c,#ea580c)} body.theme-orange .nav-live{background:#c2410c!important} body.theme-orange .play-btn{background:#ea580c;box-shadow:0 0 22px rgba(234,88,12,.4)} /* ── GREEN/MATRIX THEME ── */ body.theme-green{--red:#16a34a;--red2:#22c55e;--dark:#000f05;--dark2:#001a08;--dark3:#00220a;--dark4:#002d0e;--card:rgba(22,163,74,.05);--border:rgba(22,163,74,.15);--text:#e0ffe8;--muted:#2d6e45;--muted2:#1a4028} body.theme-green .ticker{background:linear-gradient(90deg,#15803d,#16a34a)} body.theme-green .ticker-inner{color:#00ff44;font-family:monospace} body.theme-green .nav-live{background:#15803d!important} body.theme-green .play-btn{background:#16a34a;box-shadow:0 0 22px rgba(22,163,74,.4)} body.theme-green .play-btn svg{color:#000} /* ── NEON GREEN ── */ body.theme-neon{--red:#39ff14;--red2:#57ff32;--dark:#000500;--dark2:#001000;--dark3:#001a00;--dark4:#002300;--card:rgba(57,255,20,.04);--border:rgba(57,255,20,.12);--text:#e0ffe0;--muted:#2d6e2d;--muted2:#1a3d1a} body.theme-neon .ticker{background:#003300;border-bottom:1px solid #39ff14} body.theme-neon .ticker-inner{color:#39ff14;font-family:monospace} body.theme-neon .nav-live{background:#006600!important} body.theme-neon .play-btn{background:#39ff14;box-shadow:0 0 30px rgba(57,255,20,.5)} body.theme-neon .play-btn svg{color:#000} /* ── OCEAN BLUE ── */ body.theme-ocean{--red:#0ea5e9;--red2:#38bdf8;--dark:#000d1a;--dark2:#001529;--dark3:#001e38;--dark4:#002748;--card:rgba(14,165,233,.05);--border:rgba(14,165,233,.15);--text:#e0f4ff;--muted:#2d6e8a;--muted2:#1a3d4d} body.theme-ocean .ticker{background:linear-gradient(90deg,#0369a1,#0ea5e9)} body.theme-ocean .nav-live{background:#0369a1!important} body.theme-ocean .play-btn{background:#0ea5e9;box-shadow:0 0 22px rgba(14,165,233,.4)} body.theme-ocean .play-btn svg{color:#000} /* ── CRIMSON ── */ body.theme-crimson{--red:#dc143c;--red2:#e8365d;--dark:#0f0008;--dark2:#1a000f;--dark3:#220018;--dark4:#2d0022;--card:rgba(220,20,60,.05);--border:rgba(220,20,60,.15);--text:#ffe0e8;--muted:#7a2d45;--muted2:#4a1a28} body.theme-crimson .ticker{background:linear-gradient(90deg,#9b0f2d,#dc143c)} body.theme-crimson .nav-live{background:#9b0f2d!important} body.theme-crimson .play-btn{background:#dc143c;box-shadow:0 0 22px rgba(220,20,60,.4)} /* ── SUNSET ── */ body.theme-sunset{--red:#f97316;--red2:#fb923c;--dark:#0f0500;--dark2:#1a0900;--dark3:#230d00;--dark4:#2e1200;--card:rgba(249,115,22,.05);--border:rgba(249,115,22,.15);--text:#fff3e0;--muted:#8a5a30;--muted2:#4d2f10} body.theme-sunset .ticker{background:linear-gradient(90deg,#c2410c,#f97316,#eab308)} body.theme-sunset .nav-live{background:#c2410c!important} body.theme-sunset .play-btn{background:linear-gradient(135deg,#f97316,#eab308);box-shadow:0 0 22px rgba(249,115,22,.4)} body.theme-sunset .play-btn svg{color:#000} /* ── SLATE ── */ body.theme-slate{--red:#6366f1;--red2:#818cf8;--dark:#0a0a0f;--dark2:#101018;--dark3:#161622;--dark4:#1c1c2e;--card:rgba(99,102,241,.05);--border:rgba(99,102,241,.15);--text:#e8e8ff;--muted:#5a5a8a;--muted2:#333355} body.theme-slate .ticker{background:linear-gradient(90deg,#4338ca,#6366f1)} body.theme-slate .nav-live{background:#4338ca!important} body.theme-slate .play-btn{background:#6366f1;box-shadow:0 0 22px rgba(99,102,241,.4)} /* ════ THEME VARIABLES ════ */ :root{ --bg:#07070d;--surface:#0e0e18;--card:#13131e;--border:#1e1e32;--border2:#2a2a44; --text:#eeeef8;--muted:#606080;--green:#4ade80;--yellow:#fbbf24; } :root{--red:#e63946;--red2:#ff6b35;--red3:#c0222e;--redg:linear-gradient(135deg,#e63946,#8b0010);--redn:#e63946;} body.theme-crimson{--red:#dc143c;--red2:#ff4500;--red3:#8b0000;--redg:linear-gradient(135deg,#dc143c,#4a0000);--redn:#dc143c;} body.theme-scarlet{--red:#ff2400;--red2:#ff6600;--red3:#cc0000;--redg:linear-gradient(135deg,#ff2400,#660000);--redn:#ff2400;} body.theme-ruby{--red:#9b111e;--red2:#e63946;--red3:#6b000e;--redg:linear-gradient(135deg,#9b111e,#300008);--redn:#9b111e;} body.theme-coral{--red:#ff6b6b;--red2:#ffa07a;--red3:#e05555;--redg:linear-gradient(135deg,#ff6b6b,#8b2020);--redn:#ff6b6b;} body.theme-tomato{--red:#ff6347;--red2:#ff8c69;--red3:#cc3300;--redg:linear-gradient(135deg,#ff6347,#6b1a00);--redn:#ff6347;} body.theme-orange{--red:#ff7f00;--red2:#ffa500;--red3:#cc6600;--redg:linear-gradient(135deg,#ff7f00,#663300);--redn:#ff7f00;} body.theme-amber{--red:#f59e0b;--red2:#fb923c;--red3:#b45309;--redg:linear-gradient(135deg,#f59e0b,#451a03);--redn:#f59e0b;} body.theme-tangerine{--red:#ff8c00;--red2:#ffa500;--red3:#cc5500;--redg:linear-gradient(135deg,#ff8c00,#552200);--redn:#ff8c00;} body.theme-peach{--red:#ffab76;--red2:#ffc0a0;--red3:#cc7733;--redg:linear-gradient(135deg,#ffab76,#663300);--redn:#ffab76;} body.theme-gold{--red:#ffd700;--red2:#ffec5c;--red3:#b8860b;--redg:linear-gradient(135deg,#ffd700,#5c3a00);--redn:#ffd700;} body.theme-yellow{--red:#fbbf24;--red2:#fde68a;--red3:#92400e;--redg:linear-gradient(135deg,#fbbf24,#451a03);--redn:#fbbf24;} body.theme-lemon{--red:#fff44f;--red2:#ffe135;--red3:#b8a000;--redg:linear-gradient(135deg,#fff44f,#4a4000);--redn:#fff44f;} body.theme-lime{--red:#a3e635;--red2:#bef264;--red3:#4d7c0f;--redg:linear-gradient(135deg,#a3e635,#1a2e05);--redn:#a3e635;} body.theme-chartreuse{--red:#7fff00;--red2:#adff2f;--red3:#3d8000;--redg:linear-gradient(135deg,#7fff00,#1a3300);--redn:#7fff00;} body.theme-green{--red:#22c55e;--red2:#4ade80;--red3:#15803d;--redg:linear-gradient(135deg,#22c55e,#052e16);--redn:#22c55e;} body.theme-emerald{--red:#10b981;--red2:#34d399;--red3:#065f46;--redg:linear-gradient(135deg,#10b981,#022c22);--redn:#10b981;} body.theme-mint{--red:#3eb489;--red2:#66cdaa;--red3:#1a7a5e;--redg:linear-gradient(135deg,#3eb489,#0a3028);--redn:#3eb489;} body.theme-sage{--red:#8fbc8f;--red2:#90ee90;--red3:#4a7a4a;--redg:linear-gradient(135deg,#8fbc8f,#1a3a1a);--redn:#8fbc8f;} body.theme-forest{--red:#228b22;--red2:#32cd32;--red3:#005500;--redg:linear-gradient(135deg,#228b22,#002200);--redn:#228b22;} body.theme-jungle{--red:#29ab87;--red2:#00a86b;--red3:#005c3a;--redg:linear-gradient(135deg,#29ab87,#001a10);--redn:#29ab87;} body.theme-teal{--red:#14b8a6;--red2:#2dd4bf;--red3:#0f766e;--redg:linear-gradient(135deg,#14b8a6,#042f2e);--redn:#14b8a6;} body.theme-cyan{--red:#06b6d4;--red2:#22d3ee;--red3:#0e7490;--redg:linear-gradient(135deg,#06b6d4,#083344);--redn:#06b6d4;} body.theme-sky{--red:#38bdf8;--red2:#7dd3fc;--red3:#0369a1;--redg:linear-gradient(135deg,#38bdf8,#082f49);--redn:#38bdf8;} body.theme-cerulean{--red:#007ba7;--red2:#00bfff;--red3:#004d6e;--redg:linear-gradient(135deg,#007ba7,#001f2e);--redn:#007ba7;} body.theme-blue{--red:#3b82f6;--red2:#60a5fa;--red3:#1d4ed8;--redg:linear-gradient(135deg,#3b82f6,#1e3a8a);--redn:#3b82f6;} body.theme-royal{--red:#4169e1;--red2:#6495ed;--red3:#1a3399;--redg:linear-gradient(135deg,#4169e1,#0a1a55);--redn:#4169e1;} body.theme-cobalt{--red:#0047ab;--red2:#0070d6;--red3:#002b6b;--redg:linear-gradient(135deg,#0047ab,#000e2e);--redn:#0047ab;} body.theme-navy{--red:#001f5b;--red2:#0047ab;--red3:#000d2e;--redg:linear-gradient(135deg,#001f5b,#000510);--redn:#3a5fc8;} body.theme-sapphire{--red:#0f52ba;--red2:#1e90ff;--red3:#0a2e6e;--redg:linear-gradient(135deg,#0f52ba,#030d24);--redn:#0f52ba;} body.theme-denim{--red:#1560bd;--red2:#4682b4;--red3:#0a3a77;--redg:linear-gradient(135deg,#1560bd,#041530);--redn:#1560bd;} body.theme-steel{--red:#4682b4;--red2:#6baed6;--red3:#2c5070;--redg:linear-gradient(135deg,#4682b4,#0e1f2e);--redn:#4682b4;} body.theme-ice{--red:#a8d8ea;--red2:#d6eaf8;--red3:#4a90b8;--redg:linear-gradient(135deg,#a8d8ea,#1a3a4a);--redn:#a8d8ea;} body.theme-powder{--red:#b0e0e6;--red2:#caf0f8;--red3:#4a8a90;--redg:linear-gradient(135deg,#b0e0e6,#1a3538);--redn:#b0e0e6;} body.theme-indigo{--red:#6366f1;--red2:#818cf8;--red3:#3730a3;--redg:linear-gradient(135deg,#6366f1,#1e1b4b);--redn:#6366f1;} body.theme-violet{--red:#7c3aed;--red2:#a78bfa;--red3:#4c1d95;--redg:linear-gradient(135deg,#7c3aed,#1a0050);--redn:#7c3aed;} body.theme-purple{--red:#9333ea;--red2:#c084fc;--red3:#6b21a8;--redg:linear-gradient(135deg,#9333ea,#2d0060);--redn:#9333ea;} body.theme-lavender{--red:#967bb6;--red2:#c3aee8;--red3:#5a4a7a;--redg:linear-gradient(135deg,#967bb6,#1e1230);--redn:#967bb6;} body.theme-lilac{--red:#c8a2c8;--red2:#ddb9db;--red3:#7a5a7a;--redg:linear-gradient(135deg,#c8a2c8,#2e1230);--redn:#c8a2c8;} body.theme-mauve{--red:#e0b0ff;--red2:#f0d0ff;--red3:#8b4fc8;--redg:linear-gradient(135deg,#e0b0ff,#2d0060);--redn:#c070f0;} body.theme-plum{--red:#8e4585;--red2:#c06090;--red3:#4a1a44;--redg:linear-gradient(135deg,#8e4585,#1a0518);--redn:#8e4585;} body.theme-amethyst{--red:#9966cc;--red2:#bf80ff;--red3:#5c2a8a;--redg:linear-gradient(135deg,#9966cc,#1e0038);--redn:#9966cc;} body.theme-fuchsia{--red:#d946ef;--red2:#e879f9;--red3:#a21caf;--redg:linear-gradient(135deg,#d946ef,#4a044e);--redn:#d946ef;} body.theme-magenta{--red:#ff00ff;--red2:#ff80ff;--red3:#990099;--redg:linear-gradient(135deg,#ff00ff,#330033);--redn:#ff00ff;} body.theme-orchid{--red:#da70d6;--red2:#ee82ee;--red3:#8a3a86;--redg:linear-gradient(135deg,#da70d6,#2e0e2e);--redn:#da70d6;} body.theme-pink{--red:#ec4899;--red2:#f472b6;--red3:#be185d;--redg:linear-gradient(135deg,#ec4899,#500724);--redn:#ec4899;} body.theme-rose{--red:#fb7185;--red2:#fda4af;--red3:#be123c;--redg:linear-gradient(135deg,#fb7185,#500724);--redn:#fb7185;} body.theme-blush{--red:#de5d83;--red2:#f08080;--red3:#9a2040;--redg:linear-gradient(135deg,#de5d83,#3a0818);--redn:#de5d83;} body.theme-flamingo{--red:#fc8eac;--red2:#ffb6c1;--red3:#c05070;--redg:linear-gradient(135deg,#fc8eac,#4a1a28);--redn:#fc8eac;} body.theme-hotpink{--red:#ff69b4;--red2:#ff91c8;--red3:#c0006a;--redg:linear-gradient(135deg,#ff69b4,#500028);--redn:#ff69b4;} body.theme-salmon{--red:#fa8072;--red2:#ffa07a;--red3:#c04040;--redg:linear-gradient(135deg,#fa8072,#4a1010);--redn:#fa8072;} body.theme-bronze{--red:#cd7f32;--red2:#daa520;--red3:#7a4400;--redg:linear-gradient(135deg,#cd7f32,#2e1500);--redn:#cd7f32;} body.theme-copper{--red:#b87333;--red2:#da8a67;--red3:#7a4400;--redg:linear-gradient(135deg,#b87333,#2e1000);--redn:#b87333;} body.theme-silver{--red:#c0c0c0;--red2:#e0e0e0;--red3:#808080;--redg:linear-gradient(135deg,#c0c0c0,#303030);--redn:#c0c0c0;} body.theme-platinum{--red:#e5e4e2;--red2:#f5f5f5;--red3:#909090;--redg:linear-gradient(135deg,#e5e4e2,#282828);--redn:#d0d0d0;} body.theme-white{--red:#f8f8ff;--red2:#ffffff;--red3:#c0c0c0;--redg:linear-gradient(135deg,#f0f0ff,#101020);--redn:#d0d0ff;} body.theme-electric{--red:#7df9ff;--red2:#b0ffff;--red3:#00bcd4;--redg:linear-gradient(135deg,#7df9ff,#003344);--redn:#7df9ff;} body.theme-laser{--red:#ff073a;--red2:#ff4570;--red3:#aa0020;--redg:linear-gradient(135deg,#ff073a,#400010);--redn:#ff073a;} body.theme-toxic{--red:#75ff3f;--red2:#aeff70;--red3:#3a9900;--redg:linear-gradient(135deg,#75ff3f,#0f2e00);--redn:#75ff3f;} body.theme-plasma{--red:#ff00aa;--red2:#ff60cc;--red3:#aa0066;--redg:linear-gradient(135deg,#ff00aa,#330022);--redn:#ff00aa;} body.theme-sunset{--red:#ff7043;--red2:#ff8a65;--red3:#bf360c;--redg:linear-gradient(135deg,#ff512f,#dd2476);--redn:#ff7043;} body.theme-sunrise{--red:#ff9a00;--red2:#ffcc00;--red3:#cc5500;--redg:linear-gradient(135deg,#ee0979,#ff6a00);--redn:#ff9a00;} body.theme-dusk{--red:#8e44ad;--red2:#bb6ee0;--red3:#5c2d7a;--redg:linear-gradient(135deg,#2c3e50,#8e44ad);--redn:#bb6ee0;} body.theme-aurora{--red:#00d2ff;--red2:#7efff5;--red3:#007799;--redg:linear-gradient(135deg,#00d2ff,#3a7bd5);--redn:#00d2ff;} body.theme-galaxy{--red:#9b59b6;--red2:#2980b9;--red3:#6c3483;--redg:linear-gradient(135deg,#2c1654,#9b59b6);--redn:#bb80d6;} body.theme-nebula{--red:#e91e8c;--red2:#ff6b6b;--red3:#9a1060;--redg:linear-gradient(135deg,#0f2027,#e91e8c);--redn:#e91e8c;} body.theme-ocean{--red:#006994;--red2:#0099cc;--red3:#003d5c;--redg:linear-gradient(135deg,#003366,#006994);--redn:#0099cc;} body.theme-arctic{--red:#b0d4e8;--red2:#d4eaf5;--red3:#4a90b8;--redg:linear-gradient(135deg,#e0eafc,#cfdef3);--redn:#4a90b8;} body.theme-desert{--red:#c19a6b;--red2:#e8c99a;--red3:#8a6040;--redg:linear-gradient(135deg,#d4a96a,#7a4a1e);--redn:#c19a6b;} body.theme-earth{--red:#8b6914;--red2:#c8a84b;--red3:#4a3000;--redg:linear-gradient(135deg,#5f4400,#8b6914);--redn:#c8a84b;} body.theme-autumn{--red:#cc4400;--red2:#ff8800;--red3:#882200;--redg:linear-gradient(135deg,#cc4400,#ff8800);--redn:#ff8800;} body.theme-winter{--red:#7ec8e3;--red2:#b3dff0;--red3:#3a88aa;--redg:linear-gradient(135deg,#c9d6df,#52c3d0);--redn:#3a88aa;} body.theme-spring{--red:#ff90b3;--red2:#ffc0d0;--red3:#cc5080;--redg:linear-gradient(135deg,#ff90b3,#a8ff78);--redn:#ff90b3;} body.theme-tropical{--red:#00c9a7;--red2:#00e5c3;--red3:#008a72;--redg:linear-gradient(135deg,#00c9a7,#009fdf);--redn:#00c9a7;} body.theme-cherry{--red:#de3163;--red2:#ff6b81;--red3:#9a0033;--redg:linear-gradient(135deg,#de3163,#6a0020);--redn:#de3163;} body.theme-strawberry{--red:#fc5c7d;--red2:#ff8fa3;--red3:#c0003d;--redg:linear-gradient(135deg,#6a3093,#fc5c7d);--redn:#fc5c7d;} body.theme-grape{--red:#6f2da8;--red2:#9b59d0;--red3:#3d0a6e;--redg:linear-gradient(135deg,#6f2da8,#1a0038);--redn:#9b59d0;} body.theme-blueberry{--red:#4f3a75;--red2:#7b5ea7;--red3:#1e1038;--redg:linear-gradient(135deg,#4f3a75,#0e0518);--redn:#9b80d6;} body.theme-watermelon{--red:#fc6c85;--red2:#ff9eb5;--red3:#c03050;--redg:linear-gradient(135deg,#fc6c85,#43aa43);--redn:#fc6c85;} body.theme-kiwi{--red:#8db600;--red2:#b5da00;--red3:#4a6000;--redg:linear-gradient(135deg,#8db600,#2a3a00);--redn:#8db600;} body.theme-midnight{--red:#191970;--red2:#3040b0;--red3:#0a0a40;--redg:linear-gradient(135deg,#000000,#191970);--redn:#6070d0;} body.theme-obsidian{--red:#3d3d3d;--red2:#707070;--red3:#1a1a1a;--redg:linear-gradient(135deg,#0f0f0f,#3d3d3d);--redn:#aaaaaa;} body.theme-charcoal{--red:#555555;--red2:#888888;--red3:#222222;--redg:linear-gradient(135deg,#1a1a1a,#555555);--redn:#bbbbbb;} body.theme-iron{--red:#808080;--red2:#aaaaaa;--red3:#404040;--redg:linear-gradient(135deg,#303030,#808080);--redn:#cccccc;} body.theme-slate{--red:#708090;--red2:#a0aab0;--red3:#3a4a5a;--redg:linear-gradient(135deg,#1a2030,#708090);--redn:#a0c0d0;} body.theme-ash{--red:#b2bec3;--red2:#dfe6e9;--red3:#636e72;--redg:linear-gradient(135deg,#2d3436,#636e72);--redn:#b2bec3;} body.theme-smoke{--red:#9e9e9e;--red2:#bdbdbd;--red3:#616161;--redg:linear-gradient(135deg,#1a1a1a,#9e9e9e);--redn:#cccccc;} body.theme-rainbow{--red:#ff4444;--red2:#44ff44;--red3:#cc0000;--redg:linear-gradient(90deg,#ff0000,#ff7700,#ffff00,#00ff00,#0000ff,#8b00ff);--redn:#ff4444;} body.theme-holo{--red:#b794f4;--red2:#fbb6ce;--red3:#6b46c1;--redg:linear-gradient(135deg,#a18cd1,#fbc2eb);--redn:#d0a0f0;} body.theme-chrome{--red:#cbd5e0;--red2:#e2e8f0;--red3:#718096;--redg:linear-gradient(135deg,#c3cfe2,#f5f7fa);--redn:#718096;} body.theme-candy{--red:#ff6fb1;--red2:#ffe45e;--red3:#cc1066;--redg:linear-gradient(135deg,#ff6fb1,#ffe45e);--redn:#ff6fb1;} body.theme-bubblegum{--red:#ff9de2;--red2:#ffc8f0;--red3:#cc44aa;--redg:linear-gradient(135deg,#ff9de2,#b3f0ff);--redn:#ff44cc;} body.theme-cyberpunk{--red:#ff2a6d;--red2:#05d9e8;--red3:#cc0044;--redg:linear-gradient(135deg,#0d0221,#ff2a6d);--redn:#ff2a6d;} body.theme-matrix{--red:#00ff41;--red2:#66ff77;--red3:#00aa20;--redg:linear-gradient(135deg,#000000,#003300);--redn:#00ff41;} body.theme-synthwave{--red:#ff2a6d;--red2:#d300c4;--red3:#9900aa;--redg:linear-gradient(135deg,#2b1055,#ff2a6d);--redn:#ff60cc;} body.theme-vaporwave{--red:#ff71ce;--red2:#05ffa1;--red3:#b967ff;--redg:linear-gradient(135deg,#1a0533,#ff71ce);--redn:#ff71ce;} body.theme-retro{--red:#ff6b35;--red2:#f7c59f;--red3:#cc3300;--redg:linear-gradient(135deg,#2c1810,#ff6b35);--redn:#ff6b35;} body.theme-brutalist{--red:#ff3300;--red2:#ffcc00;--red3:#cc0000;--redg:linear-gradient(135deg,#000000,#ff3300);--redn:#ff3300;} body.theme-rosewood{--red:#65000b;--red2:#65000b;--red3:#2e0000;--redg:linear-gradient(135deg,#65000b,#2e0000);} body.theme-venetian{--red:#c80815;--red2:#c80815;--red3:#910000;--redg:linear-gradient(135deg,#c80815,#910000);} body.theme-upsdell{--red:#ae0c00;--red2:#ae0c00;--red3:#770000;--redg:linear-gradient(135deg,#ae0c00,#770000);} body.theme-redwood{--red:#a45a52;--red2:#a45a52;--red3:#6d231b;--redg:linear-gradient(135deg,#a45a52,#6d231b);} body.theme-falu{--red:#801818;--red2:#801818;--red3:#490000;--redg:linear-gradient(135deg,#801818,#490000);} body.theme-alloy{--red:#c46210;--red2:#c46210;--red3:#8d2b00;--redg:linear-gradient(135deg,#c46210,#8d2b00);} body.theme-cinnamon{--red:#d2691e;--red2:#d2691e;--red3:#9b3200;--redg:linear-gradient(135deg,#d2691e,#9b3200);} body.theme-arylide{--red:#e9d66b;--red2:#e9d66b;--red3:#b29f34;--redg:linear-gradient(135deg,#e9d66b,#b29f34);} body.theme-hansa{--red:#e9d44b;--red2:#e9d44b;--red3:#b29d14;--redg:linear-gradient(135deg,#e9d44b,#b29d14);} body.theme-jasmine{--red:#f8de7e;--red2:#f8de7e;--red3:#c1a747;--redg:linear-gradient(135deg,#f8de7e,#c1a747);} body.theme-maize{--red:#fbec5d;--red2:#fbec5d;--red3:#c4b526;--redg:linear-gradient(135deg,#fbec5d,#c4b526);} body.theme-mikado{--red:#ffc40c;--red2:#ffc40c;--red3:#c88d00;--redg:linear-gradient(135deg,#ffc40c,#c88d00);} body.theme-sandstorm{--red:#ecd540;--red2:#ecd540;--red3:#b59e09;--redg:linear-gradient(135deg,#ecd540,#b59e09);} body.theme-artichoke2{--red:#6b8e4e;--red2:#6b8e4e;--red3:#345717;--redg:linear-gradient(135deg,#6b8e4e,#345717);} body.theme-brunswick{--red:#1b4d3e;--red2:#1b4d3e;--red3:#001607;--redg:linear-gradient(135deg,#1b4d3e,#001607);} body.theme-castleton{--red:#00563b;--red2:#00563b;--red3:#001f04;--redg:linear-gradient(135deg,#00563b,#001f04);} body.theme-camouflage{--red:#78866b;--red2:#78866b;--red3:#414f34;--redg:linear-gradient(135deg,#78866b,#414f34);} body.theme-dartmouth{--red:#00703c;--red2:#00703c;--red3:#003905;--redg:linear-gradient(135deg,#00703c,#003905);} body.theme-fern2{--red:#63a84d;--red2:#63a84d;--red3:#2c7116;--redg:linear-gradient(135deg,#63a84d,#2c7116);} body.theme-feldgrau{--red:#4d5d53;--red2:#4d5d53;--red3:#16261c;--redg:linear-gradient(135deg,#4d5d53,#16261c);} body.theme-hookers2{--red:#5d7b6f;--red2:#5d7b6f;--red3:#264438;--redg:linear-gradient(135deg,#5d7b6f,#264438);} body.theme-mughal{--red:#306030;--red2:#306030;--red3:#002900;--redg:linear-gradient(135deg,#306030,#002900);} body.theme-myrtle{--red:#21421e;--red2:#21421e;--red3:#000b00;--redg:linear-gradient(135deg,#21421e,#000b00);} body.theme-amazonite2{--red:#00c4b0;--red2:#00c4b0;--red3:#008d79;--redg:linear-gradient(135deg,#00c4b0,#008d79);} body.theme-viridian2{--red:#009698;--red2:#009698;--red3:#005f61;--redg:linear-gradient(135deg,#009698,#005f61);} body.theme-pine{--red:#01796f;--red2:#01796f;--red3:#004238;--redg:linear-gradient(135deg,#01796f,#004238);} body.theme-bdazzled{--red:#2e5894;--red2:#2e5894;--red3:#00215d;--redg:linear-gradient(135deg,#2e5894,#00215d);} body.theme-berkeley{--red:#003262;--red2:#003262;--red3:#00002b;--redg:linear-gradient(135deg,#003262,#00002b);} body.theme-celestial{--red:#4997d0;--red2:#4997d0;--red3:#126099;--redg:linear-gradient(135deg,#4997d0,#126099);} body.theme-chetwode{--red:#8e83cc;--red2:#8e83cc;--red3:#574c95;--redg:linear-gradient(135deg,#8e83cc,#574c95);} body.theme-duke{--red:#00539c;--red2:#00539c;--red3:#001c65;--redg:linear-gradient(135deg,#00539c,#001c65);} body.theme-egyptian{--red:#1034a6;--red2:#1034a6;--red3:#00006f;--redg:linear-gradient(135deg,#1034a6,#00006f);} body.theme-glaucous{--red:#6082b6;--red2:#6082b6;--red3:#294b7f;--redg:linear-gradient(135deg,#6082b6,#294b7f);} body.theme-han{--red:#446ccf;--red2:#446ccf;--red3:#0d3598;--redg:linear-gradient(135deg,#446ccf,#0d3598);} body.theme-independence{--red:#4c516d;--red2:#4c516d;--red3:#151a36;--redg:linear-gradient(135deg,#4c516d,#151a36);} body.theme-international{--red:#002fa7;--red2:#002fa7;--red3:#000070;--redg:linear-gradient(135deg,#002fa7,#000070);} body.theme-lavenblue{--red:#8f9cf1;--red2:#8f9cf1;--red3:#5865ba;--redg:linear-gradient(135deg,#8f9cf1,#5865ba);} body.theme-maastricht{--red:#001c3d;--red2:#001c3d;--red3:#000006;--redg:linear-gradient(135deg,#001c3d,#000006);} body.theme-majorelle{--red:#6050dc;--red2:#6050dc;--red3:#2919a5;--redg:linear-gradient(135deg,#6050dc,#2919a5);} body.theme-byzantium2{--red:#5b2c6f;--red2:#5b2c6f;--red3:#240038;--redg:linear-gradient(135deg,#5b2c6f,#240038);} body.theme-eminence{--red:#6c3082;--red2:#6c3082;--red3:#35004b;--redg:linear-gradient(135deg,#6c3082,#35004b);} body.theme-flirt{--red:#a2006d;--red2:#a2006d;--red3:#6b0036;--redg:linear-gradient(135deg,#a2006d,#6b0036);} body.theme-grape2{--red:#6f2da8;--red2:#6f2da8;--red3:#380071;--redg:linear-gradient(135deg,#6f2da8,#380071);} body.theme-jazzberry{--red:#a50b5e;--red2:#a50b5e;--red3:#6e0027;--redg:linear-gradient(135deg,#a50b5e,#6e0027);} body.theme-liseran{--red:#de6fa1;--red2:#de6fa1;--red3:#a7386a;--redg:linear-gradient(135deg,#de6fa1,#a7386a);} body.theme-frostbite{--red:#e936a7;--red2:#e936a7;--red3:#b20070;--redg:linear-gradient(135deg,#e936a7,#b20070);} body.theme-mountbatten{--red:#997a8d;--red2:#997a8d;--red3:#624356;--redg:linear-gradient(135deg,#997a8d,#624356);} body.theme-nadeshiko{--red:#f6adc6;--red2:#f6adc6;--red3:#bf768f;--redg:linear-gradient(135deg,#f6adc6,#bf768f);} body.theme-beaver{--red:#9f8170;--red2:#9f8170;--red3:#684a39;--redg:linear-gradient(135deg,#9f8170,#684a39);} body.theme-bison{--red:#8b7355;--red2:#8b7355;--red3:#543c1e;--redg:linear-gradient(135deg,#8b7355,#543c1e);} body.theme-blanched{--red:#ffebcd;--red2:#ffebcd;--red3:#c8b496;--redg:linear-gradient(135deg,#ffebcd,#c8b496);} body.theme-bole{--red:#79443b;--red2:#79443b;--red3:#420d04;--redg:linear-gradient(135deg,#79443b,#420d04);} body.theme-cameo{--red:#efbbcc;--red2:#efbbcc;--red3:#b88495;--redg:linear-gradient(135deg,#efbbcc,#b88495);} body.theme-chamoisee{--red:#a0785a;--red2:#a0785a;--red3:#694123;--redg:linear-gradient(135deg,#a0785a,#694123);} body.theme-donkey{--red:#7d5a4f;--red2:#7d5a4f;--red3:#462318;--redg:linear-gradient(135deg,#7d5a4f,#462318);} body.theme-earthen{--red:#8b5e3c;--red2:#8b5e3c;--red3:#542705;--redg:linear-gradient(135deg,#8b5e3c,#542705);} body.theme-ecru{--red:#c2b280;--red2:#c2b280;--red3:#8b7b49;--redg:linear-gradient(135deg,#c2b280,#8b7b49);} body.theme-fallow{--red:#c19a6b;--red2:#c19a6b;--red3:#8a6334;--redg:linear-gradient(135deg,#c19a6b,#8a6334);} body.theme-fawn{--red:#e5aa70;--red2:#e5aa70;--red3:#ae7339;--redg:linear-gradient(135deg,#e5aa70,#ae7339);} body.theme-cloudy{--red:#a8b8c8;--red2:#a8b8c8;--red3:#718191;--redg:linear-gradient(135deg,#a8b8c8,#718191);} body.theme-glaucous2{--red:#6082b6;--red2:#6082b6;--red3:#294b7f;--redg:linear-gradient(135deg,#6082b6,#294b7f);} body.theme-grullo{--red:#a99a86;--red2:#a99a86;--red3:#72634f;--redg:linear-gradient(135deg,#a99a86,#72634f);} body.theme-isabelline{--red:#f4f0ec;--red2:#f4f0ec;--red3:#bdb9b5;--redg:linear-gradient(135deg,#f4f0ec,#bdb9b5);} body.theme-marengo{--red:#4c5866;--red2:#4c5866;--red3:#15212f;--redg:linear-gradient(135deg,#4c5866,#15212f);} body.theme-acid{--red:#b0bf1a;--red2:#b0bf1a;--red3:#798800;--redg:linear-gradient(135deg,#b0bf1a,#798800);} body.theme-awesome{--red:#ff2052;--red2:#ff2052;--red3:#c8001b;--redg:linear-gradient(135deg,#ff2052,#c8001b);} body.theme-aztec{--red:#893101;--red2:#893101;--red3:#520000;--redg:linear-gradient(135deg,#893101,#520000);} body.theme-bistre{--red:#3d2b1f;--red2:#3d2b1f;--red3:#060000;--redg:linear-gradient(135deg,#3d2b1f,#060000);} body.theme-bittersweet{--red:#fe6f5e;--red2:#fe6f5e;--red3:#c73827;--redg:linear-gradient(135deg,#fe6f5e,#c73827);} body.theme-blast{--red:#ff6700;--red2:#ff6700;--red3:#c83000;--redg:linear-gradient(135deg,#ff6700,#c83000);} body.theme-capri{--red:#00bfff;--red2:#00bfff;--red3:#0088c8;--redg:linear-gradient(135deg,#00bfff,#0088c8);} body.theme-celestine{--red:#4997d0;--red2:#4997d0;--red3:#126099;--redg:linear-gradient(135deg,#4997d0,#126099);} body.theme-celadon2{--red:#acd6b8;--red2:#acd6b8;--red3:#759f81;--redg:linear-gradient(135deg,#acd6b8,#759f81);} body.theme-char{--red:#111111;--red2:#111111;--red3:#000000;--redg:linear-gradient(135deg,#111111,#000000);} body.theme-cherub{--red:#f8d9c4;--red2:#f8d9c4;--red3:#c1a28d;--redg:linear-gradient(135deg,#f8d9c4,#c1a28d);} body.theme-chimney{--red:#9c5342;--red2:#9c5342;--red3:#651c0b;--redg:linear-gradient(135deg,#9c5342,#651c0b);} body.theme-citron{--red:#9fa91f;--red2:#9fa91f;--red3:#687200;--redg:linear-gradient(135deg,#9fa91f,#687200);} body.theme-aloe{--red:#5b7b4f;--red2:#5b7b4f;--red3:#244418;--redg:linear-gradient(135deg,#5b7b4f,#244418);} body.theme-balsam{--red:#5c7a5c;--red2:#5c7a5c;--red3:#254325;--redg:linear-gradient(135deg,#5c7a5c,#254325);} body.theme-birch{--red:#c8c8c0;--red2:#c8c8c0;--red3:#919189;--redg:linear-gradient(135deg,#c8c8c0,#919189);} body.theme-bog{--red:#5f6749;--red2:#5f6749;--red3:#283012;--redg:linear-gradient(135deg,#5f6749,#283012);} body.theme-botanica{--red:#406842;--red2:#406842;--red3:#09310b;--redg:linear-gradient(135deg,#406842,#09310b);} body.theme-cactus{--red:#5e8c6a;--red2:#5e8c6a;--red3:#275533;--redg:linear-gradient(135deg,#5e8c6a,#275533);} body.theme-cedar{--red:#5c4a3d;--red2:#5c4a3d;--red3:#251306;--redg:linear-gradient(135deg,#5c4a3d,#251306);} body.theme-chalk{--red:#f5f5f0;--red2:#f5f5f0;--red3:#bebeb9;--redg:linear-gradient(135deg,#f5f5f0,#bebeb9);} body.theme-clover{--red:#5c7b4b;--red2:#5c7b4b;--red3:#254414;--redg:linear-gradient(135deg,#5c7b4b,#254414);} body.theme-cosmos{--red:#ffd8e6;--red2:#ffd8e6;--red3:#c8a1af;--redg:linear-gradient(135deg,#ffd8e6,#c8a1af);} body.theme-creek{--red:#6a8ea0;--red2:#6a8ea0;--red3:#335769;--redg:linear-gradient(135deg,#6a8ea0,#335769);} body.theme-dune{--red:#c8b560;--red2:#c8b560;--red3:#917e29;--redg:linear-gradient(135deg,#c8b560,#917e29);} body.theme-ebony{--red:#555d50;--red2:#555d50;--red3:#1e2619;--redg:linear-gradient(135deg,#555d50,#1e2619);} body.theme-eucalyptus{--red:#44d7a8;--red2:#44d7a8;--red3:#0da071;--redg:linear-gradient(135deg,#44d7a8,#0da071);} body.theme-everglade{--red:#1b4d3e;--red2:#1b4d3e;--red3:#001607;--redg:linear-gradient(135deg,#1b4d3e,#001607);} body.theme-acai{--red:#4b0082;--red2:#4b0082;--red3:#14004b;--redg:linear-gradient(135deg,#4b0082,#14004b);} body.theme-ackee{--red:#ffd700;--red2:#ffd700;--red3:#c8a000;--redg:linear-gradient(135deg,#ffd700,#c8a000);} body.theme-apfelgruen{--red:#8db600;--red2:#8db600;--red3:#567f00;--redg:linear-gradient(135deg,#8db600,#567f00);} body.theme-boysenberry{--red:#873260;--red2:#873260;--red3:#500029;--redg:linear-gradient(135deg,#873260,#500029);} body.theme-cantaloupe{--red:#ff9900;--red2:#ff9900;--red3:#c86200;--redg:linear-gradient(135deg,#ff9900,#c86200);} body.theme-clementine{--red:#e96d2a;--red2:#e96d2a;--red3:#b23600;--redg:linear-gradient(135deg,#e96d2a,#b23600);} body.theme-damson{--red:#593156;--red2:#593156;--red3:#22001f;--redg:linear-gradient(135deg,#593156,#22001f);} body.theme-date{--red:#af6b30;--red2:#af6b30;--red3:#783400;--redg:linear-gradient(135deg,#af6b30,#783400);} body.theme-elderberry{--red:#3b0764;--red2:#3b0764;--red3:#04002d;--redg:linear-gradient(135deg,#3b0764,#04002d);} body.theme-feijoa{--red:#9fbe6a;--red2:#9fbe6a;--red3:#688733;--redg:linear-gradient(135deg,#9fbe6a,#688733);} body.theme-gooseberry{--red:#b0ca6a;--red2:#b0ca6a;--red3:#799333;--redg:linear-gradient(135deg,#b0ca6a,#799333);} body.theme-jackfruit{--red:#ffb347;--red2:#ffb347;--red3:#c87c10;--redg:linear-gradient(135deg,#ffb347,#c87c10);} body.theme-kumquat{--red:#e8872a;--red2:#e8872a;--red3:#b15000;--redg:linear-gradient(135deg,#e8872a,#b15000);} body.theme-loganberry{--red:#a2231d;--red2:#a2231d;--red3:#6b0000;--redg:linear-gradient(135deg,#a2231d,#6b0000);} body.theme-mulberry{--red:#c54b8c;--red2:#c54b8c;--red3:#8e1455;--redg:linear-gradient(135deg,#c54b8c,#8e1455);} body.theme-nectarine{--red:#ff6b35;--red2:#ff6b35;--red3:#c83400;--redg:linear-gradient(135deg,#ff6b35,#c83400);} body.theme-bebop{--red:#7b3f00;--red2:#7b3f00;--red3:#440800;--redg:linear-gradient(135deg,#7b3f00,#440800);} body.theme-chillout{--red:#8696a7;--red2:#8696a7;--red3:#4f5f70;--redg:linear-gradient(135deg,#8696a7,#4f5f70);} body.theme-dancehall{--red:#009c3b;--red2:#009c3b;--red3:#006504;--redg:linear-gradient(135deg,#009c3b,#006504);} body.theme-darkwave{--red:#2d2d44;--red2:#2d2d44;--red3:#00000d;--redg:linear-gradient(135deg,#2d2d44,#00000d);} body.theme-dubstep{--red:#7400b8;--red2:#7400b8;--red3:#3d0081;--redg:linear-gradient(135deg,#7400b8,#3d0081);} body.theme-eurodance{--red:#ff00aa;--red2:#ff00aa;--red3:#c80073;--redg:linear-gradient(135deg,#ff00aa,#c80073);} body.theme-flamenco{--red:#e63946;--red2:#e63946;--red3:#af020f;--redg:linear-gradient(135deg,#e63946,#af020f);} body.theme-hardstyle{--red:#ff2200;--red2:#ff2200;--red3:#c80000;--redg:linear-gradient(135deg,#ff2200,#c80000);} body.theme-indie{--red:#9b8ea1;--red2:#9b8ea1;--red3:#64576a;--redg:linear-gradient(135deg,#9b8ea1,#64576a);} body.theme-progressive{--red:#0044cc;--red2:#0044cc;--red3:#000d95;--redg:linear-gradient(135deg,#0044cc,#000d95);} body.theme-afrofuturism{--red:#6b2d8b;--red2:#6b2d8b;--red3:#340054;--redg:linear-gradient(135deg,#6b2d8b,#340054);} body.theme-alexandrian{--red:#004b5a;--red2:#004b5a;--red3:#001423;--redg:linear-gradient(135deg,#004b5a,#001423);} body.theme-analog{--red:#c8a87a;--red2:#c8a87a;--red3:#917143;--redg:linear-gradient(135deg,#c8a87a,#917143);} body.theme-arcane{--red:#4b0082;--red2:#4b0082;--red3:#14004b;--redg:linear-gradient(135deg,#4b0082,#14004b);} body.theme-arcade{--red:#00ff41;--red2:#00ff41;--red3:#00c80a;--redg:linear-gradient(135deg,#00ff41,#00c80a);} body.theme-baroque2{--red:#c8a028;--red2:#c8a028;--red3:#916900;--redg:linear-gradient(135deg,#c8a028,#916900);} body.theme-biomorphic{--red:#4a7c59;--red2:#4a7c59;--red3:#134522;--redg:linear-gradient(135deg,#4a7c59,#134522);} body.theme-brutalism2{--red:#555555;--red2:#555555;--red3:#1e1e1e;--redg:linear-gradient(135deg,#555555,#1e1e1e);} body.theme-cassette{--red:#1a1a2e;--red2:#1a1a2e;--red3:#000000;--redg:linear-gradient(135deg,#1a1a2e,#000000);} body.theme-cave{--red:#3d2b1f;--red2:#3d2b1f;--red3:#060000;--redg:linear-gradient(135deg,#3d2b1f,#060000);} body.theme-chromatic{--red:#cc0066;--red2:#cc0066;--red3:#95002f;--redg:linear-gradient(135deg,#cc0066,#95002f);} body.theme-cinematique{--red:#2c1810;--red2:#2c1810;--red3:#000000;--redg:linear-gradient(135deg,#2c1810,#000000);} body.theme-cloisonnism{--red:#8b0000;--red2:#8b0000;--red3:#540000;--redg:linear-gradient(135deg,#8b0000,#540000);} body.theme-comicbook{--red:#ffcc00;--red2:#ffcc00;--red3:#c89500;--redg:linear-gradient(135deg,#ffcc00,#c89500);} body.theme-alien{--red:#00ff41;--red2:#00ff41;--red3:#00c80a;--redg:linear-gradient(135deg,#00ff41,#00c80a);} body.theme-apocalypse{--red:#8b0000;--red2:#8b0000;--red3:#540000;--redg:linear-gradient(135deg,#8b0000,#540000);} body.theme-aurora2{--red:#77dd77;--red2:#77dd77;--red3:#40a640;--redg:linear-gradient(135deg,#77dd77,#40a640);} body.theme-azure2{--red:#007fff;--red2:#007fff;--red3:#0048c8;--redg:linear-gradient(135deg,#007fff,#0048c8);} body.theme-blacklight{--red:#3400ff;--red2:#3400ff;--red3:#0000c8;--redg:linear-gradient(135deg,#3400ff,#0000c8);} body.theme-blazing{--red:#ff6700;--red2:#ff6700;--red3:#c83000;--redg:linear-gradient(135deg,#ff6700,#c83000);} body.theme-brimstone{--red:#ffdf00;--red2:#ffdf00;--red3:#c8a800;--redg:linear-gradient(135deg,#ffdf00,#c8a800);} body.theme-carnival{--red:#ff1493;--red2:#ff1493;--red3:#c8005c;--redg:linear-gradient(135deg,#ff1493,#c8005c);} body.theme-celestial2{--red:#4997d0;--red2:#4997d0;--red3:#126099;--redg:linear-gradient(135deg,#4997d0,#126099);} body.theme-chromium{--red:#7b7b7b;--red2:#7b7b7b;--red3:#444444;--redg:linear-gradient(135deg,#7b7b7b,#444444);} body.theme-cinder{--red:#0e0e10;--red2:#0e0e10;--red3:#000000;--redg:linear-gradient(135deg,#0e0e10,#000000);} body.theme-comet2{--red:#9eb4cc;--red2:#9eb4cc;--red3:#677d95;--redg:linear-gradient(135deg,#9eb4cc,#677d95);} body.theme-crystal{--red:#a7d8de;--red2:#a7d8de;--red3:#70a1a7;--redg:linear-gradient(135deg,#a7d8de,#70a1a7);} body.theme-daybreak{--red:#ffd580;--red2:#ffd580;--red3:#c89e49;--redg:linear-gradient(135deg,#ffd580,#c89e49);} body.theme-demon{--red:#890000;--red2:#890000;--red3:#520000;--redg:linear-gradient(135deg,#890000,#520000);} body.theme-depth{--red:#002366;--red2:#002366;--red3:#00002f;--redg:linear-gradient(135deg,#002366,#00002f);} body.theme-desire{--red:#ea3c53;--red2:#ea3c53;--red3:#b3051c;--redg:linear-gradient(135deg,#ea3c53,#b3051c);} body.theme-dimension{--red:#7b00d4;--red2:#7b00d4;--red3:#44009d;--redg:linear-gradient(135deg,#7b00d4,#44009d);} body.theme-divine{--red:#ffd700;--red2:#ffd700;--red3:#c8a000;--redg:linear-gradient(135deg,#ffd700,#c8a000);} body.theme-dusk2{--red:#4e3b6e;--red2:#4e3b6e;--red3:#170437;--redg:linear-gradient(135deg,#4e3b6e,#170437);} body.theme-dystopia{--red:#3a3a3a;--red2:#3a3a3a;--red3:#030303;--redg:linear-gradient(135deg,#3a3a3a,#030303);} body.theme-eclipse{--red:#000033;--red2:#000033;--red3:#000000;--redg:linear-gradient(135deg,#000033,#000000);} body.theme-electric2{--red:#7df9ff;--red2:#7df9ff;--red3:#46c2c8;--redg:linear-gradient(135deg,#7df9ff,#46c2c8);} body.theme-elixir{--red:#00cc88;--red2:#00cc88;--red3:#009551;--redg:linear-gradient(135deg,#00cc88,#009551);} body.theme-ember{--red:#ff4500;--red2:#ff4500;--red3:#c80e00;--redg:linear-gradient(135deg,#ff4500,#c80e00);} body.theme-enigma{--red:#6600cc;--red2:#6600cc;--red3:#2f0095;--redg:linear-gradient(135deg,#6600cc,#2f0095);} body.theme-eon{--red:#003366;--red2:#003366;--red3:#00002f;--redg:linear-gradient(135deg,#003366,#00002f);} body.theme-eternity{--red:#1a1a3a;--red2:#1a1a3a;--red3:#000003;--redg:linear-gradient(135deg,#1a1a3a,#000003);} body.theme-euphoria{--red:#ff80ff;--red2:#ff80ff;--red3:#c849c8;--redg:linear-gradient(135deg,#ff80ff,#c849c8);} body.theme-exoplanet{--red:#4466cc;--red2:#4466cc;--red3:#0d2f95;--redg:linear-gradient(135deg,#4466cc,#0d2f95);} body.theme-fantasy{--red:#9b59b6;--red2:#9b59b6;--red3:#64227f;--redg:linear-gradient(135deg,#9b59b6,#64227f);} body.theme-fireball{--red:#ff4500;--red2:#ff4500;--red3:#c80e00;--redg:linear-gradient(135deg,#ff4500,#c80e00);} body.theme-firefly{--red:#ccff00;--red2:#ccff00;--red3:#95c800;--redg:linear-gradient(135deg,#ccff00,#95c800);} body.theme-flux{--red:#0080ff;--red2:#0080ff;--red3:#0049c8;--redg:linear-gradient(135deg,#0080ff,#0049c8);} body.theme-forge{--red:#ff6600;--red2:#ff6600;--red3:#c82f00;--redg:linear-gradient(135deg,#ff6600,#c82f00);} [class*="theme-"] .play-btn,[class*="theme-"] .submit-btn,[class*="theme-"] .nav-live,[class*="theme-"] .sb-link.on,[class*="theme-"] .btn{background:var(--red)!important} [class*="theme-"] .logo-name em,[class*="theme-"] .sec-t i{color:var(--red)!important} [class*="theme-"] .ticker{background:linear-gradient(90deg,var(--red),var(--red2,#999))!important} [class*="theme-"] .abtn-green,[class*="theme-"] .abtn-red{background:var(--red)!important} @media(max-width:768px){.wrap{padding:0 14px}.two-col{grid-template-columns:1fr}} @media(max-width:480px){.nav-wrap{padding:0 12px}.wrap{padding:0 12px}.player-top{flex-direction:column}.cover{width:100%;height:160px}} /* ── SCHWEBENDE PARTIKEL (passen sich automatisch der Theme-Farbe an) ── */ .hero-particles { position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden; } .hp { position:absolute; bottom:-20px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); opacity:0; animation:floatUp linear infinite; } @keyframes floatUp { 0% { opacity:0; transform:translateY(0) scale(0); } 10% { opacity:.8; transform:translateY(-8vh) scale(1); } 90% { opacity:.4; transform:translateY(-85vh) scale(.7); } 100% { opacity:0; transform:translateY(-100vh)scale(0); } } /* ── DESIGN-WECHSLER (Theme-Picker) ── */ .theme-fab{ position:fixed;bottom:22px;right:22px;width:50px;height:50px;border-radius:50%; background:var(--red);color:#fff;border:none;font-size:22px;cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,.4);z-index:9998;display:flex;align-items:center;justify-content:center; transition:transform .2s; } .theme-fab:hover{transform:scale(1.08)} .theme-panel{ position:fixed;bottom:84px;right:22px;width:300px;max-height:70vh; background:var(--dark2);border:1px solid var(--border);border-radius:16px; box-shadow:0 12px 50px rgba(0,0,0,.6);z-index:9998;display:none;flex-direction:column;overflow:hidden; } .theme-panel.open{display:flex} .theme-panel-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .theme-panel-head h4{font-size:14px;color:#fff;margin:0;font-family:'Barlow Condensed',sans-serif;letter-spacing:1px} .theme-panel-head span{font-size:10px;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:10px} .theme-search{padding:10px 14px} .theme-search input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border);color:#fff; padding:8px 12px;border-radius:8px;font-size:12px;outline:none;box-sizing:border-box;font-family:'Barlow Condensed',sans-serif} .theme-scroll{overflow-y:auto;padding:4px 8px 14px;scrollbar-width:thin} .theme-cat-title{padding:8px 8px 4px;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px} .theme-items{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0 4px 6px} .ti{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;border-radius:8px;cursor:pointer;background:none;border:none} .ti:hover{background:rgba(255,255,255,.06)} .ti.active{background:rgba(255,255,255,.1)} .ti-swatch{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.15)} .ti.active .ti-swatch{box-shadow:0 0 0 2px var(--dark2),0 0 0 4px currentColor} .ti-name{font-size:8px;color:var(--muted);max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center} .ti.active .ti-name{color:#fff} .ti-check{display:none} @media(max-width:480px){ .theme-panel{left:12px;right:12px;width:auto;max-width:none;bottom:78px} .theme-fab{right:14px;bottom:14px} } /* ── 100 ZUSÄTZLICHE THEMES ── */ body.theme-garnet{--red:#733635;--red2:#8f4342;--red3:#281212;--redg:linear-gradient(135deg,#733635,#281212);--redn:#733635;} body.theme-paprika{--red:#c21500;--red2:#f21a00;--red3:#430700;--redg:linear-gradient(135deg,#c21500,#430700);--redn:#c21500;} body.theme-sangria{--red:#92000a;--red2:#b6000c;--red3:#330003;--redg:linear-gradient(135deg,#92000a,#330003);--redn:#92000a;} body.theme-terracotta{--red:#e2725b;--red2:#ff8e71;--red3:#4f271f;--redg:linear-gradient(135deg,#e2725b,#4f271f);--redn:#e2725b;} body.theme-auburn{--red:#a52a2a;--red2:#ce3434;--red3:#390e0e;--redg:linear-gradient(135deg,#a52a2a,#390e0e);--redn:#a52a2a;} body.theme-mahogany{--red:#c04000;--red2:#f05000;--red3:#431600;--redg:linear-gradient(135deg,#c04000,#431600);--redn:#c04000;} body.theme-marigold{--red:#eaa221;--red2:#ffca29;--red3:#51380b;--redg:linear-gradient(135deg,#eaa221,#51380b);--redn:#eaa221;} body.theme-copper-orange{--red:#cb6d51;--red2:#fd8865;--red3:#47261c;--redg:linear-gradient(135deg,#cb6d51,#47261c);--redn:#cb6d51;} body.theme-papaya{--red:#ffefd5;--red2:#ffffff;--red3:#59534a;--redg:linear-gradient(135deg,#ffefd5,#59534a);--redn:#ffefd5;} body.theme-honey{--red:#e8a317;--red2:#ffcb1c;--red3:#513908;--redg:linear-gradient(135deg,#e8a317,#513908);--redn:#e8a317;} body.theme-rust2{--red:#b7410e;--red2:#e45111;--red3:#401604;--redg:linear-gradient(135deg,#b7410e,#401604);--redn:#b7410e;} body.theme-daffodil{--red:#ffff31;--red2:#ffff3d;--red3:#595911;--redg:linear-gradient(135deg,#ffff31,#595911);--redn:#ffff31;} body.theme-mustard{--red:#ffdb58;--red2:#ffff6e;--red3:#594c1e;--redg:linear-gradient(135deg,#ffdb58,#594c1e);--redn:#ffdb58;} body.theme-flax{--red:#eedc82;--red2:#ffffa2;--red3:#534d2d;--redg:linear-gradient(135deg,#eedc82,#534d2d);--redn:#eedc82;} body.theme-canary{--red:#ffff99;--red2:#ffffbf;--red3:#595935;--redg:linear-gradient(135deg,#ffff99,#595935);--redn:#ffff99;} body.theme-brass{--red:#b5a642;--red2:#e2cf52;--red3:#3f3a17;--redg:linear-gradient(135deg,#b5a642,#3f3a17);--redn:#b5a642;} body.theme-champagne{--red:#f7e7ce;--red2:#ffffff;--red3:#565048;--redg:linear-gradient(135deg,#f7e7ce,#565048);--redn:#f7e7ce;} body.theme-sunflower{--red:#ffc512;--red2:#fff616;--red3:#594406;--redg:linear-gradient(135deg,#ffc512,#594406);--redn:#ffc512;} body.theme-dijon{--red:#c39e3e;--red2:#f3c54d;--red3:#443715;--redg:linear-gradient(135deg,#c39e3e,#443715);--redn:#c39e3e;} body.theme-shamrock{--red:#33b864;--red2:#3fe67d;--red3:#114023;--redg:linear-gradient(135deg,#33b864,#114023);--redn:#33b864;} body.theme-pistachio{--red:#93c572;--red2:#b7f68e;--red3:#334427;--redg:linear-gradient(135deg,#93c572,#334427);--redn:#93c572;} body.theme-olive2{--red:#bab86c;--red2:#e8e687;--red3:#414025;--redg:linear-gradient(135deg,#bab86c,#414025);--redn:#bab86c;} body.theme-kelly{--red:#4cbb17;--red2:#5fe91c;--red3:#1a4108;--redg:linear-gradient(135deg,#4cbb17,#1a4108);--redn:#4cbb17;} body.theme-hunter{--red:#355e3b;--red2:#427549;--red3:#122014;--redg:linear-gradient(135deg,#355e3b,#122014);--redn:#355e3b;} body.theme-seafoam{--red:#9fe2bf;--red2:#c6ffee;--red3:#374f42;--redg:linear-gradient(135deg,#9fe2bf,#374f42);--redn:#9fe2bf;} body.theme-basil{--red:#3d7a3f;--red2:#4c984e;--red3:#152a16;--redg:linear-gradient(135deg,#3d7a3f,#152a16);--redn:#3d7a3f;} body.theme-avocado{--red:#568203;--red2:#6ba203;--red3:#1e2d01;--redg:linear-gradient(135deg,#568203,#1e2d01);--redn:#568203;} body.theme-periwinkle{--red:#ccccff;--red2:#ffffff;--red3:#474759;--redg:linear-gradient(135deg,#ccccff,#474759);--redn:#ccccff;} body.theme-admiral{--red:#1c2841;--red2:#233251;--red3:#090e16;--redg:linear-gradient(135deg,#1c2841,#090e16);--redn:#1c2841;} body.theme-turquoise2{--red:#30d5c8;--red2:#3cfffa;--red3:#104a46;--redg:linear-gradient(135deg,#30d5c8,#104a46);--redn:#30d5c8;} body.theme-aegean{--red:#2a4d69;--red2:#346083;--red3:#0e1a24;--redg:linear-gradient(135deg,#2a4d69,#0e1a24);--redn:#2a4d69;} body.theme-baby-blue{--red:#89cff0;--red2:#abffff;--red3:#2f4854;--redg:linear-gradient(135deg,#89cff0,#2f4854);--redn:#89cff0;} body.theme-prussian{--red:#003153;--red2:#003d67;--red3:#00111d;--redg:linear-gradient(135deg,#003153,#00111d);--redn:#003153;} body.theme-glacier{--red:#a0c8d8;--red2:#c8faff;--red3:#38464b;--redg:linear-gradient(135deg,#a0c8d8,#38464b);--redn:#a0c8d8;} body.theme-yale{--red:#0f4d92;--red2:#1260b6;--red3:#051a33;--redg:linear-gradient(135deg,#0f4d92,#051a33);--redn:#0f4d92;} body.theme-oxford{--red:#002147;--red2:#002958;--red3:#000b18;--redg:linear-gradient(135deg,#002147,#000b18);--redn:#002147;} body.theme-orchid2{--red:#da70d6;--red2:#ff8cff;--red3:#4c274a;--redg:linear-gradient(135deg,#da70d6,#4c274a);--redn:#da70d6;} body.theme-plum2{--red:#8e4585;--red2:#b156a6;--red3:#31182e;--redg:linear-gradient(135deg,#8e4585,#31182e);--redn:#8e4585;} body.theme-thistle{--red:#d8bfd8;--red2:#ffeeff;--red3:#4b424b;--redg:linear-gradient(135deg,#d8bfd8,#4b424b);--redn:#d8bfd8;} body.theme-byzantium{--red:#702963;--red2:#8c337b;--red3:#270e22;--redg:linear-gradient(135deg,#702963,#270e22);--redn:#702963;} body.theme-mauve2{--red:#e0b0ff;--red2:#ffdcff;--red3:#4e3d59;--redg:linear-gradient(135deg,#e0b0ff,#4e3d59);--redn:#e0b0ff;} body.theme-amethyst2{--red:#9966cc;--red2:#bf7fff;--red3:#352347;--redg:linear-gradient(135deg,#9966cc,#352347);--redn:#9966cc;} body.theme-eggplant{--red:#614051;--red2:#795065;--red3:#21161c;--redg:linear-gradient(135deg,#614051,#21161c);--redn:#614051;} body.theme-magenta2{--red:#ff00ff;--red2:#ff00ff;--red3:#590059;--redg:linear-gradient(135deg,#ff00ff,#590059);--redn:#ff00ff;} body.theme-fandango{--red:#b53389;--red2:#e23fab;--red3:#3f112f;--redg:linear-gradient(135deg,#b53389,#3f112f);--redn:#b53389;} body.theme-salmon-pink{--red:#ff91a4;--red2:#ffb5cd;--red3:#593239;--redg:linear-gradient(135deg,#ff91a4,#593239);--redn:#ff91a4;} body.theme-cerise{--red:#de3163;--red2:#ff3d7b;--red3:#4d1122;--redg:linear-gradient(135deg,#de3163,#4d1122);--redn:#de3163;} body.theme-rouge{--red:#a94064;--red2:#d3507d;--red3:#3b1623;--redg:linear-gradient(135deg,#a94064,#3b1623);--redn:#a94064;} body.theme-chocolate2{--red:#7b3f00;--red2:#994e00;--red3:#2b1600;--redg:linear-gradient(135deg,#7b3f00,#2b1600);--redn:#7b3f00;} body.theme-coffee{--red:#6f4e37;--red2:#8a6144;--red3:#261b13;--redg:linear-gradient(135deg,#6f4e37,#261b13);--redn:#6f4e37;} body.theme-sand{--red:#c2b280;--red2:#f2dea0;--red3:#433e2c;--redg:linear-gradient(135deg,#c2b280,#433e2c);--redn:#c2b280;} body.theme-taupe{--red:#483c32;--red2:#5a4b3e;--red3:#191511;--redg:linear-gradient(135deg,#483c32,#191511);--redn:#483c32;} body.theme-umber{--red:#635147;--red2:#7b6558;--red3:#221c18;--redg:linear-gradient(135deg,#635147,#221c18);--redn:#635147;} body.theme-walnut{--red:#5c4033;--red2:#73503f;--red3:#201611;--redg:linear-gradient(135deg,#5c4033,#201611);--redn:#5c4033;} body.theme-hazel{--red:#8e7618;--red2:#b1931e;--red3:#312908;--redg:linear-gradient(135deg,#8e7618,#312908);--redn:#8e7618;} body.theme-camel{--red:#c19a6b;--red2:#f1c085;--red3:#433525;--redg:linear-gradient(135deg,#c19a6b,#433525);--redn:#c19a6b;} body.theme-charcoal2{--red:#36454f;--red2:#435662;--red3:#12181b;--redg:linear-gradient(135deg,#36454f,#12181b);--redn:#36454f;} body.theme-graphite{--red:#41424c;--red2:#51525f;--red3:#16171a;--redg:linear-gradient(135deg,#41424c,#16171a);--redn:#41424c;} body.theme-pewter{--red:#8e9196;--red2:#b1b5bb;--red3:#313234;--redg:linear-gradient(135deg,#8e9196,#313234);--redn:#8e9196;} body.theme-onyx{--red:#0f0f0f;--red2:#121212;--red3:#050505;--redg:linear-gradient(135deg,#0f0f0f,#050505);--redn:#0f0f0f;} body.theme-titanium{--red:#878681;--red2:#a8a7a1;--red3:#2f2e2d;--redg:linear-gradient(135deg,#878681,#2f2e2d);--redn:#878681;} body.theme-neon-pink{--red:#ff10f0;--red2:#ff14ff;--red3:#590554;--redg:linear-gradient(135deg,#ff10f0,#590554);--redn:#ff10f0;} body.theme-neon-blue{--red:#1f51ff;--red2:#2665ff;--red3:#0a1c59;--redg:linear-gradient(135deg,#1f51ff,#0a1c59);--redn:#1f51ff;} body.theme-neon-orange{--red:#ff5f1f;--red2:#ff7626;--red3:#59210a;--redg:linear-gradient(135deg,#ff5f1f,#59210a);--redn:#ff5f1f;} body.theme-neon-yellow{--red:#dfff00;--red2:#ffff00;--red3:#4e5900;--redg:linear-gradient(135deg,#dfff00,#4e5900);--redn:#dfff00;} body.theme-neon-purple{--red:#bc13fe;--red2:#eb17ff;--red3:#410658;--redg:linear-gradient(135deg,#bc13fe,#410658);--redn:#bc13fe;} body.theme-electric-lime{--red:#ccff00;--red2:#ffff00;--red3:#475900;--redg:linear-gradient(135deg,#ccff00,#475900);--redn:#ccff00;} body.theme-hot-magenta{--red:#ff0090;--red2:#ff00b4;--red3:#590032;--redg:linear-gradient(135deg,#ff0090,#590032);--redn:#ff0090;} body.theme-ultraviolet{--red:#7f00ff;--red2:#9e00ff;--red3:#2c0059;--redg:linear-gradient(135deg,#7f00ff,#2c0059);--redn:#7f00ff;} body.theme-pastel-mint{--red:#aaf0d1;--red2:#d4ffff;--red3:#3b5449;--redg:linear-gradient(135deg,#aaf0d1,#3b5449);--redn:#aaf0d1;} body.theme-pastel-lilac{--red:#d6cadd;--red2:#fffcff;--red3:#4a464d;--redg:linear-gradient(135deg,#d6cadd,#4a464d);--redn:#d6cadd;} body.theme-pastel-peach{--red:#ffdab9;--red2:#ffffe7;--red3:#594c40;--redg:linear-gradient(135deg,#ffdab9,#594c40);--redn:#ffdab9;} body.theme-pastel-sky{--red:#a7c7e7;--red2:#d0f8ff;--red3:#3a4550;--redg:linear-gradient(135deg,#a7c7e7,#3a4550);--redn:#a7c7e7;} body.theme-pastel-rose{--red:#fbc4ab;--red2:#fff5d5;--red3:#57443b;--redg:linear-gradient(135deg,#fbc4ab,#57443b);--redn:#fbc4ab;} body.theme-pastel-lemon{--red:#fdfd96;--red2:#ffffbb;--red3:#585834;--redg:linear-gradient(135deg,#fdfd96,#585834);--redn:#fdfd96;} body.theme-pastel-aqua{--red:#a0e7e5;--red2:#c8ffff;--red3:#385050;--redg:linear-gradient(135deg,#a0e7e5,#385050);--redn:#a0e7e5;} body.theme-pastel-grape{--red:#c9a0dc;--red2:#fbc8ff;--red3:#46384d;--redg:linear-gradient(135deg,#c9a0dc,#46384d);--redn:#c9a0dc;} body.theme-blackcurrant{--red:#32012f;--red2:#3e013a;--red3:#110010;--redg:linear-gradient(135deg,#32012f,#110010);--redn:#32012f;} body.theme-dark-emerald{--red:#004b49;--red2:#005d5b;--red3:#001a19;--redg:linear-gradient(135deg,#004b49,#001a19);--redn:#004b49;} body.theme-deep-violet{--red:#330033;--red2:#3f003f;--red3:#110011;--redg:linear-gradient(135deg,#330033,#110011);--redn:#330033;} body.theme-shadow{--red:#1a1a2e;--red2:#202039;--red3:#090910;--redg:linear-gradient(135deg,#1a1a2e,#090910);--redn:#1a1a2e;} body.theme-void{--red:#0d0d0d;--red2:#101010;--red3:#040404;--redg:linear-gradient(135deg,#0d0d0d,#040404);--redn:#0d0d0d;} body.theme-abyss{--red:#000033;--red2:#00003f;--red3:#000011;--redg:linear-gradient(135deg,#000033,#000011);--redn:#000033;} body.theme-vermilion2{--red:#e34234;--red2:#ff5241;--red3:#4f1712;--redg:linear-gradient(135deg,#e34234,#4f1712);--redn:#e34234;} body.theme-oxblood{--red:#4a0404;--red2:#5c0505;--red3:#190101;--redg:linear-gradient(135deg,#4a0404,#190101);--redn:#4a0404;} body.theme-paprika2{--red:#e9523f;--red2:#ff664e;--red3:#511c16;--redg:linear-gradient(135deg,#e9523f,#511c16);--redn:#e9523f;} body.theme-squash{--red:#f2b50f;--red2:#ffe212;--red3:#543f05;--redg:linear-gradient(135deg,#f2b50f,#543f05);--redn:#f2b50f;} body.theme-ginger{--red:#b06500;--red2:#dc7e00;--red3:#3d2300;--redg:linear-gradient(135deg,#b06500,#3d2300);--redn:#b06500;} body.theme-juniper{--red:#1f3d2b;--red2:#264c35;--red3:#0a150f;--redg:linear-gradient(135deg,#1f3d2b,#0a150f);--redn:#1f3d2b;} body.theme-fern{--red:#4f7942;--red2:#629752;--red3:#1b2a17;--redg:linear-gradient(135deg,#4f7942,#1b2a17);--redn:#4f7942;} body.theme-cerulean2{--red:#007ba7;--red2:#0099d0;--red3:#002b3a;--redg:linear-gradient(135deg,#007ba7,#002b3a);--redn:#007ba7;} body.theme-delft{--red:#1e3a5f;--red2:#254876;--red3:#0a1421;--redg:linear-gradient(135deg,#1e3a5f,#0a1421);--redn:#1e3a5f;} body.theme-orchidpink{--red:#f2bdcd;--red2:#ffecff;--red3:#544247;--redg:linear-gradient(135deg,#f2bdcd,#544247);--redn:#f2bdcd;} body.theme-hibiscus{--red:#b3446c;--red2:#df5587;--red3:#3e1725;--redg:linear-gradient(135deg,#b3446c,#3e1725);--redn:#b3446c;} body.theme-guava{--red:#f17c67;--red2:#ff9b80;--red3:#542b24;--redg:linear-gradient(135deg,#f17c67,#542b24);--redn:#f17c67;} body.theme-slate-grey{--red:#6a7480;--red2:#8491a0;--red3:#25282c;--redg:linear-gradient(135deg,#6a7480,#25282c);--redn:#6a7480;} body.theme-dove{--red:#6f6e6c;--red2:#8a8987;--red3:#262625;--redg:linear-gradient(135deg,#6f6e6c,#262625);--redn:#6f6e6c;} body.theme-nickel{--red:#727472;--red2:#8e918e;--red3:#272827;--redg:linear-gradient(135deg,#727472,#272827);--redn:#727472;} body.theme-radium{--red:#9cff00;--red2:#c3ff00;--red3:#365900;--redg:linear-gradient(135deg,#9cff00,#365900);--redn:#9cff00;} body.theme-strobe{--red:#ff1493;--red2:#ff19b7;--red3:#590733;--redg:linear-gradient(135deg,#ff1493,#590733);--redn:#ff1493;} /* ── DATUM & UHRZEIT (in der Navigation, oben rechts neben LIVE) ── */ .nav-clock{ display:inline-flex;align-items:center; font-size:11px;color:var(--muted);font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px; padding:6px 12px;border-radius:8px; background:rgba(255,255,255,.04);border:1px solid var(--border); margin-left:4px;white-space:nowrap; } @media(max-width:900px){ .nav-clock{ display:block;width:100%;text-align:center;margin:8px 0 0; font-size:12px;padding:8px; } } /* ── RESPONSIVE 2-SPALTEN-LAYOUT (z.B. Letzte Titel + Song-Votes) ── */ @media(max-width:760px){ .responsive-2col{grid-template-columns:1fr !important} } /* ── STATISTIK LÄNDER-TABS ── */ .ctry-tab{ background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted); font-size:11px;font-weight:700;letter-spacing:.5px;padding:6px 13px;border-radius:20px; cursor:pointer;font-family:'Barlow Condensed',sans-serif;transition:all .15s; } .ctry-tab:hover{color:#fff;border-color:rgba(255,255,255,.2)} .ctry-tab.on{background:var(--red);color:#fff;border-color:var(--red)} /* ── LIVE-SENDUNG PULSIEREN (Sendeplan-Vorschau) ── */ @keyframes liveCardPulse{ 0%,100%{box-shadow:0 0 0 2px var(--green), 0 0 24px color-mix(in srgb, var(--green) 30%, transparent)} 50%{box-shadow:0 0 0 2px var(--green), 0 0 40px color-mix(in srgb, var(--green) 55%, transparent)} } /* ══════════════════════════════════════════════════════════ RADIOCHAT ══════════════════════════════════════════════════════════ */ .chat-shell{display:flex;flex-direction:column;height:100%;background:var(--dark2);font-family:var(--chat-font, inherit)} .chat-shell .cm-name{color:var(--chat-accent, #fff) !important} .chat-shell .cm-level-badge{filter:none} .chat-shell button.abtn-green, .chat-shell .cav-opt.sel{border-color:var(--chat-accent, var(--green)) !important} .chat-shell.page-mode{height:720px;border:1px solid var(--border);border-radius:16px;overflow:hidden} .chat-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);flex-shrink:0} .chat-hd-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;color:#fff;display:flex;align-items:center;gap:8px} .chat-hd-title .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1.4s ease-in-out infinite} .chat-close-btn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:4px} .chat-toolbar{display:flex;gap:6px;padding:8px 10px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto} .chat-tb-btn{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--muted);font-size:11px;font-weight:700;padding:5px 10px;border-radius:16px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:.15s} .chat-tb-btn:hover{color:#fff;border-color:var(--chat-accent,var(--green))} .chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px} .chat-main-row{flex:1;display:flex;min-height:0} .chat-online-panel{width:170px;flex-shrink:0;border-left:1px solid var(--border);overflow-y:auto;padding:12px 10px;background:rgba(255,255,255,.015)} .chat-online-panel .cop-title{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .chat-online-user{display:flex;align-items:center;gap:7px;padding:6px 7px;border-radius:7px;font-size:12px;margin-bottom:3px} .chat-online-user .cou-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0} .chat-online-user .cou-name{color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-online-user.role-admin .cou-name{color:var(--red);font-weight:700} .chat-online-user.role-mod .cou-name{color:#60a5fa;font-weight:700} .chat-online-user.role-admin .cou-dot,.chat-online-user.role-mod .cou-dot{background:currentColor} .chat-online-empty{font-size:11px;color:var(--muted);padding:6px 7px} @media(max-width:700px){.chat-online-panel{display:none}} .chat-msg{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;animation:chatIn .2s ease} @keyframes chatIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .chat-msg .cm-av{width:28px;height:28px;border-radius:50%;background:var(--dark3);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;font-weight:800;color:#fff} .chat-msg .cm-body{flex:1;min-width:0} .chat-msg .cm-name{font-weight:700;color:#ddd;margin-right:6px} .chat-msg .cm-mod-tools{display:inline-flex;gap:6px;margin-left:8px} .chat-msg .cm-mod-tools button{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:5px;line-height:1} .chat-msg .cm-mod-tools button:hover{background:rgba(255,255,255,.14);color:#fff} .chat-msg .cm-time{color:var(--muted);font-size:10px} .chat-msg .cm-text{color:#e5e5e5;word-wrap:break-word;white-space:pre-wrap} .chat-msg .cm-reactions{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap} .chat-msg .cm-react-btn{font-size:13px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:1px 7px;cursor:pointer;transition:.15s;opacity:.5} .chat-msg .cm-react-btn:hover{opacity:1;background:rgba(255,255,255,.1)} .chat-msg .cm-react-btn b{font-size:10px;color:var(--muted);font-weight:700;margin-left:2px} .chat-msg.role-mod .cm-av{background:linear-gradient(135deg,#3b82f6,#1d4ed8)} .chat-msg.role-mod .cm-name{color:#60a5fa} .chat-msg.role-admin .cm-av{background:linear-gradient(135deg,var(--red),#7a0010)} .chat-msg.role-admin .cm-name{color:var(--red)} .chat-msg .cm-badge{font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;margin-left:5px;vertical-align:middle} .chat-msg.role-mod .cm-badge{background:rgba(59,130,246,.18);color:#60a5fa} .chat-msg.role-admin .cm-badge{background:color-mix(in srgb, var(--red) 18%, transparent);color:var(--red)} .chat-msg .cm-level-badge{font-size:12px;margin-left:4px;vertical-align:middle} .chat-msg .cm-live-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:8px;margin-left:6px;vertical-align:middle;background:linear-gradient(135deg,#ef4444,#c8001a);color:#fff;letter-spacing:.5px;animation:cmLivePulse 1.6s ease-in-out infinite} @keyframes cmLivePulse{0%,100%{opacity:1}50%{opacity:.65}} .chat-msg.deleted-preview .cm-text{color:var(--muted);font-style:italic} .chat-input-area{border-top:1px solid var(--border);padding:10px;flex-shrink:0;position:relative} .chat-input-row{display:flex;gap:8px;align-items:center} .chat-input-row input{flex:1;background:var(--dark3);border:1px solid var(--border);border-radius:20px;padding:9px 14px;color:#fff;font-size:13px;outline:none} .chat-input-row input:focus{border-color:var(--chat-accent,var(--green))} .chat-emoji-btn,.chat-send-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px} .chat-emoji-btn{background:rgba(255,255,255,.06);color:var(--muted)} .chat-send-btn{background:var(--chat-accent,var(--green));color:#fff} .chat-send-btn:disabled{opacity:.4;cursor:default} .chat-emoji-picker{position:absolute;bottom:56px;left:10px;right:10px;max-width:340px;max-height:220px;overflow-y:auto;background:var(--dark3);border:1px solid var(--border);border-radius:12px;padding:8px;display:none;grid-template-columns:repeat(8,1fr);gap:4px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:5} .chat-sticker-bar{display:flex;gap:6px;overflow-x:auto;padding:6px 8px;white-space:nowrap;scrollbar-width:thin} .chat-sticker-bar::-webkit-scrollbar{height:4px} .chat-sticker{flex-shrink:0;font-size:11px;background:var(--dark3);border:1px solid var(--border);border-radius:14px;padding:4px 10px;cursor:pointer;transition:.15s;color:var(--muted)} .chat-sticker:hover{background:var(--chat-accent,var(--green));color:#000;border-color:var(--chat-accent,var(--green))} .chat-emoji-picker.open{display:grid} .chat-emoji-picker span{cursor:pointer;font-size:18px;text-align:center;padding:4px;border-radius:6px;transition:.1s} .chat-emoji-picker span:hover{background:rgba(255,255,255,.08)} .chat-auth{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px;overflow-y:auto} .chat-auth h4{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:#fff;margin-bottom:4px} .chat-auth p.sub{font-size:12px;color:var(--muted);margin-bottom:16px} .chat-auth .fg{margin-bottom:10px} .chat-auth .fg label{display:block;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:4px} .chat-auth .fg input{width:100%;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:#fff;font-size:13px;outline:none} .chat-auth .fg input:focus{border-color:var(--chat-accent,var(--green))} .chat-auth button.main{width:100%;background:var(--chat-accent,var(--green));color:#fff;border:none;border-radius:8px;padding:11px;font-weight:800;font-size:13px;cursor:pointer;margin-top:6px} .chat-auth .switch-link{text-align:center;margin-top:16px} .chat-auth .switch-link span{display:block;font-size:12px;color:var(--muted);margin-bottom:8px} .chat-auth .switch-link a{display:inline-block;width:100%;box-sizing:border-box;background:transparent;border:1px solid var(--chat-accent,var(--green));color:var(--chat-accent,var(--green));padding:10px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;text-decoration:none} .chat-auth .switch-link a:hover{background:color-mix(in srgb, var(--green) 10%, transparent)} .chat-auth .msg-box{font-size:12px;padding:9px 12px;border-radius:8px;margin-bottom:12px;display:none} .chat-auth .msg-box.err{display:block;background:color-mix(in srgb, var(--red) 15%, transparent);color:#ff8a8a;border:1px solid color-mix(in srgb, var(--red) 30%, transparent)} .chat-auth .msg-box.ok{display:block;background:color-mix(in srgb, var(--green) 15%, transparent);color:#7ee2a8;border:1px solid color-mix(in srgb, var(--green) 30%, transparent)} .greet-ticker-span{background:rgba(255,255,255,.12);border-radius:20px;padding:4px 20px !important} .greet-ticker-span::before,.greet-ticker-span::after{content:'💌' !important;color:#fff !important} .ticker-announce-span{background:rgba(255,215,0,.16);border-radius:20px;padding:4px 20px !important} .ticker-announce-span::before,.ticker-announce-span::after{content:'📌' !important;color:#FFD700 !important} .chat-avatar-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:8px} .cav-opt{font-size:20px;text-align:center;padding:5px 0;border-radius:6px;cursor:pointer;transition:.15s;border:2px solid transparent} .cav-opt:hover{background:rgba(255,255,255,.06)} .cav-opt.sel{border-color:var(--green);background:color-mix(in srgb, var(--green) 12%, transparent)} .chat-userbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:rgba(255,255,255,.02);border-top:1px solid var(--border);font-size:11px;color:var(--muted);flex-shrink:0} .chat-userbar b{color:#ddd} .chat-userbar .logout-link{color:var(--muted);cursor:pointer;text-decoration:underline} /* Admin: Warteliste + Nutzerverwaltung (im Dashboard) */ .chat-pending-row,.chat-user-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;flex-wrap:wrap} .chat-pending-row .cp-info{flex:1;min-width:180px} .chat-pending-row .cp-code{font-family:monospace;font-size:15px;font-weight:800;color:var(--cat-chat);background:rgba(132,204,22,.1);padding:3px 10px;border-radius:6px}