:root{
  --b-red: rgba(255, 48, 48, .16);
  --b-ease: cubic-bezier(.22,1,.36,1);
}

html, body { min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  background-color:#030303 !important;
  background-image:
    radial-gradient(circle at 88% 86%, var(--b-red) 0, rgba(255,48,48,.055) 13%, transparent 31%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.78)),
    url('../assets/Bastienstyle.png') !important;
  background-position:center, center, center;
  background-size:cover, cover, cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.nav {
  box-shadow: 0 18px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
}
.nav a {
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:color .18s ease, background-color .18s ease, box-shadow .22s var(--b-ease), transform .22s var(--b-ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:4px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  opacity:0;
  transform:scaleX(.55);
  transition:opacity .2s ease,transform .25s var(--b-ease);
}
.nav a:hover::after,.nav a.active::after{opacity:.7;transform:scaleX(1)}
.nav .nav-icon{width:12px;height:12px}

.member-box,.card,.group,.toolbar,.quick-guide .guide,#bastienMusicDock{
  position:relative;
  isolation:isolate;
}
.member-box::after,.card::after,.group::after,.toolbar::after,.quick-guide .guide::after,#bastienMusicDock::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 28%,transparent 72%,rgba(255,45,45,.035));
  opacity:.55;
  z-index:-1;
}

button,a,.member-box,.card,.filter,.social-btn,.mini-toggle-btn{
  touch-action:manipulation;
}
button:active,.nav a:active,.filter:active,.member-box:active,.social-btn:active,.mini-toggle-btn:active{
  transform:translateY(1px) scale(.985);
}

.category-bar{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.category-bar::-webkit-scrollbar{display:none}
.filter.active{box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.06)}

.admin-scroll-hint{
  color:#555;
  font:600 7px Orbitron,Arial,sans-serif;
  letter-spacing:1.5px;
}
.groups{align-items:start}
.group{min-width:0}
.person{transition:background-color .2s ease,border-color .2s ease,transform .2s var(--b-ease)}
.person:hover{transform:translateX(2px);background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.13)}
.add button,.modal-actions .save,.logout{
  transition:transform .18s var(--b-ease),background-color .18s ease,border-color .18s ease,color .18s ease;
}
.add button:hover,.modal-actions .save:hover,.logout:hover{transform:translateY(-1px)}

.admin-page,
body:has(#groups){
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

@media(max-width:700px){
  body{background-attachment:scroll}
  .nav a{padding-inline:13px}
  .nav a::after{left:11px;right:11px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}