/* =========================================================
   NEON DARK THEME — Videogame WhatsApp-like wallpaper
   Layout invariato, colori rinnovati
   ========================================================= */

/* --------- Vars --------- */
:root {
  /* base palette (più scura, neon) */
  --bg: #050913;
  --bg2: #0a0f1f;
  --txt: #e9f0ff;
  --muted: #a8b6d8;

  --neon: #33d4ff;
  /* ciano principale */
  --neon2: #7afdff;
  /* ciano soft */
  --accent: #ff46cf;
  /* magenta neon */
  --danger: #ff4d6d;

  /* surfaces */
  --panel: rgba(10, 15, 31, .70);
  --panel-strong: rgba(10, 15, 31, .92);
  --line: rgba(122, 253, 255, .25);

  /* avatar/dots */
  --ava: 40px;
  --dot: 12px;
  --ring: 2px;

  /* wallpaper density */
  --pat-size: 160px;
  /* più piccolo = più fitto */
}

/* --------- Reset/min --------- */
* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  color: var(--txt);
  font-family: Raleway, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x: hidden;
}

/* =========================================================
   AUTH / CARD
   ========================================================= */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
}

.auth-card {
  width: min(540px, 92vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  padding: 2.25rem 1.5rem 2rem;
  box-shadow: 0 0 34px rgba(51, 193, 255, .16), inset 0 0 40px rgba(51, 193, 255, .08);
  position: relative;
}

/* Brand/Logo */
.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1rem;
}

.brand-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex: 0 0 48px;
  background:
    radial-gradient(circle at 30% 30%, var(--neon2), var(--neon) 60%, transparent 61%),
    radial-gradient(circle at 72% 72%, var(--accent), transparent 40%);
  box-shadow: 0 0 16px var(--neon), inset 0 0 18px rgba(122, 253, 255, .35);
}

.brand-title {
  font-family: Orbitron, sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 1.35rem;
  text-shadow: 0 0 10px rgba(51, 193, 255, .6), 0 0 24px rgba(122, 253, 255, .4);
}

/* Glitch WELCOME */
.glowing-btn {
  --glow: 0 0 18px rgba(51, 193, 255, .6), 0 0 32px rgba(51, 193, 255, .35), 0 0 54px rgba(122, 253, 255, .25);
  border: none;
  background: none;
  margin: .25rem auto 1.25rem;
  display: block;
  cursor: default;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: Orbitron, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 6vw, 34px);
  color: var(--neon2);
  text-shadow: var(--glow);
  position: relative;
}

.glowing-txt .faulty-letter {
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}

.glowing-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  box-shadow: 0 0 22px rgba(51, 193, 255, .25);
}

/* Form */
.neon-label {
  font-size: .9rem;
  opacity: .9;
  margin-bottom: .35rem;
  display: block;
  text-shadow: 0 0 8px rgba(51, 193, 255, .35);
}

.neon-input {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(122, 253, 255, .25);
  background: rgba(8, 12, 28, .68);
  color: #e9f0ff;
  outline: none;
  transition: border .2s, box-shadow .2s;
}

.neon-input:focus {
  border-color: var(--neon);
  box-shadow: 0 0 0 4px rgba(51, 193, 255, .15), inset 0 0 20px rgba(51, 193, 255, .06);
}

.neon-cta {
  width: 100%;
  border: none;
  border-radius: 14px;
  color: #00111a;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .9rem 1rem;
  margin-top: .4rem;
  cursor: pointer;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  box-shadow: 0 8px 30px rgba(51, 193, 255, .35), 0 0 22px rgba(51, 193, 255, .35);
  transition: transform .06s ease, box-shadow .15s ease;
}

.neon-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 36px rgba(51, 193, 255, .5), 0 0 26px rgba(51, 193, 255, .4);
}

.neon-cta:active {
  transform: translateY(0);
}

.divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--muted);
  opacity: .85;
  margin: 1.2rem 0 .6rem;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(122, 253, 255, .35), transparent);
}

.link-muted {
  color: #c9d7ff;
  text-decoration: none;
}

.link-muted:hover {
  color: #fff;
  text-decoration: underline;
}

/* Inbox pill (hidden by default) */
#glw {
  display: none;
  margin: 0 auto 1rem;
  border: none;
  color: #00111a;
  font-weight: 800;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  padding: .5rem .9rem;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(51, 193, 255, .55);
}

/* Alert */
.alert-neon {
  background: rgba(255, 77, 109, .14);
  border: 1px solid rgba(255, 77, 109, .35);
  color: #ffd2dc;
  padding: .75rem 1rem;
  border-radius: 12px;
  margin: .75rem 0 0;
}

/* =========================================================
   jQuery UI dialog (#myAlert) – dark neon
   ========================================================= */
.ui-widget-overlay {
  background: rgba(0, 0, 0, .55) !important;
  backdrop-filter: blur(4px);
}

