/* =============================================================================
   RADIO CMS — main.css  v3
   Theme A: Dark Charcoal. Change the 4 accent vars to re-theme per client.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TOKENS — change these 4 for any client
   ----------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    --accent:        #3b82f6;
    --accent-dark:   #2563eb;
    --accent-dim:    rgba(59,130,246,0.12);
    --accent-border: rgba(59,130,246,0.28);
    --accent-2:      #ff8c3c;
    --accent-glow:   color-mix(in srgb, var(--accent) 45%, transparent);
    --link-color:    var(--accent);

    --bg:        #040b1a;
    --surf:      #091226;
    --card:      #182646;
    --surf2:     #0d1830;
    --surf3:     #16213d;
    --border:    rgba(255,255,255,0.09);
    --text:      #f0f0f0;
    --text2:     #a9b8d4;
    --text3:     #8093b8;

    --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
    --accent-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
    --accent-gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent-2) 20%, transparent));
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
    --ease: 0.15s ease;

    --header-h: 92px;
    --nav-h:    58px;

    --notice-danger:  #fca5a5;
    --notice-success: #86efac;
    --notice-warning: #fde047;
}

/* -----------------------------------------------------------------------------
   LIGHT THEME — overrides for the content area only. Header, nav, hero, and
   footer ("chrome") stay dark in both themes by design — their colors are
   hardcoded rather than tokenized, since the logo is light-colored for a
   dark bar and the hero is built around a dark photo-overlay treatment.
   ----------------------------------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;

    --bg:     #f1f4f9;
    --card:   #ffffff;
    --surf2:  #eef1f7;
    --surf3:  #e2e7f0;
    --border: rgba(15,23,42,0.08);
    --text:   #0f1b2e;
    --text2:  #51607a;
    --text3:  #7c8aa3;

    --notice-danger:  #b91c1c;
    --notice-success: #15803d;
    --notice-warning: #854d0e;
}

/* -----------------------------------------------------------------------------
   BASE
   ----------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Visible keyboard-focus ring across the whole site. :focus-visible only
   triggers for keyboard/programmatic focus, not mouse clicks, so this adds
   no visual noise for mouse users while giving keyboard users a clear,
   theme-aware indicator everywhere (including on dark "chrome" elements,
   where the offset keeps the ring from disappearing into the background). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:4px;
}

/* Skip-to-content link: off-screen until a keyboard user tabs to it */
.skip-link{
    position:absolute; left:-9999px; top:0; z-index:1000;
    background:var(--accent-gradient); color:#fff;
    font-family:var(--font-display); font-weight:700; font-size:14px;
    padding:10px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{
    left:0;
    outline:2px solid #fff;
    outline-offset:-2px;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;min-height:100vh}
a{color:var(--link-color);text-decoration:none;transition:opacity var(--ease)}
a:hover{opacity:.8}
img{max-width:100%;display:block}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.25;color:var(--text);font-weight:700;font-family:var(--font-display)}
input,button,select,textarea{font-family:var(--font)}

/* -----------------------------------------------------------------------------
   ALERT BANNER
   ----------------------------------------------------------------------------- */
