.rof-concept-fanclub-page{
  --fan-bg:#08070d;
  --fan-panel:#111019;
  --fan-panel-2:#17111e;
  --fan-pink:#ff2bd6;
  --fan-cyan:#1ddff2;
  --fan-lime:#b6ff2e;
  --fan-gold:#ffd84b;
  --fan-muted:#9d96a5;
  background:
    radial-gradient(circle at 84% 12%,rgba(255,43,214,.13),transparent 28%),
    radial-gradient(circle at 12% 40%,rgba(29,223,242,.08),transparent 25%),
    var(--fan-bg)!important;
  color:#fff;
  margin:0!important;
  overflow-x:hidden!important;
}
body.rof-concept-fanclub-page>header{display:none!important}
body.rof-concept-fanclub-page>main{width:100%!important;max-width:none!important;margin:0!important;padding:0 0 95px!important;background:transparent!important}
.rof-concept-fanclub-page .rof-fanclub-concept,
.rof-concept-fanclub-page .rof-fanclub-concept *{box-sizing:border-box}
.rof-concept-fanclub-page .top-bar,
.rof-concept-fanclub-page .logo-section,
.rof-concept-fanclub-page .main-nav,
.rof-concept-fanclub-page .compact-header,
.rof-concept-fanclub-page .mobile-header,
.rof-concept-fanclub-page .header,
.rof-concept-fanclub-page .main-header,
.rof-concept-fanclub-page .ticker-wrap,
.rof-concept-fanclub-page .breaking-news,
.rof-concept-fanclub-page footer:not(.rof-footer){display:none!important}
.rof-concept-fanclub-page .rof-fanclub-concept{position:relative;z-index:120}
.rof-concept-fanclub-page .rof-site-header{position:relative!important}
.rof-concept-fanclub-page .rof-nav-active{color:#fff!important}
.rof-concept-fanclub-page .rof-nav-active:after{width:100%!important;background:linear-gradient(90deg,var(--fan-pink),var(--fan-cyan))!important}
.rof-concept-fanclub-page .fanclub-page{
  position:relative;
  isolation:isolate;
  max-width:1240px!important;
  margin:0 auto 120px!important;
  padding:38px 30px 20px!important;
}
.rof-concept-fanclub-page .fanclub-page:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 -12vw auto;
  height:620px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,#000,transparent);
  pointer-events:none;
}
.rof-concept-fanclub-page .fan-hero{
  min-height:430px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:64px 48% 64px 62px!important;
  text-align:left!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:18px!important;
  background:
    linear-gradient(110deg,rgba(14,10,20,.98) 0%,rgba(22,13,30,.94) 47%,rgba(14,9,22,.68) 100%)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.04)!important;
}
.rof-concept-fanclub-page .fan-hero:before{
  content:"XP";
  position:absolute;
  right:10%;
  top:50%;
  width:245px;
  height:245px;
  display:grid;
  place-items:center;
  transform:translateY(-50%) rotate(-8deg);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  outline:1px solid rgba(255,43,214,.32);
  outline-offset:18px;
  background:
    radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),transparent 8%),
    linear-gradient(145deg,var(--fan-pink),#6a23ff 48%,var(--fan-cyan));
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  font-size:88px;
  font-style:italic;
  font-weight:950;
  letter-spacing:-8px;
  text-shadow:0 4px 0 rgba(0,0,0,.26),0 0 25px rgba(255,255,255,.35);
  box-shadow:0 0 45px rgba(255,43,214,.36),0 24px 55px rgba(0,0,0,.5),inset -18px -18px 40px rgba(0,0,0,.22);
  animation:fanXpFloat 4.8s ease-in-out infinite;
}
.rof-concept-fanclub-page .fan-hero:after{
  content:"";
  position:absolute;
  right:3%;
  top:13%;
  width:390px;
  height:330px;
  border-radius:50%;
  background:
    radial-gradient(circle at 15% 24%,var(--fan-lime) 0 4px,transparent 5px),
    radial-gradient(circle at 84% 64%,var(--fan-cyan) 0 5px,transparent 6px),
    radial-gradient(circle at 70% 14%,var(--fan-pink) 0 3px,transparent 4px);
  border:1px dashed rgba(255,255,255,.13);
  animation:fanOrbit 16s linear infinite;
}
.rof-concept-fanclub-page .fan-hero h2{
  position:relative;
  z-index:2;
  margin:0!important;
  max-width:520px;
  color:#fff!important;
  font-family:'Rajdhani',sans-serif!important;
  font-size:clamp(64px,8vw,116px)!important;
  font-weight:950!important;
  font-style:italic;
  line-height:.82!important;
  letter-spacing:-7px!important;
  text-transform:uppercase;
}
.rof-concept-fanclub-page .fan-hero h2:before{
  content:"ОБЩНОСТТА НА РАДИОТО";
  display:block;
  margin-bottom:22px;
  color:var(--fan-lime);
  font-family:Arial,sans-serif;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:2px;
}
.rof-concept-fanclub-page .fan-hero h2:after{
  content:"";
  display:block;
  width:92px;
  height:3px;
  margin-top:24px;
  background:linear-gradient(90deg,var(--fan-pink),var(--fan-cyan));
  box-shadow:0 0 18px rgba(255,43,214,.42);
}
.rof-concept-fanclub-page .fan-hero p{
  position:relative;
  z-index:2;
  max-width:520px!important;
  margin:28px 0 0!important;
  color:#aaa3b1!important;
  font-size:15px;
  font-weight:600!important;
  line-height:1.65;
}
.rof-concept-fanclub-page .fan-login{
  position:relative;
  z-index:3;
  margin-top:28px!important;
  padding:15px 22px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:5px!important;
  background:linear-gradient(90deg,var(--fan-pink),#8c35ff)!important;
  color:#fff!important;
  font-size:10px;
  letter-spacing:1px;
  box-shadow:0 14px 35px rgba(255,43,214,.22);
  transition:transform .2s,box-shadow .2s!important;
}
.rof-concept-fanclub-page .fan-login:hover{transform:translateY(-2px);box-shadow:0 20px 45px rgba(255,43,214,.34)}
.rof-concept-fanclub-page .fan-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr)!important;
  gap:18px!important;
  margin-top:18px!important;
}
.rof-concept-fanclub-page .fan-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:10px!important;
  padding:24px!important;
  background:linear-gradient(145deg,rgba(22,18,29,.94),rgba(11,10,16,.96))!important;
  box-shadow:0 18px 55px rgba(0,0,0,.22)!important;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.rof-concept-fanclub-page .fan-card:hover{transform:translateY(-3px);border-color:rgba(255,43,214,.25)!important;box-shadow:0 24px 65px rgba(0,0,0,.32)!important}