.ui-dialog[aria-describedby="myAlert"] {
  background: var(--panel-strong) !important;
  color: var(--txt) !important;
  border: 1px solid rgba(122, 253, 255, .28) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5), 0 0 28px rgba(51, 193, 255, .18), inset 0 0 28px rgba(51, 193, 255, .06) !important;
  overflow: hidden;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-titlebar {
  background: linear-gradient(180deg, rgba(22, 30, 54, .9), rgba(12, 18, 36, .9)) !important;
  border: none !important;
  color: var(--txt) !important;
  padding: .65rem .9rem !important;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-title {
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  text-shadow: 0 0 10px rgba(51, 193, 255, .6);
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-content {
  background: rgba(51, 193, 255, .10);
  border: 1px solid rgba(122, 253, 255, .35);
  box-shadow: inset 0 0 18px rgba(51, 193, 255, .12);
  border-radius: 12px;
  color: #fff;
  padding: 1rem !important;
  margin: .75rem .9rem 0 .9rem !important;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-buttonpane {
  background: transparent !important;
  border: none !important;
  padding: .8rem .9rem 1rem .9rem !important;
  margin-top: .6rem !important;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-buttonset {
  float: right !important;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-buttonpane .ui-button {
  border: none !important;
  border-radius: 12px !important;
  padding: .55rem 1.1rem !important;
  font-weight: 800 !important;
  color: #00111a !important;
  background: linear-gradient(90deg, var(--neon), var(--neon2)) !important;
  box-shadow: 0 8px 24px rgba(51, 193, 255, .35), 0 0 20px rgba(51, 193, 255, .35) !important;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-buttonpane .ui-button:focus {
  outline: 2px solid rgba(122, 253, 255, .6) !important;
  outline-offset: 2px;
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-buttonpane .ui-button:active {
  transform: translateY(1px);
}

.ui-dialog[aria-describedby="myAlert"] .ui-dialog-titlebar-close {
  display: none !important;
}

/* =========================================================
   Header / Navbar (dark glass)
   ========================================================= */
.neon-header__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.neon-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--txt);
  text-decoration: none;
}

.neon-brand__badge {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: 0 0 38px;
  background:
    radial-gradient(circle at 28% 28%, var(--neon2), var(--neon) 60%, transparent 61%),
    radial-gradient(circle at 74% 74%, var(--accent), transparent 40%);
  box-shadow: 0 0 14px var(--neon), inset 0 0 16px rgba(122, 253, 255, .3);
}

.neon-brand__text {
  font: 800 1rem/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .12em;
  color: var(--txt);
  text-shadow: 0 0 8px rgba(51, 193, 255, .55), 0 0 18px rgba(122, 253, 255, .35);
}

/* Sticky dark-glass bar */
.neon-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(6px);
  background: rgba(12, 16, 28, .82);
  border-bottom: 1px solid rgba(122, 253, 255, .15);
}

/* Social buttons */
.neon-social {
  display: flex;
  align-items: center;
  gap: 22px;
}

.neon-icon-btn {
  --size: 56px;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  color: var(--txt);
  text-decoration: none;
  border-radius: 16px;
  background: linear-gradient(180deg, #0e1426, #0a0f1f);
  box-shadow: inset 0 0 0 2px rgba(122, 253, 255, .18), 0 0 16px rgba(51, 193, 255, .12);
  position: relative;
  transition: transform .12s ease, box-shadow .2s ease, color .2s ease;
}

.neon-icon-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  box-shadow: 0 0 18px rgba(51, 193, 255, .35), 0 0 36px rgba(51, 193, 255, .18);
  opacity: .7;
  transition: opacity .2s ease, inset .2s ease;
}

.neon-icon-btn i {
  font-size: 1.35rem;
  filter: drop-shadow(0 0 6px rgba(51, 193, 255, .45));
}

.neon-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(122, 253, 255, .28), 0 6px 26px rgba(51, 193, 255, .28);
  color: #fff;
}

.neon-icon-btn:hover::after {
  inset: -6px;
  opacity: 1;
}

@media (max-width:680px) {
  .neon-header__wrap {
    flex-direction: column;
    gap: .6rem;
  }

  .neon-brand__text {
    font-size: .95rem;
  }
}

/* Tagline */
.tagline-hero {
  margin: .35rem 0 0;
  font-family: "Orbitron", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(233, 240, 255, .9);
  text-align: center;
  font-size: clamp(.72rem, 1.7vw, 1rem);
  text-shadow: 0 0 10px rgba(51, 193, 255, .35);
  position: relative;
}

.tagline-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  transform: skewX(-12deg) translateX(-120%);
  animation: tagline-sheen 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes tagline-sheen {
  0% {
    transform: skewX(-12deg) translateX(-120%);
  }

  45%,
  100% {
    transform: skewX(-12deg) translateX(120%);
  }
}

.tag-accent {
  color: #7afdff;
  text-shadow: 0 0 6px #33c1ff, 0 0 16px rgba(51, 193, 255, .65);
}

.tag-accent-2 {
  color: #37ffb0;
  text-shadow: 0 0 6px #37ffb0, 0 0 16px rgba(55, 255, 176, .65);
}

.neon-tagline {
  margin-left: auto;
  font: 800 .72rem/1 "Orbitron", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1e3f50;
  opacity: .9;
  text-shadow: 2px 2px 8px rgba(153, 22, 57, .5);
}

@media (max-width:680px) {
  .neon-header__wrap {
    gap: .4rem;
  }

  .neon-tagline {
    margin-left: 0;
  }
}

/* =========================================================
   Likes / Avatars / Misc
   ========================================================= */
.like-compact {
  cursor: pointer;
  user-select: none;
}

.heart-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.heart-neon {
  color: #000;
  text-shadow: 0 0 3px var(--neon), 0 0 6px var(--neon), 0 0 10px var(--neon), 0 0 16px var(--neon);
  transition: text-shadow .2s ease, transform .15s ease;
}

.like-compact:hover .heart-neon,
.like-compact.liked .heart-neon {
  text-shadow: 0 0 5px var(--neon), 0 0 12px var(--neon), 0 0 22px var(--neon), 0 0 32px var(--neon);
  transform: scale(1.08);
}

.heart-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  text-shadow: 0 0 2px var(--neon), 0 0 6px var(--neon), 0 0 10px var(--neon);
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
  animation: heart-fly var(--dur, 900ms) ease-out forwards;
}

@keyframes heart-fly {
  0% {
    transform: translate(-50%, -50%) scale(var(--startScale, .6)) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, -140px))) scale(var(--scale, 1.1)) rotate(var(--rot, 0deg));
    opacity: 0;
  }
}