.alert-banner{text-align:center;padding:9px 16px;font-size:14px;font-weight:500}
.alert-banner--info{background:#1e3a5f;color:#93c5fd}
.alert-banner--warning{background:#3a2a00;color:#fcd34d}
.alert-banner--danger{background:#3a0a0a;color:#fca5a5}
.alert-banner--success{background:#0a2e1a;color:#86efac}

.site-wrapper{display:flex;flex-direction:column;min-height:100vh}

/* -----------------------------------------------------------------------------
   HEADER
   ----------------------------------------------------------------------------- */
.site-header{
    height:var(--header-h);background:var(--surf);
    position:sticky;top:0;z-index:100;
}
.site-header .container{height:100%}
.site-header__inner{display:flex;align-items:center;gap:18px;height:100%}
.site-header__logo{display:flex;align-items:center;flex-shrink:0}
.site-header__logo img{height:80px;width:auto;max-width:300px;object-fit:contain}
.site-header__logo-text{display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.site-header__logo-text__name{font-size:32px;font-weight:800;color:var(--text);letter-spacing:.01em;font-family:var(--font-display)}
.site-header__logo-text__tag{font-size:13px;font-weight:500;color:var(--text3)}

.site-header__live{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:14px;overflow:hidden;min-width:0}

/* Persistent "Listen Live" pill button in header */
/* Compact "Listen Live" button — fits the header, opens popup player */
.header-listen-btn{
    display:flex;align-items:center;gap:8px;
    height:38px;padding:0 18px;border-radius:19px;flex-shrink:0;
    background:var(--surf2);border:1px solid var(--border);
    color:var(--text);font-size:13px;font-weight:700;
    font-family:var(--font-display);white-space:nowrap;cursor:pointer;
    transition:background var(--ease),border-color var(--ease),color var(--ease),transform var(--ease);
}
.header-listen-btn i{color:var(--accent);font-size:12px}
.header-listen-btn:hover{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);transform:scale(1.03)}
.header-listen-btn:hover i{color:var(--accent)}
.header-listen-btn:active{transform:scale(.97)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* "ON AIR: DJ Name" badge in header */
.header-onair{
    display:flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;color:var(--text2);
    flex-shrink:0;white-space:nowrap;
    overflow:hidden;min-width:0;
}
.header-onair__dot{
    width:8px;height:8px;border-radius:50%;flex-shrink:0;
    background:#ef4444; animation:blink 1.4s infinite;
}
.header-onair__label{color:var(--text3);font-weight:700;font-size:12px;letter-spacing:.06em;flex-shrink:0}
.header-onair__dj{
    font-family:var(--font-display);font-weight:700;color:var(--text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--text2);border-radius:2px;transition:var(--ease)}

/* -----------------------------------------------------------------------------
   NAV
   ----------------------------------------------------------------------------- */
.site-nav{height:var(--nav-h);background:var(--surf);border-bottom:1px solid rgba(255,255,255,0.09);transition:height var(--ease)}
.site-nav.is-open{height:auto}
.site-nav__container{display:flex;align-items:center;height:var(--nav-h);gap:20px;position:relative}

/* Main nav links */
.site-nav__list{display:flex;align-items:center;gap:4px;flex:1;min-width:0;margin:0;padding-right:120px}
.site-nav__item{display:flex;align-items:center;flex-shrink:0}
.site-nav__link{
    display:flex;align-items:center;gap:7px;
    padding:0 16px;height:36px;
    font-size:16px;font-weight:600;color:var(--text);
    white-space:nowrap;border-radius:20px;border:none;background:none;
    cursor:pointer;font-family:var(--font-display);
    transition:color var(--ease),background var(--ease);
}
.site-nav__link i{font-size:16px;color:var(--text3);transition:color var(--ease)}
.site-nav__link:hover{color:var(--text);background:var(--surf2);opacity:1}
.site-nav__link:hover i{color:var(--accent)}
.site-nav__item--active .site-nav__link{color:#fff;background:var(--accent-gradient)}
.site-nav__item--active .site-nav__link i{color:#fff}

/* "More" dropdown */
.site-nav__more{position:relative}
.site-nav__more-chevron{font-size:11px!important;margin-left:-3px;transition:transform var(--ease)}
.site-nav__more.is-open .site-nav__more-chevron{transform:rotate(180deg)}
.site-nav__more-btn--active{color:#fff;background:var(--accent-gradient)}
.site-nav__more-btn--active i{color:#fff}
.site-nav__more-menu{
    position:absolute; top:calc(100% + 8px); left:0;
    min-width:210px; background:var(--surf3);
    border:1px solid rgba(255,255,255,0.09); border-radius:14px;
    padding:6px; margin:0; list-style:none;
    box-shadow:0 16px 36px -10px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity var(--ease), transform var(--ease), visibility var(--ease);
    z-index:90;
}
.site-nav__more.is-open .site-nav__more-menu{opacity:1; visibility:visible; transform:translateY(0)}
.site-nav__more-link{
    display:flex; align-items:center; gap:11px;
    padding:10px 12px; border-radius:9px;
    font-size:14px; font-weight:600; color:var(--text2);
    white-space:nowrap; transition:background var(--ease), color var(--ease);
}
.site-nav__more-link i{font-size:14px; color:var(--text3); width:18px; text-align:center; flex-shrink:0}
.site-nav__more-link:hover{background:var(--surf2); color:var(--text); opacity:1}
.site-nav__more-link--active{color:var(--accent); background:var(--accent-dim)}
.site-nav__more-link--active i{color:var(--accent)}

/* Right side: account links (Sign In / Dashboard / Sign Out)
   Absolutely positioned + translateY(-50%) so it centers against the
   exact same reference point as the nav links, regardless of any
   flexbox/UA-default quirks affecting the <ul> on the left. */
.site-nav__right{
    position:absolute; top:50%; right:0;
    transform:translateY(-50%);
    display:flex;align-items:center;gap:8px;flex-shrink:0;
}

.site-nav__account{display:flex;align-items:center;gap:8px}
.site-nav__account-link{
    display:flex;align-items:center;gap:7px;
    height:36px;padding:0 18px;border-radius:20px;
    font-size:14px;font-weight:700;color:var(--text2);
    white-space:nowrap;border:1px solid var(--border);
    font-family:var(--font-display);
    transition:color var(--ease),background var(--ease),border-color var(--ease);
}
.site-nav__account-link i{font-size:14px}
.site-nav__account-link:hover{color:var(--text);background:var(--surf2);border-color:var(--border);opacity:1}
.site-nav__account-link--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.site-nav__account-link--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;opacity:1}

/* Compact icon-only links for Dashboard / Sign Out — match nav link height */
.site-nav__icon-link{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    font-size:15px;color:var(--text2);
    border:1px solid var(--border);
    background:none;cursor:pointer;font-family:inherit;
    transition:color var(--ease),background var(--ease),border-color var(--ease);
}
.site-nav__icon-link:hover{color:var(--text);background:var(--surf2);border-color:var(--border);opacity:1}
.site-nav__icon-link--primary{color:var(--accent);border-color:var(--accent-border);background:var(--accent-dim)}
.site-nav__icon-link--primary:hover{background:var(--accent-gradient);color:#fff;border-color:transparent;opacity:1}
.site-nav__icon-link-label{display:none}

/* -----------------------------------------------------------------------------
   NOW PLAYING HERO — big, immersive, color-driven
   --accent-2 is a secondary "glow" color for the gradient overlay.
   Both --accent and --accent-2 can be swapped per client for a totally
   different vibe (e.g. blue+orange, teal+pink, purple+gold).
   ----------------------------------------------------------------------------- */
.np-hero{
    position:relative;overflow:hidden;
    padding:0;
    min-height:320px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.09);
}
.np-hero__bg{
    position:absolute;inset:-40px;
    background:var(--bg) center/cover no-repeat;
    filter:blur(60px) brightness(.6) saturate(1.7);
    transform:scale(1.15);
    z-index:0;transition:background-image 1.2s ease;
}
.np-hero__overlay{
    position:absolute;inset:0;
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0%, transparent 42%),
        radial-gradient(circle at 6% 96%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, transparent 38%),
        linear-gradient(115deg, rgba(4,8,18,.93) 0%, rgba(4,8,18,.8) 45%, rgba(4,8,18,.6) 100%);
    z-index:1;
}
/* Animated equalizer bars — decorative texture, fades into the right edge */
.np-hero__visualizer{
    position:absolute; right:0; top:0; bottom:0;
    width:50%; max-width:560px;
    display:flex; align-items:flex-end; justify-content:flex-end;
    gap:clamp(4px,0.8vw,9px);
    padding:0 5% 0 0;
    z-index:1; opacity:.28; pointer-events:none;
    -webkit-mask-image:linear-gradient(to left, #000 35%, transparent 95%);
    mask-image:linear-gradient(to left, #000 35%, transparent 95%);
}
.np-hero__bar{
    flex:1 1 auto; max-width:22px;
    background:linear-gradient(to top, var(--accent), var(--accent-2));
    border-radius:5px 5px 0 0;
    transform-origin:bottom;
    animation:eqbar 2.2s ease-in-out infinite;
}
.np-hero__bar:nth-child(1){height:32%;animation-delay:-1.8s}
.np-hero__bar:nth-child(2){height:58%;animation-delay:-1.4s}
.np-hero__bar:nth-child(3){height:38%;animation-delay:-2.0s}
.np-hero__bar:nth-child(4){height:72%;animation-delay:-0.6s}
.np-hero__bar:nth-child(5){height:46%;animation-delay:-1.1s}
.np-hero__bar:nth-child(6){height:64%;animation-delay:-1.9s}
.np-hero__bar:nth-child(7){height:36%;animation-delay:-0.3s}
.np-hero__bar:nth-child(8){height:54%;animation-delay:-1.5s}
.np-hero__bar:nth-child(9){height:30%;animation-delay:-0.9s}
.np-hero__bar:nth-child(10){height:60%;animation-delay:-2.1s}
.np-hero__bar:nth-child(11){height:42%;animation-delay:-0.5s}
.np-hero__bar:nth-child(12){height:50%;animation-delay:-1.3s}
@keyframes eqbar{
    0%,100%{transform:scaleY(.55)}
    50%{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){
    .np-hero__bar{animation:none;transform:scaleY(.7)}
}
.np-hero__inner{
    position:relative; z-index:2;
    display:flex;align-items:center;gap:28px;
    padding:36px 0;
    width:100%;
}
.np-hero__art{
    width:148px;height:148px;border-radius:var(--r-lg);
    flex-shrink:0;position:relative;
    background:var(--surf2);
    box-shadow:0 18px 50px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.np-hero__art::before{
    content:'';
    position:absolute; inset:-2px;
    border-radius:inherit;
    background:var(--accent-gradient);
    z-index:-1;
    filter:blur(10px);
    opacity:.7;
}
.np-hero__art img{width:100%;height:100%;object-fit:cover;transition:opacity .5s ease;border-radius:inherit}
.np-hero__info{flex:1;min-width:0}
.np-hero__dj-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.np-hero__live-dot{width:8px;height:8px;border-radius:50%;background:#ef4444;animation:blink 1.4s infinite;flex-shrink:0;box-shadow:0 0 10px #ef4444}
.np-hero__dj-label{
    font-size:11px;font-weight:800;letter-spacing:.16em;
    background:var(--accent-gradient);border:1px solid rgba(255,255,255,.18);
    color:#fff;padding:3px 10px;border-radius:20px;
}
.np-hero__dj-name{font-size:16px;font-weight:700;color:rgba(255,255,255,.85)}
.np-hero__title{
    font-size:clamp(26px,4.5vw,46px);font-weight:800;color:#fff;
    font-family:var(--font-display);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-bottom:5px;line-height:1.15;letter-spacing:-0.01em;
    text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.np-hero__artist{
    font-size:18px;color:rgba(255,255,255,.65);font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.np-hero__actions{display:flex;flex-direction:column;align-items:flex-end;gap:14px;flex-shrink:0}
.np-hero__btn{
    display:flex;align-items:center;gap:9px;
    background:var(--accent-gradient);color:#fff;border:none;
    border-radius:28px;padding:14px 30px;
    font-size:16px;font-weight:800;cursor:pointer;
    letter-spacing:.02em;
    box-shadow:0 8px 24px -6px color-mix(in srgb, var(--accent) 70%, transparent);
    transition:filter var(--ease),transform var(--ease),box-shadow var(--ease);
    font-family:var(--font-display);white-space:nowrap;
}
.np-hero__btn:hover{filter:brightness(1.08);transform:scale(1.04);box-shadow:0 10px 28px -6px color-mix(in srgb, var(--accent) 80%, transparent)}
.np-hero__btn:active{transform:scale(.97)}
.np-hero__btn i{font-size:14px}
.np-hero__btn .js-play-icon.fa-spinner{animation:np-spin 1s linear infinite}
@keyframes np-spin{to{transform:rotate(360deg)}}

/* Controls cluster: play button + volume + popup-out */
.np-hero__controls{display:flex;align-items:center;gap:12px}

.np-hero__volume{display:flex;align-items:center;gap:8px}
.np-hero__mute{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    color:#fff;font-size:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background var(--ease);
}
.np-hero__mute:hover{background:rgba(255,255,255,.16)}
.np-hero__slider{
    width:84px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.2);
    -webkit-appearance:none;appearance:none;cursor:pointer;outline:none;
}
.np-hero__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;transition:transform var(--ease)}
.np-hero__slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.np-hero__slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer}
.np-hero__slider::-moz-range-progress{background:var(--accent-2);height:4px;border-radius:2px}

.np-hero__popout{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    color:#fff;font-size:13px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background var(--ease),transform var(--ease);
}
.np-hero__popout:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}


/* -----------------------------------------------------------------------------
   WHAT'S NEXT
   ----------------------------------------------------------------------------- */
.whats-next{background:var(--surf);border-bottom:1px solid rgba(255,255,255,0.09);padding:10px 0}
.whats-next__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.whats-next__left{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}
.whats-next__badge{
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    background:var(--accent-gradient);color:#fff;
    font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    padding:5px 12px;border-radius:7px;
}
.whats-next__value{font-size:14px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whats-next__link{
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap;
}
.whats-next__link i{font-size:11px}
.whats-next__link:hover{color:var(--accent-2);opacity:1}

/* -----------------------------------------------------------------------------
   PAGE CONTENT
   ----------------------------------------------------------------------------- */
.page-content{flex:1;padding:24px 0 48px}

/* -----------------------------------------------------------------------------
   WELCOME BANNER
   ----------------------------------------------------------------------------- */
.welcome-banner{
    display:flex;align-items:flex-start;gap:12px;
    background:var(--card);border:1px solid var(--border);
    border-left:3px solid var(--accent);
    border-radius:var(--r-md);padding:14px 16px;
    margin-bottom:32px;font-size:14px;color:var(--text2);line-height:1.7;
    box-shadow:0 4px 24px -10px rgba(0,0,0,.5);
}
.welcome-banner__icon{color:var(--accent);font-size:18px;flex-shrink:0;margin-top:1px}

/* -----------------------------------------------------------------------------
   HOME GRID
   ----------------------------------------------------------------------------- */
.home-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.home-grid__main{display:flex;flex-direction:column;gap:20px}
.home-grid__sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--header-h) + var(--nav-h) + 16px)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

/* -----------------------------------------------------------------------------
   HOME SECTIONS
   ----------------------------------------------------------------------------- */
.home-section{display:flex;flex-direction:column;gap:8px}

.home-section__head{
    display:flex;align-items:center;gap:11px;
    padding-bottom:12px;margin-bottom:2px;
    border-bottom:1px solid var(--border);
}
.home-section__head h2{font-size:16px;font-weight:800;letter-spacing:-0.005em;color:var(--text);flex:1;font-family:var(--font-display)}
.home-section__head i{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:10px;flex-shrink:0;
    background:var(--accent-gradient);color:#fff;font-size:14px;
    box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}
.home-section__head-icon{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:10px;flex-shrink:0;
    background:var(--accent-gradient);color:#fff;font-size:14px;
    box-shadow:0 4px 14px -4px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* -----------------------------------------------------------------------------
   PAGE HEADER — shared across inner pages (Events, Schedule, Requests, etc.)
   ----------------------------------------------------------------------------- */
.page-header{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--r-lg); padding:18px 20px; margin-bottom:24px;
    box-shadow:0 4px 24px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.page-header h1{font-size:20px;font-weight:800;font-family:var(--font-display);margin:0;letter-spacing:-0.01em;color:var(--text)}
.page-header__sub{margin-top:4px;font-size:13px;color:var(--text2)}
.page-header--center{justify-content:center;text-align:center}

/* DJ/Member profile header */
.profile-header{align-items:flex-start}
.profile-header__photo{
    width:96px;height:96px;border-radius:var(--r-md);flex-shrink:0;
    padding:3px;background:var(--accent-gradient);
    box-shadow:0 8px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
.profile-header__photo-inner{
    width:100%;height:100%;border-radius:calc(var(--r-md) - 3px);
    overflow:hidden;background:var(--surf2);
}
.profile-header__photo-inner img{width:100%;height:100%;object-fit:cover;display:block}
.profile-header__info{flex:1;min-width:0}
.profile-header__info h1{font-size:22px}
.profile-header__bio{font-size:14px;color:var(--text2);line-height:1.7;margin-top:2px}
.profile-header__badge{
    background:var(--accent-dim);border:1px solid var(--accent-border);
    color:var(--accent);font-size:10px;font-weight:800;
    letter-spacing:0.1em;padding:3px 9px;border-radius:20px;flex-shrink:0;
}
.profile-header__genre{
    font-size:13px;color:var(--text2);margin-bottom:6px;
    display:flex;align-items:center;gap:6px;
}
.profile-header__genre i{color:var(--accent);font-size:12px}
.profile-header__playlist-btn{flex-shrink:0;white-space:nowrap;align-self:flex-start}

.profile-meta-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;
}
.profile-meta-item__label{
    font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text3);margin-bottom:4px;
}
.profile-meta-item__label i{color:var(--accent);margin-right:5px}
.profile-meta-item__value{font-size:14px;font-weight:700;color:var(--text)}
.home-section__more{font-size:12px;color:var(--link-color);font-weight:600;transition:opacity var(--ease)}
.home-section__more:hover{opacity:.75}

/* Generic card box */
.home-card{
    background:var(--card);border:1px solid var(--border);
    padding:14px;overflow:hidden;
    box-shadow:0 4px 24px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}

/* -----------------------------------------------------------------------------
   LIST ITEMS (events, rooms)
   ----------------------------------------------------------------------------- */
.list-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;margin:0 -10px;border-radius:var(--r-sm);border-bottom:1px solid var(--border);transition:background var(--ease)}
.list-item:hover{background:var(--accent-dim)}
.list-item:last-child{border-bottom:none;padding-bottom:0}
.list-item:first-child{padding-top:0}
.list-item__icon{flex-shrink:0;margin-top:1px}
.list-item__body{flex:1;min-width:0}
.list-item__title{font-size:14px;font-weight:600;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item__title:hover{color:var(--accent);opacity:1}
.list-item__sub{font-size:12px;color:var(--text3);margin-top:2px}

/* Empty state */
.empty-state{text-align:center;padding:20px;color:var(--text3)}
.empty-state i{font-size:28px;margin:0 auto 10px auto;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--accent-gradient);color:#fff;box-shadow:0 8px 24px var(--accent-border)}
.empty-state p{font-size:13px}

/* -----------------------------------------------------------------------------
   DJ CAROUSEL
   ----------------------------------------------------------------------------- */
.dj-card{
    border-radius:var(--r-md);overflow:hidden;
    display:block;text-decoration:none;
    border:2px solid transparent;
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        var(--accent-gradient) border-box;
    transition:transform var(--ease), box-shadow var(--ease);
}
.dj-card:hover{transform:translateY(-2px);opacity:1;box-shadow:0 10px 26px -8px color-mix(in srgb, var(--accent) 55%, transparent)}
/* Give the swiper headroom so the hover lift above doesn't get clipped by Swiper's overflow:hidden */
.dj-grid{display:flex;flex-wrap:wrap;gap:14px;padding-top:6px}
.dj-grid .dj-card{width:130px;flex-shrink:0}
.dj-card__img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--surf2);display:block}
.dj-card__img--placeholder{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--text3);background:var(--surf2)}
.dj-card__name{padding:7px 10px;font-size:13px;font-weight:600;text-align:center;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* -----------------------------------------------------------------------------
   SHOUTBOX
   ----------------------------------------------------------------------------- */
.shoutbox__messages{height:220px;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--surf3) transparent}
.shoutbox__messages--tall{height:60vh;min-height:400px}
.shout-message{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)}
.shout-message:last-child{border-bottom:none}
.shout-message__avatar{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;color:#fff;letter-spacing:.02em;
}
.shout-message__body{flex:1;min-width:0}
.shout-message__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.shout-message__name{font-weight:700;color:var(--link-color);white-space:nowrap;font-size:13px}
.shout-message__text{display:block;color:var(--text);word-break:break-word;font-size:13px;margin-top:2px;line-height:1.5}
.shout-message__time{font-size:11px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.shout-message__delete{background:none;border:none;color:var(--text3);cursor:pointer;font-size:12px;padding:1px 3px;opacity:0;transition:opacity var(--ease);align-self:flex-start}
.shout-message:hover .shout-message__delete{opacity:1}
@media(hover:none){
    .shout-message__delete{opacity:.5}
}

/* Avatar color palette — assigned per-name via crc32 hash */
.avatar-c1{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.avatar-c2{background:linear-gradient(135deg,#f97316,#fb923c)}
.avatar-c3{background:linear-gradient(135deg,#10b981,#34d399)}
.avatar-c4{background:linear-gradient(135deg,#ec4899,#f472b6)}
.avatar-c5{background:linear-gradient(135deg,#06b6d4,#22d3ee)}
.avatar-c6{background:linear-gradient(135deg,#eab308,#facc15)}
.shoutbox__inputs{display:grid;grid-template-columns:110px 1fr auto;gap:7px;align-items:center}

/* -----------------------------------------------------------------------------
   SCHEDULE (sidebar)
   ----------------------------------------------------------------------------- */
.sched-list{position:relative;padding:8px 0}
.sched-list::before{
    content:'';
    position:absolute; left:33px; top:30px; bottom:30px;
    width:2px; background:var(--border);
    z-index:0;
}
.sched-item{display:flex;align-items:flex-start;gap:14px;padding:10px 14px;position:relative;z-index:1;transition:background var(--ease)}
.sched-item--today{background:var(--accent-gradient-soft)}
.sched-item__day{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:var(--text2);background:var(--surf2);border:1px solid var(--border);
}
.sched-item--today .sched-item__day{
    background:var(--accent-gradient);color:#fff;border-color:transparent;
    box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.sched-item__info{flex:1;min-width:0;padding-top:4px}
.sched-item__name{color:var(--text);font-size:14px;font-weight:600;line-height:1.3;white-space:normal;overflow:visible;text-overflow:unset;word-break:break-word}
.sched-item__time{font-size:12px;color:var(--text3);margin-top:2px}
.sched-item__desc{font-size:13px;color:var(--text2);line-height:1.6;margin-top:6px}
.sched-item__live{
    display:inline-flex;align-items:center;gap:6px;
    margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent);vertical-align:middle;
}
.sched-item__live--hidden{display:none!important}
.sched-item__live-bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.sched-item__live-bars span{width:2px;background:var(--accent-gradient);border-radius:1px;animation:eqbar 1s ease-in-out infinite}
.sched-item__live-bars span:nth-child(1){height:40%;animation-delay:-0.6s}
.sched-item__live-bars span:nth-child(2){height:100%;animation-delay:-0.2s}
.sched-item__live-bars span:nth-child(3){height:65%;animation-delay:-0.9s}

/* -----------------------------------------------------------------------------
   QUICK REQUEST
   ----------------------------------------------------------------------------- */
.quick-request__label{font-size:13px;color:var(--text2);margin-bottom:10px}
.quick-request__form{display:flex;gap:8px}
.quick-request__form .form-control{flex:1}
.quick-request__submit{
    width:42px;height:42px;flex-shrink:0;border:none;border-radius:var(--r-sm);
    background:var(--accent-gradient);color:#fff;font-size:15px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:filter var(--ease),transform var(--ease);
}
.quick-request__submit:hover{filter:brightness(1.1);transform:translateY(-1px)}
.quick-request__submit:disabled{opacity:.6;cursor:default;transform:none}
.quick-request__sub{font-size:12px;color:var(--text3);margin:14px 0 8px}
.quick-request__tags{display:flex;flex-wrap:wrap;gap:8px}
.quick-request__tag{
    background:var(--surf2);border:1px solid var(--border);color:var(--text2);
    font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;
    transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.quick-request__tag:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-border)}
.quick-request__result{margin-top:10px;font-size:13px}

/* -----------------------------------------------------------------------------
   POLL
   ----------------------------------------------------------------------------- */
.poll-question{color:var(--text);font-weight:700;font-size:14px;line-height:1.5;margin-bottom:12px}
[id^="poll-widget-"]{scroll-margin-top:calc(var(--header-h) + 16px)}
.poll-vote-btn{
    display:flex;align-items:center;gap:8px;
    width:100%;padding:8px 12px;margin-bottom:6px;
    background:var(--surf2);border:1px solid var(--border);
    border-radius:var(--r-sm);color:var(--text);
    font-size:13px;font-weight:500;cursor:pointer;text-align:left;
    transition:border-color var(--ease),background var(--ease);
    font-family:var(--font);
}
.poll-vote-btn:last-child{margin-bottom:0}
.poll-vote-btn:hover{border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-border)}
.poll-vote-btn::before{content:'○';font-size:11px;color:var(--text3);flex-shrink:0}
.poll-option{margin-bottom:8px}
.poll-option__label{color:var(--text);display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.poll-option__pct{color:var(--text2)}
.poll-option__bar-wrap{height:5px;background:var(--surf2);border-radius:3px;overflow:hidden}
.poll-option__bar{height:100%;background:var(--accent-gradient);border-radius:3px;transition:width .5s ease}

/* -----------------------------------------------------------------------------
   BIRTHDAY CARD
   ----------------------------------------------------------------------------- */
.birthday-card{
    display:flex;align-items:center;gap:14px;
    background:var(--accent-gradient);
    border:none;
    border-radius:var(--r-lg);padding:16px;
    color:#fff;transition:transform var(--ease),box-shadow var(--ease);
    box-shadow:0 8px 24px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.birthday-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);opacity:1}
.birthday-card__icon{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.18);
    font-size:18px;color:#fff;
}
.birthday-card__text{display:flex;flex-direction:column;gap:2px}
.birthday-card__text strong{font-size:14px;font-weight:800;font-family:var(--font-display)}
.birthday-card__text span{font-size:12px;color:rgba(255,255,255,.75)}

/* -----------------------------------------------------------------------------
   DONOR PILLS
   ----------------------------------------------------------------------------- */
.donor-pill{background:var(--accent-gradient-soft);border:1px solid var(--accent-border);color:var(--text);font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px}

/* -----------------------------------------------------------------------------
   HISTORY LIST
   ----------------------------------------------------------------------------- */
.history-list{display:flex;flex-direction:column}
.history-item{display:flex;align-items:center;gap:9px;padding:10px 15px 7px 15px;margin:0 -10px;border-bottom:1px solid var(--border);font-size:13px;transition:background var(--ease)}
.history-item:hover{background:var(--accent-dim)}
.history-item:last-child{border-bottom:none;padding-bottom:0}
.history-item:first-child{}
.history-item__art{width:32px;height:32px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--surf2)}
.history-item__art img{width:100%;height:100%;object-fit:cover}
.history-item__info{flex:1;min-width:0}
.history-item__title{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item__artist{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item__time{font-size:11px;color:var(--text3);margin-left:auto;flex-shrink:0}

/* -----------------------------------------------------------------------------
   FORM ELEMENTS
   ----------------------------------------------------------------------------- */
.form-control{background:var(--surf2);border:1px solid var(--surf3);border-radius:var(--r-sm);color:var(--text);font-size:14px;padding:9px 13px;width:100%;transition:border-color var(--ease);outline:none}
.form-control:focus{border-color:var(--accent)}
.form-control::placeholder{color:var(--text3)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:80px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:5px}
.form-group{margin-bottom:14px}
.form-text{font-size:12px;color:var(--text3);margin-top:4px}

/* -----------------------------------------------------------------------------
   BUTTONS
   ----------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--r-sm);font-size:14px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:background var(--ease),transform var(--ease),border-color var(--ease);font-family:var(--font-display);white-space:nowrap;line-height:1;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-gradient);color:#fff;border-color:transparent;box-shadow:0 6px 18px -6px color-mix(in srgb, var(--accent) 55%, transparent)}
.btn-primary:hover{filter:brightness(1.08);opacity:1;transform:scale(1.02)}
.btn-outline{background:transparent;color:var(--accent);border-color:var(--accent-border)}
.btn-outline:hover{background:var(--accent-dim);opacity:1}
.btn-ghost{background:var(--surf2);color:var(--text2);border-color:var(--border)}
.btn-ghost:hover{background:var(--surf3);color:var(--text);opacity:1}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-lg{padding:11px 22px;font-size:16px}
.btn-full{width:100%;justify-content:center}

/* -----------------------------------------------------------------------------
   NOTICES
   ----------------------------------------------------------------------------- */
.notice{border-radius:var(--r-md);padding:10px 14px;font-size:13px;margin-bottom:12px}
.notice--info{background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--text2)}
.notice--danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:var(--notice-danger)}
.notice--success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:var(--notice-success)}
.notice--warning{background:rgba(234,179,8,.08);border:1px solid rgba(234,179,8,.2);color:var(--notice-warning)}

/* -----------------------------------------------------------------------------
   MODAL
   ----------------------------------------------------------------------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity var(--ease)}
.modal-overlay.is-open{opacity:1;pointer-events:all}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;max-width:460px;width:100%;max-height:85vh;overflow-y:auto}
.modal-box__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-box__title{font-size:18px;font-weight:700}
.modal-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:3px}
.modal-close:hover{color:var(--text)}

/* -----------------------------------------------------------------------------
   PAGE HERO (inner pages)
   ----------------------------------------------------------------------------- */
.page-hero{background:var(--card);border-bottom:1px solid var(--border);padding:22px 0;margin-bottom:24px}
.page-hero h1{font-size:clamp(22px,3.5vw,32px);font-weight:800}
.page-hero p{color:var(--text2);margin-top:5px;font-size:14px}

/* -----------------------------------------------------------------------------
   INNER PAGE CARD
   ----------------------------------------------------------------------------- */
.card{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 4px 24px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}
.card-body{padding:16px}
.mb-3{margin-bottom:12px}

/* -----------------------------------------------------------------------------
   PLAYLIST BROWSER
   ----------------------------------------------------------------------------- */
.playlist-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.playlist-tab{min-width:32px;height:32px;padding:0 8px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease);font-family:var(--font)}
.playlist-tab:hover{background:var(--surf2);color:var(--text)}
.playlist-tab.active{background:var(--accent-gradient);border-color:transparent;color:#fff}
.playlist-search-wrap{margin-bottom:4px}

.history-search{display:flex;gap:8px;align-items:stretch}
.history-search > div{flex:1}
.history-search .btn{flex-shrink:0}

/* Clean rebuilt playlist rows (legacy markup is parsed + discarded by JS) */
.playlist-row{
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;
    border-bottom:1px solid var(--border);
    font-size:13px; color:var(--text);
    transition:background var(--ease);
}
.playlist-row:last-child{border-bottom:none}
.playlist-row:hover{background:var(--accent-dim)}
.playlist-row__name{color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.playlist-row__time{font-size:12px;color:var(--text3);flex-shrink:0;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.playlist-row__btn{flex-shrink:0}

/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */
/* CTA strip above footer */
.footer-cta{
    background:var(--surf);
    position:relative; overflow:hidden;
}
.footer-cta::after{
    content:'';
    position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--accent-gradient);
}
.footer-cta::before{
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 88% 50%, color-mix(in srgb, var(--accent-2) 18%, transparent) 0%, transparent 55%);
}
.footer-cta__inner{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;
    gap:24px; flex-wrap:wrap;
    padding-top:26px !important; padding-bottom:36px;
}
.footer-cta__text h3{font-size:21px;font-weight:800;font-family:var(--font-display);margin-bottom:4px;letter-spacing:-0.01em;color:var(--text)}
.footer-cta__text p{font-size:14px;color:var(--text2)}

/* Footer */
.site-footer{
    background:var(--surf);
    position:relative;
    padding:40px 0 0;
    margin-top:auto;
}
.site-footer::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--accent-gradient);
}
.site-footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;padding-bottom:28px}
.site-footer__logo{height:36px;margin-bottom:12px;display:block}
.site-footer__logo-text{display:block;margin-bottom:12px;font-size:20px;font-weight:800;color:var(--text);letter-spacing:.01em;font-family:var(--font-display)}
.site-footer__tagline{font-size:13px;color:var(--text2);line-height:1.7;max-width:300px}
.site-footer__heading{font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--text);margin-bottom:14px;font-family:var(--font-display)}
.site-footer__links ul{display:flex;flex-direction:column;gap:10px}
.site-footer__links a{font-size:14px;color:var(--text2);transition:color var(--ease)}
.site-footer__links a:hover{color:var(--accent);opacity:1}

.social-icons{display:flex;gap:10px;flex-wrap:wrap}
.social-icon{
    width:38px;height:38px;border-radius:50%;
    background:var(--card);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    color:var(--text2);font-size:15px;
    transition:background var(--ease),color var(--ease),transform var(--ease),border-color var(--ease);
}
.social-icon:hover{background:var(--accent-gradient);color:#fff;border-color:transparent;transform:translateY(-3px);opacity:1}
.site-footer__social-empty{font-size:13px;color:var(--text3)}

.site-footer__bottom{
    border-top:1px solid var(--border);
    padding:18px 0;
}
.site-footer__copy{font-size:13px;color:var(--text3)}

.external-listen{background:var(--bg);border-top:1px solid var(--border);padding:10px 0}
.external-listen .container{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.external-listen__label{font-size:12px;color:var(--text3);font-weight:600}
.external-listen__link{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text2)}
.external-listen__link:hover{color:var(--accent);opacity:1}

/* -----------------------------------------------------------------------------
   UTILITY
   ----------------------------------------------------------------------------- */
.nodisplay{display:none!important}
.text-muted{color:var(--text2)!important}
.text-accent{color:var(--link-color)!important}
.container{max-width:1140px;margin:0 auto;padding:0 16px}

/* -----------------------------------------------------------------------------
   SCROLLBARS
   ----------------------------------------------------------------------------- */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surf3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* -----------------------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------------------- */
@media(max-width:991px){
    .home-grid{grid-template-columns:1fr}
    .home-grid__sidebar{position:static}
    .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
    .nav-toggle{display:flex}
    .site-nav{height:auto; display:none}
    .site-nav.is-open{display:block; padding-bottom:8px}
    .site-nav__container{flex-direction:column;align-items:stretch;height:auto;padding-top:8px;gap:8px}
    .site-nav__list{flex-direction:column;width:100%;height:auto;gap:2px;padding-right:0}
    .site-nav__item{width:100%;height:auto}
    .site-nav__link{height:42px;padding:0 14px;border-radius:8px;width:100%}

    /* Flatten "More" into the regular list on mobile */
    .site-nav__more-btn{display:none}
    .site-nav__more-menu{
        position:static; opacity:1; visibility:visible; transform:none;
        display:flex; flex-direction:column; gap:2px;
        background:none; border:none; box-shadow:none; padding:0; margin:0;
    }
    .site-nav__more-link{height:42px; padding:0 14px; border-radius:8px; font-size:16px; font-weight:600}
    .site-nav__more-link i{font-size:16px; color:var(--text3)}

    .site-nav__right{position:static; top:auto; right:auto; transform:none; width:100%}
    .site-nav__account{padding-top:8px;border-top:1px solid rgba(255,255,255,0.09);flex-direction:column;align-items:stretch}
    .site-nav__account-link{justify-content:center;width:100%;height:42px}
    .site-nav__icon-link{
        width:100%; height:42px; border-radius:8px;
        gap:10px; font-size:16px;
    }
    .site-nav__icon-link-label{display:inline; font-size:16px; font-weight:600; font-family:var(--font-display)}
    .header-onair__label,.header-onair__dj{display:none}
    .header-listen-btn{height:34px;padding:0 14px;font-size:12px}
    .site-header__logo img{height:56px}
    .site-header__logo-text__name{font-size:24px}
    .np-hero{min-height:0}
    .np-hero__visualizer{display:none}
    .np-hero__inner{gap:16px;padding:24px 0;flex-wrap:wrap}
    .np-hero__art{width:84px;height:84px}
    .np-hero__actions{flex-direction:row;align-items:center;justify-content:space-between;width:100%;order:3}
    .np-hero__btn{padding:10px 22px;font-size:14px}
    .two-col{grid-template-columns:1fr}
    .site-footer__inner{grid-template-columns:1fr;gap:20px}
    .footer-cta__inner{flex-direction:column;align-items:flex-start;text-align:left}
    .footer-cta .btn{width:100%;justify-content:center}
    .shoutbox__inputs{grid-template-columns:1fr auto}
    .shoutbox__inputs .form-control:first-child{grid-column:1/-1}

    /* Hero controls: hide volume + popout, keep play button */
    .np-hero__volume{display:none}
    .np-hero__popout{display:none}
}
@media(max-width:480px){
    .site-header__logo img{height:48px}
    .site-header__logo-text__name{font-size:19px}
    .site-header__logo-text__tag{display:none}
    .np-hero__art{width:72px;height:72px}
    .np-hero__title{font-size:22px}
    .np-hero__artist{font-size:14px}
    .home-grid__sidebar{order:-1}
}


/* ===== Modern Homepage Hero ===== */
.modern-home-hero{
margin:0 0 24px;
padding:32px;
border-radius:24px;
background:var(--accent-gradient);
position:relative;
overflow:hidden;
box-shadow:0 0 30px var(--accent-glow);
}
.modern-home-hero:before{
content:'';
position:absolute;inset:0;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 60%);
pointer-events:none;
}
.modern-home-hero__content{position:relative;z-index:2;}
.modern-home-hero__badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:rgba(0,0,0,.25);
margin-bottom:12px;
font-weight:600;
}
.modern-home-hero h1{margin:0 0 10px;font-size:2.4rem;}
.modern-home-hero p{max-width:700px;font-size:1.05rem;opacity:.95;}
.modern-home-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.modern-home-hero .btn{
border-radius:14px;
padding:12px 20px;
}


/* PASS 2 - Universal modern card system */
.modern-card-shell{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:18px;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.modern-card-shell:hover{
transform:translateY(-2px);
border-color:var(--accent);
box-shadow:0 12px 28px -14px var(--accent-glow);
}
.modern-card-shell .home-card{
background:transparent;
border:none;
box-shadow:none;
padding:0;
}
.modern-card-shell .home-section__head{
margin:-2px 0 14px 0;
}
.home-section__head h2{
font-size:1.1rem;
}
/* Keep theme readability */
[data-theme="light"] .modern-card-shell{
background:#fff;
}
[data-theme="dark"] .modern-card-shell{
background:var(--card);
}


/* Pass 4 */
.home-action-strip{
display:flex;gap:12px;flex-wrap:wrap;
margin:0 0 18px 0;
}
.action-pill{
display:inline-flex;align-items:center;gap:8px;
padding:12px 18px;border-radius:14px;
background:var(--accent-gradient);
color:#fff;text-decoration:none;font-weight:700;
box-shadow:0 8px 20px -12px var(--accent-glow);
}
.dj-card{
position:relative;overflow:hidden;
transition:all .25s ease;
}
.dj-card:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:0 14px 30px -14px var(--accent-glow);
}
.dj-card__overlay{
padding:10px;
background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.15));
}
.dj-card__meta{
font-size:.7rem;
letter-spacing:.08em;
color:var(--accent2,#fff);
opacity:.9;
}


/* Pass 5 - Featured row modernization */
.home-grid__sidebar .home-section:first-child{
    border-color:var(--accent);
    box-shadow:0 10px 30px -18px var(--accent-glow);
}

.dj-grid{
    gap:14px !important;
}

.dj-card{
    position:relative;
    overflow:hidden;
    transition:all .25s ease;
}
.dj-card:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 14px 30px -16px var(--accent-glow);
}
.dj-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.05));
    pointer-events:none;
}
.dj-card__overlay{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:10px;
    z-index:2;
}
.dj-card__status{
    display:inline-block;
    font-size:10px;
    font-weight:700;
    margin-bottom:6px;
    color:#fff;
}
.dj-card__status i{
    color:#ff5f57;
    font-size:8px;
}
.dj-card__name{
    color:#fff;
    font-weight:700;
}
.dj-card__meta{
    color:rgba(255,255,255,.8);
    font-size:11px;
}

/* Make requests feel more important */
.home-grid__sidebar .home-section:first-child .home-section__head h2{
    font-size:1.2rem;
}
.home-grid__sidebar .form-control{
    min-height:42px;
}


/* Pass 6 - Simplify DJ cards */
.dj-card__meta{
    display:none !important;
}
.dj-card__status{
    font-size:9px;
    letter-spacing:.04em;
    padding:2px 5px;
    border-radius:999px;
    background:rgba(0,0,0,.35);
}
.dj-card__overlay{
    padding:8px;
}
.dj-card__name{
    font-size:13px;
    line-height:1.2;
    margin-top:4px;
}


/* Pass 7 - Welcome banner emphasis */
.welcome-banner{
    padding:18px 22px !important;
    border-width:2px !important;
}
.welcome-banner p{
    font-size:15px !important;
    line-height:1.6 !important;
    color:var(--text) !important;
    font-weight:500;
}
.welcome-banner__icon{
    font-size:18px !important;
    margin-right:12px !important;
    color:#fff; !important;
}

/* Simplified DJ cards */
.dj-card__status{
    display:none !important;
}
.dj-card__name{
    font-size:14px;
    font-weight:700;
}


/* Pass 9 - real live DJ highlighting */
.dj-card--live,
.dj-card.live{
border-color:var(--accent);
box-shadow:0 0 18px var(--accent-glow);
}
.dj-card__status{
display:inline-block !important;
font-size:10px;
padding:2px 6px;
border-radius:999px;
background:rgba(0,0,0,.45);
color:#fff;
margin-bottom:4px;
}
.dj-card__status i{color:#ff4d4d;font-size:8px;}

/* Welcome banner stronger */
.welcome-banner{
background:color-mix(in srgb,var(--accent) 8%, var(--card));
}
.welcome-banner p{
font-size:16px !important;
font-weight:600;
}


/* Pass 10 - Widget modernization bundle */

/* Events */
.latest-events .event-item,
.events-widget .event-item{
    padding:10px 0;
}
.latest-events .event-title,
.events-widget .event-title{
    font-weight:700;
}

/* Poll */
.poll-widget .progress,
.home-section .progress{
    height:10px;
    border-radius:999px;
}
.poll-widget .progress-bar{
    box-shadow:0 0 12px var(--accent-glow);
}

/* Schedule */
.schedule-widget .active,
.schedule-item.active,
.schedule-current{
    border-left:3px solid var(--accent);
    background:rgba(255,255,255,.04);
    box-shadow:0 0 14px -8px var(--accent-glow);
}

/* Recently Played */
.recently-played li,
.recent-track{
    border-radius:8px;
    padding:6px;
}
.recently-played li:hover,
.recent-track:hover{
    background:rgba(255,255,255,.05);
    transform:translateX(2px);
}

/* Global widget consistency */
.home-section{
    transition:all .2s ease;
}
.home-section:hover{
    box-shadow:0 12px 24px -18px var(--accent-glow);
}
.home-section__head h2{
    font-weight:700;
}


/* Pass 11 - deeper widget polish */

/* Featured DJs card prominence */
.home-section:has(.dj-card),
.featured-djs{
    border-color:var(--accent);
}

/* Quick request becomes primary action widget */
.home-section:has(input[type="text"]),
.home-section:has(input[type="search"]){
    box-shadow:0 0 20px -12px var(--accent-glow);
}
.home-section input[type="text"],
.home-section input[type="search"]{
    min-height:42px;
    border-radius:10px;
}
.home-section button,
.home-section .btn{
    border-radius:10px;
}

/* Schedule current item stronger */
.schedule-current,
.schedule-item.active{
    border-left:4px solid var(--accent);
    font-weight:700;
}

/* Poll percentages easier to scan */
.progress + span,
.poll-percent{
    font-weight:700;
}

/* Message board readability */
.message-board .message,
.chat-message{
    padding-top:4px;
    padding-bottom:4px;
}

/* Recently played list density */
.recently-played li{
    margin-bottom:4px;
}


/* Pass 12 - stronger modern hierarchy */
.home-section{
    border-radius:16px;
}
.home-section__head{
    padding-bottom:8px;
}
.home-section__head h2{
    letter-spacing:.01em;
}

/* Quick request card */
.home-grid .home-section:nth-child(2){
    position:relative;
}
.home-grid .home-section:nth-child(2)::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:16px;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Featured DJ cards */
.dj-card{
    overflow:hidden;
}
.dj-card img{
    transition:transform .25s ease;
}
.dj-card:hover img{
    transform:scale(1.05);
}

/* Sidebar widgets consistency */
.home-grid__sidebar .home-section{
    margin-bottom:14px;
}

/* Current schedule item */
.schedule-current,
.schedule-item.active{
    background:linear-gradient(90deg, rgba(255,255,255,.08), transparent);
}

/* Poll bars */
.progress-bar{
    border-radius:999px;
}


/* Supporting Rooms widget cleanup */
.supporting-rooms .room-item,
.supporting-room-item,
.room-list .room-item{
    padding:12px 16px !important;
    border-radius:0 !important;
}

.supporting-rooms .room-item:first-child,
.supporting-room-item:first-child,
.room-list .room-item:first-child{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
}

.supporting-rooms .room-item:last-child,
.supporting-room-item:last-child,
.room-list .room-item:last-child{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
}

.supporting-rooms .room-item-title,
.supporting-room-item strong{
    margin-right:8px;
}

.supporting-rooms .room-item-desc,
.supporting-room-item small{
    line-height:1.4;
}

.home-card-icon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    background:var(--accent-gradient);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    box-shadow:0 10px 28px var(--accent-border);
    margin-right:12px;
}

.home-section__head{
    display:flex;
    align-items:center;
    gap:0;
}

.home-section__head h2{
    margin:0;
}

/* Supporting Rooms actual fix */
.home-card .list-item{
    margin:0 !important;
    padding:12px 14px !important;
    border-radius:0 !important;
}
.home-card .list-item:first-child{
    padding-top:12px !important;
}
.home-card .list-item:last-child{
    padding-bottom:12px !important;
}
.home-card .list-item__body{
    padding-right:10px;
}


/* Pass 14 - Engagement widgets */

/* Schedule: make active/current item stand out */
.schedule-current,
.schedule-item.active,
.schedule-widget .active{
    border-left:4px solid var(--accent);
    box-shadow:0 0 18px -10px var(--accent-glow);
    background:rgba(255,255,255,.05);
}

/* Quick request gets priority */
.quick-request,
.request-widget{
    border-color:var(--accent);
}
.quick-request .btn,
.request-widget .btn{
    font-weight:700;
}

/* Recently played */
.recently-played .list-item,
.recent-track{
    transition:all .15s ease;
}
.recently-played .list-item:hover,
.recent-track:hover{
    background:rgba(255,255,255,.05);
    transform:translateX(3px);
}
.recently-played img,
.recent-track img{
    border-radius:8px;
}

/* Tone down birthday card dominance slightly */
.birthday-shoutouts,
.birthday-widget{
    box-shadow:none !important;
}


/* Pass 15 - actual widget modernization */
.sched-item--today{
    background:var(--accent-gradient-soft);
    border-left:3px solid var(--accent);
}
.sched-item__live{
    background:var(--accent);
    color:#fff;
    border-radius:999px;
    padding:2px 8px;
    font-size:10px;
    font-weight:700;
}

.quick-request__label{
    font-size:13px;
    font-weight:600;
}

.history-list .list-item,
#song-history > div{
    transition:all .15s ease;
}
#song-history > div:hover{
    background:rgba(255,255,255,.04);
}

