
html{background:#172033}
body{
  position:relative;
  isolation:isolate;
  background:#172033 !important;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(98,33,196,.22),transparent 36%),
    radial-gradient(ellipse at 80% 65%,rgba(59,130,246,.18),transparent 38%),
    radial-gradient(ellipse at 55% 90%,rgba(168,85,247,.10),transparent 34%),
    linear-gradient(120deg,#111827,#1b263b 48%,#172033);
  background-size:180% 180%;
  animation:helperAurora 20s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 55% 25% at 15% 25%,rgba(168,85,247,.10),transparent 70%),
    radial-gradient(ellipse 45% 22% at 85% 72%,rgba(59,130,246,.09),transparent 70%);
  filter:blur(35px);
  animation:helperGlow 14s ease-in-out infinite alternate;
}
.helper-bg-light{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.helper-bg-light::before,
.helper-bg-light::after{
  content:"";
  position:absolute;
  width:85vw;
  height:90px;
  border-radius:50%;
  filter:blur(32px);
  opacity:.13;
  background:linear-gradient(90deg,transparent,#a855f7,#3b82f6,transparent);
  animation:helperFlow 16s ease-in-out infinite alternate;
}
.helper-bg-light::before{top:18%;left:-20%;transform:rotate(-12deg)}
.helper-bg-light::after{bottom:14%;right:-20%;transform:rotate(-12deg);animation-delay:-8s}
body>*{position:relative;z-index:0}
#helper-entrance-animation,#helper-entrance-animation *{z-index:2147483647!important}
@keyframes helperAurora{
  0%{transform:translate3d(-3%,-2%,0) scale(1.02);background-position:0% 40%}
  50%{transform:translate3d(3%,2%,0) scale(1.08);background-position:65% 60%}
  100%{transform:translate3d(-1%,3%,0) scale(1.04);background-position:100% 20%}
}
@keyframes helperGlow{
  0%{transform:translate3d(-2%,0,0) scale(.98);opacity:.65}
  100%{transform:translate3d(2%,-2%,0) scale(1.06);opacity:1}
}
@keyframes helperFlow{
  0%{transform:translateX(-12%) rotate(-12deg)}
  100%{transform:translateX(18%) rotate(-12deg)}
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after,.helper-bg-light::before,.helper-bg-light::after{animation:none!important}
}


/* HELPER visual refresh — cards, page transitions, navigation, mobile and background */
.helper-ambient{display:none!important}

/* Cleaner moving-line atmosphere; no floating circles/particles */
body::before{background:
  radial-gradient(ellipse at 18% 18%,rgba(124,58,237,.13),transparent 30%),
  radial-gradient(ellipse at 82% 76%,rgba(37,99,235,.10),transparent 32%),
  linear-gradient(125deg,#111827 0%,#182338 40%,#172033 70%,#1d2940 100%)!important;}
body::after{opacity:.12!important;}

/* Smooth page entrance */
.hero,.categories,.page,.wrap,main,.page-content,.auth-card,.detail,.container{animation:helperSmoothPage .65s cubic-bezier(.2,.8,.2,1) both;}
@keyframes helperSmoothPage{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* More polished cards */
.category-card,.mod-card,.card,.page-card,.auth-card,.helper-latest-card,.helper-feature-card{
  border-radius:22px!important;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .32s ease,filter .32s ease!important;
}
.category-card:hover,.mod-card:hover,.card:hover,.page-card:hover,.helper-latest-card:hover,.helper-feature-card:hover{
  transform:translateY(-8px)!important;
  border-color:rgba(167,139,250,.48)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.28)!important;
}
.category-card:hover .card-icon{transform:translateY(-2px) scale(1.08)!important;}

/* Modern navbar */
.navbar{height:72px!important;padding-left:clamp(14px,4vw,5%)!important;padding-right:clamp(14px,4vw,5%)!important;background:rgba(8,10,18,.78)!important;border-bottom:1px solid rgba(255,255,255,.09)!important;box-shadow:0 8px 30px rgba(0,0,0,.12)!important;}
.navbar .menu a{transition:color .25s ease,transform .25s ease!important;}
.navbar .menu a:hover{transform:translateY(-2px)!important;}
.nav-right{display:flex!important;align-items:center!important;gap:8px!important;}
.shared-search-btn,.language-btn,.login-btn,.create-btn,.account-link,.shared-user{
  border-radius:12px!important;
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease!important;
}
.shared-search-btn:hover,.language-btn:hover,.login-btn:hover,.create-btn:hover,.account-link:hover,.shared-user:hover{transform:translateY(-2px)!important;box-shadow:0 10px 25px rgba(0,0,0,.18)!important;}

/* Search lives in the navbar, not in the middle of the homepage */
#siteSearchTop{position:fixed!important;top:82px!important;right:clamp(14px,4vw,5%)!important;width:min(430px,calc(100vw - 28px))!important;padding:14px 16px!important;border-radius:15px!important;background:rgba(9,11,20,.97)!important;border:1px solid rgba(167,139,250,.42)!important;box-shadow:0 18px 50px rgba(0,0,0,.38)!important;backdrop-filter:blur(18px)!important;}
.helper-nav-search{display:inline-flex!important;align-items:center;gap:5px;}

/* Mobile-first spacing and touch targets */
@media(max-width:900px){
  .navbar{height:auto!important;min-height:66px!important;flex-wrap:wrap!important;row-gap:8px!important;}
  .nav-right{margin-left:auto!important;gap:6px!important;}
  .shared-search-btn span{display:none!important;}
  .shared-search-btn{min-width:40px;min-height:40px;padding:9px!important;justify-content:center;}
  .language-btn,.login-btn,.create-btn{min-height:40px!important;padding:8px 10px!important;}
  .menu{display:none!important;}
  .hero{padding-left:14px!important;padding-right:14px!important;}
  .cards{gap:16px!important;}
  .category-card{min-height:190px!important;padding:22px!important;}
}
@media(max-width:600px){
  .navbar{padding:10px 12px!important;}
  .logo .helper-word{font-size:25px!important;}
  .login-btn{font-size:12px!important;}
  .create-btn{font-size:12px!important;}
  .language-btn{font-size:0!important;min-width:40px!important;}
  .language-btn::first-letter{font-size:18px;}
  .category-card{min-height:175px!important;padding:18px!important;border-radius:18px!important;}
  .category-card h3{font-size:19px!important;}
  .category-card p{font-size:13px!important;}
}

@media(prefers-reduced-motion:reduce){
  .hero,.categories,.page,.wrap,main,.page-content,.auth-card,.detail,.container{animation:none!important;}
  .category-card,.mod-card,.card,.page-card,.helper-latest-card,.helper-feature-card{transition:none!important;}
}