.rounded-2xl {
  border-radius: 1rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.sticky-cta {
  position: sticky;
  top: 1rem;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dc1b1b;
  vertical-align: middle;
  margin-left: .35rem;
}

.status-dot.online {
  background: #22c55e;
}

.avatar-wrap {
  position: relative;
  display: inline-block;
  width: var(--ava);
  height: var(--ava);
  line-height: 0;
  vertical-align: middle;
}

.avatar-wrap .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-wrap .status-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: var(--dot);
  height: var(--dot);
  margin: 0;
  border-radius: 50%;
  background: #dc1b1b;
  border: var(--ring) solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.avatar-wrap .status-dot.online {
  background: #22c55e;
}

img.avatar+.avatar-badge,
img.avatar-img+.avatar-badge {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}

.badge-gamer {
  background-image: url('/onceadev.it/images/badges/gamer.svg');
}

.badge-dev {
  background-image: url('/onceadev.it/images/badges/dev.svg');
}

.badge-fly {
  position: fixed;
  z-index: 9999;
  top: 30vh;
  left: 50vw;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .9s cubic-bezier(.22, .68, 0, 1.12), opacity .9s ease;
  box-shadow: 0 0 20px rgba(255, 255, 255, .35), 0 0 38px rgba(34, 184, 255, .35);
  pointer-events: none;
}

.badge-fly.gamer {
  background-image: url('/onceadev.it/images/badges/gamer.svg');
}

.badge-fly.dev {
  background-image: url('/onceadev.it/images/badges/dev.svg');
}

/* Carousel safe */
.carousel.video-safe {
  touch-action: pan-y;
}

.carousel.video-safe .carousel-control-prev,
.carousel.video-safe .carousel-control-next {
  width: 3rem;
  pointer-events: none;
}

.carousel.video-safe .carousel-control-prev .carousel-control-prev-icon,
.carousel.video-safe .carousel-control-next .carousel-control-next-icon {
  pointer-events: auto;
}

.chat-img,
.chat-video {
  max-width: 100%;
  border-radius: 12px;
  display: block;
}

/* Mobile bottom bar */
nav.fixed-bottom.d-lg-none {
  background-color: var(--neon) !important;
}

/* =========================================================
   WhatsApp-like videogame wallpaper (apply to .page-app)
   ========================================================= */
.page-app {
  background: transparent !important;
  color: var(--txt);
}

.page-app.vg-paper {
  background-image:
    /* layer 1: cyan icons */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2337d7ff' stroke-width='1.6' opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36h16V22h12v14h16v12H46v16H34V48H18z'/%3E%3Ccircle cx='152' cy='44' r='10'/%3E%3Ccircle cx='170' cy='60' r='6'/%3E%3Crect x='114' y='122' width='42' height='24' rx='6'/%3E%3Cpath d='M20 140c12-6 24-6 36 0s24 6 36 0'/%3E%3Cpath d='M104 28l16 16m0-16l-16 16'/%3E%3Ccircle cx='46' cy='170' r='12'/%3E%3Ccircle cx='46' cy='170' r='7'/%3E%3Cpath d='M92 60l4 8h8l-6 4 3 8-9-5-9 5 3-8-6-4h8z'/%3E%3Cpath d='M140 88c22-14 40-14 56 0'/%3E%3C/g%3E%3C/svg%3E"),
    /* layer 2: magenta icons (offset) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff46cf' stroke-width='1.6' opacity='.11' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='116' width='52' height='22' rx='11'/%3E%3Ccircle cx='64' cy='126' r='3'/%3E%3Ccircle cx='72' cy='132' r='3'/%3E%3Cpath d='M40 127h-6m24 0h6m-12-12v6m0 12v6'/%3E%3Crect x='132' y='18' width='14' height='14'/%3E%3Crect x='146' y='18' width='14' height='14'/%3E%3Crect x='146' y='32' width='14' height='14'/%3E%3Crect x='160' y='32' width='14' height='14'/%3E%3Cpath d='M170 160l12 22h-24z'/%3E%3Cpath d='M44 78c-22-14-40-14-56 0'/%3E%3Crect x='96' y='92' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    /* glow layers under */
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;

  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--pat-size) var(--pat-size), var(--pat-size) var(--pat-size), auto, auto, auto !important;
  background-position: top left, calc(var(--pat-size)/2) calc(var(--pat-size)/2), center, center, center !important;
  background-attachment: scroll, scroll, scroll, scroll, scroll !important;
}

/* densità alternativa su schermi piccoli */
@media (max-width:768px) {
  :root {
    --pat-size: 140px;
  }
}



