:root{
  --bg-0:#05050A;
  --bg-1:#090814;
  --card:rgba(18, 16, 32, .62);
  --card-solid:#121020;
  --border:rgba(255,255,255,.10);
  --text:#F3F4F6;
  --muted:#A1A1AA;
  --primary:#A855F7;      /* purple */
  --primary-2:#D946EF;    /* fuchsia */
  --market:#FACC15;       /* yellow */
  --glow:rgba(168,85,247,.35);
  --radius:22px;
  --shadow:0 22px 60px rgba(0,0,0,.60);
}

*{box-sizing:border-box}
html,body{height:100%}

body.app-body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1000px 600px at 20% 30%, rgba(168,85,247,.18), transparent 60%),
    radial-gradient(900px 540px at 80% 20%, rgba(217,70,239,.14), transparent 60%),
    radial-gradient(1200px 700px at 70% 80%, rgba(168,85,247,.10), transparent 65%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  color:var(--text);
  overflow-x:hidden;

  /* Footer alignment fix */
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* grid overlay + noise */
.hero-grid::before,
body.app-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.28;
  mix-blend-mode:overlay;
}
body.app-body::after{
  content:"";
  position:fixed;
  inset:-200px;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(168,85,247,.28), transparent 40%),
    radial-gradient(circle at 60% 10%, rgba(217,70,239,.20), transparent 38%),
    radial-gradient(circle at 90% 60%, rgba(168,85,247,.18), transparent 40%);
  filter: blur(18px);
  opacity:.55;
  mix-blend-mode:screen;
}

a{color:inherit;text-decoration:none}
.text-secondary{color:var(--muted)!important}

.container{max-width:1200px}

/* Navbar */
.app-navbar{
  background:rgba(6,6,10,.28);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-navbar .navbar-brand .brand-title{
  font-weight:800;
  letter-spacing:.2px;
  color:#fff;
}

.app-navbar .navbar-brand .brand-pill{
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  font-size:.78rem;
  color:rgba(255,255,255,.86);
}
.app-navbar .nav-link{
  color:rgba(255,255,255,.80);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:.82rem;
  padding:.25rem .2rem;
}
.app-navbar .nav-link:hover{color:#fff}
.app-navbar .nav-link.active{
  color:#fff;
  position:relative;
}
.app-navbar .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity:.9;
}
.app-navbar .nav-link.nav-market{
  color:var(--market);
}
.app-navbar .nav-link.nav-market:hover{color:#ffe27a}

/* Desktop top links used in navbar.php */
.app-toplinks{letter-spacing:.16em; text-transform:uppercase; font-size:.82rem;}
.app-toplink{color:rgba(255,255,255,.78); text-decoration:none; padding:.25rem .2rem; position:relative; transition:color .2s ease, transform .2s ease;}
.app-toplink:hover{color:#fff; transform:translateY(-1px);}
.app-toplink-market{color:var(--market);}
.app-toplink-market:hover{color:#ffe27a;}
.app-toplink-market .app-coin{display:inline-flex; align-items:center; justify-content:center; margin-right:.35rem;}
.app-toplink::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; border-radius:99px; background:linear-gradient(90deg, transparent, var(--primary), transparent); opacity:0; transition:opacity .18s ease;}
.app-toplink:hover::after{opacity:.65;}
.btn-discord{
  border-color:rgba(255,255,255,.18)!important;
}
.btn-discord:hover{
  border-color:rgba(255,255,255,.35)!important;
}

/* floating toggler */
.app-nav-fab{
  width:46px; height:46px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.55);
  background:rgba(18,16,32,.55);
  box-shadow:0 0 0 6px rgba(168,85,247,.08);
  position:fixed;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  z-index:1400;
  backdrop-filter: blur(12px);
}

.app-nav-fab:focus{box-shadow:0 0 0 6px rgba(168,85,247,.12)}
.app-nav-fab-svg{display:block; color:rgba(255,255,255,.92)}
.app-nav-fab-icon{
  display:block;
  width:18px; height:2px;
  background:rgba(255,255,255,.9);
  margin:0 auto;
  position:relative;
}
.app-nav-fab-icon::before,.app-nav-fab-icon::after{
  content:"";
  position:absolute; left:0;
  width:18px; height:2px;
  background:rgba(255,255,255,.9);
}
.app-nav-fab-icon::before{top:-6px}
.app-nav-fab-icon::after{top:6px}

/* Hero */
.hero{
  padding: clamp(2.2rem, 4vw, 3.8rem) 0 1.2rem;
  position:relative;
}
.hero-inner{position:relative; z-index:2;}
.hero-copy{max-width:560px;}
.hero-kicker{
  font-weight:600;
  letter-spacing:.06em;
}
.hero-title{
  font-weight:300;
  font-size: clamp(2.5rem, 4.6vw, 4.0rem);
  line-height:1.05;
  margin:0 0 1.1rem;
}
.hero-accent{
  color:var(--primary);
}
.hero-caret{
  color:rgba(168,85,247,.9);
  font-weight:700;
  margin-left:.2rem;
}
.hero-subtitle{
  color:rgba(255,255,255,.70);
  line-height:1.7;
  max-width:560px;
  margin:0;
}

/* CTA */
.btn-cta{
  background:#ffffff;
  color:#090814;
  border:0;
  border-radius:16px;
  padding: .95rem 1.35rem;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.btn-cta:hover{
  transform: translateY(-1px);
  box-shadow:0 22px 48px rgba(0,0,0,.55);
}
.btn-outline-light{
  border-color:rgba(255,255,255,.18)!important;
  color:rgba(255,255,255,.86)!important;
  border-radius:16px;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.35)!important;
}

/* Hero figure */
.hero-figure-wrap{
  position:relative;
  min-height:420px;
}
.hero-figure{
  width:min(520px, 90%);
  max-height:560px;
  object-fit:contain;
  display:block;
  margin-left:auto;
  filter: drop-shadow(0 30px 70px rgba(0,0,0,.75));
  transform-origin: 70% 50%;
}
.hero-anim{
  animation: heroIn .85s ease-out both;
}
@keyframes heroIn{
  from{opacity:0; transform:scale(.90) translateY(10px);}
  to{opacity:1; transform:scale(1) translateY(0);}
}

/* hero bottom status */
.hero-bottom{
  display:flex;
  justify-content:center;
  margin-top:1.3rem;
}
.server-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .85rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,16,32,.45);
  color:rgba(255,255,255,.78);
  font-weight:600;
  font-size:.86rem;
}
.server-dot{
  width:8px;height:8px;border-radius:50%;
}
.server-dot-success{background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.12);}
.server-dot-danger{background:#ef4444; box-shadow:0 0 0 6px rgba(239,68,68,.12);}
.server-dot-warning{background:#eab308; box-shadow:0 0 0 6px rgba(234,179,8,.14);}

/* Cards */
.nav-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,16,32,.60), rgba(10,9,18,.55));
  box-shadow:0 14px 38px rgba(0,0,0,.40);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nav-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  background: radial-gradient(circle at 20% 30%, rgba(168,85,247,.25), transparent 50%),
              radial-gradient(circle at 70% 10%, rgba(217,70,239,.15), transparent 50%);
  opacity:.55;
  filter: blur(14px);
  transform: translateY(10px);
}
.nav-card > *{position:relative; z-index:2;}
.nav-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:0 22px 55px rgba(0,0,0,.55);
  border-color:rgba(168,85,247,.35);
}
.nav-card-icon{
  width:52px;height:52px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(168,85,247,.06);
}
.nav-card-title{font-weight:800; font-size:1.05rem;}
.nav-card-desc{color:rgba(255,255,255,.66); font-size:.92rem; line-height:1.55;}
.nav-card-arrow{
  margin-left:auto;
  color:rgba(255,255,255,.55);
  font-size:1.1rem;
}


