/* ============================================================================
   VerifAI · AURORA — sistema grafico alternativo (proposta)
   ----------------------------------------------------------------------------
   Concetto: "Intelligence Cockpit". La web app è uno strumento operativo scuro,
   ad alta densità, con vetro, aurora e dati vivi; il report è invece un
   artefatto editoriale chiaro, stampabile, da mettere in un fascicolo.
   Il contrasto fra i due è voluto: lo strumento e il documento.

   Tutto è scopato sotto `.aurora` (o body.aurora) per convivere con verifai.css
   senza toccare le pagine esistenti finché la proposta non è approvata.

   Accessibilità: contrasti testo ≥ 4.5:1 sui fondi reali, focus visibile,
   target ≥ 44px, ogni animazione disattivata da prefers-reduced-motion.
   ========================================================================== */

/* Font self-hosted (SIL Open Font License, file e licenze in static/fonts/).
   Niente CDN: nessuna richiesta a fonts.googleapis.com — un dipendenza esterna
   in meno sul percorso critico e nessun dato di navigazione verso terzi.
   Percorsi relativi al foglio di stile (/static/css/ → ../fonts/). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Inter-Medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Inter-Bold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/Inter-Italic.woff2') format('woff2')}
/* Instrument Serif solo in ttf: il woff2 servito da Google Fonts è
   sottoinsiemato e perderebbe glifi (accenti italiani, €). */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/InstrumentSerif-Regular.ttf') format('truetype')}

/* ---------------------------------------------------------------- 1. TOKENS */
.aurora {
  /* superfici — scala scura fredda, non nera pura: il nero puro appiattisce
     le ombre e affatica su schermi grandi */
  --a-bg-900: #060c13;
  --a-bg-800: #0a141d;
  --a-bg-700: #0f1e2a;
  --a-bg-600: #163041;

  /* vetro: superficie + bordo + bordo evidenziato */
  --a-glass: rgba(255, 255, 255, .045);
  --a-glass-2: rgba(255, 255, 255, .075);
  --a-line: rgba(148, 197, 219, .16);
  --a-line-2: rgba(148, 197, 219, .32);

  /* testo — tre livelli soltanto, per non perdere gerarchia */
  --a-fg: #eaf4f9;
  --a-fg-2: #a9c2d0;
  --a-fg-3: #6f8a9a;

  /* brand (continuità con il logo VerifAI) + accenti aurora */
  --a-teal: #4dc8c8;
  --a-teal-hi: #7ff0ef;
  --a-navy: #14658b;
  --a-violet: #7c6bff;
  --a-cyan: #3fd0e0;

  /* semantica rischio */
  --a-ok: #2fd48f;
  --a-warn: #ffb547;
  --a-bad: #ff6b6b;
  --a-info: #58a6ff;

  /* tipografia: Inter per l'interfaccia, Instrument Serif come display.
     Il display serve solo a titoli e numeri-eroe: crea il contrasto
     editoriale che le piattaforme concorrenti non hanno. */
  --a-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --a-display: 'Instrument Serif', 'Times New Roman', serif;

  --a-fs-2xs: .688rem;
  --a-fs-xs: .75rem;
  --a-fs-sm: .8125rem;
  --a-fs-md: .875rem;
  --a-fs-base: .9375rem;
  --a-fs-lg: 1.0625rem;
  --a-fs-xl: 1.375rem;
  --a-fs-2xl: 1.875rem;
  --a-fs-3xl: 2.5rem;
  --a-fs-4xl: 3.5rem;

  /* spaziatura — densità 7/10: cruscotto, non brochure */
  --a-1: 4px;  --a-2: 8px;  --a-3: 12px; --a-4: 16px;
  --a-5: 24px; --a-6: 32px; --a-7: 48px; --a-8: 64px;

  --a-r-sm: 8px; --a-r: 14px; --a-r-lg: 20px; --a-r-xl: 28px;

  --a-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --a-shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 90px -40px rgba(0,0,0,1);
  --a-glow-teal: 0 0 0 1px rgba(77,200,200,.35), 0 12px 40px -12px rgba(77,200,200,.45);

  --a-ease: cubic-bezier(.22,.61,.36,1);
  --a-ease-out: cubic-bezier(.16,1,.3,1);
  --a-spring: cubic-bezier(.34,1.56,.64,1);
}

/* --------------------------------------------------------------- 2. RESET */
.aurora *, .aurora *::before, .aurora *::after { box-sizing: border-box; }

body.aurora {
  margin: 0;
  background: var(--a-bg-900);
  color: var(--a-fg);
  font-family: var(--a-sans);
  font-size: var(--a-fs-base);
  line-height: 1.55;
  font-feature-settings: 'cv02','cv03','cv04','ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.aurora ::selection { background: rgba(77,200,200,.3); color: #fff; }

.aurora :focus-visible {
  outline: 2px solid var(--a-teal-hi);
  outline-offset: 2px;
  border-radius: 4px;
}

.aurora .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.aurora .display { font-family: var(--a-display); font-weight: 400; letter-spacing: -.01em; }

/* ------------------------------------------------- 3. SFONDO AURORA + GRANA */
/* Tre blob di luce in movimento lentissimo + una griglia tecnica appena
   percettibile + grana. Nessuno di questi livelli sta mai sotto a un testo
   lungo: servono a dare profondità al perimetro, non a decorare la lettura. */
.a-backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.a-backdrop::after {
  /* grana: rimuove il banding dei gradienti su schermi 8-bit */
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: overlay;
}
.a-blob {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  will-change: transform;
}
.a-blob--1 { width: 60vw; height: 60vw; left: -18vw; top: -22vw;
  background: radial-gradient(circle at 40% 40%, #14658b, transparent 68%);
  animation: a-drift-1 34s var(--a-ease) infinite alternate; }
.a-blob--2 { width: 48vw; height: 48vw; right: -14vw; top: -6vw;
  background: radial-gradient(circle at 50% 50%, #16808a, transparent 66%);
  animation: a-drift-2 42s var(--a-ease) infinite alternate; }
.a-blob--3 { width: 42vw; height: 42vw; left: 32vw; top: 24vw;
  background: radial-gradient(circle at 50% 50%, #7c6bff, transparent 70%);
  opacity: .3;
  animation: a-drift-3 50s var(--a-ease) infinite alternate; }

@keyframes a-drift-1 { to { transform: translate3d(14vw, 8vh, 0) scale(1.18); } }
@keyframes a-drift-2 { to { transform: translate3d(-12vw, 14vh, 0) scale(1.1); } }
@keyframes a-drift-3 { to { transform: translate3d(-16vw, -10vh, 0) scale(1.25); } }

/* griglia tecnica: firma visiva "terminale dati" */
.a-grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,197,219,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,197,219,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 20%, transparent 78%);
}

.aurora .a-page { position: relative; z-index: 1; }

/* ------------------------------------------------------------- 4. TOPBAR */
.a-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--a-4);
  padding: 10px clamp(16px, 4vw, 40px);
  background: rgba(6,12,19,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--a-line);
}
.a-topbar .a-brand { display: flex; align-items: center; text-decoration: none; }
.a-topbar .a-brand svg { height: 22px; width: auto; display: block; }
.a-chip-ver {
  font-size: var(--a-fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-teal); border: 1px solid rgba(77,200,200,.35);
  border-radius: 999px; padding: 3px 9px;
  background: rgba(77,200,200,.08);
}
.a-topbar .a-right { margin-left: auto; display: flex; align-items: center; gap: var(--a-4);
  font-size: var(--a-fs-sm); color: var(--a-fg-2); }
/* vale per <a> e per <button> (il logout è un form POST, non un link) */
.a-topbar .a-navlink { color: var(--a-fg-2); text-decoration: none; position: relative;
  padding: 6px 2px; font-size: inherit; }
.a-topbar .a-navlink::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--a-teal); transition: right .3s var(--a-ease-out);
}
.a-topbar .a-navlink:hover { color: var(--a-fg); }
.a-topbar .a-navlink:hover::after { right: 0; }
.a-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: conic-gradient(from 210deg, var(--a-teal), var(--a-violet), var(--a-navy), var(--a-teal));
  display: grid; place-items: center; font-size: var(--a-fs-2xs); font-weight: 700; color: #041018;
}

/* --------------------------------------------------------------- 5. LAYOUT */
.a-shell { max-width: 1180px; margin: 0 auto; padding: var(--a-7) clamp(16px, 4vw, 40px) var(--a-8); }
.a-shell--narrow { max-width: 860px; }
.a-stack > * + * { margin-top: var(--a-5); }

.a-kicker {
  font-size: var(--a-fs-2xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--a-teal); display: inline-flex; align-items: center; gap: 8px;
}
.a-kicker::before {
  content: ''; width: 18px; height: 1px; background: currentColor; opacity: .6;
}

.a-h1 { font-family: var(--a-display); font-size: clamp(2.2rem, 5.5vw, var(--a-fs-4xl));
  line-height: 1.02; letter-spacing: -.02em; margin: 0; font-weight: 400; }
.a-h2 { font-family: var(--a-display); font-size: var(--a-fs-2xl); line-height: 1.12;
  margin: 0; font-weight: 400; letter-spacing: -.01em; }