/* ================= NAVBAR DARK GLASS (copre tutti i casi) ================= */
.navbar,
.navbar-blur,
#header,
.neon-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(12, 16, 28, .86) !important;
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(122, 253, 255, .18) !important;
  color: var(--txt) !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
#header .nav-link {
  color: var(--txt) !important;
  text-shadow: 0 0 6px rgba(51, 193, 255, .35);
}

.navbar .nav-link:hover,
#header .nav-link:hover {
  color: #fff !important;
}

.navbar .navbar-toggler {
  border-color: rgba(122, 253, 255, .35);
}

.navbar .navbar-toggler-icon {
  filter: invert(1) drop-shadow(0 0 6px rgba(51, 193, 255, .45));
}

/* ================= SFONDO PAGINA ================= */
/* fai in modo che .page-app copra sempre tutta la viewport */
.page-app {
  min-height: 100vh;
}

/* base dark gradient (fallback se NON usi il pattern vg-paper) */
.page-app:not(.vg-paper) {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  color: var(--txt);
}

/* pattern stile WhatsApp (resta il tuo) */
.page-app.vg-paper {
  background-image:
    /* cyan icons */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2337d7ff' stroke-width='1.6' opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36h16V22h12v14h16v12H46v16H34V48H18z'/%3E%3Ccircle cx='152' cy='44' r='10'/%3E%3Ccircle cx='170' cy='60' r='6'/%3E%3Crect x='114' y='122' width='42' height='24' rx='6'/%3E%3Cpath d='M20 140c12-6 24-6 36 0s24 6 36 0'/%3E%3Cpath d='M104 28l16 16m0-16l-16 16'/%3E%3Ccircle cx='46' cy='170' r='12'/%3E%3Ccircle cx='46' cy='170' r='7'/%3E%3Cpath d='M92 60l4 8h8l-6 4 3 8-9-5-9 5 3-8-6-4h8z'/%3E%3Cpath d='M140 88c22-14 40-14 56 0'/%3E%3C/g%3E%3C/svg%3E"),
    /* magenta icons offset */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff46cf' stroke-width='1.6' opacity='.11' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='116' width='52' height='22' rx='11'/%3E%3Ccircle cx='64' cy='126' r='3'/%3E%3Ccircle cx='72' cy='132' r='3'/%3E%3Cpath d='M40 127h-6m24 0h6m-12-12v6m0 12v6'/%3E%3Crect x='132' y='18' width='14' height='14'/%3E%3Crect x='146' y='18' width='14' height='14'/%3E%3Crect x='146' y='32' width='14' height='14'/%3E%3Crect x='160' y='32' width='14' height='14'/%3E%3Cpath d='M170 160l12 22h-24z'/%3E%3Cpath d='M44 78c-22-14-40-14-56 0'/%3E%3Crect x='96' y='92' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    /* glow */
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--pat-size) var(--pat-size), var(--pat-size) var(--pat-size), auto, auto, auto !important;
  background-position: top left, calc(var(--pat-size)/2) calc(var(--pat-size)/2), center, center, center !important;
}

/* ================= SURFACES SCURE (niente più “metà bianca”) ================= */
.card {
  background: var(--panel) !important;
  color: var(--txt);
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25), 0 0 18px rgba(51, 193, 255, .08);
}

.offcanvas {
  background: var(--panel-strong) !important;
  color: var(--txt);
}