.poll-question{
    font-size:14px;
    font-weight:700;
    margin-bottom:12px;
}

.home-section__head h2{
    letter-spacing:.01em;
}


/* Pass 16 - remove generic row styling from Quick Request & Poll */
.quick-request .list-item,
.quick-request .card-row,
.poll-widget .list-item,
.poll-widget .card-row,
.home-section--request .list-item,
.home-section--poll .list-item{
    background:transparent !important;
    border-radius:0 !important;
    box-shadow:none !important;
    margin:0 !important;
}

/* Tighten spacing after removing action buttons */
.home-actions{
    display:none !important;
}
.featured-djs,
.home-section:first-of-type{
    margin-top:0;
}

/* Quick request content breathing room */
.quick-request p,
.quick-request .help-text{
    padding-left:4px;
    padding-right:4px;
}

/* Poll options no rounded row containers */
.poll-widget .poll-option{
    border-radius:0 !important;
    background:transparent !important;
}


/* Pass 17 - actual requested fixes */

/* Remove odd inset row treatment from Quick Request */
.quick-request__sub,
.poll-question{
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 0 12px 0 !important;
}

/* Popular artist tags area should not look like a rounded row */
.quick-request__tags{
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin-top:10px !important;
}

/* Poll options container cleanup */
.poll-widget form,
.poll-widget .poll-options,
.poll-widget .vote-results{
    background:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Pull content up after removing action strip */
.welcome-banner{
    margin-bottom:14px !important;
}


/* Pass 18 - Quick Request / Poll rounded clipping fix */
.quick-request .home-card,
.poll .home-card,
.poll-widget .home-card,
.quick-request-widget .home-card{
    overflow:visible !important;
}

/* Remove inner rounded containers */
.quick-request .home-card > *,
.poll-widget .home-card > *{
    border-radius:0 !important;
}

.quick-request .tag-list,
.quick-request .popular-tags,
.poll-widget form,
.poll-widget .results{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
}


/* Pass 19 - REAL fix for widget row rounding */
.list-item{
    margin:0 !important;
    border-radius:0 !important;
    padding:10px 0 !important;
}
.list-item:first-child{
    padding-top:10px !important;
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
}
.list-item:last-child{
    padding-bottom:10px !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
}
.list-item:hover{
    border-radius:0 !important;
}


/* Pass 20 - Widget modernization bundle */

/* Events */
.events-widget .list-item,
.latest-events .list-item{
    padding:12px 0;
}
.events-widget .event-date,
.latest-events .event-date{
    font-weight:700;
    color:var(--accent);
    letter-spacing:.04em;
}
.events-widget .event-title,
.latest-events .event-title{
    font-weight:700;
}

/* Schedule timeline feel */
.schedule-widget .list-item,
.schedule-list .list-item{
    padding-left:14px;
    border-left:2px solid rgba(255,255,255,.08);
}
.schedule-current,
.schedule-item.active{
    border-left:3px solid var(--accent) !important;
}

/* Recently played */
#song-history .list-item,
.history-list .list-item{
    padding:10px 0;
}
#song-history .song-title,
.history-list .song-title{
    font-weight:700;
}
#song-history .artist,
.history-list .artist{
    opacity:.8;
}

/* Message board composer */
.message-board-form,
.message-composer{
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
    background:var(--card);
}
.message-board-form input,
.message-composer input{
    border:none;
    background:transparent;
}

/* Birthday widget slightly tighter */
.birthday-widget .list-item,
.birthday-shoutouts .list-item{
    padding:6px 0;
}


/* Pass A - Events, Composer, Recently Played */

/* Latest Events */
.latest-events .list-item,
.events-widget .list-item{
    padding:14px 16px !important;
    position:relative;
}
.latest-events .list-item:hover,
.events-widget .list-item:hover{
    background:rgba(255,255,255,.03);
}
.latest-events .event-title,
.events-widget .event-title{
    font-size:15px;
    font-weight:700;
}
.latest-events .event-date,
.events-widget .event-date{
    color:var(--accent);
    font-weight:600;
}

/* Message board composer */
.message-board .composer,
.message-board-form{
    background:rgba(0,0,0,.18);
    border:1px solid var(--border);
    border-radius:14px;
    padding:6px;
}
.message-board .composer input,
.message-board-form input{
    background:transparent;
    border:none;
}

/* Recently Played padding */
#song-history .list-item,
.recently-played .list-item,
.history-list .list-item{
    padding-left:14px !important;
    padding-right:14px !important;
}


/* Footer final refinement pass */

/* Compress CTA band */
.never-miss-beat,
.footer-banner,
.footer-cta{
    padding-top:18px !important;
    padding-bottom:18px !important;
    min-height:auto !important;
}

/* Bring CTA content and button closer together */
.never-miss-beat .row,
.footer-banner .row,
.footer-cta .row{
    align-items:center;
}
.never-miss-beat .btn,
.footer-banner .btn,
.footer-cta .btn{
    margin-left:16px;
}

/* Stronger footer headings */
.site-footer h4,
.site-footer h5,
.footer-wrap h4,
.footer-wrap h5{
    font-size:1.08rem;
    font-weight:700;
    color:#ffffff;
    letter-spacing:.02em;
}

/* Better social icons */
.footer-social a,
.social-links a{
    border:1px solid rgba(255,255,255,.08);
    transition:all .2s ease;
}
.footer-social a:hover,
.social-links a:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
    box-shadow:0 0 18px -2px var(--accent-glow);
}


