/* ============================================================
   VxD.mobi — MASTER STYLESHEET — v1.6
   Author: VxD + GPT-5
============================================================ */

/* RESET ------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  font-family: "Segoe UI", Roboto, sans-serif;
  color: #EEE;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .35s, color .35s;
}

/* LINKS ------------------------------- */
a {
  color: #00F5FF;
  text-decoration: none;
  transition: 0.25s;
}
a:hover {
  color: #E8C547;
}

/* ============================================================
   HEADER + DESKTOP NAV
============================================================ */
.vxd-header {
  width: 100%;
  background: rgba(20,20,20,0.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid #333;
  position: sticky;
  top: 0;
  z-index: 9000;
}

/* LOGO */
.vxd-logo {
  height: 42px;
  cursor: pointer;
  transition: 0.25s;
}
.vxd-logo:hover {
  filter: drop-shadow(0 0 12px #00F5FF);
  transform: scale(1.06);
}

/* MAIN NAV */
.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: 0.25s;
}

/* HOVER COLOR — base (overridden per theme) */
.vxd-nav > a:hover,
.vxd-dropdown:hover > span {
  border-color: #00F5FF;
  color: #E8C547;
}

/* DROPDOWN WRAP */
.vxd-dropdown {
  position: relative;
}

/* DROPDOWN MENU BOX */
.vxd-dropdown-menu {
  position: absolute;
  top: 42px;
  left: 0;
  background: rgba(15,15,15,0.97);
  border: 1px solid #222;
  border-radius: 6px;
  padding: 10px 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  z-index: 9999;
}

/* SHOW WHEN OPEN */
.vxd-dropdown.open .vxd-dropdown-menu {
  display: flex !important;
}

/* Elements */
.vxd-dropdown-menu a {
  padding: 8px 16px;
  font-size: 15px;
  white-space: nowrap;
}
.vxd-dropdown-menu a:hover {
  background: #111;
  color: #E8C547;
}

/* AUTO-FLIP */
.vxd-dropdown-menu.flip {
  left: auto;
  right: 0;
}

/* ============================================================
   MOBILE NAV
============================================================ */

.vxd-mobile-toggle {
  display: none;
  font-size: 28px;
  cursor: pointer;
}

/* MOBILE LAYOUT */
@media (max-width:900px) {
  .vxd-nav {
    display: none;
  }

  .vxd-mobile-toggle {
    display: block;
  }

  .vxd-mobile-panel {
    position: fixed;
    top: 0;
    right: -320px;
    width: 280px;
    height: 100vh;
    background: #111;
    border-left: 1px solid #333;
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: right .35s ease;
    z-index: 9999;
  }
  .vxd-mobile-panel.open {
    right: 0;
  }

  .vxd-mobile-panel a {
    padding: 10px 0;
    border-bottom: 1px solid #222;
    color: #00F5FF;
  }
  .vxd-mobile-panel a:hover {
    color: #E8C547;
  }
}

/* hidden by default */
#vxd-nav-mobile {
  display: none;
}
#vxd-nav-mobile.open {
  display: block;
}
/* ============================================================
   THEME SWITCH — ICON STRIP
============================================================ */

#vxd-theme-switch {
  display: flex;
  gap: 6px;
  margin-left: 18px;
  align-items: center;
}

#vxd-theme-switch button {
  background: #111;
  border: 1px solid #444;
  color: #00F5FF;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: .25s;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#vxd-theme-switch button:hover {
  border-color: #E8C547;
  color: #E8C547;
}

#vxd-theme-switch button.active {
  background: linear-gradient(45deg, #00F5FF, #E8C547);
  color: #000;
  border-color: #E8C547;
  box-shadow: 0 0 12px #00F5FFAA;
}

/* ============================================================
   THEMES — BASE HOLDER
============================================================ */

body[class^="theme-"] {
  transition: background .4s ease, color .4s ease;
}