/* Forms / App Cards */
.app-card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(18,16,32,.82), rgba(18,16,32,.62));
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.app-card .card-body{padding:22px;}
.app-card .form-label{color:rgba(255,255,255,.78);}
.app-card .form-control,
.app-card .form-select,
.app-card textarea{
  background:rgba(7,7,14,.55);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
}
.app-card .form-control:focus,
.app-card .form-select:focus,
.app-card textarea:focus{
  box-shadow:0 0 0 6px rgba(168,85,247,.14);
  border-color:rgba(168,85,247,.55);
}
.app-card .form-control::placeholder{color:rgba(255,255,255,.40);}
.app-card .form-select{cursor:pointer;}
/* Panels */
.app-panel{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(18,16,32,.50);
  backdrop-filter: blur(12px);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

/* Avatar */
.avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{font-weight:800;color:#fff;opacity:.9}

/* Toast */
.app-toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1200;
  min-width:280px;
  max-width:360px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,16,32,.78);
  backdrop-filter: blur(12px);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transform: translateY(20px);
  opacity:0;
  transition: all .22s ease;
}
.app-toast.show{transform: translateY(0); opacity:1;}
.app-toast .title{font-weight:800}
.app-toast .msg{color:rgba(255,255,255,.72)}
.app-toast.success{border-color:rgba(34,197,94,.35)}
.app-toast.danger{border-color:rgba(239,68,68,.35)}
.app-toast.warning{border-color:rgba(250,204,21,.35)}
.app-toast.info{border-color:rgba(168,85,247,.35)}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(12px); transition: all .55s ease;}
.reveal.in{opacity:1; transform: translateY(0);}

.app-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(6,6,10,.20);
}

@media (max-width: 991.98px){
  .app-navbar .navbar-nav{padding-top:1rem; padding-bottom:1rem;}
  .app-navbar .nav-link.active::after{bottom:-6px}
  .hero-figure{margin: 0 auto; width: min(520px, 100%);}
}


/* -------- Stage 1 rev2: animated grid + moving purple orbs -------- */
body.app-body{
  position:relative;
  overflow-x:hidden;
}
body.app-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity:.22;
  mix-blend-mode: overlay;
  transform: translateZ(0);
}
.bg-orbs{
  position:fixed;
  inset:-40px;
  pointer-events:none;
  z-index:0;
  filter: blur(18px);
  opacity:.85;
}
.bg-orbs .orb{
  position:absolute;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(217,70,239,.55), rgba(168,85,247,.10) 55%, transparent 70%);
  animation: orbFloat 14s ease-in-out infinite;
  transform: translate3d(0,0,0);
}
.bg-orbs .o1{left:6%; top:12%; animation-duration: 16s;}
.bg-orbs .o2{right:10%; top:18%; width:260px; height:260px; animation-duration: 18s; animation-delay:-4s;}
.bg-orbs .o3{left:14%; bottom:8%; width:360px; height:360px; animation-duration: 20s; animation-delay:-7s;}
.bg-orbs .o4{right:18%; bottom:14%; width:300px; height:300px; animation-duration: 22s; animation-delay:-10s;}

