:root {
            --brand-primary: #e8185d;
            --brand-rgb: 232,24,93;
            --brand-secondary: #b0124a;
            --brand-glow: rgba(232,24,93,0.3);
            --brand-pulse-inner: rgba(232,24,93,0.05);
            --bg-main: #0a0c10;
            --bg-card: #11141b;
            --bg-body: #060f1e;

            /* Responsive spacing system */
            --padding-mobile: 16px;
            --padding-tablet: 24px;
            --padding-desktop: 40px;
            --gap-small: 12px;
            --gap-medium: 16px;
            --gap-large: 24px;
            --container-padding: var(--padding-desktop);
        }
        .theme-winter  { --brand-primary:#00d4ff;--brand-rgb:0,212,255;--brand-secondary:#0077ff;--brand-glow:rgba(0,212,255,0.3);--bg-main:#050a14;--bg-card:#0c162d; }
        .theme-autumn  { --brand-primary:#d45b00;--brand-rgb:212,91,0;--brand-secondary:#5e2a00;--brand-glow:rgba(212,91,0,0.3);--bg-main:#0a0806;--bg-card:#140f0a; }
        .theme-halloween{ --brand-primary:#a855f7;--brand-rgb:168,85,247;--brand-secondary:#8b0000;--brand-glow:rgba(168,85,247,0.4);--bg-main:#050505;--bg-card:#0d0d0d; }
        .theme-easter  { --brand-primary:#f472b6;--brand-rgb:244,114,182;--brand-secondary:#38bdf8;--brand-glow:rgba(244,114,182,0.4); }
        .theme-newyear { --brand-primary:#ffd700;--brand-rgb:255,215,0;--brand-secondary:#fcf6ba;--brand-glow:rgba(255,215,0,0.5);--bg-main:#050505; }
        .theme-spring  { --brand-primary:#f5c518;--brand-rgb:245,197,24;--brand-secondary:#e8a800;--brand-glow:rgba(245,197,24,0.45);--bg-main:#0d0e05;--bg-card:#16180a; }
        .theme-summer  { --brand-primary:#fbbf24;--brand-rgb:251,191,36;--brand-secondary:#f59e0b;--brand-glow:rgba(251,191,36,0.45);--bg-main:#0a0805;--bg-card:#131008; }
        .theme-gold    { --brand-primary:#f5c518;--brand-rgb:245,197,24;--brand-secondary:#e8a800;--brand-glow:rgba(245,197,24,0.45);--bg-main:#0d0e05;--bg-card:#16180a; }
        .theme-newyear.hbr-page {
            background: linear-gradient(135deg, #050505 0%, #0d0b00 50%, #050505 100%);
            animation: ny-bg-scroll 8s ease-in-out infinite alternate;
        }
        @keyframes ny-bg-scroll {
            0%   { background-position: 0% 50%; }
            100% { background-position: 100% 50%; }
        }
        .theme-newyear .hero-logo,
        .theme-newyear .hero-logo span {
            background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gold-shimmer 3s ease-in-out infinite;
            background-size: 200% auto;
        }
        @keyframes gold-shimmer {
            0%   { background-position: 0% center; }
            100% { background-position: 200% center; }
        }
        html,body{margin:0;padding:0;background:#0b0e14 !important;color:#fff;font-family:'Figtree','Inter',sans-serif;}
        body{display:flex;flex-direction:column;}
        *{box-sizing:border-box;}
        a{color:inherit;text-decoration:none;}
        .hbr-page { display:flex; flex-direction:column; min-height:100vh; background:var(--bg-main); padding-bottom:0; }
        main { padding-bottom: 100px; }
        .page-home main { padding-bottom: 100px; }

        /* NAV */
        .sn-nav{height:72px;border-bottom:1px solid rgba(255,255,255,0.06);background:#0b0e14;position:sticky;top:0;z-index:1000;}
        .nav-container{max-width:1500px;margin:0 auto;display:flex;align-items:center;height:100%;padding:0 var(--container-padding);gap:0;}
        .nav-elements{display:flex;align-items:center;flex:1;gap:0;}
        /* Logo */
        .nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0;margin-right:40px;}
        .nav-logo-heart{flex-shrink:0;}
        .nav-logo-words{font-size:20px;font-weight:950;font-style:italic;letter-spacing:-1px;text-transform:uppercase;color:#fff;line-height:1;}
        .nav-logo .brand-text{color:var(--brand-primary);}
        /* Centre links */
        .nav-links{display:flex;gap:24px;align-items:center;flex:1;}
        .nav-links a{font-size:12px;font-weight:600;color:#aaa;letter-spacing:.3px;text-decoration:none;transition:.2s;position:relative;padding-bottom:2px;}
        .nav-links a:hover{color:#fff;}
        .nav-links a.active{color:#fff;font-weight:700;}
        .nav-links a.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--brand-primary);border-radius:1px;}
        /* Dropdown */
        .nav-dropdown{position:relative;}
        .nav-dropdown-toggle{background:none;border:none;color:#aaa;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;padding:0;font-family:inherit;letter-spacing:.3px;transition:.2s;}
        .nav-dropdown-toggle:hover{color:#fff;}
        .nav-dropdown-toggle svg{transition:transform .2s;}
        .nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg);}
        .nav-dropdown-menu{position:absolute;top:calc(100% + 10px);left:0;background:#0f1117;border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:6px;min-width:160px;display:none;flex-direction:column;gap:2px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.5);}
        .nav-dropdown.open .nav-dropdown-menu{display:flex;}
        .nav-dropdown-menu a{padding:8px 12px;border-radius:7px;font-size:12px;font-weight:600;color:#aaa;text-decoration:none;transition:.15s;}
        .nav-dropdown-menu a:hover{background:rgba(255,255,255,.05);color:#fff;}
        /* Right auth area */
        .nav-auth{display:flex;align-items:center;gap:12px;flex-shrink:0;}
        /* Social icons */
        .nav-social-icon{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:#777;display:flex;align-items:center;justify-content:center;transition:.2s;text-decoration:none;flex-shrink:0;}
        .nav-social-icon:hover{color:#fff;border-color:rgba(255,255,255,0.2);}
        .nav-social-discord{background:#5865f2;border-color:#5865f2;color:#fff;}
        .nav-social-discord:hover{background:#4752c4;border-color:#4752c4;}
        /* LISTEN LIVE button */
        .nav-listen-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--brand-primary);color:var(--brand-primary);padding:8px 18px;border-radius:100px;font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:.2s;flex-shrink:0;}
        .nav-listen-btn:hover{background:var(--brand-primary);color:#fff;box-shadow:0 4px 14px var(--brand-glow);}
        /* Staff Panel button */
        .nav-staff-btn{display:flex;align-items:center;gap:8px;background:#fff;color:#000!important;padding:8px 16px;border-radius:8px;font-size:11px;font-weight:950;text-transform:uppercase;text-decoration:none;letter-spacing:1px;transition:.2s;border:none;cursor:pointer;}
        .nav-staff-btn:hover{background:var(--brand-primary);color:#fff!important;}
        .nav-staff-dot{width:8px;height:8px;background:var(--brand-primary);border-radius:50%;box-shadow:0 0 6px var(--brand-primary);animation:npulse 2s infinite;flex-shrink:0;}
        @keyframes npulse{0%,100%{opacity:1}50%{opacity:.3}}
        /* Settings gear */
        .nav-settings{color:#555;display:flex;align-items:center;transition:.2s;text-decoration:none;}
        .nav-settings svg{width:18px;height:18px;}
        .nav-settings:hover{color:#fff;}
        /* Username */
        .nav-user-name{font-size:11px;font-weight:900;color:#ccc;text-transform:uppercase;letter-spacing:1px;}
        /* Logout */
        .nav-logout{font-size:11px;font-weight:900;color:var(--brand-primary);background:none;border:none;cursor:pointer;padding:0;letter-spacing:1px;text-transform:uppercase;transition:.2s;}
        .nav-logout:hover{color:#fff;}
        /* Login button */
        .nav-login{background:transparent;border:1.5px solid rgba(255,255,255,0.2);padding:8px 20px;border-radius:8px;font-weight:700;font-size:11px;color:#ccc;text-decoration:none;letter-spacing:.5px;text-transform:uppercase;transition:.2s;}
        .nav-login:hover{border-color:rgba(255,255,255,0.4);color:#fff;}
        /* Mobile */
        .mobile-toggle{display:none;background:none;border:none;color:var(--brand-primary);font-weight:950;font-size:18px;cursor:pointer;margin-left:auto;}

        /* FLASH */
        .flash-success,.flash-error{padding:16px 24px;margin:16px auto;max-width:1400px;border-radius:12px;font-weight:700;font-size:13px;}
        .flash-success{background:rgba(0,200,100,.15);border:1px solid rgba(0,200,100,.3);color:#0c6;}
        .flash-error{background:rgba(255,50,50,.15);border:1px solid rgba(255,50,50,.3);color:#f66;}

        /* FOOTER */
        footer.hbr-footer{background:var(--bg-card);border-top:1px solid #1a1a1a;padding:40px var(--container-padding);margin-top:auto;}
        .footer-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:30px;}
        .footer-logo{font-size:28px;font-weight:950;font-style:italic;letter-spacing:-2px;}
        .footer-logo span{color:var(--brand-primary);}
        .footer-links{display:flex;gap:30px;flex-wrap:wrap;}
        .footer-links a{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#444;transition:.2s;}
        .footer-links a:hover{color:var(--brand-primary);}
        .footer-copy{font-size:10px;color:#222;letter-spacing:1px;text-transform:uppercase;}

        /* MUSIC PLAYER */
        /* ── FLOATING CAPSULE PLAYER ── */
        #music-player{
            position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
            width:calc(100% - 40px);max-width:960px;
            background:rgba(10,10,16,0.97);
            border:1.5px solid var(--brand-primary);
            border-radius:18px;
            backdrop-filter:blur(20px);
            z-index:9000;
            box-shadow:0 8px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(var(--brand-rgb),.08);
        }
        .capsule-content{
            display:flex;align-items:center;
            padding:10px 18px 10px 12px;
            gap:16px;
        }
        /* LEFT */
        .capsule-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
        .art-wrapper{position:relative;flex-shrink:0;}
        .capsule-art{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1.5px solid rgba(var(--brand-rgb),.5);display:block;}
        .art-glow{position:absolute;inset:-4px;border-radius:12px;background:var(--brand-primary);filter:blur(10px);z-index:-1;opacity:.5;}
        .track-info{min-width:0;}
        .track-title{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;margin:0 0 2px;cursor:pointer;}
        .track-artist{font-size:11px;color:#666;font-weight:600;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
        .player-live-pill{display:inline-block;font-size:8px;font-weight:900;letter-spacing:1.5px;color:var(--brand-primary);border:1px solid var(--brand-primary);padding:1px 6px;border-radius:4px;text-transform:uppercase;}
        /* CENTER: controls */
        .capsule-center{display:flex;align-items:center;gap:8px;flex-shrink:0;}
        .cp-btn{background:none;border:none;color:#666;cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .2s,background .2s;}
        .cp-btn:hover{color:#fff;background:rgba(255,255,255,.06);}
        .cp-btn--inactive{opacity:.3;cursor:default;}
        .cp-btn--inactive:hover{color:#666;background:none;}
        .cp-play-btn{width:44px;height:44px;border-radius:50%;background:var(--brand-primary);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 16px var(--brand-glow);transition:.2s;}
        .cp-play-btn:hover{transform:scale(1.08);box-shadow:0 6px 22px var(--brand-glow);}
        /* RIGHT */
        .capsule-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
        .cp-waveform{display:flex;align-items:center;gap:2px;height:28px;}
        .cp-wave-bar{width:3px;border-radius:2px;background:var(--brand-primary);opacity:.7;animation:cpWave 1s ease-in-out infinite alternate;}
        @keyframes cpWave{0%{height:4px}100%{height:22px}}
        .cp-spotify-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(29,185,84,0.12);border:1px solid rgba(29,185,84,0.25);color:#1db954;text-decoration:none;transition:background .2s,transform .15s;}
        .cp-spotify-btn:hover{background:rgba(29,185,84,0.25);transform:scale(1.1);}
        .cp-vol{display:flex;align-items:center;gap:6px;}
        .vol-slider{width:72px;accent-color:var(--brand-primary);cursor:pointer;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:rgba(255,255,255,.1);}
        .vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--brand-primary);cursor:pointer;}
        /* legacy IDs still used by player.js */
        .status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
        .auto-dot{background:#ff4500;box-shadow:0 0 6px #ff4500;animation:sdot 1.8s infinite;}
        .live-dot-cls{background:#00ff88;box-shadow:0 0 6px #00ff88;animation:sdot 1s infinite;}
        @keyframes sdot{0%,100%{opacity:1}50%{opacity:.25}}
        .icon-play{width:20px;height:20px;fill:#fff;}
        /* Mobile-responsive padding system */
        @media(max-width:640px){
            :root {
                --container-padding: var(--padding-mobile);
            }
        }
        @media(min-width:641px) and (max-width:1024px){
            :root {
                --container-padding: var(--padding-tablet);
            }
        }

        /* Music player responsive adjustments */
        @media(max-width:700px){
            .cp-waveform{display:none;}
            #music-player{
                bottom:10px;
                border-radius:12px;
                width:calc(100% - 32px);
                max-width:none;
            }
            .capsule-content{padding:8px 12px 8px 10px;}
            .capsule-art{width:56px;height:56px;}
            .track-title{font-size:13px;}
            .track-artist{font-size:10px;}
            .big-play-btn{width:44px;height:44px;}
        }

        /* Navigation responsive adjustments */
        @media(max-width:375px){
            .nav-logo{font-size:20px;margin-right:20px;}
            .nav-links a{font-size:9px;gap:12px;}
            .nav-discord{padding:8px 14px;font-size:9px;}
            .nav-staff-btn{padding:6px 12px;font-size:9px;}
            .mobile-toggle{font-size:20px;}
        }

        @media(max-width:1024px){
            .nav-elements{position:fixed;top:0;left:0;right:0;bottom:0;background:#050505;flex-direction:column;justify-content:center;align-items:center;padding:80px 20px;opacity:0;pointer-events:none;transition:opacity .3s;z-index:999;display:flex;}
            #nav-elements.open{opacity:1;pointer-events:all;}
            .nav-links{flex-direction:column;gap:28px;align-items:center;}
            .nav-links a{font-size:20px;}
            .nav-auth{flex-direction:column;gap:16px;align-items:center;margin-top:20px;}
            .mobile-toggle{display:block;}
        }