/* Theme auto is picked by JS → maps to alba/giorno/sera/notte */

/* ============================================================
   THEME — ALBA (REWORKED)
   → più elegante, meno giallone
   → glass soft
   → colori pastello più seri
============================================================ */

.theme-alba {
  --c-text: #1c1c1c;
  --c-accent: #e3c56b;
  --c-bg-soft: rgba(255,255,255,0.35);

  background:
    linear-gradient(180deg, #f8f4ea 0%, #e9e3d6 60%, #d8d1c4 100%);
  color: var(--c-text);
}

/* ALBA — decorative soft cloud */
.theme-alba::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.25), transparent 60%);
  backdrop-filter: blur(10px) saturate(1.06);
}

/* header */
.theme-alba .vxd-header {
  background: var(--c-bg-soft);
  border-bottom: 1px solid rgba(200,180,90,0.3);
  backdrop-filter: blur(10px) saturate(1.06);
}

/* main nav */
.theme-alba .vxd-nav > a,
.theme-alba .vxd-dropdown > span {
  color: var(--c-text);
}
.theme-alba .vxd-nav > a:hover,
.theme-alba .vxd-dropdown:hover > span {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* dropdown */
.theme-alba .vxd-dropdown-menu {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(200,180,90,0.3);
  backdrop-filter: blur(10px) saturate(1.05);
}
.theme-alba .vxd-dropdown-menu a {
  color: var(--c-text);
}
.theme-alba .vxd-dropdown-menu a:hover {
  background: rgba(227,197,107,0.12);
  color: #000;
}

/* dialog / block */
.theme-alba .vxd-block {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(180,180,180,0.25);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 12px #0002;
}

/* ============================================================
   THEME — GIORNO (soft sky)
============================================================ */

.theme-giorno {
  --c-text: #16232a;
  --c-accent: #61c4ff;
  --c-bg-soft: rgba(240,250,255,0.35);

  background:
    linear-gradient(180deg, #f1f9ff 0%, #dff1ff 60%, #cce6fb 100%);
  color: var(--c-text);
}

/* cloud wash */
.theme-giorno::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 40% 10%, rgba(200,235,255,0.22), transparent 70%);
  backdrop-filter: blur(8px) saturate(1.08);
}

/* header */
.theme-giorno .vxd-header {
  background: var(--c-bg-soft);
  border-bottom: 1px solid rgba(90,130,160,0.35);
  backdrop-filter: blur(10px) saturate(1.05);
}

