:root { color-scheme: dark; --noxus-purple:#a855f7; --noxus-violet:#7c3aed; --noxus-pink:#c026d3; --noxus-dark:#07020f; --noxus-silver:#d8d4e8; }
* { scrollbar-width: thin; scrollbar-color: rgba(168,85,247,.58) rgba(9,4,20,.8); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em; }
a { transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.noxus-grid { background-image: linear-gradient(rgba(168,85,247,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,.07) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at center, black, transparent 73%); }
.glass { border: 1px solid rgba(216,180,254,.13); background: linear-gradient(135deg, rgba(20,8,38,.82), rgba(5,2,11,.66)); box-shadow: 0 22px 75px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.035); backdrop-filter: blur(20px); }
.glow-card { position: relative; overflow: hidden; }
.glow-card::before { content:""; position:absolute; inset:-1px; background: radial-gradient(circle at var(--x,20%) var(--y,0%), rgba(168,85,247,.30), transparent 32%); opacity:.8; pointer-events:none; }
.glow-card::after { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.glow-card > * { position: relative; z-index: 1; }
.brand-word { color: #efe7ff; text-shadow: 0 0 18px rgba(168,85,247,.5), 0 2px 0 rgba(0,0,0,.7); }
.brand-mark { display:grid; place-items:center; height:3rem; width:3rem; border-radius:1rem; border:1px solid rgba(216,180,254,.25); background:radial-gradient(circle at 50% 30%,rgba(168,85,247,.24),rgba(0,0,0,.28)); box-shadow:0 0 35px rgba(168,85,247,.22); overflow:hidden; }
.navlink { display:inline-flex; align-items:center; min-height:2.75rem; border-radius:.95rem; padding:0 .9rem; color: rgb(203 213 225); font-size: .9rem; font-weight:800; }
.navlink:hover { color: #f3e8ff; background:rgba(168,85,247,.10); box-shadow: inset 0 0 0 1px rgba(168,85,247,.18), 0 0 24px rgba(168,85,247,.13); transform:translateY(-1px); }
.mobile-link { display: block; padding: .75rem 0; color: rgb(203 213 225); font-weight:800; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius: 1rem; padding: .78rem 1.1rem; font-weight: 950; color: #fff; background: linear-gradient(135deg,#7c3aed,#a855f7 55%,#c026d3); box-shadow: 0 0 30px rgba(168,85,247,.30), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; border:1px solid rgba(216,180,254,.24); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(168,85,247,.42), inset 0 1px 0 rgba(255,255,255,.25); filter:saturate(1.1); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:1px solid rgba(216,180,254,.13); border-radius: 1rem; padding:.74rem 1rem; color: rgb(226 232 240); background: rgba(255,255,255,.035); }
.btn-ghost:hover { border-color: rgba(168,85,247,.36); background: rgba(168,85,247,.11); transform: translateY(-1px); box-shadow:0 0 26px rgba(168,85,247,.12); }
.btn-danger { display:inline-flex; border-radius:1rem; padding:.7rem 1rem; font-weight:900; background:rgba(248,113,113,.15); border:1px solid rgba(248,113,113,.35); color:#fecaca; }
.input { width:100%; border-radius:1rem; border:1px solid rgba(216,180,254,.14); background:rgba(5,2,11,.72); padding:.85rem 1rem; color:#fff; outline:none; }
.input:focus { border-color: rgba(168,85,247,.62); box-shadow: 0 0 0 4px rgba(168,85,247,.10); }
.label { display:block; margin-bottom:.45rem; font-size:.85rem; color:rgb(203 213 225); font-weight:800; }
.table { width:100%; border-collapse: separate; border-spacing:0 .6rem; }
.table th { color:rgb(148 163 184); font-size:.75rem; text-transform:uppercase; text-align:left; padding:.4rem .8rem; }
.table td { background:rgba(20,8,38,.72); border-top:1px solid rgba(216,180,254,.10); border-bottom:1px solid rgba(216,180,254,.10); padding:.85rem .8rem; }
.table td:first-child { border-left:1px solid rgba(216,180,254,.10); border-radius:.9rem 0 0 .9rem; }
.table td:last-child { border-right:1px solid rgba(216,180,254,.10); border-radius:0 .9rem .9rem 0; }
.badge-online { border:1px solid rgba(74,222,128,.35); background:rgba(34,197,94,.12); color:#bbf7d0; }
.badge-offline { border:1px solid rgba(248,113,113,.35); background:rgba(248,113,113,.12); color:#fecaca; }
.badge-soft { border:1px solid rgba(168,85,247,.35); background:rgba(168,85,247,.12); color:#e9d5ff; }
.hero-shell { position:relative; overflow:hidden; border-radius:2rem; border:1px solid rgba(216,180,254,.16); background:linear-gradient(180deg,rgba(4,1,10,.16),rgba(4,1,10,.9)),url('/assets/img/noxus-hero.jpg') center/cover; box-shadow:0 25px 80px rgba(0,0,0,.42),0 0 80px rgba(126,58,237,.14); }
.hero-shell::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 51% 12%,rgba(168,85,247,.28),transparent 28%),linear-gradient(90deg,rgba(2,1,6,.7),transparent 42%,rgba(2,1,6,.58)); pointer-events:none; }
.hero-inner { position:relative; z-index:1; }
.logo-hero { filter: drop-shadow(0 0 24px rgba(168,85,247,.45)) drop-shadow(0 18px 35px rgba(0,0,0,.55)); }
.mode-card { min-height: 300px; background-size:cover; background-position:center; }
.mode-card .shade { background:linear-gradient(180deg,rgba(5,2,11,.20),rgba(5,2,11,.94)); }
.social-dot { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.85rem; border:1px solid rgba(216,180,254,.14); background:rgba(168,85,247,.10); color:#e9d5ff; font-weight:900; }
@keyframes floaty { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-10px)} }
.floaty { animation: floaty 5s ease-in-out infinite; }
.particle { position:absolute; width:5px; height:5px; border-radius:999px; background:rgba(168,85,247,.55); box-shadow:0 0 24px rgba(168,85,247,.95); animation: rise var(--t,9s) linear infinite; left:var(--l); bottom:-20px; opacity:.48; }
@keyframes rise { to { transform: translateY(-110vh) translateX(var(--x,0)); opacity:0; } }
@media (max-width: 640px) { .table { min-width: 760px; } .hero-shell{border-radius:1.5rem;} }


/* Noxus v6: fixed left sidebar, stronger void glow, cleaner responsive layout */
body { overflow-x:hidden; }
.void-aurora { pointer-events:none; background:
    radial-gradient(circle at 48% 8%, rgba(197,77,255,.42), transparent 20%),
    radial-gradient(circle at 20% 40%, rgba(139,92,246,.24), transparent 26%),
    radial-gradient(circle at 86% 28%, rgba(217,70,239,.20), transparent 24%),
    linear-gradient(180deg, rgba(4,1,10,.20), rgba(4,1,10,.72));
    mix-blend-mode: screen; opacity:.95; }
.void-aurora::before, .void-aurora::after { content:""; position:absolute; border-radius:9999px; filter: blur(42px); opacity:.62; animation:voidPulse 7s ease-in-out infinite; }
.void-aurora::before { width:38rem; height:38rem; left:32%; top:-12rem; background:rgba(168,85,247,.40); }
.void-aurora::after { width:24rem; height:24rem; right:4%; top:18%; background:rgba(192,38,211,.32); animation-delay: -2.4s; }
@keyframes voidPulse { 0%,100%{ transform:scale(1); opacity:.44; } 50%{ transform:scale(1.16); opacity:.82; } }
.particle { width:6px; height:6px; background:rgba(192,132,252,.78); box-shadow:0 0 34px rgba(196,71,255,1), 0 0 80px rgba(168,85,247,.46); opacity:.62; }
.noxus-grid { background-size: 38px 38px; opacity:.50; }

.site-sidebar { position:fixed; left:1rem; top:1rem; bottom:1rem; z-index:50; width:268px; display:flex; flex-direction:column; gap:1rem; border:1px solid rgba(216,180,254,.17); border-radius:2rem; background:linear-gradient(180deg, rgba(9,2,21,.88), rgba(5,1,12,.70)); box-shadow:0 25px 80px rgba(0,0,0,.52), 0 0 60px rgba(168,85,247,.20), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(26px); padding:1rem; overflow:hidden; }
.site-sidebar::before { content:""; position:absolute; inset:-30%; background:radial-gradient(circle at 50% 0%, rgba(168,85,247,.35), transparent 30%), radial-gradient(circle at 0% 42%, rgba(192,38,211,.18), transparent 26%); pointer-events:none; }
.site-sidebar > * { position:relative; z-index:1; }
.sidebar-brand { display:grid; gap:.65rem; place-items:center; padding:.75rem .45rem 1rem; border-bottom:1px solid rgba(216,180,254,.12); }
.sidebar-mark { display:grid; place-items:center; width:4.3rem; height:4.3rem; border-radius:1.35rem; background:radial-gradient(circle at 50% 24%, rgba(168,85,247,.30), rgba(0,0,0,.14)); box-shadow:0 0 46px rgba(168,85,247,.22); }
.sidebar-logo { width:100%; max-width:190px; filter:drop-shadow(0 0 20px rgba(168,85,247,.45)); }
.sidebar-nav { display:grid; gap:.55rem; }
.side-link { display:flex; align-items:center; gap:.75rem; min-height:3.15rem; border:1px solid rgba(216,180,254,.10); border-radius:1.1rem; padding:.55rem .7rem; color:#d9d4e9; font-weight:950; background:rgba(255,255,255,.035); }
.side-link:hover, .side-link:focus-visible { transform:translateX(4px); color:#fff; border-color:rgba(192,132,252,.36); background:linear-gradient(135deg,rgba(126,58,237,.24),rgba(192,38,211,.10)); box-shadow:0 0 36px rgba(168,85,247,.20); outline:none; }
.side-ico { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.75rem; background:rgba(168,85,247,.12); color:#e9d5ff; box-shadow:inset 0 0 0 1px rgba(216,180,254,.10); }
.sidebar-actions { margin-top:auto; display:grid; gap:.65rem; }
.sidebar-ip { display:grid; gap:.25rem; width:100%; text-align:left; border:1px solid rgba(216,180,254,.13); border-radius:1.15rem; background:rgba(0,0,0,.26); padding:.8rem; color:#f8f3ff; overflow:hidden; }
.sidebar-ip strong { font-size:.83rem; word-break:break-all; }
.mobile-topbar, .mobile-bottom-nav { display:none; }
.maintenance-banner { margin-left:300px; border-bottom:1px solid rgba(252,211,77,.20); background:rgba(251,191,36,.10); padding:.5rem 1rem; text-align:center; font-size:.875rem; font-weight:800; color:#fef3c7; }

.hero-shell { border-radius:2.25rem; background:linear-gradient(180deg,rgba(4,1,10,.08),rgba(4,1,10,.90)),url('/assets/img/noxus-hero.jpg') center/cover; box-shadow:0 34px 120px rgba(0,0,0,.55),0 0 130px rgba(168,85,247,.30), inset 0 0 0 1px rgba(255,255,255,.035); }
.hero-shell::before { background:radial-gradient(circle at 51% 6%,rgba(202,87,255,.56),transparent 25%), radial-gradient(circle at 18% 40%,rgba(126,58,237,.30),transparent 27%), radial-gradient(circle at 90% 28%,rgba(192,38,211,.26),transparent 26%), linear-gradient(90deg,rgba(2,1,6,.76),transparent 44%,rgba(2,1,6,.62)); }
.hero-shell::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 70%,rgba(168,85,247,.10)); box-shadow:inset 0 -80px 120px rgba(126,58,237,.14); }
.logo-hero { max-width:640px; filter: drop-shadow(0 0 32px rgba(198,91,255,.70)) drop-shadow(0 24px 55px rgba(0,0,0,.72)); }
.glass { border-color:rgba(216,180,254,.17); background:linear-gradient(135deg,rgba(20,8,38,.88),rgba(5,2,11,.72)); box-shadow:0 25px 85px rgba(0,0,0,.42), 0 0 46px rgba(168,85,247,.12), inset 0 1px 0 rgba(255,255,255,.045); }
.glow-card::before { background: radial-gradient(circle at var(--x,20%) var(--y,0%), rgba(192,132,252,.48), transparent 35%); opacity:.95; }
.mode-card { box-shadow:0 24px 55px rgba(0,0,0,.36), 0 0 28px rgba(168,85,247,.12); }
.mode-card:hover { transform:translateY(-6px); border-color:rgba(216,180,254,.35)!important; box-shadow:0 30px 70px rgba(0,0,0,.48),0 0 58px rgba(168,85,247,.25); }

@media (min-width: 1024px) {
  .site-main { max-width:min(1280px, calc(100vw - 332px)) !important; margin-left:300px !important; margin-right:24px !important; }
  .site-footer { margin-left:292px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-sidebar { width:86px; padding:.75rem; border-radius:1.55rem; }
  .sidebar-brand { padding:.45rem 0 .75rem; }
  .sidebar-mark { width:3.7rem; height:3.7rem; }
  .sidebar-logo, .side-text, .sidebar-ip span, .sidebar-ip strong, .sidebar-actions .btn-primary, .sidebar-actions .btn-ghost { display:none!important; }
  .side-link { justify-content:center; padding:.55rem; min-height:3rem; }
  .side-ico { width:2.15rem; height:2.15rem; }
  .sidebar-ip { height:3rem; padding:0; place-items:center; }
  .sidebar-ip::after { content:"IP"; color:#e9d5ff; font-weight:950; }
  .site-main { max-width:calc(100vw - 124px)!important; margin-left:112px!important; margin-right:16px!important; }
  .site-footer { margin-left:104px; }
  .maintenance-banner { margin-left:104px; }
  .hero-inner { padding-top:3rem!important; }
}
@media (max-width: 767px) {
  body { padding-bottom:86px; }
  .site-sidebar { display:none; }
  .mobile-topbar { position:sticky; top:0; z-index:45; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.72rem .9rem; border-bottom:1px solid rgba(216,180,254,.12); background:rgba(5,2,11,.80); backdrop-filter:blur(24px); box-shadow:0 16px 45px rgba(0,0,0,.35); }
  .mobile-bottom-nav { position:fixed; left:.75rem; right:.75rem; bottom:.75rem; z-index:60; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.25rem; border:1px solid rgba(216,180,254,.18); border-radius:1.35rem; background:rgba(7,2,17,.86); box-shadow:0 0 50px rgba(168,85,247,.22),0 16px 55px rgba(0,0,0,.55); backdrop-filter:blur(24px); padding:.45rem; }
  .mobile-bottom-nav a { display:grid; place-items:center; gap:.16rem; min-height:3.25rem; border-radius:1rem; color:#d8d0ec; font-size:.68rem; font-weight:900; }
  .mobile-bottom-nav a:hover { background:rgba(168,85,247,.15); color:#fff; }
  .mobile-bottom-nav span { font-size:1.05rem; line-height:1; color:#e9d5ff; }
  .site-main { padding-left:.85rem!important; padding-right:.85rem!important; padding-top:1rem!important; }
  .site-footer { margin-bottom:5.75rem; }
  .maintenance-banner { margin-left:0; }
  .hero-shell { border-radius:1.45rem; }
  .hero-inner { padding:2.25rem 1rem!important; }
  .logo-hero { max-width:92%; }
  .hero-shell [class*="tracking-[.34em]"] { letter-spacing:.16em!important; font-size:.65rem!important; }
  .btn-primary, .btn-ghost { width:100%; }
  .mode-card { min-height:260px; }
  .glass.rounded-\[2rem\] { border-radius:1.35rem!important; padding:1rem!important; }
  .table { min-width: 760px; }
}
@media (max-width: 430px) {
  .mobile-bottom-nav b { font-size:.62rem; }
  .mobile-bottom-nav a { min-height:3rem; }
  .hero-shell .text-2xl { font-size:1.35rem!important; }
  .hero-shell .md\:text-4xl { font-size:1.65rem!important; }
}


/* Noxus v8: slimmer animated left rail + stronger premium mode visuals */
:root { --sidebar-w: 96px; --sidebar-gap: 18px; }
.site-sidebar {
  width: var(--sidebar-w) !important;
  left: var(--sidebar-gap) !important;
  top: 1.25rem !important;
  bottom: 1.25rem !important;
  padding: .72rem .55rem !important;
  gap: .72rem !important;
  border-radius: 1.65rem !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(202,87,255,.24), transparent 30%),
    linear-gradient(180deg, rgba(8,2,19,.88), rgba(3,1,9,.68)) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.55),
    0 0 52px rgba(168,85,247,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  will-change: transform, box-shadow;
  transition: transform .16s ease-out, box-shadow .25s ease;
}
.site-sidebar::before {
  inset: -12% -55% !important;
  background:
    linear-gradient(180deg, transparent, rgba(168,85,247,.20), transparent),
    radial-gradient(circle at 50% 18%, rgba(232,121,249,.36), transparent 28%) !important;
  animation: sidebarGlowSweep 4.8s ease-in-out infinite;
}
.site-sidebar::after {
  content:"";
  position:absolute;
  left: 0;
  top: 6.8rem;
  width: 3px;
  height: 4.8rem;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #d8b4fe, #a855f7, transparent);
  box-shadow: 0 0 22px rgba(192,132,252,.95), 0 0 54px rgba(168,85,247,.55);
  animation: navEnergyTrack 5.7s ease-in-out infinite;
}
@keyframes sidebarGlowSweep { 0%,100%{ opacity:.58; transform:translateY(-6%);} 50%{ opacity:1; transform:translateY(8%);} }
@keyframes navEnergyTrack { 0%,100%{ transform:translateY(0); opacity:.58;} 50%{ transform:translateY(145px); opacity:1;} }
.sidebar-brand {
  padding: .35rem 0 .55rem !important;
  border-bottom: 1px solid rgba(216,180,254,.10) !important;
}
.sidebar-mark { width: 3.65rem !important; height: 3.65rem !important; border-radius: 1.2rem !important; }
.sidebar-logo { display:none !important; }
.sidebar-nav { gap: .58rem !important; }
.side-link, .side-mini {
  position: relative;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.28rem !important;
  min-height: 4.1rem !important;
  width: 100%;
  padding: .44rem .25rem !important;
  border-radius: 1.05rem !important;
  border: 1px solid rgba(216,180,254,.09) !important;
  background: rgba(255,255,255,.028) !important;
  color: #d8d0ec !important;
  text-align:center;
  overflow:hidden;
}
.side-link::before, .side-mini::before {
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: .85rem;
  background: radial-gradient(circle at 50% 20%, rgba(168,85,247,.24), transparent 60%);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.side-link:hover, .side-link.is-active, .side-mini:hover {
  transform: translateX(5px) scale(1.03) !important;
  border-color: rgba(216,180,254,.32) !important;
  background: linear-gradient(180deg, rgba(126,58,237,.30), rgba(168,85,247,.10)) !important;
  box-shadow: 0 0 34px rgba(168,85,247,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.side-link:hover::before, .side-link.is-active::before, .side-mini:hover::before { opacity:1; transform:scale(1.08); }
.side-ico {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: .9rem !important;
  font-size: 1.12rem;
  background: radial-gradient(circle at 50% 20%, rgba(216,180,254,.34), rgba(126,58,237,.13)) !important;
  box-shadow: inset 0 0 0 1px rgba(216,180,254,.16), 0 0 24px rgba(168,85,247,.14) !important;
  z-index:1;
}
.side-text {
  position:relative;
  z-index:1;
  max-width: 4.5rem;
  color:#f3e8ff;
  font-size:.62rem !important;
  line-height:1.05;
  font-weight:950;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.sidebar-actions {
  margin-top: auto !important;
  display:grid !important;
  gap:.48rem !important;
}
.side-mini { min-height: 3.3rem !important; cursor:pointer; }
.side-mini .side-ico { width:2rem !important; height:2rem !important; font-size:.95rem; }
.side-mini .side-text { font-size:.57rem !important; }
.site-main { transition: margin .18s ease, max-width .18s ease; }
.mode-card {
  min-height: 352px !important;
  border-color: rgba(216,180,254,.18) !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.48), 0 0 38px rgba(168,85,247,.18), inset 0 0 0 1px rgba(255,255,255,.03) !important;
  transform: translateZ(0);
}
.mode-card .shade {
  min-height: 352px !important;
  background:
    linear-gradient(180deg, rgba(6,1,14,.06) 0%, rgba(6,1,14,.36) 43%, rgba(3,1,8,.96) 100%),
    radial-gradient(circle at 50% 0%, rgba(168,85,247,.18), transparent 50%) !important;
}
.mode-card h3 { text-shadow: 0 0 20px rgba(168,85,247,.6), 0 2px 0 rgba(0,0,0,.7); }
.mode-card:hover { transform: translateY(-8px) scale(1.015) !important; }
.void-aurora { opacity: 1 !important; }
.void-aurora::before { background: rgba(192,71,255,.56) !important; filter: blur(50px) !important; }
.void-aurora::after { background: rgba(168,85,247,.48) !important; filter: blur(48px) !important; }
.hero-shell { box-shadow: 0 34px 120px rgba(0,0,0,.58),0 0 155px rgba(168,85,247,.39), inset 0 0 0 1px rgba(255,255,255,.04) !important; }
.hero-shell::before { background: radial-gradient(circle at 51% 7%,rgba(221,104,255,.66),transparent 25%), radial-gradient(circle at 17% 42%,rgba(126,58,237,.36),transparent 26%), radial-gradient(circle at 91% 25%,rgba(192,38,211,.32),transparent 25%), linear-gradient(90deg,rgba(2,1,6,.74),transparent 44%,rgba(2,1,6,.62)) !important; }
@media (min-width: 1024px) {
  .site-main { max-width: min(1320px, calc(100vw - 145px)) !important; margin-left: 124px !important; margin-right: 22px !important; }
  .site-footer { margin-left: 116px !important; }
  .maintenance-banner { margin-left: 116px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --sidebar-w: 82px; --sidebar-gap: 12px; }
  .site-sidebar { width: 82px !important; padding:.55rem .42rem !important; border-radius:1.35rem !important; }
  .sidebar-mark { width:3.2rem !important; height:3.2rem !important; }
  .side-link { min-height:3.7rem !important; }
  .side-ico { width:2rem !important; height:2rem !important; }
  .side-text { font-size:.54rem !important; max-width:3.6rem; }
  .sidebar-actions { display:none !important; }
  .site-main { max-width: calc(100vw - 110px)!important; margin-left: 102px!important; margin-right:12px!important; }
  .site-footer { margin-left: 94px !important; }
  .maintenance-banner { margin-left:94px !important; }
  .mode-card, .mode-card .shade { min-height: 320px !important; }
}
@media (max-width: 767px) {
  .mode-card, .mode-card .shade { min-height: 300px !important; }
  .mobile-topbar { background: rgba(5,2,11,.86) !important; box-shadow: 0 0 42px rgba(168,85,247,.20), 0 18px 48px rgba(0,0,0,.42) !important; }
  .mobile-bottom-nav { box-shadow: 0 0 62px rgba(168,85,247,.31), 0 16px 55px rgba(0,0,0,.58) !important; }
}

/* Noxus v9: centered layout, hologram logo, legal center */
.hero-logo-wrap {
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: 1rem 1.25rem;
}
.hero-logo-wrap::before,
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 14% 10%;
  border-radius: 999px;
  pointer-events: none;
}
.hero-logo-wrap::before {
  background: radial-gradient(circle at 50% 48%, rgba(216,180,254,.22), transparent 45%),
              linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  filter: blur(34px);
  opacity: .95;
}
.hero-logo-wrap::after {
  inset: auto 12% -2px;
  height: 18px;
  background: linear-gradient(90deg, transparent, rgba(192,132,252,.55), rgba(216,180,254,.85), rgba(192,132,252,.55), transparent);
  box-shadow: 0 0 18px rgba(216,180,254,.45);
  filter: blur(1px);
}
.logo-holo {
  position: relative;
  z-index: 2;
  filter: brightness(1.16) contrast(1.12) saturate(1.05)
          drop-shadow(0 2px 0 rgba(255,255,255,.22))
          drop-shadow(0 8px 18px rgba(0,0,0,.55))
          drop-shadow(0 0 20px rgba(216,180,254,.28))
          drop-shadow(0 0 54px rgba(168,85,247,.22));
  animation: holoPulse 5.8s ease-in-out infinite;
}
@keyframes holoPulse {
  0%,100% { transform: translateY(0) scale(1); filter: brightness(1.16) contrast(1.12) saturate(1.05) drop-shadow(0 2px 0 rgba(255,255,255,.22)) drop-shadow(0 8px 18px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(216,180,254,.28)) drop-shadow(0 0 54px rgba(168,85,247,.22)); }
  50% { transform: translateY(-2px) scale(1.01); filter: brightness(1.2) contrast(1.15) saturate(1.08) drop-shadow(0 2px 0 rgba(255,255,255,.26)) drop-shadow(0 10px 20px rgba(0,0,0,.58)) drop-shadow(0 0 28px rgba(216,180,254,.38)) drop-shadow(0 0 70px rgba(168,85,247,.28)); }
}
.legal-card {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.legal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(168,85,247,.18), transparent 34%);
  pointer-events: none;
}
.legal-card:hover {
  transform: translateY(-7px);
  border-color: rgba(216,180,254,.22) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.38), 0 0 36px rgba(168,85,247,.16);
}
.legal-icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(216,180,254,.16);
  background: linear-gradient(180deg, rgba(147,51,234,.32), rgba(91,33,182,.12));
  color: #f5e9ff;
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 26px rgba(168,85,247,.16);
}
.footer-logo-glow { filter: drop-shadow(0 0 20px rgba(168,85,247,.25)); }
.legal-prose p, .legal-prose li { color: #cbd5e1; line-height: 1.8; }
.legal-prose h2 { margin-top: 2rem; margin-bottom: .8rem; font-size: 1.32rem; font-weight: 900; color: #f3e8ff; }
.legal-prose ul { list-style: disc; margin-left: 1.25rem; }
.legal-prose .doc-box { border: 1px solid rgba(216,180,254,.12); border-radius: 1.4rem; background: rgba(255,255,255,.03); padding: 1.2rem 1.2rem; }
@media (min-width: 1024px) {
  .site-main {
    max-width: min(1320px, calc(100vw - 244px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .site-footer,
  .maintenance-banner {
    margin-left: 122px !important;
    margin-right: 122px !important;
  }
}
@media (min-width: 1280px) {
  .site-main {
    max-width: min(1360px, calc(100vw - 270px)) !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-main {
    max-width: calc(100vw - 140px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .site-footer,
  .maintenance-banner {
    margin-left: 98px !important;
    margin-right: 16px !important;
  }
}
@media (max-width: 767px) {
  .hero-logo-wrap { padding: .45rem .2rem; }
  .legal-card { min-height: auto; }
}

/* Noxus v10: real mobile integration + PHP hosting hotfix release */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  body {
    padding-bottom: 92px !important;
    background-color: #05020b !important;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -35;
    background:
      radial-gradient(circle at 50% 2%, rgba(192,71,255,.32), transparent 29%),
      radial-gradient(circle at 15% 18%, rgba(126,34,206,.22), transparent 32%),
      radial-gradient(circle at 85% 28%, rgba(168,85,247,.18), transparent 34%),
      linear-gradient(180deg, rgba(3,1,8,.72), rgba(5,2,11,.96));
    pointer-events: none;
  }
  .mobile-topbar {
    position: fixed !important;
    top: .65rem !important;
    left: .75rem !important;
    right: .75rem !important;
    z-index: 75 !important;
    display: flex !important;
    min-height: 4.15rem;
    border: 1px solid rgba(216,180,254,.18) !important;
    border-radius: 1.35rem !important;
    background: linear-gradient(135deg, rgba(9,3,20,.88), rgba(16,5,34,.76)) !important;
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow: 0 0 38px rgba(168,85,247,.24), 0 16px 50px rgba(0,0,0,.55) !important;
  }
  .mobile-topbar img:first-child { height: 2.6rem !important; width: 2.6rem !important; }
  .mobile-topbar img:last-child { max-width: 132px !important; height: 2.35rem !important; }
  .mobile-topbar button {
    white-space: nowrap;
    border-radius: 1rem !important;
    background: linear-gradient(135deg, rgba(168,85,247,.28), rgba(91,33,182,.16)) !important;
    box-shadow: 0 0 24px rgba(168,85,247,.18);
  }
  .site-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5.7rem .78rem 1rem !important;
  }
  .site-footer {
    margin: 1.25rem .78rem 6.2rem !important;
    border: 1px solid rgba(216,180,254,.12);
    border-radius: 1.55rem;
    overflow: hidden;
    background: rgba(5,2,11,.84) !important;
  }
  .site-footer .max-w-7xl { padding-left: 1rem !important; padding-right: 1rem !important; }
  .mobile-bottom-nav {
    left: .6rem !important;
    right: .6rem !important;
    bottom: .65rem !important;
    z-index: 80 !important;
    gap: .28rem !important;
    padding: .42rem !important;
    border-radius: 1.35rem !important;
    background: linear-gradient(135deg, rgba(9,3,20,.91), rgba(16,5,34,.82)) !important;
    border-color: rgba(216,180,254,.20) !important;
  }
  .mobile-bottom-nav a {
    min-height: 3.35rem !important;
    border-radius: 1rem !important;
    font-size: .62rem !important;
    color: #ddd6fe !important;
  }
  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a:focus {
    background: rgba(168,85,247,.16) !important;
    box-shadow: inset 0 0 0 1px rgba(216,180,254,.12), 0 0 18px rgba(168,85,247,.18);
  }
  .mobile-bottom-nav span { font-size: 1rem !important; }
  .hero-shell {
    margin-top: .1rem !important;
    margin-bottom: 1.8rem !important;
    border-radius: 1.45rem !important;
    overflow: hidden !important;
    background-position: center top !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 76px rgba(168,85,247,.28) !important;
  }
  .hero-shell::before {
    background:
      radial-gradient(circle at 50% 0%, rgba(221,104,255,.48), transparent 30%),
      linear-gradient(180deg, rgba(3,1,8,.18), rgba(3,1,8,.86) 72%, rgba(3,1,8,.96)) !important;
  }
  .hero-inner { padding: 2.25rem .86rem 1.05rem !important; }
  .hero-logo-wrap { display: flex !important; width: 100%; padding: .2rem 0 .8rem !important; }
  .logo-hero, .logo-holo { width: 92vw !important; max-width: 345px !important; }
  .hero-shell .inline-flex.rounded-full {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.45;
    letter-spacing: .12em !important;
    padding: .58rem .85rem !important;
  }
  .hero-shell .max-w-3xl {
    width: 100% !important;
    margin-top: 1.1rem !important;
    border-radius: 1.25rem !important;
    padding: .9rem !important;
    background: rgba(5,2,11,.72) !important;
  }
  .hero-shell .text-left { text-align: center !important; }
  .hero-shell .text-2xl,
  .hero-shell .md\:text-4xl {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }
  .hero-shell .copy-btn { width: 100% !important; padding: .92rem 1rem !important; border-radius: 1rem !important; }
  .hero-shell .mt-4.flex.flex-wrap { justify-content: center !important; gap: .45rem !important; }
  .hero-shell .mt-4.flex.flex-wrap span { font-size: .68rem !important; padding: .42rem .58rem !important; }
  .hero-shell .mt-6.flex { display: grid !important; grid-template-columns: 1fr !important; gap: .7rem !important; }
  .hero-shell .btn-primary,
  .hero-shell .btn-ghost { min-width: 0 !important; width: 100% !important; padding: .92rem 1rem !important; }
  .hero-shell .mt-10.grid { grid-template-columns: 1fr 1fr !important; gap: .7rem !important; margin-top: 1rem !important; }
  .hero-shell .mt-10.grid .glass { border-radius: 1.15rem !important; padding: .85rem !important; }
  .hero-shell .mt-10.grid .text-4xl,
  .hero-shell .mt-10.grid .text-3xl { font-size: 1.28rem !important; }
  section.py-8 { padding-top: 1.3rem !important; padding-bottom: 1.3rem !important; }
  section h2, #duyurular h2 { font-size: 1.45rem !important; line-height: 1.2 !important; letter-spacing: .10em !important; }
  section p { font-size: .86rem; }
  .mode-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: .85rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .3rem .1rem 1rem !important;
    margin-left: -.15rem;
    margin-right: -.15rem;
  }
  .mode-grid::-webkit-scrollbar { height: 4px; }
  .mode-grid::-webkit-scrollbar-thumb { background: rgba(168,85,247,.5); border-radius: 999px; }
  .mode-card {
    flex: 0 0 min(82vw, 330px) !important;
    min-height: 335px !important;
    border-radius: 1.35rem !important;
    scroll-snap-align: center;
    background-position: center !important;
  }
  .mode-card .shade {
    min-height: 335px !important;
    padding: 1.05rem !important;
    border-radius: 1.35rem !important;
  }
  .mode-card h3 { font-size: 1.55rem !important; }
  .mode-card p { min-height: auto !important; font-size: .86rem !important; line-height: 1.55 !important; }
  #duyurular {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
  }
  #duyurular .glass, .glass.rounded-\[2rem\] {
    border-radius: 1.35rem !important;
    padding: 1rem !important;
  }
  #duyurular .flex.items-center.justify-between {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  #duyurular .md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  #duyurular article { border-radius: 1.05rem !important; padding: .85rem !important; }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: .7rem !important;
  }
  .stats-grid .glass { border-radius: 1.15rem !important; padding: .9rem .6rem !important; }
  .stats-grid .text-3xl { font-size: 1.45rem !important; }
  .legal-card { border-radius: 1.25rem !important; padding: 1rem !important; }
  .legal-icon { width: 3rem !important; height: 3rem !important; border-radius: 1rem !important; }
  .legal-prose .doc-box { padding: 1rem !important; border-radius: 1.1rem !important; }
  .legal-prose h2 { font-size: 1.12rem !important; }
  .legal-prose p, .legal-prose li { font-size: .9rem; line-height: 1.75; }
}
@media (max-width: 390px) {
  .mobile-topbar { left: .5rem !important; right: .5rem !important; }
  .mobile-topbar img:last-child { max-width: 112px !important; }
  .mobile-topbar button { font-size: .65rem !important; padding: .48rem .62rem !important; }
  .site-main { padding-left: .58rem !important; padding-right: .58rem !important; }
  .mode-card { flex-basis: 86vw !important; }
  .hero-shell .mt-10.grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
}