/* bottoni outline leggibili su dark */
.btn-outline-secondary {
  color: #cfe9ff;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}

.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

/* densità pattern su mobile un filo più fitta */
@media (max-width:768px) {
  :root {
    --pat-size: 140px;
  }
}



/* Toggle tema: pillola fissa in alto a destra */
.neon-toggle {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 1100;
  border: 1px solid rgba(122, 253, 255, .35);
  background: linear-gradient(180deg, #0e1426, #0a0f1f);
  color: #e9f0ff;
  padding: .45rem .8rem;
  border-radius: 12px;
  font: 700 .9rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  box-shadow: 0 0 10px rgba(51, 193, 255, .45);
}

.neon-toggle:hover {
  filter: brightness(1.08);
}

/* Safety net: lo sfondo non “buca” mai */
.page-app {
  min-height: 100vh;
}

.page-app.vg-paper,
.page-app.vg-paper>.container,
.page-app.vg-paper>.container-fluid,
.page-app.vg-paper main {
  background-color: transparent !important;
}

/* Card/offcanvas sempre coerenti col tema corrente */
.page-app .card {
  background: var(--panel) !important;
  color: var(--txt);
  border: 1px solid var(--line) !important;
}

.page-app .offcanvas {
  background: var(--panel-strong) !important;
  color: var(--txt);
}

/* Navbar glass nei due temi */
.page-app .navbar,
.page-app .navbar-blur,
.page-app #header,
.page-app .neon-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(12, 16, 28, .86) !important;
  border-bottom: 1px solid rgba(122, 253, 255, .18) !important;
  color: var(--txt) !important;
}

.page-app[data-bs-theme="light"] .navbar,
.page-app[data-bs-theme="light"] #header,
.page-app[data-bs-theme="light"] .neon-header {
  background: rgba(255, 255, 255, .78) !important;
  border-bottom-color: rgba(20, 150, 255, .25) !important;
}

/* LIGHT theme (neon, non “facebook”) */
.page-app[data-bs-theme="light"] {
  --bg: #eaf2ff;
  --bg2: #f7faff;
  --txt: #0f1b2f;
  --muted: #5f6f8d;
  --neon: #14d3ff;
  --neon2: #8af3ff;
  --accent: #ff4ed6;
  --panel: rgba(255, 255, 255, .86);
  --panel-strong: rgba(255, 255, 255, .96);
  --line: rgba(20, 150, 255, .28);
  --pat-size: 180px;
}

/* pattern più visibile su light + base color anti-buchi */
.page-app.vg-paper[data-bs-theme="light"] {
  background-color: var(--bg2);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2314d3ff' stroke-width='1.6' opacity='.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36h16V22h12v14h16v12H46v16H34V48H18z'/%3E%3Ccircle cx='152' cy='44' r='10'/%3E%3Ccircle cx='170' cy='60' r='6'/%3E%3Crect x='114' y='122' width='42' height='24' rx='6'/%3E%3Cpath d='M20 140c12-6 24-6 36 0s24 6 36 0'/%3E%3Cpath d='M104 28l16 16m0-16l-16 16'/%3E%3Ccircle cx='46' cy='170' r='12'/%3E%3Ccircle cx='46' cy='170' r='7'/%3E%3Cpath d='M92 60l4 8h8l-6 4 3 8-9-5-9 5 3-8-6-4h8z'/%3E%3Cpath d='M140 88c22-14 40-14 56 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff4ed6' stroke-width='1.6' opacity='.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='116' width='52' height='22' rx='11'/%3E%3Ccircle cx='64' cy='126' r='3'/%3E%3Ccircle cx='72' cy='132' r='3'/%3E%3Cpath d='M40 127h-6m24 0h6m-12-12v6m0 12v6'/%3E%3Crect x='132' y='18' width='14' height='14'/%3E%3Crect x='146' y='18' width='14' height='14'/%3E%3Crect x='146' y='32' width='14' height='14'/%3E%3Crect x='160' y='32' width='14' height='14'/%3E%3Cpath d='M170 160l12 22h-24z'/%3E%3Cpath d='M44 78c-22-14-40-14-56 0'/%3E%3Crect x='96' y='92' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 80% -10%, rgba(20, 150, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 78, 214, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
}

/* densità pattern mobile */
@media (max-width:768px) {
  :root {
    --pat-size: 140px;
  }
}


/* ---- Card header che avevano bg-white nei file PHP ---- */
.page-app .card-header {
  background: rgba(255, 255, 255, .06) !important;
  /* dark glass */
  color: var(--txt) !important;
  border-bottom: 1px solid var(--line) !important;
}

.page-app[data-bs-theme="light"] .card-header {
  background: rgba(255, 255, 255, .78) !important;
  /* light glass */
}

/* ---- List-group bianco di default: neutralizza SOLO dove metti .neon-list ---- */
.page-app .neon-list .list-group-item,
.page-app .neon-list .list-group-item-action {
  background-color: transparent !important;
  color: var(--txt) !important;
  border-color: color-mix(in srgb, var(--line) 85%, transparent) !important;
}

.page-app .neon-list .list-group-item-action:hover,
.page-app .neon-list .list-group-item-action:focus {
  background-color: rgba(255, 255, 255, .06) !important;
}

.page-app[data-bs-theme="light"] .neon-list .list-group-item-action:hover,
.page-app[data-bs-theme="light"] .neon-list .list-group-item-action:focus {
  background-color: rgba(0, 0, 0, .04) !important;
}

/* ---- Offcanvas coerente ---- */
.page-app .offcanvas {
  background: var(--panel-strong) !important;
  color: var(--txt);
}

.page-app .offcanvas-header {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--txt) !important;
}

/* ---- Toggle tema: dentro navbar → fluido su mobile, fisso solo desktop ---- */
.neon-toggle {
  border: 1px solid rgba(122, 253, 255, .35);
  background: linear-gradient(180deg, #0e1426, #0a0f1f);
  color: #e9f0ff;
  padding: .45rem .8rem;
  border-radius: 12px;
  font: 700 .9rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  box-shadow: 0 0 10px rgba(51, 193, 255, .45);
}

/* desktop (≥992px): lo stacchiamo in alto a destra come “utility” */
@media (min-width: 992px) {
  .neon-toggle.nav-theme {
    position: fixed;
    right: 14px;
    top: 14px;
    z-index: 1100;
  }
}

/* mobile (<992px): niente fixed; allineato a destra nella navbar */
@media (max-width: 991.98px) {
  .navbar .neon-toggle.nav-theme {
    position: static;
    margin-left: auto;
    /* lo spinge a destra */
    order: 3;
    /* dopo brand e burger */
  }
}

/* Navbar glass (resta sopra) */
.page-app .navbar,
.page-app #header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(8px);
  background: rgba(12, 16, 28, .86) !important;
  border-bottom: 1px solid rgba(122, 253, 255, .18) !important;
  color: var(--txt) !important;
}

.page-app[data-bs-theme="light"] .navbar,
.page-app[data-bs-theme="light"] #header {
  background: rgba(255, 255, 255, .78) !important;
  border-bottom-color: rgba(20, 150, 255, .25) !important;
}

/* Safety: wrapper copre tutto lo scroll e i container non mettono sfondi */
.page-app {
  min-height: 100vh;
}