.a-h3 { font-size: var(--a-fs-lg); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.a-lead { color: var(--a-fg-2); font-size: var(--a-fs-lg); line-height: 1.6; margin: 0; max-width: 62ch; }
.a-muted { color: var(--a-fg-3); font-size: var(--a-fs-sm); }

/* testo a gradiente: solo su titoli brevi, mai su paragrafi (il clip
   sul testo lungo penalizza il rendering e il contrasto percepito) */
.a-grad {
  background: linear-gradient(100deg, #ffffff 8%, var(--a-teal-hi) 46%, var(--a-violet) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------- 6. VETRO */
.a-card {
  position: relative;
  background: linear-gradient(180deg, var(--a-glass-2), var(--a-glass));
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
/* filo di luce sul bordo superiore: il dettaglio che fa leggere "vetro" */
.a-card::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.a-card__pad { padding: var(--a-5); }
.a-card--hover { transition: transform .35s var(--a-ease-out), border-color .3s, box-shadow .35s; }
.a-card--hover:hover { transform: translateY(-3px); border-color: var(--a-line-2); box-shadow: var(--a-shadow-lg); }

/* riflesso che segue il puntatore (impostato da aurora.js) */
.a-card--spot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s var(--a-ease);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(77,200,200,.13), transparent 62%);
}
.a-card--spot:hover::after { opacity: 1; }

.a-divider { height: 1px; background: var(--a-line); border: 0; margin: 0; }

/* --------------------------------------------------------------- 7. HERO */
.a-hero { position: relative; padding: clamp(48px, 9vw, 96px) 0 var(--a-7); text-align: center; }
.a-hero__logo { margin: 0 auto var(--a-5); }
.a-hero__logo svg { height: 52px; width: auto; margin: 0 auto; }
.a-hero .a-h1 { margin-bottom: var(--a-4); }
.a-hero .a-lead { margin: 0 auto var(--a-6); text-align: center; }
/* hero senza payoff (home, non preprod): logo + ricerca da soli si
   accalcano in cima e lasciano un vuoto sotto. Più spazio sopra e sotto
   il logo ridà equilibrio verticale al blocco. */
.a-hero--solo { padding-top: clamp(64px, 11vw, 120px); }
.a-hero--solo .a-hero__logo { margin-bottom: var(--a-6); }

/* barra di ricerca: l'elemento che l'utente usa 100 volte al giorno.
   Alone teal al focus, altezza 60px (target ampio), microfono integrato. */
.a-search {
  display: flex; align-items: stretch; gap: 0;
  max-width: 680px; margin: 0 auto;
  background: rgba(9,20,29,.82);
  border: 1px solid var(--a-line-2);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,1);
  transition: box-shadow .35s var(--a-ease), border-color .35s;
}
.a-search:focus-within { border-color: rgba(77,200,200,.6); box-shadow: var(--a-glow-teal), 0 24px 60px -30px #000; }
.a-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--a-fg);
  font: inherit; font-size: var(--a-fs-base); padding: 14px 4px;
}
.a-search input::placeholder { color: var(--a-fg-3); }
.a-search input:focus { outline: 0; }
/* La nazione sta DENTRO alla barra, a sinistra del codice: nessun bordo
   proprio, un solo filetto a separarla. Con una nazione sola dev'essere un
   campo fermo, non un menù che promette una scelta inesistente. */
/* `.aurora ` in testa a TUTTE le regole di questo blocco: gli stili generici
   `.aurora select` e `.aurora button` (più sopra) hanno specificità 0,1,1 e
   batterebbero una classe nuda, rivestendo il campo nazione da riquadro e le
   intestazioni ordinabili da pillola turchese. */
.aurora .a-search__paese {
  align-self: center; background: transparent; border: 0;
  border-right: 1px solid var(--a-line-2); border-radius: 0; color: var(--a-fg-2);
  font: inherit; font-size: var(--a-fs-base); min-height: 0;
  padding: 2px 14px 2px 0; margin-right: 12px;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.aurora .a-search__paese:focus { outline: 0; box-shadow: none; color: var(--a-teal); }
.aurora .a-search__paese option { background: #0b1620; color: var(--a-fg); }

/* ---- barra dei filtri dell'archivio ------------------------------------ */
/* Ricerca e pulsante «Filtri» stanno sulla stessa riga (_archivio_panel.html):
   `display:contents` fa sì che il bottone e il pannello del partial diventino
   figli diretti della riga flex, senza aggiungere un livello di markup né
   toccare lo script che li apre (cerca `.a-filtri__tog` e `#arch-filtri`, che
   non cambiano nome). Il pannello ha flex-basis 100% e va a capo da solo.
   La vecchia spaziatura orizzontale non serve più: ora sta dentro `.a-card__pad`. */
.a-archbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.a-archbar .a-archsearch { flex: 1 1 280px; }
.a-filtri { display: contents; }
.a-archbar .a-filtri__tog { margin-top: 16px; flex: 0 0 auto; }
.a-archbar .a-filtri__form { flex: 1 0 100%; }
.aurora .a-filtri__tog {
  background: none; border: 1px solid var(--a-line-2); color: var(--a-fg-2);
  border-radius: 999px; min-height: 0; padding: 6px 16px; font: inherit;
  font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.aurora .a-filtri__tog:hover, .aurora .a-filtri__tog[aria-expanded="true"] {
  border-color: rgba(77,200,200,.6); color: var(--a-teal);
}
.aurora .a-filtri__tog b { margin-left: 7px; color: var(--a-teal); }
.a-filtri__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aurora .a-chip-f {
  display: inline-flex; align-items: center; gap: 8px; font: inherit;
  font-size: .78rem; font-weight: 500; min-height: 0; padding: 5px 13px;
  border-radius: 999px; cursor: pointer; background: none;
  border: 1px solid var(--a-line-2); color: var(--a-fg-2);
  transition: border-color .25s, color .25s;
}
.aurora .a-chip-f:hover { border-color: rgba(77,200,200,.6); color: var(--a-teal); }
.aurora .a-chip-f--reset { border-style: dashed; }
.a-filtri__form {
  display: grid; gap: 13px 18px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* `display:grid` batte l'attributo hidden: va riaffermato esplicitamente, o il
   pannello nasce APERTO. Stessa trappola di `.a-overlay[hidden]` più sopra. */
.a-filtri__form[hidden] { display: none; }
.a-filtri__form label {
  display: flex; flex-direction: column; gap: 6px; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--a-fg-3);
}
.aurora .a-filtri__form select, .aurora .a-filtri__form input[type="date"] {
  background: rgba(255,255,255,.04); border: 1px solid var(--a-line-2);
  color: var(--a-fg); border-radius: 9px; min-height: 0; padding: 8px 10px;
  font: inherit; font-size: .88rem; text-transform: none; letter-spacing: 0;
}
.a-filtri__form option { background: var(--a-bg-700); color: var(--a-fg); }
/* la casella di spunta è l'unica etichetta in riga: senza questa regola
   `.a-filtri__form label` (più specifica di `.a-filtri__check`) la impila */
.a-filtri__form .a-filtri__check {
  flex-direction: row; align-items: center; gap: 9px; text-transform: none;
  letter-spacing: 0; font-size: .82rem; color: var(--a-fg-2);
  align-self: end; padding-bottom: 8px;
}
@media (max-width: 640px) { .a-filtri__form { grid-template-columns: 1fr; } }

/* intestazioni ordinabili della tabella d'archivio: restano INTESTAZIONI,
   non diventano bottoni — l'unico segno è la freccia del verso */
.aurora .a-th {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  min-height: 0; padding: 0; font: inherit; font-size: inherit;
  font-weight: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer;
}
.aurora .a-th:active { transform: none; }
.aurora .a-th:hover, .aurora .a-th.is-on { color: var(--a-teal); }
.a-th__v { margin-left: 6px; font-size: .68em; }
.a-search__mic {
  background: transparent; border: 0; color: var(--a-fg-3); cursor: pointer;
  width: 48px; display: grid; place-items: center; border-radius: 999px;
  transition: color .2s, background .2s;
}
.a-search__mic:hover { color: var(--a-fg); background: rgba(255,255,255,.06); }
.a-search__mic.is-on { color: #fff; background: #d62839; animation: a-pulse 1.2s infinite; }
@keyframes a-pulse { 50% { box-shadow: 0 0 0 8px rgba(214,40,57,0); } 0% { box-shadow: 0 0 0 0 rgba(214,40,57,.55); } }

.a-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  font: inherit; font-size: var(--a-fs-md); font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--a-spring), box-shadow .3s, background .25s, color .25s;
}
.a-btn:active { transform: scale(.97); }
.a-btn--primary {
  background: linear-gradient(135deg, var(--a-teal-hi), var(--a-teal) 45%, var(--a-navy));
  color: #04212c; font-weight: 700;
  box-shadow: 0 10px 30px -12px rgba(77,200,200,.7);
}
.a-btn--primary:hover { box-shadow: 0 16px 44px -12px rgba(77,200,200,.9); }
.a-btn--ghost { background: rgba(255,255,255,.05); color: var(--a-fg); border: 1px solid var(--a-line); }
.a-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: var(--a-line-2); }
.a-btn--danger { background: rgba(255,107,107,.12); color: #ffb3b3; border: 1px solid rgba(255,107,107,.4); }
.a-btn--danger:hover { background: rgba(255,107,107,.2); }
.a-btn--sm { min-height: 36px; padding: 0 14px; font-size: var(--a-fs-sm); }

/* riga di prove sociali / metriche sotto la ricerca */
.a-trustline {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-3) var(--a-6);
  margin-top: var(--a-5); font-size: var(--a-fs-sm); color: var(--a-fg-3);
}
.a-trustline b { color: var(--a-fg-2); font-weight: 600; }

/* --------------------------------------------------- 8. KPI / NUMERI EROE */
.a-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--a-line); border: 1px solid var(--a-line); border-radius: var(--a-r);
  overflow: hidden; }
/* Griglia a 3 colonne fisse: con SEI indicatori l'auto-fit produce cinque
   celle e un orfano largo un quinto. Tre per riga li tiene in due righe piene. */
.a-kpis--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .a-kpis--3 { grid-template-columns: repeat(2, 1fr); } }
.a-kpi { background: var(--a-bg-800); padding: var(--a-4) var(--a-5); position: relative; }
.a-kpi__l { font-size: var(--a-fs-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--a-fg-3); }
.a-kpi__v { font-family: var(--a-display); font-size: var(--a-fs-2xl); line-height: 1.05;
  margin-top: 6px; color: var(--a-fg); font-variant-numeric: tabular-nums; }
.a-kpi__u { font-size: var(--a-fs-xs); color: var(--a-fg-3); margin-top: 4px; }
.a-kpi__delta { font-size: var(--a-fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.a-up { color: var(--a-ok); } .a-down { color: var(--a-bad); } .a-flat { color: var(--a-fg-3); }

/* ------------------------------------------------------ 9. RISCHIO / GAUGE */
.a-risks { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--a-4); }
.a-risk {
  display: flex; align-items: center; gap: var(--a-5);
  padding: var(--a-5); border-radius: var(--a-r);
  border: 1px solid var(--a-line);
  background: radial-gradient(120% 130% at 100% 0%, rgba(255,255,255,.06), transparent 55%), var(--a-bg-800);
}
.a-risk__gauge { flex: 0 0 auto; position: relative; width: 108px; height: 108px; }
.a-risk__gauge svg { transform: rotate(-90deg); display: block; }
.a-risk__gauge .a-gauge-val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--a-display); font-size: var(--a-fs-xl); font-variant-numeric: tabular-nums;
}
.a-gauge-arc { transition: stroke-dashoffset 1.4s var(--a-ease-out); }
.a-risk__body { min-width: 0; }
.a-risk__lbl { font-size: var(--a-fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--a-fg-3); }
.a-risk__lvl { font-family: var(--a-display); font-size: var(--a-fs-2xl); line-height: 1.1; margin: 4px 0 6px; }
.a-risk__note { font-size: var(--a-fs-sm); color: var(--a-fg-2); line-height: 1.5; }
.lv-basso { color: var(--a-ok); } .lv-medio { color: var(--a-warn); }
.lv-alto { color: var(--a-bad); } .lv-nd { color: var(--a-fg-3); }

