/* ================== Palette PepsiLand (lilla/bianco/grigio) ================== */
:root{
  --bg: #0b1020;             /* sfondo profondo */
  --panel: #ffffff;          /* pannelli bianchi */
  --text: #0f172a;           /* testo scuro */
  --muted: #64748b;          /* testo secondario */
  --card: #ffffff;           /* card */
  --ring: rgba(15,23,42,.08);
  --accent: #7c3aed;         /* LILLA primario */
  --accent-600: #6d28d9;
  --accent-100: #ede9fe;
  --gray-50: #f8fafc;
  --gray-100: #eef2f7;
  --gray-200: #e5e7eb;
}

/* ================== Topbar rivista ================== */
.topbar{
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(124,58,237,0.12), rgba(124,58,237,0.00)) , #ffffff;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-200);
}
.topbar .row{ gap: 14px; padding: 10px 16px; }

/* Brand con logo */
.brand-link{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.brand-logo{
  width: 28px; height: 28px; border-radius: 6px; display: block;
  box-shadow: 0 2px 8px rgba(124,58,237,.25);
}
.brand-text{ display:flex; align-items:center; gap:8px; }
.brand-sub{
  font-size: .75rem; color: #fff; background: var(--accent);
  padding: 2px 8px; border-radius: 999px; letter-spacing: .2px;
}

/* Hamburger più visibile */
.hamburger{ border-radius: 10px; }
.hamburger:hover{ background: var(--accent-100); }

/* Link di navigazione */
.nav a{
  text-decoration: none; color: var(--text); opacity: .8;
  padding: 6px 10px; border-radius: 8px;
}
.nav a:hover{ opacity:1; background: var(--accent-100); }

/* ================== Drawer ================== */
.drawer{
  --drawer-bg: #171a2b;
  background: linear-gradient(180deg,#171a2b,#101325);
}
.drawer header{ background: rgba(124,58,237,.14); border-bottom: 1px solid rgba(255,255,255,.08); }
.drawer .menu a:hover{ background: rgba(124,58,237,.20); }

/* ================== Pulsanti ================== */
.button, .btn.btn-dark{
  background: var(--accent); border: 0;
}
.button:hover, .btn.btn-dark:hover{ background: var(--accent-600); }
.btn.btn-outline-secondary{ border-color: var(--accent); color: var(--accent); }
.btn.btn-outline-secondary:hover{ background: var(--accent-100); }

/* ================== Apps grid “bellina” ================== */
.apps-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.app-card{
  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(124,58,237,.08);
  padding: 16px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.app-card:hover{
  transform: translateY(-2px);
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 14px 28px rgba(124,58,237,.14);
}
.app-card h4, .card .card-title{ margin: 6px 0 4px; }
.app-card p, .card .card-text{ color: var(--muted); }

/* Badge piccola lilla (riuso per info) */
.badge{ background: var(--accent-100); color: var(--accent); }

/* ================== Tema (light/dark/dim) – opzionale ================== */
html[data-theme="dark"]{
  --panel:#0e1224; --card:#121636; --text:#e6e8ee; --muted:#a7b0c2; --ring:rgba(255,255,255,.08);
  --bg:#070a14;
}
html[data-theme="dark"] .topbar{ background: linear-gradient(180deg, rgba(124,58,237,0.14), rgba(124,58,237,0.00)) , #0e1224; border-bottom-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .nav a{ color:#e6e8ee; }