/* Barra in alto copiata da Exuble (exuble_bluesky_landing tokens.css 141-223, vf 2026-10-13):
   su desktop una pillola di vetro liquido centrata, le schede si dividono il centro; sotto 1024px una banda. */
.xbar {
  --x-blue: #075f9d; --x-cyan: #04a6bb; --x-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 12px 32px;
  background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(6, 38, 79, 0.08); font-family: var(--font-sans, Manrope, system-ui, sans-serif);
}
.xbar-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: #0F172A;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.xbar-brand img { width: 28px; height: 28px; border-radius: 7px; transition: transform 180ms var(--x-ease); }
.xbar-brand:hover img { transform: scale(1.06); }
.xbar-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 14px; background: rgba(6, 38, 79, 0.05); }
.xbar-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 10px; color: #475569; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: background 180ms var(--x-ease), color 180ms var(--x-ease), box-shadow 180ms var(--x-ease); }
.xbar-tab:hover { color: #0F172A; background: rgba(255, 255, 255, 0.7); }
.xbar-tab.active { color: var(--x-blue); background: #fff; box-shadow: 0 1px 2px rgba(6, 38, 79, 0.08), 0 4px 14px rgba(6, 38, 79, 0.07); }
.xbar-tab:focus-visible, .xbar-brand:focus-visible { outline: 3px solid rgba(4, 166, 187, 0.25); outline-offset: 2px; }
.xbar-icon { display: inline-flex; flex: none; }
.xbar-settings { margin-left: auto; }

@media (min-width: 1024px) {
  .xbar {
    position: sticky; top: 12px; width: min(100% - 48px, 1120px); margin: 12px auto 8px; padding: 8px 10px 8px 18px;
    min-height: 60px; gap: 16px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 22px;
    background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(6, 38, 79, 0.05),
                0 8px 24px rgba(6, 38, 79, 0.07), 0 24px 48px rgba(6, 38, 79, 0.05);
    isolation: isolate;
  }
  .xbar::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
    padding: 1px; opacity: 0; transition: opacity 280ms var(--x-ease);
    background: radial-gradient(160px circle at var(--mx, 50%) 0%, rgba(4, 166, 187, 0.55), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  .xbar:hover::before { opacity: 1; }
  .xbar-tabs { flex: 1; display: flex; padding: 4px; background: rgba(6, 38, 79, 0.045); }
  .xbar-tabs .xbar-tab { flex: 1; }
  .xbar-tab { position: relative; transition: background 220ms var(--x-ease), color 220ms var(--x-ease), box-shadow 220ms var(--x-ease), transform 180ms var(--x-ease); }
  .xbar-tab::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px; height: 2px; border-radius: 2px;
    background: var(--x-cyan); box-shadow: 0 0 8px rgba(4, 166, 187, 0.45); transform: scaleX(0); opacity: 0;
    transition: transform 240ms var(--x-ease), opacity 240ms var(--x-ease); }
  .xbar-tab:not(.active):hover { background: rgba(255, 255, 255, 0.6); }
  .xbar-tab:not(.active):hover::after { transform: scaleX(1); opacity: 1; }
  .xbar-tab:active { transform: scale(0.97); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .xbar::before { display: none; } .xbar-tab:active { transform: none; } }
@media (max-width: 820px) {
  .xbar { gap: 8px; min-height: 56px; padding: 6px 12px; }
  .xbar-brand span, .xbar-label { display: none; }
  .xbar-tabs { flex: 1; justify-content: space-between; }
  .xbar-tab { min-width: 44px; min-height: 44px; padding: 0 12px; }
}
.xbar a, .xbar a:hover, .xbar a:focus { text-decoration: none !important; }