*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --vxd-bg:#000;
  --vxd-fg:#EEE;
  --vxd-primary:#00F5FF;
  --vxd-nav-bg:#111;
  --vxd-nav-fg:#EEE;
  --vxd-nav-border:rgba(255,255,255,0.06);
  --vxd-popup-bg:rgba(18,18,18,0.97);
  --vxd-popup-fg:#EEE;
  --vxd-popup-border:rgba(255,255,255,0.15);
  --vxd-popup-hover-bg:rgba(255,255,255,0.12);
  --vxd-popup-hover-fg:#E8C547;
  --vxd-accent:#00F5FF;
  --vxd-accent-strong:#E8C547;
  --vxd-radius:10px;
  --vxd-elev:0 10px 40px rgba(0,0,0,0.15);
}

body{
  background:var(--vxd-bg);
  color:var(--vxd-fg);
  font-family:Segoe UI,Roboto,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background .35s ease,color .35s ease;
}

a{
  color:var(--vxd-primary);
  text-decoration:none;
  transition:.25s;
}
a:hover{
  color:var(--vxd-accent-strong);
  text-shadow:0 0 6px var(--vxd-accent);
}

:focus-visible{
  outline:2px dashed var(--vxd-primary);
  outline-offset:4px;
}

.vxd-header{
  width:100%;
  background:var(--vxd-nav-bg);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 18px;
  border-bottom:1px solid var(--vxd-nav-border);
  position:sticky;
  top:0;
  z-index:10000;
  transition:background .25s,border-color .25s;
}

.vxd-logo{
  height:42px;
  cursor:pointer;
  transition:.25s;
}
.vxd-logo:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 0 12px var(--vxd-primary));
}

.vxd-nav{
  display:flex;
  align-items:center;
  gap:22px;
}
.vxd-nav>a,
.vxd-dropdown>span{
  font-size:16px;
  font-weight:500;
  padding:8px 3px;
  border-bottom:2px solid transparent;
  transition:.25s;
  color:var(--vxd-nav-fg);
}
.vxd-nav>a:hover,
.vxd-dropdown:hover>span{
  border-color:var(--vxd-primary);
  color:var(--vxd-primary);
}

.vxd-dropdown{position:relative}
.vxd-dropdown-menu{
  position:absolute;
  top:42px;
  left:0;
  border-radius:var(--vxd-radius);
  padding:10px 0;
  min-width:190px;
  max-width:260px;
  display:none;
  flex-direction:column;
  z-index:99999!important;
  backdrop-filter:blur(12px) saturate(1.05);
  box-shadow:var(--vxd-elev);
  overflow:visible!important;
  word-wrap:break-word;
  white-space:normal;
  background:var(--vxd-popup-bg);
  color:var(--vxd-popup-fg);
  border:1px solid var(--vxd-popup-border);
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:transform .22s,opacity .22s;
  animation:vxdDropFade .22s cubic-bezier(.2,.9,.3,1.2);
}

.vxd-dropdown.open .vxd-dropdown-menu{
  display:flex!important;
  opacity:1;
  transform:translateY(0) scale(1);
}
.vxd-dropdown-menu.flip{left:auto!important;right:0!important}

.vxd-dropdown-menu a{
  padding:9px 18px;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  border-radius:6px;
  margin:2px 8px;
  color:inherit;
  transition:background .18s,color .18s,transform .12s;
}
.vxd-dropdown-menu a:hover{
  background:var(--vxd-popup-hover-bg)!important;
  color:var(--vxd-popup-hover-fg)!important;
  transform:translateX(4px);
  font-weight:700;
  box-shadow:0 0 6px var(--vxd-primary);
}

.vxd-mobile-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
  color:var(--vxd-nav-fg);
}

@media(max-width:900px){
  .vxd-nav{display:none}
  .vxd-mobile-toggle{display:block}
}

.vxd-mobile-panel{
  position:fixed;
  top:0;
  right:-300px;
  width:280px;
  max-width:90vw;
  height:100vh;
  background:var(--vxd-nav-bg)!important;
  color:var(--vxd-nav-fg)!important;
  border-left:1px solid var(--vxd-nav-border)!important;
  padding:20px;
  transition:right .35s ease;
  z-index:99999!important;
  box-shadow:-10px 0 50px rgba(0,0,0,0.9);
  overflow-y:auto;
  overflow-x:hidden;
  backdrop-filter:blur(10px) saturate(1.1);
}
.vxd-mobile-panel.open{right:0}
.vxd-mobile-panel a{
  color:var(--vxd-nav-fg)!important;
  font-weight:600;
}
.vxd-mobile-panel a:hover{
  color:var(--vxd-primary)!important;
  text-shadow:0 0 4px var(--vxd-primary);
}

#vxd-theme-switch,
.vxd-theme-mobile{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  z-index:99999;
}

#vxd-theme-switch button,
.vxd-theme-mobile button{
  background:#111;
  border:1px solid #444;
  color:var(--vxd-primary);
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.25s;
}
#vxd-theme-switch button:hover,
.vxd-theme-mobile button:hover{
  border-color:var(--vxd-accent-strong);
  color:var(--vxd-accent-strong);
}
#vxd-theme-switch button.active,
.vxd-theme-mobile button.active{
  background:linear-gradient(45deg,var(--vxd-primary),var(--vxd-accent-strong));
  color:#000;
  border-color:var(--vxd-accent-strong);
  box-shadow:0 0 12px var(--vxd-primary);
}

.vxd-popup,
dialog.vxd-popup,
.modal.vxd-popup,
.vxd-dialog{
  max-width:720px!important;
  width:calc(100% - 80px)!important;
  min-width:320px!important;
  margin:0 auto!important;
  padding:28px!important;
  border-radius:20px!important;
  background:var(--vxd-popup-bg)!important;
  backdrop-filter:blur(20px) saturate(1.2)!important;
  box-shadow:var(--vxd-elev);
  color:var(--vxd-popup-fg)!important;
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%) scale(1)!important;
  border:1px solid var(--vxd-popup-border)!important;
  z-index:999999!important;
  overflow:hidden!important;
  animation:vxdPopupEnter .45s cubic-bezier(.175,.885,.32,1.275) forwards!important;
}
.vxd-popup h1,
.vxd-popup h2{
  font-weight:800;
  color:var(--vxd-popup-fg)!important;
  margin-bottom:12px;
  letter-spacing:-.35px;
}
.vxd-popup button{
  background:linear-gradient(135deg,var(--vxd-accent),var(--vxd-accent-strong));
  color:#000;
  padding:10px 16px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}


/* POPUP ULTRA V2: BASE */
.vxd-dropdown-menu{
  position:absolute;
  top:42px;
  left:0;
  display:none;
  flex-direction:column;
  min-width:190px;
  max-width:260px;
  padding:10px 0;
  border-radius:12px;
  backdrop-filter:blur(14px) saturate(1.1);
  transform:translateY(6px) scale(.97);
  opacity:0;
  transition:transform .22s ease,opacity .22s ease;
  z-index:99999!important;
}

.vxd-dropdown.open .vxd-dropdown-menu{
  display:flex!important;
  transform:translateY(0) scale(1);
  opacity:1;
}

.vxd-dropdown-menu a{
  display:block;
  padding:10px 18px;
  margin:2px 8px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  transition:background .18s, color .18s, transform .18s;
}

/* ========================================= */
/* ALBA — Velvet Ivory Gold                  */
/* ========================================= */
.theme-alba .vxd-dropdown-menu{
  background:linear-gradient(135deg,rgba(255,255,245,0.92),rgba(248,240,225,0.96));
  border:1px solid rgba(200,150,80,0.32);
  box-shadow:
    0 10px 32px rgba(200,150,80,0.15),
    inset 0 0 8px rgba(255,255,240,0.4);
}
.theme-alba .vxd-dropdown-menu a{
  color:#4a3928;
}
.theme-alba .vxd-dropdown-menu a:hover{
  background:rgba(200,150,80,0.32);
  color:#000;
  transform:translateX(6px);
}

/* ========================================= */
/* GIORNO — Fresh Green Glass                */
/* ========================================= */
.theme-giorno .vxd-dropdown-menu{
  background:linear-gradient(135deg,rgba(250,255,250,0.95),rgba(236,254,240,0.92));
  border:1px solid rgba(45,134,45,0.32);
  box-shadow:
    0 10px 30px rgba(45,134,45,0.15),
    inset 0 0 6px rgba(255,255,255,0.5);
}
.theme-giorno .vxd-dropdown-menu a{
  color:#1a4d1a;
}
.theme-giorno .vxd-dropdown-menu a:hover{
  background:rgba(45,134,45,0.32);
  color:#000;
  transform:translateX(6px);
}

/* ========================================= */
/* SERA — Blue Slate Reflective Film         */
/* ========================================= */
.theme-sera .vxd-dropdown-menu{
  background:linear-gradient(140deg,rgba(20,28,40,0.92),rgba(36,48,70,0.94));
  border:1px solid rgba(110,160,255,0.22);
  box-shadow:
    0 14px 38px rgba(25,45,75,0.35),
    inset 0 0 10px rgba(120,170,255,0.15);
}
.theme-sera .vxd-dropdown-menu a{
  color:#ddecff;
  border-left:3px solid transparent;
}
.theme-sera .vxd-dropdown-menu a:hover{
  background:rgba(120,170,255,0.15);
  color:#fff;
  border-left:3px solid #5aa8ff;
  transform:translateX(8px);
}

/* ========================================= */
/* NOTTE — Deep Cyberpunk Cyan               */
/* ========================================= */
.theme-notte .vxd-dropdown-menu{
  background:linear-gradient(160deg,rgba(4,12,18,0.92),rgba(0,8,14,0.95));
  border:1px solid rgba(0,245,255,0.32);
  box-shadow:
    0 0 20px rgba(0,245,255,0.25),
    inset 0 0 12px rgba(0,245,255,0.12);
}
.theme-notte .vxd-dropdown-menu a{
  color:#c8f6ff;
  border-bottom:1px dashed rgba(0,245,255,0.12);
}
.theme-notte .vxd-dropdown-menu a:hover{
  background:rgba(0,245,255,0.18);
  color:#000;
  text-shadow:0 0 10px #00F5FF;
  transform:translateX(10px);
}

/* ========================================= */
/* AURUM — Lux Black Velvet + Goldleaf       */
/* ========================================= */
.theme-aurum .vxd-dropdown-menu{
  background:linear-gradient(135deg,rgba(20,20,15,0.92),rgba(40,30,10,0.95));
  border:1px solid rgba(240,199,94,0.42);
  box-shadow:
    0 16px 36px rgba(240,199,94,0.25),
    inset 0 0 8px rgba(240,199,94,0.20);
}
.theme-aurum .vxd-dropdown-menu a{
  color:#f3e6c3;
}
.theme-aurum .vxd-dropdown-menu a:hover{
  background:rgba(240,199,94,0.22);
  color:#000;
  transform:translateX(6px) scale(1.02);
}