/* Homepage Latest Events -> event cards like Events page */

.latest-events .list-item,
.events-widget-home .list-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px !important;
    margin-bottom:10px;
    border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.02);
    border-radius:12px;
    transition:all .18s ease;
}

.latest-events .list-item:hover,
.events-widget-home .list-item:hover{
    transform:translateY(-1px);
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
}

.latest-events .event-date-badge{
    min-width:58px;
    text-align:center;
    border-radius:10px;
    background:linear-gradient(135deg,var(--accent),var(--accent-glow));
    color:#fff;
    padding:8px 6px;
    font-weight:700;
}

.latest-events .event-title{
    font-size:15px;
    font-weight:700;
    margin-bottom:4px;
}

.latest-events .event-date{
    opacity:.75;
}


/* Modernization pass - widget headers, events, history, schedule */

/* stronger widget headers */
.home-section__head{
 padding:0 4px 12px;
 border-bottom:1px solid rgba(255,255,255,.06);
 margin-bottom:14px;
}
.home-section__head h2{
 font-size:1.15rem;
 font-weight:700;
 letter-spacing:.01em;
}
.home-section__head i:first-child{
 width:32px;height:32px;display:flex;align-items:center;justify-content:center;
 border-radius:10px;
 background:linear-gradient(135deg,var(--accent),var(--accent-glow));
 color:#fff;
 box-shadow:0 8px 20px -10px var(--accent-glow);
}

