/* ══ FLUSSO: marchio ═══════════════════════════════════════════════════════════════════════════════
   Il mondo visivo «Delta» (token, superfici, caratteri, il flusso del mese) è comune a Bilancio e sta in
   fondo a styles.css. Qui solo il marchio di Flusso: i colori del logo (blu → azzurro #1565f0 → #3fc6f6,
   verde acqua → menta #0f93a0 → #62e6b0, blu notte #0c1a33), il simbolo al posto del pallino e il nome
   nella lettera del logo (Outfit). */
:root {
  --brand-blue: #1565f0; --brand-sky: #3fc6f6; --brand-teal: #0f93a0; --brand-mint: #62e6b0; --brand-navy: #0c1a33;
  --brand-grad: linear-gradient(120deg, var(--brand-blue), var(--brand-sky));
  --brand-grad-2: linear-gradient(120deg, var(--brand-teal), var(--brand-mint));
  --font-mark: "Outfit", "Archivo", system-ui, sans-serif;
}

/* Il simbolo al posto del pallino, il nome nella lettera del logo */
.brand-dot { width: 24px; height: 24px; border-radius: 0; background: url(icons/flusso-mark-128.png) center / contain no-repeat; }
.brand, .topbar-brand { font-family: var(--font-mark); font-weight: 600; font-stretch: 100%; font-size: 19px; letter-spacing: -0.01em; }
.shell.rail .brand-dot { width: 28px; height: 28px; }

/* Marchio anche nell'app sul telefono: simbolo in alto a sinistra (il nome resta nella barra laterale
   e nel login); dove la barra ha il cambio mese, il simbolo lascia il posto */
@media (max-width: 560px) {
  .topbar-brand { display: inline-flex; font-size: 0; gap: 0; }
  .topbar-brand .brand-dot { width: 28px; height: 28px; }
  .topbar:has(#month-switch:not([hidden])) .topbar-brand { display: none; }
}