/* ========================================= */
/* SUPREME — Brutalist Monolith              */
/* ========================================= */
.theme-supreme .vxd-dropdown-menu{
  background:linear-gradient(#0c131a,#070b0f);
  border:1px solid rgba(158,251,255,0.12);
  border-radius:2px;
  box-shadow:0 14px 40px rgba(0,0,0,0.7);
}
.theme-supreme .vxd-dropdown-menu a{
  color:#dff8ff;
  border-left:3px solid transparent;
}
.theme-supreme .vxd-dropdown-menu a:hover{
  background:rgba(158,251,255,0.08);
  border-left:3px solid #9efbff;
  transform:translateX(10px);
}

/* ========================================= */
/* OMEGA — Quantum Gradient Pulse             */
/* ========================================= */
.theme-omega .vxd-dropdown-menu{
  background:linear-gradient(150deg,rgba(12,19,26,0.92),rgba(20,28,35,0.94));
  border:1px solid var(--vxd-accent);
  box-shadow:
    0 0 18px var(--vxd-accent),
    inset 0 0 6px var(--vxd-accent);
}
.theme-omega .vxd-dropdown-menu a{
  color:#EFFFFF;
}
.theme-omega .vxd-dropdown-menu a:hover{
  background:rgba(0,245,255,0.22);
  color:#000;
  transform:translateX(12px) scale(1.05);
}



.vxd-block{
  padding:32px 36px!important;
  margin:36px 0;
  text-align:center!important;
  border-radius:16px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.10);
  transition:transform .25s,box-shadow .25s;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 0 10px #0005;
}
.vxd-block:hover{
  transform:translateY(-3px);
  box-shadow:0 0 16px var(--vxd-primary),0 0 24px rgba(0,0,0,0.4);
}
.vxd-block h2{
  margin:0 0 24px;
  font-size:1.85rem;
  font-weight:800;
  line-height:1.3;
}
.vxd-block p{
  margin:16px 0;
  font-weight:500;
  line-height:1.7;
}
.vxd-block ul{
  list-style:none;
  padding:0;
  margin:20px auto 0;
  display:inline-block;
  text-align:left;
  max-width:380px;
}
.vxd-block ul li{
  padding:8px 0 8px 28px;
  position:relative;
  font-weight:500;
  line-height:1.6;
}
.vxd-block ul li::before{
  content:"→";
  position:absolute;
  left:0;
  top:8px;
  font-weight:700;
  color:var(--vxd-primary);
}
.vxd-block a{
  display:inline-block!important;
  margin:10px 8px!important;
  padding:6px 0;
  font-weight:600;
  color:var(--vxd-primary)!important;
  min-width:180px;
}
.vxd-block a:hover{
  text-decoration:underline;
  color:var(--vxd-accent-strong)!important;
}

#vxd-footer{
  margin-top:auto;
  padding:18px 14px;
  text-align:center;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.15);
  color:#cfeeee;
  font-size:14px;
  box-shadow:0 0 10px #0004;
  position:relative;
  z-index:5;
}
#vxd-footer a{
  color:#9efbff;
}
#vxd-footer a:hover{
  color:#fff;
  text-shadow:0 0 6px #0ff;
}

.vxd-ring-pack{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:16px 0 8px;
}
.vxd-ring{
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid #666;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.4s cubic-bezier(.175,.885,.32,1.275);
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,0.02);
}
.vxd-ring svg{
  width:20px;
  height:20px;
  fill:#c8c8c8;
  transition:.4s;
  z-index:2;
}
.vxd-ring:hover{
  border-color:#E8C547;
  background:rgba(232,197,71,0.25);
  box-shadow:0 0 40px #E8C547,0 0 80px rgba(232,197,71,0.6);
  transform:translateY(-6px) scale(1.3);
}
.vxd-ring:hover svg{
  fill:#000!important;
}

.theme-alba{
  --vxd-bg:linear-gradient(180deg,#faf7f1,#ddd6c9);
  --vxd-fg:#1a120b;
  --vxd-primary:#b8860b;
  --vxd-nav-bg:rgba(252,248,240,0.98);
  --vxd-nav-fg:#b8860b;
  --vxd-nav-border:rgba(200,150,80,0.25);
  --vxd-popup-bg:rgba(252,248,240,0.98);
  --vxd-popup-fg:#2c241a;
  --vxd-popup-border:rgba(200,150,80,0.28);
  --vxd-popup-hover-bg:rgba(232,197,71,0.38);
  --vxd-popup-hover-fg:#000;
}

.theme-giorno{
  --vxd-bg:linear-gradient(180deg,#f2fbff,#cfe7fb);
  --vxd-fg:#0f3d0f;
  --vxd-primary:#2d862d;
  --vxd-nav-bg:rgba(245,252,248,0.98);
  --vxd-nav-fg:#2d862d;
  --vxd-nav-border:rgba(45,134,45,0.25);
  --vxd-popup-bg:rgba(245,252,248,0.98);
  --vxd-popup-fg:#1a4d1a;
  --vxd-popup-border:rgba(45,134,45,0.28);
  --vxd-popup-hover-bg:rgba(45,134,45,0.38);
  --vxd-popup-hover-fg:#000;
}

.theme-sera{
  --vxd-bg:linear-gradient(160deg,#1b2837,#6b7892);
  --vxd-fg:#e9f3ff;
  --vxd-primary:#5aa8ff;
  --vxd-nav-bg:rgba(20,28,40,0.96);
  --vxd-nav-fg:#dfeeff;
  --vxd-nav-border:rgba(90,140,200,0.12);
  --vxd-popup-bg:rgba(24,34,48,0.96);
  --vxd-popup-fg:#e7f6ff;
  --vxd-popup-border:rgba(90,140,200,0.14);
  --vxd-popup-hover-bg:rgba(90,140,200,0.12);
  --vxd-popup-hover-fg:#fff;
}

.theme-notte{
  --vxd-bg:radial-gradient(circle at 50% 20%,#061018,#000);
  --vxd-fg:#d8faff;
  --vxd-primary:#00F5FF;
  --vxd-nav-bg:rgba(2,6,10,0.98);
  --vxd-nav-fg:#d8faff;
  --vxd-nav-border:rgba(0,245,255,0.08);
  --vxd-popup-bg:rgba(6,10,14,0.98);
  --vxd-popup-fg:#cfefff;
  --vxd-popup-border:rgba(0,245,255,0.12);
  --vxd-popup-hover-bg:rgba(0,245,255,0.08);
  --vxd-popup-hover-fg:#000;
}

.theme-aurum{
  --vxd-bg:linear-gradient(#0f0f0f,#1a1a1a);
  --vxd-fg:#f7e9c9;
  --vxd-primary:#f0c75e;
  --vxd-nav-bg:rgba(18,16,12,0.98);
  --vxd-nav-fg:#f7e9c9;
  --vxd-nav-border:rgba(240,199,94,0.12);
  --vxd-popup-bg:rgba(20,18,14,0.96);
  --vxd-popup-fg:#f3e6c3;
  --vxd-popup-border:rgba(240,199,94,0.18);
  --vxd-popup-hover-bg:rgba(240,199,94,0.12);
  --vxd-popup-hover-fg:#000;
}

.theme-supreme{
  --vxd-bg:linear-gradient(180deg,#0c131a,#0c131a);
  --vxd-fg:#e1faff;
  --vxd-primary:#9efbff;
  --vxd-nav-bg:rgba(6,10,14,0.98);
  --vxd-nav-fg:#9efbff;
  --vxd-nav-border:rgba(158,251,255,0.06);
  --vxd-popup-bg:rgba(8,12,18,0.96);
  --vxd-popup-fg:#dff8ff;
  --vxd-popup-border:rgba(158,251,255,0.08);
  --vxd-popup-hover-bg:rgba(158,251,255,0.06);
  --vxd-popup-hover-fg:#000;
}

.theme-omega{
  --vxd-bg:linear-gradient(140deg,var(--vxd-grad-1,#00F5FF),var(--vxd-grad-2,#E8C547));
  --vxd-fg:var(--vxd-base,#EEE);
  --vxd-primary:var(--vxd-accent,#00F5FF);
  --vxd-nav-bg:rgba(8,10,12,0.96);
  --vxd-nav-fg:var(--vxd-base,#EEE);
  --vxd-nav-border:rgba(0,245,255,0.12);
  --vxd-popup-bg:rgba(12,19,26,0.96);
  --vxd-popup-fg:#ffffff;
  --vxd-popup-border:rgba(0,245,255,0.18);
  --vxd-popup-hover-bg:rgba(0,245,255,0.08);
  --vxd-popup-hover-fg:#000;
}

@keyframes vxdPopupEnter {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.92) translateY(20px)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes vxdDropFade {
  0%{opacity:0;transform:translateY(-6px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:768px){
  .vxd-block{padding:28px 24px!important;margin:28px 0}
  .vxd-block h2{font-size:1.65rem}
  .vxd-block ul{max-width:100%}
  .vxd-block a{min-width:auto;display:block;margin:12px 0}
}

/* ALBA */
.theme-alba #vxd-footer{
  background:rgba(255,250,240,0.9);
  border-top:1px solid rgba(200,150,80,0.25);
  color:#3a2a18;
}
.theme-alba #vxd-footer a{color:#b8860b}
.theme-alba #vxd-footer a:hover{color:#E8C547}

.theme-alba .vxd-ring{
  border-color:rgba(200,150,80,0.6);
  background:rgba(255,235,205,0.3);
}
.theme-alba .vxd-ring:hover{
  border-color:#E8C547;
  background:rgba(240,200,80,0.4);
  box-shadow:0 0 40px #E8C547,0 0 90px rgba(240,200,80,0.6);
}
.theme-alba .vxd-ring svg{fill:#7a5a28}
.theme-alba .vxd-ring:hover svg{fill:#000}

/* GIORNO */
.theme-giorno #vxd-footer{
  background:rgba(245,255,245,0.9);
  border-top:1px solid rgba(45,134,45,0.25);
  color:#0f3d0f;
}
.theme-giorno #vxd-footer a{color:#2d862d}
.theme-giorno #vxd-footer a:hover{color:#3da33d}

.theme-giorno .vxd-ring{
  border-color:rgba(45,134,45,0.5);
  background:rgba(200,255,220,0.25);
}
.theme-giorno .vxd-ring:hover{
  border-color:#3da33d;
  background:rgba(45,134,45,0.3);
  box-shadow:0 0 40px #3da33d,0 0 90px rgba(60,160,60,0.6);
}
.theme-giorno .vxd-ring svg{fill:#1a4d1a}
.theme-giorno .vxd-ring:hover svg{fill:#000}

/* SERA */
.theme-sera #vxd-footer{
  background:rgba(15,22,33,0.9);
  border-top:1px solid rgba(110,160,255,0.25);
  color:#dfeeff;
}
.theme-sera #vxd-footer a{color:#8abdff}
.theme-sera #vxd-footer a:hover{color:#dfeeff}

.theme-sera .vxd-ring{
  border-color:rgba(100,150,255,0.6);
  background:rgba(40,60,90,0.35);
}
.theme-sera .vxd-ring:hover{
  border-color:#5aa8ff;
  background:rgba(120,170,255,0.25);
  box-shadow:0 0 40px #5aa8ff,0 0 120px rgba(110,160,255,0.7);
}
.theme-sera .vxd-ring svg{fill:#bcdcff}
.theme-sera .vxd-ring:hover svg{fill:#000}

/* NOTTE */
.theme-notte #vxd-footer{
  background:rgba(0,5,10,0.92);
  border-top:1px solid rgba(0,245,255,0.25);
  color:#d8faff;
}
.theme-notte #vxd-footer a{color:#00F5FF}
.theme-notte #vxd-footer a:hover{color:#E8C547}

.theme-notte .vxd-ring{
  border-color:rgba(0,245,255,0.4);
  background:rgba(0,20,30,0.3);
}
.theme-notte .vxd-ring:hover{
  border-color:#00F5FF;
  background:rgba(0,245,255,0.25);
  box-shadow:0 0 50px #00F5FF,0 0 120px rgba(0,245,255,0.6);
}
.theme-notte .vxd-ring svg{fill:#89eaff}
.theme-notte .vxd-ring:hover svg{fill:#000}

/* AURUM */
.theme-aurum #vxd-footer{
  background:rgba(14,12,8,0.92);
  border-top:1px solid rgba(240,199,94,0.25);
  color:#f7e9c9;
}
.theme-aurum #vxd-footer a{color:#f0c75e}
.theme-aurum #vxd-footer a:hover{color:#FFD447}

.theme-aurum .vxd-ring{
  border-color:rgba(240,199,94,0.6);
  background:rgba(50,40,15,0.35);
}
.theme-aurum .vxd-ring:hover{
  border-color:#FFD447;
  background:rgba(255,212,71,0.25);
  box-shadow:0 0 50px #FFD447,0 0 120px rgba(255,212,71,0.6);
}
.theme-aurum .vxd-ring svg{fill:#f7e9c9}
.theme-aurum .vxd-ring:hover svg{fill:#000}

/* SUPREME */
.theme-supreme #vxd-footer{
  background:rgba(5,8,12,0.9);
  border-top:1px solid rgba(158,251,255,0.15);
  color:#dff8ff;
}
.theme-supreme #vxd-footer a{color:#9efbff}
.theme-supreme #vxd-footer a:hover{color:#fff}

.theme-supreme .vxd-ring{
  border-color:rgba(158,251,255,0.4);
  background:rgba(10,16,22,0.3);
}
.theme-supreme .vxd-ring:hover{
  border-color:#9efbff;
  background:rgba(158,251,255,0.18);
  box-shadow:0 0 40px #9efbff,0 0 80px rgba(158,251,255,0.6);
}
.theme-supreme .vxd-ring svg{fill:#bdfbff}
.theme-supreme .vxd-ring:hover svg{fill:#000}

/* OMEGA */
.theme-omega #vxd-footer{
  background:rgba(8,12,16,0.92);
  border-top:1px solid rgba(0,245,255,0.3);
  color:#dffeff;
}
.theme-omega #vxd-footer a{color:#00F5FF}
.theme-omega #vxd-footer a:hover{color:#E8C547}

.theme-omega .vxd-ring{
  border-color:rgba(0,245,255,0.5);
  background:rgba(0,40,50,0.35);
}
.theme-omega .vxd-ring:hover{
  border-color:#00F5FF;
  background:rgba(0,245,255,0.22);
  box-shadow:0 0 60px #00F5FF,0 0 140px rgba(0,245,255,0.7);
}
.theme-omega .vxd-ring svg{fill:#bdfaff}
.theme-omega .vxd-ring:hover svg{fill:#000}

/* ============================================================
   FOOTER THEMES — FULL STYLE PACK (A)
   Override finale con specificità garantita
============================================================ */

/* ---------- ALBA (gold velvet, warm glow, soft motion) ---------- */
body.theme-alba #vxd-footer{
  background:rgba(255,250,240,0.94);
  border-top:1px solid rgba(200,150,80,0.25);
  color:#3a2a18;
}
body.theme-alba #vxd-footer a{
  color:#b8860b;
}
body.theme-alba #vxd-footer a:hover{
  color:#E8C547;
}

body.theme-alba .vxd-ring{
  border-color:rgba(200,150,80,0.4);
  background:linear-gradient(135deg,rgba(255,238,200,0.4),rgba(240,210,140,0.2));
  box-shadow:0 0 8px rgba(200,150,80,0.3);
  transition:all .45s cubic-bezier(.23,1,.32,1);
}
body.theme-alba .vxd-ring svg{
  fill:#7a5a28;
  transition:all .4s ease;
}
body.theme-alba .vxd-ring:hover{
  transform:scale(1.28) translateY(-5px);
  border-color:#E8C547;
  background:linear-gradient(135deg,rgba(232,197,71,0.45),rgba(255,230,160,0.3));
  box-shadow:0 0 40px #E8C547,0 0 90px rgba(240,200,80,0.55);
}
body.theme-alba .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 18px #FFD447);
  animation:svgSpin 3s linear infinite, svgFloat 2.2s ease-in-out infinite;
}


/* ---------- GIORNO (fresh green glass, spring energy) ---------- */
body.theme-giorno #vxd-footer{
  background:rgba(245,255,245,0.94);
  border-top:1px solid rgba(45,134,45,0.22);
  color:#0f3d0f;
}
body.theme-giorno #vxd-footer a{
  color:#2d862d;
}
body.theme-giorno #vxd-footer a:hover{
  color:#3da33d;
}

body.theme-giorno .vxd-ring{
  border-color:rgba(45,134,45,0.45);
  background:linear-gradient(145deg,rgba(210,255,220,0.4),rgba(190,240,205,0.2));
  box-shadow:0 0 8px rgba(45,134,45,0.25);
  transition:all .45s cubic-bezier(.23,1,.32,1);
}
body.theme-giorno .vxd-ring svg{
  fill:#1a4d1a;
}
body.theme-giorno .vxd-ring:hover{
  transform:scale(1.26) translateY(-5px) rotate(4deg);
  border-color:#3da33d;
  background:linear-gradient(145deg,rgba(45,134,45,0.35),rgba(70,160,70,0.25));
  box-shadow:0 0 40px #3da33d,0 0 95px rgba(60,160,60,0.55);
}
body.theme-giorno .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 14px #6CFF6C);
  animation:svgSpin 2.5s linear infinite, svgFloat 1.9s ease-in-out infinite;
}


/* ---------- SERA (blue neon velvet, twilight glow) ---------- */
body.theme-sera #vxd-footer{
  background:rgba(15,22,33,0.92);
  border-top:1px solid rgba(110,160,255,0.22);
  color:#dfeeff;
}
body.theme-sera #vxd-footer a{
  color:#8abdff;
}
body.theme-sera #vxd-footer a:hover{
  color:#dfeeff;
}

body.theme-sera .vxd-ring{
  border-color:rgba(110,160,255,0.5);
  background:linear-gradient(145deg,rgba(40,60,90,0.35),rgba(20,35,60,0.25));
  box-shadow:0 0 8px rgba(110,160,255,0.3);
}
body.theme-sera .vxd-ring svg{
  fill:#bcdcff;
}
body.theme-sera .vxd-ring:hover{
  transform:scale(1.24) translateY(-5px);
  border-color:#73AFFF;
  background:linear-gradient(145deg,rgba(80,120,200,0.45),rgba(40,60,110,0.25));
  box-shadow:0 0 50px #5aa8ff,0 0 140px rgba(110,160,255,0.7);
}
body.theme-sera .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 22px #77B8FF);
  animation:svgSpin 2.8s linear infinite, svgFloat 2.2s ease-in-out infinite;
}


/* ---------- NOTTE (cyberpunk cyan, laser glow, deep neon) ---------- */
body.theme-notte #vxd-footer{
  background:rgba(0,5,12,0.94);
  border-top:1px solid rgba(0,245,255,0.22);
  color:#d8faff;
}
body.theme-notte #vxd-footer a{
  color:#00F5FF;
}
body.theme-notte #vxd-footer a:hover{
  color:#E8C547;
}

body.theme-notte .vxd-ring{
  border-color:rgba(0,245,255,0.45);
  background:linear-gradient(145deg,rgba(0,25,35,0.5),rgba(0,15,25,0.4));
  box-shadow:0 0 10px rgba(0,245,255,0.25);
}
body.theme-notte .vxd-ring svg{
  fill:#89eaff;
}
body.theme-notte .vxd-ring:hover{
  transform:scale(1.33) translateY(-7px) rotate(-6deg);
  border-color:#00F5FF;
  background:linear-gradient(145deg,rgba(0,245,255,0.35),rgba(0,120,140,0.2));
  box-shadow:0 0 60px #00F5FF,0 0 160px rgba(0,245,255,0.7);
}
body.theme-notte .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 40px #00F5FF);
  animation:svgSpin 2s linear infinite, svgFloat 1.6s ease-in-out infinite;
}


/* ---------- AURUM (black velvet + royal gold, luxury mode) ---------- */
body.theme-aurum #vxd-footer{
  background:rgba(12,10,6,0.92);
  border-top:1px solid rgba(240,199,94,0.25);
  color:#f7e9c9;
}
body.theme-aurum #vxd-footer a{
  color:#f0c75e;
}
body.theme-aurum #vxd-footer a:hover{
  color:#FFD447;
}

body.theme-aurum .vxd-ring{
  border-color:rgba(240,199,94,0.5);
  background:linear-gradient(145deg,rgba(60,50,25,0.35),rgba(20,18,10,0.3));
  box-shadow:0 0 10px rgba(240,199,94,0.25);
}
body.theme-aurum .vxd-ring svg{
  fill:#f7e9c9;
}
body.theme-aurum .vxd-ring:hover{
  transform:scale(1.35) translateY(-6px);
  border-color:#FFD447;
  background:linear-gradient(145deg,rgba(255,212,71,0.4),rgba(240,180,70,0.25));
  box-shadow:0 0 70px #FFD447,0 0 180px rgba(255,212,71,0.7);
}
body.theme-aurum .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 40px #FFD447);
  animation:svgSpin 2.5s linear infinite, svgFloat 2.1s ease-in-out infinite;
}