@keyframes orbFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(38px,-26px,0) scale(1.08); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Ensure cards are not default link-blue */
a.nav-card{ text-decoration:none; color: var(--text); }
a.nav-card:hover{ color: var(--text); }

/* Hero layout requested */
.hero-fixed{ position:relative; z-index:1; padding-top: 34px; }
.hero-status-center{ display:flex; justify-content:center; margin-top: 18px; }

/* Navbar: keep top-right feeling */
.app-navbar{ position:sticky; top:0; z-index: 20; backdrop-filter: blur(14px); }
.nav-market .market-text{ color: var(--market); font-weight: 700; letter-spacing:.06em; }
.nav-market.active .market-text{ color: var(--market); }

/* Hero image: scale-in on load */
.hero-figure.hero-anim{
  transform: scale(.86);
  opacity: 0;
  animation: heroIn .75s cubic-bezier(.2,.9,.2,1) .08s forwards;
}
@keyframes heroIn{
  to { transform: scale(1); opacity: 1; }
}


/* -------- Admin (Stage 3) -------- */
.admin-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  padding: 18px 0 32px;
}
.admin-aside{
  position: sticky;
  top: 84px;
  align-self:start;
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(18,16,32,.55), rgba(10,9,18,.50));
  box-shadow: 0 16px 46px rgba(0,0,0,.45);
  overflow:hidden;
}
.admin-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--market);
  box-shadow: 0 0 0 6px rgba(250,204,21,.10);
}
.admin-brand-title{ font-weight:700; letter-spacing:.02em; }
.admin-brand-sub{ font-size: 12px; color: var(--muted); margin-top:2px; }

.admin-nav{ display:flex; flex-direction:column; padding: 10px; }
.admin-nav-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,.86);
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.admin-nav-link:hover{
  background: rgba(168,85,247,.10);
  border-color: rgba(168,85,247,.20);
  transform: translateY(-1px);
  color: rgba(255,255,255,.96);
}
.admin-nav-link.active{
  background: rgba(250,204,21,.10);
  border-color: rgba(250,204,21,.24);
}
.admin-aside-footer{ padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,.08); }

.admin-content{ padding-top: 4px; min-width: 0; }
.admin-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: rgba(10,9,18,.48);
  box-shadow: 0 16px 46px rgba(0,0,0,.35);
  padding: 16px;
}
.admin-card-k{ color: var(--muted); font-size: 12px; letter-spacing:.08em; text-transform:uppercase; }
.admin-card-v{ font-size: 28px; font-weight: 800; margin-top: 6px; }

@media (max-width: 992px){
  .admin-shell{ grid-template-columns: 1fr; }
  .admin-aside{ position:relative; top:auto; }
}


/* Animated background orbs */
.app-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.app-bg .orb{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, rgba(168,85,247,.35), rgba(168,85,247,0) 60%);
  filter:blur(2px);
  opacity:.85;
  mix-blend-mode:screen;
  animation:orbFloat 14s ease-in-out infinite;
}
.app-bg .orb-1{left:-120px; top:10%; animation-duration:16s;}
.app-bg .orb-2{right:-140px; top:6%; width:420px; height:420px; background:radial-gradient(circle at 30% 30%, rgba(217,70,239,.28), rgba(217,70,239,0) 60%); animation-duration:18s;}
.app-bg .orb-3{left:40%; bottom:-220px; width:700px; height:700px; background:radial-gradient(circle at 40% 40%, rgba(168,85,247,.22), rgba(168,85,247,0) 62%); animation-duration:22s;}

@keyframes orbFloat{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(40px,-30px,0) scale(1.06);}
  100%{transform:translate3d(0,0,0) scale(1);}
}

/* Ensure content above background */
.app-main{flex:1; display:block;}

.app-main, .app-navbar, .app-footer, .admin-shell{position:relative; z-index:2;}
body.app-body::before{z-index:1;}
body.app-body::after{z-index:1;}

/* Hero tweaks */
.hero-v2 .hero-figure-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:360px;
}
.hero-figure{max-width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow);}
.hero-anim{transform:scale(.88); opacity:0; animation:heroIn .9s cubic-bezier(.2,.8,.2,1) .1s forwards;}
@keyframes heroIn{to{transform:scale(1); opacity:1;}}
.hero-status-center{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
}
.server-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .9rem;
  border-radius:999px;
  background:rgba(10,10,16,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}