/* latest events cardified */
.home-section .home-card .list-item{
 padding:14px 16px;
}
.home-section .home-card .list-item__title{
 font-weight:700;
}
.home-section .home-card .list-item__sub{
 margin-top:4px;
 opacity:.8;
}

/* recently played spotify feel */
.history-list .history-item,
#song-history > div{
 padding-left:12px;
 padding-right:12px;
}
.history-list{
 gap:8px;
}
.history-list .song-title{
 font-weight:600;
}

/* schedule emphasis */
.schedule-item.active,
.schedule-day.active{
 border-left:3px solid var(--accent);
 background:rgba(255,255,255,.04);
}


/* Header icon badges */
.home-section__head{
 display:flex;
 align-items:center;
 gap:12px;
}
.home-section__head > i{
 display:none;
}
.home-card-icon{
 width:36px;
 height:36px;
 min-width:36px;
 border-radius:50%;
 display:flex !important;
 align-items:center;
 justify-content:center;
 background:var(--accent-gradient);
 color:#fff;
 box-shadow:0 8px 24px var(--accent-border);
}
.home-card-icon i{
 color:#fff;
 font-size:14px;
 line-height:1;
}


.event-mini-card{
display:block;
padding:14px 16px;
margin-bottom:10px;
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
background:rgba(255,255,255,.02);
transition:.2s ease;
text-decoration:none;
}
.event-mini-card:hover{
transform:translateY(-2px);
border-color:rgba(126,167,255,.35);
background:rgba(126,167,255,.05);
}
.event-mini-card__top{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
}
.event-mini-card__title{
font-weight:700;
color:var(--text);
}
.event-mini-card__date{
margin-top:4px;
color:var(--text3);
font-size:.85rem;
}
.event-mini-card__badge{
padding:4px 8px;
border-radius:999px;
font-size:.72rem;
background:var(--accent-gradient);
color:#fff;
}
.dj-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.dj-card__status{
box-shadow:0 0 14px rgba(255,80,80,.45);
}
.welcome-banner p{
font-size:1rem;
font-weight:600;
}