/* ---------- SUPREME (ice neon, minimal monolith) ---------- */
body.theme-supreme #vxd-footer{
  background:rgba(5,8,12,0.92);
  border-top:1px solid rgba(158,251,255,0.18);
  color:#dff8ff;
}
body.theme-supreme #vxd-footer a{
  color:#9efbff;
}
body.theme-supreme #vxd-footer a:hover{
  color:#fff;
}

body.theme-supreme .vxd-ring{
  border-color:rgba(158,251,255,0.4);
  background:linear-gradient(145deg,rgba(10,16,22,0.3),rgba(5,10,14,0.25));
  box-shadow:0 0 10px rgba(158,251,255,0.25);
}
body.theme-supreme .vxd-ring svg{
  fill:#bdfbff;
}
body.theme-supreme .vxd-ring:hover{
  transform:scale(1.22) translateY(-5px);
  border-color:#9efbff;
  background:linear-gradient(145deg,rgba(158,251,255,0.32),rgba(100,180,200,0.2));
  box-shadow:0 0 55px #9efbff,0 0 150px rgba(158,251,255,0.6);
}
body.theme-supreme .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 26px #BFFFFF);
  animation:svgSpin 2.4s linear infinite, svgFloat 2.0s ease-in-out infinite;
}


/* ---------- OMEGA (quantum pulse + neon orbit) ---------- */
body.theme-omega #vxd-footer{
  background:rgba(8,12,16,0.92);
  border-top:1px solid rgba(0,245,255,0.3);
  color:#dffeff;
}
body.theme-omega #vxd-footer a{
  color:#00F5FF;
}
body.theme-omega #vxd-footer a:hover{
  color:#E8C547;
}

body.theme-omega .vxd-ring{
  border-color:rgba(0,245,255,0.5);
  background:conic-gradient(
    from 0deg,
    rgba(0,245,255,0.35),
    rgba(0,145,160,0.25),
    rgba(0,245,255,0.35)
  );
  animation:ringPulse 3.4s infinite ease-in-out;
}
body.theme-omega .vxd-ring svg{
  fill:#bdfaff;
}
body.theme-omega .vxd-ring:hover{
  transform:scale(1.36) translateY(-8px) rotate(6deg);
  border-color:#00F5FF;
  background:conic-gradient(
    from 90deg,
    rgba(0,245,255,0.5),
    rgba(0,120,150,0.25),
    rgba(0,245,255,0.5)
  );
  box-shadow:0 0 70px #00F5FF,0 0 200px rgba(0,245,255,0.65);
}
body.theme-omega .vxd-ring:hover svg{
  fill:#000;
  filter:drop-shadow(0 0 50px #00F5FF);
  animation:svgSpin 1.8s linear infinite, svgFloat 1.4s ease-in-out infinite;
}

/* NOTTE – icon base */
body.theme-notte .vxd-ring svg {
  fill: #0094a8 !important;
  filter: drop-shadow(0 0 6px rgba(0,180,200,0.55));
}

/* NOTTE – hover */
body.theme-notte .vxd-ring:hover svg {
  fill: #000 !important;
  filter:
    drop-shadow(0 0 14px #00eaff)
    drop-shadow(0 0 38px #00eaff);
}

/* NOTTE – micro glitch drift */
body.theme-notte .vxd-ring svg {
  animation: notte-glitch 3.5s infinite steps(2, end);
}

@keyframes notte-glitch {
  0% { transform: translate(0,0); }
  5% { transform: translate(-1px,1px); }
  10% { transform: translate(1px,-1px); }
  15% { transform: translate(0,0); }
  100% { transform: translate(0,0); }
}


/* OMEGA – icon base */
body.theme-omega .vxd-ring svg {
  fill: #79f3ff !important;
  filter: drop-shadow(0 0 6px rgba(0,255,255,0.45));
  animation: omega-flicker 2.8s infinite cubic-bezier(.25,.25,.45,1);
}

/* OMEGA – hover neon burst */
body.theme-omega .vxd-ring:hover svg {
  fill: #000 !important;
  filter:
    drop-shadow(0 0 16px #00f5ff)
    drop-shadow(0 0 28px #00f5ff)
    drop-shadow(0 0 40px rgba(0,245,255,0.7));
}

/* OMEGA – quantized neon flicker */
@keyframes omega-flicker {
  0%   { opacity: 1; transform: translateY(0); }
  6%   { opacity: .88; transform: translateY(-1px); }
  12%  { opacity: .95; transform: translateY(1px); }
  18%  { opacity: .85; }
  24%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ========== FOOTER ANIMATO — FORZATO SOLO SU SUPREME + OMEGA ========== */

body.theme-supreme #vxd-footer,
body.theme-supreme body #vxd-footer,
body.theme-omega #vxd-footer,
body.theme-omega body #vxd-footer {
  margin-top:auto;padding:18px 14px;text-align:center;
  background:rgba(0,0,0,0.45);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,0.15);color:#cfeeee;
  font-size:14px;box-shadow:0 0 10px #0004;position:relative;z-index:5;
}

body.theme-supreme #vxd-footer a,
body.theme-supreme body #vxd-footer a,
body.theme-omega #vxd-footer a,
body.theme-omega body #vxd-footer a {
  color:#9efbff;
}

body.theme-supreme #vxd-footer a:hover,
body.theme-supreme body #vxd-footer a:hover,
body.theme-omega #vxd-footer a:hover,
body.theme-omega body #vxd-footer a:hover {
  color:#fff;text-shadow:0 0 6px #0ff;
}

body.theme-supreme #vxd-footer-social,
body.theme-supreme body #vxd-footer-social,
body.theme-omega #vxd-footer-social,
body.theme-omega body #vxd-footer-social {
  display:flex;justify-content:center;gap:16px;margin-bottom:12px;
}

body.theme-supreme #vxd-footer-social svg,
body.theme-supreme body #vxd-footer-social svg,
body.theme-omega #vxd-footer-social svg,
body.theme-omega body #vxd-footer-social svg {
  width:22px;height:22px;fill:#c8c8c8;transition:.3s;
}