/* ---------------------------------------------------------- 10. BADGE/TAG */
.a-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--a-fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 11px; border: 1px solid currentColor; line-height: 1.4;
}
.a-tag--ok { color: var(--a-ok); background: rgba(47,212,143,.1); }
.a-tag--warn { color: var(--a-warn); background: rgba(255,181,71,.1); }
.a-tag--bad { color: var(--a-bad); background: rgba(255,107,107,.12); }
.a-tag--info { color: var(--a-info); background: rgba(88,166,255,.12); }
.a-tag--nd { color: var(--a-fg-3); background: rgba(255,255,255,.04); }
.a-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.a-tag--live .a-tag__dot { animation: a-blink 1.8s var(--a-ease) infinite; }
@keyframes a-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* badge "verificato" con lucido che passa una volta all'ingresso */
.a-verified {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(77,200,200,.16), rgba(124,107,255,.14));
  border: 1px solid rgba(77,200,200,.4); color: var(--a-teal-hi);
  font-size: var(--a-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.a-verified::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
  animation: a-shimmer 3.6s var(--a-ease) 1s infinite;
}
@keyframes a-shimmer { 0% { transform: translateX(-120%); } 45%,100% { transform: translateX(120%); } }

/* ------------------------------------------------------- 11. RIGHE ELENCO */
.a-rows { display: flex; flex-direction: column; }
.a-row {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--a-4);
  padding: var(--a-4) var(--a-5); text-decoration: none; color: inherit;
  border-top: 1px solid var(--a-line); position: relative;
  transition: background .25s var(--a-ease);
}
.a-row:first-child { border-top: 0; }
.a-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--a-teal); transform: scaleY(0); transform-origin: center;
  transition: transform .3s var(--a-ease-out);
}
.a-row:hover { background: rgba(255,255,255,.045); }
.a-row:hover::before { transform: scaleY(1); }
.a-row__ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--a-line);
  font-size: var(--a-fs-sm); font-weight: 700; color: var(--a-teal);
}
.a-row__t { font-weight: 600; font-size: var(--a-fs-base); }
.a-row__s { font-size: var(--a-fs-xs); color: var(--a-fg-3); margin-top: 2px; }
.a-row__side { text-align: right; display: flex; align-items: center; gap: var(--a-3); }

/* ------------------------------------------------------------ 12. GRAFICI */
.a-chart { width: 100%; display: block; overflow: visible; }
.a-chart .a-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.a-chart .a-area { opacity: .85; }
.a-chart .a-axis { stroke: var(--a-line); stroke-width: 1; }
.a-chart .a-lbl { fill: var(--a-fg-3); font-size: 10px; font-family: var(--a-sans);
  letter-spacing: .06em; text-transform: uppercase; }
.a-chart .a-val { fill: var(--a-fg); font-size: 11px; font-family: var(--a-sans);
  font-weight: 600; font-variant-numeric: tabular-nums; }
/* tracciato disegnato all'ingresso in viewport */
.a-draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s var(--a-ease-out); }
.is-in .a-draw { stroke-dashoffset: 0; }
.a-bar { transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--a-ease-out); }
.is-in .a-bar { transform: scaleY(1); }

.a-legend { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); margin-top: var(--a-3);
  font-size: var(--a-fs-xs); color: var(--a-fg-2); }
.a-legend span { display: inline-flex; align-items: center; gap: 6px; }
.a-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* barra di ripartizione (mix contratti, quote, ecc.) */
.a-meter { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.a-meter span { display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  transition: transform 1s var(--a-ease-out); }
.is-in .a-meter span { transform: scaleX(1); }

/* --------------------------------------------------- 13. CATALOGO/BLOCCHI */
.a-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--a-4); }
.a-block {
  position: relative; display: flex; flex-direction: column; gap: var(--a-2);
  padding: var(--a-5); border-radius: var(--a-r);
  border: 1px solid var(--a-line); background: var(--a-bg-800);
  transition: transform .3s var(--a-ease-out), border-color .3s, box-shadow .3s;
}
.a-block:hover { transform: translateY(-4px); border-color: var(--a-line-2);
  box-shadow: 0 30px 60px -34px rgba(0,0,0,1); }
.a-block__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(77,200,200,.2), rgba(124,107,255,.16));
  border: 1px solid var(--a-line-2); color: var(--a-teal-hi); margin-bottom: var(--a-2); }
.a-block__t { font-weight: 600; font-size: var(--a-fs-base); }
.a-block__d { font-size: var(--a-fs-sm); color: var(--a-fg-3); line-height: 1.5; flex: 1; }
.a-block__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
  margin-top: var(--a-3); }
.a-price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--a-fs-md); color: var(--a-fg); }
.a-block--locked { background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px), var(--a-bg-800);
  border-style: dashed; }
.a-block--owned { border-color: rgba(47,212,143,.35); }
.a-block--owned .a-block__ic { color: var(--a-ok); background: rgba(47,212,143,.12); }

/* --------------------------------------------------------- 14. TIMELINE */
.a-timeline { position: relative; padding-left: 26px; }
.a-timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--a-teal), var(--a-line) 70%, transparent); }
.a-tl { position: relative; padding: 10px 0; }
.a-tl::before { content: ''; position: absolute; left: -23px; top: 17px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--a-bg-900); border: 2px solid var(--a-teal); }
.a-tl__d { font-size: var(--a-fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--a-fg-3); }
.a-tl__t { font-size: var(--a-fs-md); margin-top: 2px; }

/* ------------------------------------------------------ 15. TAB / SEZIONI */
.a-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--a-line); width: fit-content; }
.a-tab { min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent;
  color: var(--a-fg-2); font: inherit; font-size: var(--a-fs-sm); font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; transition: background .25s, color .25s; text-decoration: none; }
.a-tab:hover { color: var(--a-fg); }
.a-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--a-teal), var(--a-navy));
  color: #04212c; }

.a-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-4);
  margin-bottom: var(--a-4); }

/* ------------------------------------------------------- 16. DATA TABLE */
.a-table { width: 100%; border-collapse: collapse; font-size: var(--a-fs-sm); }
.a-table th {
  text-align: left; font-size: var(--a-fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-fg-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--a-line);
  position: sticky; top: 0; background: var(--a-bg-800); backdrop-filter: blur(8px);
}
.a-table td { padding: 11px 12px; border-bottom: 1px solid rgba(148,197,219,.08); color: var(--a-fg-2); }
.a-table tbody tr { transition: background .2s; }
.a-table tbody tr:hover { background: rgba(255,255,255,.035); }
.a-table td.a-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--a-fg); font-weight: 600; }
.a-table td b { color: var(--a-fg); font-weight: 600; }

/* --------------------------------------------------------- 17. ANIMAZIONI */
/* reveal a scorrimento: opacity + translate soltanto (composited),
   mai width/height/top */
.a-reveal { opacity: 0; transform: translateY(18px); }
.a-reveal.is-in { opacity: 1; transform: none;
  transition: opacity .7s var(--a-ease-out), transform .7s var(--a-ease-out); }
.a-reveal[data-delay="1"].is-in { transition-delay: .07s; }
.a-reveal[data-delay="2"].is-in { transition-delay: .14s; }
.a-reveal[data-delay="3"].is-in { transition-delay: .21s; }
.a-reveal[data-delay="4"].is-in { transition-delay: .28s; }
.a-reveal[data-delay="5"].is-in { transition-delay: .35s; }

/* titolo che entra parola per parola (aurora.js avvolge le parole) */
.a-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.a-words .w > i { display: inline-block; font-style: inherit; transform: translateY(105%);
  transition: transform .8s var(--a-ease-out); }
.a-words.is-in .w > i { transform: none; }

/* scia di caricamento in cima alla pagina durante gli acquisti */
.a-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--a-teal), var(--a-violet));
  box-shadow: 0 0 12px var(--a-teal); transition: width .3s var(--a-ease); }

/* overlay di attesa: sostituisce lo spinner generico con un radar
   che comunica "stiamo interrogando le fonti ufficiali" */
.a-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(6,12,19,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* `display:grid` batte l'attributo hidden: va riaffermato esplicitamente */
.a-overlay[hidden] { display: none; }
.a-radar { width: 116px; height: 116px; border-radius: 50%; position: relative;
  border: 1px solid var(--a-line-2); }
.a-radar::before { content: ''; position: absolute; inset: 16px; border-radius: 50%;
  border: 1px solid var(--a-line); }
.a-radar::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(77,200,200,.55), transparent 28%);
  animation: a-sweep 1.6s linear infinite; }
@keyframes a-sweep { to { transform: rotate(360deg); } }