.page-app.vg-paper,
.page-app.vg-paper>.container,
.page-app.vg-paper>.container-fluid,
.page-app.vg-paper main {
  background-color: transparent !important;
}



/* Header delle card che prima erano .bg-white */
.page-app .card-header {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--txt) !important;
  border-bottom: 1px solid var(--line) !important;
}

.page-app[data-bs-theme="light"] .card-header {
  background: rgba(255, 255, 255, .78) !important;
}

/* List-group: applica solo dove hai messo .neon-list */
.page-app .neon-list .list-group-item,
.page-app .neon-list .list-group-item-action {
  background-color: transparent !important;
  color: var(--txt) !important;
  border-color: color-mix(in srgb, var(--line) 85%, transparent) !important;
}

.page-app .neon-list .list-group-item-action:hover,
.page-app .neon-list .list-group-item-action:focus {
  background-color: rgba(255, 255, 255, .06) !important;
}

.page-app[data-bs-theme="light"] .neon-list .list-group-item-action:hover,
.page-app[data-bs-theme="light"] .neon-list .list-group-item-action:focus {
  background-color: rgba(0, 0, 0, .04) !important;
}

/* Toggle tema nella navbar: fluido su mobile, fisso su desktop */
.neon-toggle {
  border: 1px solid rgba(122, 253, 255, .35);
  background: linear-gradient(180deg, #0e1426, #0a0f1f);
  color: #e9f0ff;
  padding: .45rem .8rem;
  border-radius: 12px;
  font: 700 .9rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  box-shadow: 0 0 10px rgba(51, 193, 255, .45);
}

@media (min-width: 992px) {
  .neon-toggle.nav-theme {
    position: fixed;
    right: 14px;
    top: 14px;
    z-index: 1100;
  }
}

@media (max-width: 991.98px) {
  .navbar .neon-toggle.nav-theme {
    position: static;
    margin-left: auto;
    order: 3;
  }
}

/* Offcanvas coerente col tema */
.page-app .offcanvas {
  background: var(--panel-strong) !important;
  color: var(--txt);
}

.page-app .offcanvas-header {
  background: transparent !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--txt) !important;
}

/* Safety: wallpaper senza “buchi” */
.page-app {
  min-height: 100vh;
}

.page-app.vg-paper,
.page-app.vg-paper>.container,
.page-app.vg-paper>.container-fluid,
.page-app.vg-paper main {
  background-color: transparent !important;
}



/* === Theme bound to BODY so container widths don't change === */
body.page-app {
  min-height: 100vh;
  color: var(--txt);
  background: transparent !important;
}

body.page-app:not(.vg-paper) {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
}

body.page-app.vg-paper {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2337d7ff' stroke-width='1.6' opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36h16V22h12v14h16v12H46v16H34V48H18z'/%3E%3Ccircle cx='152' cy='44' r='10'/%3E%3Ccircle cx='170' cy='60' r='6'/%3E%3Crect x='114' y='122' width='42' height='24' rx='6'/%3E%3Cpath d='M20 140c12-6 24-6 36 0s24 6 36 0'/%3E%3Cpath d='M104 28l16 16m0-16l-16 16'/%3E%3Ccircle cx='46' cy='170' r='12'/%3E%3Ccircle cx='46' cy='170' r='7'/%3E%3Cpath d='M92 60l4 8h8l-6 4 3 8-9-5-9 5 3-8-6-4h8z'/%3E%3Cpath d='M140 88c22-14 40-14 56 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff46cf' stroke-width='1.6' opacity='.11' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='116' width='52' height='22' rx='11'/%3E%3Ccircle cx='64' cy='126' r='3'/%3E%3Ccircle cx='72' cy='132' r='3'/%3E%3Cpath d='M40 127h-6m24 0h6m-12-12v6m0 12v6'/%3E%3Crect x='132' y='18' width='14' height='14'/%3E%3Crect x='146' y='18' width='14' height='14'/%3E%3Crect x='146' y='32' width='14' height='14'/%3E%3Crect x='160' y='32' width='14' height='14'/%3E%3Cpath d='M170 160l12 22h-24z'/%3E%3Cpath d='M44 78c-22-14-40-14-56 0'/%3E%3Crect x='96' y='92' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2)) !important;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: var(--pat-size) var(--pat-size), var(--pat-size) var(--pat-size), auto, auto, auto !important;
  background-position: top left, calc(var(--pat-size)/2) calc(var(--pat-size)/2), center, center, center !important;
}

body.page-app.vg-paper>.container,
body.page-app.vg-paper>.container-fluid,
body.page-app.vg-paper main {
  background-color: transparent !important;
}

/* Cards/opacità: SOLIDE */
.page-app .card {
  background: var(--panel) !important;
}

.page-app .offcanvas {
  background: var(--panel-strong) !important;
}

/* Header che erano .bg-white nei PHP */
.page-app .card-header.bg-white {
  background: color-mix(in srgb, var(--panel) 92%, #fff 8%) !important;
  color: var(--txt) !important;
}

/* Rendi le card più solide (meno trasparenti) in tutto il contesto .page-app */
.page-app[data-bs-theme="dark"] .card {
  background: var(--panel-strong) !important;
  /* usa la superficie più piena */
}


/* 1) Il BODY deve avere una base scura vera (anche se Bootstrap spara var(--bs-body-bg)) */
body#appRoot.page-app.vg-paper[data-bs-theme="dark"] {
  --bs-body-bg: transparent;
  background-color: var(--bg) !important;
  /* base scura sotto al pattern */
}

