:root{
  --cosmic-bg:#05040b;
  --cosmic-panel:rgba(11,13,30,.74);
  --cosmic-panel-2:rgba(15,18,40,.86);
  --cosmic-border:rgba(146,213,255,.28);
  --cosmic-border-strong:rgba(222,131,255,.34);
  --cosmic-text:#f7f5ff;
  --cosmic-muted:#c6d3f3;
  --cosmic-cyan:#7cecff;
  --cosmic-purple:#d58cff;
  --cosmic-pink:#ff87d9;
  --cosmic-gold:#ffc96b;
  --cosmic-shadow:0 16px 44px rgba(0,0,0,.45),0 0 22px rgba(124,236,255,.12);
}

html,body{background:var(--cosmic-bg);color:var(--cosmic-text);}
body{
  background:
    radial-gradient(circle at 20% 12%, rgba(124,236,255,.14), transparent 20%),
    radial-gradient(circle at 80% 18%, rgba(213,140,255,.14), transparent 20%),
    radial-gradient(circle at 50% 90%, rgba(255,135,217,.10), transparent 22%),
    #05040b;
}
.site-header{
  background:linear-gradient(90deg, rgba(124,236,255,.28), rgba(213,140,255,.3), rgba(255,201,107,.26));
  box-shadow:0 0 20px rgba(124,236,255,.25);
  min-height:8px;
}
.content-area{
  background:
    linear-gradient(rgba(2,3,9,.76), rgba(2,3,9,.9)),
    image-set(url('/img/backgrounds/main-bg.png') type('image/webp'), url('/img/backgrounds/main-bg.png') type('image/png')) center top / cover scroll no-repeat;
}
.content-area::before,
.content-area::after{display:none;}
.content-wrapper{max-width:min(1440px, calc(100% - 42px));}
.smurf-divider{
  height:2px;
  margin:30px auto;
  width:min(1040px, calc(100% - 70px));
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(124,236,255,.85), rgba(213,140,255,.95), rgba(255,201,107,.9), transparent);
  box-shadow:0 0 16px rgba(124,236,255,.35), 0 0 24px rgba(213,140,255,.22);
}
.content-card,
.schedule-box,
.clock-box,
.admin-card,
.radio-box,
.player-shell,
.chat-box,
.comments-wrap,
.request-list,
.friend-card,
.fan-card,
.team-card,
.dj-card,
.news-item,
.event-card{
  background:linear-gradient(180deg, rgba(10,12,28,.82), rgba(8,10,22,.92)) !important;
  border:1px solid var(--cosmic-border) !important;
  border-radius:24px !important;
  box-shadow:var(--cosmic-shadow) !important;
  backdrop-filter: blur(10px);
}
.content-card:hover,
.schedule-box:hover,
.clock-box:hover,
.admin-card:hover,
.friend-card:hover,
.fan-card:hover,
.team-card:hover,
.dj-card:hover,
.news-item:hover,
.event-card:hover{
  border-color:var(--cosmic-border-strong) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 26px rgba(213,140,255,.22) !important;
}
.content-card h1,.content-card h2,.content-card h3,.content-card h4,
.schedule-box h1,.schedule-box h2,.schedule-box h3,
.clock-box h1,.clock-box h2,.clock-box h3,
.admin-title,.hero-title{
  color:#fff;
  text-shadow:0 0 10px rgba(213,140,255,.22);
}
.hero-title{
  font-size:clamp(2.2rem,4vw,4rem);
  letter-spacing:.04em;
}
.hero-tagline,
.content-card p,
.schedule-box p,
.clock-box p,
.content-card li,
.content-card label,
.content-card strong,
.content-card span{color:var(--cosmic-muted);}
.button,
.play-btn,
.admin-btn,
.admin-return,
.listen-buttons a,
.listen-inline a,
a.button{
  background:linear-gradient(135deg, rgba(116,241,255,.95), rgba(213,140,255,.92), rgba(255,201,107,.92)) !important;
  color:#0c0820 !important;
  border:none !important;
  border-radius:999px !important;
  font-weight:800;
  letter-spacing:.03em;
  box-shadow:0 8px 22px rgba(124,236,255,.24), 0 0 18px rgba(213,140,255,.18);
}
.button:hover,
.play-btn:hover,
.admin-btn:hover,
.admin-return:hover,
.listen-buttons a:hover,
.listen-inline a:hover,
a.button:hover{
  transform:translateY(-2px) scale(1.01);
  filter:brightness(1.05);
  box-shadow:0 12px 28px rgba(124,236,255,.28), 0 0 24px rgba(213,140,255,.22);
}
.input-field,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"]{
  background:rgba(5,8,24,.82) !important;
  color:var(--cosmic-text) !important;
  border:1px solid rgba(146,213,255,.28) !important;
  border-radius:16px !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
input::placeholder,textarea::placeholder{color:rgba(198,211,243,.64) !important;}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(213,140,255,.65) !important;
  box-shadow:0 0 0 3px rgba(213,140,255,.12), 0 0 18px rgba(124,236,255,.12);
}