.server-dot{width:10px;height:10px;border-radius:99px;display:inline-block; box-shadow:0 0 18px rgba(255,255,255,.18);}
.server-dot-success{background:#22c55e; box-shadow:0 0 18px rgba(34,197,94,.55);}
.server-dot-danger{background:#ef4444; box-shadow:0 0 18px rgba(239,68,68,.55);}


/* Chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,16,32,.35);
  color:rgba(255,255,255,.82);
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chip:hover{transform:translateY(-1px); border-color:rgba(168,85,247,.45); box-shadow:0 0 0 3px rgba(168,85,247,.08);}
.chip.active{border-color:rgba(250,204,21,.55); box-shadow:0 0 0 3px rgba(250,204,21,.10); color:#fff;}

/* List item */
.list-item{
  display:block;
  padding:1rem 1.1rem;
  border-radius:var(--radius);
  background:rgba(18,16,32,.42);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.list-item:hover{transform:translateY(-2px); border-color:rgba(168,85,247,.45); box-shadow:0 18px 50px rgba(0,0,0,.45);}

/* Product cards */
.product-card{
  border-radius:var(--radius);
  overflow:hidden;
  background:rgba(18,16,32,.42);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.product-img{
  height:180px;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05);
}
.product-body{padding:1rem 1.1rem;}
.product-title{font-weight:700; letter-spacing:.2px;}
.product-desc{color:var(--muted); font-size:.95rem; margin-top:.45rem; min-height:46px;}
.product-price{font-weight:800; color:var(--market);}


/* ===== A8 fixes: prevent overflow + remove hero outline ===== */
html, body { overflow-x: hidden; }
.hero, .hero-inner { overflow: hidden; }
.hero-figure-wrap { overflow: hidden; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.hero-figure { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; filter: none !important; max-width: 100% !important; height: auto !important; }



/* Main / Footer */
.app-main{flex:1 0 auto;}
.app-footer{margin-top:auto;}

/* Hero title gradient (editable from settings) */
.hero-title{
  background: linear-gradient(90deg, var(--hero-grad-from, #ffffff), var(--hero-grad-to, var(--primary)));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-title .caret{
  background:none;
  color: var(--primary);
  -webkit-background-clip: initial;
}

/* Make sure app-card overrides Bootstrap .card background */
.card.app-card{background:linear-gradient(180deg, rgba(18,16,32,.82), rgba(18,16,32,.62)) !important; color:var(--text);}

/* Market link accent */
.nav-market{color:var(--market) !important;}
.nav-market.active{color:var(--market) !important; opacity:1;}
.drawer-title-market{color:var(--market); font-weight:900;}

/* Animated background blobs */
body::before{
  content:'';
  position:fixed;
  inset:-30%;
  background:
    radial-gradient(650px 380px at 20% 20%, rgba(168,85,247,.34), transparent 60%),
    radial-gradient(520px 320px at 80% 30%, rgba(88,51,255,.22), transparent 60%),
    radial-gradient(520px 320px at 60% 85%, rgba(168,85,247,.22), transparent 60%);
  filter: blur(10px);
  animation: blobDrift 18s ease-in-out infinite alternate;
  z-index:-3;
  pointer-events:none;
}
@keyframes blobDrift{
  0%{transform: translate3d(-2%, -1%, 0) scale(1);}
  50%{transform: translate3d(2%, 1%, 0) scale(1.04);}
  100%{transform: translate3d(1%, -2%, 0) scale(1.02);}
}

/* Shell wrapper (used for blur while drawer is open) */
.app-shell{
  position:relative;
  z-index:2;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  transition: filter .22s ease;
}
body.drawer-open .app-shell{filter: blur(8px);}

/* Drawer */
.app-nav-fab{
  width:46px;height:46px;
  border-radius:999px;
  border:1px solid rgba(168,85,247,.45);
  background: radial-gradient(120% 120% at 30% 20%, rgba(168,85,247,.35), rgba(11,10,19,.55));
  box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 0 8px rgba(168,85,247,.08);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
}
.app-nav-fab:hover{transform: translateY(-50%) scale(1.02); box-shadow: 0 22px 55px rgba(0,0,0,.58), 0 0 0 10px rgba(168,85,247,.10);}
.app-nav-fab:active{transform: translateY(0);}
.app-nav-fab-icon{
  width:18px;height:12px;position:relative;display:block;
}
.app-nav-fab-icon::before,
.app-nav-fab-icon::after,
.app-nav-fab-icon span{
  content:'';
  position:absolute;left:0;right:0;
  height:2px;border-radius:999px;
  background:rgba(255,255,255,.9);
}
.app-nav-fab-icon::before{top:0;}
.app-nav-fab-icon span{top:5px;}
.app-nav-fab-icon::after{bottom:0;}

.app-drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index:1200;
}
.app-drawer-overlay.open{opacity:1; visibility:visible; pointer-events:auto;}
.app-drawer{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  height:100vh;
  width:min(360px, 92vw);
  background:linear-gradient(180deg, rgba(18,16,32,.92), rgba(11,10,19,.92));
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:-40px 0 90px rgba(0,0,0,.65);
  transform: translateX(105%);
  visibility:hidden;
  pointer-events:none;
  transition: transform .28s ease, visibility 0s linear .28s;
  z-index:1210;
  display:flex;
  flex-direction:column;
}
.app-drawer.open{
  transform: translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition: transform .28s ease;
}
body.drawer-open{overflow:hidden;}

/* Ensure drawer stays above everything and never pushes layout */
.app-drawer, .app-drawer-overlay{contain: paint;}

.app-drawer-header{
  padding:18px 18px 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.app-drawer-body{
  padding:14px 18px 18px 18px;
  overflow:auto;
}
.app-drawer-links{display:flex; flex-direction:column; gap:12px;}
.drawer-link{
  display:flex; gap:12px; align-items:center;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  text-decoration:none;
  color:var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.drawer-link:hover{transform: translateX(-2px); border-color:rgba(168,85,247,.38); box-shadow:0 18px 45px rgba(0,0,0,.35);}
.drawer-ic{
  width:36px;height:36px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(168,85,247,.14);
  border:1px solid rgba(168,85,247,.22);
}
.drawer-title{font-weight:900; letter-spacing:.3px;}
.drawer-sub{color:rgba(255,255,255,.60); font-size:.88rem; margin-top:2px;}
.drawer-divider{height:1px; background:rgba(255,255,255,.10); margin:16px 0;}
.drawer-follow-title{font-weight:800; font-size:.86rem; letter-spacing:.12em; color:rgba(255,255,255,.55); margin-bottom:10px;}
.drawer-social{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.drawer-social:hover{transform: translateY(-1px);}
.drawer-server{
  width:100%;
  margin-top:14px;
  border-radius:18px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.drawer-server.open{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08);}
.drawer-server.closed{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08);}
.drawer-server-ic{opacity:.9}
/* Rules accordion */
.page-head{padding:34px 0 12px 0;}
.page-title{font-weight:950; letter-spacing:-.02em;}
.rules-accordion{display:flex; flex-direction:column; gap:16px; margin-top:18px;}
.rules-item{border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); box-shadow: 0 30px 80px rgba(0,0,0,.35);}
.rules-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 18px;
  background:rgba(255,255,255,.03);
  border:0;
  color:var(--text);
  font-size:1.05rem;
  font-weight:800;
  text-align:left;
}
.rules-head:hover{background:rgba(255,255,255,.05);}
.rules-num{min-width:34px; color:var(--primary); font-weight:950;}
.rules-title{flex:1;}
.rules-chevron{transition: transform .18s ease; color:var(--primary); font-weight:900;}
.rules-head.open .rules-chevron{transform: rotate(180deg);}
.rules-body{max-height:0; overflow:hidden; transition: max-height .24s ease;}
.rules-body.open{ }
.rules-body-inner{
  padding:0 18px 18px 66px;
  color:rgba(255,255,255,.86);
}
.rules-body-inner h3,.rules-body-inner h4{color:var(--text); margin-top:18px;}
.rules-body-inner p{color:rgba(255,255,255,.76);}
.rules-body-inner ul{margin-top:10px;}
.rules-body-inner li{margin-bottom:6px;}

/* Empty / 404 screens */
.app-empty{
  min-height: calc(100vh - 160px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 56px 12px;
}
.app-empty-card{
  width:min(720px, 100%);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius: 24px;
  padding: 26px 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,.45);
}
.app-empty-card h1{font-weight:900; letter-spacing:-.02em; margin:0 0 6px 0;}
.app-empty-card p{color:rgba(255,255,255,.72); margin:0 0 14px 0;}

/* Mini list blocks (profile) */
.empty-mini{
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:14px 16px;
  color:rgba(255,255,255,.70);
}
.list-mini{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:12px 14px;
}

/* Navbar user chip */
.app-userchip{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  border-radius:14px;
  text-decoration:none;
  color:#fff;
  background:rgba(18,16,32,.55);
  border:1px solid rgba(168,85,247,.45);
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.app-userchip:hover{background:rgba(18,16,32,.72); border-color:rgba(168,85,247,.7); transform:translateY(-1px);}
.app-avatar{
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(168,85,247,.55);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.app-userchip-meta{display:flex; flex-direction:column; line-height:1.05;}
.app-userchip-name{font-weight:800; font-size:.95rem;}
.app-userchip-role{font-size:.75rem; opacity:.95;}

/* Drawer user */
.drawer-user{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:16px;
  text-decoration:none;
  color:#fff;
  background:rgba(18,16,32,.45);
  border:1px solid rgba(168,85,247,.35);
  margin-bottom:12px;
}
.drawer-user:hover{background:rgba(18,16,32,.62); border-color:rgba(168,85,247,.6);}
.drawer-user-meta{display:flex; flex-direction:column; line-height:1.1;}
.drawer-user-name{font-weight:800;}
.drawer-user-role{font-size:.8rem; opacity:.95;}


.footer-discord{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
.footer-discord:hover{background:rgba(255,255,255,.08);}

.drawer-server.maintenance{border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.10);}

.server-pill.status-online{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10);}
.server-pill.status-closed{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10);}
.server-pill.status-maintenance{border-color: rgba(234,179,8,.45); background: rgba(234,179,8,.12);}
.server-pill .server-dot{width:10px;height:10px;border-radius:99px;display:inline-block;}

/* -------- Wuzz RolePlay UI adjustments (requested) -------- */
/* Navbar + Footer transparent (alpha 0) */
.app-navbar{ background: transparent !important; border-bottom: 0 !important; backdrop-filter:none !important; }
.app-footer{ background: transparent !important; border-top: 0 !important; }

/* Background grid: 60x60, lines more transparent, slight purple center glow */
body.app-body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.18;
}
body.app-body::after{
  background: radial-gradient(circle at 50% 40%, rgba(168,85,247,.22), transparent 52%);
  filter: blur(18px);
  opacity:.65;
}
/* Disable extra animated blobs/orbs for the cleaner reference look */
.app-bg, .bg-orbs{ display:none !important; }

/* Confirm modal body should respect new lines */
#confirmBody{ white-space: pre-line; }

/* Hamburger button: match reference (no up-down jump on hover) */
.app-nav-fab:hover{ transform: scale(1.03) !important; }
.app-nav-fab:active{ transform: scale(.98) !important; }

/* Home bottom-center status + copyright */
.home-bottom-center{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); text-align:center; z-index:2; }
.home-bottom-center .home-status{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(18,16,32,.45); backdrop-filter: blur(10px); }
.home-bottom-center .home-status .dot{ width:8px; height:8px; border-radius:99px; background:#ef4444; box-shadow:0 0 0 6px rgba(239,68,68,.10); }
.home-bottom-center .home-copy{ margin-top:10px; color:rgba(255,255,255,.66); font-size:.9rem; }

/* Powered by badge (bottom-right like reference) */
.powered-badge{ position:fixed; right:18px; bottom:18px; z-index:30; }
.powered-badge .btn{ border-radius:10px; padding:.42rem .65rem; background:rgba(18,16,32,.35); border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.85); backdrop-filter: blur(10px); }

/* Market page (reference style) */
.market-top{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px; }
.market-search{ width:min(640px, 92vw); }
.market-search input{ height:52px; border-radius:14px; background:rgba(18,16,32,.45); border:1px solid rgba(255,255,255,.10); color:var(--text); }
.market-tabs{ display:flex; gap:12px; }
.market-tab{ display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 18px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background:rgba(18,16,32,.28); color:rgba(255,255,255,.85); font-weight:700; }
.market-tab.active{ border-color: rgba(168,85,247,.65); box-shadow: 0 0 0 6px rgba(168,85,247,.10); }

.market-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 340px)); gap:18px; align-items:start; }
.market-card{ border-radius:22px; border:1px solid rgba(255,255,255,.10); background:rgba(18,16,32,.42); backdrop-filter: blur(12px); overflow:hidden; box-shadow:0 18px 55px rgba(0,0,0,.55); }
.market-shell{ display:grid; grid-template-columns: 420px 1fr; gap:28px; align-items:start; }
@media (max-width: 991px){ .market-shell{ grid-template-columns: 1fr; } }
.market-card .img{ position:relative; height:170px; display:flex; align-items:center; justify-content:center; background:rgba(10,10,18,.55); }
.market-card .badge-time{ position:absolute; right:12px; top:12px; max-width: 92%; }
.market-card .img img{ width:56px; height:56px; opacity:.9; }
.market-card .body{ padding:16px; }
.market-card .badge-time{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(239,68,68,.14); border:1px solid rgba(239,68,68,.25); color:rgba(255,255,255,.9); font-weight:700; font-size:.82rem; }
.market-card .cat-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid rgba(168,85,247,.35); background:rgba(168,85,247,.10); color:rgba(255,255,255,.85); font-weight:700; font-size:.82rem; }
.market-card .title{ font-size:1.25rem; font-weight:800; margin-top:10px; }
.market-card .desc{ color:rgba(255,255,255,.62); margin-top:8px; min-height:38px; }
.market-card .price{ color:var(--primary); font-weight:900; font-size:1.35rem; margin-top:14px; }
.market-card .buy{ margin-top:14px; }
.market-card .buy .btn{ width:100%; border-radius:12px; padding:.75rem 1rem; font-weight:800; background:linear-gradient(90deg, rgba(168,85,247,.95), rgba(59,130,246,.85)); border:0; }