/* scheletro di caricamento */
.a-skel { background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%; animation: a-skel 1.4s ease infinite; border-radius: 6px; }
@keyframes a-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------ 17b. COMPONENTI APPLICATIVI V3 */
/* utilità: etichetta per soli lettori di schermo */
.a-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- logo dell'organizzazione in topbar ----
   Del gruppo resta solo il marchio: il nome è uscito dalla barra (il logo porta
   già l'identità, il nome ripetuto su ogni pagina era rumore). Il fondo bianco
   serve ai logo con trasparenza, che sul cockpit scuro sparirebbero. */
.a-org { display: inline-flex; align-items: center; gap: 8px; }
/* 40px (era 22): a quella misura i marchi con la firma accanto al simbolo —
   Santander, per dire — erano illeggibili. La topbar non ha altezza fissa
   (padding 10px + contenuto), quindi cresce di suo e non serve toccarla. */
.a-org img { height: 40px; max-width: 180px; object-fit: contain;
  background: #fff; border-radius: 6px; padding: 2px 7px; }
.a-org--solo { margin-right: 4px; }

/* ---- menù utente (topbar): chip avatar+nome che apre Consumi/Admin/Esci ----
   Selettori qualificati con `.a-usermenu` davanti (non solo `.a-usermenu__x`):
   il reset generico `.aurora button` più in basso in questo file ha
   specificità elemento+classe (0,1,1) e altrimenti batterebbe una singola
   classe (0,1,0), facendo comparire "Esci" come un bottone teal pieno invece
   che come voce di menù. */
.a-usermenu { position: relative; }
.a-usermenu .a-usermenu__trigger {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--a-line);
  border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer;
  color: var(--a-fg-2); font: inherit; font-size: var(--a-fs-sm);
  transition: background .2s, border-color .2s;
}
.a-usermenu .a-usermenu__trigger:hover,
.a-usermenu.is-open .a-usermenu__trigger { background: rgba(255,255,255,.08); border-color: var(--a-line-2); }
.a-usermenu .a-avatar { width: 26px; height: 26px; font-size: var(--a-fs-2xs); }
.a-usermenu__name { color: var(--a-fg); font-weight: 600;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-usermenu__chevron { color: var(--a-fg-3); flex: 0 0 auto; transition: transform .25s var(--a-ease-out); }
.a-usermenu.is-open .a-usermenu__chevron { transform: rotate(180deg); }
.a-usermenu__dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; min-width: 190px;
  padding: 6px; background: rgba(10,20,29,.96); border: 1px solid var(--a-line-2);
  border-radius: var(--a-r); box-shadow: var(--a-shadow-lg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: a-pop .18s var(--a-ease-out);
}
.a-usermenu .a-usermenu__item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 10px 12px; border-radius: var(--a-r-sm); margin: 0;
  color: var(--a-fg-2); text-decoration: none; font: inherit; font-size: var(--a-fs-sm);
  background: transparent; border: 0; cursor: pointer;
}
.a-usermenu .a-usermenu__item:hover { background: rgba(255,255,255,.06); color: var(--a-fg); }
.a-usermenu .a-usermenu__item--danger { color: #ffb3b3; }
.a-usermenu .a-usermenu__item--danger:hover { background: rgba(255,107,107,.12); color: #ffc9c9; }
.a-usermenu__form { margin: 0; }

/* tooltip grafico generico (`[data-tip]`, posizionato in JS con position:fixed) */
.a-tooltip {
  position: fixed; z-index: 500; display: none; max-width: 280px;
  padding: 8px 11px; background: rgba(10,20,29,.96); border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-sm); box-shadow: var(--a-shadow-lg);
  color: var(--a-fg-2); font-size: var(--a-fs-xs); line-height: 1.4;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s var(--a-ease-out), transform .15s var(--a-ease-out);
}
.a-tooltip.is-in { opacity: 1; transform: none; }

/* messaggi flash */
.a-flash {
  position: fixed; top: 68px; left: 20px; z-index: 150; max-width: 360px;
  padding: 13px 18px; border-radius: var(--a-r-sm); cursor: pointer;
  background: rgba(10,20,29,.94); color: var(--a-fg);
  border: 1px solid var(--a-line-2); border-left: 3px solid var(--a-teal);
  box-shadow: 0 18px 40px -18px #000; font-size: var(--a-fs-md);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: a-slide-in .32s var(--a-ease-out);
}
.a-flash--error { border-left-color: var(--a-bad); }
@keyframes a-slide-in { from { transform: translateX(-115%); opacity: 0; } }

/* avviso in linea (errore di accesso, errore di ricerca) */
.a-alert {
  background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.42);
  color: #ffc9c9; border-radius: var(--a-r-sm); padding: 11px 13px;
  font-size: var(--a-fs-md); margin-bottom: 16px; text-align: left;
}
.a-hero__err { max-width: 680px; margin: 14px auto 0;
  background: rgba(255,107,107,.12); border: 1px solid rgba(255,107,107,.42);
  color: #ffc9c9; border-radius: var(--a-r-sm); padding: 10px 14px; font-size: var(--a-fs-md); }

/* ---- accesso ---- */
.a-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.a-login__card { width: 100%; max-width: 420px; }
.a-field {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm); padding: 13px 14px; margin-bottom: 11px;
  color: var(--a-fg); font: inherit; font-size: var(--a-fs-md);
}
.a-field::placeholder { color: var(--a-fg-3); }
.a-field:focus { outline: 0; border-color: rgba(77,200,200,.6);
  box-shadow: 0 0 0 3px rgba(77,200,200,.14); }
.a-btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 46px; margin-bottom: 10px; border-radius: var(--a-r-sm);
  background: rgba(255,255,255,.05); border: 1px solid var(--a-line);
  color: var(--a-fg); text-decoration: none; font-weight: 600; font-size: var(--a-fs-md);
  transition: background .2s, border-color .2s, transform .06s;
}
.a-btn-oauth:hover { background: rgba(255,255,255,.1); border-color: var(--a-line-2); }
.a-btn-oauth:active { transform: translateY(1px); }
.a-divider-txt {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--a-fg-3); font-size: var(--a-fs-xs);
  text-transform: uppercase; letter-spacing: .12em;
}
.a-divider-txt::before, .a-divider-txt::after {
  content: ''; flex: 1; height: 1px; background: var(--a-line);
}

/* ---- archivio ---- */
.a-archsearch {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  background: rgba(255,255,255,.05); border: 1px solid var(--a-line);
  border-radius: 999px; padding: 0 18px; color: var(--a-fg-3);
  transition: border-color .25s, box-shadow .25s;
}
.a-archsearch:focus-within { border-color: rgba(77,200,200,.55);
  box-shadow: 0 0 0 3px rgba(77,200,200,.12); color: var(--a-teal); }
.a-archsearch input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--a-fg);
  font: inherit; font-size: var(--a-fs-md); padding: 12px 0;
}
.a-archsearch input::placeholder { color: var(--a-fg-3); }
.a-archsearch input:focus { outline: 0; }

/* striscia KPI dell'Analisi di portafoglio, sopra la tabella archivio */
.a-portfolio-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-5);
  padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--a-line);
}
.a-portfolio-strip__item { display: flex; align-items: center; gap: 10px; }
.a-portfolio-strip__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.a-portfolio-strip__v { font-family: var(--a-display); font-size: var(--a-fs-lg);
  color: var(--a-fg); line-height: 1.1; }
.a-portfolio-strip__l { font-size: var(--a-fs-2xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--a-fg-3); margin-top: 2px; }
.a-portfolio-strip__link { margin-left: auto; color: var(--a-teal); text-decoration: none;
  font-weight: 600; font-size: var(--a-fs-sm); white-space: nowrap; }
.a-portfolio-strip__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* barre orizzontali (Analisi di portafoglio, geografia/settori): niente JS
   né canvas, la larghezza è calcolata lato server. */
.a-barlist { display: flex; flex-direction: column; gap: 10px; }
.a-barrow { display: grid; grid-template-columns: 168px 1fr auto; align-items: center; gap: 12px; }
.a-barrow__label { font-size: var(--a-fs-sm); color: var(--a-fg-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-barrow__track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.a-barrow__fill { height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--a-navy), var(--a-teal)); }
.a-barrow__val { font-size: var(--a-fs-xs); color: var(--a-fg-3);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 68px; }

.a-table--arch { border-top: 1px solid var(--a-line); }
.a-table--arch th:first-child, .a-table--arch td:first-child { padding-left: var(--a-5); }
.a-table--arch th:last-child, .a-table--arch td:last-child { padding-right: var(--a-5); }
.a-arch__name { font-weight: 600; text-decoration: none; font-size: var(--a-fs-md); }
.a-arch__name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* presidi impilati: due righe minute, spente quando il presidio non è attivo */
.a-pres { display: flex; align-items: center; gap: 6px; font-size: var(--a-fs-2xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--a-fg-3); }
.a-pres + .a-pres { margin-top: 4px; }
.a-pres__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* icona di un report acquistato (archivio): tenue a riposo, si accende in
   hover/focus; il tooltip vero è `.a-tooltip` (vedi script in base.html) */
.a-repicon { display: inline-flex; color: var(--a-fg-3); text-decoration: none;
  padding: 4px; border-radius: 6px; vertical-align: middle;
  transition: color .2s, background .2s; }
.a-repicon + .a-repicon { margin-left: 2px; }
.a-repicon:hover, .a-repicon:focus-visible { color: var(--a-teal-hi); background: rgba(77,200,200,.12); }

.a-pager { display: flex; align-items: center; justify-content: center; gap: var(--a-4);
  padding: var(--a-4) var(--a-5) var(--a-5); }
.a-pager .a-btn[disabled] { opacity: .38; cursor: not-allowed; }
.a-empty { padding: 44px 24px; text-align: center; color: var(--a-fg-3);
  font-size: var(--a-fs-md); }

/* ---- finestre in sovraimpressione ---- */
.a-modal { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,8,13,.72); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); animation: a-fade .25s var(--a-ease); }
@keyframes a-fade { from { opacity: 0; } }
.a-modal__card { width: 100%; max-width: 560px;
  animation: a-pop .3s var(--a-spring); }
@keyframes a-pop { from { transform: scale(.94); opacity: 0; } }
.a-modal__scroll { max-height: 50vh; overflow-y: auto; }
.a-modal__actions { display: flex; align-items: center; justify-content: space-between;
  gap: var(--a-3); flex-wrap: wrap; }
.a-meta { font-size: var(--a-fs-md); color: var(--a-fg-2); line-height: 1.8; }
.a-meta b { color: var(--a-fg); font-weight: 600; }
.a-row--slim { grid-template-columns: 1fr auto; padding: 11px var(--a-5); }
/* riga dell'elenco «ricerca per ragione sociale»: senza un segno esplicito
   sembrava un elenco da leggere e non una scelta da fare — l'offerta (report,
   base) compare solo DOPO aver aperto l'anteprima */
.a-row--go .a-row__go { display: block; margin-top: 2px; color: var(--a-teal);
  font-size: var(--a-fs-2xs); letter-spacing: .06em; text-transform: uppercase;
  opacity: .75; transition: opacity .15s ease; }
.a-row--go:hover .a-row__go { opacity: 1; }

/* ---- sandbox / preproduzione ---- */
.a-shell--wide { max-width: 1320px; }
.a-preprod { display: grid; grid-template-columns: 300px 1fr; gap: var(--a-5);
  align-items: start; }
.a-preprod__main { min-width: 0; }
.a-sandbox__list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.a-sandbox__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px;
  border-radius: var(--a-r-sm); border: 1px solid var(--a-line);
  background: rgba(255,255,255,.03); text-decoration: none; color: var(--a-fg);
  transition: border-color .2s, background .2s, transform .2s var(--a-ease-out); }