/* 2) Il main e i wrapper di layout NON devono dipingere alcun fondo */
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4,
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4>.row,
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4>.row>[class*="col-"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--txt) !important;
}

/* 3) Se dentro al main qualcuno usa utility Bootstrap bg-* sui wrapper, annullale lì (ma NON tocco le .card) */
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4 .bg-white,
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4 .bg-light,
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4 .bg-body,
body#appRoot.page-app.vg-paper[data-bs-theme="dark"]>main.container.my-4 .bg-body-tertiary {
  background-color: transparent !important;
  background-image: none !important;
}

/* Card BEN opache in dark */
body#appRoot.page-app.vg-paper[data-bs-theme="dark"] .card {
  background-color: var(--panel-strong) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
}


/* Paint the wallpaper/glow on ONE element only */
body#appRoot.page-app.vg-paper {
  /* keep your 5-layer background exactly as you have it */
}

/* Kill duplicate backgrounds so there’s no overlap */
.page-app {
  background: transparent !important;
}

.page-app.vg-paper {
  background: none !important;
}

.page-app>.container,
.page-app>.container-fluid,
.page-app main {
  background: transparent !important;
}

/* If you prefer the wallpaper on .page-app instead, flip it:
   - move the background to .page-app.vg-paper
   - then force body to be transparent */



/* 1) Unico pittore: livello fisso sotto tutta la pagina */
body.page-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* ⬇️ usa qui ESATTAMENTE il tuo background di vg-paper (dark) */
  background:
    url("data:image/svg+xml,%3Csvg ... cyan ... %3E") repeat,
    url("data:image/svg+xml,%3Csvg ... magenta ... %3E") repeat,
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-size: var(--pat-size) var(--pat-size), var(--pat-size) var(--pat-size), auto, auto, auto;
  background-position: top left, calc(var(--pat-size)/2) calc(var(--pat-size)/2), center, center, center;
}

/* (opzionale) variante light */
body.page-app[data-bs-theme="light"]::before {
  /* incolla qui la versione light del tuo vg-paper */
}

/* 2) Tutto il resto NON dipinge sfondi: così my-4 = vg-paper */
.page-app,
.page-app.vg-paper,
.page-app>.container,
.page-app>.container-fluid,
.page-app main,
.container.my-4 {
  background: transparent !important;
}

/* 3) Card/offcanvas restano solide come vuoi tu */
.page-app .card {
  background: var(--panel) !important;
}

.page-app[data-bs-theme="dark"] .card {
  background: var(--panel-strong) !important;
}

.page-app .offcanvas {
  background: var(--panel-strong) !important;
}


/* crea uno stacking context per tenere ::before dietro ma visibile */
body.page-app {
  isolation: isolate;
}