.welcome-banner__content{display:flex;flex-direction:column}
.welcome-banner__title{
font-size:20px;font-weight:800;line-height:1.2;color:var(--text);margin-bottom:4px;
}
.welcome-banner__text{font-size:14px;color:var(--text2);line-height:1.7}
.welcome-banner__icon{font-size:22px}

.dj-grid .dj-card{width:145px}
.dj-card:hover{transform:translateY(-5px) scale(1.02)}
.dj-card__name{padding:10px;font-size:14px;font-weight:700}

.dj-card--live,.dj-card.live{
box-shadow:0 0 0 2px rgba(126,167,255,.4),0 0 22px rgba(255,154,87,.35);
}

.home-events-card{
padding:14px 16px!important;
}


/* Pass 16 - Welcome + DJs + Events */

/* Welcome panel becomes feature card */
.welcome-banner{
    align-items:center;
    padding:18px 22px;
}
.welcome-banner__icon{
    font-size:42px;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--accent-gradient);
    color:#fff;
    box-shadow:0 10px 28px var(--accent-border);
}
.welcome-banner strong,
.welcome-title{
    display:block;
    font-size:20px;
    margin-bottom:4px;
    color:var(--text);
}

/* Featured DJ cards larger */
.dj-grid .dj-card{
    width:145px;
}
.dj-card__img{
    aspect-ratio:1/1;
    min-height:110px;
}
.dj-card__name{
    font-size:14px;
    font-weight:700;
    padding:10px;
}
.dj-card:hover{
    transform:translateY(-4px);
}