body.theme-supreme #vxd-footer-social a:hover svg,
body.theme-supreme body #vxd-footer-social a:hover svg,
body.theme-omega #vxd-footer-social a:hover svg,
body.theme-omega body #vxd-footer-social a:hover svg {
  fill:#E8C547;filter:drop-shadow(0 0 12px #E8C547);
  transform:scale(1.2) rotate(15deg);
}

body.theme-supreme .vxd-ring-pack,
body.theme-supreme body .vxd-ring-pack,
body.theme-omega .vxd-ring-pack,
body.theme-omega body .vxd-ring-pack {
  display:flex;justify-content:center;gap:18px;margin:16px 0 8px;
}

body.theme-supreme .vxd-ring,
body.theme-supreme body .vxd-ring,
body.theme-omega .vxd-ring,
body.theme-omega body .vxd-ring {
  width:40px;height:40px;border-radius:50%;border:2px solid #666;
  display:flex;align-items:center;justify-content:center;
  transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275);
  position:relative;overflow:hidden;background:rgba(255,255,255,0.02);
}

body.theme-supreme .vxd-ring svg,
body.theme-supreme body .vxd-ring svg,
body.theme-omega .vxd-ring svg,
body.theme-omega body .vxd-ring svg {
  width:20px;height:20px;fill:#c8c8c8;transition:all .4s;z-index:2;
  filter:drop-shadow(0 0 8px currentColor);
}

body.theme-supreme .vxd-ring:hover,
body.theme-supreme body .vxd-ring:hover,
body.theme-omega .vxd-ring:hover,
body.theme-omega body .vxd-ring:hover {
  border-color:#E8C547;background:rgba(232,197,71,0.25);
  box-shadow:0 0 40px #E8C547,0 0 80px rgba(232,197,71,0.6);
  transform:translateY(-6px) scale(1.3);
  animation:svgFloat 2s infinite ease-in-out,svgSpin 4s linear infinite,ringPulse 3s infinite ease-in-out;
}

body.theme-supreme .vxd-ring:hover svg,
body.theme-supreme body .vxd-ring:hover svg,
body.theme-omega .vxd-ring:hover svg,
body.theme-omega body .vxd-ring:hover svg {
  fill:#000 !important;
  filter:drop-shadow(0 0 20px #FFD447) drop-shadow(0 0 40px #E8C547);
  animation:svgFloat 1.5s infinite ease-in-out,svgSpin 3s linear infinite;
}

body.theme-supreme .vxd-ring::before,
body.theme-supreme body .vxd-ring::before,
body.theme-omega .vxd-ring::before,
body.theme-omega body .vxd-ring::before {
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid transparent;
  animation:vxd-ring-pulse 3.6s infinite ease-in-out;
}

body.theme-supreme .vxd-ring::after,
body.theme-supreme body .vxd-ring::after,
body.theme-omega .vxd-ring::after,
body.theme-omega body .vxd-ring::after {
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:2px solid transparent;
  border-top-color:rgba(255,212,71,0.5);
  border-right-color:rgba(255,212,71,0.3);
  border-bottom-color:rgba(0,245,255,0.3);
  border-left-color:rgba(255,212,71,0.1);
  opacity:0;transition:opacity .4s;
}

body.theme-supreme .vxd-ring:hover::after,
body.theme-supreme body .vxd-ring:hover::after,
body.theme-omega .vxd-ring:hover::after,
body.theme-omega body .vxd-ring:hover::after {
  opacity:1;animation:vxd-ring-spin 1.8s linear infinite;
}

/* FOOTER + SOCIAL ICON ROTAZIONE */
#vxd-footer{
  margin-top:auto;padding:18px 14px;text-align:center;
  border-top:1px solid rgba(255,255,255,0.15);color:#cfeeee;
  font-size:14px;box-shadow:0 0 10px #0004;position:relative;z-index:5;
}

#vxd-footer-social{
  display:flex;justify-content:center;gap:16px;margin-bottom:12px;
}
#vxd-footer-social svg{
  width:22px;height:22px;fill:#c8c8c8;transition:.3s;
}
#vxd-footer-social a:hover svg{
  fill:#E8C547;filter:drop-shadow(0 0 12px #E8C547);
  transform:scale(1.2) rotate(15deg);
}

.vxd-ring-pack{
  display:flex;justify-content:center;gap:18px;margin:16px 0 8px;
}
.vxd-ring{
  width:40px;height:40px;border-radius:50%;border:2px solid #666;
  display:flex;align-items:center;justify-content:center;
  transition:all .4s cubic-bezier(0.175,0.885,0.32,1.275);
  position:relative;overflow:hidden;background:rgba(0,0,0,0.02);
}
.vxd-ring svg{
  width:20px;height:20px;fill:#c8c8c8;transition:all .4s;z-index:2;
  filter:drop-shadow(0 0 8px currentColor);
}
.vxd-ring:hover{
  transform:translateY(-6px) scale(1.3);
  animation:svgFloat 2s infinite ease-in-out,svgSpin 4s linear infinite,ringPulse 3s infinite ease-in-out;
}
.vxd-ring:hover svg{
  fill:#000 !important;
  filter:drop-shadow(0 0 20px #FFD447) drop-shadow(0 0 40px #E8C547);
  animation:svgFloat 1.5s infinite ease-in-out,svgSpin 3s linear infinite;
}

@keyframes svgFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-4px) rotate(5deg)}
}

@keyframes svgSpin{
  from{transform:rotate(0deg)}to{transform:rotate(360deg)}
}

.vxd-ring::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid transparent;
  animation:vxd-ring-pulse 3.6s infinite ease-in-out;
}

.vxd-ring::after{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:2px solid transparent;
  opacity:0;transition:opacity .4s;
}
.vxd-ring:hover::after{
  opacity:1;animation:vxd-ring-spin 1.8s linear infinite;
}

@keyframes vxd-ring-spin{to{transform:rotate(360deg)}}

/* CLEAN MODE per footer nei temi chiari */
.theme-alba #vxd-footer *,
.theme-giorno #vxd-footer * {
  color: #444 !important;
  fill: #444 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Restore glow nei temi chiari */
.theme-alba #vxd-footer .vxd-ring svg,
.theme-giorno #vxd-footer .vxd-ring svg {
  fill: #666 !important;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.35)) !important;
}

/* Restore contrast in rings */
.theme-alba #vxd-footer .vxd-ring,
.theme-giorno #vxd-footer .vxd-ring {
  border-color: #999 !important;
  background: rgba(0,0,0,0.05) !important;
}

/* OMEGA — transizione globale morbida */
body.theme-omega {
    transition:
        background-color 3.8s ease-in-out,
        color 3.8s ease-in-out,
        border-color 3.8s ease-in-out,
        box-shadow 3.8s ease-in-out,
        filter 3.8s ease-in-out;
}

/* OMEGA – background fluido a doppio gradiente */
body.theme-omega {
    --omega-a: hsl(200, 60%, 30%);
    --omega-b: hsl(260, 55%, 25%);

    background: linear-gradient(
        135deg,
        var(--omega-a),
        var(--omega-b)
    );
    background-size: 400% 400%;
    transition:
        background 4s ease-in-out,
        color 0.8s ease,
        border-color 0.8s ease,
        box-shadow 0.8s ease;

    color: var(--omega-text, #e9e9e9);
}

body.theme-omega * {
    transition: color 0.8s ease, background-color 1s ease;
}

/* Leggibilità automatica */
body.theme-omega.text-light {
    --omega-text: #f6f6f6;
}
body.theme-omega.text-dark {
    --omega-text: #0d0d0d;
}

/* ============================================================
   OMEGA — DEATHJ0KER ARCANE ENGINE (v4)
   Gradienti fluidi, arcani, eleganti, leggibili
   Aggancia le variabili usate da nav.js
============================================================ */

body.theme-omega {
    /* Colori calcolati in runtime dal JS */
    --omega-base: var(--omega-h1);
    --omega-1: hsl(var(--omega-base), 76%, 42%);
    --omega-2: hsl(calc(var(--omega-base) + 140), 72%, 55%);
    --omega-3: hsl(calc(var(--omega-base) + 210), 65%, 35%);

    background: 
        linear-gradient(
            135deg,
            var(--omega-1),
            var(--omega-2),
            var(--omega-3)
        );

    transition:
        background 4.8s ease-in-out,
        background-color 4.8s ease-in-out,
        color 4.8s ease-in-out,
        border-color 4.8s ease-in-out,
        box-shadow 4.8s ease-in-out,
        filter 4.8s ease-in-out;
}

/* Popup + card fluidi */
body.theme-omega .vxd-popup,
body.theme-omega .vxd-block,
body.theme-omega .vxd-dialog {
    background: rgba(0,0,0,0.32);
    color: #e5faff;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);

    transition:
        background 4.8s ease-in-out,
        border-color 4.8s ease-in-out,
        color 4.8s ease-in-out;
}

/* Cornici runiche morbide */
body.theme-omega .vxd-card {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 18px rgba(0,0,0,0.4);
    transition:
        background 4.8s ease-in-out,
        border-color 4.8s ease-in-out,
        box-shadow 4.8s ease-in-out;
}

/* Testo leggibile sempre */
body.theme-omega,
body.theme-omega h1,
body.theme-omega h2,
body.theme-omega h3,
body.theme-omega h4 {
    color: #e8f8ff;
}

/* ============================================================
   OMEGA MODE SEQUENCER — 4 ARCANE STYLES
   Nebula / Arcane / Infernum / Mist
============================================================ */

body.theme-omega[data-omega-mode="nebula"] {
    --omega-1: hsl(var(--omega-h1), 78%, 55%);
    --omega-2: hsl(calc(var(--omega-h1) + 80), 75%, 50%);
    --omega-3: hsl(calc(var(--omega-h1) + 160), 70%, 45%);
}

body.theme-omega[data-omega-mode="arcane"] {
    --omega-1: hsl(var(--omega-h1), 70%, 40%);
    --omega-2: hsl(calc(var(--omega-h1) + 120), 65%, 50%);
    --omega-3: hsl(calc(var(--omega-h1) + 200), 55%, 35%);
}

body.theme-omega[data-omega-mode="infernum"] {
    --omega-1: hsl(calc(var(--omega-h1) + 10), 80%, 45%);
    --omega-2: hsl(calc(var(--omega-h1) + 40), 85%, 55%);
    --omega-3: hsl(calc(var(--omega-h1) + 60), 70%, 35%);
}

body.theme-omega[data-omega-mode="mist"] {
    --omega-1: hsl(var(--omega-h1), 45%, 65%);
    --omega-2: hsl(calc(var(--omega-h1) + 90), 40%, 70%);
    --omega-3: hsl(calc(var(--omega-h1) + 180), 35%, 75%);
}

/* Gradient final */
body.theme-omega {
    background: linear-gradient(
        130deg,
        var(--omega-1),
        var(--omega-2),
        var(--omega-3)
    );
}

/* ============================================================
   OMEGA MODE — FX DYNAMICS (v1)
   Glow, border, popup e card anim FX
============================================================ */

/* BASE per tutti */
body.theme-omega .vxd-popup,
body.theme-omega .vxd-block,
body.theme-omega .vxd-card {
    transition:
        background 5s ease-in-out,
        color 5s ease-in-out,
        box-shadow 5s ease-in-out,
        border-color 5s ease-in-out,
        filter 5s ease-in-out;
}

/* ------------------ NEBULA FX ------------------ */
body.theme-omega[data-omega-mode="nebula"] .vxd-card,
body.theme-omega[data-omega-mode="nebula"] .vxd-popup {
    box-shadow: 0 0 22px rgba(140,100,255,0.30);
    border-color: rgba(150,120,255,0.35);
    backdrop-filter: blur(12px) saturate(140%);
}

/* ------------------ ARCANE FX ------------------ */
body.theme-omega[data-omega-mode="arcane"] .vxd-card,
body.theme-omega[data-omega-mode="arcane"] .vxd-popup {
    box-shadow: 0 0 18px rgba(90,120,255,0.25);
    border-color: rgba(120,180,255,0.25);
    backdrop-filter: blur(10px) saturate(110%);
    filter: brightness(0.95);
}

/* ------------------ INFERNUM FX ------------------ */
body.theme-omega[data-omega-mode="infernum"] .vxd-card,
body.theme-omega[data-omega-mode="infernum"] .vxd-popup {
    box-shadow: 0 0 26px rgba(255,120,70,0.35);
    border-color: rgba(255,120,60,0.40);
    backdrop-filter: blur(14px) saturate(150%);
    filter: brightness(1.08);
}

/* ------------------ MIST FX ------------------ */
body.theme-omega[data-omega-mode="mist"] .vxd-card,
body.theme-omega[data-omega-mode="mist"] .vxd-popup {
    box-shadow: 0 0 16px rgba(170,220,255,0.30);
    border-color: rgba(200,230,255,0.30);
    backdrop-filter: blur(16px) saturate(125%);
    filter: brightness(1.12) contrast(0.92);
}

/* Text FX – leggero glitch morbido al cambio mode */
body.theme-omega .vxd-title {
    transition: filter 0.4s ease, letter-spacing 0.4s ease;
}

body.theme-omega[data-omega-mode="infernum"] .vxd-title {
    letter-spacing: 0.6px;
    filter: drop-shadow(0 0 8px rgba(255,120,60,0.4));
}

body.theme-omega[data-omega-mode="nebula"] .vxd-title {
    letter-spacing: 1px;
    filter: drop-shadow(0 0 10px rgba(150,120,255,0.4));
}

body.theme-omega[data-omega-mode="arcane"] .vxd-title {
    letter-spacing: 0.4px;
    filter: drop-shadow(0 0 6px rgba(120,180,255,0.3));
}

body.theme-omega[data-omega-mode="mist"] .vxd-title {
    letter-spacing: 0.2px;
    filter: drop-shadow(0 0 5px rgba(200,230,255,0.4));
}

/* Omega particles */
body.theme-omega::after {
    content:"";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.05) 0, transparent 50%),
        radial-gradient(circle at 80% 75%, rgba(255,255,255,0.04) 0, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(255,255,255,0.03) 0, transparent 50%);
    animation: omegaParticles 18s infinite ease-in-out alternate;
}