.a-sandbox__item:hover { border-color: var(--a-line-2); background: rgba(255,255,255,.07);
  transform: translateX(2px); }
.a-sandbox__item b { font-size: var(--a-fs-sm); }
.a-sandbox__item span { font-size: var(--a-fs-xs); color: var(--a-fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-sandbox--inline { max-width: 680px; margin: var(--a-5) auto 0; text-align: left;
  border: 1px solid var(--a-line); border-radius: var(--a-r); padding: 14px 16px; }
.a-sandbox__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.a-sandbox__chip { display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 10px; border: 1px solid var(--a-line); border-radius: 999px;
  text-decoration: none; color: var(--a-fg-2); font-size: var(--a-fs-xs); }
.a-sandbox__chip:hover { border-color: var(--a-teal); color: var(--a-fg); }
.a-hero--compact { padding: var(--a-5) 0 var(--a-6); }
.a-hero--compact .a-hero__logo svg { height: 40px; }

/* --- barra azioni di pagina --- */
.a-actionbar { display: flex; flex-wrap: wrap; gap: var(--a-3);
  justify-content: space-between; align-items: center; margin-bottom: var(--a-5); }
.a-actionbar__g { display: flex; gap: var(--a-2); flex-wrap: wrap; }

/* --- tendina REPORT: si sceglie quale documento leggere (pagina indicatori).
   `details/summary` e non un menù JS: è un elenco di collegamenti, e deve
   funzionare anche se il motore di movimento cade (cfr. la guardia inline in
   base.html). Il marcatore nativo si toglie in due modi perché Safari usa
   ancora lo pseudo-elemento proprietario. --- */
.a-repmenu { position: relative; display: inline-block; }
.a-repmenu > summary { list-style: none; cursor: pointer; }
.a-repmenu > summary::-webkit-details-marker { display: none; }
.a-repmenu__box {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--a-bg-700); border: 1px solid var(--a-line-2);
  border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.a-repmenu__v {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: .86rem;
  color: var(--a-fg-2); text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s;
}
.a-repmenu__v:hover { background: rgba(77,200,200,.1); color: var(--a-teal); }
.a-repmenu__v--tutto { border-top: 1px solid var(--a-line-2); margin-top: 4px;
  padding-top: 11px; color: var(--a-fg-3); }

/* --- CF d'impresa navigabile (report e pannello collegamenti). Resta una
   cifra ledger: cambia il colore e prende un filetto punteggiato, non diventa
   un link azzurro sottolineato in mezzo ai dati. --- */
.a-cflink { color: var(--a-teal); text-decoration: none;
  border-bottom: 1px dotted rgba(77,200,200,.5); }
.a-cflink:hover { border-bottom-style: solid; }

/* --- griglia dei dati identificativi --- */
.a-metagrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 28px; }
.a-meta-l { font-size: var(--a-fs-2xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--a-fg-3); }
.a-meta-v { font-size: var(--a-fs-md); margin-top: 3px; color: var(--a-fg); }

/* --- colonna degli esiti sintetici nell'intestazione --- */
.a-esiti { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  gap: var(--a-4); text-align: right; }
.a-esito { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* --- fascia dei due rischi --- */
.a-risks-band { padding: var(--a-5); background:
  radial-gradient(120% 140% at 0% 0%, rgba(124,107,255,.14), transparent 60%),
  rgba(4,10,16,.55); border-top: 1px solid var(--a-line); border-bottom: 1px solid var(--a-line); }

@media (max-width: 720px) {
  .a-esiti { align-items: flex-start; text-align: left; }
  .a-esito { align-items: flex-start; }
  .aurora .asof { text-align: left; }
}

/* =========================================================================
   17c. SECONDA PELLE DEL VOCABOLARIO CONDIVISO
   -------------------------------------------------------------------------
   Le pagine dense (indicatori, catasto, KYC, catena, consumi) usano da sempre
   un vocabolario di classi SEMANTICHE: `.subj-item` è «una riga soggetto»,
   `.tag-ok` è «esito positivo», `.cp-meta` è «nota di servizio». Non sono
   nomi legati alla grafica.

   Perciò i partial che portano LOGICA (permessi, stati HTMX, propedeuticità)
   sono file unici e condivisi, e qui gli diamo la pelle scura. Quando la
   grafica era due, duplicarli avrebbe significato duplicare le regole di
   business, con due copie destinate a divergere al primo fix.
   ========================================================================= */

/* --- contenitori di pagina --- */
.aurora .shell { max-width: 1180px; margin: 0 auto; padding: var(--a-6) clamp(16px,4vw,40px) var(--a-8); }
.aurora .card-sheet {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--a-glass-2), var(--a-glass));
  border: 1px solid var(--a-line); border-radius: var(--a-r-lg);
  box-shadow: var(--a-shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.aurora .card-sheet::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
.aurora .sheet-pad { padding: var(--a-5); }
.aurora .sheet-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--a-5); border-bottom: 0; }
.aurora hr.rule, .aurora .rule { height: 1px; border: 0; background: var(--a-line); margin: 0; }
.aurora .two { display: grid; grid-template-columns: 1fr 1fr; }
.aurora .two > div { padding: var(--a-5); }
.aurora .two > div + div { border-left: 1px solid var(--a-line); }

/* --- tipografia condivisa --- */
.aurora .kicker { font-size: var(--a-fs-2xs); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--a-teal); }
.aurora .co { font-family: var(--a-display); font-weight: 400; font-size: var(--a-fs-2xl);
  line-height: 1.1; letter-spacing: -.01em; color: var(--a-fg); }
.aurora .slab { font-family: inherit; }
.aurora .sub { font-size: var(--a-fs-lg); font-weight: 600; margin-bottom: var(--a-3);
  color: var(--a-fg); letter-spacing: -.01em; }
.aurora .meta, .aurora .cp-meta { font-size: var(--a-fs-md); color: var(--a-fg-3); line-height: 1.7; }
.aurora .meta b, .aurora .cp-meta b { color: var(--a-fg-2); font-weight: 600; }
.aurora .li { font-size: var(--a-fs-md); color: var(--a-fg-2); line-height: 1.8; }
.aurora .li a { color: var(--a-teal); }
.aurora .fl { font-size: var(--a-fs-2xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--a-fg-3); margin-right: 7px; }
.aurora .asof { font-size: var(--a-fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-fg-3); text-align: right; line-height: 1.6; }
.aurora .num { font-variant-numeric: tabular-nums; }