/* main nav */
.theme-giorno .vxd-nav > a,
.theme-giorno .vxd-dropdown > span {
  color: var(--c-text);
}
.theme-giorno .vxd-nav > a:hover,
.theme-giorno .vxd-dropdown:hover > span {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* dropdown */
.theme-giorno .vxd-dropdown-menu {
  background: rgba(255,255,255,0.87);
  border: 1px solid rgba(120,165,190,0.35);
  backdrop-filter: blur(9px);
}
.theme-giorno .vxd-dropdown-menu a {
  color: var(--c-text);
}
.theme-giorno .vxd-dropdown-menu a:hover {
  background: rgba(95,190,244,0.12);
  color: #0b2633;
}

/* block glass */
.theme-giorno .vxd-block {
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(200,200,200,0.25);
  box-shadow: inset 0 0 12px #0002;
  backdrop-filter: blur(10px);
}
/* ============================================================
   THEME — SERA
   aurora dusk, freddo + riflessi
============================================================ */

.theme-sera {
  --c-text: #e8eef9;
  --c-accent: #a9c6ff;
  --c-bg: #1c2838;

  background: linear-gradient(160deg, #1c2838 0%, #38415a 40%, #68758f 100%);
  color: var(--c-text);
}

.theme-sera .vxd-header {
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(140,160,200,0.35);
  backdrop-filter: blur(10px);
}

.theme-sera .vxd-nav > a,
.theme-sera .vxd-dropdown > span {
  color: var(--c-text);
}
.theme-sera .vxd-nav > a:hover,
.theme-sera .vxd-dropdown:hover > span {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.theme-sera .vxd-dropdown-menu {
  background: rgba(25,32,45,0.92);
  border: 1px solid rgba(140,160,200,0.35);
  backdrop-filter: blur(12px);
}
.theme-sera .vxd-dropdown-menu a {
  color: var(--c-text);
}
.theme-sera .vxd-dropdown-menu a:hover {
  background: rgba(80,120,180,0.14);
  color: var(--c-accent);
}

.theme-sera .vxd-block {
  background: rgba(0,0,0,0.33);
  border: 1px solid rgba(120,160,200,0.35);
  backdrop-filter: blur(7px);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.04),
    0 0 10px rgba(120,180,255,0.12);
}


/* ============================================================
   THEME — NOTTE
   blu profondo + glow ciano
============================================================ */

.theme-notte {
  --c-text: #d8faff;
  --c-accent: #00e9ff;

  background: radial-gradient(circle at 50% 20%, #061018 0%, #000 80%);
  color: var(--c-text);
}

.theme-notte .vxd-header {
  background: rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(0,255,255,0.22);
  backdrop-filter: blur(10px);
}

.theme-notte .vxd-nav > a,
.theme-notte .vxd-dropdown > span {
  color: var(--c-text);
}
.theme-notte .vxd-nav > a:hover,
.theme-notte .vxd-dropdown:hover > span {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* dropdown */
.theme-notte .vxd-dropdown-menu {
  background: rgba(0,0,0,0.77);
  border: 1px solid rgba(0,255,255,0.22);
  backdrop-filter: blur(8px);
}
.theme-notte .vxd-dropdown-menu a {
  color: var(--c-text);
}
.theme-notte .vxd-dropdown-menu a:hover {
  background: rgba(0,255,255,0.12);
  color: var(--c-accent);
}

/* block */
.theme-notte .vxd-block {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(0,255,255,0.18);
  box-shadow:
    inset 0 0 12px rgba(0,255,255,0.12),
    0 0 8px rgba(0,255,255,0.16);
  backdrop-filter: blur(10px);
}


/* ============================================================
   THEME — AURUM
   oro + argento / vibes nobili
============================================================ */

.theme-aurum {
  --c-bg: #131313;
  --c-text: #f7e9c9;
  --c-accent: #d4af37;
  --c-accent2: #c0c0c0;

  background: linear-gradient(#0f0f0f,#1a1a1a,#0f0f0f);
  color: var(--c-text);
}

.theme-aurum .vxd-header {
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--c-accent2);
  backdrop-filter: blur(10px);
}

.theme-aurum .vxd-nav > a,
.theme-aurum .vxd-dropdown > span {
  color: var(--c-text);
}
.theme-aurum .vxd-nav > a:hover,
.theme-aurum .vxd-dropdown:hover > span {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.theme-aurum .vxd-dropdown-menu {
  background: rgba(0,0,0,0.75);
  border: 1px solid var(--c-accent);
  backdrop-filter: blur(9px);
}
.theme-aurum .vxd-dropdown-menu a {
  color: var(--c-text);
}
.theme-aurum .vxd-dropdown-menu a:hover {
  background: rgba(210,175,55,0.15);
  color: var(--c-accent);
}

.theme-aurum .vxd-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-accent2);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 12px #d4af3733,
    0 0 12px #d4af3722;
}


/* ============================================================
   THEME — SUPREME
   → Silver + ice cyan
   → Frost vibes
============================================================ */

.theme-supreme {
  --c-text: #e1faff;
  --c-accent: #bde6ff;
  --c-glass: rgba(180,220,255,0.3);

  background: linear-gradient(180deg, #0c131a, #152129, #0c131a);
  color: var(--c-text);
}

.theme-supreme .vxd-header {
  background: var(--c-glass);
  border-bottom: 1px solid rgba(180,220,255,0.25);
  backdrop-filter: blur(8px) saturate(1.1);
}

.theme-supreme .vxd-nav > a,
.theme-supreme .vxd-dropdown > span {
  color: var(--c-text);
}
.theme-supreme .vxd-nav > a:hover,
.theme-supreme .vxd-dropdown:hover > span {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* dropdown */
.theme-supreme .vxd-dropdown-menu {
  background: rgba(5,10,16,0.7);
  border: 1px solid rgba(180,220,255,0.25);
  backdrop-filter: blur(8px);
}
.theme-supreme .vxd-dropdown-menu a {
  color: var(--c-text);
}
.theme-supreme .vxd-dropdown-menu a:hover {
  background: rgba(140,200,255,0.12);
  color: var(--c-accent);
}

/* block */
.theme-supreme .vxd-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(200,220,255,0.2);
  backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.04),
    0 0 10px rgba(150,200,255,0.12);
}


/* ============================================================
   THEME — OMEGA
   → Dynamic HSL engine controlled by JS
   → CSS vars injected:
      --vxd-base / --vxd-accent / --vxd-accent-soft / strong
============================================================ */

.theme-omega {
  background: linear-gradient(
    140deg,
    var(--vxd-grad-1) 0%,
    var(--vxd-grad-2) 100%
  );
  color: var(--vxd-base);
  transition: background .8s ease, color .8s ease;
}

/* header */
.theme-omega .vxd-header {
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid var(--vxd-accent);
  box-shadow: 0 0 18px var(--vxd-accent-strong);
}

/* menu */
.theme-omega .vxd-nav > a,
.theme-omega .vxd-dropdown > span {
  color: var(--vxd-accent-soft);
}
.theme-omega .vxd-nav > a:hover,
.theme-omega .vxd-dropdown:hover > span {
  color: var(--vxd-accent);
  border-color: var(--vxd-accent);
  text-shadow: 0 0 6px var(--vxd-accent);
}

/* dropdown */
.theme-omega .vxd-dropdown-menu {
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--vxd-accent);
  backdrop-filter: blur(9px);
  box-shadow: 0 0 18px var(--vxd-accent-strong);
}
.theme-omega .vxd-dropdown-menu a {
  color: var(--vxd-accent-soft);
}
.theme-omega .vxd-dropdown-menu a:hover {
  color: var(--vxd-accent);
  background: rgba(255,255,255,0.08);
  text-shadow: 0 0 6px var(--vxd-accent);
}

/* block */
.theme-omega .vxd-block {
  border: 1px solid var(--vxd-accent);
  background: rgba(0,0,0,0.35);
  box-shadow:
    inset 0 0 15px var(--vxd-accent-soft),
    0 0 10px var(--vxd-accent-strong);
}

/* footer */
.theme-omega #vxd-footer {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid var(--vxd-accent);
  box-shadow: 0 0 10px var(--vxd-accent);
  color: var(--vxd-accent-soft);
}
/* =================================================================
   PART 4 — BLOCKS / CONTENT CARDS
   Vetri + glow + shadow soft diversi per tema
================================================================= */

.vxd-block {
  padding: 18px;
  margin: 22px 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px) saturate(1.1);
  transition: background .3s, border-color .3s, box-shadow .3s;
  box-shadow: 0 0 10px #0005;
}