/* Event rows feel like cards */
.latest-events .list-item,
.events-list .list-item{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.04);
    border-radius:12px;
    margin-bottom:10px;
    padding:14px 16px !important;
    transition:all .2s ease;
}
.latest-events .list-item:hover,
.events-list .list-item:hover{
    background:rgba(255,255,255,.05);
    border-color:rgba(126,167,255,.25);
    transform:translateX(2px);
}
.latest-events .list-item__title,
.events-list .list-item__title{
    font-size:15px;
    font-weight:700;
}


/* Pass 17 - Featured DJ modernization */
.dj-grid{
    gap:14px;
}
.dj-card{
    position:relative;
    min-height:120px;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:14px;
    background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.12));
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    transition:all .25s ease;
}
.dj-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,154,87,.55) !important;
    box-shadow:0 12px 30px rgba(255,154,87,.18);
}
.dj-card__img{
    width:100%;
    height:120px;
    object-fit:cover;
}
.dj-card__overlay{
    background:linear-gradient(to top,rgba(8,13,30,.95) 0%,rgba(8,13,30,.55) 45%,transparent 100%);
}
.dj-card__name{
    font-size:14px;
    font-weight:700;
    color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.dj-card__status{
    background:rgba(15,20,40,.85);
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    padding:3px 8px;
    backdrop-filter:blur(4px);
}
.dj-card__status .fa-circle{
    color:#ff6b6b;
}
.dj-card:has(.dj-card__status){
    border-color:rgba(255,154,87,.65) !important;
    box-shadow:0 0 0 1px rgba(255,154,87,.35),0 0 24px rgba(255,154,87,.22);
}


/* Quick Request disabled state */
.empty-state--request-closed{
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
}
.empty-state--request-closed i{
    width:auto;
    height:auto;
    background:none !important;
    box-shadow:none !important;
    border-radius:0;
    color:var(--text2) !important;
    font-size:24px;
    margin-bottom:12px;
}
.empty-state--request-closed p{
    color:var(--text2);
    max-width:220px;
    margin:0 auto;
}


/* --- Hero modernization pass --- */
.np-hero{min-height:400px}
.np-hero__art{
width:200px;height:200px;
box-shadow:0 25px 70px -15px rgba(0,0,0,.75),0 0 40px rgba(59,130,246,.35);
}
.np-hero__title{font-size:clamp(38px,5vw,64px)}
.np-hero__artist{font-size:22px}

.np-hero__orb{
position:absolute;border-radius:50%;filter:blur(80px);
opacity:.35;pointer-events:none;z-index:1;
animation:heroFloat 12s ease-in-out infinite;
}
.np-hero__orb--one{
width:320px;height:320px;left:-80px;bottom:-120px;
background:var(--accent);
}
.np-hero__orb--two{
width:360px;height:360px;right:-120px;top:-120px;
background:var(--accent-2);
animation-delay:-6s;
}
@keyframes heroFloat{
50%{transform:translateY(-25px) translateX(15px)}
}

.np-hero__player-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
padding:18px;
box-shadow:0 12px 40px rgba(0,0,0,.25);
}