/* --- etichette di esito --- */
.aurora .tag {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  font-size: var(--a-fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; line-height: 1.5;
  border: 1px solid currentColor; color: var(--a-teal); background: rgba(77,200,200,.1);
  margin-left: 8px;
}
.aurora .tag-ok { color: var(--a-ok); background: rgba(47,212,143,.1); border-color: currentColor; margin-left: 0; }
.aurora .tag-bad { color: var(--a-bad); background: rgba(255,107,107,.12); border-color: currentColor; margin-left: 0; }
.aurora .tag-nd { color: var(--a-fg-3); background: rgba(255,255,255,.05); border-color: var(--a-line-2); margin-left: 0; }
/* i tag con colore forzato inline (TITOLARE EFFETTIVO, PRESENTI, ADV/MON):
   il fondo arriva dallo style inline, qui garantiamo solo la leggibilità */
.aurora .tag[style*="background"] { color: #fff; border-color: transparent; }
.aurora .pres-chip { display: inline-block; font-size: var(--a-fs-2xs); font-weight: 800;
  letter-spacing: .1em; color: #fff; border-radius: 999px; padding: 4px 11px;
  margin-right: 10px; vertical-align: middle; line-height: 1.3; }
.aurora .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.aurora .fx-ok { background: var(--a-ok); } .aurora .fx-warn { background: var(--a-warn); }
.aurora .fx-bad { background: var(--a-bad); }

/* --- righe soggetto (soci, esponenti, immobili, movimenti) --- */
.aurora .subj .subj-item { padding: 13px 0; border-top: 1px solid var(--a-line); }
.aurora .subj .subj-item:first-child { border-top: 0; }
.aurora .subj-l1 { display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap; }
.aurora .subj-l1 .nm { font-weight: 600; font-size: var(--a-fs-md); color: var(--a-fg); }
.aurora .subj-l1 .cfx { font-size: var(--a-fs-xs); color: var(--a-fg-3); font-weight: 400;
  margin-left: 8px; font-variant-numeric: tabular-nums; }
.aurora .subj-l1 .main { font-size: var(--a-fs-md); text-align: right; white-space: nowrap;
  color: var(--a-fg-2); }
.aurora .subj-l2 { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px 24px;
  font-size: var(--a-fs-md); align-items: baseline; color: var(--a-fg-2); }

/* I VALORI del fornitore in maiuscolo, come sulla carta: il cockpit e il
   documento mostrano la stessa denominazione, e due grafie sarebbero
   un'incoerenza nuova al posto di quella tolta. Le etichette (`.fl`, `.asof`,
   `.a-meta-l`) erano già maiuscole per conto loro. I CHIP restano fuori.
   Specifica del 2026-09-03, §2. */
.aurora .subj-l1 .nm, .aurora .subj-l1 .main, .aurora .subj-l2,
.aurora .a-meta-v, .a-arch__name,
/* ⚠️ L'albero del gruppo esteso ha DUE rese — il macro della carta e il
   markup di questa pagina — e accendere solo la prima lasciava lo STESSO
   albero maiuscolo nel documento e in grafia mista qui: l'incoerenza che
   questo lavoro doveva togliere, spostata di una pagina. */
.aurora .ge-kv { text-transform: uppercase; }

/* E la frase NOSTRA che chiude una catena non si maiuscola mai: oggi non
   eredita da nessuno, ma il giorno in cui la si annidasse dentro `.ge-kv` il
   difetto tornerebbe identico e senza far rumore. Sulla carta è già successo. */
.aurora .ge-term { text-transform: none; }

/* --- Gruppo esteso: la tabella dell'albero, nel cockpit ---
   Il resto della riga usa il vocabolario dei soggetti (`subj-item`, `nm`,
   `cfx`, `tag`), che è già «una riga soggetto» e non va duplicato: qui stanno
   solo la colonna livello/ramo e le coppie etichetta/valore delle due righe
   sotto. La resa della CARTA è un'altra (`doc-ge-*`, in
   `_report_doc_style.html`): i due vocabolari non si mescolano. */
.aurora .ge-ram { font-variant-numeric: tabular-nums; color: var(--a-fg-3);
  font-size: var(--a-fs-xs); letter-spacing: .04em; margin-right: .8em;
  white-space: nowrap; font-weight: 400; }
/* Le quote accanto al nome, come sulla carta: è la misura che decide il
   perimetro del gruppo, e chi legge la cerca lì. */
.aurora .ge-q { margin-left: 1em; font-size: var(--a-fs-sm); font-weight: 600;
  color: var(--a-fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.aurora .ge-q i { font-style: normal; font-weight: 600; color: var(--a-fg-3);
  font-size: var(--a-fs-xs); letter-spacing: .06em; text-transform: uppercase;
  margin-right: .3em; }
.aurora .ge-kv { display: inline-block; margin: 0 1.1em 2px 0;
  font-size: var(--a-fs-xs); color: var(--a-fg-2); }
.aurora .ge-kv i { font-style: normal; color: var(--a-fg-3);
  text-transform: uppercase; letter-spacing: .05em; margin-right: .35em; }
.aurora .ge-term { display: block; font-size: var(--a-fs-xs); color: #d8a24a; }

/* --- KPI e indici di bilancio --- */
.aurora .kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--a-line); border-top: 1px solid var(--a-line);
  border-bottom: 1px solid var(--a-line); }
.aurora .kpi .k { background: var(--a-bg-800); padding: var(--a-4) var(--a-5); border: 0; }
.aurora .kpi .k .l { font-size: var(--a-fs-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-fg-3); }
.aurora .kpi .k .v { font-family: var(--a-display); font-weight: 400; font-size: var(--a-fs-2xl);
  color: var(--a-fg); margin-top: 5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.aurora .kpi.kpi-sm .k .v { font-size: var(--a-fs-xl); }
.aurora .kpi .k .v.neg { color: var(--a-bad); }
.aurora .kpi .k .u { font-size: var(--a-fs-xs); color: var(--a-fg-3); margin-top: 4px; }
.aurora .kpi + .kpi { border-top: 0; }
.aurora .fin-idx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--a-line); border: 1px solid var(--a-line); border-radius: var(--a-r-sm);
  overflow: hidden; margin-top: var(--a-4); }
.aurora .fin-idx .i { background: var(--a-bg-800); padding: 13px 16px; border: 0; }
.aurora .fin-idx .l { font-size: var(--a-fs-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--a-fg-3); }
.aurora .fin-idx .v { font-weight: 600; font-size: var(--a-fs-lg); color: var(--a-fg);
  margin-top: 5px; display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.aurora .fin-idx .s { font-size: var(--a-fs-2xs); color: var(--a-fg-3); margin-top: 3px; }

/* --- tabelle dei partial (KYC, visure) --- */
.aurora .doc-tbl { width: 100%; border-collapse: collapse; font-size: var(--a-fs-sm);
  margin-top: var(--a-2); }
.aurora .doc-tbl th { text-align: left; font-size: var(--a-fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--a-fg-3); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--a-line); }
.aurora .doc-tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(148,197,219,.08);
  color: var(--a-fg-2); }
.aurora .doc-tbl td b { color: var(--a-fg); }
.aurora .doc-tag { display: inline-block; font-size: var(--a-fs-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; border-radius: 999px;
  padding: 2px 8px; border: 1px solid currentColor; }
.aurora .doc-tag.bad { color: var(--a-bad); background: rgba(255,107,107,.12); }

/* --- blocchi acquistabili --- */
.aurora .lockcard { display: flex; align-items: center; gap: 14px; text-decoration: none;
  color: var(--a-fg); padding: 16px 18px; border-radius: var(--a-r);
  border: 1px dashed var(--a-line-2); background: rgba(255,255,255,.03);
  margin-bottom: 10px; transition: border-color .25s, background .25s, transform .25s var(--a-ease-out); }
.aurora .lockcard:hover { border-color: var(--a-teal); background: rgba(255,255,255,.06);
  transform: translateY(-2px); }
.aurora .lockcard .lk-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; color: var(--a-teal-hi);
  background: linear-gradient(135deg, rgba(77,200,200,.2), rgba(124,107,255,.16));
  border: 1px solid var(--a-line-2); }
.aurora .lk-main { flex: 1; min-width: 0; }
.aurora .lk-t { display: block; font-weight: 600; font-size: var(--a-fs-md); }
.aurora .lk-d { display: block; font-size: var(--a-fs-sm); color: var(--a-fg-3); margin-top: 3px; }
.aurora .lk-buy { flex: 0 0 auto; border-radius: 999px; padding: 8px 15px; font-weight: 700;
  font-size: var(--a-fs-xs); white-space: nowrap; color: #fff; background: var(--a-bg-600); }
.aurora .btn-buy-block { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--a-teal-hi), var(--a-teal) 45%, var(--a-navy));
  color: #04212c; font: inherit; font-size: var(--a-fs-sm); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; box-shadow: 0 10px 26px -14px rgba(77,200,200,.8);
  transition: transform .18s var(--a-spring), box-shadow .3s; }
.aurora .btn-buy-block:hover { box-shadow: 0 14px 34px -14px rgba(77,200,200,.95); }
.aurora .btn-buy-block:active { transform: scale(.97); }
.aurora .btn-buy-disabled { display: inline-block; border-radius: 999px; padding: 10px 20px;
  background: rgba(255,255,255,.06); color: var(--a-fg-3); font-weight: 700;
  font-size: var(--a-fs-sm); cursor: default; }
.aurora .lock-box { border: 1px dashed var(--a-line-2); border-radius: var(--a-r);
  padding: 22px; text-align: center; color: var(--a-fg-3); font-size: var(--a-fs-md);
  background: rgba(255,255,255,.02); margin-top: 10px; }

/* --- workflow adeguata verifica --- */
.aurora .avf-step { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--a-line); }
.aurora .avf-step:first-child { border-top: 0; }
.aurora .avf-n { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--a-line-2); color: var(--a-teal); font-weight: 600;
  font-size: var(--a-fs-md); font-variant-numeric: tabular-nums; }
.aurora .avf-body { flex: 1; min-width: 0; }
.aurora .avf-t { font-weight: 600; font-size: var(--a-fs-md); padding-top: 7px; color: var(--a-fg); }
.aurora .avf-list { margin: 8px 0 0; padding-left: 18px; font-size: var(--a-fs-md);
  color: var(--a-fg-2); line-height: 1.8; }

/* --- dettagli a scomparsa (KYC, negatività) --- */
.aurora details > summary { cursor: pointer; color: var(--a-fg-2); }
.aurora details > summary:hover { color: var(--a-fg); }
.aurora details[open] > summary { margin-bottom: 6px; }

@media (max-width: 720px) {
  .aurora .kpi, .aurora .fin-idx { grid-template-columns: repeat(2, 1fr); }
  .aurora .two { grid-template-columns: 1fr; }
  .aurora .two > div + div { border-left: 0; border-top: 1px solid var(--a-line); }
  .aurora .sheet-head { flex-direction: column; }
  .aurora .lockcard { flex-wrap: wrap; }
}

/* =========================================================================
   17d. AMMINISTRAZIONE — solo guscio
   -------------------------------------------------------------------------
   Le 11 pagine admin estendono `base.html` come tutte le altre e non hanno
   uno stile proprio. Qui non si ridisegnano i form uno per uno: si
   vestono il vocabolario che già usano (.panel, .admin-tile, .admin-form,
   .ledger, .badge-status…) e i controlli nativi, che sul fondo scuro
   sarebbero altrimenti illeggibili — i browser rendono input e select
   chiari a prescindere dal tema della pagina.
   ========================================================================= */

/* --- rimappatura delle variabili V2 ---
   Le pagine admin portano ~136 stili INLINE che citano le variabili di
   verifai.css (`var(--hair)`, `var(--muted)`, `var(--ink)`, `var(--navy)`…).
   In V3 quel foglio non è caricato: quelle variabili non esistono, la
   dichiarazione è invalida e il colore ricade sull'ereditato — testo chiaro
   su fondi chiari, cioè illeggibile.
   Ridefinirle qui vale come tradurle tutte in un colpo solo, senza toccare i
   template condivisi con la V2. */
.aurora {
  --ink: #eaf4f9;                       /* testo principale        16,6:1 */
  --muted: #a9c2d0;                     /* testo secondario        10,0:1 */
  --hair: rgba(148,197,219,.18);        /* filetti                        */
  --navy: #7ff0ef;                      /* accento/collegamenti    11,9:1 */
  --teal: #4dc8c8;                      /*                          9,2:1 */
  --paper: rgba(255,255,255,.05);       /* fondo delle superfici          */
  --bg: #0a141d;
  --red: #ff6b6b; --green: #2fd48f; --amber: #ffb547;
}

/* --- fondi chiari cablati negli stili inline ---
   Qui `!important` è la scelta corretta, non una scorciatoia: lo stile inline
   ha precedenza su qualunque regola del foglio, e quei `background:#fff` sono
   scritti nei template condivisi con la V2, dove servono. Sono gli unici casi
   in tutto aurora.css.

   I campi vanno INCASSATI, non rialzati: su fondo scuro un riempimento più
   CHIARO della superficie che li ospita trasforma un form fitto in una parete
   di barre luminose, e il valore digitato ci si perde dentro. Un pozzo più
   scuro del pannello inverte il rapporto — il dato risalta, la cornice si
   ritira — ed è la convenzione dei temi scuri. */
.aurora input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),
.aurora select, .aurora textarea {
  background: rgba(2,10,18,.55) !important;
  color: var(--a-fg) !important;
  border-color: var(--a-line) !important;
}
/* Eccezione: la barra di ricerca è già un pozzo (la pillola porta il proprio
   fondo). Un secondo riempimento dentro disegnerebbe un rettangolo dentro la
   pillola. */
.aurora .a-search input { background: transparent !important; }
/* l'icona del selettore data è nera: su fondo scuro sparisce */
.aurora input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.65); }
/* i collegamenti a forma di pulsante (azzera filtri, esporta CSV, paginazione
   del registro attività — questi ultimi scrivono `background: white` per
   nome, non in esadecimale: il selettore per sottostringa è letterale e senza
   questa variante restavano bianchi) */