@keyframes omegaParticles {
    0% { transform: translate3d(0,0,0); opacity: .55; }
    100% { transform: translate3d(-20px,15px,0); opacity: .75; }
}

/* ------------------------------------------------------------
   Omega Breathing Aura (soft, slow)
------------------------------------------------------------ */
body.theme-omega {
    animation: omegaBreath 12s ease-in-out infinite;
}

@keyframes omegaBreath {
    0%   { filter: brightness(0.98) saturate(1.05); }
    50%  { filter: brightness(1.04) saturate(1.12); }
    100% { filter: brightness(0.98) saturate(1.05); }
}

/* ------------------------------------------------------------
   Omega Hidden Runes FX
------------------------------------------------------------ */
body.theme-omega::before {
    content: "ᚠᛃᛇᛟᚾᛞᛉᚱᛜᛞᚱᛇᛏᛣᚠ";
    position: fixed;
    top: 12%;
    right: 8%;
    font-size: 48px;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    color: rgba(255,255,255,0.10);
    animation: omegaRunes 22s linear infinite;
}

@keyframes omegaRunes {
    0%, 15%   { opacity: 0; transform: translateY(0) scale(1); }
    25%, 30%  { opacity: .25; transform: translateY(-10px) scale(1.08); }
    35%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------
   Omega Micro-Glitch (popup + card)
------------------------------------------------------------ */
body.theme-omega .vxd-popup,
body.theme-omega .vxd-card {
    animation: omegaGlitch 18s ease-in-out infinite;
}

@keyframes omegaGlitch {
    0%, 96%, 100% { filter: none; }
    97% { filter: hue-rotate(6deg) saturate(1.3); }
    98% { filter: hue-rotate(-8deg) saturate(1.1); }
    99% { filter: hue-rotate(4deg) saturate(1.2); }
}

/* ------------------------------------------------------------
   Omega Nebula Drift — background particles
------------------------------------------------------------ */
body.theme-omega::after {
    content:"";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.07) 0, transparent 60%),
        radial-gradient(circle at 78% 65%, rgba(255,255,255,0.04) 0, transparent 55%),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,0.03) 0, transparent 60%);
    animation: omegaNebula 26s ease-in-out infinite alternate;
    opacity: 0.6;
}

@keyframes omegaNebula {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-25px,15px,0) scale(1.05); }
}

/* ------------------------------------------------------------
   Omega Infernum Sparks
------------------------------------------------------------ */
body.theme-omega[data-omega-mode="infernum"]::after {
    background-blend-mode: screen;
    animation: omegaInferno 18s ease-in-out infinite alternate;
}

@keyframes omegaInferno {
    0% { opacity: 0.55; filter: hue-rotate(0deg); }
    100% { opacity: 0.75; filter: hue-rotate(10deg) saturate(1.4); }
}

/* ------------------------------------------------------------
   Omega Mist Soft Bloom
------------------------------------------------------------ */
body.theme-omega[data-omega-mode="mist"] {
    backdrop-filter: blur(2px);
}

body.theme-omega[data-omega-mode="mist"] .vxd-card,
body.theme-omega[data-omega-mode="mist"] .vxd-popup {
    box-shadow: 0 0 28px rgba(200,255,255,0.2);
    filter: brightness(1.1);
}

body.theme-omega {
    animation: omegaBreath 32s ease-in-out infinite;
}

@keyframes omegaBreath {
    0%   { filter: brightness(0.98) saturate(1.05); }
    50%  { filter: brightness(1.04) saturate(1.12); }
    100% { filter: brightness(0.98) saturate(1.05); }
}

body.theme-omega::after {
    animation: omegaNebula 60s ease-in-out infinite alternate;
}

@keyframes omegaNebula {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-25px,15px,0) scale(1.05); }
}

@keyframes omegaRunes {
    0%, 12%   { opacity: 0; transform: translateY(0) scale(1); }
    25%, 28%  { opacity: .22; transform: translateY(-10px) scale(1.08); }
    40%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

body.theme-omega .vxd-popup,
body.theme-omega .vxd-card {
    animation: omegaGlitch 66s ease-in-out infinite;
}

@keyframes omegaGlitch {
    0%, 98%, 100% { filter: none; }
    98.4% { filter: hue-rotate(6deg) saturate(1.3); }
    98.7% { filter: hue-rotate(-8deg) saturate(1.1); }
    99%   { filter: hue-rotate(4deg) saturate(1.2); }
}

body.theme-omega[data-omega-mode="infernum"]::after {
    animation: omegaInferno 44s ease-in-out infinite alternate;
}

body.theme-omega[data-omega-mode="mist"] .vxd-card,
body.theme-omega[data-omega-mode="mist"] .vxd-popup {
    transition: box-shadow 24s ease, filter 24s ease;
}

/* HERO */
.vxd-hero {
    padding: 70px 0 40px;
    text-align: center;
}
.vxd-hero-logo {
    width: 140px;
    opacity: .9;
    filter: drop-shadow(0 0 12px #0005);
}
.vxd-hero-title {
    margin: 18px 0 8px;
    font-size: 38px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.vxd-hero-sub {
    font-size: 16px;
    opacity: .75;
}

/* INTRO */
.vxd-intro {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}
.vxd-intro-box {
    width: min(760px, 92%);
    padding: 24px;
    border-radius: 16px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 0 30px #0004;
}
.vxd-intro-text {
    margin-bottom: 14px;
    opacity: .88;
    line-height: 1.6;
}

/* CARDS */
.vxd-cards {
    width: min(1020px,92%);
    margin: 40px auto 70px;
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}
.vxd-card {
    padding: 22px;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(6px);
    transition: .35s;
}
.vxd-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 18px #00f0ff44;
    border-color: #00f5ff55;
}
.vxd-card h3 {
    margin-bottom: 6px;
}
.vxd-card p {
    font-size: 14px;
    opacity: .75;
}

/* ============================================================
   HERO — glow morbido & rune
============================================================ */
.vxd-hero-rune {
    position: relative;
    padding-bottom: 32px;
}

.vxd-hero-title {
    text-shadow: 0 0 12px rgba(0,255,255,0.25);
    animation: heroPulse 6s infinite ease-in-out;
}

@keyframes heroPulse {
    0%,100% { text-shadow: 0 0 10px rgba(0,255,255,0.25);}
    50%     { text-shadow: 0 0 22px rgba(0,255,255,0.45);}
}

.vxd-hero-text {
    opacity: .88;
    letter-spacing: .4px;
}


/* ============================================================
   CORNICE / RUNIC FRAME
============================================================ */
.vxd-frame {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 18px 20px;
    backdrop-filter: blur(3px);
    box-shadow: 0 0 12px #0005;
    position: relative;
}

.vxd-frame::before {
    content:"";
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    border: 1px dashed rgba(0,255,255,0.12);
    pointer-events: none;
}

/* ============================================================
   LISTA — micro animazioni
============================================================ */
.vxd-list li {
    margin: 8px 0;
    transition: transform .25s;
}

.vxd-list li:hover {
    transform: translateX(6px);
}

.vxd-list a {
    text-decoration:none;
    transition:color .25s;
}

.vxd-list a:hover {
    color: #00f5ff;
}

/* ============================================================
   POPUPS DINAMICI — OMEGA RANDOM
   Usano le variabili --omega-1 e --omega-2 aggiornate dal JS
============================================================ */

body.theme-omega .vxd-dropdown-menu,
body.theme-omega .vxd-popup {
    background: linear-gradient(
        145deg,
        var(--omega-1),
        var(--omega-2)
    ) !important;

    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        0 0 10px rgba(0,0,0,0.35),
        0 0 14px var(--omega-2);
    backdrop-filter: blur(12px);
    transition: background 4s ease-in-out, box-shadow 4s ease-in-out;
}

/* Testo */
body.theme-omega .vxd-dropdown-menu a,
body.theme-omega .vxd-popup {
    color: #e9ffff !important;
}

/* Hover */
body.theme-omega .vxd-dropdown-menu a:hover {
    background: rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #fff !important;
    text-shadow: 0 0 6px var(--omega-1);
}

/* Cornici */
body.theme-omega .vxd-dropdown.open > .vxd-dropdown-menu {
    border-color: rgba(255,255,255,0.25);
}

/* ============================================================
   HERO FIX — centratura perfetta su tutti i temi & schermi
============================================================ */

.vxd-main {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 22px;
}

/* Hero centrato verticalmente e orizzontalmente */
.hero {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 50px 0 40px;
}

.hero h1,
.hero p {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* In caso ci siano margini residui */
.vxd-hero-rune {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   VxD HERO — ARCANE TECH HUB
   - Sigillo centrale
   - Glow soft
   - Animazioni lente
============================================================ */

.hero {
  text-align:center;
  margin:0 auto 20px;
  padding:48px 0 32px;
}

.vxd-hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* Sigillo centrale */
.vxd-hero-sigil{
  width:78px;
  height:78px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 14px rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
  animation:vxdSigilBreath 22s ease-in-out infinite;
}

.vxd-hero-sigil::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(
    from 0deg,
    rgba(0,245,255,0.0),
    rgba(0,245,255,0.35),
    rgba(232,197,71,0.4),
    rgba(0,245,255,0.0)
  );
  mix-blend-mode:screen;
  opacity:.6;
  animation:vxdSigilSpin 28s linear infinite;
}

.vxd-hero-sigil::after{
  content:"";
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.25),transparent 55%);
  opacity:.9;
}

/* RUNE INTERNE */
.vxd-hero-runes{
  position:relative;
  font-size:24px;
  letter-spacing:4px;
  opacity:.9;
  text-shadow:0 0 6px rgba(0,255,255,0.6);
  animation:vxdRunesFlicker 18s ease-in-out infinite;
}

/* Titolo HERO */
.vxd-hero-title{
  font-size:2.3rem;
  margin-top:8px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:
    0 0 12px rgba(0,0,0,0.9),
    0 0 16px rgba(0,245,255,0.3);
  animation:vxdHeroGlow 14s ease-in-out infinite;
}

/* Testi */
.vxd-hero-text{
  opacity:.9;
  line-height:1.6;
}

.hero-sub{
  margin-top:4px;
  font-size:0.95rem;
  opacity:.8;
}

/* Adattamento temi chiari — riduco glow troppo forte */
.theme-alba .vxd-hero-title,
.theme-giorno .vxd-hero-title{
  text-shadow:
    0 0 4px rgba(0,0,0,0.35),
    0 0 8px rgba(0,0,0,0.25);
}

.theme-alba .vxd-hero-sigil,
.theme-giorno .vxd-hero-sigil{
  box-shadow:0 0 10px rgba(0,0,0,0.18);
}

/* Sinergia con Omega: accentua un po' il sigillo */
.theme-omega .vxd-hero-sigil{
  box-shadow:0 0 20px rgba(0,0,0,0.7),0 0 40px rgba(0,245,255,0.4);
}

/* ===================== ANIMAZIONI ===================== */

@keyframes vxdSigilSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes vxdSigilBreath{
  0%,100%{transform:scale(1);opacity:.92;}
  50%{transform:scale(1.04);opacity:1;}
}

@keyframes vxdRunesFlicker{
  0%,84%,100%{opacity:.9;filter:none;}
  88%{opacity:.4;filter:blur(0.4px);}
  92%{opacity:1;filter:drop-shadow(0 0 8px rgba(0,255,255,0.8));}
}

@keyframes vxdHeroGlow{
  0%,100%{
    text-shadow:
      0 0 12px rgba(0,0,0,0.8),
      0 0 14px rgba(0,245,255,0.3);
  }
  50%{
    text-shadow:
      0 0 18px rgba(0,0,0,0.9),
      0 0 26px rgba(0,245,255,0.55);
  }
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:600px){
  .vxd-hero-title{
    font-size:1.9rem;
    letter-spacing:.08em;
  }
  .vxd-hero-sigil{
    width:68px;
    height:68px;
  }
}

/* ============================================================
   VxD ARCANE CARDS
   Elegante — Tech — Arcano — Glow controllato
============================================================ */

.vxd-home-cards {
    margin-top: 40px;
}

.vxd-card-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

/* CARD BASE */
.vxd-card {
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all .45s cubic-bezier(.28,.8,.26,1);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 14px rgba(0,0,0,0.25);
    color: #ddd;
}

/* ICONA */
.vxd-card .card-icon {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: .85;
    transition: transform .5s ease;
}

/* TESTI */
.vxd-card h3 {
    font-size: 1.25rem;
    margin-bottom: 6px;
    letter-spacing: .04em;
}

.vxd-card p {
    opacity: .8;
    font-size: .95rem;
    line-height: 1.45;
}

/* HOVER FX — elegante e arcano */
.vxd-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(0,245,255,0.35);
    box-shadow:
        0 0 22px rgba(0,245,255,0.35),
        0 0 6px rgba(232,197,71,0.35) inset;
}