.side-nav{
  background:linear-gradient(180deg, rgba(4,7,22,.96), rgba(9,11,27,.94));
  border-right:1px solid rgba(146,213,255,.25);
  box-shadow:14px 0 38px rgba(0,0,0,.35), 0 0 18px rgba(124,236,255,.12);
}
.nav-top{border-bottom:1px solid rgba(146,213,255,.18);}
.nav-title,.side-nav span{color:#f9f6ff; text-transform:none; letter-spacing:.02em; font-family:inherit; font-weight:700;}
.nav-list{padding:18px 12px 40px;}
.nav-list li + li{margin-top:10px; padding-top:10px; border-top:1px solid rgba(146,213,255,.08);}
.side-nav a{
  gap:14px;
  padding:10px 12px;
  border-radius:18px;
  color:#f8fbff;
  position:relative;
}
.side-nav a:hover{
  background:linear-gradient(135deg, rgba(124,236,255,.12), rgba(213,140,255,.14));
  transform:translateX(4px);
  box-shadow:0 0 18px rgba(124,236,255,.12);
}
.side-nav img{
  width:64px;
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(124,236,255,.28)) drop-shadow(0 0 20px rgba(213,140,255,.18));
}
.nav-admin a{background:linear-gradient(135deg, rgba(255,201,107,.12), rgba(213,140,255,.12));}

.site-footer{
  background:linear-gradient(180deg, rgba(7,8,23,.96), rgba(6,7,18,.98));
  border-top:1px solid rgba(146,213,255,.25);
  box-shadow:0 -10px 28px rgba(0,0,0,.4), 0 0 18px rgba(213,140,255,.12);
}
.footer-inner,.footer-left p,.footer-tagline,.footer-stats,.footer-links a{color:#eaf2ff;}
.footer-links a:hover{text-shadow:0 0 10px rgba(124,236,255,.95);}

.clock-box,
.schedule-box{
  position:relative;
  overflow:hidden;
}
.clock-box::before,
.schedule-box::before,
.content-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(124,236,255,.06), transparent 35%, rgba(213,140,255,.08));
  pointer-events:none;
}
.listen-inline,
.listen-buttons{gap:12px;}

/* Admin */
body.page-admin .admin-main{color:var(--cosmic-text);}
body.page-admin .admin-topbar{gap:12px; margin-bottom:18px;}
body.page-admin .content-wrapper.admin-main{max-width:min(1500px, calc(100% - 42px));}
body.page-admin .admin-shell,
body.page-admin .admin-card-panel,
body.page-admin .admin-stat-card,
body.page-admin .admin-card-link,
body.page-admin .content-card,
body.page-admin .content-card *{color:inherit;}
body.page-admin .admin-card-panel,
body.page-admin .admin-stat-card,
body.page-admin .admin-card-link,
body.page-admin .user-row-card,
body.page-admin .nav-link-row,
body.page-admin .builder-block,
body.page-admin .preview-block-card,
body.page-admin .upload-box,
body.page-admin .page-wireframe,
body.page-admin .perm-item,
body.page-admin .admin-table td,
body.page-admin .admin-table th{
  background:linear-gradient(180deg, rgba(9,12,31,.9), rgba(8,10,24,.96)) !important;
  border-color:rgba(146,213,255,.18) !important;
}
body.page-admin .admin-shell{
  display:grid;
  gap:20px;
}
body.page-admin .admin-sidebar{
  background:linear-gradient(180deg, rgba(5,8,22,.95), rgba(8,10,25,.95)) !important;
  border:1px solid rgba(146,213,255,.18) !important;
  border-radius:24px;
  box-shadow:var(--cosmic-shadow);
}
body.page-admin .admin-sidebar-link,
body.page-admin .admin-card-link,
body.page-admin .admin-return{transition:all .18s ease;}
body.page-admin .admin-sidebar-link:hover,
body.page-admin .admin-card-link:hover{
  background:linear-gradient(135deg, rgba(124,236,255,.11), rgba(213,140,255,.12)) !important;
  border-color:rgba(213,140,255,.28) !important;
}
body.page-admin .admin-card-link .card-emoji{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(124,236,255,.18), rgba(213,140,255,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(124,236,255,.14);
}
body.page-admin .admin-card-link .card-foot,
body.page-admin .admin-stat-value{color:#fff !important;}
body.page-admin .admin-stat-meta,
body.page-admin .card-desc,
body.page-admin .user-row-meta,
body.page-admin .admin-note,
body.page-admin .upload-help,
body.page-admin .page-wireframe-label,
body.page-admin .content-muted{color:var(--cosmic-muted) !important;}
body.page-admin .admin-table td,
body.page-admin .admin-table th{color:#eef5ff !important;}
body.page-admin .admin-table thead tr,
body.page-admin table tr{background:transparent !important;}
body.page-admin .admin-chip,
body.page-admin .page-wireframe-chip,
body.page-admin .preview-badge{
  background:linear-gradient(135deg, rgba(124,236,255,.12), rgba(213,140,255,.14));
  color:#f6fbff !important;
  border-color:rgba(146,213,255,.24) !important;
}
body.page-admin .site-footer{background:linear-gradient(180deg, rgba(7,8,23,.98), rgba(6,7,18,1)) !important;}

@media (max-width:1100px){
  .side-nav img{width:58px;height:58px;}
}
@media (max-width:700px){
  .content-wrapper,
  body.page-admin .content-wrapper.admin-main{max-width:calc(100% - 22px);}  
  .side-nav a{padding:8px 10px;}
  .side-nav img{width:52px;height:52px;}
  .smurf-divider{width:calc(100% - 30px);}
}