.aurora a[style*="background:#fff"], .aurora a[style*="background: #fff"],
.aurora a[style*="background:white"], .aurora a[style*="background: white"],
.aurora a[style*="background:#f5f5f5"], .aurora a[style*="background: #f5f5f5"] {
  background: rgba(255,255,255,.06) !important;
  color: var(--a-fg) !important;
  border-color: var(--a-line) !important;
}
/* Etichette di stato e paginazione: nelle admin hanno pastelli chiari cablati.
   NON si può usare una regola generica su `span[style*=background]`: i badge
   della V3 (ADV/MON, titolare effettivo, rating) hanno fondi scuri saturi
   inline che vanno preservati. Questo è l'elenco COMPLETO dei pastelli chiari
   presenti nei template admin — stringhe statiche, quindi un insieme chiuso. */
.aurora [style*="background: #f5f5f5"], .aurora [style*="background:#f5f5f5"],
.aurora [style*="background: #f9f9f9"], .aurora [style*="background:#f9f9f9"],
.aurora [style*="background: #eceff1"], .aurora [style*="background:#eceff1"],
.aurora [style*="background: #e1f5fe"], .aurora [style*="background:#e1f5fe"],
.aurora [style*="background: #e8f5e9"], .aurora [style*="background:#e8f5e9"],
.aurora [style*="background: #f3e5f5"], .aurora [style*="background:#f3e5f5"] {
  background: rgba(255,255,255,.06) !important;
  color: var(--a-fg-2) !important;
  border: 1px solid var(--a-line) !important;
}

/* --- pannello e intestazione --- */
.aurora .panel {
  position: relative; overflow: hidden; margin-top: var(--a-5);
  padding: var(--a-5); border-radius: var(--a-r-lg);
  background: linear-gradient(180deg, var(--a-glass-2), var(--a-glass));
  border: 1px solid var(--a-line); box-shadow: var(--a-shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.aurora .panel .head { display: flex; justify-content: space-between; align-items: center;
  gap: var(--a-4); margin-bottom: var(--a-4); }
.aurora .panel .head .slab { color: var(--a-teal) !important; font-size: var(--a-fs-lg) !important;
  font-weight: 600 !important; }
.aurora .panel .empty { color: var(--a-fg-3); font-size: var(--a-fs-md);
  padding: 32px 0; text-align: center; }

/* --- riquadri di navigazione della home admin --- */
.aurora .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--a-4); padding: var(--a-2) 0; }
.aurora .admin-tile {
  display: block; padding: var(--a-5); border-radius: var(--a-r); text-align: center;
  text-decoration: none; color: var(--a-fg-2);
  background: rgba(255,255,255,.04); border: 1px solid var(--a-line);
  transition: transform .25s var(--a-ease-out), border-color .25s, background .25s;
}
.aurora .admin-tile:hover { transform: translateY(-3px); border-color: var(--a-teal);
  background: rgba(255,255,255,.07); color: var(--a-fg); }
.aurora .admin-tile .num { display: block; font-family: var(--a-display); font-weight: 400;
  font-size: var(--a-fs-2xl); line-height: 1.1; color: var(--a-teal); margin-bottom: 6px; }

/* --- controlli di form ---
   senza queste regole i campi restano bianchi su fondo scuro: è il difetto
   più vistoso di una conversione a tema scuro fatta a metà */
/* Selettore per ESCLUSIONE, non per elenco di `type`: nei template admin
   diversi campi sono scritti `<input name="nome">` senza attributo `type`, e
   `[type=text]` NON li seleziona (gli attribute selector guardano l'attributo,
   non il valore predefinito — JS invece riporta `type="text"` e trae in
   inganno). Con l'elenco restavano bianchi su fondo scuro. */
/* Qui SOLO la forma. I colori stanno più sopra, nel blocco con `!important`,
   perché devono battere gli stili inline dei template admin. */
.aurora input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]),
.aurora select, .aurora textarea {
  border: 1px solid var(--a-line); border-radius: var(--a-r-sm);
  padding: 9px 11px; font: inherit; font-size: var(--a-fs-md);
  min-height: 40px; max-width: 100%;
}
.aurora textarea { min-height: 90px; line-height: 1.6; }
.aurora input::placeholder, .aurora textarea::placeholder { color: var(--a-fg-3); }
.aurora input:focus, .aurora select:focus, .aurora textarea:focus {
  outline: 0; border-color: rgba(77,200,200,.6); box-shadow: 0 0 0 3px rgba(77,200,200,.14);
}
.aurora input[type=checkbox], .aurora input[type=radio] { accent-color: var(--a-teal);
  width: 17px; height: 17px; min-height: 0; }
/* le option del menu a tendina sono disegnate dal sistema: senza fondo
   esplicito, su alcune combinazioni restano testo chiaro su bianco */
.aurora select option { background: var(--a-bg-700); color: var(--a-fg); }
.aurora label { color: var(--a-fg-2); }

.aurora button, .aurora .admin-form button, .aurora .inline-form button {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--a-teal-hi), var(--a-teal) 45%, var(--a-navy));
  color: #04212c; font: inherit; font-size: var(--a-fs-sm); font-weight: 700; cursor: pointer;
  transition: transform .18s var(--a-spring), box-shadow .3s;
}
.aurora button:active { transform: scale(.97); }
.aurora button[disabled] { opacity: .45; cursor: not-allowed; }
.aurora .admin-form { display: flex; flex-wrap: wrap; gap: var(--a-2); align-items: center; }
.aurora .inline-form { display: flex; gap: 6px; align-items: center; }
.aurora .inline-form input { width: 100px; }
.aurora .fld, .aurora .grp-fld { display: flex; flex-direction: column; gap: 5px; }
.aurora .lab { color: var(--a-fg-3); }

/* --- ritorno al pannello (templates/admin/_back.html) ---
   Senza queste regole `.btn-back` resta un collegamento nudo: il blu di
   sistema (#0000ee) su fondo scuro è praticamente invisibile. */
.aurora .actionbar { display: flex; justify-content: space-between; align-items: center;
  gap: var(--a-4); margin-bottom: var(--a-3); }
.aurora .act-left { display: flex; gap: var(--a-2); align-items: center; }
.aurora .btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--a-line);
  color: var(--a-fg-2); text-decoration: none;
  font-size: var(--a-fs-sm); font-weight: 600;
  transition: border-color .25s, color .25s, background .25s, transform .18s var(--a-ease-out);
}
.aurora .btn-back:hover { border-color: var(--a-teal); color: var(--a-fg);
  background: rgba(255,255,255,.08); transform: translateX(-2px); }

/* --- listino servizi (/admin/prezzi) ---
   Una voce di listino è una RIGA di tabella: sei valori omogenei più il
   comando che li salva. In V2 la porta un flex, che in V3 non era mai stato
   ridichiarato: `.price-l2` ricadeva su `display:block`, ogni campo diventava
   un blocco a piena larghezza e la voce si srotolava in sette bande alte
   1000px. Qui è una griglia e non un flex proprio perché le colonne devono
   incolonnarsi anche FRA voci diverse: è quello che rende la pagina leggibile
   a colpo d'occhio. */
.aurora .price-item { padding: 15px 0; border-top: 1px solid var(--a-line); margin: 0; }
.aurora .price-item:first-of-type { border-top: 0; }
.aurora .price-l1 { display: flex; align-items: center; gap: var(--a-3); flex-wrap: wrap; }
.aurora .price-l1 .code { min-width: 150px; font-size: var(--a-fs-xs);
  color: var(--a-fg-3); letter-spacing: .04em; }