.vxd-card:hover .card-icon {
    transform: scale(1.18) rotate(6deg);
}

/* Temi chiari: attenua glow */
.theme-alba .vxd-card,
.theme-giorno .vxd-card {
    background: rgba(255,255,255,0.7);
    color: #222;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

.theme-alba .vxd-card:hover,
.theme-giorno .vxd-card:hover {
    border-color: rgba(180,150,90,0.35);
    box-shadow:
        0 0 14px rgba(180,150,90,0.32),
        inset 0 0 4px rgba(150,120,70,0.25);
}

/* ============================================================
   FIX CONTRASTO CARD — TEMI CHIARI (ALBA + GIORNO)
============================================================ */

.theme-alba .vxd-card,
.theme-giorno .vxd-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    color: #1e1e1e !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.10),
        inset 0 0 0 rgba(0,0,0,0.0) !important;
    backdrop-filter: blur(6px);
}

/* Testi completamente leggibili */
.theme-alba .vxd-card h3,
.theme-giorno .vxd-card h3 {
    color: #222 !important;
    text-shadow: none !important;
}

.theme-alba .vxd-card p,
.theme-giorno .vxd-card p {
    color: #333 !important;
    opacity: .95 !important;
}

/* Icona */
.theme-alba .vxd-card .card-icon,
.theme-giorno .vxd-card .card-icon {
    color: #444 !important;
    opacity: 1 !important;
}

/* Hover leggero, non glow */
.theme-alba .vxd-card:hover,
.theme-giorno .vxd-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(150,120,70,0.35) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.12),
        inset 0 0 0 rgba(0,0,0,0) !important;
}

.theme-alba .vxd-card:hover .card-icon,
.theme-giorno .vxd-card:hover .card-icon {
    transform: scale(1.12) rotate(4deg);
    color: #8c6d2a !important;
}

/* ============================================================
   CARD — INVERSIONE ARTISTICA PER TEMI CHIARI
   ALBA = pergamena dorata tech
   GIORNO = codex verde futurista
============================================================ */

/* --- TEMA ALBA (soft gold parchment) --- */
.theme-alba .vxd-card {
    background: linear-gradient(145deg,
        rgba(250,242,226,0.95),
        rgba(255,251,240,0.98)
    ) !important;
    border: 1px solid rgba(200,150,80,0.45) !important;
    color: #3a2b17 !important;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.15),
        inset 0 1px 1px rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(8px);
    text-shadow:
        0px 1px 0px rgba(255,255,255,0.7),
        0 2px 3px rgba(0,0,0,0.25);
}

/* Titolo inciso */
.theme-alba .vxd-card h3 {
    color: #7c5a1a !important;
    font-weight: 800 !important;
    text-shadow:
        0px 1px 0 rgba(255,255,255,0.8),
        0px 3px 3px rgba(0,0,0,0.3) !important;
}

/* Testi */
.theme-alba .vxd-card p {
    color: #3a2b17 !important;
    opacity: 0.92 !important;
}

/* Icona */
.theme-alba .vxd-card .card-icon {
    color: #b7893c !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Hover ALBA */
.theme-alba .vxd-card:hover {
    transform: translateY(-6px) scale(1.03);
    background: linear-gradient(140deg,
        rgba(255,250,235,1),
        rgba(255,245,220,1)
    ) !important;
    border-color: rgba(200,150,80,0.6) !important;
    box-shadow:
        0 6px 20px rgba(200,150,80,0.35),
        inset 0 1px 1px rgba(255,255,255,0.9) !important;
}

.theme-alba .vxd-card:hover .card-icon {
    color: #d3a54a !important;
    transform: scale(1.18) rotate(4deg);
}


/* ============================================================
   --- TEMA GIORNO (green codex tech) ---
============================================================ */

.theme-giorno .vxd-card {
    background: linear-gradient(145deg,
        rgba(245,253,245,0.96),
        rgba(235,249,238,0.98)
    ) !important;
    border: 1px solid rgba(45,134,45,0.45) !important;
    color: #1f3e1f !important;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.12),
        inset 0 1px 1px rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(8px);
    text-shadow:
        0px 1px 0 rgba(255,255,255,0.9),
        0 2px 3px rgba(0,0,0,0.22);
}

/* Titoli */
.theme-giorno .vxd-card h3 {
    color: #2d7f2d !important;
    font-weight: 800 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,0.9),
        0 3px 3px rgba(0,0,0,0.18) !important;
}

/* Testo */
.theme-giorno .vxd-card p {
    color: #244d24 !important;
    opacity: .95 !important;
}

/* Icona */
.theme-giorno .vxd-card .card-icon {
    color: #3aa63a !important;
}

/* Hover GIORNO */
.theme-giorno .vxd-card:hover {
    transform: translateY(-6px) scale(1.03);
    background: linear-gradient(145deg,
        rgba(255,255,255,1),
        rgba(240,252,240,1)
    ) !important;
    box-shadow:
        0 6px 20px rgba(45,134,45,0.35),
        inset 0 1px 1px rgba(255,255,255,0.8) !important;
}

.theme-giorno .vxd-card:hover .card-icon {
    color: #4cc44c !important;
    transform: scale(1.15) rotate(4deg);
}

/* ================================================================
   HERO ARCANE – universal theme adaptive
================================================================ */

/* struttura */
.vxd-hero-arcane {
    position: relative;
    padding: 120px 20px 80px;
    text-align: center;
    overflow: hidden;
}

/* logo */
.vxd-hero-logo {
    width: 120px;
    opacity: 0;
    transform: scale(0.9);
    animation: heroLogoEnter 1.4s cubic-bezier(.175,.885,.32,1.275) forwards;
}

/* titolo */
.vxd-hero-title {
    font-size: 2.8em;
    margin-top: 22px;
    opacity: 0;
    animation: heroTextFade 1.4s ease .4s forwards;
}

/* sottotitolo */
.vxd-hero-sub {
    font-size: 1.2em;
    opacity: 0;
    letter-spacing: .5px;
    margin-top: 8px;
    animation: heroTextFade 1.4s ease .7s forwards;
}

/* animazioni */
@keyframes heroLogoEnter {
    0%   { opacity: 0; transform: scale(0.85) rotate(-6deg); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1)   rotate(0deg);   filter: blur(0); }
}
@keyframes heroTextFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* particelle arcane */
.vxd-hero-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 50% 20%, rgba(255,255,255,0.06), transparent 60%),
        repeating-linear-gradient(180deg,
            transparent 0px,
            rgba(255,255,255,0.03) 2px,
            transparent 4px
        );
    opacity: .45;
    animation: heroDrift 12s linear infinite;
}

@keyframes heroDrift {
    from { transform: translateY(0); }
    to   { transform: translateY(30px); }
}

/* ================================================================
   HERO RUNE SIGIL — FIX dimensioni testo nel cerchio
================================================================ */

.vxd-hero-sigil {
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    background: rgba(0,0,0,0.25);
    margin-bottom: 20px;
}

.vxd-hero-runes {
    font-size: 13px;          /* <— prima era troppo grande */
    letter-spacing: 0.8px;    /* <— rende la stringa più compatta */
    opacity: .9;
    white-space: nowrap;
    text-shadow: 
        0 0 4px rgba(0,255,255,0.4),
        0 0 8px rgba(0,255,255,0.2);
    animation: vxdRunesFlicker 14s ease-in-out infinite;
}

/* effetto runico */
@keyframes vxdRunesFlicker {
    0%,100% { opacity: .9; }
    50%     { opacity: .5; }
}

/* ============================
   ADATTAMENTO PER TEMI
============================ */

