/* Account collegati: una colonna di schede, una per servizio, sullo stesso fondo della pagina di accesso. */

body {
  min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(900px 560px at 50% -120px, color-mix(in srgb, var(--color-accent-900) 90%, transparent), transparent 70%), var(--color-bg);
}
.collegamenti {
  width: min(100%, 600px); margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 6vh, 56px) 16px 48px;
}

.testata__passo { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-400); }
.testata__passo[hidden] { display: none; }
.testata__titolo { margin: 0; font-size: clamp(26px, 5vw, 34px); }
.testata__sotto { margin: 8px 0 0; font-size: 14.5px; color: var(--color-neutral-400); }

.avviso { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.45; }
.avviso[hidden] { display: none; }
.avviso--ok {
  color: var(--sig-good, #4fd18b); border: 1px solid color-mix(in srgb, var(--sig-good, #4fd18b) 50%, transparent);
  background: color-mix(in srgb, var(--sig-good, #4fd18b) 8%, transparent);
}
.avviso--errore {
  color: var(--sig-bad, #ff4d6a); border: 1px solid color-mix(in srgb, var(--sig-bad, #ff4d6a) 50%, transparent);
  background: color-mix(in srgb, var(--sig-bad, #ff4d6a) 8%, transparent);
}

/* ── schede dei servizi ── */

.servizio {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--shadow-md);
  animation: noct-in .3s ease both;
}
.servizio__testa { display: flex; align-items: center; gap: 12px; }
.servizio__logo {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; font-size: 22px;
}
.servizio__logo--lichess { background: #f2f2f2; color: #161512; }
.servizio__logo--chesscom { background: #81b64c; color: #fff; }
.servizio__nome { flex: 1; min-width: 0; }
.servizio__nome h2 { margin: 0; font-size: 18px; }
.servizio__stato { margin: 2px 0 0; font-size: 13.5px; color: var(--color-neutral-400); overflow-wrap: anywhere; }
.spunta {
  flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  color: var(--sig-good, #4fd18b); border: 1px solid color-mix(in srgb, var(--sig-good, #4fd18b) 50%, transparent);
}
.spunta[hidden] { display: none; }
.servizio__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.servizio__corpo[hidden] { display: none; }

.nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-500); }
.field { width: 100%; }
.riga { display: flex; gap: 8px; }
.riga .input { flex: 1; min-width: 0; min-height: 40px; }

.passi { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; }
.codice { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.codice code {
  padding: 5px 10px; border-radius: var(--radius-md); font-size: 15px; letter-spacing: .04em; user-select: all;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent); border: 1px solid var(--color-accent-700); color: var(--color-accent-200);
}
.azioni { display: flex; gap: 8px; flex-wrap: wrap; }

.fondo { display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 480px) {
  .riga { flex-direction: column; }
}

/* ── importazione ── */

.importa { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.importa p { margin: 0; }
.importa--corso p:first-child::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%;
  border: 2px solid var(--color-accent); border-right-color: transparent; vertical-align: -1px;
  animation: gira .8s linear infinite;
}
.importa__errore { color: var(--sig-bad, #ff4d6a); }
@keyframes gira { to { transform: rotate(360deg); } }
.fondo { gap: 8px; flex-wrap: wrap; }
.fondo .btn[hidden] { display: none; }
.link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--color-accent-300, var(--color-accent));
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* ── riepilogo prima di importare ── */

.riepilogo {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0;
  display: none; flex-direction: column; border: 0; border-radius: var(--radius-lg); color: var(--color-text);
  background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider), 0 24px 60px rgba(0,0,0,.6);
}
.riepilogo[open] { display: flex; }
.riepilogo::backdrop { background: rgba(8, 9, 16, .62); backdrop-filter: blur(2px); }
.riepilogo__testa { padding: 18px 20px 0; }
.riepilogo__servizio { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-400); overflow-wrap: anywhere; }
.riepilogo__titolo { margin: 4px 0 0; font-size: 20px; }
.riepilogo__corpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; }
.riepilogo__azioni {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 14px 20px 18px;
  border-top: 1px solid var(--color-divider);
}

.conti-scorri { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.conti { width: 100%; border-collapse: collapse; font-size: 14px; }
.conti th, .conti td { padding: 9px 12px; text-align: right; white-space: nowrap; }
.conti thead th { font-size: 12px; font-weight: 500; color: var(--color-neutral-400); }
.conti tbody th { text-align: left; font-weight: 400; color: var(--color-neutral-400); }
.conti tbody tr { border-top: 1px solid var(--color-divider); }
.conti tbody td { font-variant-numeric: tabular-nums; color: var(--color-neutral-300); }
.conti tbody td.conti__somma { font-weight: 600; color: var(--color-text); }
.conti__totale { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.conti__totale th { color: var(--color-text) !important; }
.conti__totale td.conti__somma { font-size: 16px; }
.conti__nuove td { color: var(--sig-good, #4fd18b) !important; }

.motivi h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.motivi ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.motivi li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 1.45; color: var(--color-neutral-300, var(--color-text)); }
.motivi .num { flex: none; font-weight: 600; color: var(--color-text); }

/* ── barre di avanzamento: importazione e analisi di Stockfish ── */

.barra { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.barra__testa { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.barra__testa span:first-child { overflow-wrap: anywhere; }
.barra__testa .num { flex: none; font-variant-numeric: tabular-nums; color: var(--color-neutral-400); }
.barra__binario { height: 6px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.barra__pieno { width: var(--pct); height: 100%; border-radius: inherit; background: var(--color-accent); transition: width .4s ease; }
.barra__testo { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--color-neutral-500); }