/* la descrizione è testo libero e lungo: si prende tutto lo spazio residuo */
.aurora .price-l1 .descr { flex: 1 1 340px; min-width: 240px; font-weight: 600; }
.aurora .price-l1 .switch { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.aurora .price-l2 {
  margin-top: 10px; display: grid; align-items: end;
  grid-template-columns: repeat(5, minmax(84px, 1fr)) auto;
  gap: var(--a-2) var(--a-3);
}
.aurora .price-l2 .fld { min-width: 0; }        /* i campi possono restringersi */
.aurora .price-l2 input { width: 100%; }
.aurora .price-l2 button { justify-self: start; }
@media (max-width: 1000px) {
  /* sotto i mille pixel cinque colonne più il pulsante non ci stanno senza
     comprimere i numeri fino a troncarli: tre colonne e il comando a capo */
  .aurora .price-l2 { grid-template-columns: repeat(3, minmax(84px, 1fr)); }
  .aurora .price-l2 button { grid-column: 1 / -1; }
}

/* --- gruppi di vendita (/admin/gruppi) ---
   Questa pagina porta un <style> proprio, scritto per la V2, con pastelli e
   bianchi cablati: non sono stili INLINE, quindi le regole per sottostringa
   più sopra non li intercettano. Le chip dei servizi restavano bianche con
   testo grigio chiaro sopra (1,9:1) e i badge azzurro pallido con testo teal.
   Bastano le stesse classi con un livello di specificità in più. */
.aurora .grp-chip { background: rgba(255,255,255,.04); color: var(--a-fg-2);
  border-color: var(--a-line); }
.aurora .grp-chip:hover { border-color: var(--a-teal); background: rgba(255,255,255,.07); }
.aurora .grp-chip .pz, .aurora .grp-chip .sc { color: var(--a-fg-3); }
.aurora .grp-badge { border-color: var(--a-line); color: var(--a-fg-3); }
.aurora .grp-badge.report { background: rgba(77,200,200,.14); color: var(--a-teal);
  border-color: rgba(77,200,200,.4); }
.aurora .grp-badge.off { background: rgba(255,107,107,.14); color: var(--a-bad);
  border-color: rgba(255,107,107,.4); }
/* «non invocabile per questa forma giuridica»: stessa pastiglia ambra dei badge
   di stato, perché è un avviso e non un errore. Forma E colori vivono QUI:
   l'area admin carica SOLO aurora.css, quindi la regola di verifai.css non
   arriva mai — e il suo ambra su carta chiara sarebbe illeggibile sul fondo
   scuro. */
.aurora .price-na, .aurora .grp-na { margin-top: 8px; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 6px 10px; }
.aurora .na-tag { font-size: var(--a-fs-2xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 1px solid;
  background: rgba(255,181,71,.12); color: var(--a-warn); border-color: rgba(255,181,71,.4); }
.aurora .na-why { font-size: var(--a-fs-xs); color: var(--a-fg-2); }
.aurora .na-why b { color: var(--a-fg); }
.aurora .grp-new { background: rgba(255,255,255,.03); border-color: rgba(77,200,200,.45); }
.aurora .grp-card { border-color: var(--a-line); }
.aurora .grp-title { color: var(--a-fg); }
.aurora .grp-intro { color: var(--a-fg-2); }
.aurora .grp-intro b { color: var(--a-fg); }
.aurora .grp-switch { color: var(--a-fg-2); }
.aurora .grp-mem-head { color: var(--a-fg-3); }
/* «Elimina» eredita il testo scuro dei pulsanti pieni: qui il fondo è vuoto */
.aurora .grp-del { background: transparent; color: var(--a-bad); }
.aurora .grp-del:hover { background: rgba(255,107,107,.12);
  border-color: rgba(255,107,107,.45) !important; }

/* --- tabelle dati (ledger) --- */
.aurora .ledger { width: 100%; border-collapse: collapse; font-size: var(--a-fs-sm); }
.aurora .ledger th, .aurora .ledger .lab {
  text-align: left; font-size: var(--a-fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--a-fg-3); font-weight: 600;
}
.aurora .ledger td { padding: 10px 8px; border-top: 1px solid var(--a-line);
  color: var(--a-fg-2); vertical-align: top; }
.aurora .ledger tr:first-child td { border-top: 0; }
.aurora .ledger .val { text-align: right; font-weight: 600; color: var(--a-fg); }
.aurora table th { color: var(--a-fg-3); }
.aurora table td { color: var(--a-fg-2); }

/* --- la CARTA del documento dentro il cockpit scuro -------------------------
   Il Report Full è un foglio bianco (`.doc`) servito dentro una pagina a tema
   scuro: le regole di cui sopra, pensate per fondo scuro, gli scrivevano dentro
   testo quasi bianco su bianco — i grassetti delle tabelle (var(--a-fg) =
   #eaf4f9, contrasto 1,12:1) risultavano invisibili. Qui il tema si ritira
   dalla carta: dentro `.doc` valgono i colori del documento, non quelli del
   cockpit. Specificità maggiore delle regole scure, così vince a prescindere
   dall'ordine di caricamento dei fogli. */
.aurora .doc table th,
.aurora .doc .doc-tbl th { color: #66747e; }
.aurora .doc table td,
.aurora .doc .doc-tbl td { color: #101a22; }
.aurora .doc table td b,
.aurora .doc .doc-tbl td b { color: #101a22; }
.aurora .doc .ledger td { color: #101a22; }
.aurora .doc .ledger th, .aurora .doc .ledger .lab { color: #66747e; }
.aurora .doc .ledger .val { color: #101a22; }

/* --- badge di stato e paginazione --- */
.aurora .badge-status { display: inline-block; font-size: var(--a-fs-2xs); font-weight: 700;
  letter-spacing: .06em; border-radius: 999px; padding: 3px 10px; border: 1px solid currentColor; }
.aurora .st-green { color: var(--a-ok); background: rgba(47,212,143,.12); }
.aurora .st-amber { color: var(--a-warn); background: rgba(255,181,71,.12); }
.aurora .st-red { color: var(--a-bad); background: rgba(255,107,107,.12); }
.aurora .pag-btn { min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--a-line);
  color: var(--a-fg-2); font-size: var(--a-fs-sm); font-weight: 600; }
.aurora .pag-btn:hover { border-color: var(--a-line-2); color: var(--a-fg); }
.aurora .pagination { display: flex; justify-content: center; align-items: center;
  gap: var(--a-3); margin-top: var(--a-5); }

/* invito all'azione sopra il documento (aggiorna/acquista report): il testo in
   grassetto porta la gerarchia, quindi va più chiaro del corpo */
.aurora .doc-complete b { color: var(--a-fg); font-weight: 600; }

/* ------------------------------------------------------------ 18. FOOTER */
.a-foot { border-top: 1px solid var(--a-line); margin-top: var(--a-8);
  padding: var(--a-6) clamp(16px,4vw,40px); color: var(--a-fg-3); font-size: var(--a-fs-xs); }

/* ------------------------------------------------------ 19. RESPONSIVE */
@media (max-width: 720px) {
  .a-risk { flex-direction: column; align-items: flex-start; gap: var(--a-4); }
  .a-row { grid-template-columns: 40px 1fr; }
  .a-row__side { grid-column: 1 / -1; justify-content: flex-start; }
  .a-search { padding-left: 16px; border-radius: var(--a-r-lg); }
  .a-topbar { gap: var(--a-3); }
  .a-topbar .a-chip-ver { display: none; }         /* etichetta di servizio */
  .a-topbar .a-right { gap: var(--a-3); font-size: var(--a-fs-xs); }
  .a-topbar .a-right span.a-hide-sm { display: none; }
  .a-kpis { grid-template-columns: repeat(2, 1fr); }
  .a-catalog, .a-risks { grid-template-columns: 1fr; }
  /* le due colonne dei grafici collassano: su telefono un grafico stretto
     è illeggibile, meglio a piena larghezza uno sotto l'altro */
  .a-shell section[style*="grid-template-columns"] { display: block !important; }
  .a-shell section[style*="grid-template-columns"] > * + * { margin-top: 20px; }
  /* la colonna sandbox va sopra il contenuto, non a fianco */
  .a-preprod { grid-template-columns: 1fr; }
  .a-flash { left: 12px; right: 12px; max-width: none; }
  /* l'archivio su telefono: via le colonne accessorie, restano nome, data
     e l'icona dei report (compatta, ci sta anche stretta) */
  .a-table--arch th:nth-child(2), .a-table--arch td:nth-child(2),
  .a-table--arch th:nth-child(3), .a-table--arch td:nth-child(3) { display: none; }
  .a-portfolio-strip { gap: var(--a-4); }
  .a-portfolio-strip__link { margin-left: 0; width: 100%; }
  .a-barrow { grid-template-columns: 92px 1fr auto; }
}

/* =========================================================================
   19b. STAMPA
   -------------------------------------------------------------------------
   La pagina «dossier» ha un pulsante Stampa, e il cockpit è chiaro su scuro.
   I browser NON stampano i fondi ma stampano il testo: senza queste regole
   uscirebbe testo quasi bianco su carta bianca, cioè un foglio vuoto.
   Qui l'app si ribalta in scuro-su-chiaro e sparisce tutto ciò che non è
   contenuto. Il Report Full non è toccato: è già un documento chiaro e ha
   le proprie regole di stampa.
   ========================================================================= */
@media print {
  .aurora { background: #fff !important; color: #101a22 !important; }
  .a-backdrop, .a-grid-overlay, .a-topbar, .a-progress, .a-overlay,
  .a-actionbar, .a-flash, .no-print { display: none !important; }

  .aurora .card-sheet, .aurora .panel {
    background: #fff !important; border-color: #dde6ec !important;
    box-shadow: none !important; backdrop-filter: none !important;
  }
  .aurora .card-sheet::before, .aurora .a-card::before { display: none !important; }

  /* testo: due soli livelli in stampa, nero e grigio */
  .aurora .co, .aurora .sub, .aurora .a-meta-v, .aurora .subj-l1 .nm,
  .aurora .kpi .k .v, .aurora .a-risk__lvl { color: #101a22 !important; }
  .aurora .meta, .aurora .cp-meta, .aurora .li, .aurora .asof, .aurora .fl,
  .aurora .subj-l2, .aurora .a-meta-l, .aurora .a-risk__note,
  .aurora .kpi .k .l, .aurora .kpi .k .u { color: #40525e !important; }
  .aurora .kicker, .aurora .a-kicker { color: #16808a !important; }

  .aurora hr.rule, .aurora .rule { background: #dde6ec !important; }
  .aurora .kpi { background: #dde6ec !important; border-color: #dde6ec !important; }
  .aurora .kpi .k { background: #fff !important; }
  .aurora .subj .subj-item { border-color: #eef3f6 !important; }
  .aurora .a-risks-band { background: #f4f7f9 !important;
    border-color: #dde6ec !important; }
  .aurora .a-risk { background: #fff !important; border-color: #dde6ec !important; }
  .aurora .two > div + div { border-color: #dde6ec !important; }

  /* niente animazioni in attesa: sulla carta deve esserci lo stato finale */
  .aurora .a-reveal { opacity: 1 !important; transform: none !important; }
  .aurora .a-words .w > i { transform: none !important; }
  .aurora .a-draw { stroke-dashoffset: 0 !important; }
  .aurora .a-bar, .aurora .a-meter span { transform: none !important; }
}

/* margine residuo del contenitore dei passi (in V2 stava in verifai.css) */
.aurora .avf { margin-top: 4px; }

/* --------------------------------------------- 20. MOVIMENTO RIDOTTO */
/* Requisito non negoziabile: chi ha impostato prefers-reduced-motion vede
   tutto lo stato finale, senza transizioni, senza blob in movimento. */
@media (prefers-reduced-motion: reduce) {
  .aurora *, .aurora *::before, .aurora *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .a-blob { animation: none; }
  .a-reveal { opacity: 1; transform: none; }
  .a-words .w > i { transform: none; }
  .a-draw { stroke-dashoffset: 0; }
  .a-bar, .a-meter span { transform: none; }
}

/* ── Contatore dei collegamenti ───────────────────────────────────────────
   Accanto a una denominazione: quanti ALTRI report dell'archivio contengono
   lo stesso soggetto. Discreto per costruzione — in una tabella di venti
   righe deve leggersi solo se lo si cerca. La variante --warn segnala che
   quel soggetto ha evidenze altrove, ed è la sola che chiama l'occhio. */
.coll-badge{font-size:.72rem;letter-spacing:.03em;color:var(--a-teal);
  text-decoration:none;margin-left:6px;white-space:nowrap;vertical-align:baseline}
.coll-badge:hover{text-decoration:underline}
.coll-badge--warn{color:var(--a-warn)}
.coll-badge-pdf{font-size:.72rem;color:#66747e;margin-left:6px;white-space:nowrap}

/* Filtro locale di una tabella (analisi di portafoglio): non è la ricerca
   dell'archivio — non interroga il server, nasconde le righe che non
   corrispondono. Perciò è un campo sobrio, non la barra tonda della home. */
.a-input{
  width:100%; background:rgba(9,20,29,.6); color:var(--a-fg);
  border:1px solid var(--a-line-2); border-radius:10px;
  padding:9px 12px; font:inherit; font-size:var(--a-fs-sm);
}
.a-input::placeholder{color:var(--a-fg-3)}
.a-input:focus{outline:0; border-color:rgba(77,200,200,.6); box-shadow:var(--a-glow-teal)}