@media (max-width:900px){
.np-hero__art{width:170px;height:170px}
.np-hero__player-card{width:100%}
}


/* PASS 2 HERO */
.np-hero{min-height:420px}
.np-hero__inner{gap:20px}
.np-hero__art{
width:190px;height:190px;
margin-bottom:-35px;
z-index:5;
}
.np-hero__artwash{
position:absolute;inset:0;
background:center/cover no-repeat;
opacity:.10;
filter:blur(22px);
transform:scale(1.25);
z-index:1;
}
.np-hero__info{
display:flex;
flex-direction:column;
justify-content:center;
}
.np-hero__actions{
align-items:flex-start;
margin-left:-120px;
margin-top:110px;
z-index:4;
}
.np-hero__player-card{
background:rgba(255,255,255,.07);
backdrop-filter:blur(22px);
border:1px solid rgba(255,255,255,.12);
}
.np-hero__title{
font-size:clamp(42px,5vw,72px)!important;
}
.np-hero__artist{
font-size:20px;
}
@media (max-width:991px){
.np-hero{min-height:auto}
.np-hero__art{width:170px;height:170px;margin-bottom:0}
.np-hero__actions{
margin-left:0;
margin-top:12px;
align-items:stretch;
width:100%;
}
.np-hero__player-card{
padding:14px;
}
}


/* PASS 3 FIXED - composition only, no layout restructuring */
.np-hero__inner{
    gap:18px;
}

.np-hero__art{
    width:170px;
    height:170px;
    margin-bottom:-12px;
}

.np-hero__title{
    font-size:clamp(24px,4vw,40px);
}

.np-hero__info{
    flex:0 1 420px;
}

.np-hero__actions{
    margin-left:-40px;
    align-items:flex-start;
}

.np-hero__player-card{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
}

.np-hero__live-dot{
    box-shadow:0 0 0 rgba(239,68,68,.6);
    animation:heroLivePulse 2s infinite;
}

@keyframes heroLivePulse{
    0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}
    70%{box-shadow:0 0 0 10px rgba(239,68,68,0);}
    100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

@media (max-width: 991px){
    .np-hero__actions{
        margin-left:0;
        align-items:stretch;
    }
}


/* FIX title/player overlap */
.np-hero__inner{
    display:flex;
    align-items:center;
    gap:32px;
}
.np-hero__info{
    flex:1 1 auto !important;
    min-width:0;
    max-width:none;
}
.np-hero__actions{
    margin-left:0 !important;
    flex:0 0 320px;
    align-items:flex-end;
}
.np-hero__title{
    font-size:clamp(24px,3.5vw,42px) !important;
    max-width:100%;
}
@media (max-width:991px){
 .np-hero__actions{
   flex:unset;
   width:100%;
 }
}


/* Hero polish pass */
.np-hero{
    min-height:320px;
}

.np-hero__inner{
    padding-top:18px;
    padding-bottom:10px;
    align-items:center;
}

.np-hero__content{
    transform:translateY(12px);
}

.np-hero__art{
    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(99,102,241,.22),
        0 0 90px rgba(99,102,241,.10);
}

.np-hero__art::after{
    content:'';
    position:absolute;
    inset:-18px;
    border-radius:inherit;
    background:radial-gradient(circle,rgba(99,102,241,.18) 0%,rgba(99,102,241,0) 70%);
    z-index:-1;
}

.np-upnext,
.np-hero__upnext,
.hero-upnext{
    margin-top:-10px;
}

@media (max-width:991px){
    .np-hero{
        min-height:auto;
    }
    .np-hero__content{
        transform:none;
    }
}

/* -----------------------------------------------------------------------------
   WELCOME BANNER — final pass (bigger, more prominent)
   ----------------------------------------------------------------------------- */
.welcome-banner{
    display:flex;align-items:flex-start;gap:14px;
    background:var(--accent-gradient-soft);
    border:1px solid var(--accent-border);
    border-left:4px solid var(--accent);
    border-radius:var(--r-md);padding:18px 20px;
    margin-bottom:24px;
    box-shadow:0 4px 24px -10px rgba(0,0,0,.5);
}
.welcome-banner__icon{
    flex-shrink:0;margin-top:2px;
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-gradient);color:#fff;font-size:16px;
    box-shadow:0 4px 14px -4px var(--accent-border);
}
.welcome-banner__content{display:flex;flex-direction:column;gap:4px}
.welcome-banner__title{
    font-size:24px;font-weight:800;line-height:1.25;
    color:var(--text);font-family:var(--font-display);
    letter-spacing:-0.01em;
}
.welcome-banner__text{font-size:15px;color:var(--text2);line-height:1.7}
.welcome-banner__text strong{color:var(--text);font-weight:700}