.rof-concept-fanclub-page .fan-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:42px;
  background:linear-gradient(var(--fan-pink),var(--fan-cyan));
  box-shadow:0 0 16px var(--fan-pink);
}
.rof-concept-fanclub-page .fan-title{
  margin:0 0 18px!important;
  color:#fff!important;
  font-family:'Rajdhani',sans-serif!important;
  font-size:22px!important;
  font-style:italic;
  font-weight:950!important;
  letter-spacing:-.3px;
  text-transform:uppercase;
}
.rof-concept-fanclub-page .fan-profile{gap:16px!important}
.rof-concept-fanclub-page .fan-avatar,
.rof-concept-fanclub-page .fan-avatar-fallback{
  width:72px!important;
  height:72px!important;
  border:2px solid var(--fan-pink)!important;
  background:linear-gradient(145deg,rgba(255,43,214,.22),rgba(29,223,242,.12))!important;
  box-shadow:0 0 28px rgba(255,43,214,.22);
}
.rof-concept-fanclub-page .fan-name{font-size:22px!important}
.rof-concept-fanclub-page .fan-level{
  border-color:rgba(182,255,46,.35)!important;
  background:rgba(182,255,46,.09)!important;
  color:var(--fan-lime)!important;
  font-size:10px;
  letter-spacing:.8px;
}
.rof-concept-fanclub-page .fan-xp{
  color:#fff!important;
  font-size:45px!important;
  font-style:italic;
  letter-spacing:-2px;
  text-shadow:0 0 22px rgba(255,43,214,.25);
}
.rof-concept-fanclub-page .fan-progress{height:8px!important;border:0!important;background:rgba(255,255,255,.08)!important}
.rof-concept-fanclub-page .fan-progress span{background:linear-gradient(90deg,var(--fan-pink),#7d3cff,var(--fan-cyan))!important;box-shadow:0 0 14px var(--fan-pink)}
.rof-concept-fanclub-page .fan-streak .fs-flame{filter:drop-shadow(0 0 12px rgba(255,43,214,.6))!important;animation:fanFlame 1.8s ease-in-out infinite}
.rof-concept-fanclub-page .fan-streak .fs-num{color:var(--fan-pink)!important}
.rof-concept-fanclub-page .fan-streak .fs-day{border-radius:5px!important;background:#0c0b11!important}
.rof-concept-fanclub-page .fan-streak .fs-day.on{background:linear-gradient(135deg,var(--fan-pink),#843aff)!important;color:#fff!important;box-shadow:0 0 18px rgba(255,43,214,.2)}
.rof-concept-fanclub-page .fan-missions,
.rof-concept-fanclub-page .fan-badges{gap:9px!important}
.rof-concept-fanclub-page .fan-mission,
.rof-concept-fanclub-page .fan-badge,
.rof-concept-fanclub-page .fan-bonus,
.rof-concept-fanclub-page .fan-daily-star{
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.035)!important;
}
.rof-concept-fanclub-page .fan-mission{padding:15px!important}
.rof-concept-fanclub-page .fan-mission strong,
.rof-concept-fanclub-page .fan-bonus strong,
.rof-concept-fanclub-page .fan-daily-star strong{font-size:13px}
.rof-concept-fanclub-page .fan-mission small,
.rof-concept-fanclub-page .fan-bonus small,
.rof-concept-fanclub-page .fan-daily-star small,
.rof-concept-fanclub-page .fan-badge small{color:var(--fan-muted)!important;font-size:11px}
.rof-concept-fanclub-page .fan-badge strong{color:var(--fan-gold)!important}
.rof-concept-fanclub-page .fan-btn{
  min-height:38px;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:4px!important;
  background:linear-gradient(90deg,var(--fan-pink),#8138ff)!important;
  color:#fff!important;
  font-size:9px;
  letter-spacing:.8px;
  transition:transform .18s,filter .18s!important;
}
.rof-concept-fanclub-page .fan-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15)}
.rof-concept-fanclub-page .fan-btn:disabled{background:rgba(255,255,255,.08)!important;color:#777!important}
.rof-concept-fanclub-page .fan-quiz-answer{
  border-radius:5px!important;
  border-color:rgba(255,255,255,.1)!important;
  background:#0c0b11!important;
  transition:border-color .18s,background .18s,transform .18s!important;
}
.rof-concept-fanclub-page .fan-quiz-answer:hover:not(:disabled){border-color:var(--fan-cyan)!important;background:rgba(29,223,242,.06)!important;transform:translateX(3px)}
.rof-concept-fanclub-page .fan-top-row,
.rof-concept-fanclub-page .fan-wall-row{padding:12px 0!important;border-color:rgba(255,255,255,.07)!important}
.rof-concept-fanclub-page .fan-rank{border-radius:4px!important;background:linear-gradient(135deg,var(--fan-pink),#713dff)!important;box-shadow:0 0 14px rgba(255,43,214,.2)}
.rof-concept-fanclub-page .fan-top-xp{color:var(--fan-lime)!important}
.rof-concept-fanclub-page .fan-wall-input{
  border-radius:6px!important;
  border-color:rgba(29,223,242,.24)!important;
  background:#0b0a10!important;
  transition:border-color .2s,box-shadow .2s;
}
.rof-concept-fanclub-page .fan-wall-input:focus{outline:0;border-color:var(--fan-cyan)!important;box-shadow:0 0 0 3px rgba(29,223,242,.08)}
.rof-concept-fanclub-page .fan-wall-meta{color:#756f7b!important}
@keyframes fanXpFloat{0%,100%{transform:translateY(-50%) rotate(-8deg)}50%{transform:translateY(calc(-50% - 14px)) rotate(-3deg)}}
@keyframes fanOrbit{to{transform:rotate(360deg)}}
@keyframes fanFlame{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.1) rotate(3deg)}}
@media(max-width:900px){
  .rof-concept-fanclub-page .fanclub-page{padding:24px 18px 18px!important}
  .rof-concept-fanclub-page .fan-hero{min-height:530px;padding:52px 42px 240px!important}
  .rof-concept-fanclub-page .fan-hero:before{right:calc(50% - 102px);top:auto;bottom:38px;width:180px;height:180px;font-size:64px}
  .rof-concept-fanclub-page .fan-hero:after{right:calc(50% - 160px);top:auto;bottom:12px;width:310px;height:240px}
  .rof-concept-fanclub-page .fan-grid{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .rof-concept-fanclub-page .fanclub-page{padding:14px 10px 18px!important}
  .rof-concept-fanclub-page .fan-hero{min-height:520px;padding:44px 24px 230px!important;border-radius:10px!important}
  .rof-concept-fanclub-page .fan-hero h2{font-size:61px!important;letter-spacing:-5px!important}
  .rof-concept-fanclub-page .fan-hero p{font-size:13px}
  .rof-concept-fanclub-page .fan-card{padding:18px!important}
  .rof-concept-fanclub-page .fan-missions,
  .rof-concept-fanclub-page .fan-badges{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .rof-concept-fanclub-page *:before,
  .rof-concept-fanclub-page *:after,
  .rof-concept-fanclub-page .fs-flame{animation-duration:.01ms!important;animation-iteration-count:1!important}
}