/* Hover (non aggressivo) */
.vxd-block:hover {
  border-color: #00f5ff55;
  box-shadow: 0 0 16px #00aaff33;
}


/* == Per-tema override blocks ============================ */

.theme-alba .vxd-block,
.theme-giorno .vxd-block {
  background: rgba(255,255,255,0.27);
  border-color: rgba(220,220,220,0.3);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,0.25),
    0 0 10px rgba(160,160,160,0.15);
}

.theme-sera .vxd-block {
  background: rgba(0,0,0,0.32);
  border-color: rgba(150,190,255,0.28);
  box-shadow:
    inset 0 0 12px rgba(130,170,255,0.15),
    0 0 10px rgba(100,140,255,0.22);
}

.theme-notte .vxd-block {
  background: rgba(0,0,0,0.28);
  border-color: rgba(0,255,255,0.22);
  box-shadow:
    inset 0 0 13px rgba(0,255,255,0.25),
    0 0 14px rgba(0,255,255,0.25);
}

.theme-aurum .vxd-block {
  background: rgba(20,20,20,0.55);
  border-color: #d4af3777;
  box-shadow:
    inset 0 0 14px #d4af3766,
    0 0 12px #d4af3733;
}

.theme-supreme .vxd-block {
  background: rgba(255,255,255,0.04);
  border-color: rgba(180,220,255,0.25);
  box-shadow:
    inset 0 0 14px rgba(160,220,255,0.20),
    0 0 12px rgba(160,220,255,0.22);
}