/* ALBA */
.theme-alba .vxd-hero-title { color: #a06a00; text-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.theme-alba .vxd-hero-sub   { color: #5c4100; }

.theme-alba .vxd-hero-sigil{
    border-color: rgba(180,140,60,.45);
    background: rgba(255,245,225,0.25);
}
.theme-alba .vxd-hero-runes{
    color: #8b6b21;
    text-shadow: 
        0 0 4px rgba(255,200,80,0.45),
        0 0 10px rgba(255,200,80,0.25);
}


/* GIORNO */
.theme-giorno .vxd-hero-title { color: #1b5d1b; text-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.theme-giorno .vxd-hero-sub   { color: #134013; }
.theme-giorno .vxd-hero-sigil{
    border-color: rgba(45,134,45,.45);
    background: rgba(240,255,245,0.3);
}
.theme-giorno .vxd-hero-runes{
    color: #1b4d1b;
    text-shadow:
        0 0 4px rgba(45,134,45,0.45),
        0 0 10px rgba(45,134,45,0.25);
}


/* NOTTE + SUPREME (dark) */
.theme-notte .vxd-hero-title,
.theme-supreme .vxd-hero-title { 
    color: #E8C547;
    text-shadow: 0 0 12px rgba(232,197,71,0.5);
}
.theme-notte .vxd-hero-sub,
.theme-supreme .vxd-hero-sub { color: #c3c3c3; }
.theme-sera .vxd-hero-sigil{
    border-color: rgba(180,100,255,.45);
    background: rgba(70,20,120,0.35);
}
.theme-sera .vxd-hero-runes{
    color: #d7b0ff;
    text-shadow:
        0 0 6px rgba(200,140,255,0.45),
        0 0 12px rgba(200,140,255,0.25);
}
.theme-notte .vxd-hero-sigil{
    border-color: rgba(0,255,255,.35);
    background: rgba(0,20,30,0.4);
}
.theme-notte .vxd-hero-runes{
    color: #8ff;
    text-shadow:
        0 0 6px rgba(0,255,255,0.50),
        0 0 14px rgba(0,255,255,0.35);
}


/* OMEGA – colore fluido */
.theme-omega .vxd-hero-title {
    color: var(--omega-2);
    transition: color 2s ease-in-out;
}
.theme-omega .vxd-hero-sub {
    color: var(--omega-1);
    opacity: .85;
    transition: color 2s ease-in-out;
}
.theme-aurum .vxd-hero-sigil{
    border-color: rgba(255,212,71,.55);
    background: rgba(80,60,20,0.35);
}
.theme-aurum .vxd-hero-runes{
    color: #f6d56a;
    text-shadow:
        0 0 8px rgba(255,212,71,0.55),
        0 0 18px rgba(255,212,71,0.35);
}
.theme-supreme .vxd-hero-sigil{
    border-color: rgba(180,220,255,.55);
    background: rgba(200,240,255,0.25);
}
.theme-supreme .vxd-hero-runes{
    color: #dff4ff;
    text-shadow:
        0 0 8px rgba(150,200,255,0.55),
        0 0 18px rgba(150,200,255,0.35);
}

/* ==================================================================
   VXD BLOCK — UNIVERSAL STRUCTURE
================================================================== */

.vxd-block {
    padding: 26px;
    border-radius: 14px;
    margin: 32px auto;
    max-width: 880px;
    backdrop-filter: blur(8px);
    transition: all .35s ease;
    border: 1px solid rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
}

/* TITOLI */
.vxd-block h2 {
    margin-bottom: 12px;
    font-size: 1.6em;
    font-weight: 700;
    letter-spacing: .5px;
}

/* TESTO */
.vxd-block p,
.vxd-block ul,
.vxd-block li {
    font-size: 1.05em;
    line-height: 1.6;
}

.theme-notte .vxd-block,
.theme-sera  .vxd-block,
.theme-supreme .vxd-block {
    background: rgba(10,10,14,0.38);
    border-color: rgba(255,255,255,0.07);
    box-shadow: 
        inset 0 0 18px rgba(0,0,0,0.45),
        0 0 22px rgba(0,255,255,0.05);
}

.theme-notte .vxd-block h2,
.theme-sera  .vxd-block h2,
.theme-supreme .vxd-block h2 {
    color: #dff;
    text-shadow:
        0 0 6px rgba(0,255,255,0.25),
        0 0 12px rgba(0,255,255,0.15);
}

.theme-notte .vxd-block,
.theme-sera  .vxd-block,
.theme-supreme .vxd-block {
    color: #e6fafa;
}

.theme-alba .vxd-block {
    background: rgba(255,250,240,0.62);
    border-color: rgba(200,150,80,0.35);
    box-shadow: 
        inset 0 0 14px rgba(200,150,80,0.15),
        0 0 18px rgba(255,212,71,0.18);
}

.theme-alba .vxd-block h2 {
    color: #b8860b;
    text-shadow: 
        0 1px 2px rgba(0,0,0,0.15),
        0 0 6px rgba(255,212,71,0.3);
}

.theme-alba .vxd-block {
    color: #4a3a28;
}

.theme-giorno .vxd-block {
    background: rgba(248,253,248,0.72);
    border-color: rgba(45,134,45,0.45);
    box-shadow:
        inset 0 0 14px rgba(45,134,45,0.12),
        0 0 14px rgba(45,134,45,0.12);
}

.theme-giorno .vxd-block h2 {
    color: #2d862d;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.08),
        0 0 4px rgba(45,134,45,0.3);
}

.theme-giorno .vxd-block {
    color: #1a4d1a;
}

.theme-aurum .vxd-block {
    background: rgba(80,60,20,0.35);
    border-color: rgba(255,212,71,0.45);
    box-shadow:
        inset 0 0 12px rgba(255,212,71,0.25),
        0 0 22px rgba(255,212,71,0.22);
}

.theme-aurum .vxd-block h2 {
    color: #ffd447;
    text-shadow:
        0 1px 2px rgba(0,0,0,0.4),
        0 0 8px rgba(255,212,71,0.45);
}

.theme-aurum .vxd-block{
    color: #efdcb0;
}

.theme-omega .vxd-block{
    background: rgba(0,0,0,0.32);
    border-color: rgba(255,255,255,0.22);
    box-shadow:
        inset 0 0 12px rgba(0,0,0,0.35),
        0 0 18px rgba(255,255,255,0.15);
    transition: all 4s ease-in-out;
}

.theme-omega .vxd-block h2 {
    color: #fff;
    text-shadow:
        0 0 8px rgba(255,255,255,0.45),
        0 0 16px rgba(255,255,255,0.25);
    transition: color 4s ease-in-out, text-shadow 4s ease-in-out;
}

.theme-omega .vxd-block{
    color: #e8fafa;
    transition: color 4s ease-in-out;
}


/* ============================================================
   VxD — CARD SYSTEM (adaptive per tema)
============================================================ */

/* base card */
.vxd-card {
    position: relative;
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(15,15,20,0.55);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    color: #f2f2f2;
    text-decoration: none;
    display: block;
    transition: 
        transform .45s cubic-bezier(.175,.885,.32,1.275),
        box-shadow .45s ease,
        background .45s ease,
        border-color .45s ease,
        color .45s ease;
    box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

/* iconcina */
.vxd-card .card-icon {
    font-size: 26px;
    margin-bottom: 10px;
    opacity: .85;
    text-shadow: 0 0 6px rgba(0,255,255,0.25);
}

/* testo */
.vxd-card h3 {
    font-size: 1.45em;
    margin-bottom: 8px;
}
.vxd-card p {
    opacity: .85;
    font-size: 1.05em;
    line-height: 1.45;
}

/* hover (dark theme default) */
.vxd-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 
        0 10px 32px rgba(0,0,0,0.55),
        0 0 18px rgba(0,255,255,0.22);
    border-color: rgba(0,255,255,0.35);
}

/* ============================================================
   TEMA — ALBA (chiaro oro / pergamena futuristica)
============================================================ */
.theme-alba .vxd-card {
    background: rgba(255,255,250,0.90);
    border: 1px solid rgba(200,150,80,0.35);
    color: #3a2f1d;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.theme-alba .vxd-card .card-icon {
    color: #b8860b;
    text-shadow: 0 0 5px rgba(200,150,80,0.30);
}

.theme-alba .vxd-card:hover {
    box-shadow: 
        0 10px 26px rgba(0,0,0,0.22),
        0 0 14px rgba(200,150,80,0.35);
    border-color: rgba(200,150,80,0.5);
    background: rgba(255,250,235,0.98);
}

/* ============================================================
   TEMA — GIORNO (verde codex minimale)
============================================================ */
.theme-giorno .vxd-card {
    background: rgba(248,252,250,0.95);
    border: 1px solid rgba(45,134,45,0.35);
    color: #1c3b1c;
    box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}

.theme-giorno .vxd-card .card-icon {
    color: #2d862d;
    text-shadow: 0 0 4px rgba(45,134,45,0.22);
}

.theme-giorno .vxd-card:hover {
    background: rgba(240,250,240,1);
    border-color: rgba(45,134,45,0.5);
    box-shadow: 
        0 10px 24px rgba(0,0,0,0.20),
        0 0 14px rgba(45,134,45,0.32);
}

/* ============================================================
   GRID
============================================================ */
.vxd-card-grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding: 20px 10px 40px;
}

/* ============================================================
   LANGUAGE SWITCH (dropdown)
============================================================ */

.vxd-lang-switch span {
    cursor: pointer;
}

.vxd-lang-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 15px;
    white-space: nowrap;
}

.vxd-lang-item:hover {
    background: rgba(255,255,255,0.08);
}

/* Tema chiaro */
.theme-alba .vxd-lang-item:hover,
.theme-giorno .vxd-lang-item:hover {
    background: rgba(0,0,0,0.06) !important;
}

.vxd-ads-box {
    width: 100%;
    max-width: 100%;
    min-height: 280px;  /* spazio fisso = NO SHIFTS */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 24px auto;
}
@media (min-width: 600px) {
    .vxd-ads-box { min-height: 250px; }
}
@media (min-width: 1024px) {
    .vxd-ads-box { min-height: 90px; } /* leaderboard */
}


/* GLOBAL SPACING (per TUTTE le pagine) */
.vxd-main {
    padding-top: 110px !important;
    padding-bottom: 150px !important;
    min-height: calc(100vh - 260px);
}

/* LEGAL PAGE THEME */
.vxd-legal-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 35px 40px;
    background: rgba(0,0,0,0.25);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    line-height: 1.65;
    font-size: 18px;
}

/* Migliora leggibilità dei link */
#vxd-footer-legal a {
    color: #9ecbff;
}

#vxd-footer-legal a:hover {
    color: #cfe4ff;
    text-decoration: underline;
}

/* Uniform legal box style */
.vxd-legal-page {
    max-width: 900px;
    margin: 40px auto 60px auto !important;
    padding: 20px 30px;
    background: rgba(0,0,0,0.25);
    border-radius: 12px;
    backdrop-filter: blur(6px);
}

/* ============================================================
   MOBILE MENU — FIX TEMATICO COMPLETO
   (Per Omega + tutti gli altri temi)
============================================================ */

.vxd-mobile-panel {
    background: var(--vxd-popup-bg) !important;
    color: var(--vxd-popup-fg) !important;
    border-left: 1px solid var(--vxd-popup-border) !important;
}

/* Link */
.vxd-mobile-panel a {
    color: var(--vxd-popup-fg) !important;
}
.vxd-mobile-panel a:hover {
    color: var(--vxd-primary) !important;
    text-shadow: 0 0 6px var(--vxd-primary);
}

/* Titoli sezioni */
.vxd-mobile-panel li > span {
    display: block;
    padding: 8px 0;
    color: var(--vxd-primary) !important;
    font-weight: 700;
}

/* Sottomenu */
.vxd-mobile-panel ul ul {
    margin-left: 12px;
    border-left: 2px solid var(--vxd-popup-border);
    padding-left: 12px;
}

/* Tema Ω — pulsazione neon */
body.theme-omega .vxd-mobile-panel {
    box-shadow: 0 0 18px var(--vxd-accent),
                inset 0 0 8px var(--vxd-accent);
}
body.theme-omega .vxd-mobile-panel a:hover {
    color: #000 !important;
    background: rgba(0,245,255,0.22);
    border-radius: 6px;
}

/* ============================================================
   MOBILE MENU — ERIDITA STILE HOVER DEI MENU DESKTOP
   (Glow, pulsazione, highlight, effetto Omega)
============================================================ */