/* Bigger ped image */
.hero-figure{ width:min(640px, 100%); }

/* Home reference button */
.home-hero{ position:relative; min-height: calc(100vh - 80px); overflow:hidden; }
.home-apply-wrap{ padding-top: 120px; position:relative; z-index:2; }
.home-apply-btn{ display:flex; align-items:center; justify-content:center; gap:14px; width:min(720px, 92vw); margin-left:0; text-decoration:none; background:#fff; color:#111; padding:22px 26px; border-radius:18px; font-weight:900; font-size:1.25rem; box-shadow: 0 18px 55px rgba(0,0,0,.55); }
.home-apply-btn:hover{ transform: translateY(-1px); }
.home-apply-arrow{ font-weight:900; }
@media (max-width: 991px){ .home-apply-wrap{ padding-top: 100px; } .home-apply-btn{ margin:0 auto; } }

.home-hero-art{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.home-hero-ped{ position:absolute; right:-40px; bottom:-40px; width:min(1100px, 78vw); max-width:none; opacity:.55; filter: drop-shadow(0 20px 80px rgba(0,0,0,.65)); }
@media (max-width: 991px){ .home-hero-ped{ right:-120px; opacity:.35; width:min(1100px, 110vw); } }


/* ===== HOME HERO (Left slogan + description + apply button) ===== */
.home-hero{position:relative; min-height:calc(100vh - 90px); display:flex; align-items:center; padding:86px 0 120px;}
.home-hero-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; position:relative; z-index:2;}
.home-hero-left{max-width:560px;}
.home-slogan{font-weight:800; letter-spacing:.6px; font-size:clamp(34px, 5vw, 56px); line-height:1.05; color:#fff; text-transform:uppercase;}
.home-desc{margin-top:14px; color:rgba(255,255,255,.72); font-size:clamp(14px, 2vw, 16px); line-height:1.55; max-width:520px;}
.home-apply-btn{margin-top:22px; display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:#fff; color:#0d0c16; font-weight:700; text-decoration:none; box-shadow:0 18px 60px rgba(0,0,0,.35);}
.home-apply-btn:hover{filter:brightness(.98); transform:translateY(-1px); transition:all .15s ease;}
.home-apply-arrow{font-weight:900;}
.home-hero-right{position:relative; width:min(560px, 46vw); display:flex; align-items:center; justify-content:center;}
.home-hero-ped{width:min(520px, 46vw); max-width:100%; height:auto; opacity:.95; filter: drop-shadow(0 40px 120px rgba(0,0,0,.55));}

/* Keep bottom center text visible over background */
.home-bottom-center{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); text-align:center; z-index:3; width:min(920px, 92vw);}

/* Responsive */
@media (max-width: 991.98px){
  .home-hero{padding:88px 0 140px;}
  .home-hero-inner{flex-direction:column; align-items:flex-start;}
  .home-hero-right{width:100%; justify-content:flex-end;}
  .home-hero-ped{width:min(520px, 88vw);}
}



/* ===== FIX: floating menu button hover jitter + ensure clickability ===== */
.app-nav-fab{ pointer-events:auto; }
.app-nav-fab:hover,
.app-nav-fab:focus{ transform:translateY(-50%); }

/* ===== Footer: match home layout on every page ===== */
.app-footer{ border-top:0; background:transparent; padding:0; }
.app-footer-center{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  text-align:center;
  color:rgba(255,255,255,.70);
  font-size:12px;
  z-index:60;
  pointer-events:none;
}

/* ===== Home: ped.png as large background behind content ===== */
.home-hero{ overflow:hidden; }
.home-hero-inner{ position:relative; z-index:3; }
.home-hero-left{ position:relative; z-index:3; }
.home-hero-right{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  pointer-events:none;
  z-index:1;
}
.home-hero-ped{
  width:min(980px, 78vw);
  max-width:none;
  opacity:.55;
  filter: drop-shadow(0 60px 160px rgba(0,0,0,.65));
  transform: translateX(12%);
}
@media (max-width: 991.98px){
  .home-hero-right{ justify-content:center; }
  .home-hero-ped{ width:min(860px, 110vw); transform: translateX(0); opacity:.35; }
}

/* ===== Market: full width 3 columns grid, right side decorative ===== */
.market-shell{
  position:relative;
  display:block;
}
.market-left{ position:relative; z-index:2; }
.market-right{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.market-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}
@media (max-width: 1199.98px){
  .market-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
  .market-grid{ grid-template-columns: 1fr; }
}

/* Price with coin icon */
.market-card .price{
  display:flex;
  align-items:center;
  gap:8px;
}
.market-card .price .coin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:rgba(250,204,21,.95);
}
.market-card .price .val{
  font-weight:800;
}


.admin-nav-sep{height:1px; margin:10px 14px; background:rgba(255,255,255,.08);}


/* ===== DRAWER FAB reliability ===== */
.app-nav-fab{z-index:2005 !important; pointer-events:auto !important; transform:translateY(-50%) !important;}
.app-nav-fab:hover{transform:translateY(-50%) !important;}

/* ===== HOME layout adjustments (ped full height right) ===== */
.home-hero{overflow:hidden;}
.home-hero-inner{position:relative;}
.home-hero-right{position:absolute !important; right:-40px !important; top:-40px !important; bottom:-40px !important; width:62vw !important; max-width:none !important; z-index:1 !important; pointer-events:none !important; display:flex !important; align-items:stretch !important; justify-content:flex-end !important;}
.home-hero-ped{height:calc(100vh + 80px) !important; width:auto !important; max-width:none !important; opacity:.90 !important; object-fit:cover !important; filter: drop-shadow(0 60px 160px rgba(0,0,0,.65)) !important;}
.home-hero-left{position:relative; z-index:3; margin-top:46px;}
@media (max-width: 991.98px){
  .home-hero-right{position:relative !important; inset:auto !important; width:100% !important; right:auto !important; top:auto !important; bottom:auto !important; margin-top:14px;}
  .home-hero-ped{height:auto !important; width:min(520px, 92vw) !important;}
  .home-hero-left{margin-top:22px;}
}

/* ===== Server status dot colors ===== */
.home-status .dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:8px; background:#ef4444; box-shadow:0 0 0 6px rgba(239,68,68,.12);}
.home-status.status-open .dot{background:#22c55e; box-shadow:0 0 0 6px rgba(34,197,94,.14);}
.home-status.status-maint .dot{background:#facc15; box-shadow:0 0 0 6px rgba(250,204,21,.14);}
.home-status.status-closed .dot{background:#ef4444; box-shadow:0 0 0 6px rgba(239,68,68,.14);}

/* ===== Admin theme overrides (remove gray bootstrap feel) ===== */
.admin-shell{align-items:start;}
.admin-aside, .admin-content, .admin-topbar, .admin-card, .card, .table-wrap, .table-responsive{
  background:rgba(18,16,32,.45);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.table{color:rgba(255,255,255,.86);}
.table thead th{background:rgba(18,16,32,.65) !important; color:rgba(255,255,255,.88) !important; border-color:rgba(255,255,255,.10) !important;}
.table tbody tr{background:transparent !important;}
.table td, .table th{border-color:rgba(255,255,255,.08) !important;}
.table-striped>tbody>tr:nth-of-type(odd){background:rgba(255,255,255,.03) !important;}
.form-control, .form-select, .input-group-text{
  background:rgba(18,16,32,.55) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.90) !important;
}
.form-control:focus, .form-select:focus{
  border-color:rgba(168,85,247,.65) !important;
  box-shadow:0 0 0 6px rgba(168,85,247,.10) !important;
}



/* ===== Market product grid 3 columns ===== */
.market-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; align-items:start;}
@media (max-width: 991.98px){ .market-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width: 575.98px){ .market-grid{grid-template-columns:1fr;} }



/* ===== HOME hero final adjustments (ped under navbar, full height) ===== */
:root{--navH:86px;}
.home-hero-inner{align-items:flex-start;}
.home-hero-left{margin-top:96px; margin-left:clamp(18px, 4vw, 72px);}
.home-hero-right{
  top:var(--navH) !important;
  bottom:0 !important;
  right:-10px !important;
  width:56vw !important;
}
.home-hero-ped{
  height:calc(100vh - var(--navH)) !important;
  max-height:none !important;
}
@media (max-width: 991.98px){
  :root{--navH:72px;}
  .home-hero-left{margin-left:0; margin-top:28px;}
  .home-hero-right{top:auto !important; bottom:auto !important; right:auto !important; width:100% !important;}
  .home-hero-ped{height:auto !important; width:min(520px, 92vw) !important;}
}



/* ===== FAB click guarantee ===== */
.app-nav-fab{z-index:99999 !important; pointer-events:auto !important;}



/* ===== FIX5: FAB click + PED full-height right ===== */
.hero-ped-bg{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:46vw;
  max-width:820px;
  background:url(/assets/img/ped.png) no-repeat right center;
  background-size:contain;
  z-index:1;
  pointer-events:none;
  opacity:.92;
  filter: drop-shadow(0 70px 180px rgba(0,0,0,.65));
}
@media (max-width: 991.98px){
  .hero-ped-bg{display:none;}
}

/* Make decorative layers never eat clicks */
.page-bg, .bg-grid, .home-hero::before, .home-hero::after, .home-hero-right{
  pointer-events:none !important;
}

/* Ensure content above ped */
.home-hero-inner, .home-hero-left, .home-bottom-center{
  position:relative;
  z-index:5;
}

/* FAB must always be clickable */
.app-nav-fab{
  position:fixed !important;
  pointer-events:auto !important;
  z-index:999999 !important;
}
.app-nav-fab:hover{
  transform:translateY(-50%) !important;
}



/* ===== FIX6: Drawer animation + background blur + ensure FAB always clickable ===== */
.app-drawer-overlay{
  z-index:1000000 !important;
  background:rgba(0,0,0,.38) !important;
  backdrop-filter: blur(14px) !important;
  transition: opacity .35s ease, visibility .35s ease !important;
}
.app-drawer{
  z-index:1000001 !important;
  transform: translateX(110%) !important;
  transition: transform .35s cubic-bezier(.2,.9,.2,1), visibility .35s ease !important;
  will-change: transform;
}
.app-drawer.open{ transform: translateX(0) !important; }
.app-drawer-overlay.open{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
body.drawer-open .app-shell{ filter: blur(10px); }
body.drawer-open .powered-badge{ filter: blur(10px); opacity:.55; pointer-events:none; }

.app-nav-fab{
  z-index:1000002 !important;
  pointer-events:auto !important;
}

/* FIX6: ped full height right (use full-height sizing) */
.hero-ped-bg{
  top:0 !important;
  bottom:0 !important;
  height:100vh !important;
  right:0 !important;
  width:48vw !important;
  max-width:920px !important;
  background-position: right center !important;
  background-size: auto 100% !important;
}



/* ===== FIX7: Video background + FAB top-right + Home bottom center ===== */
.video-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
}
.video-bg-el{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translateZ(0);
  filter: brightness(.62) saturate(1.08) contrast(1.02);
}
.video-bg-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(168,85,247,.28), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(217,70,239,.18), transparent 40%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.62));
  mix-blend-mode: normal;
}

/* hide old orb background so video is visible */
.app-bg{ display:none !important; }

/* FAB: move toward top-right */
.app-nav-fab{
  top: 92px !important;
  right: 26px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Home bottom center block */
.home-bottom-center{
  position: fixed;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index: 20;
  pointer-events:none;
}
.home-copy{
  text-align:center;
}

/* Server status dot colors */
.home-status-pill{ pointer-events:none; }
.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; }
.status-dot--online{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }
.status-dot--offline{ background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.12); }
.status-dot--maintenance{ background:#facc15; box-shadow:0 0 0 4px rgba(250,204,21,.14); }



/* Ensure hero content above video */
.home-hero, .app-shell, .app-main { position: relative; z-index: 1; }