/* XYLO Eclipse V2.0 — additive presentation layer, 2026-11-02
   Brand extracted from official logo: #0A0414 #2E125F #4D229C #6E2DE3 #8C39FB #A64CF5
   No payment, order, wallet, key, permissions, or modal behaviour modified.
   Responsive layout is standalone CSS; no Tailwind runtime dependence.
*/
:root{
  color-scheme:dark;
  --xe-void:#0A0414;--xe-deep:#2E125F;--xe-royal:#4D229C;
  --xe-electric:#6E2DE3;--xe-neon:#8C39FB;--xe-glow:#A64CF5;
  --xe-panel:#130C20;--xe-panel-raised:#1C102D;--xe-panel-quiet:#100A1B;
  --xe-text:#F5F2FF;--xe-text-soft:#C8B8E8;--xe-text-muted:#A08BBF;
  --xe-border:rgba(165,91,248,.24);--xe-border-strong:rgba(166,76,245,.56);
  --xe-grad:linear-gradient(118deg,#4D229C 0%,#6E2DE3 50%,#A64CF5 100%);
  --xe-shadow:0 18px 54px rgba(0,0,0,.37);
  --xylo-accent-start:#6E2DE3;--xylo-accent-end:#A64CF5;
  --xylo-accent-rgb:110,45,227;--xylo-accent-end-rgb:166,76,245;
  --xylo-gradient:var(--xe-grad);--xylo-bg:var(--xe-void);
  --xylo-bg-soft:#100A1B;--xylo-surface:#130C20;--xylo-surface-2:#1C102D;
  --xylo-surface-3:#27173B;--xylo-text:var(--xe-text);
  --xylo-muted:#A08BBF;--xylo-border:var(--xe-border);
  --xylo-border-strong:var(--xe-border-strong);
  --xylo-tint-soft:rgba(110,45,227,.09);--xylo-tint:rgba(110,45,227,.18);
  --xylo-tint-strong:rgba(110,45,227,.3);--xylo-glow:0 0 24px rgba(166,76,245,.17);
  --vip-accent:#A64CF5;--vip-mag:#A64CF5;--vip-accent-rgb:110,45,227;
  --status-accent:#8C39FB;--status-accent-2:#6E2DE3;
}
html{background:#0A0414!important;scrollbar-color:#5A328B #0A0414;scroll-behavior:smooth}
body{min-width:0;background-color:#0A0414!important;background-image:
  radial-gradient(ellipse 740px 460px at 10% 2%,rgba(110,45,227,.19),transparent 72%),
  radial-gradient(ellipse 660px 440px at 92% 24%,rgba(166,76,245,.12),transparent 75%),
  radial-gradient(ellipse 680px 400px at 46% 85%,rgba(77,34,156,.13),transparent 78%),
  linear-gradient(180deg,#0A0414,#0B0616 64%,#0A0414)!important;
  color:var(--xe-text);background-attachment:scroll}
body,button,input,textarea,select{accent-color:#8C39FB}
::selection{background:#6E2DE3;color:#fff}
:focus-visible{outline:2px solid #A64CF5;outline-offset:3px}
:where(main,section,article,div){min-width:0}
:where(h1,h2,h3){text-wrap:balance;letter-spacing:-.025em}
:where(p,small,label){overflow-wrap:break-word}
:where(input,textarea,select){max-width:100%}
:where(img,video){max-width:100%}
a{transition:color .2s ease,border-color .2s ease,background-color .2s ease}

/* Navigation: compact, strong XYLO identity; existing routes + click handlers preserved. */
.glass-header.xv-roleParityHeader{
  background:linear-gradient(100deg,#130A23 0%,#0D0817 44%,#140B27 100%)!important;
  border:0!important;border-bottom:1px solid rgba(166,76,245,.32)!important;
  box-shadow:0 9px 36px rgba(0,0,0,.45),0 1px 0 rgba(180,105,255,.10) inset!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;isolation:isolate;
}
.glass-header.xv-roleParityHeader::after{content:"";height:2px;position:absolute;bottom:0;left:16%;width:68%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(166,76,245,.8),transparent);opacity:.7}
.xv-roleParityHeader .xv-headerRow{min-height:66px;max-width:1520px;margin-inline:auto}
.xv-menuControl{width:43px!important;height:43px!important;min-width:43px;border:1px solid rgba(166,76,245,.44)!important;border-radius:13px!important;background:#1A0E2D!important;box-shadow:0 0 0 1px rgba(180,116,255,.06) inset!important}
.xv-menuControl:hover{background:#281540!important;border-color:#A64CF5!important;box-shadow:0 0 17px rgba(166,76,245,.18)!important}
.xv-menuGlyph .xv-menuLine{background:#C48BFF!important}
.xv-topPill{background:transparent!important;border:0!important;box-shadow:none!important;padding-inline:5px!important;cursor:default}
.xv-brandMark,.xv-drawerLogo{width:44px!important;height:44px!important;min-width:44px;border-radius:13px!important;border:1px solid rgba(166,76,245,.38)!important;background:#1D1031!important;overflow:hidden;box-shadow:0 0 19px rgba(110,45,227,.15)}
.xv-brandMark img,.xv-drawerLogo img{width:100%;height:100%;object-fit:cover}
.xv-roleBrandTitle,.xv-publicBrandTitle,.xv-drawerBrandTitle{font-weight:900!important;letter-spacing:.035em;color:#F5F2FF!important}
.xv-roleBrandSub,.xv-publicBrandSub,.xv-drawerBrandSub{color:#C48BFF!important;letter-spacing:.14em}
.xv-centerTabs,.xv-centerTabsShell,.xv-headerTabs{border-color:var(--xe-border)!important}
.xv-centerTabs a:is(:hover,.active),.xv-headerTabs a:is(:hover,.active){color:#F5F2FF!important;background:#2B164B!important}
.xv-topPill:hover{box-shadow:none!important;background:transparent!important}
#drawer,.drawer,.drawer.glass{background:linear-gradient(165deg,#1A0D31,#0C0717 46%,#0A0612)!important;border-color:rgba(166,76,245,.27)!important;box-shadow:24px 0 56px rgba(0,0,0,.55)!important;backdrop-filter:none!important}
#drawer a.nav-item:is(:hover,.active,.is-active),#drawer .nav-item[aria-current="page"]{background:linear-gradient(90deg,rgba(110,45,227,.36),rgba(77,34,156,.11))!important;color:#F5E9FF!important;border-inline-start:3px solid #A64CF5!important;border-radius:10px!important}
#drawer .xv-drawerHead{border-bottom:1px solid var(--xe-border)}
.xv-drawerUtility,.xv-drawerDock{border-color:var(--xe-border)!important}

/* Shared content surfaces. Opaque: essential admin, sales, and checkout screens never need glass effects. */
main .glass,main .glass-card,main .section-card,main .xv-hub-card,
main .xv-nexus-card,main .xv-nexus-panel,main .xv73d-card,
main .xv73d-panel,main .xv74b-card,main .xv-status-card{
  background-color:#150D23!important;border-color:var(--xe-border)!important;
  box-shadow:var(--xe-shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
main :is(.glass,.glass-card,.section-card,.xv-nexus-card,.xv73d-card):hover{border-color:rgba(166,76,245,.36)!important}
main :is(h1,h2,h3){color:#F6F2FF}
main :is(.text-accent,.text-purple-300,.text-purple-400){color:#BC83FF!important}
main :is(.border-accent,.border-purple-500){border-color:#8C39FB!important}
main :is(.bg-accent,.bg-purple-600,.bg-purple-500){background:var(--xe-grad)!important;color:white!important}
main :is(button,a)[class*="bg-purple"]:hover{filter:brightness(1.12)}
main :is(a,button)[class*="rounded"]{transition:transform .2s ease,background .2s ease,border-color .2s ease,filter .2s ease,box-shadow .2s ease}
@media (hover:hover){main :is(a,button)[class*="rounded"]:not(:disabled):hover{transform:translateY(-1px)}}
main :is(a,button)[class*="rounded"]:active{transform:scale(.985)}
main :is(input,textarea,select):not([type="checkbox"]):not([type="radio"]){background-color:#10091C;color:#F5F2FF;border-color:rgba(166,76,245,.3);border-radius:11px}
main :is(input,textarea,select):focus{border-color:#8C39FB;box-shadow:0 0 0 3px rgba(110,45,227,.16)}
main table{border-color:rgba(166,76,245,.19)}
main thead{background:rgba(77,34,156,.20)}
main tr{border-color:rgba(166,76,245,.14)}
main table tbody tr:hover{background:rgba(110,45,227,.09)}
main .text-gray-400{color:#B4A5CD!important}
main .text-gray-300{color:#D3C8E5!important}

/* Home: solve desktop hero size structurally, not by hiding any content. */
body.xv-nexus-home main{padding-top:24px!important;padding-bottom:84px!important;overflow:clip}
body.xv-nexus-home main>section.max-w-6xl{max-width:1320px!important;width:min(100%,1320px);margin-inline:auto}
body.xv-nexus-home main>section:first-child .hero-card{
  padding:clamp(22px,3vw,43px)!important;min-height:0!important;
  background:linear-gradient(128deg,#1D1031 0%,#10091D 57%,#1B0C2D 100%)!important;
  border:1px solid rgba(166,76,245,.39)!important;border-radius:29px!important;
  box-shadow:0 28px 76px rgba(0,0,0,.49),0 0 0 1px rgba(110,45,227,.12) inset!important;
  isolation:isolate;
}
body.xv-nexus-home main>section:first-child .hero-card::before{background:
 radial-gradient(ellipse 700px 410px at 4% 0%,rgba(110,45,227,.35),transparent 70%),
 radial-gradient(ellipse 450px 380px at 94% 100%,rgba(166,76,245,.24),transparent 72%)!important;opacity:1}
body.xv-nexus-home .hero-card>.grid{display:grid!important;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr)!important;align-items:center!important;gap:clamp(22px,3vw,50px)!important}
body.xv-nexus-home .hero-card>.grid>div:first-child{min-width:0}
body.xv-nexus-home .hero-card h1{font-size:clamp(39px,4.2vw,72px)!important;line-height:1.025!important;letter-spacing:-.058em!important;max-width:720px;margin-top:19px!important;font-weight:900!important}
body.xv-nexus-home .hero-card p{font-size:clamp(14px,1.22vw,18px)!important;line-height:1.66!important;color:#C8B8E8!important;max-width:560px;margin-top:18px!important}
body.xv-nexus-home .hero-card .xv-home-kicker{font-size:11px!important;letter-spacing:.18em!important;color:#C995FF!important;font-weight:900}
body.xv-nexus-home .hero-card .trust-pill{font-size:12px!important;padding:8px 12px!important;max-width:100%;white-space:normal}
body.xv-nexus-home .hero-card .media-frame{
  aspect-ratio:1.36!important;max-height:397px;width:100%;border-radius:22px!important;
  background:#160A25!important;border:1px solid rgba(166,76,245,.4)!important;
  box-shadow:0 25px 65px rgba(0,0,0,.5),0 0 50px rgba(110,45,227,.16)!important;
  transform:perspective(850px) rotateY(-3deg);transform-origin:center;
}
body.xv-nexus-home .xv-eclipse-default-hero{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:200px;background:radial-gradient(ellipse at 50% 45%,#301456,#10091D 75%);overflow:hidden}
body.xv-nexus-home .xv-eclipse-default-hero img{width:100%;height:100%;object-fit:cover;opacity:.93;filter:saturate(1.05)}
body.xv-nexus-home .xv-eclipse-default-hero::after{content:"";position:absolute;inset:52% 0 0;background:linear-gradient(transparent,#080510cc);pointer-events:none}
body.xv-nexus-home .xv-eclipse-default-hero-caption{position:absolute;bottom:20px;left:22px;z-index:2;color:#fff;font-size:clamp(22px,3vw,40px);font-weight:950;letter-spacing:-.05em;text-shadow:0 4px 20px #0A0414}
body.xv-nexus-home .xv-eclipse-default-hero-caption small{display:block;color:#DEBEFF;font-size:10px;letter-spacing:.23em;font-weight:750}
@keyframes xyloEclipseGlow{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){body.xv-nexus-home .hero-card::before{animation:xyloEclipseGlow 9s ease-in-out infinite}}
body.xv-nexus-home .hero-card .media-frame img,
body.xv-nexus-home .hero-card .media-frame video{width:100%!important;height:100%!important;object-fit:cover!important}
body.xv-nexus-home .hero-card .btn-cta,
body.xv-nexus-home .home-promo-link,
body.xv-nexus-home .xv76g-primary-link{
  background:var(--xe-grad)!important;border:1px solid rgba(211,164,255,.28)!important;
  box-shadow:0 15px 35px rgba(110,45,227,.28)!important;border-radius:13px!important;
  color:white!important;font-weight:850!important
}
body.xv-nexus-home .hero-card .btn-cta:hover{box-shadow:0 18px 50px rgba(140,57,251,.38)!important}
body.xv-nexus-home .xv-eclipse-hero-actions{display:flex!important;align-items:center;flex-wrap:wrap;gap:10px!important;margin-top:24px!important;max-width:none!important}
body.xv-nexus-home .xv-eclipse-hero-actions>.btn-cta{width:auto!important;min-width:210px;padding:14px 23px!important;min-height:50px}
body.xv-nexus-home .xv-eclipse-alt-link{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:750;border:1px solid rgba(166,76,245,.5);color:#E7CBFF;background:#28153E;border-radius:13px;padding:14px 18px;min-height:50px;transition:background .2s ease,transform .2s ease}
body.xv-nexus-home .xv-eclipse-alt-link:hover{background:#392050;color:#fff;transform:translateY(-1px)}
body.xv-nexus-home .xv-eclipse-hero-bottom{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;color:#A995C5;font-size:11px;font-weight:650;letter-spacing:.03em}
body.xv-nexus-home .xv-eclipse-hero-bottom span{padding:7px 10px;border:1px solid rgba(166,76,245,.25);background:rgba(77,34,156,.16);border-radius:100px}
body.xv-nexus-home .xv76g-section{margin-top:clamp(28px,3.5vw,46px)!important}
body.xv-nexus-home .xv76g-section-title{font-size:clamp(25px,2.6vw,39px)!important;line-height:1.2!important;letter-spacing:-.04em!important;color:#FBF8FF!important}
body.xv-nexus-home .xv76g-section-head{display:flex!important;flex-direction:row!important;align-items:end!important;justify-content:space-between!important;gap:18px!important}
body.xv-nexus-home .xv76g-section-copy{font-size:14px!important;line-height:1.5!important;color:#BEADD5!important;max-width:660px}
body.xv-nexus-home .xv76g-section-kicker{color:#BB81FB!important;font-size:11px!important;letter-spacing:.12em!important}
body.xv-nexus-home .xv76g-secondary-link{color:#D1A4FF!important}
body.xv-nexus-home .benefit-glass,body.xv-nexus-home .section-surface{background:#140B22!important;border:1px solid var(--xe-border)!important;border-radius:23px!important;box-shadow:0 18px 54px rgba(0,0,0,.35)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.xv-nexus-home .home-featured-slide{flex:0 0 clamp(280px,31vw,400px)!important;width:clamp(280px,31vw,400px)!important;max-width:calc(100vw - 40px)!important;background:#160D25!important;border:1px solid var(--xe-border)!important;border-radius:19px!important;box-shadow:0 12px 28px rgba(0,0,0,.3)!important;transition:transform .22s ease,border-color .22s ease}
body.xv-nexus-home .home-featured-slide:hover{transform:translateY(-3px);border-color:#8C39FB!important}
body.xv-nexus-home .home-featured-carousel{aspect-ratio:16/10!important;max-height:220px!important;border-radius:15px!important}
body.xv-nexus-home .home-featured-track{gap:13px!important;padding-block:9px 14px!important}
body.xv-nexus-home .home-featured-meta{padding:13px!important}
body.xv-nexus-home #available-games>.mt-5.grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:13px!important}
body.xv-nexus-home .home-cat-card{min-width:0!important;background:linear-gradient(135deg,#211135,#150D21)!important;border:1px solid rgba(166,76,245,.27)!important;border-radius:17px!important;box-shadow:0 9px 20px rgba(0,0,0,.2)!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
body.xv-nexus-home .home-cat-card:hover{transform:translateY(-3px);border-color:#A64CF5!important;box-shadow:0 15px 33px rgba(110,45,227,.2)!important}
body.xv-nexus-home .home-cat-card>div:first-child{padding:15px!important}
body.xv-nexus-home .xv76g-benefit-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px}
body.xv-nexus-home .xv76g-benefit-card{background:linear-gradient(150deg,#221237,#10091A)!important;border:1px solid var(--xe-border)!important;border-radius:20px!important;box-shadow:0 12px 30px rgba(0,0,0,.25)!important;transition:transform .22s ease}
body.xv-nexus-home .xv76g-benefit-card:hover{transform:translateY(-3px)}
body.xv-nexus-home .xv76g-benefit-icon{background:#3B1A63!important;border:1px solid rgba(166,76,245,.4)!important;color:#D6AEFF!important}

/* Product/catalog/account/admin workflows share the same brand, preserving information and form semantics. */
.xv-nexus-shell .xv-nexus-hero{background:
 radial-gradient(550px 220px at 4% 6%,rgba(110,45,227,.29),transparent 77%),
 linear-gradient(120deg,#211136,#110A1D)!important;
 border:1px solid rgba(166,76,245,.35)!important;border-radius:24px!important;
 box-shadow:0 19px 52px rgba(0,0,0,.34)!important;padding:clamp(22px,3.5vw,40px)!important}
.xv-nexus-shell .xv-nexus-title{font-size:clamp(28px,3.5vw,48px)!important;letter-spacing:-.055em!important;line-height:1.1!important}
.xv-nexus-shell .xv-nexus-subtitle{color:#BDABD6!important}
.xv-catalog-main,.xv-nexus-main,body:has(.xv-catalog-main) main{max-width:1480px;margin-inline:auto}
.xv-catalog-main .xv-product-card,.xv-nexus-main .xv-nexus-card{border-radius:17px!important;overflow:hidden}
.xv73d-page{max-width:1390px!important;margin-inline:auto;color:var(--xe-text)}
.xv73d-hero{background:linear-gradient(135deg,#1C0F2F,#100A1B)!important;border-color:var(--xe-border)!important;border-radius:25px!important}
.xv73d-page :is(.xv73d-buy,.xv73d-primary,.xv73d-cta){background:var(--xe-grad)!important;color:#fff!important}
body.xylo-auth-page{background:
 radial-gradient(ellipse 680px 540px at 17% 10%,rgba(110,45,227,.3),transparent 73%),
 radial-gradient(ellipse 550px 490px at 92% 90%,rgba(166,76,245,.17),transparent 77%),#0A0414!important}
.xylo-auth-shell{max-width:1040px;margin-inline:auto}
.xylo-auth-page :is(.xylo-auth-card,.xylo-auth-panel,.auth-card){background:#150C24!important;border:1px solid rgba(166,76,245,.34)!important;box-shadow:0 25px 75px rgba(0,0,0,.42)!important;backdrop-filter:none!important}
.xylo-auth-page :is(.btn-primary,button[type="submit"]){background:var(--xe-grad)!important;color:white!important;border-radius:12px!important}
/* Admin: tighter content width, better operational hierarchy without changing workflows. */
body:has(.xv-adminHeader) main{max-width:1500px;margin-inline:auto;padding-inline:clamp(13px,2.5vw,32px)!important}
body:has(.xv-adminHeader) main :is(.glass,.rounded-2xl){border-color:var(--xe-border)}
body:has(.xv-adminHeader) main h1{font-size:clamp(25px,2.5vw,35px);letter-spacing:-.045em}
body:has(.xv-adminHeader) main :is(.xv-hub-tabs,.xv-nexus-tabs){background:#190F2A!important;border:1px solid var(--xe-border)!important;border-radius:15px!important}
body:has(.xv-adminHeader) main :is(.xv-hub-tabs a,.xv-hub-tabs button){border-radius:10px!important}
body:has(.xv-adminHeader) main :is(.xv-hub-tabs a.active,.xv-hub-tabs button.active){background:#5E27BF!important;color:white!important}
/* Consistent scrolling on narrow screens, especially existing tables. */
main .overflow-x-auto{scrollbar-width:thin;scrollbar-color:#6E2DE3 transparent}
main table{max-width:none}
/* Sidebar/backdrop layering preserved; don't change payment or buy modal z-index. */

/* Device-specific layouts, all implemented without runtime JS dependencies. */
@media(max-width:1023px){
 body.xv-nexus-home .hero-card>.grid{grid-template-columns:minmax(0,1fr)!important}
 body.xv-nexus-home .hero-card .media-frame{aspect-ratio:16/9!important;max-height:360px;transform:none}
 body.xv-nexus-home #available-games>.mt-5.grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body.xv-nexus-home .xv76g-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:639px){
 .xv-roleParityHeader .xv-headerRow{min-height:61px;padding-inline:12px!important}
 .xv-menuControl{width:39px!important;height:39px!important;min-width:39px}
 .xv-brandMark{width:37px!important;height:37px!important;min-width:37px!important}
 .xv-roleBrandTitle,.xv-publicBrandTitle{font-size:15px!important}
 body.xv-nexus-home main{padding:15px 12px 96px!important}
 body.xv-nexus-home main>section:first-child .hero-card{padding:20px!important;border-radius:22px!important}
 body.xv-nexus-home .hero-card h1{font-size:clamp(32px,8.5vw,45px)!important;letter-spacing:-.05em!important;line-height:1.06!important}
 body.xv-nexus-home .hero-card p{font-size:14px!important;margin-top:13px!important}
 body.xv-nexus-home .hero-card .trust-pill{font-size:11px!important}
 body.xv-nexus-home .hero-card>.grid{gap:22px!important}
 body.xv-nexus-home .hero-card .media-frame{aspect-ratio:16/10!important;max-height:260px!important}
 body.xv-nexus-home .xv-eclipse-hero-actions{gap:8px!important;margin-top:19px!important}
 body.xv-nexus-home .xv-eclipse-hero-actions>.btn-cta{width:100%!important;min-width:0!important}
 body.xv-nexus-home .xv-eclipse-alt-link{width:100%;min-height:43px;padding:10px 14px}
 body.xv-nexus-home .xv-eclipse-hero-bottom{margin-top:14px;gap:6px}
 body.xv-nexus-home .xv-eclipse-hero-bottom span{padding:5px 8px;font-size:10px}
 body.xv-nexus-home #available-games>.mt-5.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 body.xv-nexus-home .home-cat-card>div:first-child{padding:10px!important;gap:8px!important}
 body.xv-nexus-home .home-cat-card .w-12,body.xv-nexus-home .home-cat-card .md\:w-14{width:39px!important;height:39px!important}
 body.xv-nexus-home .home-cat-card .font-semibold{font-size:12px!important}
 body.xv-nexus-home .xv76g-benefit-grid{grid-template-columns:minmax(0,1fr)!important}
 body.xv-nexus-home .xv76g-section-head{align-items:flex-start!important}
 body.xv-nexus-home .xv76g-section-title{font-size:25px!important}
 body.xv-nexus-home .home-featured-slide{flex-basis:min(77vw,330px)!important;width:min(77vw,330px)!important}
 body.xv-nexus-home .home-featured-carousel{aspect-ratio:16/10!important}
 .xv-nexus-shell .xv-nexus-hero{padding:20px!important}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* XYLO v2.5.3 — CoreX-inspired PAGE CANVAS, NOT cards/panels.
   This file is already loaded by every role's existing navigation templates.
   No new stylesheet/import/CDN required. */
:root { --xylo-canvas-version: "2.5.3"; --xylo-canvas-base: #261832; }
html {
  background-color:#261832!important;
  background-image:linear-gradient(135deg,#31213E,#24172F)!important;
}
body {
  background-color:#261832!important;
  background-image:
    radial-gradient(ellipse 940px 690px at 0% 10%,rgba(129,74,190,.42),transparent 76%),
    radial-gradient(ellipse 950px 770px at 100% 48%,rgba(129,72,196,.36),transparent 77%),
    radial-gradient(ellipse 960px 620px at 38% 90%,rgba(100,49,151,.25),transparent 78%),
    linear-gradient(125deg,#2B1C3C 0%,#251730 52%,#2B193C 100%)!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
/* Many pages have an independently painted MAIN that hides the body background.
   Paint the page canvas on MAIN, too, without targeting cards or operational panels. */
body main {
  background-color:#261832!important;
  background-image:
    radial-gradient(ellipse 980px 750px at 0% 12%,rgba(129,74,190,.43),transparent 77%),
    radial-gradient(ellipse 890px 820px at 100% 45%,rgba(132,72,189,.34),transparent 77%),
    radial-gradient(ellipse 980px 710px at 37% 92%,rgba(100,51,157,.23),transparent 78%),
    linear-gradient(120deg,#2B1D3C,#24172F 50%,#2D1A40)!important;
  background-repeat:no-repeat!important;
  background-size:115% 115%,118% 118%,115% 115%,100% 100%!important;
  animation:xyloCanvasAmbient253 34s ease-in-out infinite alternate!important;
}
@keyframes xyloCanvasAmbient253 {
  0% {background-position:0% 0%,100% 38%,45% 100%,center;}
  100% {background-position:9% 6%,88% 50%,50% 92%,center;}
}
@media (max-width:767px) {
  body main {animation-duration:55s!important;background-size:135% 115%,140% 115%,135% 115%,100% 100%!important;}
}
@media (prefers-reduced-motion:reduce) {
  body main {animation:none!important;background-position:0% 0%,100% 38%,45% 100%,center!important;}
}