/* Effetto hover coerente con popup desktop */
.vxd-mobile-panel a {
    transition: 
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.25s ease;
}

/* Hover base (tutti i temi) */
.vxd-mobile-panel a:hover {
    background: rgba(255,255,255,0.06);
    color: var(--vxd-primary) !important;
    border-radius: 6px;
    box-shadow: 0 0 6px var(--vxd-primary);
}

/* Elemento attivo / pagina corrente */
.vxd-mobile-panel a.active,
.vxd-mobile-panel li.active > a {
    background: rgba(255,255,255,0.12) !important;
    color: var(--vxd-primary) !important;
    box-shadow: 0 0 8px var(--vxd-primary);
    border-radius: 6px;
}

/* Omega glow dinamico */
body.theme-omega .vxd-mobile-panel a:hover {
    background: rgba(0,255,255,0.16) !important;
    color: #000 !important;
    text-shadow: 0 0 8px rgba(0,255,255,0.9);
    box-shadow: 0 0 10px rgba(0,255,255,0.8),
                0 0 18px rgba(0,255,255,0.5);
}

/* Titoli sezioni (lisciati + accent color) */
.vxd-mobile-panel li > span {
    color: var(--vxd-primary);
    text-shadow: 0 0 4px var(--vxd-primary);
}

/* Omega titoli */
body.theme-omega .vxd-mobile-panel li > span {
    color: var(--vxd-accent);
    text-shadow: 0 0 6px var(--vxd-accent);
}

/* Trasparenza extra su Omega (come mi hai chiesto) */
body.theme-omega .vxd-mobile-panel {
    background: rgba(10,10,10,0.65) !important;
    backdrop-filter: blur(8px);
}

/* ============================================================
   MOBILE MENU — ERIDITA STILE HOVER DEI MENU DESKTOP
   (Glow, pulsazione, highlight, effetto Omega)
============================================================ */

/* Effetto hover coerente con popup desktop */
.vxd-mobile-panel a {
    transition: 
        background 0.22s ease,
        color 0.22s ease,
        box-shadow 0.25s ease;
}

/* Hover base (tutti i temi) */
.vxd-mobile-panel a:hover {
    background: rgba(255,255,255,0.06);
    color: var(--vxd-primary) !important;
    border-radius: 6px;
    box-shadow: 0 0 6px var(--vxd-primary);
}

/* Elemento attivo / pagina corrente */
.vxd-mobile-panel a.active,
.vxd-mobile-panel li.active > a {
    background: rgba(255,255,255,0.12) !important;
    color: var(--vxd-primary) !important;
    box-shadow: 0 0 8px var(--vxd-primary);
    border-radius: 6px;
}

/* Omega glow dinamico */
body.theme-omega .vxd-mobile-panel a:hover {
    background: rgba(0,255,255,0.16) !important;
    color: #000 !important;
    text-shadow: 0 0 8px rgba(0,255,255,0.9);
    box-shadow: 0 0 10px rgba(0,255,255,0.8),
                0 0 18px rgba(0,255,255,0.5);
}

/* Titoli sezioni (lisciati + accent color) */
.vxd-mobile-panel li > span {
    color: var(--vxd-primary);
    text-shadow: 0 0 4px var(--vxd-primary);
}

/* Omega titoli */
body.theme-omega .vxd-mobile-panel li > span {
    color: var(--vxd-accent);
    text-shadow: 0 0 6px var(--vxd-accent);
}

/* Trasparenza extra su Omega (come mi hai chiesto) */
body.theme-omega .vxd-mobile-panel {
    background: rgba(10,10,10,0.65) !important;
    backdrop-filter: blur(8px);
}

/* ============================================================
   MOBILE MENU — PULSANTI REALI (no più treebar)
============================================================ */

/* Rendi ogni voce un blocco pieno */
.vxd-mobile-panel ul li a,
.vxd-mobile-panel ul li span {
    display: block;
    width: 100%;
    padding: 12px 16px;        /* Altezza uniforme */
    margin-bottom: 6px;        /* Distanza tra pulsanti */
    border-radius: 8px;
    line-height: 1.35;
}

/* Sottomenu indentato leggero */
.vxd-mobile-panel ul li ul li a {
    padding-left: 28px !important;
}

/* Hover coerente (riprende il pulsante intero, NON il testo) */
.vxd-mobile-panel ul li a:hover {
    background: rgba(255,255,255,0.06);
}

/* Tema Omega → più contrasto + glow */
body.theme-omega .vxd-mobile-panel ul li a:hover {
    background: rgba(0,255,255,0.15) !important;
    color: #000 !important;
}

/* Titoli sezioni (anche loro pulsantizzati ma più soft) */
.vxd-mobile-panel ul li > span {
    font-weight: 600;
    background: rgba(255,255,255,0.05);
}

/* ============================================================
   MOBILE — NEON SEPARATORS
============================================================ */

.vxd-mobile-panel ul li {
    position: relative;
    padding-bottom: 4px;
}

.vxd-mobile-panel ul li::after {
    content: "";
    display: block;
    height: 1px;
    margin: 6px 0 2px 0;
    background: linear-gradient(90deg,
        rgba(0,255,255,0.0) 0%,
        rgba(0,255,255,0.55) 40%,
        rgba(0,255,255,1) 50%,
        rgba(0,255,255,0.55) 60%,
        rgba(0,255,255,0.0) 100%
    );
    box-shadow: 0 0 4px #0ff;
    opacity: .55;
}

/* Separatore più forte nel tema Omega */
body.theme-omega .vxd-mobile-panel ul li::after {
    opacity: .85;
    box-shadow: 0 0 6px #0ff;
}

.vxd-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: -2px;
    box-shadow: 0 0 4px rgba(255,255,255,0.25);
    margin-right: 6px;
}

/* ===========================================================
   AEQUITAS FLAG GLOW SYSTEM™
   Glow dinamico in base ai temi Aurum/Supreme/Omega ecc.
   =========================================================== */

/* FLAG BASE STYLE (compatibile full desktop + mobile) */
.vxd-flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 6px;
    transition: filter .25s ease, transform .25s ease, opacity .25s ease;
}

/* Hover su menu desktop */
.vxd-dropdown-menu a:hover .vxd-flag,
.vxd-dropdown-menu span:hover .vxd-flag {
    transform: scale(1.08);
    opacity: 0.95;
}

/* Hover su menu mobile */
.vxd-mobile-panel a:hover .vxd-flag {
    transform: scale(1.10);
    opacity: 1;
}

/* ===========================================================
   GLOW PER TEMA
   =========================================================== */

/* 🜂 ALBA — glow caldo */
[data-theme="alba"] .vxd-flag {
    filter: drop-shadow(0 0 4px rgba(255,110,70,0.60));
}

/* ☀ GIORNO — glow soft blu */
[data-theme="giorno"] .vxd-flag {
    filter: drop-shadow(0 0 4px rgba(80,150,255,0.45));
}

/* 🌆 SERA — glow violetto */
[data-theme="sera"] .vxd-flag {
    filter: drop-shadow(0 0 5px rgba(170,80,255,0.55));
}

/* 🌙 NOTTE — glow azzurro profondo */
[data-theme="notte"] .vxd-flag {
    filter: drop-shadow(0 0 6px rgba(50,140,255,0.55));
}

/* ★ AURUM — glow oro */
[data-theme="aurum"] .vxd-flag {
    filter: drop-shadow(0 0 6px rgba(255,215,90,0.85));
}

/* ❄ SUPREME — glow ghiaccio neon */
[data-theme="supreme"] .vxd-flag {
    filter: drop-shadow(0 0 7px rgba(150,220,255,0.95));
}

/* Ω OMEGA — glow dinamico (accent color generato dallo script) */
[data-theme="omega"] .vxd-flag {
    filter: drop-shadow(0 0 8px var(--omega-accent, #00f6ff));
}

/* Se vuoi un leggero pulsare di Omega */
[data-theme="omega"] .vxd-flag {
    animation: omegaFlagPulse 3s infinite ease-in-out;
}

@keyframes omegaFlagPulse {
    0%   { filter: drop-shadow(0 0 6px var(--omega-accent, #0ff)); }
    50%  { filter: drop-shadow(0 0 12px var(--omega-accent, #0ff)); }
    100% { filter: drop-shadow(0 0 6px var(--omega-accent, #0ff)); }
}

/* Tema OMEGA (sfondo dinamico) */
.theme-omega #vxd-wip-box {
    background: rgba(var(--omega-bg-r), var(--omega-bg-g), var(--omega-bg-b), .55);
    border-color: rgba(var(--omega-bg-r), var(--omega-bg-g), var(--omega-bg-b), .25);
    color: var(--omega-fg);
}

/* Tema Supreme */
.theme-supreme #vxd-wip-box {
    background: rgba(0, 60, 255, .35);
    border-color: rgba(120, 180, 255, .45);
}

/* ============================================================
   SEO SHORTLINKS — FORM UI (SAFE SCOPE)
   Agganciato SOLO a .vxd-frame
============================================================ */

.vxd-frame form input[type="url"],
.vxd-frame form input[type="text"] {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--vxd-fg);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 15px;
    width: 100%;
    max-width: 520px;
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.vxd-frame form input::placeholder {
    color: rgba(255,255,255,0.45);
}

/* Focus */
.vxd-frame form input::focus {
    outline: none;
    border-color: var(--vxd-primary);
    box-shadow: 0 0 0 2px rgba(0,245,255,0.25);
    background: rgba(0,0,0,0.75);
}

/* Alias input più corto */
.vxd-frame form input[name="alias"] {
    max-width: 260px;
}

/* =========================
   BUTTON — PRIMARY ACTION
========================= */

.vxd-frame form button {
    margin-top: 6px;
    padding: 12px 22px;
    border-radius: 12px;
    border: none;
    cursor: pointer;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;

    background: linear-gradient(
        135deg,
        var(--vxd-accent),
        var(--vxd-accent-strong)
    );
    color: #000;

    box-shadow:
        0 6px 22px rgba(0,0,0,0.45),
        0 0 14px rgba(0,245,255,0.35);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.vxd-frame form button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(0,0,0,0.55),
        0 0 22px rgba(0,245,255,0.55);
    filter: brightness(1.05);
}

.vxd-frame form button:active {
    transform: translateY(0);
    box-shadow:
        0 4px 14px rgba(0,0,0,0.45);
}

/* =========================
   RESULT BOX
========================= */

.vxd-frame code {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0,0,0,0.65);
    border: 1px dashed rgba(0,245,255,0.35);
    color: #7ffcff;
    font-family: monospace;
    word-break: break-all;
}

/* QR */
.vxd-frame img[alt="QR code"] {
    margin-top: 12px;
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(0,245,255,0.35);
}

/* ============================================================
   SEO SHORTLINKS — RESULT + COPY (CLEAN / SAFE)
   Scope: solo dentro .vxd-frame
============================================================ */

/* Wrapper (opzionale, aiuta layout responsive) */
.vxd-frame .vxd-short-result {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* INPUT — short link */
.vxd-frame #shortResult {
    flex: 1;
    min-width: 220px;
    max-width: 460px;

    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(0,245,255,0.35);
    color: #7ffcff;

    padding: 10px 12px;
    border-radius: 10px;

    font-family: monospace;
    font-size: 14px;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.45),
        0 0 6px rgba(0,245,255,0.25);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.vxd-frame #shortResult:focus {
    outline: none;
    border-color: var(--vxd-accent);
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.45),
        0 0 14px var(--vxd-accent);
}

/* BUTTON — COPY */
.vxd-frame .vxd-copy-btn {
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    cursor: pointer;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;

    background: linear-gradient(
        135deg,
        var(--vxd-accent),
        var(--vxd-accent-strong)
    );
    color: #000;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.45),
        0 0 14px rgba(0,245,255,0.45);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.vxd-frame .vxd-copy-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 26px rgba(0,0,0,0.6),
        0 0 22px rgba(0,245,255,0.65);
}

.vxd-frame .vxd-copy-btn:active {
    transform: translateY(0);
}

/* STATUS */
.vxd-frame #copyStatus {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: .3px;
    color: var(--vxd-primary);
    opacity: .85;
}