/* WALLPAPER unico (DARK) */
body.page-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    /* layer 1: cyan icons */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2337d7ff' stroke-width='1.6' opacity='.12' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36h16V22h12v14h16v12H46v16H34V48H18z'/%3E%3Ccircle cx='152' cy='44' r='10'/%3E%3Ccircle cx='170' cy='60' r='6'/%3E%3Crect x='114' y='122' width='42' height='24' rx='6'/%3E%3Cpath d='M20 140c12-6 24-6 36 0s24 6 36 0'/%3E%3Cpath d='M104 28l16 16m0-16l-16 16'/%3E%3Ccircle cx='46' cy='170' r='12'/%3E%3Ccircle cx='46' cy='170' r='7'/%3E%3Cpath d='M92 60l4 8h8l-6 4 3 8-9-5-9 5 3-8-6-4h8z'/%3E%3Cpath d='M140 88c22-14 40-14 56 0'/%3E%3C/g%3E%3C/svg%3E"),
    /* layer 2: magenta icons (offset) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff46cf' stroke-width='1.6' opacity='.11' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='116' width='52' height='22' rx='11'/%3E%3Ccircle cx='64' cy='126' r='3'/%3E%3Ccircle cx='72' cy='132' r='3'/%3E%3Cpath d='M40 127h-6m24 0h6m-12-12v6m0 12v6'/%3E%3Crect x='132' y='18' width='14' height='14'/%3E%3Crect x='146' y='18' width='14' height='14'/%3E%3Crect x='146' y='32' width='14' height='14'/%3E%3Crect x='160' y='32' width='14' height='14'/%3E%3Cpath d='M170 160l12 22h-24z'/%3E%3Cpath d='M44 78c-22-14-40-14-56 0'/%3E%3Crect x='96' y='92' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    /* glow layers */
    radial-gradient(1200px 600px at 80% -10%, rgba(51, 193, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 70, 207, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: var(--pat-size) var(--pat-size), var(--pat-size) var(--pat-size), auto, auto, auto;
  background-position: top left, calc(var(--pat-size)/2) calc(var(--pat-size)/2), center, center, center;
}

/* WALLPAPER unico (LIGHT) */
body.page-app[data-bs-theme="light"]::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2314d3ff' stroke-width='1.6' opacity='.16' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 36h16V22h12v14h16v12H46v16H34V48H18z'/%3E%3Ccircle cx='152' cy='44' r='10'/%3E%3Ccircle cx='170' cy='60' r='6'/%3E%3Crect x='114' y='122' width='42' height='24' rx='6'/%3E%3Cpath d='M20 140c12-6 24-6 36 0s24 6 36 0'/%3E%3Cpath d='M104 28l16 16m0-16l-16 16'/%3E%3Ccircle cx='46' cy='170' r='12'/%3E%3Ccircle cx='46' cy='170' r='7'/%3E%3Cpath d='M92 60l4 8h8l-6 4 3 8-9-5-9 5 3-8-6-4h8z'/%3E%3Cpath d='M140 88c22-14 40-14 56 0'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ff4ed6' stroke-width='1.6' opacity='.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='26' y='116' width='52' height='22' rx='11'/%3E%3Ccircle cx='64' cy='126' r='3'/%3E%3Ccircle cx='72' cy='132' r='3'/%3E%3Cpath d='M40 127h-6m24 0h6m-12-12v6m0 12v6'/%3E%3Crect x='132' y='18' width='14' height='14'/%3E%3Crect x='146' y='18' width='14' height='14'/%3E%3Crect x='146' y='32' width='14' height='14'/%3E%3Crect x='160' y='32' width='14' height='14'/%3E%3Cpath d='M170 160l12 22h-24z'/%3E%3Cpath d='M44 78c-22-14-40-14-56 0'/%3E%3Crect x='96' y='92' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(1200px 600px at 80% -10%, rgba(20, 150, 255, .18), transparent 60%),
    radial-gradient(900px 500px at -20% 110%, rgba(255, 78, 214, .14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size: var(--pat-size) var(--pat-size), var(--pat-size) var(--pat-size), auto, auto, auto;
  background-position: top left, calc(var(--pat-size)/2) calc(var(--pat-size)/2), center, center, center;
}

/* Tutto il resto è trasparente → my-4 “= vg-paper” */
.page-app,
.page-app.vg-paper,
.page-app>.container,
.page-app>.container-fluid,
.page-app main,
.container.my-4 {
  background: transparent !important;
}



/* Card davvero SOLIDA (niente trasparenza / niente pattern in trasparenza) */
.page-app .card.card-solid {
  /* stratifico: livello 1 pieno = var(--panel-strong); livello 2 = colore base, così non si vede il wallpaper */
  background: linear-gradient(0deg, var(--panel-strong), var(--panel-strong)), var(--bg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 18px rgba(51, 193, 255, .12);
}

.page-app .card.card-solid .card-header {
  background: linear-gradient(0deg, var(--panel-strong), var(--panel-strong)) !important;
  border-bottom: 1px solid var(--line) !important;
}

/* (facoltativo) assicura che i body non introducano trasparenze */
.page-app .card.card-solid .card-body {
  background: transparent !important;
  /* resta solido perché il parent è già pieno */
}


/* ——— Suggerimenti amici: pieno su mobile ——— */
@media (max-width: 991.98px) {
  .page-app .card.card-solid {
    /* niente trasparenze / niente glass */
    background: linear-gradient(0deg, var(--panel-strong), var(--panel-strong)) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 18px rgba(51, 193, 255, .12);
    backdrop-filter: none !important;
  }

  .page-app .card.card-solid .card-header {
    background: linear-gradient(0deg, var(--panel-strong), var(--panel-strong)) !important;
    border-bottom: 1px solid var(--line) !important;
    backdrop-filter: none !important;
  }
}




/* ——— Suggerimenti Amici (mobile): menu solido, niente vetro ——— */
@media (max-width: 991.98px) {

  /* La dropdown dei suggerimenti (quella aperta dal bottone #friendsSuggMenuMobile) */
  #friendsSuggMenuMobile+.dropdown-menu {
    background: var(--panel-strong) !important;
    color: var(--txt) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 18px rgba(51, 193, 255, .12);
    backdrop-filter: none !important;
    /* elimina l'effetto vetro */
  }

  /* L’header sticky che avevi con bg-white → usa la superficie solida del tema */
  #friendsSuggMenuMobile+.dropdown-menu .bg-white.sticky-top {
    background: var(--panel-strong) !important;
    color: var(--txt) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* Testi/righe interne leggibili su fondo scuro/chiaro */
  #friendsSuggMenuMobile+.dropdown-menu .d-flex.align-items-center.mb-3,
  #friendsSuggMenuMobile+.dropdown-menu .dropdown-item,
  #friendsSuggMenuMobile+.dropdown-menu .list-group-item,
  #friendsSuggMenuMobile+.dropdown-menu .list-group-item-action {
    background-color: transparent !important;
    /* il parent è già pieno */
    color: var(--txt) !important;
    border-color: color-mix(in srgb, var(--line) 85%, transparent) !important;
  }

  /* Se vuoi un hover appena percettibile */
  #friendsSuggMenuMobile+.dropdown-menu .dropdown-item:hover,
  #friendsSuggMenuMobile+.dropdown-menu .list-group-item-action:hover {
    background-color: rgba(255, 255, 255, .06) !important;
  }
}

/* (opzionale) Se anche l’offcanvas amici (non la dropdown) fosse vetroso su mobile */
@media (max-width: 991.98px) {
  #offcanvasFriends {
    background: var(--panel-strong) !important;
    color: var(--txt) !important;
    backdrop-filter: none !important;
    border-left: 1px solid var(--line) !important;
  }

  #offcanvasFriends .offcanvas-header {
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
  }
}