.theme-omega .vxd-block {
  background: rgba(0,0,0,0.33);
  border-color: var(--vxd-accent);
  box-shadow:
    inset 0 0 18px var(--vxd-accent-soft),
    0 0 14px var(--vxd-accent-strong);
}


/* =================================================================
   WIP BADGE — AUTO CONTRAST PER TEMA
================================================================= */

#vxd-wip-badge {
  position: fixed;
  bottom: 16px;
  left: 16px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(230,200,80,0.9);
  color: #111;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  z-index: 9900;
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 8px #0006,
    inset 0 0 10px rgba(255,255,255,0.25);
  transition: transform .22s, box-shadow .22s;
}

#vxd-wip-badge:hover {
  transform: scale(1.08);
  box-shadow: 0 0 12px #e8c547;
}

/* chiari */
.theme-alba #vxd-wip-badge,
.theme-giorno #vxd-wip-badge {
  background: rgba(255,255,255,0.65);
  color: #222;
  border: 1px solid rgba(180,160,80,0.35);
  box-shadow:
    0 0 10px rgba(120,100,40,0.2),
    inset 0 0 10px rgba(255,255,255,0.35);
}

.theme-alba #vxd-wip-badge:hover,
.theme-giorno #vxd-wip-badge:hover {
  box-shadow: 0 0 12px rgba(180,140,50,0.55);
}

/* omega */
.theme-omega #vxd-wip-badge {
  background: var(--vxd-accent);
  color:#000;
  box-shadow:
    0 0 10px var(--vxd-accent-strong),
    inset 0 0 10px var(--vxd-accent-soft);
}


/* =================================================================
   SYSTEM STATUS LED — CONTRAST FIX
================================================================= */

.theme-alba #vxd-status-led,
.theme-giorno #vxd-status-led {
  box-shadow: 0 0 7px #22cc44;
}

.theme-sera #vxd-status-led,
.theme-notte #vxd-status-led {
  box-shadow: 0 0 7px #27f573;
}

.theme-aurum #vxd-status-led {
  box-shadow: 0 0 7px #d4af37;
}

.theme-supreme #vxd-status-led {
  box-shadow: 0 0 7px #bde6ff;
}

.theme-omega #vxd-status-led {
  box-shadow: 0 0 8px var(--vxd-accent);
}


/* =================================================================
   MOBILE — THEME SWITCH SUPPORT (optional)
================================================================= */

#vxd-mobile-theme-switch {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid #3336;
}

#vxd-mobile-theme-switch button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #444;
  background: #111;
  color: #ddd;
  cursor: pointer;
  transition: .25s;
  font-size: 14px;
}
#vxd-mobile-theme-switch button:hover {
  color: #e8c547;
  border-color: #e8c547;
}
#vxd-mobile-theme-switch button.active {
  background: #e8c547;
  color:#111;
  border-color:#e8c547;
  box-shadow: 0 0 8px #e8c547;
}