/* ============================================================
   SEE YOU ACADEMY — foglio di stile base
   Palette: bianco · fucsia · nero. Font: Jost.
   Cambi il colore dell'Academy da UNA riga: --accent.
   ============================================================ */

:root {
  --accent:      #ff184e;
  --accent-dark: #d90f3f;
  --accent-soft: #fff0f3;
  --ink:         #0b0b0f;
  --ink-2:       #3a3a42;
  --muted:       #7a7a85;
  --line:        #e9e9ee;
  --ground:      #f3f3f6;
  --surface:     #ffffff;
  --surface-2:   #f5f5f8;
  --ok:          #1f7a4d;
  --ok-soft:     #e6f4ea;
  --warn:        #9a6b00;
  --warn-soft:   #fff5dc;
  --err:         #b3261e;
  --err-soft:    #fdecea;
  --tint-lilac:  #ece6f8;
  --tint-mint:   #e2f3e6;
  --tint-sand:   #f8f0d8;
  --tint-rose:   #ffe4ea;
  --tint-sky:    #e4ecf9;
  --radius:      22px;
  --radius-sm:   14px;
  --radius-xs:   10px;
  --shadow:      0 1px 2px rgba(11,11,15,.03), 0 18px 40px -24px rgba(11,11,15,.16);
  --shadow-lift: 0 2px 4px rgba(11,11,15,.04), 0 28px 60px -28px rgba(11,11,15,.28);
  --glass:       rgba(255,255,255,.72);
  --font:        "Jost", "Helvetica Neue", Arial, sans-serif;
  --ease:        cubic-bezier(.2,.8,.2,1);
  --sidebar-w:   268px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Chi ha l'attributo hidden resta nascosto, sempre: nessuna regola di stile può ignorarlo. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(28px, 4vw, 40px); }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
p { margin: 0 0 1em; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; }
img { max-width: 100%; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.accent { color: var(--accent); }
.ok-text { color: var(--ok); font-weight: 500; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 10px;
}
.gap { gap: 22px; }

/* ---------- brand ------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .02em; color: var(--ink); font-size: 17px; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); display: inline-block; }

/* ---------- topbar (pubblico + studente) --------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
.topnav { display: flex; align-items: center; gap: 22px; font-weight: 500; }
.topnav a { color: var(--ink-2); }
.topnav a.active { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.topnav a:hover { text-decoration: none; color: var(--accent-dark); }
.topnav .pill { background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; }
.topnav .pill:hover { background: var(--accent); }

.content { padding: 36px 0 60px; min-height: 60vh; }
.layout-admin .content { padding: 34px 36px 60px; }

.foot { border-top: 1px solid var(--line); padding: 26px 0; font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- shell admin (sidebar tipo WordPress) ------------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--ink); color: #fff; padding: 22px 18px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { color: #fff; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a, .sidenav .soon {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius-sm); color: #d9d9de; font-weight: 500; font-size: 15px;
}
.sidenav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.sidenav a.active { background: var(--accent); color: #fff; }
.sidenav .soon { color: #6f6f78; cursor: default; }
.sidenav .soon em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #55555d; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot .me { display: flex; flex-direction: column; margin-bottom: 6px; }
.sidebar-foot .me small { color: #8d8d96; }
.sidebar-foot .btn-ghost { border-color: rgba(255,255,255,.18); color: #fff; }
.sidebar-foot .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* ---------- pagina ------------------------------------------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.card.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card-highlight { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.cards-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

.empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- statistiche ------------------------------------- */
.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 26px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; }
.stat .num { font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: 13.5px; }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.log li { display: grid; grid-template-columns: 120px 140px 1fr; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.log .when { color: var(--muted); font-variant-numeric: tabular-nums; }
.log .who { font-weight: 500; }
@media (max-width: 720px) { .log li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- form --------------------------------------------- */
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; margin-bottom: 14px; }
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="number"],
.form input[type="date"], .form input[type="time"], .form input[type="tel"], .form input[type="url"],
.form input[type="search"], .form select, .form textarea {
  font: inherit; font-size: 15.5px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s;
}
.form input[type="file"] { font: inherit; font-size: 14px; padding: 9px 0; width: 100%; }
.form label small { display: inline; margin-left: 4px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.form input:disabled { background: var(--surface-2); color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: transform .08s, background .15s, box-shadow .15s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px rgba(255,24,78,.6); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }

/* ---------- messaggi ---------------------------------------- */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 500; border: 1px solid transparent; }
.flash-ok    { background: var(--ok-soft);   color: var(--ok);   border-color: #cfe8d9; }
.flash-info  { background: var(--accent-soft); color: var(--accent-dark); border-color: #ffd3dd; }
.flash-warn  { background: var(--warn-soft); color: var(--warn); border-color: #f3e3b0; }
.flash-error { background: var(--err-soft);  color: var(--err);  border-color: #f5c6c2; }

/* ---------- login -------------------------------------------- */
.auth { display: flex; justify-content: center; padding: 30px 0; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 32px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 30px; margin-bottom: 4px; }
.auth-help { margin-top: 18px; text-align: center; }

/* ---------- homepage provvisoria ----------------------------- */
.hero { padding: 40px 0 30px; max-width: 760px; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); }
.hero .lede { font-size: 19px; color: var(--ink-2); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.cta-band { margin-top: 50px; padding: 34px; border-radius: var(--radius); background: var(--surface-2); text-align: center; }
.cta-band h2 { margin-bottom: 6px; }

/* ---------- pagina di installazione -------------------------- */
.page-install { background: var(--surface-2); }
.install { max-width: 720px; margin: 0 auto; padding: 50px 22px 80px; display: flex; flex-direction: column; gap: 18px; }
.install-head h1 { margin-top: 14px; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--ok); }
.checks li.ko .dot { background: var(--err); }
.checks li.ko { color: var(--err); }
.checks small { color: var(--muted); }

/* ---------- responsive ---------------------------------------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .sidenav { flex-direction: row; flex-wrap: wrap; }
  .layout-admin .content { padding: 26px 20px 60px; }
}
@media (max-width: 720px) {
  .topbar .wrap { height: auto; padding: 12px 22px; flex-wrap: wrap; }
  .topnav { gap: 14px; flex-wrap: wrap; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   BLOCCO 02 — pannello utenti: tabelle, badge, filtri, azioni
   ============================================================ */

.page-head .actions { display: flex; gap: 10px; }
.align-start { align-items: start; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.grid-3 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } }
.section-title { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.card-danger { border-color: #f1c9c5; }
.card-danger h3 { color: var(--err); }
.warn-text { color: var(--warn); font-weight: 500; }
.strong { font-weight: 600; color: var(--ink); }
.form textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.form label.inline { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.form label.inline input { width: auto; }
.form label small { font-weight: 400; }

/* opzioni radio/checkbox su una riga, con descrizione (preferenze email, ecc.) */
.option-row {
  display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line, #e9e9ee); border-radius: var(--radius-sm, 14px);
  margin-bottom: 10px; cursor: pointer; font-weight: 400 !important; transition: border-color .15s var(--ease, ease), background .15s var(--ease, ease);
}
.option-row:hover { border-color: var(--accent); }
.option-row input[type="radio"] { width: auto; margin-top: 3px; accent-color: var(--accent); flex: none; }
.option-row span { font-size: 14px; line-height: 1.5; color: var(--ink-2, #55555f); }
.option-row span strong { color: var(--ink); }
.option-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(255,24,78,.06)); }

/* chips (filtri di stato) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 500;
}
.chip:hover { text-decoration: none; border-color: var(--ink); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip span { font-variant-numeric: tabular-nums; opacity: .7; }
.chip-muted { color: var(--muted); }

.searchbar { display: flex; gap: 8px; margin-bottom: 16px; }
.searchbar input[type="search"] {
  flex: 1; font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.searchbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* tabella */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
  text-align: left; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: #fcfcfd; }
.table td.num, .table td .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .check { width: 36px; }
.table td small { display: block; color: var(--muted); font-size: 12.5px; }
.table .empty-row { text-align: center; color: var(--muted); padding: 40px; }
.table-compact td, .table-compact th { padding: 9px 12px; }
.row-actions { white-space: nowrap; text-align: right; }
.inline-form { display: inline-flex; gap: 4px; }
.btn-xs { padding: 5px 10px; font-size: 12.5px; }
.btn.danger { color: var(--err); }
.btn.danger:hover { border-color: var(--err); }

/* badge di stato */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-2); vertical-align: middle;
}
.badge-active      { background: var(--ok-soft);   color: var(--ok); }
.badge-provisional { background: var(--accent-soft); color: var(--accent-dark); }
.badge-suspended   { background: var(--warn-soft); color: var(--warn); }
.badge-blocked     { background: var(--err-soft);  color: var(--err); }
.badge-expired     { background: #eeeef2; color: #55555d; }
.badge-archived    { background: #eeeef2; color: #8a8a93; }
.badge-dark        { background: var(--ink); color: #fff; }

/* paginazione */
.pager { display: flex; gap: 6px; margin: 16px 0; flex-wrap: wrap; }
.pager a { padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.pager a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* azioni multiple */
.bulk {
  position: sticky; bottom: 16px; margin-top: 18px; background: var(--ink); color: #fff;
  border-radius: var(--radius); padding: 16px 20px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5);
}
.bulk-head { margin-bottom: 10px; }
.bulk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bulk-group { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.06); }
.bulk-group label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #cfcfd6; }
.bulk-group label.inline { flex-direction: row; align-items: center; gap: 8px; }
.bulk-group input[type="text"], .bulk-group input[type="date"], .bulk-group select {
  font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); color: #fff;
}
.bulk-group select option { color: var(--ink); }
.bulk .btn-ghost { border-color: rgba(255,255,255,.25); color: #fff; }
.bulk .btn-ghost:hover { background: rgba(255,255,255,.1); }
.bulk .btn.danger { color: #ff9b9b; }
.bulk-danger { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* schede / tab */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab {
  font: inherit; font-weight: 600; font-size: 15px; padding: 10px 16px; background: none; border: 0;
  border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; margin-bottom: -1px;
}
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }

/* credenziali */
.cred { padding: 12px 0; border-top: 1px solid var(--line); }
.cred:first-of-type { border-top: 0; }
.cred-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pw { font-size: 17px; letter-spacing: .08em; background: var(--surface-2); padding: 6px 12px; border-radius: 8px; user-select: all; }

/* toast copia */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; z-index: 100; opacity: 0; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* ============================================================
   BLOCCO 03 — contenuti: liste, riordino, editor, media
   ============================================================ */
.cols-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1000px) { .cols-3-2 { grid-template-columns: 1fr; } }
.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-inline input[type="text"], .form-inline select { width: auto; flex: 1; min-width: 160px; padding: 8px 11px; font-size: 14.5px; }
.form-inline label { margin: 0; }
ul.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
ul.plain li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.thumb { display: block; max-width: 220px; max-height: 130px; border-radius: 8px; margin-top: 8px; border: 1px solid var(--line); object-fit: cover; }
.media-field { display: flex; gap: 8px; }
.media-field input { flex: 1; }

/* card elenco (percorsi, corsi) */
.item-card { display: flex; gap: 18px; align-items: center; padding: 16px 20px; }
.item-cover { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
.item-main { flex: 1; min-width: 0; }
.item-main h3 { margin: 2px 0 4px; }
.item-main .eyebrow { margin-bottom: 2px; }
.item-main p { margin: 0; }
.item-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* liste riordinabili */
.sortable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 12px; transition: background .3s; }
.sortable.saved { background: var(--ok-soft); border-radius: 8px; }
.sort-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); cursor: grab;
}
.sort-item.dragging { opacity: .4; }
.sort-item .handle { color: #c2c2c8; font-size: 14px; letter-spacing: -2px; cursor: grab; user-select: none; }
.sort-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sort-main small { font-size: 12.5px; }
.sort-actions { display: flex; gap: 4px; }
.type { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: var(--surface-2); color: var(--muted); flex: none; }
.type-video { background: var(--accent-soft); color: var(--accent-dark); }
.type-pdf { background: #eef3ff; color: #2a4fa3; }

/* moduli nel corso */
.module { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; background: var(--surface-2); }
.module-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.module-rename { flex: 1; }
.module-title { font-weight: 600 !important; }
.module .lessons { margin: 0 0 10px; }
.add-lesson, .add-module { margin-top: 6px; }

/* editor */
.editor { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; overflow: hidden; }
.editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.editor-bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.editor-bar button {
  font: inherit; font-weight: 600; font-size: 13px; min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent;
  border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.editor-bar button:hover { background: #fff; border-color: var(--line); }
.editor-area { min-height: 180px; padding: 14px 16px; outline: none; font-weight: 400; line-height: 1.6; }
.editor-area h3 { font-size: 17px; margin: 14px 0 6px; }
.editor-area blockquote { border-left: 3px solid var(--accent); margin: 10px 0; padding: 4px 14px; color: var(--ink-2); }
.editor-area img { max-width: 100%; border-radius: 8px; }
.editor-area a { text-decoration: underline; }

/* libreria media */
.media-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.dropzone {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 26px; border: 2px dashed var(--line-strong, #cfcfd6);
  border-radius: var(--radius); background: var(--surface-2); cursor: pointer; color: var(--ink-2); font-size: 14.5px; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.busy { opacity: .6; pointer-events: none; }
.dropzone input { display: none; }
.media-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.media-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.media-thumb { aspect-ratio: 4/3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-icon { font-weight: 700; letter-spacing: .1em; color: #2a4fa3; background: #eef3ff; padding: 8px 12px; border-radius: 8px; }
.media-meta { padding: 8px 10px 4px; display: flex; flex-direction: column; min-width: 0; }
.media-meta .name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-actions { display: flex; gap: 4px; padding: 6px 10px 10px; flex-wrap: wrap; }

/* finestra modale con la libreria */
.modal-overlay { position: fixed; inset: 0; background: rgba(11,11,12,.55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { width: min(1100px, 100%); height: min(760px, 92vh); background: var(--surface); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal iframe { flex: 1; border: 0; width: 100%; }
.layout-picker { background: var(--ground); }
.picker-wrap { padding: 18px; }

/* ============================================================
   BLOCCO 04 — area studente: corsi, player, avanzamento
   ============================================================ */
.notice { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; background: var(--accent-soft); margin-bottom: 22px; }
.notice h3 { margin-bottom: 4px; font-size: 16px; }
.notice p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.notice-warn { background: var(--warn-soft); border-left-color: var(--warn); }

/* barra di avanzamento */
.bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.bar-lg { height: 10px; margin-bottom: 6px; }
.progress-line { margin-bottom: 26px; }
.mini-bar { width: 70px; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; flex: none; }
.mini-bar span { display: block; height: 100%; background: var(--accent); }

/* anello percentuale */
.ring {
  --pct: 0;
  width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-2) 0);
  display: grid; place-items: center; position: relative;
}
.ring::before { content: ""; position: absolute; inset: 8px; background: var(--ground); border-radius: 50%; }
.ring span { position: relative; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }

/* percorsi in dashboard */
.path-block { margin-bottom: 44px; }
.path-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.path-head h2 { margin: 0 0 4px; }
.path-head p { margin: 0; max-width: 60ch; }
.path-progress { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

.course-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.course-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
}
.course-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,11,12,.05), 0 18px 40px -22px rgba(11,11,12,.3); }
.course-card.is-locked { opacity: .72; }
.course-card.is-locked:hover { transform: none; }
.course-card.is-done { border-color: color-mix(in srgb, var(--ok) 34%, var(--line)); }
.course-cover { height: 132px; background-size: cover; background-position: center; background-color: var(--surface-2); }
.course-cover-empty { background: linear-gradient(135deg, var(--accent-soft), var(--surface-2)); }
.course-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-body h3 { margin: 0; font-size: 17px; }
.course-body .btn { align-self: flex-start; margin-top: 8px; }
.lock-note { font-size: 13.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.45; }

/* elenco lezioni nel corso */
.outline-module { margin-bottom: 26px; }
.outline-module h3 { margin-bottom: 4px; }
.lesson-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; counter-reset: none; }
.lesson-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.lesson-row .state { width: 20px; text-align: center; color: var(--muted); flex: none; }
.lesson-row.is-done .state { color: var(--ok); font-weight: 700; }
.lesson-row.is-locked { background: var(--surface-2); color: var(--muted); }
.lesson-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lesson-main small { font-size: 12.5px; }
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }

/* pagina lezione */
.lesson-layout { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
@media (max-width: 980px) { .lesson-layout { grid-template-columns: 1fr; } }
.lesson-title { font-size: clamp(24px, 3.4vw, 34px); margin-bottom: 18px; }
.player-wrap { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow); }
.player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch-bar { margin: 14px 0 24px; }
.watch-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.prose { line-height: 1.7; }
.prose h3 { margin-top: 20px; }
.prose img { border-radius: 8px; }
.prose blockquote { border-left: 3px solid var(--accent); margin: 14px 0; padding: 4px 16px; color: var(--ink-2); }
.attach { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.attach p { margin: 0; }
.mark-read { text-align: center; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.btn.is-disabled { opacity: .5; cursor: default; }

.lesson-side { position: sticky; top: 84px; }
.side-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 18px 12px; }
.side-card h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 16px 0 6px; font-weight: 600; }
.side-card h4:first-of-type { margin-top: 10px; }
.side-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-list li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 6px 8px; border-radius: 7px; }
.side-list li .dot { width: 14px; flex: none; color: var(--muted); font-size: 12px; }
.side-list li.done .dot { color: var(--ok); }
.side-list li.current { background: var(--accent-soft); font-weight: 600; }
.side-list li.locked { color: var(--muted); }
.side-list a { color: inherit; }

/* controllo di presenza */
.presence { position: fixed; inset: 0; background: rgba(11,11,12,.78); z-index: 300; display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.presence-box { background: var(--surface); border-radius: var(--radius); padding: 30px 34px 34px; max-width: 430px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.presence-box h3 { margin-bottom: 8px; font-size: 22px; }
.presence-box p { font-size: 14.5px; }
.countdown {
  font-size: 46px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--accent); margin: 6px 0 4px;
}
.countdown small { font-size: 15px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.countdown-bar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 0 0 20px; }
.countdown-bar span { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px; transition: width .5s linear; }
.countdown-bar.urgent span { background: var(--err); }
.presence-expired .lock-icon { font-size: 34px; display: block; margin-bottom: 6px; }
.presence-expired h3 { color: var(--err); }

/* ============================================================
   BLOCCO 05 — quiz
   ============================================================ */

/* --- pannello: costruzione delle domande --- */
.question-card { position: relative; }
.q-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.q-num {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}
.q-text { flex: 1; margin: 0 !important; }
.q-text input { font-weight: 500 !important; }
.q-hint { display: flex; align-items: flex-end; padding-bottom: 14px; }
.answers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.answer-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; margin: 0 !important; }
.answer-row input[type="checkbox"] { width: auto; flex: none; accent-color: var(--accent); transform: scale(1.15); }
.answer-row input[type="text"] { flex: 1; }
.answer-new .plus { width: 17px; text-align: center; color: var(--muted); font-weight: 700; flex: none; }
.q-actions { display: flex; gap: 8px; }
.q-delete { position: absolute; top: 18px; right: 18px; }

/* --- studente: introduzione --- */
.quiz-page { max-width: 780px; }
.quiz-page h1 { margin-bottom: 10px; }
.quiz-intro .quiz-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.quiz-facts > div { display: flex; flex-direction: column; }
.quiz-facts .k { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.quiz-facts strong { font-size: 21px; font-weight: 600; }

/* --- studente: svolgimento --- */
.quiz-timer {
  position: sticky; top: 76px; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius); margin-bottom: 20px;
}
.quiz-timer .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.quiz-timer strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.quiz-timer.urgent { background: var(--err); }

.quiz-form { display: flex; flex-direction: column; gap: 16px; }
fieldset.question { border: 1px solid var(--line); margin: 0; }
fieldset.question.answered { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.q-legend { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; font-size: 16.5px; padding: 0; line-height: 1.4; }
.options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.option {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s, background .12s;
}
.option:hover { border-color: var(--line-strong, #cfc6bb); background: var(--surface-2); }
.option input { accent-color: var(--accent); margin-top: 2px; flex: none; transform: scale(1.15); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.quiz-submit { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.quiz-submit p { margin: 0; }

/* --- studente: esito --- */
.result-card { border-width: 2px; }
.result-card.is-pass { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.result-card.is-fail { border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.result-score { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.result-score h2 { margin: 0 0 2px; }
.result-score .ring { width: 92px; height: 92px; }
.result-score .ring span { font-size: 19px; }
.result-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.result-actions form { margin: 0; }

.answer-review { padding: 16px 20px; margin-bottom: 10px; }
.answer-review .review-head { display: flex; gap: 12px; align-items: flex-start; }
.answer-review .mark { width: 22px; flex: none; font-weight: 700; text-align: center; }
.answer-review.is-ok { border-left: 3px solid var(--ok); }
.answer-review.is-ok .mark { color: var(--ok); }
.answer-review.is-ko { border-left: 3px solid var(--err); }
.answer-review.is-ko .mark { color: var(--err); }
.answer-review p { margin: 8px 0 0 34px; }
.explain { font-size: 14px; color: var(--ink-2); background: var(--surface-2); padding: 10px 14px; border-radius: var(--radius-sm); }

/* --- quiz nell'elenco del corso --- */
.lesson-row.is-quiz { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); }
.lesson-row.is-quiz .state { color: var(--accent); }

/* --- quiz nel pannello: riga del quiz e riquadro verifica finale --- */
.module-quiz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 0; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.module-quiz .strong { font-weight: 600; }
.type-quiz { background: var(--accent); color: #fff; }

.final-quiz-box {
  margin-top: 22px; padding: 16px 18px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.final-quiz-box h4 { margin: 0 0 4px; }
.final-quiz-box .form-inline { margin-top: 10px; }

/* ============================================================
   BLOCCO 06 — attestati
   ============================================================ */

/* --- richiamo in fondo alla pagina del corso --- */
.cert-callout {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 18px 0; padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--radius); background: var(--accent-soft);
}
.cert-callout > div { flex: 1 1 220px; }
.cert-callout p { margin: 2px 0 0; }
.cert-callout-mark { font-size: 26px; line-height: 1; }

/* --- la pagina dell'attestato --- */
.cert-hero { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr); gap: 24px; align-items: start; }
.cert-hero.is-void .cert-sheet { opacity: .55; filter: grayscale(.5); }
.cert-side { display: flex; flex-direction: column; gap: 16px; }
.cert-side .btn-lg { width: 100%; }

.cert-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 18px 40px -28px rgba(16, 16, 20, .45);
}
.cert-bar { height: 8px; background: var(--accent); }
.cert-body { padding: 34px 34px 26px; text-align: center; }
.cert-org { margin: 0 0 20px; font-size: 12px; letter-spacing: .22em; color: var(--ink); font-weight: 600; }
.cert-heading { margin: 0; font-size: clamp(20px, 3.4vw, 30px); letter-spacing: .12em; font-weight: 600; line-height: 1.15; }
.cert-rule { display: block; width: 46px; height: 3px; background: var(--accent); margin: 14px auto 0; }
.cert-small { margin: 20px 0 0; color: var(--muted); font-size: 14px; }
.cert-name { margin: 8px 0 0; font-size: clamp(24px, 4.6vw, 40px); font-weight: 600; line-height: 1.1; }
.cert-title { margin: 8px 0 0; font-size: clamp(16px, 2.4vw, 22px); font-weight: 500; }
.cert-meta { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.cert-foot {
  display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between;
  padding: 18px 34px 24px; border-top: 1px solid var(--line);
}
.cert-foot > div { display: flex; flex-direction: column; gap: 3px; }
.cert-foot .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cert-foot strong { font-size: 15px; }
.cert-code { color: var(--accent); letter-spacing: .1em; }

/* --- pagina pubblica di verifica --- */
.verify-page { max-width: 620px; margin: 0 auto; }
.verify-form { margin-top: 18px; }
.verify-row { display: flex; gap: 10px; flex-wrap: wrap; }
.verify-row input {
  flex: 1 1 220px; padding: 12px 14px; font-size: 18px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: inherit;
}
.verify-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.verify-result { display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; }
.verify-result h2 { margin: 0 0 4px; font-size: 20px; }
.verify-result p { margin: 0; }
.verify-result .mark {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; font-weight: 700; color: #fff;
}
.verify-result.is-ok   .mark { background: var(--ok); }
.verify-result.is-ok        { border-left: 3px solid var(--ok); }
.verify-result.is-ko   .mark { background: var(--err); }
.verify-result.is-ko        { border-left: 3px solid var(--err); }
.verify-result.is-void .mark { background: var(--warn, #b8860b); }
.verify-result.is-void      { border-left: 3px solid var(--warn, #b8860b); }
.verify-detail { margin-top: 14px; }
.verify-detail dl { margin: 0; display: grid; gap: 12px; }
.verify-detail dl > div { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.verify-detail dt { flex: 0 0 140px; color: var(--muted); font-size: 13px; }
.verify-detail dd { margin: 0; }

/* --- pannello: registro e impostazioni --- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-row .stat {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  display: flex; flex-direction: column; gap: 4px;
}
.stat-row .k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat-row strong { font-size: 24px; font-weight: 600; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.filters input, .filters select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px;
}
.filters input[type="search"] { flex: 1 1 220px; }
.inline-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }

.issue-box summary { cursor: pointer; }
.issue-box .form-grid { margin-top: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 18px; }

.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .06em; }
tr.is-void td { opacity: .6; }
.setting-img { max-height: 90px; max-width: 100%; background: var(--surface-2); padding: 8px; border-radius: var(--radius-sm); }

@media (max-width: 860px) {
  .cert-hero { grid-template-columns: 1fr; }
}
.hint-under { margin: -8px 0 16px 26px; }
.form-grid .span-all { grid-column: 1 / -1; }

/* ============================================================
   BLOCCO 07 — webinar dal vivo
   ============================================================ */

.zoom-ok {
  margin-bottom: 18px; padding: 10px 16px; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--line));
  background: var(--ok-soft); border-radius: var(--radius-sm); color: var(--ink-2);
}
.warn-text { color: var(--warn, #b8860b); }
.badge-live { background: var(--accent); color: #fff; }
.badge-warn { background: var(--warn-soft, #fdf3d7); color: var(--warn, #b8860b); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.mt { margin-top: 16px; }

/* --- elenco per lo studente --- */
.live-list { display: flex; flex-direction: column; gap: 12px; }
.live-card {
  display: flex; align-items: center; gap: 18px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.live-card.is-live { border-color: var(--accent); background: var(--accent-soft); }
.live-card.is-void { opacity: .6; }
.live-card h3 { margin: 0 0 2px; font-size: 17px; }
.live-card p { margin: 0; }
.live-main { flex: 1 1 auto; min-width: 0; }
.live-cta { flex: none; }
.live-date {
  flex: none; width: 54px; text-align: center; line-height: 1.1;
  border-right: 1px solid var(--line); padding-right: 16px;
}
.live-date .d { display: block; font-size: 26px; font-weight: 600; }
.live-date .m { display: block; font-size: 11px; letter-spacing: .1em; color: var(--muted); }

/* --- la pagina del webinar --- */
.live-counter { margin: -6px 0 14px; }
.live-stage { position: relative; margin-bottom: 20px; }
.zoom-root {
  width: 100%; min-height: 540px; border-radius: var(--radius); overflow: hidden;
  background: #0d0d10; border: 1px solid var(--line);
}
.live-loading, .live-fallback {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
}
.live-fallback { position: static; min-height: 300px; }
.live-loading p, .live-fallback p { margin: 0; }
.live-fallback h3 { margin: 0 0 6px; }
.spinner {
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--accent);
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.live-stage-simple { text-align: center; padding: 40px 24px; }
.live-stage-simple h2 { margin: 0 0 8px; }

.live-closed { text-align: center; padding: 48px 24px; }
.live-closed h2 { margin: 10px 0 6px; }
.live-clock { font-size: 40px; line-height: 1; }
.live-closed .lede { margin-top: 16px; }

@media (max-width: 760px) {
  .zoom-root { min-height: 320px; }
  .live-card { flex-wrap: wrap; }
  .live-date { border-right: none; padding-right: 0; }
}
/* il registro: le colonne dei minuti non devono spezzarsi su più righe */
.table-compact .num { white-space: nowrap; }
.table-compact td:first-child { min-width: 160px; }
.table-compact .warn-text { display: inline-block; white-space: nowrap; }

/* ============================================================
   BLOCCO 08 — Local Coordinators: la pagina della mappa
   (l'unica pagina con un design tutto suo)
   ============================================================ */

.lc { --lc-land: #ededf1; --lc-land-line: #ffffff; --lc-sea: transparent; }
.layout-public .content.wrap:has(.lc) { max-width: 1180px; }

/* --- testata --- */
.lc-hero { max-width: 760px; margin: 28px 0 10px; }
.lc-hero h1 {
  font-size: clamp(34px, 5.2vw, 58px); line-height: 1.02; letter-spacing: -.02em;
  margin: 8px 0 18px; font-weight: 600;
}
.lc-hero .lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* --- la mappa --- */
.lc-map-wrap { position: relative; margin: 22px 0 8px; }
.lc-map {
  width: 100%; height: auto; display: block; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}
.lc-land path { fill: var(--lc-land); stroke: var(--lc-land-line); stroke-width: .6; transition: fill .25s; }
.lc-land path:hover { fill: #e2e2e8; }

.lc-pt { cursor: pointer; outline: none; }
.lc-pt .lc-dot  { fill: var(--accent); transition: r .2s, opacity .2s; }
.lc-pt .lc-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .55; transition: opacity .2s, r .2s; }
.lc-pt .lc-halo { fill: var(--accent); opacity: 0; transform-origin: center; }
.lc-map.is-in .lc-pt .lc-halo { animation: lc-pulse 2.8s ease-out infinite; }
.lc-pt:nth-child(3n) .lc-halo { animation-delay: .9s; }
.lc-pt:nth-child(3n+1) .lc-halo { animation-delay: 1.8s; }
@keyframes lc-pulse {
  0%   { opacity: .35; r: 4; }
  70%  { opacity: 0;   r: 18; }
  100% { opacity: 0;   r: 18; }
}
.lc-pt:hover .lc-dot, .lc-pt:focus .lc-dot, .lc-pt.is-hot .lc-dot { r: 6; }
.lc-pt:hover .lc-ring, .lc-pt:focus .lc-ring, .lc-pt.is-hot .lc-ring { r: 11; opacity: .9; }
.lc-pt.is-dim { opacity: .18; pointer-events: none; }
.lc-pt.is-dim .lc-halo { animation: none; }

.lc-tip {
  position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.3; white-space: nowrap; z-index: 5;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.45);
}
.lc-tip::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
  background: var(--ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.lc-tip strong { display: block; font-size: 14px; }
.lc-tip span   { display: block; color: #c9c9d2; }
.lc-tip small  { display: block; margin-top: 4px; color: #ffb3c4; font-size: 12px; }

.lc-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 2; }

/* --- ricerca sopra la mappa --- */
.lc-search { position: relative; max-width: 440px; margin: 0 0 -12px auto; z-index: 6; }
.lc-search-ico { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.lc-search input {
  width: 100%; padding: 13px 16px 13px 44px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  box-shadow: 0 10px 30px -18px rgba(16,16,20,.35);
}
.lc-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.lc-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(16,16,20,.4);
}
.lc-results button {
  display: block; width: 100%; text-align: left; padding: 10px 16px; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.lc-results button strong { color: var(--ink); margin-right: 8px; }
.lc-results button:hover { background: var(--accent-soft); }

/* --- i posti --- */
.lc-places { margin-top: 26px; }
.lc-places-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.lc-places-head h2 { margin: 0; font-size: 22px; }
.lc-places-head p { margin: 0; }
.lc-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 28px; }
.lc-country h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, transform .15s;
}
.lc-chip:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.lc-chip-n { font-size: 11px; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; }
.lc-nomatch { margin-top: 12px; }

/* --- come funziona --- */
.lc-how { margin: 54px 0 30px; }
.lc-how h2 { font-size: 22px; margin: 0 0 18px; }
.lc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.lc-step { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); position: relative; }
.lc-step .n {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 12px;
}
.lc-step h3 { margin: 0 0 6px; font-size: 16px; }
.lc-step p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }

/* --- il modulo (finestra) --- */
.lc-lock { overflow: hidden; }
.lc-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.lc-modal-back { position: absolute; inset: 0; background: rgba(11,11,12,.55); backdrop-filter: blur(3px); }
.lc-modal-card {
  position: relative; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: var(--surface); border-radius: 20px; padding: 30px 30px 24px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
  animation: lc-in .22s ease-out;
}
@keyframes lc-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.lc-modal-card h2 { margin: 4px 0 14px; font-size: 24px; }
.lc-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-2);
}
.lc-close:hover { background: var(--surface-2); }
.lc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lc-consent { align-items: flex-start !important; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.lc-consent input { margin-top: 3px; }
.lc-modal-card .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.lc-modal-card input[readonly] { background: var(--surface-2); color: var(--muted); }

/* --- grazie --- */
.lc-done { display: grid; place-items: center; padding: 30px 0 50px; }
.lc-done-card { max-width: 620px; text-align: center; padding: 40px 34px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.lc-done-mark {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 12px;
}
.lc-done-card h1 { margin: 4px 0 12px; font-size: 32px; }
.lc-code { color: var(--accent); letter-spacing: .08em; }
.lc-steps-mini { text-align: left; margin: 20px auto; padding-left: 20px; max-width: 460px; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 760px) {
  .lc-hero h1 br { display: none; }
  .lc-search { max-width: none; margin-bottom: 12px; }
  .lc-modal { padding: 0; align-items: end; }
  .lc-modal-card { border-radius: 20px 20px 0 0; max-height: 92vh; padding: 24px 20px 20px; }
}
@media (max-width: 760px) {
  .lc-pt .lc-dot { r: 6; }
  .lc-pt .lc-ring { r: 10; }
}

/* --- notifiche e richieste (pannello e area studente) --- */
.bell { position: relative; display: inline-flex; align-items: center; color: var(--ink-2); padding: 4px; }
.bell.has-new { color: var(--ink); }
.bell-n {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  display: inline-grid; place-items: center;
}
.bell-n.inline { position: static; margin-left: 6px; }
.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.notif.is-unread { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.notif span { color: var(--ink-2); font-size: 14px; }

.req-timeline { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 0; flex-wrap: wrap; }
.req-timeline li { display: flex; align-items: center; gap: 8px; padding: 8px 18px 8px 0; color: var(--muted); font-size: 13px; position: relative; }
.req-timeline li span { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); }
.req-timeline li.is-on { color: var(--ink); }
.req-timeline li.is-on span { background: var(--accent); color: #fff; border-color: var(--accent); }
.req-timeline li.is-ko span { background: var(--err); border-color: var(--err); }
.req-timeline li.is-ko { color: var(--err); }
.req-timeline.compact { margin: 12px 0 8px; }
.req-timeline.compact li { font-size: 12px; padding-right: 14px; }
.req-message { white-space: pre-line; line-height: 1.6; font-size: 15.5px; }
.req-facts { display: grid; gap: 8px; margin: 16px 0 0; }
.req-facts > div { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.req-facts dt { flex: 0 0 90px; color: var(--muted); font-size: 13px; }
.req-facts dd { margin: 0; }
.req-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.req-card { margin-bottom: 14px; }
.req-card.is-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.req-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.req-head h3 { margin: 0; }
.req-head p { margin: 0; }
.req-who { margin: 6px 0 0; color: var(--ink-2); }
.req-decide { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
tr.is-new td { background: var(--accent-soft); }
tr.is-current td { background: var(--surface-2); }

/* --- mappa nel pannello (clicca per posizionare) --- */
.cmap-wrap { margin: 6px 0 14px; }
.cmap { width: 100%; height: auto; display: block; cursor: crosshair; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.cmap .lc-land path { fill: #ededf1; stroke: #fff; stroke-width: .6; }
.cmap-others circle { fill: #b9b9c4; }
.cmap-pin-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.cmap-pin-dot { fill: var(--accent); }

.privacy { max-width: 760px; margin: 20px auto 40px; }
.privacy h2 { font-size: 18px; margin-top: 26px; }
.cmap-coords { margin-top: 10px; }

/* ---------- zoom sulle mappe (Blocco 08b) ---------- */
.lc-map-wrap, .cmap-wrap { position: relative; }
.cmap-wrap .cmap { touch-action: none; }
.lc-map { touch-action: pan-y; }
.lc-map.is-zoomed { touch-action: none; cursor: grab; }
.lc-map.is-dragging, .cmap.is-dragging { cursor: grabbing !important; }
.mapzoom-ctl { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.lc-map-wrap .mapzoom-ctl { top: 70px; }
.mapzoom-ctl button {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 600 20px/1 'Jost', sans-serif; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: background .15s, color .15s, transform .1s;
}
.mapzoom-ctl button:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.mapzoom-ctl button:active { transform: scale(.94); }
.lc-zoom-hint { position: absolute; left: 0; bottom: -4px; margin: 0; pointer-events: none; }
@media (max-width: 720px) { .lc-zoom-hint { display: none; } .lc-map-wrap .mapzoom-ctl { top: 62px; right: 8px; } }

/* ---------- scheda coordinatore: il suo accesso ---------- */
.lc-account { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px 10px; margin: 8px 0 6px; }
.lc-account legend { font-weight: 600; padding: 0 6px; }
.lc-account .inline { margin: 6px 0; }
.lc-account-now { background: #f4f5f8; border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; line-height: 1.7; }
.lc-account-fields { margin: 4px 0 8px 24px; }
.lc-account [data-mode="existing"] { margin: 4px 0 8px 24px; }
.lc-cred { border: 2px solid var(--accent); }
.lc-cred .code { font-size: 15px; user-select: all; }

/* ---------- riquadri in dashboard ---------- */
.dash-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 0 0 18px;
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.dash-tile:hover { border-color: var(--accent); box-shadow: 0 10px 30px rgba(255,24,78,.10); transform: translateY(-1px); }
.dash-tile h3 { margin: 2px 0 4px; font-size: 19px; }
.dash-tile p { margin: 0; }
.dash-tile .btn { flex: none; }
.dash-tile-coord { background: linear-gradient(120deg, #fff 60%, rgba(255,24,78,.06)); border-color: rgba(255,24,78,.35); }
@media (max-width: 640px) { .dash-tile { flex-direction: column; align-items: flex-start; } }

/* la mappa pubblica sta dentro al suo blocco: ingrandita non esce */
.lc-map-wrap { border-radius: 22px; }
.lc-map-wrap .mapzoom-ctl { top: 78px; right: 18px; }
.lc-zoom-hint { left: 18px; bottom: 10px; }
.role-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 16px 12px; margin: 6px 0 12px; background: #fafafc; }
.role-box .section-title { margin-top: 12px; }

/* ============================================================
   DESIGN 2026 — il vestito nuovo: sidebar per tutti, angoli morbidi,
   card pastello, animazioni. Viene dopo tutto il resto e lo ridefinisce.
   ============================================================ */

body { background: var(--ground); }
h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.025em; font-weight: 600; }
h2 { font-size: 23px; letter-spacing: -.015em; }
h3 { font-size: 18px; letter-spacing: -.01em; }
::selection { background: var(--accent); color: #fff; }
a:hover { text-decoration: none; }
.wrap { max-width: 1160px; }

/* ---------- la struttura: menu a sinistra per tutti ---------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; gap: 0; }
.sidebar {
  position: sticky; top: 12px; align-self: flex-start;
  width: var(--sidebar-w); flex: none; height: calc(100vh - 24px); height: calc(100dvh - 24px);
  margin: 12px 0 12px 12px; padding: 22px 16px 18px;
  background: var(--ink); color: #fff; border-radius: 28px;
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 60px -30px rgba(11,11,15,.6);
}
.sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; }
.sidebar .brand { color: #fff; font-size: 17px; }
.sidebar .sidebar-close { display: none; color: #fff; }
.sidebar .sidebar-close:hover { background: rgba(255,255,255,.1); }
.brand-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--accent); box-shadow: 0 8px 18px -6px rgba(255,24,78,.7); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: #fff; opacity: .95; }
.sidebar .brand-mark { border-radius: 10px; }

.sidenav { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.sidenav a, .sidenav .soon {
  display: flex; align-items: center; gap: 12px; justify-content: flex-start;
  padding: 11px 14px; border-radius: 14px; color: #b9b9c4; font-weight: 500; font-size: 15px;
  transition: background .18s var(--ease), color .18s, transform .18s var(--ease);
}
.sidenav a .ico { flex: none; opacity: .85; }
.sidenav a span { flex: 1; }
.sidenav a:hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(2px); }
.sidenav a.active { background: var(--accent); color: #fff; box-shadow: 0 10px 22px -10px rgba(255,24,78,.75); }
.sidenav a.active .ico { opacity: 1; }
.sidenav .soon { color: #5d5d68; cursor: default; }
.sidenav .soon em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #4a4a54; margin-left: auto; }
.sidenav-sep { height: 1px; background: rgba(255,255,255,.08); margin: 10px 8px; }
.nav-badge {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
  animation: badge-pop .5s var(--ease);
}
.sidenav a.active .nav-badge { background: #fff; color: var(--accent); }
@keyframes badge-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 6px 0; border-top: 1px solid rgba(255,255,255,.08); flex-direction: row; }
.sidebar-foot .me { display: flex; flex-direction: row; align-items: center; gap: 10px; flex: 1; min-width: 0; color: #fff; padding: 6px; border-radius: 14px; margin: 0; }
.sidebar-foot .me:hover { background: rgba(255,255,255,.07); }
.sidebar-foot .me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sidebar-foot .me strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .me small { color: #8d8d99; font-size: 12px; }
.sidebar-foot .logout { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #9a9aa6; }
.sidebar-foot .logout span { display: none; }
.sidebar-foot .logout:hover { background: rgba(255,255,255,.07); color: #fff; }
.avatar {
  width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #ff6b8d); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.avatar-lg { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; }
.avatar-xl { width: 96px; height: 96px; border-radius: 30px; font-size: 32px; }
.avatar-soft { background: var(--tint-lilac); color: #5a3fa3; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.layout-admin .content, .layout-app .content { padding: 34px 40px 60px; max-width: 1320px; width: 100%; margin: 0; }
.foot-app { border: 0; padding: 10px 40px 26px; margin-top: auto; font-size: 13px; color: var(--muted); }
.mobilebar { display: none; }
.drawer-back { display: none; }
.tabbar { display: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; border: 0;
  background: transparent; color: var(--ink); cursor: pointer; position: relative; font: inherit;
}
.icon-btn:hover { background: var(--surface-2); }

/* ---------- testata di pagina ---------- */
.page-head { margin-bottom: 26px; }
.page-head .eyebrow { margin-bottom: 4px; }
.page-head > div > p.muted { margin: 6px 0 0; font-size: 15.5px; }
.page-head .actions { gap: 8px; flex-wrap: wrap; }

/* ---------- card e blocchi ---------- */
.card { border: 0; border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.card h3 { margin-bottom: 12px; }
.card-highlight { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.card-dark { background: var(--ink); color: #fff; }
.card-dark h3, .card-dark h2 { color: #fff; }
.card-dark .muted { color: #a9a9b5; }
.card-tint-lilac { background: var(--tint-lilac); }
.card-tint-mint  { background: var(--tint-mint); }
.card-tint-sand  { background: var(--tint-sand); }
.card-tint-rose  { background: var(--tint-rose); }
.card-tint-sky   { background: var(--tint-sky); }
.empty { border: 1.5px dashed #d6d6de; border-radius: var(--radius); background: transparent; }
.notice { border: 0; border-left: 0; border-radius: var(--radius-sm); padding: 16px 20px 16px 22px; position: relative; overflow: hidden; }
.notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.notice-warn::before { background: var(--warn); }
.flash { border: 0; border-radius: var(--radius-sm); padding: 13px 18px; box-shadow: var(--shadow); animation: flash-in .45s var(--ease); }
@keyframes flash-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.tablewrap { border: 0; border-radius: var(--radius-sm); }
.card .tablewrap { box-shadow: none; border: 1px solid var(--line); }
.table th { background: transparent; font-size: 11px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.table td { padding: 13px 16px; }
.table tr:hover td { background: #fafafc; }
.table tr.is-new td { background: var(--accent-soft); }
.table tr.is-current td { background: var(--tint-sand); }
.badge { padding: 4px 10px; font-size: 11.5px; }
.chip { padding: 8px 14px; border: 0; background: var(--surface); box-shadow: var(--shadow); font-weight: 500; transition: transform .15s var(--ease), background .15s; }
.chip:hover { transform: translateY(-1px); }
.chip.active { background: var(--ink); color: #fff; }
.pager a { border: 0; background: var(--surface); box-shadow: var(--shadow); border-radius: 10px; }
.tabs { border: 0; background: var(--surface); padding: 4px; border-radius: 999px; display: inline-flex; gap: 2px; box-shadow: var(--shadow); }
.tab { border: 0; border-radius: 999px; padding: 9px 18px; margin: 0; font-size: 14.5px; transition: background .18s, color .18s; }
.tab.active { background: var(--ink); color: #fff; }
.section-title { border-top-color: var(--line); }
.stack { gap: 20px; }
.log li { border-bottom-color: var(--line); }

/* ---------- statistiche a riquadri (pastello, numero grande) ---------- */
.stats, .stat-row { gap: 16px; margin-bottom: 26px; }
.stat, .stat-row .stat {
  border: 0; border-radius: var(--radius); padding: 20px 22px; min-height: 118px; justify-content: flex-end;
  box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stat .num, .stat-row strong { font-size: 34px; letter-spacing: -.03em; line-height: 1; font-weight: 600; }
.stat .lbl, .stat-row .k { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; opacity: .7; order: -1; margin-bottom: 10px; }
.stats .stat:nth-child(5n+1), .stat-row .stat:nth-child(5n+1) { background: var(--ink); color: #fff; }
.stats .stat:nth-child(5n+1) .lbl, .stat-row .stat:nth-child(5n+1) .k { color: #fff; }
.stats .stat:nth-child(5n+2), .stat-row .stat:nth-child(5n+2) { background: var(--tint-lilac); }
.stats .stat:nth-child(5n+3), .stat-row .stat:nth-child(5n+3) { background: var(--tint-mint); }
.stats .stat:nth-child(5n+4), .stat-row .stat:nth-child(5n+4) { background: var(--tint-sand); }
.stats .stat:nth-child(5n+5), .stat-row .stat:nth-child(5n+5) { background: var(--tint-sky); }
.stat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,.35); pointer-events: none;
}
.stat:nth-child(5n+1)::after { background: rgba(255,255,255,.07); }

/* ---------- pulsanti ---------- */
.btn { padding: 12px 22px; font-size: 15px; transition: transform .15s var(--ease), background .18s, box-shadow .18s, border-color .18s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { box-shadow: 0 12px 26px -12px rgba(255,24,78,.75); }
.btn-primary:hover { box-shadow: 0 16px 30px -12px rgba(255,24,78,.85); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #222229; color: #fff; }
.btn-ghost { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.btn-ghost:hover { border-color: #cfcfd8; }
.card .btn-ghost { box-shadow: none; }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-xs { padding: 6px 12px; font-size: 12.5px; }
.btn .ico { width: 18px; height: 18px; }

/* ---------- moduli ---------- */
.form input[type="text"], .form input[type="email"], .form input[type="password"], .form input[type="number"],
.form input[type="date"], .form input[type="time"], .form input[type="tel"], .form input[type="url"],
.form input[type="search"], .form select, .form textarea, .filters input, .filters select, .searchbar input[type="search"] {
  border-radius: var(--radius-sm); padding: 13px 15px; background: var(--surface-2); border-color: transparent; transition: background .18s, border-color .18s, box-shadow .18s;
}
.form input:hover, .form select:hover, .form textarea:hover { background: #f0f0f4; }
.form input:focus, .form select:focus, .form textarea:focus, .filters input:focus, .searchbar input:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.form label { font-size: 13.5px; color: var(--ink-2); }
.form label.inline { color: var(--ink); }
.form input[type="checkbox"], .form input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.filters.card { padding: 14px 16px; }
.searchbar input[type="search"] { border-radius: 999px; }

/* ---------- liste "a righe morbide" (utenti, richieste, coordinatori) ---------- */
.rowlist { display: flex; flex-direction: column; gap: 8px; }
.rowlist-item {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); border-radius: 18px;
  box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.rowlist-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.rowlist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rowlist-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rowlist-cell { flex: none; min-width: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- profilo / scheda utente: testata ---------- */
.profile-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.profile-head h1 { margin: 0 0 4px; font-size: clamp(24px, 3vw, 32px); }
.profile-head .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--muted); font-size: 14px; }
.profile-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- riquadri della dashboard ---------- */
.dash-tile { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 26px; }
.dash-tile:hover { border: 0; box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.dash-tile-dark { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.dash-tile-dark .muted { color: #a9a9b5; }
.dash-tile-dark .eyebrow { color: #ff5f83; }
.dash-tile-dark::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.12); pointer-events: none;
}
.dash-tile-dark::before {
  content: ""; position: absolute; right: -20px; bottom: -110px; width: 240px; height: 240px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.08); pointer-events: none;
}
.dash-tile-dark .btn-ghost { background: #fff; color: var(--ink); border: 0; box-shadow: none; }
.dash-tile-coord { background: var(--tint-rose); border: 0; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-bottom: 26px; }
.dash-tiles .dash-tile { margin: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.dash-tiles .dash-tile .btn { margin-top: 18px; }
.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.hello h1 { margin: 0; }
.hello .eyebrow { margin-bottom: 2px; }
.hello-date { color: var(--muted); font-size: 14.5px; }

/* ---------- corsi ---------- */
.path-block { background: var(--surface); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); margin-bottom: 26px; }
.path-block .path-head { margin-bottom: 20px; }
.course-grid { gap: 16px; }
.course-card { border: 0; border-radius: 20px; box-shadow: none; background: var(--surface-2); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.course-card:hover { background: #fff; box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.course-card:nth-child(5n+1) .course-cover-empty { background: var(--tint-lilac); }
.course-card:nth-child(5n+2) .course-cover-empty { background: var(--tint-mint); }
.course-card:nth-child(5n+3) .course-cover-empty { background: var(--tint-sand); }
.course-card:nth-child(5n+4) .course-cover-empty { background: var(--tint-rose); }
.course-card:nth-child(5n+5) .course-cover-empty { background: var(--tint-sky); }
.course-cover { height: 120px; }
.course-body { padding: 16px 18px 18px; }
.course-body .btn { margin-top: 10px; }
.ring::before { background: var(--surface); }
.bar { background: #e6e6ec; }
.bar span { transition: width 1.1s var(--ease); }
.lesson-row { border: 0; border-radius: 16px; background: var(--surface); padding: 14px 18px; box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.lesson-row:hover { box-shadow: var(--shadow-lift); transform: translateX(4px); }
.lesson-list { gap: 8px; }
.lesson-row.is-locked { background: transparent; border: 1.5px dashed var(--line); }
.side-card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.player-wrap { border-radius: var(--radius); }
.live-card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.live-card.is-live { background: var(--tint-rose); box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.zoom-root { border: 0; border-radius: var(--radius); }
.cert-sheet { border: 0; }
.item-card { border-radius: var(--radius); }
.item-cover { border-radius: 12px; }
.sort-item { border: 0; background: var(--surface-2); border-radius: 12px; }
.module { border: 0; border-radius: var(--radius-sm); }
.editor { border-radius: var(--radius-sm); }
.dropzone { border-radius: var(--radius); }
.media-item { border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.modal { border-radius: var(--radius); }
.bulk { border-radius: var(--radius); }
.quiz-timer { border-radius: var(--radius-sm); top: 12px; }
fieldset.question { border: 0; border-radius: var(--radius); }
.option { border-radius: var(--radius-sm); border: 0; background: var(--surface-2); }
.option:has(input:checked) { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.result-card { border-width: 0; }
.result-card.is-pass { box-shadow: 0 0 0 2px var(--ok), var(--shadow); }
.result-card.is-fail { box-shadow: 0 0 0 2px var(--err), var(--shadow); }
.presence-box { border-radius: var(--radius); }

/* ---------- richieste / notifiche ---------- */
.req-timeline li span { border-radius: 12px; }
.notif { border-radius: 16px; }

/* ---------- Local Coordinators dentro l'area ---------- */
.layout-app .content:has(.lc) { max-width: 1320px; }
.layout-app .lc-hero { margin-top: 0; }
.lc-hero h1 { font-size: clamp(32px, 4.4vw, 52px); }
.lc-modal-card { border-radius: 26px; }
.lc-done-card { border-radius: 26px; }
.lc-step { border-radius: var(--radius); }
.lc-chip { border-radius: 999px; }

/* ---------- pagina pubblica: barra galleggiante ---------- */
.topbar-public { position: sticky; top: 12px; background: transparent; border: 0; backdrop-filter: none; padding: 0 12px; }
.topbar-public .wrap {
  height: 64px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 999px; box-shadow: var(--shadow); padding: 0 12px 0 20px; max-width: 1160px;
}
.topnav a.active { border: 0; padding: 0; color: var(--accent); }
.topnav a.btn-dark { color: #fff; }
.layout-public .content { padding-top: 34px; }
.foot { border: 0; color: var(--muted); }

/* ---------- login ---------- */
.auth { padding: 0; min-height: calc(100vh - 140px); align-items: center; }
.auth-card { border: 0; border-radius: 30px; padding: 40px 38px; box-shadow: var(--shadow-lift); max-width: 440px; }
.auth-card h1 { font-size: 32px; }
.auth-card .btn-block { margin-top: 6px; }

/* ---------- animazioni di ingresso ---------- */
.page-enter { animation: page-in .5s var(--ease); }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .page-enter, .reveal { animation: none; opacity: 1; transform: none; transition: none; }
}

/* ---------- telefono e tablet ---------- */
@media (max-width: 1100px) {
  .layout-admin .content, .layout-app .content { padding: 28px 26px 60px; }
  :root { --sidebar-w: 240px; }
}
@media (max-width: 960px) {
  .shell { display: block; }
  .sidebar {
    position: fixed; inset: 10px auto 10px 10px; z-index: 120; width: min(320px, 86vw); height: auto; margin: 0;
    transform: translateX(calc(-100% - 20px)); transition: transform .4s var(--ease);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,.6);
  }
  .sidebar .brand-name { display: inline; }
  body.drawer-open .sidebar { transform: none; }
  .sidebar .sidebar-close { display: inline-grid; }
  .drawer-back {
    display: block; position: fixed; inset: 0; z-index: 110; background: rgba(11,11,15,.45); backdrop-filter: blur(4px);
    opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  body.drawer-open .drawer-back { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  .mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    position: sticky; top: 0; z-index: 90; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
    background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .mobilebar .brand { font-size: 16px; }
  .mobilebar .bell.has-new .bell-n { position: absolute; top: 5px; right: 5px; }
  .layout-admin .content, .layout-app .content { padding: 18px 16px 110px; }
  .foot-app { display: none; }
  .tabbar {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 100;
    padding: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); gap: 2px;
    background: var(--ink); color: #fff; border-radius: 24px; box-shadow: 0 20px 50px -15px rgba(0,0,0,.6);
  }
  .tabbar a, .tabbar .tab-menu {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 18px;
    color: #a5a5b2; font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; border: 0; background: transparent; position: relative; cursor: pointer;
    transition: background .18s, color .18s;
  }
  .tabbar a span, .tabbar .tab-menu span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a.active { background: rgba(255,255,255,.1); color: #fff; }
  .tabbar a.active .ico { color: var(--accent); }
  .tabbar .nav-badge { position: absolute; top: 2px; right: 12%; margin: 0; min-width: 18px; height: 18px; font-size: 10.5px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .page-head .actions { width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }
  h1 { font-size: 27px; }
  .card { padding: 18px 18px; border-radius: 20px; }
  .stats, .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat, .stat-row .stat { min-height: 96px; padding: 14px 16px; }
  .stat .num, .stat-row strong { font-size: 26px; }
  .path-block { padding: 18px; }
  .btn { padding: 12px 18px; }
  .table td, .table th { padding: 10px 12px; }
  .tabs { width: 100%; overflow-x: auto; }
  .topbar-public .wrap { height: 56px; }
  .lc-hero h1 { font-size: 30px; }
  .auth-card { padding: 30px 22px; border-radius: 24px; }
}
@media (max-width: 480px) {
  .stats, .stat-row { grid-template-columns: 1fr 1fr; }
  .layout-admin .content, .layout-app .content { padding: 14px 12px 110px; }
  .card { padding: 16px; }
}

/* ---------- dashboard staff ---------- */
a.stat { color: inherit; }
.rowlist-flat .rowlist-item { box-shadow: none; background: var(--surface-2); padding: 12px 14px; color: inherit; }
.rowlist-flat .rowlist-item:hover { background: #fff; box-shadow: var(--shadow); }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 16px;
  background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 500; text-align: center;
  transition: background .18s, transform .18s var(--ease), color .18s;
}
.quick:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.quick .ico { color: var(--accent); }
.quick:hover .ico { color: #fff; }
.live-mini { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); color: #fff; }
.live-mini:first-of-type { border-top: 0; }
.live-mini .live-date { border-right-color: rgba(255,255,255,.15); }
.live-mini .live-date .m { color: #a9a9b5; }
.log-compact li { grid-template-columns: 80px 1fr; }
.card-head { margin-bottom: 12px; }
.card-head h3 { margin: 0; }
.person { display: inline-flex; align-items: center; gap: 10px; }
.avatar-sm { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }

/* ---------- login a due pannelli ---------- */
.auth-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; min-height: calc(100vh - 160px); }
.auth-side {
  background: var(--ink); color: #fff; border-radius: 34px; padding: 44px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; box-shadow: var(--shadow-lift);
}
.auth-side-in { position: relative; z-index: 1; max-width: 460px; }
.auth-side h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; margin: 8px 0 16px; letter-spacing: -.02em; }
.auth-side p { color: #b3b3bf; font-size: 16px; }
.auth-side .eyebrow { color: #ff5f83; }
.auth-orbs span { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.1); }
.auth-orbs span:nth-child(1) { width: 420px; height: 420px; right: -120px; top: -160px; animation: orb 14s ease-in-out infinite alternate; }
.auth-orbs span:nth-child(2) { width: 260px; height: 260px; right: 40px; top: 40px; background: radial-gradient(circle at 30% 30%, rgba(255,24,78,.5), transparent 60%); border: 0; filter: blur(30px); animation: orb 10s ease-in-out infinite alternate-reverse; }
.auth-orbs span:nth-child(3) { width: 180px; height: 180px; left: -60px; top: 120px; animation: orb 18s ease-in-out infinite alternate; }
@keyframes orb { from { transform: translate(0,0) scale(1); } to { transform: translate(-30px, 24px) scale(1.08); } }
.auth-split .auth-card { max-width: none; align-self: center; margin: 0 auto; width: min(460px, 100%); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 48px; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.pw-eye:hover { color: var(--ink); background: var(--surface-2); }
@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; gap: 18px; }
  .auth-side { min-height: 220px; padding: 28px; border-radius: 26px; }
  .auth-side h2 { font-size: 24px; }
  .auth-side p:not(.eyebrow) { display: none; }
}
@media (max-width: 960px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
}

.course-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.course-body .course-actions .btn { margin-top: 0; }
.stats-student { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .stats-student { grid-template-columns: 1fr 1fr; } }
.auth-orbs span:nth-child(2) { top: -60px; right: -40px; }

.stat > * { position: relative; z-index: 1; }
/* niente sfora sul telefono */
.grid-2 > *, .grid-3 > *, .stack > *, .cols-3-2 > * { min-width: 0; }
.card { max-width: 100%; }
@media (max-width: 720px) {
  .item-card { flex-wrap: wrap; }
  .item-main { flex: 1 1 100%; }
  .item-actions { width: 100%; justify-content: flex-start; }
  .person { white-space: nowrap; }
  .page-head .actions .btn { flex: 1 1 100%; }
  .cmap-coords { grid-template-columns: 1fr 1fr; }
}

/* la finestra della mappa: sopra a tutto (anche alla sidebar), scorre se lo schermo è basso */
.lc-modal { z-index: 400; overflow-y: auto; align-items: start; padding: max(20px, 4vh) 20px; }
.lc-modal-back { position: fixed; }
.lc-modal-card { position: relative; max-height: none; margin: auto 0; }
@media (min-width: 961px) { .sidebar { z-index: 50; } }

/* ============================================================
   STATISTICHE
   ============================================================ */
.mb { margin-bottom: 22px; }
.stats-5 { grid-template-columns: repeat(5, 1fr); }
.stats-small .stat { min-height: 92px; padding: 16px 18px; }
.stats-small .stat .num { font-size: 26px; }
.stats-small .stat:nth-child(5n+1) { background: var(--surface); color: var(--ink); }
.stats-small .stat:nth-child(5n+1) .lbl { color: var(--ink-2); }
.stats-small .stat:nth-child(5n+1)::after { background: rgba(0,0,0,.03); }
.delta { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.6); color: var(--ink-2); }
.delta small { font-weight: 400; opacity: .7; }
.delta-up { color: var(--ok); }
.delta-down { color: var(--err); }
.delta-new { color: var(--accent-dark); }
.stat:nth-child(5n+1) .delta { background: rgba(255,255,255,.12); color: #fff; }
.stats-small .stat:nth-child(5n+1) .delta { background: var(--surface-2); }
.stats-small .stat:nth-child(5n+1) .delta-up { color: var(--ok); }
.stats-small .stat:nth-child(5n+1) .delta-down { color: var(--err); }
.period-form .tabs { margin: 0; }
.chart-card .card-head { margin-bottom: 6px; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .tick { font-size: 13px; fill: var(--muted); font-family: var(--font); }
.chart .hit rect { fill: transparent; cursor: crosshair; }
.chart .cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
.chart-tip {
  position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500;
  padding: 7px 11px; border-radius: 10px; white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5);
}
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); margin: 4px 0 10px; list-style: none; padding: 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.legend-col { flex-direction: column; gap: 8px; margin: 0; }
.legend-col strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend-col li { display: flex; align-items: center; gap: 4px; }
.legend-wrap span { background: var(--surface-2); padding: 5px 10px; border-radius: 999px; }
.donut-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.chart-wrap-donut { width: 160px; flex: none; }
.chart-donut { height: 160px; }
.chart-donut circle[data-tip] { transition: stroke-width .15s; cursor: pointer; }
.chart-donut circle[data-tip]:hover { stroke-width: 20; }
.donut-num { font-size: 30px; font-weight: 600; fill: var(--ink); font-family: var(--font); letter-spacing: -.02em; }
.mini-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 16px; }
.mini-facts > div { background: var(--surface-2); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.mini-facts .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mini-facts strong { font-size: 20px; }
.hbar { display: inline-block; width: 90px; height: 6px; border-radius: 999px; background: #e6e6ec; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.hbar span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.hbar-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hbar-cell { display: inline-flex; align-items: center; gap: 4px; }
.hbar-cell .hbar-n { display: none; }
h4.sub { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 1100px) { .stats-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .stats-5 { grid-template-columns: 1fr 1fr; }
  .period-form { width: 100%; }
  .period-form .tabs { width: 100%; }
  .period-form .tab { flex: 1; padding: 9px 8px; text-align: center; }
  .donut-row { justify-content: center; }
  .hbar { width: 60px; }
}

.only-mobile { display: none; }
.chart-narrow .tick { font-size: 15px; }
@media (max-width: 720px) { .only-desktop { display: none; } .only-mobile { display: block; } }

/* i blocchi respirano: mai due card attaccate */
.content > .card, .content > form.card, .content > details.card, .content > .grid-2, .content > .grid-3, .content > .cards-3, .content > .tablewrap, .content > .notice, .content > .filters { margin-bottom: 20px; }
.grid-2, .grid-3, .cards-3 { gap: 20px; }
.content > .stats + .stats { margin-top: -6px; }
details.card summary { cursor: pointer; font-weight: 600; }
details.card[open] summary { margin-bottom: 14px; }

/* ============================================================
   AMMISSIONI (Blocco 09) + pulizia
   ============================================================ */
.grow { flex: 1 1 auto; min-width: 0; }
.btn[disabled], .btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none !important; }
.btn-danger { background: var(--err, #c1121f); color: #fff; }
.btn-danger:hover { background: #a30f1a; color: #fff; }
.danger-text { color: var(--err, #c1121f) !important; }
.doc-list .rowlist-item { padding: 12px 16px; }
.doc-ico {
  width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: #f0f0f4; color: var(--muted); flex: none;
}
.doc-ico.ok { background: var(--ok-soft, #e3f4ea); color: var(--ok, #2f8f5b); }
.doc-row.is-done { background: #fbfffc; }
.doc-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.file-btn { cursor: pointer; }
.cand-bar { margin: 4px 0 16px; }
.cand-done h2 { margin: 6px 0 12px; }
.cand-privacy p { line-height: 1.65; color: var(--ink-2, #3a3a42); }
.cand-privacy .option-row { margin-top: 18px; }
.steps-list { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.steps-list li { margin-bottom: 8px; }
.steps-list li::marker { color: var(--accent); font-weight: 600; }
.cand-extend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cand-extend label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.cand-extend input[type="number"] { width: 78px; padding: 8px 10px; }
.clean-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.clean-list div { background: #f7f7fa; border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: var(--ink-2, #55555f); }
.clean-list strong { display: block; font-size: 20px; color: var(--ink); margin-top: 2px; }
.rules { columns: 2; column-gap: 24px; font-size: 13.5px; color: var(--ink-2, #55555f); line-height: 1.6; margin: 10px 0 0; padding-left: 18px; }
@media (max-width: 960px) {
  .cand-grid, .cand-admin { grid-template-columns: 1fr; }
  .doc-row { flex-wrap: wrap; }
  .doc-row .doc-actions { width: 100%; justify-content: flex-end; }
  .rules { columns: 1; }
}
/* ============================================================
   BLOCCO 13 — rete e chat
   Stessa grammatica del resto: angoli morbidi, molta aria,
   fucsia solo dove serve, nero per le azioni forti.
   ============================================================ */

/* ---------- foto profilo dentro il pallino ------------------ */
.avatar.has-photo { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar-group { background: var(--ink); color: #fff; letter-spacing: .04em; }

/* ---------- il bollino oro dei docenti ---------------------- */
.gold-mark {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin-left: 8px; padding: 3px 10px 3px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #6b4c00; background: linear-gradient(135deg, #fdf1c9, #f6dd8f);
  border: 1px solid rgba(146, 108, 0, .28);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.gold-mark svg { fill: #c9971a; }
.gold-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, #f6dd8f, #c9971a); vertical-align: middle;
}
h1 .gold-mark { font-size: 12px; }

/* ---------- elenco membri ----------------------------------- */
.head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.dir-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 18px; margin-bottom: 14px;
}
.dir-filters select {
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px;
  background: var(--surface); font: inherit; font-size: 14.5px; color: var(--ink);
}
.dir-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.dir-search .ico { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.dir-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 16px 11px 42px; font: inherit; font-size: 15px; background: var(--surface);
}
.dir-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dir-count { margin: 0 0 14px 4px; }

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }

.member-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.member-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
.member-card.is-teacher { background: linear-gradient(180deg, #fffdf6, var(--surface) 60%); }
.member-top { display: flex; gap: 14px; align-items: flex-start; color: inherit; }
.member-top:hover { text-decoration: none; }
.member-id { min-width: 0; }
.member-id h3 { margin: 0 0 2px; font-size: 17px; }
.member-user { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.member-head { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.member-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }

.pill {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500; background: var(--surface-2); color: var(--ink-2);
}
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-muted { background: var(--surface-2); color: var(--muted); }

/* ---------- profilo pubblico -------------------------------- */
.crumb { margin: 0 0 14px; font-size: 14px; }
.profile-hero { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.profile-hero.is-teacher { background: linear-gradient(135deg, #fffdf4, var(--surface) 55%); }
.profile-hero-main { flex: 1 1 300px; }
.profile-hero-main h1 { margin-bottom: 4px; }
.profile-hero .lead { font-size: 17px; color: var(--ink-2); margin: 6px 0 4px; }
.profile-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

.deflist { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 14px; font-size: 14.5px; }
.deflist dt { color: var(--muted); }
.deflist dd { margin: 0; }

.req { color: var(--accent); font-weight: 500; font-size: 13px; }
.block-line { margin: 22px 0 8px; text-align: center; }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; font: inherit; }

/* ---------- richieste (la mia rete) ------------------------- */
.req-people { display: grid; gap: 14px; }
.req-person {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: grid; gap: 12px;
}
.req-person-who { display: flex; gap: 14px; align-items: flex-start; color: inherit; }
.req-person-who:hover { text-decoration: none; }
.req-person-who h3 { margin: 0 0 2px; font-size: 17px; }
.req-person-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.req-quote {
  margin: 0; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border-left: 3px solid var(--accent);
  font-size: 14.5px; color: var(--ink-2);
}

/* ---------- la chat ----------------------------------------- */
.chat {
  display: grid; grid-template-columns: 320px 1fr; gap: 18px;
  height: calc(100dvh - 150px); min-height: 460px;
}
.chat-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.chat-list-head h2 { margin: 0; font-size: 19px; }
.chat-search { position: relative; display: flex; align-items: center; padding: 0 14px 12px; }
.chat-search .ico { position: absolute; left: 26px; color: var(--muted); pointer-events: none; }
.chat-search input {
  width: 100%; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 14px 9px 40px; font: inherit; font-size: 14px; background: var(--surface-2);
}
.chat-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.chat-items { flex: 1; overflow-y: auto; padding: 0 10px 12px; }

.chat-item {
  display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: var(--radius-sm);
  color: inherit; transition: background .18s var(--ease);
}
.chat-item:hover { background: var(--surface-2); text-decoration: none; }
.chat-item.active { background: var(--accent-soft); }
.chat-item-main { flex: 1; min-width: 0; display: block; }
.chat-item-main strong { display: block; font-size: 15px; font-weight: 500; }
.chat-item-main small { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.is-unread .chat-item-main strong { font-weight: 700; }
.chat-item.is-unread .chat-item-main small { color: var(--ink-2); }
.chat-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.chat-item-side em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.chat-room {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.chat-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; color: inherit; }
.chat-head-main h2 { margin: 0; font-size: 17px; }
.chat-head-main span { display: flex; flex-direction: column; min-width: 0; }
.chat-head-main small { color: var(--muted); font-size: 13px; }
.chat-head-link:hover { text-decoration: none; }
.chat-head-link:hover strong { text-decoration: underline; }

.chat-people { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.chat-person { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: inherit; }
.chat-person:hover { text-decoration: none; border-color: var(--accent); }

.chat-scroll { flex: 1; overflow-y: auto; padding: 20px 18px; scroll-behavior: smooth; }
.chat-msgs { display: flex; flex-direction: column; gap: 12px; }
.chat-more { display: block; margin: 0 auto 16px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.chat-more:hover { border-color: var(--accent); color: var(--accent-dark); }
.chat-loading { display: flex; justify-content: center; padding: 30px 0; }

.msg { display: flex; gap: 10px; align-items: flex-end; max-width: 78%; animation: msgIn .28s var(--ease); }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg-b { min-width: 0; }
.msg-from { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px 4px; }
.msg-text {
  background: var(--surface-2); border-radius: 20px 20px 20px 6px;
  padding: 11px 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere;
}
.msg.mine .msg-text { background: var(--accent); color: #fff; border-radius: 20px 20px 6px 20px; }
.msg.mine .msg-text a { color: #fff; text-decoration: underline; }
.msg-foot { display: flex; gap: 10px; align-items: center; margin: 4px 0 0 6px; }
.msg.mine .msg-foot { justify-content: flex-end; margin: 4px 6px 0 0; }
.msg-foot time { font-size: 11.5px; color: var(--muted); }
.msg-act { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .18s; }
.msg:hover .msg-act, .msg-act:focus { opacity: 1; }
.msg-act:hover { color: var(--accent-dark); text-decoration: underline; }
.msg-system { align-self: center; font-size: 12.5px; color: var(--muted); background: var(--surface-2); padding: 5px 14px; border-radius: 999px; }

.chat-form { display: flex; gap: 10px; align-items: flex-end; padding: 14px 18px 6px; border-top: 1px solid var(--line); }
.chat-form textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 22px;
  padding: 12px 18px; font: inherit; font-size: 15px; line-height: 1.45; max-height: 160px;
  background: var(--surface-2);
}
.chat-form textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.chat-send { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; }
.chat-form.is-sending { opacity: .6; pointer-events: none; }
.chat-hint { padding: 0 20px 14px; margin: 0; }
.chat-blocked { padding: 16px 20px; margin: 0; background: var(--warn-soft); color: var(--warn); font-size: 14.5px; border-top: 1px solid var(--line); }
.chat-blank { flex: 1; display: grid; place-items: center; text-align: center; padding: 40px 24px; }
.chat-blank-sm { padding: 24px; }
.empty-sm { padding: 24px 16px; }

@media (max-width: 900px) {
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 190px); }
  .chat-list.has-open { display: none; }
  .chat-room:not(.is-open) { display: none; }
  .msg { max-width: 88%; }
}

/* ---------- benvenuto e profilo ----------------------------- */
.welcome { max-width: 720px; margin: 0 auto; padding: 10px 0 40px; }
.welcome-head { text-align: center; margin-bottom: 26px; }
.welcome-head .lead { font-size: 17px; max-width: 560px; margin: 0 auto; }
.welcome-form { display: grid; gap: 18px; }
.welcome-form .card h3 { margin-bottom: 14px; }

.at-field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); overflow: hidden; }
.at-field span { padding: 0 4px 0 14px; color: var(--muted); font-size: 16px; }
.at-field input { border: 0 !important; border-radius: 0 !important; flex: 1; background: transparent; }
.at-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.photo-pick { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.photo-pick .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-pick .avatar.has-photo { padding: 0; overflow: hidden; }

/* ---------- scelta persone (gruppi) ------------------------- */
.people-pick { max-height: 380px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-xs); cursor: pointer; }
.pick-row:hover { background: var(--surface-2); }
.pick-row span { display: flex; flex-direction: column; min-width: 0; }
.pick-row small { color: var(--muted); font-size: 13px; }
.pick-row input:checked ~ span strong { color: var(--accent-dark); }
.pick-row:has(input:checked) { background: var(--accent-soft); }

/* ---------- scelta invito (creazione utente) ---------------- */
.invite-mode { display: grid; gap: 6px; margin: 6px 0 14px; padding: 12px 16px; background: var(--surface-2); border-radius: var(--radius-sm); }
.invite-mode label { font-size: 14.5px; }

/* ============================================================
   BLOCCO 13b — menu a fisarmonica, gruppi con admin e visibilità
   ============================================================ */

/* ---------- menu staff: voci che si aprono ------------------ */
.subnav { display: flex; flex-direction: column; }
.subnav-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; border-radius: 14px; background: none; cursor: pointer;
  color: #b9b9c4; font: inherit; font-weight: 500; font-size: 15px;
  transition: background .18s var(--ease), color .18s;
}
.subnav-toggle .ico { flex: none; opacity: .85; }
.subnav-toggle > span { flex: 1; }
.subnav-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.subnav-toggle.active { color: #fff; }
.subnav-toggle .chev { flex: none; transition: transform .25s var(--ease); opacity: .7; }
.subnav.is-open .subnav-toggle .chev { transform: rotate(180deg); }
.subnav-items {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease);
}
.subnav.is-open .subnav-items { grid-template-rows: 1fr; }
.subnav-items > div { overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.subnav.is-open .subnav-items > div { padding: 2px 0 6px; }
.sidenav .subnav-items a {
  padding: 8px 12px 8px 46px; font-size: 14px; border-radius: 12px; position: relative;
}
.sidenav .subnav-items a::before {
  content: ""; position: absolute; left: 24px; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .35; transform: translateY(-50%);
}
.sidenav .subnav-items a.active::before { opacity: 1; background: #fff; }
.sidenav .subnav-items a.active { box-shadow: none; }

/* ---------- liste compatte per scegliere le persone --------- */
.picker .chat-search { padding: 0 0 8px; }
.picker .chat-search .ico { left: 12px; }
.picker-note { margin: 0 0 8px 2px; }
.pick-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; background: var(--surface); }
.form .pick-row, .pick-row {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  margin: 0; padding: 5px 10px; min-height: 36px; border-radius: var(--radius-xs); cursor: pointer; font-weight: 400; font-size: 14px;
}
.pick-row:hover { background: var(--surface-2); }
.pick-row input { width: auto; margin: 0; flex: none; }
.pick-row .avatar-sm { width: 26px; height: 26px; font-size: 10px; border-radius: 8px; }
.pick-name { font-weight: 500; white-space: nowrap; }
.pick-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pick-row:has(input:checked) { background: var(--accent-soft); }
.pick-row:has(input:checked) .pick-name { color: var(--accent-dark); }
.pick-empty { padding: 10px 12px; margin: 0; }
.group-form { display: grid; gap: 18px; }
.group-form .card h3 { margin-bottom: 10px; }

/* ---------- schede dei gruppi ------------------------------- */
.group-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.group-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
.group-card-top { display: flex; gap: 14px; align-items: flex-start; color: inherit; }
.group-card-top:hover { text-decoration: none; }
.group-card-top h3 { margin: 0 0 2px; font-size: 17px; }
.group-card-desc { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.section-title { font-size: 18px; margin: 22px 0 12px; }
.pill-xs { padding: 2px 8px; font-size: 11px; vertical-align: middle; margin-left: 6px; }
.admin-box { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.admin-box summary { cursor: pointer; font-weight: 500; color: var(--accent-dark); margin-bottom: 12px; }
.rowlist-link { display: flex; align-items: center; gap: 10px; color: inherit; flex: 1; min-width: 0; }
.rowlist-link:hover { text-decoration: none; }
.rowlist-link > span { display: flex; flex-direction: column; min-width: 0; }
.inline-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.form .chat-search input, .picker .chat-search input { padding-left: 40px; }
.picker .chat-search .ico { left: 13px; top: 50%; transform: translateY(-50%); margin-top: -4px; }

/* ============================================================
   BLOCCO 13c — bollino docente più piccolo, frecce dei menu a
   tendina rifatte, riquadro per lo staff nell'elenco membri
   ============================================================ */

/* ---------- bollino oro: piccolo, attaccato al nome ---------- */
.gold-mark {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 7px; padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.5; white-space: nowrap; vertical-align: middle; position: relative; top: -1px;
  color: #7a5900; background: linear-gradient(135deg, #fdf3d2, #f4dc96);
  border: 1px solid rgba(160, 120, 0, .25);
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset;
}
.gold-mark svg { width: 11px; height: 11px; fill: #c9971a; flex: none; }
h1 .gold-mark { font-size: 10.5px; top: -3px; }
.msg-from .gold-dot, .chat-item-main .gold-dot { width: 8px; height: 8px; margin-left: 3px; }

/* il nome e il bollino stanno su una riga sola, e vanno a capo insieme */
.member-id h3, .req-person-who h3, .profile-hero-main h1 { text-wrap: balance; }

/* ---------- menu a tendina: freccia disegnata da noi --------- */
.form select, .filters select, .dir-filters select, .form-inline select, .bulk-group select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
  padding-right: 38px;
  cursor: pointer;
}
.dir-filters select { padding-top: 10px; padding-bottom: 10px; }
.form select:hover, .dir-filters select:hover, .form-inline select:hover { background-color: #f0f0f4; }
.form select:focus, .dir-filters select:focus, .form-inline select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff184e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.bulk-group select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Safari/iOS: il select nativo non deve schiacciare il testo */
select::-ms-expand { display: none; }

/* ---------- avviso per lo staff nell'elenco membri ----------- */
.staff-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--tint-sky); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 16px; font-size: 14.5px; color: var(--ink-2);
}
.staff-note strong { color: var(--ink); }

/* ============================================================
   BLOCCO 13d — foto profilo rotonde, registro che si espande
   ============================================================ */

/* ---------- le persone hanno la foto rotonda ---------------- */
.avatar { border-radius: 50%; }
.avatar.has-photo { border-radius: 50%; }
.avatar.has-photo img { border-radius: 50%; }
/* i gruppi restano con l'angolo morbido: così si distinguono a colpo d'occhio */
.avatar-group, .avatar-group.has-photo, .avatar-group.has-photo img { border-radius: 15px; }
.avatar-lg.avatar-group, .avatar-lg.avatar-group.has-photo img { border-radius: 17px; }
.avatar-xl.avatar-group, .avatar-xl.avatar-group.has-photo img { border-radius: 22px; }
.avatar-sm.avatar-group, .avatar-sm.avatar-group.has-photo img { border-radius: 10px; }
/* il quadratino del marchio in alto a sinistra non c'entra: resta com'è */
.sidebar .brand-mark, .brand-mark { border-radius: 10px; }

/* ---------- elenchi che si aprono un pezzo alla volta -------- */
.expand-foot { display: flex; justify-content: center; padding-top: 12px; }
.expand-btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 8px 18px; font: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
  transition: border-color .18s var(--ease), color .18s;
}
.expand-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.log-note { margin: 10px 0 0; }

/* ============================================================
   BLOCCO 13e — la freccia dei menu a tendina non si moltiplica più
   ============================================================ */

/* Perché succedeva: le regole :hover e :focus di app.css usano la
   scorciatoia «background: colore», che azzera anche ripetizione,
   posizione e dimensione dell'immagine. Restando solo l'immagine,
   la freccia si ripeteva per tutta la larghezza. Qui le riscriviamo
   per intero in tutti e tre gli stati. */
.form select, .filters select, .dir-filters select, .form-inline select, .bulk-group select,
.form select:hover, .filters select:hover, .dir-filters select:hover, .form-inline select:hover,
.form select:focus, .filters select:focus, .dir-filters select:focus, .form-inline select:focus,
.bulk-group select:hover, .bulk-group select:focus {
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 15px 15px !important;
  padding-right: 38px;
}
.form select:focus, .filters select:focus, .dir-filters select:focus, .form-inline select:focus {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff184e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form select:hover:not(:focus), .dir-filters select:hover:not(:focus), .form-inline select:hover:not(:focus) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237a7a85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* gli elenchi a più righe (prerequisiti) non hanno freccia */
.form select[multiple], .form select[size] {
  background-image: none !important; padding-right: 14px;
}

/* ---------- «Crea corso» porta davvero al modulo -------------- */
@keyframes targetGlow {
  0%   { box-shadow: 0 0 0 0 rgba(255,24,78,.35); }
  100% { box-shadow: 0 0 0 16px rgba(255,24,78,0); }
}
.is-target {
  animation: targetGlow 1.4s var(--ease) 1;
  border-color: var(--accent) !important;
}

/* ============================================================
   BLOCCO 14 — l'area dello studente
   Schede, riquadri dei corsi, finestra del percorso, rubriche
   ============================================================ */

/* ---------- le schede in alto -------------------------------- */
.scroll-tabs {
  display: flex; gap: 4px; overflow-x: auto; margin: 22px 0 20px;
  border-bottom: 1px solid var(--line); scrollbar-width: none;
}
.scroll-tabs::-webkit-scrollbar { display: none; }
.stab {
  flex: none; padding: 12px 18px 14px; color: var(--muted); font-weight: 500; font-size: 16px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.stab:hover { color: var(--ink); text-decoration: none; }
.stab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.section-title { font-size: 21px; margin: 26px 0 6px; }
.section-note { margin: 0 0 18px; max-width: 640px; }

/* ---------- il corso in evidenza ----------------------------- */
.hero-course {
  display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 26px;
  margin-bottom: 8px; box-shadow: var(--shadow-lift);
}
.hero-course-pic {
  aspect-ratio: 16/10; border-radius: var(--radius-sm); background: #22222b center/cover no-repeat;
  display: grid; place-items: center; font-size: 40px; font-weight: 700; color: #4a4a56;
}
.hero-course-main h2 { margin: 4px 0 8px; font-size: 28px; }
.hero-course-main .eyebrow { color: var(--accent); }
.hero-course-main .muted { color: #b9b9c4; }
.hero-course-main strong { color: #fff; }
.hero-course-bar { display: flex; align-items: center; gap: 14px; margin: 16px 0 20px; max-width: 420px; }
.hero-course-bar .bar { flex: 1; background: rgba(255,255,255,.15); }
.hero-course-bar .bar span { background: var(--accent); }
.hero-course-bar strong { font-size: 15px; }
.btn-white { background: #fff; color: var(--ink); border: 0; }
.btn-white:hover { background: #f0f0f4; text-decoration: none; }
@media (max-width: 780px) {
  .hero-course { grid-template-columns: 1fr; padding: 20px; }
  .hero-course-main h2 { font-size: 23px; }
}

/* ---------- i riquadri dei corsi ----------------------------- */
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 10px; }
.c-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.c-cover {
  position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, #1d1d26, #33333f) center/cover no-repeat;
  display: grid; place-items: center; color: #fff;
}
.c-cover-mark { font-size: 34px; font-weight: 700; opacity: .35; letter-spacing: .04em; }
.c-cover-fade { position: absolute; inset: auto 0 0; height: 72%; background: linear-gradient(to top, rgba(8,8,12,.92), transparent); }
.c-cover-txt { position: absolute; inset: auto 14px 12px; color: #fff; }
.c-cover-txt h3 { margin: 0 0 2px; font-size: 17px; line-height: 1.25; color: #fff; }
.c-cover-txt small { font-size: 12.5px; color: rgba(255,255,255,.78); }
.c-flag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.94); color: var(--ink);
}
.c-flag-new { background: var(--accent); color: #fff; }
.c-flag-done { background: var(--ok); color: #fff; }
.c-bar { position: absolute; inset: auto 0 0; height: 4px; background: rgba(255,255,255,.22); z-index: 2; }
.c-bar span { display: block; height: 100%; background: var(--accent); }
.c-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.c-why {
  margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
  padding-left: 12px; border-left: 2px solid var(--accent);
}
.c-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.c-card.is-out { opacity: .82; }
.c-card.is-out .c-cover { filter: grayscale(.5); }

/* ---------- i percorsi --------------------------------------- */
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.p-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--radius);
  padding: 22px; font: inherit; min-height: 190px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.p-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.p-mark {
  width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #ff6b8d); font-weight: 700; font-size: 16px;
}
.p-ring {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), rgba(255,255,255,.14) 0);
}
.p-ring em { font-style: normal; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.p-title { font-size: 20px; font-weight: 600; line-height: 1.2; margin-top: auto; }
.p-meta { font-size: 13px; color: #a6a6b2; }

/* ---------- la finestra del percorso ------------------------- */
.modal-back {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: rgba(8,8,12,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s var(--ease);
}
.modal-back.is-open { opacity: 1; }
.modal-box {
  position: relative; width: min(680px, 100%); max-height: min(86vh, 900px);
  background: var(--ink); color: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  transform: translateY(14px) scale(.98); transition: transform .26s var(--ease);
}
.modal-back.is-open .modal-box { transform: none; }
.modal-x {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.12);
}
.modal-x:hover { background: rgba(255,255,255,.22); }
.modal-scroll { max-height: min(86vh, 900px); overflow-y: auto; padding: 34px 30px 28px; }

.pm-head { text-align: center; margin-bottom: 24px; }
.pm-mark {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #ff6b8d); font-size: 22px; font-weight: 700;
}
.pm-head h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.1; }
.pm-facts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #b9b9c4; margin-bottom: 12px; }
.pm-facts .pill { background: rgba(255,255,255,.12); color: #fff; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 700; }
.pm-desc { color: #b9b9c4; font-size: 15px; margin: 0 auto 14px; max-width: 460px; }
.pm-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; max-width: 320px; margin: 0 auto; }
.pm-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pm-cta { margin-top: 18px; }

.pm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: pm; }
.pm-item { display: flex; gap: 12px; align-items: stretch; position: relative; }
.pm-item::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: -10px; width: 2px; background: rgba(255,255,255,.1);
}
.pm-item:last-child::before { display: none; }
.pm-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.1); font-size: 13px; font-weight: 700; z-index: 1; margin-top: 12px;
}
.pm-item.is-done .pm-n { background: var(--ok); }
.pm-item.is-going .pm-n { background: var(--accent); }
.pm-card {
  flex: 1; display: flex; gap: 12px; align-items: center; min-width: 0; color: #fff;
  background: rgba(255,255,255,.06); border-radius: 16px; padding: 10px 14px 10px 10px;
  transition: background .18s var(--ease);
}
a.pm-card:hover { background: rgba(255,255,255,.13); text-decoration: none; }
.pm-pic { flex: none; width: 56px; height: 42px; border-radius: 10px; background: #2a2a34 center/cover no-repeat; }
.pm-pic-empty { display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #5c5c68; }
.pm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-txt strong { font-size: 14.5px; line-height: 1.3; }
.pm-txt small { font-size: 12.5px; color: #a6a6b2; }
.pm-ok { font-style: normal; font-size: 12px; color: #7fd3a3; }
.pm-lock { font-style: normal; font-size: 12px; color: #9a9aa6; }
.pm-mini { display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.16); margin-top: 5px; max-width: 160px; }
.pm-mini span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.pm-go { flex: none; font-size: 12.5px; color: #b9b9c4; opacity: 0; transition: opacity .18s; }
a.pm-card:hover .pm-go { opacity: 1; }
.pm-item.is-lock .pm-card { opacity: .6; }
@media (max-width: 620px) {
  .modal-scroll { padding: 28px 18px 22px; }
  .pm-head h2 { font-size: 24px; }
  .pm-go { display: none; }
}

/* ---------- le rubriche -------------------------------------- */
.r-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.r-card {
  display: flex; flex-direction: column; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.r-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; text-decoration: none; }
.r-cover { position: relative; display: block; aspect-ratio: 3/4; background: var(--surface-2); overflow: hidden; }
.r-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.r-cover-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.r-seen {
  position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.94); color: var(--ink-2); padding: 3px 9px; border-radius: 999px;
}
.r-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 4px; }
.r-body strong { font-size: 15px; line-height: 1.3; }
.r-body small { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.r-body em { font-style: normal; font-size: 12px; margin-top: 2px; }

/* ---------- il lettore --------------------------------------- */
.lettore-barra {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.lettore-zoom { font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; }
.lettore-nota { margin-left: auto; }
.lettore {
  max-height: calc(100dvh - 300px); min-height: 420px; overflow-y: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.lettore-pagine { --zoom: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lettore-pagine .pg {
  width: calc(min(900px, 100%) * var(--zoom)); max-width: 100%;
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: #fff;
}
.lettore-pagine .pg img, .lettore-pagine .pg canvas {
  width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  pointer-events: none;
}
@media (max-width: 700px) {
  .lettore { max-height: none; padding: 12px; }
  .lettore-nota { display: none; }
}

/* ============================================================
   BLOCCO 15 — menu senza barra di scorrimento,
               webinar a schede e nel calendario
   ============================================================ */

/* ---------- menu a sinistra: si scorre, ma la barra non si vede ---- */
.sidebar { overflow: hidden; }
.sidenav {
  flex: 1 1 auto; min-height: 0; position: relative;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 6px;
}
.sidenav::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* le due sfumature che dicono «c'è altro sopra / sotto» */
.sidenav::before, .sidenav::after {
  content: ""; position: sticky; left: 0; right: 0; z-index: 3; flex: none;
  display: block; height: 52px; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.sidenav::before {
  top: 0; margin-bottom: -52px;
  background: linear-gradient(to bottom, var(--ink) 18%, rgba(11,11,15,0));
}
.sidenav::after {
  bottom: 0; margin-top: -52px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center bottom 4px / 18px 18px no-repeat,
    linear-gradient(to top, var(--ink) 30%, rgba(11,11,15,0));
  animation: sidenav-hint 1.6s var(--ease) infinite;
  animation-play-state: paused;
}
.sidenav.can-up::before { opacity: 1; }
.sidenav.can-down::after { opacity: 1; animation-play-state: running; }
@keyframes sidenav-hint {
  0%, 100% { background-position: center bottom 4px, 0 0; }
  50%      { background-position: center bottom 0px, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .sidenav::after { animation: none; } }

/* sul telefono il cassetto è a tutta altezza: stessa regola */
@media (max-width: 960px) {
  .sidebar { display: flex; flex-direction: column; overflow: hidden; }
}

/* ---------- webinar: barra con Schede / Calendario ------------------ */
.wv { margin-top: 26px; }
.wv-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.wv-switch {
  display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow);
}
.wv-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; cursor: pointer; font: inherit; font-weight: 500; font-size: 14.5px;
  padding: 10px 20px; border-radius: 999px; color: var(--ink-2);
  transition: background .2s var(--ease), color .2s, transform .2s var(--ease);
}
.wv-tab:hover { background: var(--surface-2); }
.wv-tab.active { background: var(--ink); color: #fff; }
.wv-tab svg { flex: none; opacity: .85; }
.wv-count { white-space: nowrap; }

.wv-view { animation: wv-in .35s var(--ease); }
@keyframes wv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wv-h { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 26px 0 14px; }
.wv-h:first-child { margin-top: 0; }
.wv-n {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; color: var(--ink-2);
}

/* ---------- le schede -------------------------------------------- */
.wv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.wv-grid > [data-expand-item] { display: contents; }
.wv-grid > [data-expand-item][hidden] { display: none; }
.wv-more { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }

.wv-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px 22px 18px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  min-height: 210px;
}
.wv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.wv-card-link { position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.wv-card > *:not(.wv-card-link) { position: relative; z-index: 2; pointer-events: none; }

.wv-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wv-date {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline;
  line-height: 1;
}
.wv-date .wd { grid-column: 1; grid-row: 1; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wv-date .d  { grid-column: 1; grid-row: 2; font-size: 38px; font-weight: 600; letter-spacing: -.02em; }
.wv-date .m  { grid-column: 2; grid-row: 2; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); align-self: end; padding-bottom: 5px; }

.wv-state {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2);
}
.wv-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: wv-pulse 1.2s ease-in-out infinite; }
@keyframes wv-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .5; } }

.wv-title { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.wv-meta { margin: 0; font-size: 13.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 6px; }
.wv-meta .sep { opacity: .5; }
.wv-desc { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.wv-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.wv-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--ink-2);
}
.wv-chip .ico { opacity: .7; }
.wv-chip.warn { background: var(--warn-soft); color: var(--warn); }
.wv-chip.ok   { background: var(--ok-soft);   color: var(--ok); }
.wv-go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--accent-dark); }
.wv-go .ico { transition: transform .2s var(--ease); }
.wv-card:hover .wv-go .ico { transform: translateX(3px); }
.wv-btn { margin-left: auto; }

/* i colori di ogni stato */
.wv-card.tone-next .wv-state { background: var(--accent-soft); color: var(--accent-dark); }
.wv-card.tone-live { background: var(--ink); color: #fff; box-shadow: 0 24px 50px -24px rgba(255,24,78,.55); }
.wv-card.tone-live .wv-title, .wv-card.tone-live .wv-date .d { color: #fff; }
.wv-card.tone-live .wv-date .wd, .wv-card.tone-live .wv-meta, .wv-card.tone-live .wv-desc { color: #b9b9c4; }
.wv-card.tone-live .wv-date .m { color: #fff; }
.wv-card.tone-live .wv-state { background: var(--accent); color: #fff; }
.wv-card.tone-live .wv-chip { background: rgba(255,255,255,.1); color: #fff; }
.wv-card.tone-live .wv-go { color: #fff; }
.wv-card.tone-past { background: var(--surface); }
.wv-card.tone-past .wv-date .d { color: var(--ink-2); }
.wv-card.tone-void { opacity: .6; }
.wv-card.tone-void .wv-title { text-decoration: line-through; }
.wv-card.tone-void .wv-state { background: var(--err-soft); color: var(--err); }

.wv-trash-form { display: flex; justify-content: flex-end; margin-top: -8px; }

/* ---------- il calendario ----------------------------------------- */
.wv-cal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px; }
.wv-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.wv-cal-title { display: flex; align-items: center; gap: 12px; }
.wv-cal-title strong { font-size: 24px; letter-spacing: -.01em; text-transform: capitalize; }
.wv-today {
  border: 0; background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s;
}
.wv-today:hover { background: var(--ink); color: #fff; }
.wv-cal-nav { display: flex; gap: 6px; }
.wv-arrow {
  width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--surface-2); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease);
}
.wv-arrow:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }

.wv-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.wv-cal-week span { text-align: center; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }

.wv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wv-day { min-width: 0;
  min-height: 118px; border-radius: 16px; background: var(--surface-2); padding: 8px 8px 6px;
  display: flex; flex-direction: column; gap: 4px; position: relative;
  transition: background .2s, box-shadow .2s;
}
.wv-day.is-other { opacity: .38; }
.wv-day.is-today { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
.wv-day.has-ev { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.wv-day.has-ev.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.wv-day.is-weekend:not(.has-ev) { background: color-mix(in srgb, var(--surface-2) 70%, #fff); }
.wv-day-n { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 2px 4px 4px; }
.wv-day.is-today .wv-day-n { color: var(--accent-dark); }
.wv-day.is-today .wv-day-n::after { content: "oggi"; margin-left: 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

.wv-ev {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.2; color: inherit; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.wv-ev:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); text-decoration: none; }
.wv-ev b { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wv-ev small { font-size: 11px; opacity: .8; white-space: nowrap; }
.wv-ev.tone-next { background: var(--accent-soft); color: var(--accent-dark); }
.wv-ev.tone-live { background: var(--accent); color: #fff; }
.wv-ev.tone-past { background: var(--surface-2); color: var(--ink-2); }
.wv-ev.tone-void { background: var(--err-soft); color: var(--err); text-decoration: line-through; }
.wv-ev-more { font-size: 11.5px; color: var(--muted); padding: 2px 6px; }

.wv-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.wv-legend span { display: inline-flex; align-items: center; gap: 7px; }
.wv-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.wv-legend .tone-live { background: var(--accent); }
.wv-legend .tone-next { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-dark); }
.wv-legend .tone-past { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.wv-legend .tone-void { background: var(--err-soft); }

/* elenco del mese sotto al calendario */
.wv-agenda { margin-top: 22px; }
.wv-agenda-title { font-size: 17px; margin: 0 0 10px; }
.wv-agenda-list { display: flex; flex-direction: column; gap: 8px; }
.wv-ag {
  display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow); color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wv-ag:hover { transform: translateX(3px); box-shadow: var(--shadow-lift); text-decoration: none; }
.wv-ag-date { flex: none; width: 46px; text-align: center; line-height: 1; }
.wv-ag-date b { display: block; font-size: 22px; font-weight: 600; }
.wv-ag-date small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.wv-ag-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wv-ag-main strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-ag-main span { font-size: 13px; color: var(--muted); }
.wv-ag .wv-state { flex: none; }
.wv-ag.tone-next .wv-state { background: var(--accent-soft); color: var(--accent-dark); }
.wv-ag.tone-live .wv-state { background: var(--accent); color: #fff; }
.wv-ag.tone-void { opacity: .6; }
.wv-ag.tone-void strong { text-decoration: line-through; }
.wv-ag-empty { padding: 18px; text-align: center; color: var(--muted); border: 1.5px dashed #d6d6de; border-radius: 16px; }

/* ---------- da telefono ------------------------------------------- */
@media (max-width: 720px) {
  .wv-bar { flex-direction: column; align-items: stretch; }
  .wv-switch { display: flex; }
  .wv-tab { flex: 1; justify-content: center; }
  .wv-count { text-align: center; }
  .wv-grid { grid-template-columns: 1fr; gap: 14px; }
  .wv-card { min-height: 0; }
  .wv-cal { padding: 16px 12px 12px; border-radius: 20px; }
  .wv-cal-title strong { font-size: 19px; }
  .wv-cal-week, .wv-cal-grid { gap: 4px; }
  .wv-cal-week span { font-size: 10px; letter-spacing: .06em; }
  .wv-day { min-height: 54px; padding: 5px 4px 6px; border-radius: 11px; align-items: center; }
  .wv-day-n { font-size: 12.5px; padding: 1px 0 2px; }
  .wv-day.is-today .wv-day-n::after { content: none; }
  .wv-ev { display: none; }
  .wv-ev-more { display: none; }
  .wv-day-dots { display: flex; gap: 3px; margin-top: auto; }
  .wv-day-dots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
  .wv-day-dots .tone-next { background: var(--accent); }
  .wv-day-dots .tone-live { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .wv-day-dots .tone-past { background: #c4c4cc; }
  .wv-day-dots .tone-void { background: var(--err); }
  .wv-day.is-picked { box-shadow: inset 0 0 0 2px var(--ink); }
  .wv-legend { gap: 6px 12px; font-size: 12px; }
  .wv-ag { gap: 12px; padding: 10px 12px; }
  .wv-ag .wv-state { display: none; }
}
@media (min-width: 721px) { .wv-day-dots { display: none; } }

/* ============================================================
   BLOCCO 16 — la scheda del corso in una pagina sola,
               categorie e argomenti, tutor sul corso
   ============================================================ */

/* ---------- impianto a due colonne, come un editor ---------- */
.scheda { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.scheda-main, .scheda-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.scheda-card { padding: 22px 24px; }
.scheda-card > h3 { margin: 0 0 12px; font-size: 16px; }
.scheda-card .form label:last-child, .scheda-card label:last-child { margin-bottom: 0; }

.scheda-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.scheda-step span {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 13px; display: grid; place-items: center; margin-top: 1px;
}
.scheda-step h3 { margin: 0 0 2px; font-size: 16px; }
.scheda-step p { margin: 0; }

.scheda-title input { font-size: 22px; font-weight: 600; padding: 12px 14px; }
.scheda-title em { color: var(--accent); font-style: normal; }

/* ---------- pubblica ---------- */
.scheda-publish { background: var(--ink); color: #fff; }
.scheda-publish h3 { color: #fff; }
.status-pick { display: grid; gap: 8px; margin-bottom: 14px; }
.status-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,.14); cursor: pointer; margin: 0; font-weight: 400;
}
.status-opt input { width: auto; margin-top: 4px; accent-color: var(--accent); flex: none; }
.status-opt span { display: flex; flex-direction: column; gap: 1px; }
.status-opt strong { font-size: 14px; color: #fff; }
.status-opt small { font-size: 12px; color: rgba(255,255,255,.62); }
.status-opt:has(input:checked) { border-color: var(--accent); background: rgba(255,24,78,.14); }
.scheda-publish .center { text-align: center; margin: 10px 0 0; color: rgba(255,255,255,.62); }

/* ---------- copertina ---------- */
.cover-drop {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  border: 2px dashed var(--line); background: var(--surface-2) center / cover no-repeat;
  display: grid; place-items: center; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.cover-drop:hover, .cover-drop:focus-visible, .cover-drop.over { border-color: var(--accent); background-color: var(--accent-soft); outline: none; }
.cover-drop.has-image { border-style: solid; border-color: transparent; }
.cover-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 20px; color: var(--ink-2); }
.cover-empty svg { width: 34px; height: 34px; opacity: .45; margin-bottom: 6px; }
.cover-drop.has-image .cover-empty { display: none; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.cover-actions .danger { color: var(--err); }

/* ---------- tutor ---------- */
.tutor-pick { display: flex; gap: 10px; align-items: center; }
.tutor-pick select { flex: 1 1 auto; min-width: 0; }
.tutor-face { flex: none; }
.avatar-empty { background: var(--surface-2); color: var(--muted); }

/* ---------- il campo a etichette (categoria e argomenti) ---------- */
.tagbox {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 46px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: text;
}
.tagbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tagbox-chips { display: contents; }
.tagbox-input { flex: 1 1 120px; min-width: 120px; border: 0 !important; outline: 0; padding: 4px 4px !important; font: inherit; font-size: 14px; background: transparent !important; box-shadow: none !important; }
.tagbox.is-full { cursor: default; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; line-height: 1; max-width: 100%;
}
.tag-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-chip em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); padding: 3px 6px; border-radius: 999px; }
.tag-chip button {
  border: 0; background: rgba(255,255,255,.16); color: #fff; width: 20px; height: 20px; border-radius: 50%;
  cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.tag-chip button:hover { background: var(--accent); }
[data-tagbox="topic"] .tag-chip { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
[data-tagbox="topic"] .tag-chip button { background: rgba(11,11,15,.08); color: var(--ink); }
[data-tagbox="topic"] .tag-chip button:hover { background: var(--accent); color: #fff; }

.tagbox-menu {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); padding: 6px; max-height: 260px; overflow: auto;
}
.tagbox-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 9px 10px; border-radius: 9px; font: inherit; font-size: 14px; cursor: pointer; color: var(--ink);
}
.tagbox-item:hover, .tagbox-item.is-active { background: var(--surface-2); }
.tagbox-item small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tagbox-create { color: var(--accent); font-weight: 600; }
.tagbox-create b { font-weight: 700; }

/* ---------- livello: pulsanti a segmenti ---------- */
.seg { display: flex; gap: 3px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.seg-opt { flex: 1; margin: 0; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span {
  display: block; text-align: center; padding: 8px 6px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.seg-opt:hover span { color: var(--ink); }
.seg-opt input:checked + span { background: var(--ink); color: #fff; }
.seg-opt input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- percorso, regole ---------- */
.scheda-paths { margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.scheda-paths li { padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-xs); font-size: 14px; }
.scheda-more { margin-top: 6px; }
.scheda-more summary { cursor: pointer; font-weight: 500; font-size: 14px; padding: 8px 0; list-style: none; display: flex; gap: 6px; align-items: center; }
.scheda-more summary::before { content: "▸"; font-size: 12px; color: var(--muted); transition: transform .2s var(--ease); }
.scheda-more[open] summary::before { transform: rotate(90deg); }
.check-list { max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 6px 10px; }
.check-list label { margin: 0; padding: 6px 0; font-size: 14px; }

/* ---------- barra in fondo con Salva sempre a portata ---------- */
.scheda-bar {
  grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px; margin-top: 4px; border-radius: var(--radius-sm); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lift);
}
.scheda.is-dirty .scheda-bar { border-color: var(--accent); }
.scheda.is-dirty #scheda-dirty { color: var(--accent); font-weight: 500; }

@media (max-width: 1100px) {
  .scheda { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .scheda-bar { bottom: 84px; }   /* sopra la barra del telefono */
}

/* ---------- elenco dei corsi nel pannello ---------- */
.course-list { display: grid; gap: 12px; }
.course-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; }
.course-row .item-cover { width: 96px; height: 60px; border-radius: 10px; object-fit: cover; background: var(--surface-2); margin: 0; }
.course-row .item-cover.is-empty { display: grid; place-items: center; font-weight: 600; color: var(--muted); font-size: 12px; letter-spacing: .06em; }
.course-row h3 { margin: 2px 0 4px; font-size: 16px; }
.course-row h3 a { color: inherit; }
.course-row .eyebrow { margin: 0; }
.course-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--muted); }
.course-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.course-meta .avatar { width: 20px; height: 20px; font-size: 9px; flex: none; }
.course-meta .tag-mini { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.course-row .item-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .course-row { grid-template-columns: 72px minmax(0, 1fr); }
  .course-row .item-cover { width: 72px; height: 48px; }
  .course-row .item-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* riassunto della scheda dentro a «moduli e lezioni» */
.scheda-summary { display: flex; flex-direction: column; gap: 10px; }
.scheda-summary .cover-mini { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-xs); object-fit: cover; background: var(--surface-2); }
.scheda-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.scheda-summary dt { color: var(--muted); }
.scheda-summary dd { margin: 0; }
.scheda-summary .tutor-line { display: inline-flex; align-items: center; gap: 8px; }
.scheda-summary .tutor-line .avatar { width: 24px; height: 24px; font-size: 10px; }

/* ---------- categorie e argomenti: la pagina di gestione ---------- */
.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .terms-grid { grid-template-columns: 1fr; } }
.term-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.term-row:last-child { border-bottom: 0; }
.term-row form { display: contents; }
.term-row input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 8px 10px !important; }
.term-row select { flex: 0 0 150px; min-width: 0; padding: 8px 28px 8px 10px !important; font-size: 13px !important; }
.term-row .count { flex: none; min-width: 60px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.term-row .btn { flex: none; }
.term-merge { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }

/* ---------- lato studente: tutor e argomenti sul corso ---------- */
.course-tutor {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 18px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; max-width: 520px;
}
.course-tutor:hover { text-decoration: none; border-color: var(--ink); }
.course-tutor .avatar { width: 44px; height: 44px; flex: none; }
.course-tutor > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.course-tutor small { display: block; color: var(--muted); }
.course-tutor .lead { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.course-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.course-topics .tag-mini { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.c-card .c-tutor { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 0 0 10px; }
.c-card .c-tutor .avatar { width: 22px; height: 22px; font-size: 9px; flex: none; }

/* ============================================================
   BLOCCO 17 — homepage con la richiesta di colloquio,
               pagina «Richieste di colloquio» nel pannello,
               link alla privacy nel piè di pagina
   ============================================================ */

/* ---------- come si entra: quattro passi ---------- */
.how { margin-top: 56px; }
.how-steps {
  list-style: none; margin: 14px 0 0; padding: 0; counter-reset: passo;
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.how-steps li {
  counter-increment: passo; position: relative; padding: 22px 20px 20px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.how-steps li::before {
  content: counter(passo); display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 6px;
}
.how-steps strong { font-size: 16px; }
.how-steps span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* ---------- il modulo ---------- */
.apply {
  margin-top: 56px; padding: 36px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 820px;
}
.apply-head { margin-bottom: 22px; }
.apply-head h2 { margin: 4px 0 6px; }
.apply-head .muted { margin: 0; }
.apply-form label em { color: var(--accent); font-style: normal; margin-left: 2px; }
.apply-form .consent { align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 6px 0 14px; }
.apply-form .consent input { margin-top: 4px; accent-color: var(--accent); }
.apply-form .form-actions { margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apply-done { text-align: center; padding: 20px 10px; }
.apply-done-mark {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ok-soft); color: var(--ok); font-size: 26px; font-weight: 700; margin-bottom: 14px;
}
.apply-done h2 { margin: 0 0 8px; }
.apply-done p { max-width: 52ch; margin: 0 auto 8px; }

@media (max-width: 640px) {
  .apply { padding: 24px 18px; }
  .how { margin-top: 40px; }
}

/* ---------- pannello: le richieste ---------- */
.app-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.app-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.app-top h3 { margin: 0; font-size: 17px; }
.app-line { margin: 0 0 2px; font-size: 14px; color: var(--ink-2); }
.app-contact { margin: 0 0 10px; font-size: 14px; }
.app-msg {
  margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.app-notes { margin: 0; }
.app-notes input[type="text"] { flex: 1 1 260px; min-width: 0; }
.app-actions { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.app-actions form { margin: 0; }
.app-actions .btn { width: 100%; }
@media (max-width: 720px) {
  .app-row { grid-template-columns: 1fr; }
  .app-actions { flex-direction: row; flex-wrap: wrap; }
  .app-actions .btn { width: auto; }
}

/* ---------- piè di pagina: il link alla privacy ---------- */
.foot-links { display: inline-flex; gap: 14px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }
.foot-app .foot-links { margin-left: 14px; }
.foot-app .foot-links a { color: inherit; opacity: .8; }

/* ============================================================
   BLOCCO 18 — i momenti che vanno raccontati:
               iscrizione, attestato, aiuto, registrazioni
   ============================================================ */

/* ---------- attestato: la festa quando esce ---------- */
.cert-party {
  text-align: center; padding: 34px 20px 30px; margin-bottom: 26px;
  background: linear-gradient(180deg, var(--accent-soft), transparent 78%);
  border-radius: var(--radius);
}
.cert-party-mark {
  display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-lift); font-size: 32px; margin-bottom: 14px;
}
.cert-party h1 { margin: 0 0 8px; font-size: clamp(28px, 4.4vw, 40px); }
.cert-party-lede { max-width: 54ch; margin: 0 auto; color: var(--ink-2); font-size: 17px; line-height: 1.55; }

.cert-share .btn-block { margin-top: 4px; }
.cert-share .btn-block + .btn-block { margin-top: 8px; }

/* ---------- serve aiuto: lato membro ---------- */
.help-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } }
.help-form-card h3 { margin-top: 0; }
.help-note { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.help-list .section-title { margin-top: 0; }
.help-item { margin-bottom: 12px; }
.help-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.help-top strong { font-size: 15px; }
.help-msg { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.help-reply {
  padding: 14px 16px; border-radius: var(--radius-xs); background: var(--ok-soft);
  border-left: 3px solid var(--ok); font-size: 15px; line-height: 1.55;
}
.help-reply p { margin: 0; }
.help-reply p + p { margin-top: 8px; }
.help-reply-who {
  display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ok);
}
.help-reply-who svg { width: 14px; height: 14px; }

/* ---------- serve aiuto: lato staff ---------- */
.help-admin { margin-bottom: 12px; }
.help-admin-who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.help-admin-who > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.help-admin-who strong { font-size: 15px; }
.help-admin-who small { font-size: 12.5px; }
.help-admin-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.help-topic { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.help-msg-admin {
  margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: 15px; line-height: 1.55; white-space: pre-line;
}
.help-admin-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.help-reply-form { flex: 1 1 320px; margin: 0; }
.help-reply-form textarea { width: 100%; margin-bottom: 8px; }
.help-reply-form .form-actions { margin: 0; }

/* ---------- registrazione del webinar ---------- */
.rec-wrap { margin-bottom: 18px; }
.rec-flag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 5px 12px;
  border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500;
}
.rec-flag svg { width: 15px; height: 15px; }
.rec-wrap .player-wrap { margin-bottom: 10px; }
.wv-chip.rec { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- dashboard: la scritta «chiedi allo staff» ora è un link ---------- */
.ask-staff { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }

/* ============================================================
   BLOCCO 19 — cosa è successo mentre non c'eri, profili vivi,
               riconoscimenti, tutor, il giro di presentazione
   ============================================================ */

/* ---------- la fascia «dall'ultima volta» ---------- */
.pulse {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 20px; border-radius: var(--radius-sm);
  background: var(--ink); color: #fff;
}
.pulse-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); flex: none;
}
.pulse-items { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.pulse-items a {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.09); color: #fff; font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: background .16s var(--ease);
}
.pulse-items a:hover { background: var(--accent); text-decoration: none; }
.pulse-items a b { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .pulse { padding: 12px 14px; gap: 8px; }
  .pulse-label { width: 100%; }
  .pulse-items { gap: 6px; }
  .pulse-items a { font-size: 13px; padding: 5px 10px; }
}

/* ---------- i primi passi, quando la dashboard è vuota ---------- */
.firststeps { margin-bottom: 22px; }
.firststeps h2 { margin: 0 0 4px; font-size: 20px; }
.firststeps > p { margin: 0 0 16px; }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: st; }
.step-list li {
  counter-increment: st; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.step-list li::before {
  content: counter(st); flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 13px;
  display: grid; place-items: center;
}
.step-list li.is-done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.step-list li.is-done .step-main strong { text-decoration: line-through; color: var(--muted); }
.step-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.step-main strong { font-size: 15px; }
.step-main span { font-size: 13.5px; color: var(--ink-2); }
.step-list .btn { flex: none; }
@media (max-width: 560px) {
  .step-list li { flex-wrap: wrap; }
  .step-list .btn { width: 100%; }
}

/* ---------- riconoscimenti ---------- */
.award-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.award-mini {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; line-height: 1; background: var(--surface-2); border: 1px solid var(--line);
}
.award-mini.tone-gold   { background: #fff6dd; border-color: #f0dca6; }
.award-mini.tone-green  { background: var(--ok-soft);   border-color: #bfe0cd; }
.award-mini.tone-blue   { background: var(--tint-sky);  border-color: #c3d4ee; }
.award-mini.tone-violet { background: var(--tint-lilac); border-color: #d4c8ee; }

.award-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.award-card {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.award-card .award-mini { width: 34px; height: 34px; font-size: 17px; }
.award-card div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.award-card strong { font-size: 14px; }
.award-card small { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ---------- profilo con i numeri veri ---------- */
.pfacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pfact {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--surface-2); font-size: 13px; color: var(--ink-2);
}
.pfact b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pfact.is-live { background: var(--ok-soft); color: var(--ok); }
.pfact.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.mutuals { display: flex; flex-wrap: wrap; gap: 6px; }
.mutual .avatar { width: 38px; height: 38px; font-size: 13px; }
.mutual:hover .avatar { box-shadow: 0 0 0 2px var(--accent); }

.certlist { display: grid; gap: 8px; }
.certline {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-xs);
  background: var(--surface-2); font-size: 14px; color: inherit;
}
.certline:hover { text-decoration: none; background: var(--accent-soft); }
.certline .cmark { flex: none; font-size: 16px; }
.certline span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.certline code { margin-left: auto; font-size: 11.5px; color: var(--muted); flex: none; }

.member-live { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--ok); }
.member-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.chip.is-mine { border-color: var(--accent); color: var(--accent-dark); }
.sector-chips { margin-bottom: 14px; }
.sector-chips .chip span { opacity: .55; font-size: 12px; }

/* ---------- tutor ---------- */
.tutor-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tutor-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tutor-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tutor-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tutor-card .avatar { margin-bottom: 8px; }
.tutor-card h3 { margin: 0; font-size: 16.5px; }
.tutor-head { margin: 0; font-size: 14px; color: var(--ink-2); }
.tutor-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; font-size: 12.5px; }
.tutor-meta span { padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.tutor-meta .tutor-serv { background: var(--accent-soft); color: var(--accent-dark); font-weight: 500; }
.tutor-go { margin-top: 14px; position: relative; z-index: 2; pointer-events: none; }

/* i servizi, a fisarmonica */
.serv-list { display: grid; gap: 10px; }
.serv { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.serv[open] { border-color: var(--ink); }
.serv summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 15px 17px; cursor: pointer; list-style: none;
}
.serv summary::-webkit-details-marker { display: none; }
.serv summary:hover { background: var(--surface-2); }
.serv-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 200px; }
.serv-main strong { font-size: 15.5px; }
.serv-main small { font-size: 13.5px; line-height: 1.45; }
.serv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.serv-price { font-weight: 600; font-size: 15px; color: var(--accent-dark); margin: 0; }
.serv-body { padding: 0 17px 17px; border-top: 1px solid var(--line); padding-top: 14px; }
.serv-form { margin-top: 12px; }
.serv-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.serv-row .item-main { flex: 1 1 260px; min-width: 0; }
.serv-row .serv-price { margin-top: 6px; }
.sreq-item, .sreq-admin { margin-bottom: 12px; }
.sreq-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sreq-who { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.sreq-who .avatar { width: 28px; height: 28px; font-size: 11px; }
.sreq-form textarea { width: 100%; margin-bottom: 8px; }
@media (max-width: 560px) {
  .serv summary { flex-direction: column; }
  .serv-meta { align-items: flex-start; text-align: left; }
}

/* ---------- il giro di presentazione ---------- */
body.tour-open { overflow: hidden; }
.tour-back { position: fixed; inset: 0; z-index: 400; background: rgba(11,11,15,.62); backdrop-filter: blur(2px); }
.tour-hole {
  position: absolute; z-index: 401; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11,11,15,.62), 0 0 0 3px var(--accent);
  transition: top .28s var(--ease), left .28s var(--ease), width .28s var(--ease), height .28s var(--ease);
}
.tour-card {
  position: absolute; z-index: 402; width: min(360px, calc(100vw - 24px));
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 22px 24px;
}
.tour-card.is-center {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 28px));
}
.tour-count { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.tour-card h2 { margin: 0 0 8px; font-size: 21px; }
.tour-text { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 16px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2, #d6d2da); transition: background .2s, width .2s; }
.tour-dot.is-on { background: var(--accent); width: 20px; border-radius: 999px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-spacer { flex: 1 1 auto; }
@media (max-width: 760px) {
  .tour-card, .tour-card.is-center {
    position: fixed; top: auto; bottom: 96px; left: 12px; right: 12px;
    width: auto; transform: none; padding: 20px;
  }
  .tour-hole { box-shadow: 0 0 0 9999px rgba(11,11,15,.62), 0 0 0 3px var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-dot { transition: none; } }

/* ---------- il campo a etichette del profilo ---------- */
.tagbox-input:focus { outline: none; }
[data-tags] .tag-chip { background: var(--ink); color: #fff; }
[data-tags] .tag-chip em { background: var(--accent); }

/* la miniatura del corso nelle liste (mancava una misura: l'immagine esplodeva) */
.rowlist-pic { width: 60px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--surface-2); }
@media (max-width: 560px) { .rowlist-pic { width: 48px; height: 32px; } }


/* ============================================================
   BLOCCO 20 — la rifinitura: homepage nuova, animazioni uguali
               dappertutto, spazi sistemati, telefono a posto
   ============================================================ */

/* ---------- ingresso di pagina: un soffio, non un lampo ---------- */
.page-enter { animation: page-in .42s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* le cose che entrano scorrendo (homepage e pagine pubbliche) */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.is-in { opacity: 1; transform: none; }
.no-io .rv, .no-js .rv { opacity: 1; transform: none; }

/* ---------- bottoni: stessa mano ovunque ---------- */
.btn { transition: transform .16s var(--ease), background .18s, box-shadow .18s, border-color .18s, color .18s; will-change: transform; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary:hover { box-shadow: 0 12px 26px -10px rgba(255,24,78,.7); }
.btn-dark:hover { box-shadow: 0 12px 26px -12px rgba(11,11,15,.6); }
.btn-ghost:hover { background: var(--surface); box-shadow: var(--shadow); }
.btn:focus-visible, a:focus-visible, button:focus-visible, .tab:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; box-shadow: 0 0 0 1px var(--accent); }
.btn.is-disabled, .btn[disabled] { opacity: .55; pointer-events: none; transform: none; }

/* ---------- campi: il fuoco si vede, e sempre uguale ---------- */
.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .form select, .form textarea {
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.form input:focus, .form select:focus, .form textarea:focus, .tagbox:focus-within, .at-field:focus-within {
  border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; background: var(--surface) !important;
}

/* ---------- schede e liste: sollevamento leggero, mai sfarfallio ---------- */
.card { transition: box-shadow .22s var(--ease), border-color .22s; }
a.card:hover, .card.is-link:hover { box-shadow: var(--shadow-lift); border-color: #dedde4; text-decoration: none; }
.rowlist-item, .member-card, .c-card, .tutor-card, .live-card, .dash-tile, .quick, .stat, .app-row, .serv { will-change: transform; }
.quick { transition: transform .18s var(--ease), background .18s, box-shadow .18s; }
.quick:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
a.stat { transition: transform .18s var(--ease), box-shadow .18s; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; }

/* ---------- linguette: la riga sotto scivola ---------- */
.tab { position: relative; border-bottom-color: transparent !important; transition: color .16s; }
.tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .24s var(--ease); transform-origin: left; }
.tab.active::after { transform: scaleX(1); }
.tab:hover { color: var(--ink); }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { flex: none; white-space: nowrap; }
@media (max-width: 720px) {
  .tabs { overflow-x: auto; mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); padding-right: 34px; }
}

/* ---------- avvisi: arrivano da sopra, il badge pulsa una volta ---------- */
.flash { animation: flash-in .38s var(--ease) both; display: flex; align-items: flex-start; gap: 10px; }
.flash::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-top: 7px; opacity: .75; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.notice { animation: flash-in .38s var(--ease) both; }
.bell.has-new .bell-n { animation: badge-pop .5s var(--ease); }
.empty { animation: page-in .5s var(--ease) both; }

/* ---------- spazi: intestazioni e sezioni con lo stesso respiro ---------- */
.page-head { margin-bottom: 24px; }
.page-head .muted { max-width: 68ch; }
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; }
.meta-sep { color: var(--muted); opacity: .6; }
.meta-sep:first-child, .badge + .meta-sep:first-of-type { display: none; }
.section-title { margin-top: 26px; padding-top: 20px; font-size: 16px; }
.section-title + .section-note { margin-top: -4px; margin-bottom: 14px; }
.hello { margin-bottom: 22px; }
.content > .stats { margin-bottom: 22px; }
.card > h3:first-child, .card > .card-head:first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card + .card { margin-top: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h3 { margin: 0; }
.grid-2 > .card + .card, .stack > .card + .card, .cols-3-2 > .card + .card { margin-top: 0; }
.filters.card { margin-bottom: 18px; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.tablewrap .table { min-width: 560px; }
.foot-app { padding-top: 24px; }

/* ---------- il menu laterale: la voce attiva respira ---------- */
.sidenav a.active { animation: nav-in .35s var(--ease) both; }
@keyframes nav-in { from { transform: translateX(-4px); opacity: .6; } to { transform: none; opacity: 1; } }
.sidenav a .ico { transition: transform .18s var(--ease); }
.sidenav a:hover .ico { transform: scale(1.08); }

/* ---------- barre di avanzamento ---------- */
.bar span, .mini-bar span, .c-bar span { transition: width .9s var(--ease); }

/* ---------- la barra in basso sul telefono ---------- */
.tabbar a, .tabbar .tab-menu { transition: background .18s, color .18s, transform .16s var(--ease); }
.tabbar a:active, .tabbar .tab-menu:active { transform: scale(.94); }

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* le pagine pubbliche avevano perso il margine ai lati sul telefono (.content batteva .wrap) */
.layout-public .content.wrap { padding-left: 22px; padding-right: 22px; }

/* la barra in alto: sul telefono resta una pillola sola, senza andare a capo */
.topbar-public { padding: 0 10px; }
.topbar-public .wrap { padding: 0 8px 0 18px; }
.topbar-public .topnav { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; white-space: nowrap; }
.topbar-public .topnav a { font-weight: 500; transition: color .16s; }
.topbar-public .topnav a:not(.btn):hover { color: var(--accent); text-decoration: none; }
.topbar-public .topnav a.active { color: var(--accent); }
.topbar-public .brand-name { white-space: nowrap; }
@media (max-width: 720px) {
  .topbar-public { top: 8px; }
  .topbar-public .wrap { height: 54px; padding: 0 6px 0 14px; gap: 8px; flex-wrap: nowrap; }
  .topbar-public .brand { font-size: 15.5px; gap: 8px; }
  .topbar-public .brand-mark { width: 26px; height: 26px; border-radius: 8px; }
  .topbar-public .brand-mark::after { inset: 8px; }
  .topbar-public .topnav { gap: 10px; font-size: 13.5px; }
  .topbar-public .topnav .btn { padding: 8px 13px; font-size: 13px; }
  .layout-public .content.wrap { padding-left: 18px; padding-right: 18px; }
  .layout-public .content { padding-top: 24px; }
}
@media (max-width: 360px) { .topbar-public .topnav a:not(.btn) { display: none; } }

/* ---------- l'apertura: testo a sinistra, la «finestra» sull'Academy a destra ---------- */
.hero-20 {
  max-width: none; padding: 44px 0 20px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px; align-items: center;
}
.hero-20 h1 { font-size: clamp(36px, 4.1vw, 52px); line-height: 1.06; margin-bottom: .45em; letter-spacing: -.02em; }
.hero-20 .lede { font-size: 18.5px; line-height: 1.6; max-width: 54ch; }
.hero-20 .hero-actions { margin-top: 26px; }
.accent-under { color: var(--accent); position: relative; white-space: nowrap; }
.accent-under::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .12em; border-radius: 4px;
  background: var(--accent-soft); z-index: -1; transform: scaleX(0); transform-origin: left; animation: under-in .7s var(--ease) .55s both;
}
@keyframes under-in { to { transform: scaleX(1); } }

/* le righe del testo entrano una dopo l'altra */
.hi { animation: hero-in .7s var(--ease) both; }
.hi-1 { animation-delay: .05s; } .hi-2 { animation-delay: .12s; } .hi-3 { animation-delay: .22s; } .hi-4 { animation-delay: .32s; } .hi-5 { animation-delay: .42s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero-facts li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); font-weight: 500; }
.hero-facts .ico { color: var(--accent); flex: none; }

/* la finestra: tre schede che galleggiano su due macchie di colore */
.hero-visual { position: relative; min-height: 420px; }
.hv-blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .85; z-index: 0; }
.hv-blob-a { width: 340px; height: 340px; right: -30px; top: -10px; background: var(--tint-rose); animation: blob-a 14s ease-in-out infinite alternate; }
.hv-blob-b { width: 300px; height: 300px; left: -20px; bottom: -30px; background: var(--tint-lilac); animation: blob-b 16s ease-in-out infinite alternate; }
@keyframes blob-a { to { transform: translate(-30px, 30px) scale(1.1); } }
@keyframes blob-b { to { transform: translate(30px, -24px) scale(1.06); } }
.hv-card {
  position: absolute; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 16px 18px; box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: 12px;
  animation: hv-in .8s var(--ease) both, hv-float 7s ease-in-out infinite; animation-delay: var(--d, .3s), calc(var(--d, .3s) + .8s);
}
.hv-card strong { display: block; font-size: 15px; line-height: 1.25; }
.hv-card small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.hv-card small em { font-style: normal; color: var(--ink-2); font-weight: 500; }
@keyframes hv-in { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.hv-course { --d: .35s; left: 0; top: 48px; width: min(330px, 78%); display: block; background: var(--ink); color: #fff; border: 0; padding: 20px 22px; }
.hv-course .hv-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hv-course strong { font-size: 18px; margin-bottom: 14px; }
.hv-course small { color: #a9a9b6; margin-top: 10px; }
.hv-course small em { color: #fff; }
.hv-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.hv-bar span { display: block; height: 100%; width: 70%; border-radius: 6px; background: var(--accent); transform-origin: left; animation: hv-bar 1.4s var(--ease) 1s both; }
@keyframes hv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hv-live { --d: .55s; right: 0; top: 0; width: min(300px, 72%); }
.hv-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(31,122,77,.45); animation: hv-pulse 2.2s ease-out infinite; }
@keyframes hv-pulse { 0% { box-shadow: 0 0 0 0 rgba(31,122,77,.45); } 100% { box-shadow: 0 0 0 12px rgba(31,122,77,0); } }

.hv-net { --d: .75s; right: 10px; top: 218px; width: min(330px, 80%); flex-wrap: wrap; }
.hv-avatars { display: flex; flex: none; }
.hv-avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), #ff6b8d);
}
.hv-avatars span:first-child { margin-left: 0; }
.hv-avatars span:nth-child(2) { background: linear-gradient(135deg, #5a3fa3, #9b86d6); }
.hv-avatars span:nth-child(3) { background: linear-gradient(135deg, #1f7a4d, #58b98a); }
.hv-avatars span:last-child { background: var(--surface-2); color: var(--ink-2); }
.hv-pill { flex: none; margin-left: auto; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; }

.hv-cert { --d: .95s; left: 26px; bottom: 6px; width: min(300px, 74%); }
.hv-medal { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff6dd; color: #9a6b00; }

@media (max-width: 1000px) {
  .hero-20 { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; }
  .hero-visual { min-height: 0; height: 330px; max-width: 560px; }
}
@media (max-width: 640px) {
  .hero-20 { padding-top: 22px; }
  .hero-20 h1 { font-size: clamp(31px, 9vw, 38px); }
  .hero-20 .lede { font-size: 16.5px; }
  .hero-20 .hero-actions .btn { flex: 1 1 100%; }
  .hero-facts { gap: 8px 14px; margin-top: 20px; }
  .hero-facts li { font-size: 13px; }
  /* sul telefono le schede si mettono in fila, senza sovrapporsi */
  .hero-visual { height: auto; min-height: 0; margin: 10px 0 0; display: grid; gap: 10px; padding: 14px 0 6px; }
  .hv-blob { filter: blur(36px); }
  .hv-blob-a { width: 220px; height: 220px; right: 0; top: 0; }
  .hv-blob-b { width: 200px; height: 200px; left: 0; bottom: 0; }
  .hv-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; padding: 14px 16px; animation: hv-in .8s var(--ease) both; }
  .hv-course { padding: 16px 18px; }
  .hv-course strong { font-size: 16px; }
  .hv-live strong { font-size: 14px; }
  .hv-cert { display: none; }
  .hv-card small { font-size: 12px; }
}
/* niente scorrimento laterale per colpa delle macchie di colore */
body.layout-public { overflow-x: clip; }

/* ---------- cosa trovi dentro ---------- */
.inside { margin-top: 44px; }
.inside-grid { margin-top: 12px; }
.inside-card { padding: 26px 26px 24px; border: 0; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.inside-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.inside-card h3 { margin: 16px 0 6px; font-size: 19px; }
.inside-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.inside-ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.inside-ico.tone-rose { background: var(--accent-soft); color: var(--accent-dark); }
.inside-ico.tone-lilac { background: var(--tint-lilac); color: #5a3fa3; }
.inside-ico.tone-mint { background: var(--tint-mint); color: var(--ok); }

/* ---------- dove siamo ---------- */
.where {
  margin-top: 52px; padding: 30px 32px; border-radius: var(--radius); background: var(--ink); color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; position: relative; overflow: hidden;
}
.where::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,24,78,.45), transparent); pointer-events: none; }
.where-head { position: relative; }
.where-head h2 { margin: 4px 0 8px; font-size: 26px; }
.where-head .muted { color: #a9a9b6; margin: 0; font-size: 15px; }
.where-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.where-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: rgba(255,255,255,.08); color: #fff; transition: background .18s, transform .18s var(--ease);
}
.where-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255,24,78,.25); }
.where-chip:hover { background: rgba(255,255,255,.16); text-decoration: none; transform: translateY(-1px); }
.where-more { background: transparent; border: 1px dashed rgba(255,255,255,.3); }
.where-btn { margin-left: 6px; background: #fff; color: var(--ink); }
.where-btn:hover { background: var(--accent-soft); }
@media (max-width: 860px) {
  .where { grid-template-columns: 1fr; padding: 24px 22px; gap: 18px; }
  .where-chips { justify-content: flex-start; }
  .where-head h2 { font-size: 22px; }
}

/* ---------- come si entra: i quattro passi con il filo ---------- */
.how { margin-top: 52px; }
.how-steps { position: relative; gap: 16px; }
.how-steps li { padding: 24px 22px 22px; border: 0; box-shadow: var(--shadow); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.how-steps li:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.how-steps li::before { width: 32px; height: 32px; font-size: 14px; background: var(--accent); box-shadow: 0 8px 18px -8px rgba(255,24,78,.7); margin-bottom: 10px; }
.how-steps li:last-child::before { background: var(--ink); box-shadow: none; }
@media (min-width: 900px) {
  .how-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 40px; height: 2px; background: linear-gradient(90deg, var(--accent-soft), var(--line), var(--accent-soft)); z-index: 0; }
  .how-steps li { position: relative; z-index: 1; }
}

/* ---------- il modulo con a fianco «cosa succede dopo» ---------- */
.apply-20 { max-width: none; padding: 40px; margin-top: 52px; border: 0; }
.apply-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; align-items: start; }
.apply-side { position: sticky; top: 96px; padding: 24px 24px 22px; border-radius: var(--radius-sm); background: var(--surface-2); }
.after-steps { list-style: none; margin: 10px 0 18px; padding: 0; counter-reset: dopo; display: grid; gap: 14px; }
.after-steps li { counter-increment: dopo; display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; align-items: start; }
.after-steps li::before { content: counter(dopo); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.after-steps strong { font-size: 15px; }
.after-steps span { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.apply-note { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-xs); background: #fff; border: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.apply-note strong { font-size: 14px; }
.apply-form .grid-2 { gap: 0 16px; }
.apply-form label small { color: var(--muted); }
.apply-form .form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .apply-cols { grid-template-columns: 1fr; gap: 22px; }
  .apply-side { position: static; }
}
@media (max-width: 640px) {
  .apply-20 { padding: 24px 18px; margin-top: 40px; }
  .apply-form .form-actions .btn { width: 100%; }
  .apply-side { padding: 18px 16px; }
  .inside { margin-top: 32px; }
  .how { margin-top: 40px; }
  .where { margin-top: 40px; }
}

/* ---------- login: la carta entra da sotto ---------- */
.auth-card { animation: hero-in .6s var(--ease) both; }
.auth-side { animation: hero-in .6s var(--ease) .1s both; }

/* ============================================================
   TELEFONO — le cose che si rompevano a 390px
   ============================================================ */

/* la testata della chat: titolo che si accorcia, bottoni che restano piccoli */
.chat-head { flex-wrap: nowrap; }
.chat-head .chat-head-main { min-width: 0; overflow: hidden; }
.chat-head .chat-head-main h2, .chat-head .chat-head-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chat-head .chat-head-main p, .chat-head .chat-head-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .btn { flex: none; }
@media (max-width: 560px) {
  .chat-head { padding: 10px 12px; gap: 8px; }
  .chat-head .avatar { width: 34px; height: 34px; font-size: 12px; }
  .chat-head .chat-head-main h2 { font-size: 15.5px; }
  .chat-head .btn-sm { padding: 7px 10px; font-size: 12.5px; }
  .chat-head [data-people-toggle] .btn-txt { display: none; }
  .chat-head div.chat-head-main { flex-direction: column; align-items: flex-start; gap: 0; }
  .chat-head div.chat-head-main p { margin: 0; font-size: 12px; max-width: 100%; }
}

/* i moduli e le lezioni nel pannello: sul telefono si dispongono su due righe */
@media (max-width: 640px) {
  .sort-item { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
  .sort-item .sort-main { flex: 1 1 60%; min-width: 0; }
  .sort-item .sort-main .strong, .sort-item .sort-main a { overflow-wrap: anywhere; }
  .sort-item .sort-actions { flex: 1 1 100%; justify-content: flex-end; padding-left: 26px; }
  .module-head { flex-wrap: wrap; }
  .module-head .module-rename { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
  .module-head .module-title { flex: 1 1 100%; }
  .module-head .module-summary { flex: 1 1 60%; min-width: 0; }
  .add-lesson, .add-module { flex-wrap: wrap; }
  .add-lesson input[type="text"], .add-module input[type="text"] { flex: 1 1 100%; }
}

/* categorie e argomenti: le righe vanno a capo invece di sforare */
@media (max-width: 640px) {
  .term-row { flex-wrap: wrap; gap: 8px; padding: 10px 0; }
  .term-row input[type="text"] { flex: 1 1 100%; }
  .term-row select { flex: 1 1 100%; }
  .term-row .count { min-width: 0; margin-right: auto; text-align: left; }
}

/* la scheda del tutor: in colonna, il titolo non deve più «prendersi» 200px di altezza */
@media (max-width: 560px) {
  .serv summary .serv-main { flex: 0 1 auto; }
}

/* elenco gruppi nel pannello: la visibilità in una riga sola */
.table .pill, .table .badge { white-space: nowrap; }

/* la testata della scheda utente/aspirante: meta a capo con ordine */
@media (max-width: 640px) {
  .profile-head { gap: 14px; }
  .profile-head .avatar-xl { width: 72px; height: 72px; font-size: 24px; border-radius: 22px; }
  .profile-head h1 { font-size: 24px; }
  .page-head .meta { font-size: 14px; }
  .head-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .head-actions .btn { flex: 1 1 auto; }
}

/* la dashboard: le tessere in due colonne anche quando sono cinque */
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > :nth-child(5):last-child { grid-column: 1 / -1; }
  .hello { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hello-date { font-size: 13.5px; }
}

/* ---------- niente animazioni per chi le ha spente ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-enter, .rv, .hi, .hv-card, .hv-blob-a, .hv-blob-b, .hv-bar span, .hv-dot, .accent-under::after, .auth-card, .auth-side, .flash, .notice, .empty, .sidenav a.active {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
  .btn:hover, .inside-card:hover, .how-steps li:hover, .quick:hover, a.stat:hover { transform: none; }
}

/* ============================================================
   BLOCCO 21 — i video-corsi dei tutor: in cima alla pagina «Tutor»
               e in cima alla scheda di ogni docente, i profili sotto
   ============================================================ */

.tc-grid { margin-bottom: 6px; }
.tc-block { margin-bottom: 6px; }
.tc-block .section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* la riga col docente dentro al riquadro del corso */
.tc-tutor {
  display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink-2); font-size: 13.5px;
  padding: 2px 0; transition: color .16s;
}
.tc-tutor .avatar { width: 30px; height: 30px; font-size: 11px; border-radius: 10px; flex: none; }
.tc-tutor span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-tutor strong { color: var(--ink); font-weight: 600; }
.tc-tutor:hover { text-decoration: none; color: var(--accent-dark); }
.tc-tutor:hover strong { color: var(--accent-dark); }

.tc-sum { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

/* la bozza: la vede solo lo staff, e si vede che è una bozza */
.c-flag-draft { background: var(--warn-soft); color: var(--warn); }
.tc-draft {
  margin: 0; padding: 9px 11px; border-radius: var(--radius-xs); background: var(--warn-soft);
  color: var(--warn); font-size: 12.5px; line-height: 1.45;
}
.tc-draft a { color: inherit; text-decoration: underline; }

/* il corso che non è nel percorso di chi guarda: si vede, ma si capisce che è chiuso */
.tc-card.is-out .c-actions { align-items: center; }
.tc-card .c-actions .pill { font-size: 12px; }
.tc-card.is-done .c-cover { filter: none; }

@media (max-width: 560px) {
  .tc-card .c-actions { flex-direction: column; align-items: stretch; }
  .tc-card .c-actions .btn { width: 100%; }
  .tc-card .c-actions .pill { text-align: center; }
}

/* ============================================================
   BLOCCO 22 — «Sistema la foto», la scheda Corsi davanti a
               Continua, e la testata del profilo che respira
   ============================================================ */

/* ---------- il pannello del ritaglio ---------- */
body.crop-open { overflow: hidden; }
.crop-back {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  padding: 20px; background: rgba(11,11,15,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: crop-back-in .22s var(--ease) both;
}
@keyframes crop-back-in { from { opacity: 0; } to { opacity: 1; } }
.crop-card {
  width: min(400px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-lift);
  padding: 26px 26px 22px; text-align: center;
  animation: crop-card-in .28s var(--ease) both;
}
@keyframes crop-card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.crop-card h2 { margin: 0 0 6px; font-size: 21px; }
.crop-hint { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.crop-stage {
  position: relative; width: min(300px, 68vw); aspect-ratio: 1; margin: 0 auto 18px;
  border-radius: 18px; overflow: hidden; background: var(--surface-2);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.crop-stage.is-dragging { cursor: grabbing; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
/* il buco: fuori si scurisce, dentro si vede come verrà */
.crop-mask {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 9999px rgba(255,255,255,.72);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 49.6%, #000 49.8%);
          mask: radial-gradient(circle at 50% 50%, transparent 0 49.6%, #000 49.8%);
}
.crop-mask::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 1px rgba(11,11,15,.12);
}
.crop-stage.is-square .crop-mask {
  -webkit-mask: none; mask: none; box-shadow: none;
}
.crop-stage.is-square .crop-mask::after { border-radius: 18px; }

.crop-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.crop-ico {
  flex: none; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s var(--ease);
}
.crop-ico:hover { background: var(--surface-2); border-color: var(--ink); }
.crop-ico:active { transform: scale(.93); }
.crop-gira { margin-left: 4px; }

.crop-range { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: var(--line); }
.crop-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(255,24,78,.7); cursor: pointer;
}
.crop-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(255,24,78,.7); cursor: pointer;
}
.crop-actions { display: flex; gap: 10px; }
.crop-actions .btn { flex: 1; }

@media (max-width: 480px) {
  .crop-back { padding: 12px; }
  .crop-card { padding: 20px 18px 18px; border-radius: 22px; }
  .crop-stage { width: min(300px, 76vw); }
}
@media (prefers-reduced-motion: reduce) {
  .crop-back, .crop-card { animation: none; }
}

/* ---------- la testata del profilo: un po' d'aria ----------
   Era anche spinta tutta a destra: .page-head allontana i due blocchi
   (justify-content: space-between) e qui i blocchi sono solo due. */
.page-head.profile-head { align-items: center; justify-content: flex-start; gap: 24px; margin-bottom: 28px; }
.page-head.profile-head > .avatar { flex: none; }
.page-head.profile-head > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.page-head.profile-head .eyebrow { margin: 0 0 6px; }
.page-head.profile-head h1 { margin: 0 0 12px; line-height: 1.1; }
.page-head.profile-head .meta { gap: 8px 12px; margin: 0; font-size: 14.5px; }
.page-head.profile-head .meta .badge { margin: 0; }
.page-head.profile-head .meta .at { color: var(--muted); font-variant-numeric: tabular-nums; }
.page-head.profile-head .head-cta { margin: 18px 0 0; }
@media (max-width: 640px) {
  .page-head.profile-head { gap: 16px; margin-bottom: 22px; }
  .page-head.profile-head h1 { margin-bottom: 10px; }
  .page-head.profile-head .head-cta { margin-top: 14px; }
  .page-head.profile-head .head-cta .btn { width: 100%; }
}

/* ---------- la scheda «Corsi» è la prima: nessun corso, ma non è finito ---------- */
.dash-nota { max-width: 62ch; margin: 0 auto 18px; }

/* ============================================================
   BLOCCO 23 — il marchio IBC dentro al sito, l'icona nel tab,
               la foto profilo dove prima uscivano le iniziali
   ============================================================ */

/* ---------- il logo ---------- */
.brand-logo { display: block; width: auto; height: auto; }
/* il logo intero (marchio + riga «International Business Community») */
.brand-full .brand-logo { width: 176px; max-width: 100%; }
/* quello corto, senza la riga sotto: sta nelle barre basse */
.brand-logo.is-corto { height: 30px; width: auto; }
.brand { gap: 0; }
.brand:hover { text-decoration: none; opacity: .85; transition: opacity .16s; }

.sidebar-top { align-items: flex-start; padding-top: 4px; }
.sidebar .brand-full { display: block; padding: 2px 4px 0; }

.mobilebar .brand-logo.is-corto { height: 26px; }
.topbar-public .brand-logo.is-corto { height: 28px; }
@media (max-width: 720px) {
  .topbar-public .brand-logo.is-corto { height: 24px; }
}
@media (max-width: 360px) {
  .topbar-public .brand-logo.is-corto { height: 21px; }
}

/* il logo sul pannello scuro del login */
.auth-side .brand-logo { width: 200px; max-width: 70%; margin-bottom: 22px; }
@media (max-width: 900px) { .auth-side .brand-logo { width: 160px; margin-bottom: 16px; } }

/* ---------- emoji uguali su tutti i computer ---------- */
.emo { display: inline-block; vertical-align: -.15em; width: 1.15em; height: 1.15em; }
img.emo { object-fit: contain; }
span.emo { line-height: 1; }

/* ============================================================
   BLOCCO 24 — la scheda del corso rifatta (titolo sulla foto,
               «Vedi il corso» e la durata sotto, il segnalibro),
               i corsi salvati e l'emoji dietro al percorso
   ============================================================ */

/* ---------- la scheda del corso ---------- */
.c-card {
  border: 0; border-radius: 20px; overflow: hidden; background: var(--surface);
  box-shadow: var(--shadow); position: relative;
}
.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.c-cover { aspect-ratio: 4/3; border-radius: 0; }
.c-cover-fade {
  height: 82%;
  background: linear-gradient(to top, rgba(6,6,10,.95) 6%, rgba(6,6,10,.62) 42%, transparent 100%);
}
.c-cover-txt { inset: auto 16px 14px; z-index: 2; }
.c-cover-txt h3 {
  font-size: 19px; line-height: 1.2; margin: 0 0 3px; font-weight: 600; letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.c-cover-txt small { font-size: 12.5px; color: rgba(255,255,255,.8); }

/* i bollini in alto a sinistra, il segnalibro in alto a destra */
.c-flags { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; gap: 6px; }
.c-flag { position: static; }

.c-save {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 36px; height: 36px; border: 0; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(10,10,14,.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .18s, transform .18s var(--ease), color .18s;
}
.c-save svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.c-save:hover { background: rgba(10,10,14,.66); transform: scale(1.06); }
.c-save:active { transform: scale(.92); }
.c-save.is-on { background: var(--accent); color: #fff; }
.c-save.is-on svg { fill: currentColor; }
.c-save.is-on { animation: save-pop .32s var(--ease); }
@keyframes save-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

.c-bar { height: 5px; z-index: 3; }

/* il piede: l'azione a sinistra, quanto dura a destra */
.c-body { padding: 13px 16px 14px; gap: 8px; }
.c-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.c-go {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-weight: 600; font-size: 14.5px; color: var(--ink); transition: color .16s, gap .16s var(--ease);
}
.c-go i { font-style: normal; color: var(--accent); transition: transform .18s var(--ease); }
.c-go:hover { text-decoration: none; color: var(--accent-dark); }
.c-card:hover .c-go i { transform: translateX(3px); }
.c-time { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
a.c-time:hover { color: var(--accent-dark); }
.c-lock { font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.c-cert { font-size: 13px; color: var(--accent-dark); font-weight: 500; }
.c-draft {
  margin: 0; padding: 7px 10px; border-radius: var(--radius-xs);
  background: var(--warn-soft); color: var(--warn); font-size: 12.5px;
}
.c-card.is-locked .c-cover { filter: grayscale(.35); }

@media (max-width: 560px) {
  .c-cover-txt h3 { font-size: 17.5px; }
  .c-foot { flex-wrap: wrap; }
}

/* ---------- il percorso: emoji grande, titolo grande ---------- */
.p-card {
  position: relative; overflow: hidden; min-height: 218px; padding: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0;
}
.p-emoji, .p-card .p-mark {
  position: relative; z-index: 1; flex: none;
  width: 96px; height: 96px; margin: 4px 0 16px;
  display: grid; place-items: center;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.5));
  transition: transform .35s var(--ease);
}
.p-emoji .emo { width: 100%; height: 100%; display: block; }
.p-card .p-mark { border-radius: 28px; font-size: 34px; }
.p-card:hover .p-emoji, .p-card:hover .p-mark { transform: scale(1.08) rotate(-4deg); }
.p-title {
  position: relative; z-index: 1;
  font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
  margin: 0 0 6px; max-width: 100%;
}
.p-meta { position: relative; z-index: 1; font-size: 13.5px; color: #a9a9b6; }
/* il tondino con la percentuale sta in un angolo, non in mezzo */
.p-card .p-ring { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; }
/* un alone del colore del marchio dietro all'emoji */
.p-card::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 26px;
  width: 190px; height: 190px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255,24,78,.30), transparent 72%);
  pointer-events: none;
}
@media (max-width: 560px) {
  .p-card { min-height: 196px; padding: 20px; }
  .p-emoji, .p-card .p-mark { width: 78px; height: 78px; margin-bottom: 13px; }
  .p-title { font-size: 21px; }
}

/* ---------- il numerino sulla linguetta «Salvati» ---------- */
.scroll-tabs .stab b {
  display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark); font-size: 12px; font-weight: 700;
}
.scroll-tabs .stab.active b { background: var(--accent); color: #fff; }

/* ---------- il selettore delle emoji nel pannello ---------- */
.emoji-field { margin-bottom: 14px; }
.emoji-field .lbl { display: block; font-weight: 500; font-size: 14px; margin-bottom: 6px; }
.emoji-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emoji-big {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); flex: none;
}
.emoji-big .emo { width: 34px; height: 34px; }
.emoji-void { font-style: normal; font-size: 11px; color: var(--muted); }
.emoji-pick {
  margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); max-height: 320px; overflow-y: auto;
}
.emoji-grp {
  margin: 12px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.emoji-grp:first-child { margin-top: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.emoji-btn {
  width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  display: grid; place-items: center; transition: background .14s, transform .14s var(--ease);
}
.emoji-btn:hover { background: #fff; transform: scale(1.12); }
.emoji-btn .emo { width: 26px; height: 26px; }

/* ============================================================
   BLOCCO 25 — i livelli: Default → Oro → Platinum → Titanium →
               Diamond. Il bollino di fianco al nome, la finestra
               che spiega tutto, la scheda nel profilo.
   ============================================================ */

/* ---------- il bollino di fianco al nome ---------- */
.lvl {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--s, 18px); height: var(--s, 18px); flex: none;
  vertical-align: -.18em; margin-left: .34em; padding: 0;
  border: 0; background: none; line-height: 0;
  border-radius: 999px; cursor: default;
}
.lvl[data-livelli] { cursor: pointer; transition: transform .18s var(--ease), filter .18s; }
.lvl[data-livelli]:hover { transform: scale(1.16); filter: saturate(1.15); }
.lvl[data-livelli]:active { transform: scale(.94); }
.lvl[data-livelli]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lvl img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* il Titanium è nero: su fondo scuro va aiutato con un alone chiaro */
.lvl-titanium img { filter: drop-shadow(0 0 1.5px rgba(255,255,255,.85)); }
.lvl-default img { opacity: .92; }

/* dentro alle cose scure (copertine, hero, sidebar scura) */
.c-cover .lvl img, .hero .lvl img, .sidebar .lvl img, .p-card .lvl img,
.prof-hero .lvl img, .foot-app .lvl img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* ---------- la finestra che spiega i livelli ---------- */
body.lvl-open { overflow: hidden; }

.lvl-modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 18px;
  background: rgba(8,8,12,.52);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease;
}
.lvl-modal.is-open { opacity: 1; }
.lvl-modal[hidden] { display: none; }

.lvl-card {
  position: relative; width: min(640px, 100%); max-height: min(86vh, 780px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); overflow: hidden;
  padding: 26px 26px 6px;
  transform: translateY(14px) scale(.985);
  transition: transform .24s var(--ease);
}
.lvl-modal.is-open .lvl-card { transform: none; }

.lvl-card .eyebrow { margin: 0 0 2px; }
.lvl-card h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.02em; }
.lvl-intro { margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 52ch; }

.lvl-x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  transition: background .16s, color .16s, transform .16s var(--ease);
}
.lvl-x:hover { background: var(--line); color: var(--ink); transform: rotate(90deg); }

.lvl-list {
  margin: 0 -26px; padding: 0 26px 22px;
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
}

.lvl-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.lvl-row.tone-sky     { background: var(--tint-sky); }
.lvl-row.tone-gold    { background: var(--tint-sand); }
.lvl-row.tone-silver  { background: #eef0f4; }
.lvl-row.tone-dark    { background: #e6e6ea; }
.lvl-row.tone-diamond { background: #e4f1fb; }
.lvl-row.tone-alloro  { background: var(--tint-mint); }

.lvl-row.is-mine { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lvl-row.is-target { animation: lvl-flash .9s var(--ease); }
@keyframes lvl-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,24,78,.42); }
  55%  { box-shadow: 0 0 0 7px rgba(255,24,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,24,78,0); }
}

.lvl-big { flex: none; width: 52px; height: 52px; display: block; }
.lvl-row.tone-dark .lvl-big { filter: drop-shadow(0 2px 5px rgba(0,0,0,.18)); }
.lvl-txt { min-width: 0; }
.lvl-txt h3 {
  margin: 2px 0 4px; font-size: 17px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lvl-mine {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff;
}
.lvl-come { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.lvl-perks { margin: 8px 0 0; padding-left: 18px; }
.lvl-perks li { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lvl-perks li::marker { color: var(--accent); }

@media (max-width: 560px) {
  .lvl-modal { padding: 0; place-items: end stretch; }
  .lvl-card {
    width: 100%; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0;
    padding: 22px 18px 4px; transform: translateY(30px);
  }
  .lvl-list { margin: 0 -18px; padding: 0 18px 20px; }
  .lvl-card h2 { font-size: 22px; }
  .lvl-big { width: 44px; height: 44px; }
  .lvl-row { padding: 13px 14px; gap: 12px; }
}

/* ---------- la scheda del livello nel profilo ---------- */
.mylvl { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mylvl-badge { flex: none; width: 76px; height: 76px; display: block; }
.mylvl-txt { flex: 1 1 260px; min-width: 0; }
.mylvl-txt h3 { margin: 0 0 3px; font-size: 20px; letter-spacing: -.01em; }
.mylvl-txt p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.mylvl-bar {
  margin: 10px 0 6px; height: 8px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.mylvl-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  transition: width .6s var(--ease);
}
.mylvl-next { font-size: 13.5px; color: var(--muted); }
.mylvl-next b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mylvl-top { font-size: 13.5px; color: var(--ok); font-weight: 500; }
.mylvl-info {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; color: var(--accent-dark); text-decoration: underline;
}
.mylvl-info:hover { color: var(--accent); }

@media (max-width: 560px) {
  .mylvl { gap: 14px; }
  .mylvl-badge { width: 60px; height: 60px; }
  .mylvl-txt h3 { font-size: 18px; }
}

/* ---------- il pannello: dare un livello a mano ---------- */
.lvl-admin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lvl-admin img { width: 34px; height: 34px; flex: none; }
.lvl-storia { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lvl-storia li {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-2);
  padding: 7px 10px; border-radius: var(--radius-xs); background: var(--surface-2);
}
.lvl-storia img { width: 22px; height: 22px; flex: none; }
.lvl-storia time { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.lvl-scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin-bottom: 4px; }
.lvl-scelte label {
  display: flex; flex-direction: row; align-items: center; gap: 9px; cursor: pointer; margin: 0;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-xs);
  background: var(--surface); font-size: 14px; transition: border-color .16s, background .16s;
}
.lvl-scelte label:hover { border-color: var(--accent); background: var(--accent-soft); }
.lvl-scelte label img { width: 26px; height: 26px; flex: none; }
.lvl-scelte input { margin: 0; }

/* nei titoloni (profilo mio, profilo del professionista, scheda del docente) il bollino è più grande */
.page-head h1 .lvl, .profile-hero h1 .lvl, .prof-head h1 .lvl { width: 32px; height: 32px; margin-left: .3em; vertical-align: -.12em; }
.member-card h3 .lvl, .tutor-card h3 .lvl { width: 18px; height: 18px; }
@media (max-width: 560px) {
  .page-head h1 .lvl, .profile-hero h1 .lvl, .prof-head h1 .lvl { width: 26px; height: 26px; }
}

/* ---------- la cerimonia: il primo accesso dopo un livello nuovo (25b) ---------- */
body.cer-open { overflow: hidden; }

.cer {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 18px 48px; gap: 26px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 18%, #2a2438 0%, #121218 42%, #08080c 100%);
  color: #fff; opacity: 0; transition: opacity .5s ease;
}
.cer.is-in { opacity: 1; }
.cer.is-out { opacity: 0; transition: opacity .4s ease; }
.cer.tone-gold    { background: radial-gradient(ellipse at 50% 18%, #3a2e12 0%, #16130c 42%, #08080c 100%); }
.cer.tone-silver  { background: radial-gradient(ellipse at 50% 18%, #2e3038 0%, #131418 42%, #08080c 100%); }
.cer.tone-dark    { background: radial-gradient(ellipse at 50% 18%, #26262e 0%, #111114 42%, #060608 100%); }
.cer.tone-diamond { background: radial-gradient(ellipse at 50% 18%, #0f2c48 0%, #0b141f 42%, #06080c 100%); }

.cer-coriandoli { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* il fascio di luce dietro al bollino */
.cer-luce {
  position: absolute; top: -10vh; left: 0; right: 0; width: auto; height: 70vh;
  background: radial-gradient(closest-side, rgba(255,214,102,.28), rgba(255,214,102,.08) 45%, transparent 72%);
  opacity: 0; transition: opacity 1.2s ease .2s; pointer-events: none;
}
.cer.tone-diamond .cer-luce { background: radial-gradient(closest-side, rgba(79,179,255,.30), rgba(79,179,255,.08) 45%, transparent 72%); }
.cer.tone-silver .cer-luce  { background: radial-gradient(closest-side, rgba(220,224,232,.24), rgba(220,224,232,.06) 45%, transparent 72%); }
.cer.is-badge .cer-luce { opacity: 1; }

.cer-scena { position: relative; z-index: 2; text-align: center; max-width: 560px; }

.cer-badge-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto 18px; }
.cer-badge {
  position: relative; z-index: 2; width: 180px; height: 180px; display: block;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6));
  opacity: 0; transform: translateY(-90px) scale(.4) rotate(-18deg);
}
.cer.is-badge .cer-badge { animation: cer-drop 1.1s cubic-bezier(.2,1.2,.3,1) forwards, cer-float 5s ease-in-out 1.2s infinite; }
@keyframes cer-drop {
  0%   { opacity: 0; transform: translateY(-90px) scale(.4) rotate(-18deg); }
  55%  { opacity: 1; transform: translateY(8px) scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes cer-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.cer-anello {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  border: 2px solid rgba(255,214,102,.65); opacity: 0;
}
.cer.tone-diamond .cer-anello { border-color: rgba(120,200,255,.7); }
.cer.tone-silver .cer-anello  { border-color: rgba(225,228,236,.7); }
.cer.is-badge .cer-anello   { animation: cer-ring 2.4s ease-out .5s infinite; }
.cer.is-badge .cer-anello-2 { animation: cer-ring 2.4s ease-out 1.3s infinite; }
@keyframes cer-ring {
  0%   { opacity: .8; transform: scale(.9); }
  100% { opacity: 0;  transform: scale(2.1); }
}

.cer-eyebrow, .cer-tit, .cer-sub { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s var(--ease); }
.cer.is-testo .cer-eyebrow { opacity: 1; transform: none; }
.cer.is-testo .cer-tit     { opacity: 1; transform: none; transition-delay: .12s; }
.cer.is-testo .cer-sub     { opacity: 1; transform: none; transition-delay: .26s; }
.cer-eyebrow {
  margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,214,102,.9);
}
.cer.tone-diamond .cer-eyebrow { color: rgba(140,205,255,.95); }
.cer.tone-silver .cer-eyebrow  { color: rgba(228,230,236,.9); }
.cer-tit {
  margin: 0; font-size: clamp(44px, 9vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff 30%, #ffd978 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cer.tone-diamond .cer-tit { background-image: linear-gradient(180deg, #fff 30%, #7fc8ff 100%); }
.cer.tone-silver .cer-tit  { background-image: linear-gradient(180deg, #fff 30%, #c9ccd4 100%); }
.cer-sub { margin: 10px 0 0; font-size: 16px; color: rgba(255,255,255,.72); }

/* la lettera */
.cer-lettera {
  position: relative; z-index: 2; width: min(560px, 100%);
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 22px 26px 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s var(--ease);
}
.cer.is-lettera .cer-lettera { opacity: 1; transform: none; }
.cer-lettera-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.cer-lettera-testa .brand-logo { height: 26px; width: auto; }
.cer-lettera-testa time { font-size: 13px; color: var(--muted); }
.cer-lettera-corpo p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.cer-lettera-corpo p:first-child { font-size: 17px; color: var(--ink); }
.cer-firma { margin: 4px 0 0; font-size: 14px; color: var(--muted); font-style: italic; }
.cer-azioni { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.cer-azioni .linkish { color: var(--accent-dark); font-size: 14px; text-decoration: underline; }

@media (max-width: 560px) {
  .cer { padding: 28px 14px 36px; gap: 18px; }
  .cer-badge-wrap, .cer-badge { width: 140px; height: 140px; }
  .cer-lettera { padding: 18px 18px 18px; border-radius: 18px; }
  .cer-lettera-corpo p { font-size: 15px; }
  .cer-azioni .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cer, .cer-badge, .cer-anello, .cer-eyebrow, .cer-tit, .cer-sub, .cer-lettera { animation: none !important; transition: none !important; opacity: 1; transform: none; }
  .cer-badge { opacity: 1; transform: none; }
}

/* ---------- lo scorrimento bloccato, senza che la pagina salti di lato (25b) ----------
   Ogni finestra che si apre nasconde la barra di scorrimento: senza questo, tutta la
   pagina scivolava di una quindicina di pixel a ogni apertura e a ogni chiusura. */
html { scrollbar-gutter: stable; }
body.pm-lock { overflow: hidden; }

/* ============================================================
   BLOCCO 26 — il video di Bunny dove uno lo cerca,
               la mappa che capisce se vuoi scorrere o ingrandire,
               la ricerca dentro ai propri corsi
   ============================================================ */

/* ---------- il riquadro del video (scheda del corso e lezione) ---------- */
.video-box label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; margin-bottom: 12px; }
.video-box input[type="text"] {
  width: 100%; font: inherit; font-size: 15px; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px;
}
.video-box {
  border: 1.5px dashed #d6d6de; border-radius: var(--radius-sm);
  padding: 16px 18px 14px; margin: 6px 0 4px; background: var(--surface-2);
}
.video-box h4 { margin: 0 0 4px; font-size: 16px; }
.video-box p { margin: 0 0 10px; }
.video-box .code { font-size: 12.5px; }
.video-main { margin-bottom: 10px; }
.video-main span { font-weight: 500; }
.video-main input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  background: #fff;
}
.video-main input:focus { background: #fff; }
.video-ok {
  margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ok);
  background: var(--ok-soft); border-radius: 10px; padding: 8px 12px;
}
.video-ok a { color: inherit; text-decoration: underline; }
.video-todo {
  margin: 0; font-size: 13.5px; color: var(--warn);
  background: var(--warn-soft); border-radius: 10px; padding: 8px 12px;
}
.video-more { margin-top: 10px; }
.video-more summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
.video-more summary:hover { color: var(--ink); }
.video-more label { margin-top: 8px; }

/* riga di aiuto sopra alla struttura del corso */
.hintline {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--accent-soft); color: var(--ink-2);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.45;
}
.hintline .ico { flex: none; color: var(--accent-dark); margin-top: 1px; }

/* aggiungi lezione: due righe, con il link del video */
.add-lesson-26 { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.add-lesson-26 .al-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-lesson-26 .al-row > input[type="text"] { flex: 1 1 240px; min-width: 0; }
.add-lesson-26 .al-row > select { flex: 0 0 auto; width: auto; }
/* sopra al grigio del modulo gli sfondi chiari sparivano: qui i campi sono bianchi */
.add-lesson-26 .al-row > input[type="text"],
.add-lesson-26 .al-row > select {
  background-color: #fff; border: 1px solid var(--line); padding: 10px 13px; font-size: 14.5px;
}
.add-lesson-26 input[name="bunny_video_id"] { font-size: 13.5px; }
@media (max-width: 640px) {
  .add-lesson-26 .al-row { flex-direction: column; align-items: stretch; }
  /* in colonna il "flex: 1 1 240px" diventerebbe altezza: i campi restano normali */
  .add-lesson-26 .al-row > input[type="text"],
  .add-lesson-26 .al-row > select { flex: none; width: 100%; }
  .add-lesson-26 .al-row > .btn { width: 100%; }
}

/* ---------- la mappa: il cartellino che spiega come si ingrandisce ---------- */
.map-hint {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  border-radius: inherit; pointer-events: none;
  background: rgba(11, 11, 15, .42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.map-hint.is-on { opacity: 1; visibility: visible; }
.map-hint span {
  background: rgba(255, 255, 255, .96); color: var(--ink);
  padding: 12px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 500;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .55); max-width: min(420px, 82%); text-align: center; line-height: 1.35;
}
@media (max-width: 720px) {
  .map-hint span { font-size: 13.5px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-hint { transition: none; }
}

/* ============================================================
   BLOCCO 27 — liquid glass: il vetro che scivola sotto la voce
               scelta, le superfici traslucide, le pagine che entrano
               con calma. Cambia il vestito, non la struttura.
   ============================================================ */

:root {
  --glass:        rgba(255, 255, 255, .64);
  --glass-strong: rgba(255, 255, 255, .8);
  --glass-line:   rgba(255, 255, 255, .72);
  --glass-edge:   inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(11, 11, 15, .04);
  --spring:       cubic-bezier(.34, 1.4, .42, 1);      /* rimbalzo morbido, alla Apple */
  --out:          cubic-bezier(.16, 1, .3, 1);         /* decelerazione lunga */
}
@media (prefers-reduced-motion: reduce) {
  :root { --spring: ease-out; --out: ease-out; }
}

/* ============================================================
   1. Il vetro che scivola: menu a sinistra
   ============================================================ */
.sidenav { position: relative; isolation: isolate; }
.sidenav > a, .sidenav .subnav, .sidenav .subnav-toggle, .sidenav .subnav-items a, .sidenav .sidenav-sep, .sidenav .soon { position: relative; z-index: 1; }

/* la pillola rossa della voce scelta: una sola, si sposta */
.nav-glass, .nav-hover {
  position: absolute; left: 0; top: 0; width: 100%; height: 44px; border-radius: 14px; z-index: 0;
  pointer-events: none; opacity: 0;
  transform: translate3d(0, var(--y, 0px), 0);
  will-change: transform;
}
.nav-glass {
  background: linear-gradient(135deg, #ff2a5c 0%, var(--accent) 45%, #ff4a78 100%);
  box-shadow: 0 12px 28px -10px rgba(255, 24, 78, .8), inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .12);
  transition: transform .55s var(--spring), height .28s var(--out), opacity .25s var(--out), width .28s var(--out);
}
.nav-glass::after {
  /* il riflesso del vetro, che si muove piano */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .16) 100%);
  background-size: 220% 100%; animation: glass-sheen 6s ease-in-out infinite;
}
@keyframes glass-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.nav-hover {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .42s var(--spring), height .25s var(--out), opacity .2s, width .25s var(--out);
}
.sidenav.is-glassed .nav-glass.is-on, .sidenav.is-glassed .nav-hover.is-on { opacity: 1; }
/* finché il JS non ha misurato, la pillola non si muove: appare già al suo posto */
.sidenav.is-glassed .nav-glass.no-anim, .sidenav.is-glassed .nav-hover.no-anim { transition: none; }

/* con il vetro acceso, la voce attiva non ha più il suo sfondo: glielo dà la pillola */
.sidenav.is-glassed a.active { background: transparent; box-shadow: none; animation: none; }
.sidenav.is-glassed a:hover { background: transparent; transform: none; }
.sidenav.is-glassed .subnav-items a.active { box-shadow: none; }
.sidenav.is-glassed a.active .nav-badge { background: #fff; color: var(--accent); }
.sidenav a, .sidenav .subnav-toggle { transition: color .2s var(--out); }
.sidenav a.active, .sidenav a:hover { color: #fff; }
/* quando si clicca, la pillola parte subito e la voce vecchia si spegne */
.sidenav.is-glassed a.is-leaving { color: #b9b9c4; }
.sidenav.is-glassed a.is-going { color: #fff; }

/* ============================================================
   2. Il vetro che scivola: linguette e selettori
   ============================================================ */
.is-glassed { position: relative; isolation: isolate; }
.seg-glass, .seg-hover {
  position: absolute; top: 0; left: 0; height: 0; width: 0; border-radius: 999px; z-index: 0;
  pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  will-change: transform, width;
}
.seg-glass {
  background: var(--ink);
  box-shadow: 0 8px 22px -10px rgba(11, 11, 15, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .5s var(--spring), width .36s var(--out), height .3s var(--out), opacity .2s;
}
.seg-hover {
  background: rgba(11, 11, 15, .06);
  transition: transform .4s var(--spring), width .3s var(--out), height .3s var(--out), opacity .18s;
}
.is-glassed .seg-glass.is-on, .is-glassed .seg-hover.is-on { opacity: 1; }
.is-glassed .seg-glass.no-anim, .is-glassed .seg-hover.no-anim { transition: none; }
.is-glassed > *:not(.seg-glass):not(.seg-hover):not(.nav-glass):not(.nav-hover) { position: relative; z-index: 1; }

/* --- le schede dello studente (Corsi · Continua · …) diventano un selettore di vetro --- */
.scroll-tabs {
  display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; border-bottom: 0;
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), 0 14px 34px -22px rgba(11, 11, 15, .35);
  max-width: 100%;
}
.stab {
  padding: 10px 18px; border-bottom: 0; margin-bottom: 0; border-radius: 999px; font-size: 15px;
  transition: color .22s var(--out);
}
.stab.active { border-bottom-color: transparent; color: #fff; }
.scroll-tabs.is-glassed .stab.active b { background: #fff; color: var(--ink); }
.scroll-tabs:not(.is-glassed) .stab.active { background: var(--ink); }
.scroll-tabs .seg-glass { background: var(--ink); }

/* --- le linguette classiche (.tabs) e Schede/Calendario dei webinar --- */
.tabs.is-glassed .tab.active, .wv-switch.is-glassed .wv-tab.active { background: transparent; color: #fff; }
.tabs.is-glassed .tab::after { display: none; }
.tabs, .wv-switch {
  background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), 0 14px 34px -22px rgba(11, 11, 15, .35);
}
.tab, .wv-tab { transition: color .22s var(--out); }
.tabs.is-glassed .tab:hover, .wv-switch.is-glassed .wv-tab:hover { background: transparent; }

/* --- i selettori a segmenti (livello del corso, stato) --- */
.seg.is-glassed .seg-opt input:checked + span { background: transparent; color: #fff; box-shadow: none; }
.seg.is-glassed .seg-opt span { transition: color .22s var(--out); }
.seg .seg-glass { border-radius: 999px; }

/* --- il vetro non deve coprire il testo mentre la pagina si carica --- */
.is-glassed .seg-glass, .is-glassed .seg-hover { z-index: 0; }

/* ============================================================
   3. Superfici di vetro
   ============================================================ */
/* la barra in alto del sito pubblico */
.topbar-public .wrap {
  background: var(--glass); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), 0 18px 40px -26px rgba(11, 11, 15, .45);
  transition: box-shadow .3s var(--out), background .3s;
}
body.is-scrolled .topbar-public .wrap { background: var(--glass-strong); box-shadow: var(--glass-edge), 0 22px 44px -22px rgba(11, 11, 15, .5); }
.topbar-public .topnav a:not(.btn) { position: relative; padding: 8px 12px; border-radius: 999px; transition: color .2s var(--out), background .2s var(--out); }
.topbar-public .topnav a:not(.btn):hover { background: rgba(11, 11, 15, .05); }
.topbar-public .topnav a:not(.btn).active { background: rgba(255, 24, 78, .08); }

/* la barra del telefono e la barra in basso */
.mobilebar {
  background: var(--glass); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
.tabbar {
  background: rgba(11, 11, 15, .82); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* il menu a sinistra: bordo di vetro e riflesso sull'angolo */
.sidebar {
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(11, 11, 15, .6);
  background: linear-gradient(160deg, #101016 0%, var(--ink) 40%, #0a0a0e 100%);
}
.sidebar-foot { border-top-color: rgba(255, 255, 255, .07); }
.sidebar-foot .me { transition: background .2s var(--out), transform .2s var(--out); }
.sidebar-foot .me:hover { background: rgba(255, 255, 255, .07); }

/* le schede: filo di luce in alto, ombra morbida */
.card {
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: var(--glass-edge), 0 18px 40px -28px rgba(11, 11, 15, .22);
}
.card.dash-tile-dark, .card.tone-live, .card.is-dark { border-color: rgba(255, 255, 255, .06); }

/* pulsanti: il vetro sopra al rosso e al nero */
.btn { position: relative; overflow: hidden; transition: transform .18s var(--spring), background .2s, box-shadow .22s var(--out), border-color .2s, color .2s; }
.btn-primary, .btn-dark {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 10px 24px -12px rgba(11, 11, 15, .5);
}
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(0, 0, 0, .1), 0 12px 26px -12px rgba(255, 24, 78, .6); }
.btn:active { transform: scale(.965); transition-duration: .08s; }
.btn-ghost {
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: rgba(11, 11, 15, .08);
}
.btn-ghost:hover { background: var(--glass-strong); }
/* l'onda al clic (la mette il JS) */
.stab, .tab, .wv-tab, .quick, .tabbar a { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .5;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
  animation: ripple .55s var(--out) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* campi: il fuoco è un alone di vetro */
.form input:focus, .form select:focus, .form textarea:focus, .dir-search input:focus, .lc-search input:focus {
  box-shadow: 0 0 0 4px rgba(255, 24, 78, .12), 0 8px 24px -12px rgba(255, 24, 78, .35) !important;
}
.dir-search input, .lc-search input { transition: box-shadow .22s var(--out), border-color .2s; }

/* finestre: entrano con una molla, il fondo è vetro scuro */
.modal-back, .lc-modal { backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); }
.modal-box { transform: translateY(18px) scale(.96); transition: transform .5s var(--spring); }
.modal-back.is-open .modal-box { transform: none; }
.modal-box, .lc-modal-card, .auth-card { border: 1px solid rgba(255, 255, 255, .08); }
.lc-modal-card, .auth-card { border-color: rgba(255, 255, 255, .7); }

/* menu a tendina, risultati della ricerca, cartellini */
.lc-results, .tb-drop, .picker-drop, .dropdown, .lc-tip {
  background: var(--glass-strong); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), 0 24px 50px -26px rgba(11, 11, 15, .45);
}
.map-hint span { background: var(--glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-line); }

/* le scorciatoie, i riquadri delle statistiche */
.quick, .stat { transition: transform .26s var(--spring), box-shadow .26s var(--out), background .2s; }
.quick:hover, a.stat:hover { transform: translateY(-3px) scale(1.01); }
.c-card, .wv-card, .member-card, .tutor-card, .group-card, .r-card, .p-card { transition: transform .32s var(--spring), box-shadow .3s var(--out), border-color .3s; }
.c-card:hover, .wv-card:hover, .member-card:hover, .tutor-card:hover, .group-card:hover, .r-card:hover, .p-card:hover { transform: translateY(-5px) scale(1.012); }
.c-card:active, .wv-card:active, .p-card:active, .quick:active, a.stat:active { transform: scale(.985); transition-duration: .1s; }

/* i pallini di notifica arrivano con un rimbalzo */
.nav-badge, .bell-n { animation: badge-pop .55s var(--spring); }

/* ============================================================
   4. Le pagine entrano con calma
   ============================================================ */
.page-enter { animation: page-in .6s var(--out) backwards; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-head { animation: head-in .7s var(--out) backwards; }
@keyframes head-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.stats .stat, .stat-row .stat { animation: rise .65s var(--out) backwards; }
.stats .stat:nth-child(1), .stat-row .stat:nth-child(1) { animation-delay: .05s; }
.stats .stat:nth-child(2), .stat-row .stat:nth-child(2) { animation-delay: .11s; }
.stats .stat:nth-child(3), .stat-row .stat:nth-child(3) { animation-delay: .17s; }
.stats .stat:nth-child(4), .stat-row .stat:nth-child(4) { animation-delay: .23s; }
.stats .stat:nth-child(5), .stat-row .stat:nth-child(5) { animation-delay: .29s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .6s var(--out), transform .6s var(--spring); }
.reveal.is-in { opacity: 1; transform: none; }
.scroll-tabs, .wv-bar, .dir-filters { animation: rise .6s var(--out) .12s backwards; }
.hello { animation: head-in .7s var(--out) backwards; }
.hello-date { animation: rise .7s var(--out) .15s backwards; }

/* le linguette che cambiano contenuto: il pannello nuovo scivola dentro */
.wv-view.is-shown { animation: pane-in .45s var(--out) backwards; }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }

/* il cambio pagina: quando si clicca un link del menu la pagina vecchia sfuma */
body.is-leaving .content { opacity: 0; transform: translateY(-6px); transition: opacity .22s var(--out), transform .22s var(--out); }

/* ============================================================
   5. Local Coordinators: la mappa arriva, i punti si accendono
   ============================================================ */
.lc-hero .eyebrow, .lc-hero h1, .lc-hero .lede { animation: lc-up .8s var(--out) backwards; }
.lc-hero h1 { animation-delay: .08s; }
.lc-hero .lede { animation-delay: .18s; }
@keyframes lc-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lc-map-wrap { animation: lc-map-in 1s var(--out) .22s backwards; }
@keyframes lc-map-in { from { opacity: 0; transform: translateY(26px) scale(.975); } to { opacity: 1; transform: none; } }
.lc-search { animation: lc-drop .7s var(--spring) .55s backwards; }
@keyframes lc-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.lc-land { animation: lc-land 1.4s var(--out) .35s backwards; }
@keyframes lc-land { from { opacity: .2; } to { opacity: 1; } }
/* i punti: nascono uno dopo l'altro (l'ordine lo scrive il JS in --i) */
.lc-pt .lc-pt-in {
  transform-box: fill-box; transform-origin: center;
  animation: lc-pop .7s var(--spring) backwards; animation-delay: calc(.75s + var(--i, 0) * 110ms);
}
@keyframes lc-pop { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.mapzoom-ctl { animation: lc-drop .6s var(--spring) .8s backwards; }
.mapzoom-ctl button { transition: background .2s var(--out), color .2s, transform .2s var(--spring); }
.mapzoom-ctl button:hover { transform: scale(1.06); }
.lc-places-head, .lc-country { animation: lc-up .8s var(--out) backwards; }
.lc-country:nth-child(2) { animation-delay: .06s; } .lc-country:nth-child(3) { animation-delay: .12s; } .lc-country:nth-child(4) { animation-delay: .18s; }
.lc-country:nth-child(5) { animation-delay: .24s; } .lc-country:nth-child(6) { animation-delay: .3s; }
.lc-map-wrap .mapzoom-ctl button, .lc-search input {
  background: var(--glass-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-edge), 0 12px 30px -18px rgba(11, 11, 15, .4);
}
.lc-map { transition: box-shadow .4s var(--out); }
.lc-map.is-zoomed { box-shadow: 0 30px 70px -30px rgba(255, 24, 78, .25), 0 18px 50px rgba(0, 0, 0, .06); }

/* ============================================================
   6. Login: il pannello scuro respira, la scheda arriva
   ============================================================ */
.auth-side { animation: auth-side 1s var(--out) backwards; }
@keyframes auth-side { from { opacity: 0; transform: translateX(-20px) scale(.985); } to { opacity: 1; transform: none; } }
.auth-split .auth-card { animation: auth-card .9s var(--spring) .18s backwards; }
@keyframes auth-card { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.auth-side .brand-logo, .auth-side h2, .auth-side p, .auth-side .eyebrow { animation: lc-up .9s var(--out) backwards; }
.auth-side h2 { animation-delay: .25s; } .auth-side p { animation-delay: .35s; } .auth-side .brand-logo { animation-delay: .15s; }

/* ============================================================
   7. Piccole cose
   ============================================================ */
html { scroll-behavior: smooth; }
::selection { background: rgba(255, 24, 78, .85); color: #fff; }
.avatar { transition: transform .3s var(--spring); }
.rowlist-item:hover .avatar, .member-card:hover .avatar, .sidebar-foot .me:hover .avatar { transform: scale(1.06); }
.chip { transition: transform .22s var(--spring), background .2s, color .2s, box-shadow .22s var(--out); }
.chip:hover { transform: translateY(-2px); }
.chip:active { transform: scale(.96); }
.subnav-items { transition: grid-template-rows .42s var(--spring); }
.subnav-toggle .chev { transition: transform .4s var(--spring); }
.icon-btn { transition: background .2s var(--out), transform .2s var(--spring); }
.icon-btn:active { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  .page-enter, .page-head, .stats .stat, .stat-row .stat, .scroll-tabs, .wv-bar, .dir-filters, .hello, .hello-date,
  .lc-hero *, .lc-map-wrap, .lc-search, .lc-land, .lc-pt .lc-pt-in, .mapzoom-ctl, .lc-places-head, .lc-country,
  .auth-side, .auth-split .auth-card, .auth-side * { animation: none !important; }
  .nav-glass::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BLOCCO 28 — il carattere Jost servito dal nostro server.
   Prima arrivava da fonts.googleapis.com: ogni visitatore mandava
   il suo indirizzo IP a Google. Così non succede più, e la pagina
   si apre un po' prima perché non deve andare a chiedere fuori.
   Jost è di Owen Earl, licenza SIL Open Font 1.1.
   ============================================================ */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jost-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jost-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/jost-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- la pagina «non trovato» ---------- */
.oops { max-width: 620px; margin: 6vh auto 0; text-align: center; }
.oops h1 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 12px; }
.oops p { font-size: 17px; color: var(--ink-2); margin: 0 auto 26px; max-width: 46ch; }
.oops p.oops-code {
  font-size: clamp(90px, 18vw, 160px); font-weight: 600; line-height: .9; letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--ink) 15%, var(--accent) 115%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  margin: 0 0 6px; max-width: none;
}
.oops .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- pagine di solo testo (privacy, termini) ---------- */
.prose { max-width: 78ch; }
.prose h2 { font-size: 21px; margin: 32px 0 10px; }
.prose h3 { font-size: 17px; margin: 22px 0 6px; }
.prose p, .prose li { line-height: 1.65; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 22px; margin: 10px 0 16px; }
.prose li { margin-bottom: 6px; }
.prose .updated { font-size: 13.5px; color: var(--muted); margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line); }
.foot-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   BLOCCO 30 — vola come olio: il cambio pagina senza lampo
               (View Transitions), l'ingresso animato solo la prima
               volta, e il liquid glass vero: colore dietro al vetro,
               profili e schede traslucide, riflesso che scivola.
   ============================================================ */

/* ============================================================
   1. Il cambio pagina: la pagina nuova sfuma sopra alla vecchia
      senza il lampo bianco e senza pezzi che si spostano.
   ============================================================ */
@view-transition { navigation: auto; }

/* solo la dissolvenza dell'intera pagina: la foto della pagina vecchia sfuma in quella nuova,
   nella stessa posizione in cui la stavi guardando. Niente pezzi che scivolano o si ridimensionano
   (il menu è identico nelle due foto, quindi resta fermo da solo). */
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root) { animation: none; opacity: 1; mix-blend-mode: normal; }   /* la vecchia resta piena sotto */
::view-transition-new(root) { animation: vt-arriva .2s ease-out both; mix-blend-mode: normal; }   /* la nuova sfuma sopra: mai un attimo grigio */
@keyframes vt-arriva { from { opacity: 0; } to { opacity: 1; } }

/* dove il browser sa fare la transizione, la vecchia dissolvenza al clic non serve più:
   se restasse, la foto della pagina vecchia verrebbe scattata già sbiadita */
@supports selector(:active-view-transition) {
  body.is-leaving .content { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   2. L'ingresso animato: solo la prima pagina. Da lì in poi le
      pagine cambiano e basta (il segnalino lo mette header.php).
   ============================================================ */
html.is-warm .page-enter, html.is-warm .page-head, html.is-warm .stats .stat, html.is-warm .stat-row .stat,
html.is-warm .scroll-tabs, html.is-warm .wv-bar, html.is-warm .dir-filters, html.is-warm .hello, html.is-warm .hello-date,
html.is-warm .auth-side, html.is-warm .auth-card {
  animation: none !important;
}
html.is-warm .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.is-warm .nav-badge, html.is-warm .bell-n { animation: none; }

/* ============================================================
   3. Liquid glass: il colore dietro al vetro
   ============================================================ */
body.layout-app, body.layout-admin { isolation: isolate; }
body.layout-app::before, body.layout-admin::before {
  content: ""; position: fixed; inset: -20vh -10vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52vw 40vh at 18% 8%,   rgba(255, 24, 78, .14), transparent 62%),
    radial-gradient(48vw 44vh at 96% 22%,  rgba(88, 140, 255, .16), transparent 62%),
    radial-gradient(44vw 38vh at 62% 98%,  rgba(255, 186, 74, .12), transparent 62%),
    radial-gradient(36vw 34vh at 40% 60%,  rgba(190, 140, 255, .10), transparent 62%);
  animation: ambiente 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ambiente {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3vw, 2vh, 0) scale(1.06); }
}

/* il menu a sinistra resta nero pieno, come sempre (nessun vetro qui) */

/* --- le schede: vetro vero, non più bianco pieno --- */
.layout-app .card, .layout-admin .card {
  position: relative;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(26px) saturate(175%); -webkit-backdrop-filter: blur(26px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(11, 11, 15, .035),
    inset 1px 0 0 rgba(255, 255, 255, .45),
    0 24px 60px -34px rgba(11, 11, 15, .3),
    0 2px 6px -2px rgba(11, 11, 15, .06);
  transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1), transform .35s cubic-bezier(.34, 1.4, .42, 1), background .3s;
}
/* il riflesso in alto a sinistra, come luce su un vetro bombato */
.layout-app .card::before, .layout-admin .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .18) 28%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(120% 60% at 100% 100%, rgba(255, 255, 255, .22), transparent 60%);
  opacity: .9;
}
/* una scheda con una tendina aperta deve passare sopra a quella dopo */
.layout-app .card:has(.tagbox-menu:not([hidden])), .layout-admin .card:has(.tagbox-menu:not([hidden])),
.layout-app .card:has(.lc-results:not([hidden])), .layout-app .card:has(details[open]), .layout-admin .card:has(details[open]),
.layout-app .card:has(.emoji-pick:not([hidden])), .layout-admin .card:has(.emoji-pick:not([hidden])) { z-index: 5; }
/* le schede scure restano scure, ma di vetro */
.layout-app .card.dash-tile-dark, .layout-app .card.tone-live, .layout-app .card.is-dark,
.layout-admin .card.dash-tile-dark, .layout-admin .card.tone-live, .layout-admin .card.is-dark {
  background: rgba(12, 12, 18, .82); border-color: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -30px rgba(11, 11, 15, .7);
}
.layout-app .card.dash-tile-dark::before, .layout-app .card.tone-live::before, .layout-app .card.is-dark::before,
.layout-admin .card.dash-tile-dark::before, .layout-admin .card.tone-live::before, .layout-admin .card.is-dark::before {
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 40%);
}
.layout-app .card-highlight, .layout-admin .card-highlight { border-color: rgba(255, 24, 78, .55); box-shadow: 0 0 0 4px rgba(255, 24, 78, .12), inset 0 1px 0 rgba(255, 255, 255, .95); }

/* le altre superfici chiare */
.layout-app .notice, .layout-admin .notice, .layout-app .flash, .layout-admin .flash,
.layout-app .empty, .layout-admin .empty {
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.layout-app .stat, .layout-admin .stat, .layout-app .quick, .layout-admin .quick, .layout-app .dash-tile:not(.dash-tile-dark), .layout-admin .dash-tile:not(.dash-tile-dark) {
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 18px 44px -28px rgba(11, 11, 15, .28);
}
.layout-app .member-card, .layout-app .tutor-card, .layout-app .group-card, .layout-app .r-card, .layout-app .wv-card, .layout-app .c-card,
.layout-admin .member-card, .layout-admin .tutor-card, .layout-admin .group-card, .layout-admin .r-card, .layout-admin .wv-card {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 50px -30px rgba(11, 11, 15, .3);
}
.layout-app .c-card { background: var(--surface); }   /* la scheda del corso ha la foto: resta piena */

/* pillole, etichette, bollini */
.layout-app .badge:not(.badge-dark):not(.badge-accent):not(.badge-live), .layout-admin .badge:not(.badge-dark):not(.badge-accent):not(.badge-live),
.layout-app .chip, .layout-admin .chip, .layout-app .pill, .layout-admin .pill,
.layout-app .profile-stats span, .layout-app .pstat, .layout-app .meta > span.at {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(11, 11, 15, .25);
}

/* ============================================================
   4. I profili: il vetro più bello sta qui
   ============================================================ */
.layout-app .profile-hero, .layout-app .page-head.profile-head, .layout-app .prof-hero, .layout-app .tutor-hero {
  position: relative; overflow: visible;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(34px) saturate(190%); -webkit-backdrop-filter: blur(34px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(11, 11, 15, .04),
    inset 1px 0 0 rgba(255, 255, 255, .6),
    0 30px 80px -40px rgba(11, 11, 15, .38),
    0 2px 8px -2px rgba(11, 11, 15, .06);
}
.layout-app .page-head.profile-head { padding: 24px 26px; margin-bottom: 26px; }
/* il riflesso che scivola quando il mouse passa sopra */
.layout-app .profile-hero::before, .layout-app .page-head.profile-head::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .25) 26%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(130% 70% at 100% 110%, rgba(255, 24, 78, .1), transparent 55%);
}
.layout-app .profile-hero::after, .layout-app .page-head.profile-head::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  background-size: 260% 100%; background-position: 130% 0; opacity: 0;
  transition: background-position 1.1s cubic-bezier(.16, 1, .3, 1), opacity .4s;
}
.layout-app .profile-hero:hover::after, .layout-app .page-head.profile-head:hover::after { background-position: -30% 0; opacity: 1; }
.layout-app .profile-hero.is-teacher {
  background: linear-gradient(135deg, rgba(255, 250, 225, .6), rgba(255, 255, 255, .5) 55%);
}

/* la foto: un anello di vetro con l'ombra che la stacca dal fondo */
.layout-app .profile-hero .avatar, .layout-app .profile-head .avatar {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 5px rgba(11, 11, 15, .06), 0 18px 40px -16px rgba(11, 11, 15, .45);
  transition: transform .4s cubic-bezier(.34, 1.4, .42, 1), box-shadow .4s;
}
.layout-app .profile-hero:hover .avatar, .layout-app .profile-head:hover .avatar { transform: scale(1.04) rotate(-1.5deg); }

/* i riconoscimenti e la scheda del livello */
.layout-app .award-card, .layout-admin .award-card {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 12px 30px -20px rgba(11, 11, 15, .3);
  transition: transform .3s cubic-bezier(.34, 1.4, .42, 1), box-shadow .3s;
}
.layout-app .award-card:hover { transform: translateY(-3px); }
.layout-app .mylvl-badge { filter: drop-shadow(0 14px 22px rgba(11, 11, 15, .25)); }

/* i bollini dei livelli sui profili prendono luce */
.layout-app .profile-hero .lvl img, .layout-app .profile-head .lvl img { filter: drop-shadow(0 4px 10px rgba(11, 11, 15, .25)); }

/* ============================================================
   5. Le finestre: vetro anche loro
   ============================================================ */
.layout-app .lvl-card, .layout-admin .lvl-card, .layout-app .modal-box, .layout-admin .modal-box, .layout-app .lc-modal-card {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .85);
}
.layout-app .lvl-row, .layout-admin .lvl-row { backdrop-filter: none; -webkit-backdrop-filter: none; }
.layout-app .cer-lettera { background: rgba(255, 255, 255, .92); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }

/* ============================================================
   6. Riguardi: telefono, chi non regge il vetro, chi non lo vuole
   ============================================================ */
@media (max-width: 760px) {
  body.layout-app::before, body.layout-admin::before { animation: none; }
  .layout-app .card, .layout-admin .card,
  .layout-app .member-card, .layout-app .tutor-card, .layout-app .group-card, .layout-app .r-card, .layout-app .wv-card,
  .layout-app .stat, .layout-admin .stat, .layout-app .quick, .layout-admin .quick {
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    background: rgba(255, 255, 255, .72);
  }
  .layout-app .profile-hero, .layout-app .page-head.profile-head {
    backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%);
    background: rgba(255, 255, 255, .64);
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .layout-app .card, .layout-admin .card, .layout-app .profile-hero, .layout-app .page-head.profile-head,
  .layout-app .member-card, .layout-app .tutor-card, .layout-app .group-card, .layout-app .r-card, .layout-app .wv-card,
  .layout-app .stat, .layout-admin .stat, .layout-app .quick, .layout-admin .quick, .layout-app .award-card,
  .layout-app .lvl-card, .layout-admin .lvl-card, .layout-app .modal-box, .layout-admin .modal-box { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .layout-app .card, .layout-admin .card, .layout-app .profile-hero, .layout-app .page-head.profile-head,
  .layout-app .member-card, .layout-app .tutor-card, .layout-app .group-card, .layout-app .r-card, .layout-app .wv-card,
  .layout-app .stat, .layout-admin .stat, .layout-app .quick, .layout-admin .quick, .layout-app .award-card {
    background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.layout-app::before, body.layout-admin::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.layout-app::before, body.layout-admin::before { animation: none; }
  ::view-transition-new(root) { animation-duration: .001s; }
}

/* anche le cose che entrano scorrendo (.rv): da caldi sono già al loro posto */
html.is-warm .rv { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   7. Mai bianco su bianco: dove il testo è bianco il fondo
      torna pieno e scuro (il vetro qui faceva sparire tutto).
   ============================================================ */

/* la targhetta della mappa: fondo nero pieno, come è sempre stata */
.lc-tip {
  background: var(--ink); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45);
}
.lc-tip::after { background: var(--ink); }
.lc-tip span  { color: #c9c9d2; }
.lc-tip small { color: #ffb3c4; }

/* i tasti + − e schermo intero della mappa: fermi bianchi, al passaggio rosa */
.lc-map-wrap .mapzoom-ctl button, .cmap-wrap .mapzoom-ctl button, .mapzoom-ctl button { color: var(--ink); }
.lc-map-wrap .mapzoom-ctl button:hover, .cmap-wrap .mapzoom-ctl button:hover, .mapzoom-ctl button:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* le scorciatoie del pannello: al passaggio tornano nere col testo bianco */
.layout-app .quick:hover, .layout-admin .quick:hover, .quick:hover {
  background: var(--ink); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--ink);
}
.layout-app .quick:hover .ico, .layout-admin .quick:hover .ico, .quick:hover .ico,
.layout-app .quick:hover svg, .layout-admin .quick:hover svg { color: #fff; }

/* i riquadri delle statistiche restano leggibili: il vetro non tocca il testo */
.layout-app a.stat:hover, .layout-admin a.stat:hover { color: inherit; }

/* i tasti del calendario webinar: nero pieno al passaggio */
.layout-app .wv-today:hover, .layout-app .wv-arrow:hover,
.layout-admin .wv-today:hover, .layout-admin .wv-arrow:hover {
  background: var(--ink); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ============================================================
   BLOCCO 31 — il diploma: lo stesso carattere del PDF anche a
               schermo, la cornice con i rombi, la pagina di verifica.
   ============================================================ */
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-600.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/cormorant-700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-500i.woff2") format("woff2"); }

/* l'anteprima a schermo dell'attestato: come il diploma stampato */
.cert-sheet { position: relative; border: 1.5px solid var(--ink); border-radius: 6px; box-shadow: 0 30px 70px -40px rgba(16, 16, 20, .55); }
.cert-sheet::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 3px; pointer-events: none;
}
.cert-sheet .cert-bar { display: none; }
.cert-sheet .cert-body { padding: 40px 36px 28px; }
.cert-sheet .cert-org { font-family: "Jost", sans-serif; font-weight: 500; color: var(--muted); letter-spacing: .28em; font-size: 11px; }
.cert-sheet .cert-heading { font-family: "Cormorant", Georgia, serif; font-weight: 600; letter-spacing: .18em; font-size: clamp(22px, 3.6vw, 34px); }
.cert-sheet .cert-rule { width: 10px; height: 10px; background: var(--accent); transform: rotate(45deg); margin: 16px auto 0; }
.cert-sheet .cert-small { font-family: "Cormorant", Georgia, serif; font-style: italic; font-weight: 500; font-size: 18px; color: var(--ink-2); }
.cert-sheet .cert-name {
  font-family: "Cormorant", Georgia, serif; font-weight: 700; font-size: clamp(30px, 5.4vw, 52px);
  display: inline-block; padding: 0 12px 4px; border-bottom: 1px solid var(--ink);
}
.cert-sheet .cert-title { font-weight: 600; }
.cert-sheet .cert-foot { padding: 20px 36px 26px; }
.cert-sheet .cert-foot strong { font-size: 15px; letter-spacing: .04em; }
.cert-hero.is-void .cert-sheet { border-color: var(--line); filter: grayscale(1); opacity: .75; }

/* la pagina di verifica */
.verify-page { max-width: 680px; }
.verify-head { margin-bottom: 14px; }
.verify-head .lede { max-width: 56ch; }
.verify-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.verify-row input { font-family: "Jost", sans-serif; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.verify-row input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
.verify-hint { margin: 10px 0 0; }
.verify-detail dd strong { font-family: "Jost", sans-serif; letter-spacing: .04em; }
.verify-detail .code { font-size: 14px; letter-spacing: .1em; color: var(--accent); background: transparent; padding: 0; }
.verify-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.verify-how { margin-top: 22px; padding: 0 4px; }
.verify-how p { margin: 0; }
.verify-result.is-ok .mark, .verify-result.is-ko .mark, .verify-result.is-void .mark { flex: none; }

/* l'etichetta del ruolo accanto al nome (registro utenti): alla stessa altezza, con o senza foto */
.person-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.person-row .person { flex: none; }
.person-row .badge { flex: none; }
.table .person, .table .person + .badge { vertical-align: middle; }

/* ============================================================
   Le superfici nate scure restano scure: il vetro del Blocco 30
   non deve schiarirle, sennò il testo bianco sparisce.
   ============================================================ */
.layout-app .scheda-publish, .layout-admin .scheda-publish,
.layout-app .card-dark, .layout-admin .card-dark {
  background: var(--ink); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px -30px rgba(11, 11, 15, .7);
}
.layout-app .scheda-publish::before, .layout-admin .scheda-publish::before,
.layout-app .card-dark::before, .layout-admin .card-dark::before {
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 40%);
}
.layout-app .scheda-publish h3, .layout-admin .scheda-publish h3 { color: #fff; }

/* le pillole scelte (categorie, filtri): nere col testo bianco, come sempre */
.layout-app .chip.active, .layout-admin .chip.active,
.layout-app .wv-chip.rec, .layout-admin .wv-chip.rec,
.layout-app [data-tags] .tag-chip, .layout-admin [data-tags] .tag-chip {
  background: var(--ink); color: #fff; border-color: var(--ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.layout-app .chip.active span, .layout-admin .chip.active span { color: #fff; }

/* i riquadri colorati delle statistiche: il primo resta nero */
.layout-app .stats:not(.stats-small) .stat:nth-child(5n+1), .layout-admin .stats:not(.stats-small) .stat:nth-child(5n+1),
.layout-app .stat-row .stat:nth-child(5n+1), .layout-admin .stat-row .stat:nth-child(5n+1) {
  background: var(--ink); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* la fila piccola ha il primo riquadro chiaro: lì il bollino «nuovo» deve restare scritto in rosa */
.stats-small .stat:nth-child(5n+1) { background: var(--surface); color: var(--ink); }
.stats-small .stat:nth-child(5n+1) .delta { background: rgba(11, 11, 15, .05); color: var(--accent-dark); }
.stats-small .stat:nth-child(5n+1) .lbl { color: var(--ink-2); }
/* la maniglia per trascinare: si deve vedere */
.sort-item .handle { color: #8e8e99; }

/* Se il codice della pagina non parte (file mancante, rete lenta) la pillola scura
   non viene disegnata: la linguetta scelta deve restare leggibile lo stesso. */
.scroll-tabs:not(.is-glassed) .stab.active,
.tabs:not(.is-glassed) .tab.active,
.wv-switch:not(.is-glassed) .wv-tab.active,
.seg:not(.is-glassed) .seg-opt input:checked + span {
  background: var(--ink); color: #fff; border-radius: 999px;
}

.layout-app .stats .stat:nth-child(5n+2), .layout-admin .stats .stat:nth-child(5n+2) { background: var(--tint-lilac); }
.layout-app .stats .stat:nth-child(5n+3), .layout-admin .stats .stat:nth-child(5n+3) { background: var(--tint-mint); }
.layout-app .stats .stat:nth-child(5n+4), .layout-admin .stats .stat:nth-child(5n+4) { background: var(--tint-sand); }
.layout-app .stats .stat:nth-child(5n+5), .layout-admin .stats .stat:nth-child(5n+5) { background: var(--tint-sky); }


/* ============================================================
   Il registro degli attestati (verifica.php): istituzionale,
   nero e oro come il diploma, la scheda dell'attestato in mezzo.
   ============================================================ */
.vf { max-width: 860px; margin: 0 auto; }
.vf-hero {
  position: relative; overflow: hidden; color: #fff;
  background: #0f0f14; border-radius: 28px; padding: 40px 40px 56px;
  box-shadow: 0 30px 70px -40px rgba(11, 11, 15, .8);
}
.vf-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-radial-gradient(circle at 105% 120%, transparent 0 34px, rgba(184, 150, 79, .14) 34px 35px, transparent 35px 44px);
}
.vf-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #b8964f, #d9c28a 50%, #b8964f); }
.vf-hero-in { position: relative; display: flex; gap: 28px; align-items: center; justify-content: space-between; }
.vf-eyebrow { margin: 0 0 10px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #d9c28a; font-weight: 500; }
.vf-hero h1 { margin: 0 0 12px; font-family: "Cormorant", Georgia, serif; font-weight: 700; font-size: clamp(30px, 5vw, 44px); line-height: 1.05; letter-spacing: .01em; }
.vf-lede { margin: 0; max-width: 54ch; color: #c9c9d2; font-size: 15px; line-height: 1.6; }
.vf-seal { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vf-seal-ring {
  width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #b8964f; box-shadow: inset 0 0 0 5px #0f0f14, inset 0 0 0 6px rgba(184, 150, 79, .45);
  background: #fff;
}
.vf-seal small { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #d9c28a; }

.vf-form {
  position: relative; margin: -30px 24px 0; padding: 22px 24px 18px;
  background: #fff; border-radius: 20px; border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(11, 11, 15, .45);
}
.vf-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.vf-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vf-row input {
  flex: 1 1 260px; min-width: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line);
  font: inherit; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
.vf-row input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; }
.vf-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.vf-hint { margin: 10px 0 0; color: var(--muted); font-size: 13px; }

.vf-cert {
  position: relative; margin: 26px 0 0; background: #fff; border-radius: 24px; border: 1px solid var(--line);
  box-shadow: 0 30px 70px -44px rgba(11, 11, 15, .55); overflow: hidden;
}
.vf-cert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #b8964f, #d9c28a); }
.vf-cert.is-ko::before { background: var(--err); }
.vf-cert.is-void::before { background: var(--warn, #b8860b); }
.vf-status {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 28px 16px 30px; font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--line);
}
.vf-status small { flex-basis: 100%; padding-left: 40px; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.vf-mark {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; font-size: 15px; background: var(--ok);
}
.is-ko .vf-mark { background: var(--err); }
.is-void .vf-mark { background: var(--warn, #b8860b); }
.vf-body { padding: 30px 30px 8px; }
.vf-tipo { margin: 0 0 22px; font-size: 12px; letter-spacing: .22em; color: #b8964f; font-weight: 600; }
.vf-si { margin: 0; font-family: "Cormorant", Georgia, serif; font-style: italic; font-weight: 500; font-size: 19px; color: var(--ink-2); }
.vf-nome { margin: 6px 0 14px; font-family: "Cormorant", Georgia, serif; font-weight: 700; font-size: clamp(32px, 5.6vw, 48px); line-height: 1.05; letter-spacing: .005em; }
.vf-titolo { margin: 6px 0 0; font-weight: 600; font-size: 20px; line-height: 1.3; }
.vf-fatti {
  margin: 26px 0 0; padding: 20px 0 22px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 24px;
}
.vf-fatti > div { display: flex; flex-direction: column; gap: 4px; }
.vf-fatti dt { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #b8964f; font-weight: 500; }
.vf-fatti dd { margin: 0; font-size: 15px; font-weight: 500; }
.vf-fatti dd.mono { letter-spacing: .06em; }
.vf-fatti dd.accent { color: var(--accent); }
.vf-note { margin: 0; padding: 16px 30px 22px; color: var(--muted); font-size: 13.5px; line-height: 1.55; border-top: 1px solid var(--line); }
.vf-cert.is-ko .vf-note { border-top: 0; padding-top: 4px; }
.vf-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 8px 10px; }
.vf-how strong { display: block; margin-bottom: 4px; font-size: 14px; }
.vf-how p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 760px) {
  .vf-hero { padding: 28px 22px 46px; border-radius: 22px; }
  .vf-hero-in { flex-direction: column; align-items: flex-start; }
  .vf-seal { flex-direction: row; gap: 14px; }
  .vf-seal-ring { width: 84px; height: 84px; }
  .vf-seal-ring img { width: 48px; height: 48px; }
  .vf-form { margin: -26px 12px 0; padding: 18px 16px 14px; }
  .vf-body { padding: 22px 20px 4px; }
  .vf-status { padding: 16px 20px 14px 22px; }
  .vf-status small { padding-left: 0; }
  .vf-note { padding: 14px 20px 20px; }
  .vf-how { grid-template-columns: 1fr; }
}


/* l'anteprima a schermo dell'attestato: come il diploma nuovo (nero, oro, bianco) */
.cert-sheet { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.cert-sheet::before { display: none; }
.cert-sheet .cert-body { position: relative; padding: 36px 36px 10px 42px; text-align: left; }
.cert-sheet .cert-body::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #b8964f, #d9c28a); }
.cert-sheet .cert-org { font-family: "Jost", sans-serif; font-weight: 500; color: var(--muted); letter-spacing: .26em; font-size: 10.5px; margin-bottom: 26px; }
.cert-sheet .cert-heading { font-family: "Jost", sans-serif; font-weight: 600; letter-spacing: .22em; font-size: clamp(14px, 2.2vw, 19px); color: var(--ink); }
.cert-sheet .cert-rule { width: 26px; height: 3px; background: #b8964f; transform: none; margin: 12px 0 0; border-radius: 2px; }
.cert-sheet .cert-small { font-family: "Cormorant", Georgia, serif; font-style: italic; font-weight: 500; font-size: 19px; color: var(--ink-2); margin-top: 26px; }
.cert-sheet .cert-name { font-family: "Cormorant", Georgia, serif; font-weight: 700; font-size: clamp(30px, 5.2vw, 50px); display: block; padding: 0; border: 0; margin-top: 4px; }
.cert-sheet .cert-title { font-weight: 600; font-size: clamp(17px, 2.4vw, 21px); margin-top: 6px; }
.cert-fatti {
  margin: 24px 0 0; padding: 18px 0 20px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 22px;
}
.cert-fatti > div { display: flex; flex-direction: column; gap: 3px; }
.cert-fatti dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #b8964f; font-weight: 500; }
.cert-fatti dd { margin: 0; font-size: 14.5px; font-weight: 500; }
.cert-sheet .cert-foot { padding: 18px 36px 24px 42px; background: #0f0f14; color: #fff; border-top: 0; }
.cert-sheet .cert-foot .k { color: #d9c28a; }
.cert-sheet .cert-foot strong { color: #fff; }
.cert-sheet .cert-foot .cert-code { color: #ff5f83; }
@media (max-width: 760px) {
  .cert-sheet .cert-body { padding: 26px 20px 6px 26px; }
  .cert-sheet .cert-foot { padding: 16px 20px 20px 26px; }
}

/* ============================================================
   BLOCCO 34 — la casa dell'Academy
     · la testata scura con la ricerca su tutto
     · le file che scorrono, i webinar in arrivo con la campanella
     · esplora per regione / paese / categoria
     · il benvenuto e il giro rifatti
   ============================================================ */

/* ---------- la testata ---------- */
.home-hero {
  position: relative; isolation: isolate; overflow: visible;
  background: var(--ink); color: #fff; border-radius: 28px;
  padding: 30px 30px 26px; margin-bottom: 22px;
  box-shadow: 0 30px 60px -34px rgba(11,11,15,.55);
}
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(520px 260px at 92% -10%, rgba(255,24,78,.42), transparent 62%),
    radial-gradient(420px 240px at 0% 110%, rgba(255,255,255,.08), transparent 60%);
}
.home-hero-txt .eyebrow { color: #b9b9c4; margin-bottom: 6px; }
.home-hero h1 { color: #fff; margin: 0 0 18px; font-size: clamp(24px, 3.4vw, 36px); max-width: 720px; }

.home-search { position: relative; display: flex; gap: 10px; align-items: stretch; max-width: 780px; }
.home-search-box {
  position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0;
  background: #fff; border-radius: 999px; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 30px -16px rgba(0,0,0,.6);
  transition: box-shadow .2s var(--ease);
}
.home-search-box:focus-within { box-shadow: 0 0 0 4px rgba(255,24,78,.35), 0 12px 30px -16px rgba(0,0,0,.6); }
.home-search-box .ico { position: absolute; left: 18px; color: var(--muted); pointer-events: none; }
.home-search-box input {
  width: 100%; min-width: 0; height: 54px; padding: 0 44px 0 50px; border: 0; background: transparent;
  color: var(--ink); font: inherit; font-size: 16.5px; border-radius: 999px;
}
.home-search-box input::placeholder { color: #8a8a96; }
.home-search-box input:focus { outline: none; }
.home-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.home-search-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--surface-2); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer;
}
.home-search-x:hover { background: var(--line); }
.home-search-go { border-radius: 999px; padding: 0 24px; height: 54px; flex: none; }
.home-results {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; right: 0;
  background: #fff; color: var(--ink); border-radius: 22px; box-shadow: var(--shadow-lift);
  max-height: min(60vh, 520px); overflow: auto; padding: 8px; text-align: left;
}
.hr-group + .hr-group { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.hr-label { margin: 6px 12px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.hr-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; color: var(--ink);
  text-decoration: none;
}
.hr-item:hover, .hr-item.is-active { background: var(--surface-2); text-decoration: none; }
.hr-pic { flex: none; width: 52px; height: 34px; border-radius: 8px; background: #1d1d26 center/cover no-repeat; }
.hr-pic-empty { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; opacity: .8; }
.hr-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin: 0 10px; background: var(--accent); }
.hr-dot-percorsi { background: var(--ink); }
.hr-dot-webinar { background: var(--ok); }
.hr-dot-rubriche { background: #6b5bd6; }
.hr-txt { min-width: 0; display: flex; flex-direction: column; }
.hr-txt strong { font-weight: 600; font-size: 15px; line-height: 1.25; }
.hr-txt small { color: var(--muted); font-size: 12.5px; }
.hr-out { margin-left: auto; flex: none; font-style: normal; font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); padding: 3px 9px; border-radius: 999px; }
.hr-all, .hr-empty { display: block; margin: 6px 4px 2px; padding: 10px 12px; border-radius: 14px; font-weight: 600; color: var(--accent-dark); }
.hr-all:hover, .hr-all.is-active { background: var(--accent-soft); text-decoration: none; }
.hr-empty { color: var(--ink-2); font-weight: 500; }

.home-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.home-chip {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); text-decoration: none;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.home-chip:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); text-decoration: none; color: #fff; }
.home-chip.is-hot { background: var(--accent); border-color: var(--accent); }
.home-chip.is-hot:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ---------- le file che scorrono ---------- */
.rail-sec { margin: 6px 0 14px; }
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rail-head .section-title { margin: 22px 0 4px; }
.rail-head .section-note { margin: 0; }
.rail-tools { display: flex; align-items: center; gap: 6px; flex: none; padding-bottom: 2px; }
.rail-all { margin-right: 8px; font-weight: 600; font-size: 14.5px; color: var(--accent-dark); }
.rail-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease), opacity .18s;
}
.rail-btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-fits .rail-btn { display: none; }
.rail {
  display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; margin: -6px -4px 0; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 280px; scroll-snap-align: start; }
.rail > .c-card { width: 280px; }
.rail-paths > .p-card { flex-basis: 250px; width: 250px; }
.rail > .c-card:hover { transform: translateY(-3px); }
@media (max-width: 760px) {
  .rail { gap: 12px; padding-bottom: 12px; }
  .rail > * { flex-basis: min(76vw, 280px); }
  .rail-paths > .p-card { flex-basis: min(66vw, 250px); width: auto; }
  .rail-btn { display: none; }
  .rail-head { align-items: flex-end; }
}

/* i percorsi fuori dal proprio: si vedono, non si aprono */
.p-card.is-out { background: #2a2a33; }
.p-out { font-size: 11.5px; font-weight: 600; color: #d6d6de; background: rgba(255,255,255,.12); padding: 4px 10px; border-radius: 999px; align-self: flex-start; }
.pm-out { color: #c9c9d3 !important; }

/* ---------- i webinar in arrivo ---------- */
.up-sec { margin: 8px 0 18px; }
.up-list { display: flex; flex-direction: column; gap: 10px; }
.up-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 12px 12px;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.up-item:hover { box-shadow: var(--shadow-lift); border-color: transparent; }
.up-item.is-live { border-color: var(--accent); }
.up-date {
  width: 62px; height: 62px; border-radius: 16px; background: var(--ink); color: #fff; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.up-date b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.up-date small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; margin-top: 3px; color: #c9c9d3; }
.up-item.is-live .up-date { background: var(--accent); }
.up-item.is-live .up-date small { color: #fff; }
.up-main { min-width: 0; }
.up-title { display: block; font-weight: 600; font-size: 16.5px; color: var(--ink); line-height: 1.25; }
.up-title:hover { text-decoration: none; color: var(--accent-dark); }
.up-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.up-live { color: var(--accent-dark); font-weight: 700; }
.up-act { display: flex; align-items: center; gap: 8px; }
.up-bell {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; position: relative;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .2s var(--ease);
}
.up-bell .ico { width: 20px; height: 20px; }
.up-bell:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.up-bell.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.up-bell.is-on::after { content: "✓"; position: absolute; right: -3px; top: -3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.up-bell.is-on:hover { background: var(--accent-dark); color: #fff; }
.up-bell.is-pop { transform: scale(1.18); }
@media (max-width: 640px) {
  .up-item { gap: 12px; padding: 12px; align-items: start; }
  .up-more { display: none; }
  .up-date { width: 54px; height: 54px; }
  .up-date b { font-size: 21px; }
  .up-title { font-size: 15.5px; }
  .up-sub { font-size: 13px; }
  .up-bell { width: 40px; height: 40px; }
}

/* la finestra della campanella */
.bell-back {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px;
  background: rgba(8,8,12,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s var(--ease);
}
.bell-back.is-open { opacity: 1; }
.bell-box {
  position: relative; width: min(440px, 100%); background: var(--surface); color: var(--ink); border-radius: 26px;
  padding: 28px 26px 22px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
  transform: translateY(14px) scale(.98); transition: transform .26s var(--ease);
}
.bell-back.is-open .bell-box { transform: none; }
.bell-box .modal-x { background: var(--surface-2); color: var(--ink); }
.bell-box .modal-x:hover { background: var(--line); }
.bell-ico { width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-dark); display: grid; place-items: center; margin-bottom: 14px; }
.bell-ico .ico { width: 26px; height: 26px; }
.bell-box h2 { font-size: 22px; margin: 0 0 8px; padding-right: 40px; }
.bell-box p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.bell-mail { margin-top: -4px; }
.bell-err { color: var(--err); font-weight: 500; }
.bell-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .bell-back { align-items: end; padding: 0; }
  .bell-box { width: 100%; border-radius: 26px 26px 0 0; }
  .bell-actions .btn { flex: 1 1 45%; }
}

/* ---------- esplora ---------- */
.ex-sec { margin: 10px 0 18px; }
.ex-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ex-tab {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.ex-tab b { font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); padding: 2px 7px; border-radius: 999px; }
.ex-tab:hover { border-color: var(--ink); color: var(--ink); }
.ex-tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ex-tab.is-on b { background: rgba(255,255,255,.18); color: #fff; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ex-grid-full { margin-bottom: 8px; }
.ex-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.ex-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: transparent; text-decoration: none; color: var(--ink); }
.ex-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); overflow: hidden; }
.ex-ico .emo, .ex-ico .flag { width: 26px; height: 26px; display: block; }
.ex-region .ex-ico { background: var(--tint-sky); }
.ex-country .ex-ico { background: var(--tint-sand); }
.ex-category .ex-ico { background: var(--tint-lilac); }
.ex-txt { min-width: 0; display: flex; flex-direction: column; }
.ex-txt strong { font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.ex-txt small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ex-go { margin-left: auto; color: var(--muted); font-size: 18px; transition: transform .2s var(--ease), color .2s; }
.ex-card:hover .ex-go { transform: translateX(3px); color: var(--accent-dark); }
.ex-more { border-style: dashed; }
.ex-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; }
.ex-head h2 { margin: 0 0 2px; font-size: 28px; }
.ex-head p { margin: 0; }
.ex-head-flag { flex: none; width: 64px; height: 64px; border-radius: 20px; background: var(--tint-sand); display: grid; place-items: center; }
.ex-head-flag .emo { width: 40px; height: 40px; }
.crumbs { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--ink-2); font-weight: 500; }
.empty-slim { padding: 26px 20px; margin: 10px 0 6px; }

/* nel pannello: la bandiera vicino al nome del paese, le etichette del modulo */
.term-flag { flex: none; display: inline-grid; place-items: center; width: 22px; }
.term-flag .emo { width: 18px; height: 18px; }
.tagbox-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 12px 0 6px; }
.tagbox-label:first-of-type { margin-top: 4px; }

/* ---------- il benvenuto e il giro ---------- */
.tour-actions .btn { white-space: nowrap; }
.tour-hole { position: fixed; }
.tour-card { position: fixed; }
.tour-back.is-lit { background: transparent; backdrop-filter: none; }
.tour-card.is-welcome { width: min(480px, calc(100vw - 28px)); padding: 30px 30px 26px; text-align: left; }
.tour-card.is-welcome h2 { font-size: 30px; margin-bottom: 12px; }
.tour-card.is-welcome .tour-text { font-size: 16px; }
.tour-logo { display: block; height: 36px; width: auto; margin-bottom: 18px; }
.tour-actions-col { flex-direction: column; align-items: stretch; margin-top: 6px; }
.tour-actions-col .btn { width: 100%; justify-content: center; }
.tour-actions-col .btn-ghost { border-color: transparent; color: var(--ink-2); box-shadow: none; }
.tour-actions-col .btn-ghost:hover { border-color: var(--line); }
@media (max-width: 760px) {
  .tour-card.is-welcome, .tour-card.is-welcome.is-center { top: auto; bottom: 24px; left: 12px; right: 12px; transform: none; width: auto; padding: 24px 22px 20px; }
  .tour-card.is-welcome h2 { font-size: 26px; }
  .tour-card { bottom: 24px; }
  .tour-card.is-top { bottom: auto; top: 12px; }
  .tour-hole { box-shadow: 0 0 0 9999px rgba(11,11,15,.62), 0 0 0 3px var(--accent); }
}
/* nel giro il menu aperto sul telefono resta sotto al velo, ma il buco lo lascia vedere */
body.tour-open.drawer-open .drawer-back { opacity: 0; pointer-events: none; }

/* ---------- ritocchi ---------- */
/* la finestra del percorso è scura con testo bianco: il vetro (Blocco 30) la faceva diventare chiara → bianco su bianco */
.layout-app .modal-box, .layout-admin .modal-box {
  background: rgba(14, 14, 20, .9) !important; color: #fff; border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(30px) saturate(160%); -webkit-backdrop-filter: blur(30px) saturate(160%);
}
/* il webinar in corso resta nero anche col vetro (Blocco 30 lo faceva diventare bianco su bianco) */
.layout-app .wv-card.tone-live, .layout-admin .wv-card.tone-live {
  background: var(--ink) !important; color: #fff; border-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
@media (max-width: 760px) {
  .home-hero { padding: 22px 18px 20px; border-radius: 24px; }
  .home-hero-txt .eyebrow .home-data { display: none; }
  .home-hero h1 { font-size: 24px; margin-bottom: 14px; }
  .home-search { flex-direction: column; gap: 8px; }
  .home-search-go { width: 100%; height: 48px; }
  .home-search-box input { height: 50px; font-size: 16px; padding-left: 46px; }
  .home-results { max-height: 58vh; }
  .home-chips { margin-top: 12px; }
  .ex-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ex-card { padding: 10px 12px; gap: 10px; }
  .ex-ico { width: 38px; height: 38px; border-radius: 12px; }
  .ex-txt strong { font-size: 14px; }
  .ex-head h2 { font-size: 23px; }
}
@media (max-width: 400px) {
  .ex-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOCCO 35 — importazione del catalogo dei corsi
   ============================================================ */

.notice-ok { background: var(--ok-soft); }
.notice-ok::before { background: var(--ok); }
.notice-ok h3 { color: var(--ok); }
.notice-ok .form-actions { margin-top: 12px; margin-bottom: 0; }

.imp-form { margin-bottom: 26px; }
.imp-form h3 { margin-bottom: 14px; }
.imp-opt { margin-bottom: 20px; }
.imp-opt > .small { margin: 0 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; }
.imp-opt > .small strong { color: var(--muted); font-weight: 700; }
.imp-nome { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 10px 0 0 16px; max-width: 360px; }
.imp-nome input { margin-top: 6px; }
.imp-form .form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }

.imp-table td { vertical-align: top; }
.imp-table .pill { font-size: 11.5px; white-space: nowrap; }
.imp-table strong { font-weight: 600; line-height: 1.3; display: block; }
.imp-rel { display: block; margin-top: 2px; font-size: 12.5px; }
.imp-ko { font-style: normal; color: var(--err); font-weight: 600; }
.imp-table tr.is-in td { opacity: .62; }
.imp-table tr.is-in:hover td { opacity: 1; }
@media (max-width: 900px) {
  .imp-table th:nth-child(4), .imp-table td:nth-child(4),
  .imp-table th:nth-child(6), .imp-table td:nth-child(6) { display: none; }
}
@media (max-width: 620px) {
  .imp-table th:nth-child(1), .imp-table td:nth-child(1),
  .imp-table th:nth-child(5), .imp-table td:nth-child(5) { display: none; }
  .imp-nome { margin-left: 0; }
}

.imp-det { margin: 10px 0 0; }
.imp-det summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.imp-det p { margin: 8px 0 0; }
.imp-det .small { color: var(--ink-2); }

/* ---------- Blocco 36: prova video e «chi lo vede» ---------- */
.notice-err { background: var(--err-soft); }
.notice-err::before { background: var(--err); }
.notice-err h3 { color: var(--err); }
.pv-passi { margin: 10px 0 0; padding-left: 20px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.pv-passi li { margin-bottom: 8px; }
.pv-passi code { background: rgba(0,0,0,.05); padding: 1px 6px; border-radius: 6px; }
.pv-form { margin-bottom: 20px; }
.pv-form input { max-width: 520px; }
.pv-dati { margin-bottom: 8px; }
.pv-table td { padding: 10px 6px; font-size: 14.5px; }
.pv-table td:last-child { text-align: right; white-space: nowrap; }
.pv-code { font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-code.is-ok { color: var(--ok); }
.pv-code.is-ko { color: var(--err); }
.pv-code.is-na { color: var(--muted); font-weight: 500; }
.pv-dl { margin: 0; }
.pv-dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pv-dl > div:last-child { border-bottom: 0; }
.pv-dl dt { color: var(--muted); font-size: 13.5px; margin: 0; }
.pv-dl dd { margin: 0; font-size: 14px; text-align: right; word-break: break-all; }
.pv-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: #0b0b0f; }
.pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) { .pv-players, .pv-dati { grid-template-columns: 1fr; } }

/* nel modulo del percorso: il titoletto sopra alle scelte */
.campo-tit { margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; font-weight: 700; }

/* «Chi lo vede»: stessa forma della scheda «Pubblica», ma su fondo chiaro */
.scheda-vede .status-opt strong { color: var(--ink); }
.scheda-vede .status-opt small { color: var(--ink-2); }
.scheda-vede .status-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ============================================================
   BLOCCO 37 — le regioni geografiche con le mappe
   Riquadri larghi, titolo pulito, la mappa di fianco.
   ============================================================ */

:root {
  /* per i titoli dei riquadri: il font di sistema, quello che su Mac e iPhone
     è San Francisco. Pulito, moderno, e non fa a pugni con Jost. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, var(--font);
}

.reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.reg-card {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.reg-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
  border-color: transparent; text-decoration: none; color: var(--ink);
}
.reg-card:active { transform: scale(.99); }

.reg-pic {
  flex: none; width: 92px; height: 92px; display: grid; place-items: center;
  border-radius: 18px; background: linear-gradient(160deg, #f4f7fd, #eef2f9);
  color: var(--ink-2); overflow: hidden;
}
.reg-map { display: block; width: 100%; height: 100%; object-fit: contain; }

.reg-txt { min-width: 0; display: flex; flex-direction: column; }
.reg-txt strong {
  font-family: var(--font-ui);
  font-size: 20px; font-weight: 600; letter-spacing: -.021em; line-height: 1.18; color: var(--ink);
}
.reg-txt small {
  font-family: var(--font-ui);
  font-size: 13.5px; letter-spacing: -.005em; color: var(--muted); margin-top: 4px;
}

.reg-go {
  margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted); background: var(--surface-2);
  transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.reg-card:hover .reg-go { transform: translateX(3px); background: var(--ink); color: #fff; }

/* la testata della pagina di una regione */
.ex-head-reg { gap: 20px; }
.ex-head-map {
  flex: none; width: 120px; height: 120px; display: grid; place-items: center;
  border-radius: 26px; background: linear-gradient(160deg, #f4f7fd, #eef2f9); overflow: hidden;
}
.ex-head-reg h2 { font-family: var(--font-ui); letter-spacing: -.024em; }

@media (max-width: 760px) {
  .reg-grid { grid-template-columns: 1fr; gap: 10px; }
  .reg-card { padding: 12px 14px 12px 12px; gap: 13px; border-radius: 20px; }
  .reg-pic { width: 74px; height: 74px; border-radius: 16px; }
  .reg-txt strong { font-size: 18px; }
  .reg-txt small { font-size: 13px; }
  .ex-head-map { width: 88px; height: 88px; border-radius: 22px; }
}

/* col vetro del Blocco 30 i riquadri restano leggibili */
.layout-app .reg-card, .layout-admin .reg-card {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%);
  border-color: rgba(255, 255, 255, .8);
}
@supports not (backdrop-filter: blur(1px)) {
  .layout-app .reg-card, .layout-admin .reg-card { background: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .layout-app .reg-card, .layout-admin .reg-card { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* ============================================================
   BLOCCO 38 — la tendina della ricerca sopra a tutto,
   la riga della lezione cliccabile per intero, i test in vista
   ============================================================ */

/* ---------- 1. la ricerca: quando è aperta la testata sale sopra al resto ---------- */
.home-hero.is-searching { z-index: 25; }                 /* sopra ai riquadri e alle linguette, sotto alla barra in alto (30) */
.home-hero:has(.home-search.is-open) { z-index: 25; }
.home-hero .home-results { z-index: 60; }

/* ---------- 2. la riga della lezione: si clicca tutta, non solo il titolo ---------- */
.lesson-row:not(.is-locked) { position: relative; cursor: pointer; }
.lesson-row:not(.is-locked) .lesson-main > a.strong { position: static; }
.lesson-row:not(.is-locked) .lesson-main > a.strong::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
}
.lesson-row:not(.is-locked):hover .lesson-main > a.strong { text-decoration: none; color: var(--accent); }
.lesson-row:not(.is-locked) .lesson-main > a.strong:focus-visible { outline: none; }
.lesson-row:not(.is-locked):has(.lesson-main > a.strong:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.lesson-row:not(.is-locked):active { transform: scale(.995); }

/* ---------- 3. i test nel pannello ---------- */
.test-card { border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); }
.test-head { margin-bottom: 12px; }
.test-head .eyebrow { color: var(--accent); margin-bottom: 4px; }
.test-head h3 { margin: 0 0 6px; }
.test-head p { margin: 0; }

.mq-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  text-decoration: none; color: var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.mq-row:hover { text-decoration: none; color: var(--ink); transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--accent); }
.mq-row + .mq-row { margin-top: 8px; }
.mq-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mq-txt strong { font-weight: 600; }
.mq-txt small { font-size: 12.5px; }
.mq-go { flex: none; font-size: 13.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }

.mq-add { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 0 4px; }

.test-empty {
  padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft);
}
.test-empty > p { margin: 0 0 12px; }
.test-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.test-add input[type="text"] { flex: 1 1 260px; min-width: 0; }
.test-add-more { margin-top: 12px; }

.scheda-test { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); }
.scheda-test a { font-weight: 600; white-space: nowrap; }

@media (max-width: 640px) {
  .mq-row { flex-wrap: wrap; }
  .mq-go { width: 100%; text-align: right; }
  .test-add .btn { width: 100%; }
}
/* ============================================================
   BLOCCO 39 — la pagina del corso: il video subito, la descrizione
   sotto, il relatore di fianco. E il titolo vetrina.
   ============================================================ */

.corso-head { align-items: flex-start; }
.corso-sub { max-width: 70ch; }

.corso-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.corso-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.corso-main > .card, .corso-main > .outline, .corso-main > .section-title { margin: 0; }
.corso-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }

/* --- il video in cima --- */
.corso-play { margin: 0; }
.corso-play .player-wrap { box-shadow: 0 30px 60px -34px rgba(11, 11, 15, .6); }
.corso-play .watch-bar { margin: 12px 0 0; }

.cp-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.cp-txt { min-width: 0; }
.cp-txt .eyebrow { color: var(--accent); margin-bottom: 2px; }
.cp-txt h2 { margin: 0 0 3px; font-size: 21px; line-height: 1.25; letter-spacing: -.012em; }
.cp-meta .btn { flex: none; }

.corso-prog { margin: 0; }
.corso-prog .progress-line { margin: 6px 0 0; }
.corso-desc h3 { margin-top: 0; }

/* la lezione che si sta guardando, dentro al programma */
.lesson-row.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.lesson-row.is-current .state { color: var(--accent); }

/* --- il riquadro del relatore --- */
.tutor-box {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.tutor-box:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: transparent; text-decoration: none; color: var(--ink); }
.tb-top { display: flex; align-items: center; gap: 13px; }
.tb-top .avatar { flex: none; }
.tb-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-who .eyebrow { color: var(--accent); margin: 0 0 1px; }
.tb-who strong { font-size: 17px; line-height: 1.2; }
.tb-who small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tb-co { color: var(--ink-2); }
.tb-bio { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.tb-go { font-size: 14px; font-weight: 600; color: var(--accent); }
.tutor-box:hover .tb-go span { display: inline-block; transform: translateX(3px); transition: transform .2s var(--ease); }

/* --- il riquadro «In breve» --- */
.corso-info h3 { margin: 0 0 10px; }
.ci-dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.ci-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ci-dl dt { color: var(--muted); font-size: 13px; }
.ci-dl dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; }
.corso-info .course-topics { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1040px) {
  .corso-layout { grid-template-columns: 1fr; }
  .corso-side { position: static; }
}
@media (max-width: 640px) {
  .cp-meta { flex-direction: column; align-items: stretch; }
  .cp-meta .btn { width: 100%; }
  .cp-txt h2 { font-size: 19px; }
  .tutor-box { padding: 16px; border-radius: 20px; }
}

/* col vetro del Blocco 30 i riquadri restano leggibili */
.layout-app .tutor-box {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%);
  border-color: rgba(255, 255, 255, .8);
}
@media (prefers-reduced-transparency: reduce) {
  .layout-app .tutor-box { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- il titolo vetrina nella scheda del corso --- */
.scheda-title + .scheda-title { margin-top: 2px; }
.scheda-title small { display: block; margin-top: 4px; }

/* il relatore senza profilo: stesso riquadro, ma non si clicca */
.tutor-box.is-flat { cursor: default; }
.tutor-box.is-flat:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }
.tb-staff { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.tb-staff a { font-weight: 600; }
.avatar-empty { background: var(--surface-2); color: var(--muted); }

/* --- prova video: elenco dei video che non si aprono --- */
.pv-brutte { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; }
.pv-brutte li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-brutte .pv-code { font-weight: 700; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.pv-brutte small { color: var(--muted); }


/* ============================================================
   BLOCCO 40 — rubriche: copertine A4 come su Canva, schede più
   corte con «Scopri di più…», lettore dei PDF rifatto
   ============================================================ */

/* ---------- 1. le schede delle rubriche ---------- */
.r-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; align-items: stretch; }
.r-card { height: 100%; }
/* la copertina ha le proporzioni di un A4 verticale (quello di Canva): nessuna esce sfasata */
.r-cover { aspect-ratio: 210 / 297; background: var(--surface-2); }
.r-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--out); }
.r-card:hover .r-cover img { transform: scale(1.03); }
.r-body { flex: 1; padding: 14px 16px 16px; gap: 6px; }
.r-body strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: 15px; line-height: 1.3;
}
.r-body small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.r-body em { margin-top: auto; padding-top: 4px; }
.r-more {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-size: 13.5px; font-weight: 600; color: var(--accent);
  transition: gap .25s var(--spring);
}
.r-card:hover .r-more { gap: 8px; }

/* ---------- 2. il pannello: la copertina di ogni rubrica ---------- */
.rb-cover-cell { white-space: nowrap; }
.rb-thumb {
  display: inline-grid; place-items: center; vertical-align: middle; width: 42px; aspect-ratio: 210 / 297; margin-right: 8px;
  border-radius: 6px; overflow: hidden; background: var(--surface-2); color: var(--muted); box-shadow: 0 1px 2px rgba(11,11,15,.08);
}
.rb-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rb-cover-form { display: inline-block; vertical-align: middle; }
.rb-cover-btn { cursor: pointer; }

/* ---------- 3. il lettore ---------- */
.lettore-head { margin-bottom: 18px; }
.lettore-summary { margin: 6px 0 0; max-width: 820px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

.lettore-wrap { position: relative; }
.lettore-barra {
  position: sticky; top: 12px; z-index: 25;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 6px 8px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.78); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 36px -20px rgba(11,11,15,.35);
}
.lettore-conta {
  min-width: 64px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
.lettore-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.lettore-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer; font: inherit;
  transition: background .2s var(--ease), transform .25s var(--spring);
}
.lettore-btn:hover:not(:disabled) { background: var(--surface-2); }
.lettore-btn:active:not(:disabled) { transform: scale(.9); }
.lettore-btn:disabled { opacity: .35; cursor: default; }
.lettore-btn-txt { width: auto; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.lettore-zoom { min-width: 50px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lettore-nota { margin: 0 10px 0 6px; white-space: nowrap; }

/* niente più riquadro basso con la barra dentro: la pagina scorre come una pagina normale */
.lettore {
  max-height: none; min-height: 0; overflow-x: auto; overflow-y: visible;
  padding: 0 0 30px; background: transparent; border: 0; border-radius: 0;
}
.lettore-pagine { --zoom: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 100%; }
.lettore-pagine .pg {
  width: calc(min(1000px, 100%) * var(--zoom)); max-width: none; margin: 0 auto;
  border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(11,11,15,.06), 0 22px 50px -28px rgba(11,11,15,.35);
  transition: width .28s var(--out);
}
.lettore-pagine .pg:not(.is-loaded) { aspect-ratio: 210 / 297; background: linear-gradient(100deg, #fff 30%, var(--surface-2) 50%, #fff 70%) 0 0 / 300% 100%; animation: pg-wait 1.4s linear infinite; }
@keyframes pg-wait { to { background-position: -150% 0; } }
.lettore-pagine .pg img, .lettore-pagine .pg canvas { width: 100%; height: auto; display: block; }
.lettore-pagine .chat-loading { margin: 40px auto; }

@media (max-width: 1100px) { .lettore-nota { display: none; } }
@media (max-width: 720px) {
  .lettore-barra { top: 72px; padding: 5px 6px; gap: 2px; }
  .lettore-sep { display: none; }
  .lettore-btn { width: 36px; height: 36px; }
  .lettore-pagine { gap: 12px; }
  .lettore-pagine .pg { border-radius: 4px; }
  .lettore-summary { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .lettore-pagine .pg { transition: none; }
  .lettore-pagine .pg:not(.is-loaded) { animation: none; }
}


/* ============================================================
   BLOCCO 43 — pannello Rubriche in righe corte e modificabili,
   scheda del corso più chiara (come si completa, attestato, ordine)
   ============================================================ */

.pill-warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- 1. l'elenco delle rubriche ---------- */
.rb-list { display: grid; gap: 12px; margin-bottom: 22px; }
.rb-row { padding: 14px 16px; }
.rb-row.rb-nopdf { border-color: var(--warn); }
.rb-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.rb-line .rb-thumb { width: 52px; margin: 0; }
.rb-main { min-width: 0; }
.rb-main .eyebrow { margin: 0 0 2px; display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.rb-main h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.rb-meta { margin: 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.rb-meta .pill-xs { margin-left: 4px; }
.rb-stato { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--warn-soft); color: var(--warn); }
.rb-stato.is-on { background: var(--ok-soft); color: var(--ok); }
.rb-warn { color: var(--warn); font-weight: 600; }
.rb-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.rb-actions .inline-form { margin: 0; }
.rb-thumb-lg { width: 84px; }

/* il pannello «Modifica» sotto alla riga */
.rb-edit { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.rb-edit h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rb-edit h4 + .option-row, .rb-edit .option-row + h4, .rb-edit label + h4, .rb-edit .rb-cover-edit + h4, .rb-edit small + h4 { margin-top: 16px; }
.rb-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; }
.rb-edit-col { min-width: 0; }
.rb-edit .option-row { margin: 0 0 8px; }
.rb-edit .rb-opt span { font-size: 14px; }
.rb-cover-edit { display: flex; gap: 14px; align-items: flex-start; }
.rb-cover-edit > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rb-cover-edit small, .rb-edit .rb-file + small { display: block; line-height: 1.45; }
.rb-file input[type="file"] { font-size: 13.5px; }
.rb-remove { margin-top: 6px; font-size: 13.5px; }
.rb-pdf-now { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); }
.rb-pdf-now .ico { flex: none; color: var(--muted); }
.rb-pdf-now span { min-width: 0; overflow-wrap: anywhere; }
.rb-edit-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.rb-danger { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rb-edit input[type="file"] { max-width: 100%; }

@media (max-width: 860px) {
  .rb-edit-grid { grid-template-columns: 1fr; gap: 6px; }
  .rb-edit-col + .rb-edit-col { margin-top: 18px; }
}
@media (max-width: 720px) {
  .rb-row { padding: 12px 14px; }
  .rb-line { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .rb-line .rb-thumb { width: 44px; }
  .rb-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .rb-actions .btn { flex: 1 1 auto; text-align: center; }
  .rb-cover-edit { flex-direction: column; }
}

/* ---------- 2. la scheda del corso ---------- */
.scheda-card .option-row { margin: 0 0 8px; }
.scheda-card .option-row span { font-size: 13.5px; }
.scheda-card .option-row input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--accent); flex: none; }
.scheda-finale > .muted.small { margin: -6px 0 12px; }
.scheda-testbox { margin: 12px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid rgba(255,24,78,.12); }
.scheda-testbox p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.scheda-testbox .btn { width: 100%; justify-content: center; }
.scheda-testwarn { font-weight: 600; color: var(--warn) !important; }
.scheda-testnote { margin: 10px 0 0 !important; color: var(--warn) !important; }
.scheda-attestato [data-cert-box] { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.scheda-attestato [data-cert-box] label { margin-bottom: 0; }
.scheda-esame { margin-top: 12px !important; padding-top: 12px; border-top: 1px dashed var(--line); align-items: flex-start !important; }
.scheda-esame input { margin-top: 3px; }
.scheda-esame span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.scheda-esame span strong { color: var(--ink); }

/* ============================================================
   BLOCCO 43 (b) — la scheda del profilo di un altro membro: una
   copertina di colore che cambia con il livello, la foto sul bordo,
   i dati di sempre e i numeri in fila. Tutto dentro a una scheda,
   con gli stacchi del resto del sito.
   ============================================================ */

.pcard {
  position: relative; overflow: hidden; margin-bottom: 22px;
  border-radius: var(--radius); background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 30px 80px -40px rgba(11, 11, 15, .38), 0 2px 8px -2px rgba(11, 11, 15, .06);
  --cover-h: 168px;
}

/* ---------- i colori di ogni livello (chiari; Titanium è l'unico scuro) ---------- */
.lv-default { --lv-a: #eef5ff; --lv-b: #cfe6fa; --lv-c: #9fd2f3; --lv-ink: #1a6ea8; --lv-glow: rgba(255, 255, 255, .9); }
.lv-oro     { --lv-a: #fff7e3; --lv-b: #f3dc9c; --lv-c: #dcb04a; --lv-ink: #8a5a00; --lv-glow: rgba(255, 250, 230, .95); }
.lv-platinum{ --lv-a: #f7f7f9; --lv-b: #dcdfe5; --lv-c: #b6bac2; --lv-ink: #4a4f58; --lv-glow: rgba(255, 255, 255, .95); }
.lv-titanium{ --lv-a: #3b3c41; --lv-b: #1e1f23; --lv-c: #0b0b0f; --lv-ink: #fff;    --lv-glow: rgba(255, 255, 255, .16); }
.lv-diamond { --lv-a: #ecf4ff; --lv-b: #b6d4f6; --lv-c: #5f96d9; --lv-ink: #1f4f8f; --lv-glow: rgba(255, 255, 255, .95); }
.lv-tutor   { --lv-a: #fffaef; --lv-b: #f0dfae; --lv-c: #d4b264; --lv-ink: #7a5a12; --lv-glow: rgba(255, 252, 240, .95); }

/* ---------- la copertina: solo colore, nessuna immagine ---------- */
.pcard-cover {
  --sh: 0;
  position: relative; height: var(--cover-h); overflow: hidden;
  background: linear-gradient(112deg, var(--lv-a) 0%, var(--lv-b) 52%, var(--lv-c) 100%);
}
.pcard-glow { position: absolute; left: 8%; top: -60%; width: 46%; height: 220%; border-radius: 50%; background: radial-gradient(circle, var(--lv-glow), transparent 60%); filter: blur(24px); transform: translate3d(calc(var(--sh) * 60px), 0, 0); }
.pcard-sheen {
  position: absolute; inset: -40% -20%; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .1) 53%, transparent 62%);
  transform: translate3d(calc(var(--sh) * 200px), 0, 0);
  animation: pcard-sheen 18s ease-in-out infinite alternate;
}
.pcard-sheen-2 { background: linear-gradient(104deg, transparent 64%, rgba(255, 255, 255, .3) 73%, transparent 82%); animation-duration: 24s; animation-delay: -10s; }
.is-dark .pcard-sheen { background: linear-gradient(104deg, transparent 34%, rgba(255, 255, 255, .1) 46%, rgba(255, 255, 255, .02) 53%, transparent 62%); }
.is-dark .pcard-sheen-2 { background: linear-gradient(104deg, transparent 64%, rgba(255, 255, 255, .07) 73%, transparent 82%); }
@keyframes pcard-sheen { from { translate: -5% 0; } to { translate: 5% 0; } }
/* Platinum e Titanium: metallo spazzolato. Diamond: sfaccettature. */
.lv-platinum .pcard-cover::before, .lv-titanium .pcard-cover::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 2px, rgba(255, 255, 255, .3) 2px 3px, rgba(0, 0, 0, .05) 3px 5px);
}
.lv-titanium .pcard-cover::before { opacity: .16; }
.lv-diamond .pcard-cover::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background:
    conic-gradient(from 20deg at 30% 40%, #fff 0 18deg, transparent 18deg 70deg, #fff 70deg 82deg, transparent 82deg 140deg, #dff 140deg 160deg, transparent 160deg 230deg, #fff 230deg 245deg, transparent 245deg 300deg, #fff 300deg 316deg, transparent 316deg 360deg),
    conic-gradient(from 200deg at 72% 65%, #fff 0 14deg, transparent 14deg 80deg, #fff 80deg 96deg, transparent 96deg 170deg, #fff 170deg 182deg, transparent 182deg 260deg, #fff 260deg 272deg, transparent 272deg 360deg);
  transform: translate3d(calc(var(--sh) * 30px), 0, 0) rotate(calc(var(--sh) * 5deg));
}
/* il bordo in basso della copertina si fonde nella scheda */
.pcard-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55)); }
.is-dark .pcard-cover::after { background: linear-gradient(180deg, rgba(11, 11, 15, 0), rgba(11, 11, 15, .35)); }

/* l'etichetta del livello, nitida, in alto a destra */
.pcard-lvl {
  position: absolute; right: 20px; top: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lv-ink);
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 20px -14px rgba(11, 11, 15, .5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pcard-lvl img { width: 20px; height: 20px; display: block; }
.is-dark .pcard-lvl { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); }

/* ---------- il contenuto ---------- */
.pcard-body { position: relative; z-index: 2; padding: 0 28px 24px; }
.pcard-photo { margin-top: -52px; }
.pcard-photo .avatar {
  width: 104px; height: 104px; font-size: 34px; border-radius: 32px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(11, 11, 15, .06), 0 22px 44px -18px rgba(11, 11, 15, .5);
  transition: transform .5s cubic-bezier(.34, 1.4, .42, 1);
}
.pcard:hover .pcard-photo .avatar { transform: scale(1.04) rotate(-1.5deg); }

.pcard-who { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.pcard-id { min-width: 0; flex: 1 1 320px; }
.pcard-id h1 { margin: 0 0 2px; font-size: 30px; line-height: 1.1; text-wrap: balance; }
.pcard-id h1 .lvl { width: 32px; height: 32px; margin-left: .3em; vertical-align: -.12em; }
.pcard-id h1 .lvl img { filter: drop-shadow(0 4px 10px rgba(11, 11, 15, .25)); }
.pcard-id .member-user { margin: 0 0 4px; }
.pcard-lead { margin: 4px 0 6px; font-size: 17px; line-height: 1.4; color: var(--ink-2); max-width: 720px; }
.pcard-line { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13.5px; color: var(--muted); }
.pcard-line span { display: inline-flex; align-items: center; gap: 6px; }
.pcard-line svg { flex: none; color: var(--muted); }
.pcard-id .award-row { margin-top: 10px; }

.pcard-side { flex: 0 1 auto; max-width: 42%; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pcard-side-lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pcard-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pcard-chips .chip { padding: 5px 11px; font-size: 12.5px; }

/* la riga dei numeri e il bottone, divisi da una linea */
.pcard-foot {
  display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.pcard-stats { display: flex; flex-wrap: wrap; gap: 8px 0; }
.pcard-stat { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; border-left: 1px solid var(--line); min-width: 0; }
.pcard-stat:first-child { padding-left: 0; border-left: 0; }
.pcard-stat b { font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.pcard-stat small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pcard-stat.is-live b { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-size: 15px; }
.pcard-stat.is-live b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.pcard-cta { margin: 0; }
.pcard-cta .btn-dark, .pcard-cta .btn-primary { padding: 12px 22px; border-radius: 999px; }

/* ---------- l'entrata: la copertina si accende, i pezzi salgono uno dopo l'altro ---------- */
.pcard .pcard-cover { opacity: 0; transition: opacity .8s var(--out, ease-out); }
.pcard .pcard-lvl { opacity: 0; translate: 8px 0; transition: opacity .6s var(--out, ease-out) .2s, translate .6s var(--out, ease-out) .2s; }
.pcard .pcard-photo, .pcard .pcard-who, .pcard .pcard-foot { opacity: 0; translate: 0 14px; transition: opacity .6s var(--out, ease-out), translate .7s var(--out, ease-out); }
.pcard .pcard-photo { transition-delay: .12s; }
.pcard .pcard-who { transition-delay: .22s; }
.pcard .pcard-foot { transition-delay: .32s; }
.pcard.is-in .pcard-cover, .pcard.is-in .pcard-lvl { opacity: 1; translate: 0 0; }
.pcard.is-in .pcard-photo, .pcard.is-in .pcard-who, .pcard.is-in .pcard-foot { opacity: 1; translate: 0 0; }

@media (max-width: 860px) {
  .pcard-who { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pcard-id { flex: 0 0 auto; width: 100%; }
  .pcard-side { max-width: 100%; align-items: flex-start; }
  .pcard-chips { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .pcard { --cover-h: 128px; border-radius: var(--radius-sm); }
  .pcard-body { padding: 0 18px 18px; }
  .pcard-photo { margin-top: -42px; }
  .pcard-photo .avatar { width: 84px; height: 84px; font-size: 28px; border-radius: 26px; }
  .pcard-lvl { right: 12px; top: 12px; padding: 6px 10px 6px 6px; font-size: 11px; }
  .pcard-lvl img { width: 18px; height: 18px; }
  .pcard-id h1 { font-size: 24px; }
  .pcard-lead { font-size: 15.5px; }
  .pcard-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; width: 100%; }
  .pcard-stat { padding: 0 14px; }
  .pcard-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pcard-stat b, .pcard-stat small { white-space: normal; }
  .pcard-cta { width: 100%; }
  .pcard-cta .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard-sheen { animation: none; }
  .pcard .pcard-cover, .pcard .pcard-lvl, .pcard .pcard-photo, .pcard .pcard-who, .pcard .pcard-foot { opacity: 1; translate: 0 0; transition: none; }
}

/* ============================================================
   BLOCCO 44 — le cinque sezioni dei materiali: la fascia in «Per te»,
   la scheda «Sezioni», la pagina di una sezione, i riquadri nel pannello.
   ============================================================ */

/* i toni: uno per sezione (le tinte già in uso nel sito) */
.tone-rose  { --sez-bg: var(--tint-rose);  --sez-ink: #b3123a; }
.tone-sand  { --sez-bg: var(--tint-sand);  --sez-ink: #8a5a00; }
.tone-mint  { --sez-bg: var(--tint-mint);  --sez-ink: #1f6b45; }
.tone-lilac { --sez-bg: var(--tint-lilac); --sez-ink: #5a3fa0; }
.tone-sky   { --sez-bg: var(--tint-sky);   --sez-ink: #2a4f8f; }
.tone-none  { --sez-bg: var(--warn-soft);  --sez-ink: var(--warn); }

/* ---------- 1. la griglia delle cinque: bianche, come le altre schede del sito ---------- */
.sez-sec { margin: 4px 0 30px; }
.sez-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }

.sez-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 178px; padding: 18px 18px 16px;
  border-radius: var(--radius); color: var(--ink); text-decoration: none; overflow: hidden;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -26px rgba(11, 11, 15, .35), 0 1px 2px rgba(11, 11, 15, .04);
  transition: transform .35s cubic-bezier(.34, 1.4, .42, 1), box-shadow .35s;
}
/* la riga colorata in basso: è l'unico colore, e cresce quando ci passi sopra */
.sez-card::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--sez-ink); opacity: .55; transform: scaleX(.35); transform-origin: left;
  transition: transform .45s var(--out, ease-out), opacity .3s;
}
.sez-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 28px 50px -26px rgba(11, 11, 15, .45), 0 1px 2px rgba(11, 11, 15, .04); color: var(--ink); }
.sez-card:hover::after { transform: scaleX(1); opacity: 1; }
.sez-top { display: flex; align-items: center; justify-content: space-between; }
.sez-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sez-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 10px 20px -12px rgba(11, 11, 15, .6); transition: transform .35s cubic-bezier(.34, 1.4, .42, 1), background .3s; }
.sez-card:hover .sez-ico { transform: rotate(-6deg) scale(1.06); background: var(--sez-ink); }
.sez-name { margin-top: auto; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.sez-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sez-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sez-go { font-style: normal; color: var(--sez-ink); transition: transform .3s cubic-bezier(.34, 1.4, .42, 1); }
.sez-card:hover .sez-go { transform: translateX(4px); }

/* la versione grande (scheda «Sezioni»): descrizione intera */
.sez-grid.is-big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sez-grid.is-big .sez-card { min-height: 210px; padding: 22px 22px 20px; }
.sez-grid.is-big .sez-name { font-size: 20px; }
.sez-grid.is-big .sez-desc { font-size: 13.5px; -webkit-line-clamp: 4; line-clamp: 4; }

/* ---------- 1b. cercare e filtrare dentro a una sezione ---------- */
.sez-find { display: flex; flex-direction: column; gap: 12px; margin: 0 0 22px; padding: 16px 18px; border-radius: var(--radius); background: rgba(255, 255, 255, .72); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -28px rgba(11, 11, 15, .35); }
.sez-find-box { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 999px; background: var(--surface-2); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.sez-find-box:focus-within { background: #fff; border-color: var(--ink); }
.sez-find-box .ico { flex: none; color: var(--muted); }
.sez-find-box input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.sez-find-box input::-webkit-search-cancel-button { display: none; }
.sez-find-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.sez-find-types { display: flex; flex-wrap: wrap; gap: 6px; }
.sez-ftype { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.sez-ftype b { font-size: 11px; font-weight: 700; color: var(--muted); }
.sez-ftype.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sez-ftype.is-on b { color: rgba(255, 255, 255, .7); }
/* il pannello dei filtri, a destra */
.sez-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 24px; align-items: start; }
.sez-layout.no-side { grid-template-columns: minmax(0, 1fr); }
.sez-main { min-width: 0; }
.sez-side { position: sticky; top: 16px; }
.sez-side-wrap { border-radius: var(--radius); background: rgba(255, 255, 255, .72); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -28px rgba(11, 11, 15, .35); overflow: hidden; }
.sez-side-sum { display: none; list-style: none; }
.sez-side-sum::-webkit-details-marker { display: none; }
.sez-side-in { display: flex; flex-direction: column; gap: 18px; padding: 18px 18px 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.sez-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sez-side-head h3 { margin: 0; font-size: 15px; }
.sez-side-reset { border: 0; background: var(--accent-soft); color: var(--accent-dark); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.sez-side-reset:hover { background: var(--accent); color: #fff; }
.sez-fgroup h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sez-fgroup h4 span { font-weight: 600; color: var(--muted); opacity: .7; }
.sez-fopts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sez-fopts li[hidden] { display: none; }
.sez-fopt {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background .18s, color .18s;
}
.sez-fopt:hover { background: var(--surface-2); color: var(--ink); }
.sez-fopt-box { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #c9c9d2; background: #fff; display: grid; place-items: center; transition: background .18s, border-color .18s; }
.sez-fopt-box::after { content: ""; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.sez-fopt.is-on { color: var(--ink); font-weight: 600; }
.sez-fopt.is-on .sez-fopt-box { background: var(--ink); border-color: var(--ink); }
.sez-fopt.is-on .sez-fopt-box::after { opacity: 1; }
.sez-fopt-flag { flex: none; display: inline-flex; }
.sez-fopt-flag img, .sez-fopt-flag svg { width: 16px; height: 16px; border-radius: 3px; display: block; }
.sez-fopt-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sez-fopt b { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); padding: 1px 7px; border-radius: 999px; background: var(--surface-2); }
.sez-fopt.is-on b { background: var(--ink); color: #fff; }
.sez-fmore { margin: 4px 0 0 8px; border: 0; background: transparent; color: var(--accent-dark); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.sez-fmore:hover { text-decoration: underline; }
.sez-side-arrow { width: 9px; height: 9px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s; margin-right: 4px; }
.sez-side-wrap[open] .sez-side-arrow { transform: rotate(-135deg); }

.sez-find-stato { margin: 0; }
.sez-none { margin-bottom: 22px; }
.sez-item[hidden] { display: none !important; }
[data-sez-block][hidden] { display: none !important; }

/* le parole sotto la ricerca */
.home-chip.is-sez { border-color: transparent; background: var(--sez-bg); color: var(--sez-ink); font-weight: 600; }
.home-chip.is-sez:hover { background: var(--sez-ink); color: #fff; }

/* ---------- 2. la pagina di una sezione ---------- */
.sez-head {
  position: relative; display: flex; align-items: center; gap: 22px; margin: 4px 0 24px; padding: 26px 28px;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 24px 50px -30px rgba(11, 11, 15, .4);
}
.sez-head::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--sez-ink); }
.sez-head-n { flex: none; font-size: 56px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--sez-ink); opacity: .55; font-variant-numeric: tabular-nums; }
.sez-head-txt { flex: 1; min-width: 0; }
.sez-head-txt .eyebrow { margin: 0 0 4px; color: var(--sez-ink); }
.sez-head-txt h2 { margin: 0 0 6px; font-size: 30px; line-height: 1.1; }
.sez-head-desc { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 720px; }
.sez-head-txt .muted.small { margin: 0; }
.sez-head-ico { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; background: var(--ink); color: #fff; }
.sez-head-ico svg { width: 40px; height: 40px; }
.sez-others { margin-top: 34px; }
.sez-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.sez-mini {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--sez-bg); color: var(--sez-ink); font-weight: 600; font-size: 13.5px; text-decoration: none;
  transition: transform .3s cubic-bezier(.34, 1.4, .42, 1), background .25s, color .25s;
}
.sez-mini b { font-size: 11px; letter-spacing: .08em; opacity: .75; }
.sez-mini:hover { transform: translateY(-2px); background: var(--sez-ink); color: #fff; }

/* l'etichetta piccola (scheda del corso, elenco corsi, rubriche) */
.sez-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; vertical-align: middle;
  background: var(--sez-bg); color: var(--sez-ink); font-size: 12px; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap;
}
.sez-tag i { font-style: normal; font-size: 10.5px; letter-spacing: .08em; opacity: .75; }
a.sez-tag:hover { background: var(--sez-ink); color: #fff; }
.course-row h3 .sez-tag { margin-left: 8px; font-size: 11.5px; }
.ci-dl .sez-tag { font-size: 12.5px; }

/* ---------- 3. il pannello: la scelta della sezione ---------- */
.sez-pick { display: flex; flex-direction: column; gap: 8px; }
.sez-pick-group { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--radius-sm); border: 1.5px dashed rgba(11, 11, 15, .14); background: rgba(255, 255, 255, .5); }
.sez-pick-lab { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.sez-opt { margin: 0 !important; }
.sez-opt span { font-size: 13.5px; line-height: 1.4; }
.sez-opt span strong { display: flex; align-items: center; gap: 6px; }
.sez-opt span strong em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; border-radius: 999px; background: var(--sez-bg, var(--surface-2)); color: var(--sez-ink, var(--muted)); }
.sez-opt span small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.sez-opt:has(input:checked) { border-color: var(--sez-ink, var(--accent)); background: var(--sez-bg, var(--accent-soft)); }
.sez-opt-none span strong { color: var(--ink-2); }
.scheda-sez > .muted.small { margin: -6px 0 12px; }

/* la pagina «Le 5 sezioni» */
.sez-admin-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 22px; }
.sez-admin-grid .sez-card { min-height: 150px; padding: 14px 14px 12px; }
.sez-admin-grid .sez-name { font-size: 15px; }
.sez-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sez-tab-head h3 { margin: 0; }
.sez-bulk { display: flex; align-items: center; gap: 8px; }
.sez-bulk select { font-size: 13px; padding: 7px 10px; }
.sez-rows { display: flex; flex-direction: column; }
.sez-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.sez-row-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sez-row-main a { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sez-row-main small { font-size: 12px; }
.sez-sel { flex: none; width: 320px; max-width: 48%; font-size: 13px; padding: 7px 10px; }
.sez-sel.is-proposta { background-color: var(--warn-soft); border-color: var(--warn); }
.sez-form .card { margin-bottom: 16px; }
.sez-bar {
  position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 16px 40px -20px rgba(11, 11, 15, .4);
}

@media (max-width: 1100px) {
  .sez-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sez-layout { grid-template-columns: minmax(0, 1fr) 232px; gap: 16px; }
  .sez-grid:not(.is-big) .sez-card { min-height: 150px; }
  .sez-admin-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .sez-layout { grid-template-columns: minmax(0, 1fr); }
  .sez-side { position: static; order: -1; }
  .sez-side-sum { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 14px; }
  .sez-side-sum > span { display: inline-flex; align-items: center; gap: 8px; }
  .sez-side-sum b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
  .sez-side-in { max-height: none; padding-top: 4px; }
  .sez-side-head { justify-content: flex-end; }
  .sez-side-head h3 { display: none; }
  .sez-side { margin-bottom: 18px; }
}
@media (max-width: 720px) {
  .sez-grid, .sez-grid.is-big { grid-template-columns: 1fr; gap: 10px; }
  .sez-find { padding: 12px; }
  .sez-grid:not(.is-big) .sez-card, .sez-grid.is-big .sez-card { min-height: 0; padding: 16px; }
  .sez-name { margin-top: 6px; }
  .sez-head { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px; }
  .sez-head-n { font-size: 40px; }
  .sez-head-txt h2 { font-size: 24px; }
  .sez-head-ico { display: none; }
  .sez-admin-grid { grid-template-columns: 1fr 1fr; }
  .sez-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .sez-sel { width: 100%; max-width: none; }
  .sez-row-main a { white-space: normal; }
}

/* ============================================================
   Blocco 46 — Area riservata IBC: Academy e Libreria
   ============================================================ */

/* ---------- le tre porte in «Per te» ---------- */
.rep-doors { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin: 0 0 28px; }
.rep-door {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 22px 22px 18px;
  border-radius: var(--radius); color: var(--ink); text-decoration: none; overflow: hidden;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -26px rgba(11, 11, 15, .35), 0 1px 2px rgba(11, 11, 15, .04);
  transition: transform .35s cubic-bezier(.34, 1.4, .42, 1), box-shadow .35s;
}
.rep-door:hover { transform: translateY(-4px); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 28px 50px -26px rgba(11, 11, 15, .45), 0 1px 2px rgba(11, 11, 15, .04); }
.rep-door-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rep-door-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--surface-2); font-size: 24px; line-height: 1; transition: transform .35s cubic-bezier(.34, 1.4, .42, 1); }
.rep-door:hover .rep-door-ico { transform: rotate(-6deg) scale(1.06); }
.rep-door strong { margin-top: auto; font-size: 21px; line-height: 1.15; letter-spacing: -.015em; }
.rep-door small { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rep-door-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rep-door-meta i { font-style: normal; color: var(--accent); transition: transform .3s cubic-bezier(.34, 1.4, .42, 1); }
.rep-door:hover .rep-door-meta i { transform: translateX(4px); }
/* l'Academy è la porta principale: nera, con il fucsia */
.rep-door-academy { background: var(--ink); color: #fff; border-color: var(--ink); }
.rep-door-academy:hover { color: #fff; }
.rep-door-academy .rep-door-ico { background: rgba(255, 255, 255, .1); }
.rep-door-academy small { color: rgba(255, 255, 255, .74); }
.rep-door-academy .rep-door-meta { color: rgba(255, 255, 255, .86); border-top-color: rgba(255, 255, 255, .14); }
.rep-door-academy::before {
  content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 24, 78, .55), rgba(255, 24, 78, 0) 70%); pointer-events: none;
}
.rep-door-academy .rep-seal { background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- il bollino «Verificato dal Direttore scientifico» ---------- */
.rep-seal {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-dark);
}
.rep-seal svg { flex: none; }
.c-flags .rep-seal { background: rgba(255, 255, 255, .94); color: var(--accent-dark); box-shadow: 0 6px 14px -8px rgba(11, 11, 15, .5); }
.corso-seal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; }

/* ---------- la testata di Academy e Libreria ---------- */
.rep-head {
  position: relative; display: flex; align-items: center; gap: 24px; margin: 0 0 18px; padding: 26px 28px;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -28px rgba(11, 11, 15, .35);
}
.rep-head-txt { flex: 1; min-width: 0; }
.rep-head-txt .eyebrow { margin: 0 0 4px; }
.rep-head-txt h2 { margin: 0 0 6px; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; }
.rep-head-desc { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 680px; }
.rep-head-big { flex: none; font-size: 64px; line-height: 1; opacity: .9; }
.rep-head-academy { background: var(--ink); border-color: var(--ink); color: #fff; }
.rep-head-academy .rep-head-txt h2 { color: #fff; }
.rep-head-academy .eyebrow { color: rgba(255, 255, 255, .7); }
.rep-head-academy .rep-head-desc { color: rgba(255, 255, 255, .8); }
.rep-head-academy .muted { color: rgba(255, 255, 255, .6); }
.rep-head-academy::before {
  content: ""; position: absolute; right: -90px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 24, 78, .5), rgba(255, 24, 78, 0) 70%); pointer-events: none;
}
.rep-dir {
  position: relative; flex: none; display: flex; gap: 12px; align-items: flex-start; max-width: 320px; padding: 16px 18px;
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.rep-dir-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--accent); color: #fff; }
.rep-dir small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.rep-dir strong { display: block; font-size: 17px; color: #fff; }
.rep-dir p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .72); }

/* le due schede nuove in alto si notano un po' di più */
.stab.stab-rep:not(.active) { font-weight: 600; }

/* ---------- pannello: la scelta del reparto ---------- */
.rep-pick { display: flex; flex-direction: column; gap: 6px; }
.rep-opt small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rep-pick-note { margin: 8px 0 0; }
.chips-rep { margin-bottom: 8px; }

/* ---------- telefono ---------- */
@media (max-width: 960px) {
  .rep-doors { grid-template-columns: 1fr 1fr; }
  .rep-door-academy { grid-column: 1 / -1; }
  .rep-head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .rep-dir { max-width: none; width: 100%; }
  .rep-head-big { display: none; }
}
@media (max-width: 560px) {
  .rep-doors { grid-template-columns: 1fr; gap: 10px; }
  .rep-door { min-height: 0; padding: 18px; }
  .rep-door strong { margin-top: 10px; font-size: 19px; }
  .rep-head-txt h2 { font-size: 26px; }
  .c-flags .rep-seal span { display: none; }   /* sulle schede strette resta solo lo scudetto */
  .c-flags .rep-seal { padding: 4px 6px; }
}

/* ============================================================
   Blocco 46b — Academy in attesa, Libreria a file
   ============================================================ */

/* ---------- Academy: la pagina d'attesa ---------- */
.acad-wait {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start;
  margin: 4px 0 28px; padding: 30px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 40px -28px rgba(11, 11, 15, .35);
}
.acad-wait-main .eyebrow { color: var(--accent); margin: 0 0 8px; }
.acad-wait-main h2 { margin: 0 0 12px; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.acad-wait-main p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.acad-wait-main .btn i { font-style: normal; margin-left: 4px; }
.acad-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acad-steps li {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  animation: acad-in .6s var(--out, ease-out) both;
}
.acad-steps li:nth-child(2) { animation-delay: .08s; }
.acad-steps li:nth-child(3) { animation-delay: .16s; }
.acad-steps li:nth-child(4) { animation-delay: .24s; }
@keyframes acad-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.acad-step-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.acad-steps strong { font-size: 16px; }
.acad-steps small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.acad-staff { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- Libreria: la testata più calda ---------- */
.rep-head-libreria {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 24, 78, .14), rgba(255, 24, 78, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(140, 110, 230, .12), rgba(140, 110, 230, 0) 60%),
    rgba(255, 255, 255, .78);
}
.rep-head-libreria .eyebrow { color: var(--accent-dark); }

/* ---------- Libreria: le file per sezione ---------- */
.lib-rails { display: flex; flex-direction: column; gap: 6px; }
.lib-rail .rail-head .section-title { display: flex; align-items: center; gap: 10px; }
.lib-rail .rail-head .section-title::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sez-ink, var(--ink));
  box-shadow: 0 0 0 4px var(--sez-bg, var(--surface-2));
}
.lib-rail .section-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
.rail-rub > .r-card { flex: 0 0 200px; width: 200px; }
@media (max-width: 960px) {
  .acad-wait { grid-template-columns: 1fr; padding: 22px 20px; gap: 20px; }
}
@media (max-width: 560px) {
  .acad-steps { grid-template-columns: 1fr; }
  .acad-wait-main h2 { font-size: 23px; }
  .rail-rub > .r-card { flex-basis: 64vw; width: 64vw; }
}

/* ============================================================
   Blocco 46 — Local Coordinators: mappa, ricerca, schede, profilo
   ============================================================ */
.lcd-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 6px 0 18px; }
.lcd-hero-txt { max-width: 680px; }
.lcd-hero h1 { margin: 6px 0 10px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.04; letter-spacing: -.025em; }
.lcd-hero .lede { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.lcd-stats { flex: none; display: flex; gap: 10px; }
.lcd-stats div {
  min-width: 96px; padding: 14px 16px; border-radius: var(--radius-sm); text-align: left;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 14px 30px -22px rgba(11, 11, 15, .35);
}
.lcd-stats div:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.lcd-stats b { display: block; font-size: 28px; line-height: 1; letter-spacing: -.02em; }
.lcd-stats small { font-size: 12px; font-weight: 600; opacity: .7; }
.lcd-map { margin-top: 0; }
.lcd-map .lc-map { border-radius: var(--radius); }
.lcd-map .lc-pt.is-dim { opacity: .3; pointer-events: auto; }
.lcd-map .lc-pt.is-hot .lc-dot { r: 6; }

/* --- ricerca e paesi --- */
.lcd-dir { scroll-margin-top: 16px; margin: 22px 0 10px; }
.lcd-find {
  display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; padding: 16px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 18px 40px -28px rgba(11, 11, 15, .35);
}
.lcd-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.lcd-search:focus-within { background: #fff; border-color: var(--ink); }
.lcd-search .ico { flex: none; color: var(--muted); }
.lcd-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink); outline: none; }
.lcd-search input::-webkit-search-cancel-button { display: none; }
.lcd-x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.lcd-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lcd-chips::-webkit-scrollbar { display: none; }
.lcd-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.lcd-chip b { font-size: 11px; color: var(--muted); }
.lcd-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.lcd-chip.is-on b { color: rgba(255, 255, 255, .7); }
.lcd-chip .flag { width: 16px; height: 16px; }
.lcd-state { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 600; }
.lcd-reset, .linklike { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-dark); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lcd-none { text-align: center; padding: 30px 16px; }
.lcd-none h3 { margin: 0 0 6px; }

/* --- le schede --- */
.lcd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lcd-card {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(11, 11, 15, .45);
  transition: transform .35s cubic-bezier(.34, 1.4, .42, 1), box-shadow .35s;
  animation: lcd-in .5s var(--out, ease-out) both;
}
.lcd-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(11, 11, 15, .5); }
@keyframes lcd-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lcd-card-top { position: relative; display: block; aspect-ratio: 4 / 3.3; background: linear-gradient(150deg, #1a1a22, #0b0b0f); overflow: hidden; }
.lcd-card-top .lcd-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; font-size: 44px; }
.lcd-card-top .lcd-photo img { transition: transform .6s var(--out, ease-out); }
.lcd-card:hover .lcd-card-top .lcd-photo img { transform: scale(1.04); }
.lcd-place {
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink); font-size: 12.5px; font-weight: 700;
}
.lcd-card-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 6px; }
.lcd-card-body h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.lcd-card-body h3 a { color: var(--ink); text-decoration: none; }
.lcd-head { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.lcd-where { margin: 0; }
.lcd-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lcd-tags span { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 11.5px; font-weight: 600; text-transform: capitalize; }
.lcd-tags-soft span { background: var(--surface-2); color: var(--ink-2); }
.lcd-sect { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.lcd-card-foot { display: flex; gap: 8px; padding: 12px 16px 16px; }
.lcd-card-foot .btn { flex: 1; justify-content: center; }

/* --- la foto o le iniziali --- */
.lcd-photo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, #2a2a33, #0b0b0f); color: #fff; flex: none; }
.lcd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lcd-photo b { font-weight: 600; letter-spacing: .02em; }
.lcd-who { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 14px; line-height: 1.45; }
.lcd-who-ph:empty { display: none; }
.lcd-me { margin: 0 0 4px; }

/* --- il profilo --- */
.lcp-head {
  position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 28px; align-items: center;
  padding: 26px; margin: 0 0 20px; border-radius: var(--radius); overflow: hidden;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px -28px rgba(11, 11, 15, .35);
}
.lcp-photo { display: grid; place-items: center; width: 200px; height: 200px; border-radius: 28px; overflow: hidden; background: linear-gradient(150deg, #2a2a33, #0b0b0f); color: #fff; font-size: 56px; box-shadow: 0 24px 40px -24px rgba(11, 11, 15, .6); }
.lcp-photo img { width: 100%; height: 100%; object-fit: cover; }
.lcp-txt .eyebrow { margin: 0 0 4px; color: var(--accent); }
.lcp-txt h1 { margin: 0 0 6px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.lcp-headline { margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
.lcp-place { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 15px; }
.lcp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lcp-actions .muted { max-width: 260px; line-height: 1.4; }
.lcp-map { width: 100%; height: auto; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); --lc-land: #ededf1; --lc-land-line: #fff; }
.lcp-map .lc-land path { fill: #ededf1; stroke: #fff; stroke-width: .6; }
.lcp-halo { fill: var(--accent); opacity: .18; }
.lcp-dot { fill: var(--accent); }
.lcp-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.lcp-card h2, .lcp-card h3 { margin: 0 0 10px; }
.lcp-bio { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.lcp-how ol { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.lcp-more { margin-top: 26px; }
.lcd-mini-list { display: flex; flex-wrap: wrap; gap: 10px; }
.lcd-mini { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .25s; }
.lcd-mini:hover { transform: translateY(-2px); color: var(--ink); }
.lcd-mini span { display: flex; flex-direction: column; line-height: 1.25; }
.lcd-mini small { color: var(--muted); }

/* --- pannello staff --- */
.lc-public { margin: 14px 0; }
.lc-public-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.lc-public-photo .lcd-photo { width: 72px; height: 72px; border-radius: 20px; font-size: 22px; }
.lc-wanted { padding: 10px 12px; border-radius: var(--radius-xs); background: var(--accent-soft); font-size: 14px; }

@media (max-width: 1100px) {
  .lcp-head { grid-template-columns: 160px minmax(0, 1fr); }
  .lcp-photo { width: 160px; height: 160px; }
  .lcp-map { display: none; }
}
@media (max-width: 760px) {
  .lcd-hero { flex-direction: column; align-items: flex-start; }
  .lcd-stats { width: 100%; }
  .lcd-stats div { flex: 1; min-width: 0; }
  .lcp-head { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .lcp-photo { width: 120px; height: 120px; border-radius: 22px; font-size: 38px; }
  .lcp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lcd-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lcd-card-body { padding: 10px 12px 4px; }
  .lcd-card-body h3 { font-size: 15.5px; }
  .lcd-head { font-size: 12.5px; }
  .lcd-sect, .lcd-where { display: none; }
  .lcd-card-foot { flex-direction: column; padding: 10px 12px 12px; gap: 6px; }
  .lcd-place { left: 8px; bottom: 8px; font-size: 11px; padding: 4px 8px; }
}

/* ---------- 46b: ritocchi ---------- */
/* Libreria: i filtri in un pannello che si apre sopra le file, così le file usano tutta la larghezza */
.sez-layout.is-lib { grid-template-columns: minmax(0, 1fr); }
.sez-layout.is-lib .sez-side { position: static; order: -1; margin-bottom: 14px; }
.sez-layout.is-lib .sez-side-sum { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; cursor: pointer; font-weight: 600; font-size: 14px; }
.sez-layout.is-lib .sez-side-sum > span { display: inline-flex; align-items: center; gap: 8px; }
.sez-layout.is-lib .sez-side-sum b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
.sez-layout.is-lib .sez-side-in { max-height: none; padding-top: 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px 24px; }
.sez-layout.is-lib .sez-side-head { grid-column: 1 / -1; justify-content: flex-end; }
.sez-layout.is-lib .sez-side-head h3 { display: none; }
/* Local: un bottone pieno e il link al profilo */
.lcd-card-foot { flex-direction: column; align-items: stretch; gap: 8px; }
.lcd-more { text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.lcd-more:hover { color: var(--accent-dark); }
@media (max-width: 560px) { .lcd-card-foot .btn { font-size: 12.5px; padding-left: 8px; padding-right: 8px; } }

/* ============================================================
   Blocco 46c — la Home nuova
   ============================================================ */
.hm-hero h1 { margin-bottom: 6px; }
.hm-hero-sub { margin: 0 0 18px; color: rgba(255, 255, 255, .72); font-size: 15.5px; }
.home-chip.is-hm { font-weight: 600; }

.hm-next { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; margin: 0 0 22px; }
.hm-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 210px; padding: 20px; border-radius: var(--radius);
  overflow: hidden; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .74); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px -26px rgba(11, 11, 15, .35);
  transition: transform .35s cubic-bezier(.34, 1.4, .42, 1), box-shadow .35s;
}
a.hm-card:hover { transform: translateY(-4px); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 28px 50px -26px rgba(11, 11, 15, .45); }
.hm-lab { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.hm-card strong { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.hm-card > small { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.hm-card-go, .hm-rip-go { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.hm-card-go i, .hm-rip-go i { font-style: normal; display: inline-block; transition: transform .3s cubic-bezier(.34, 1.4, .42, 1); }
a.hm-card:hover .hm-card-go i, a.hm-card:hover .hm-rip-go i { transform: translateX(4px); }

/* riprendi: la copertina del corso dietro */
.hm-rip { background: var(--ink) var(--hm-bg, none) center / cover no-repeat; border-color: var(--ink); color: #fff; justify-content: flex-end; }
a.hm-rip:hover { color: #fff; }
.hm-rip-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 12, .95) 20%, rgba(8, 8, 12, .35) 75%, rgba(8, 8, 12, .2)); }
.hm-rip > *:not(.hm-rip-fade) { position: relative; }
.hm-rip .hm-lab { position: absolute; top: 18px; left: 20px; padding: 5px 11px; border-radius: 999px; background: var(--accent); color: #fff; letter-spacing: .06em; }
.hm-rip-tit { font-size: 22px !important; color: #fff; text-wrap: balance; }
.hm-rip-sub { color: rgba(255, 255, 255, .75); font-size: 13px; }
.hm-rip-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .2); overflow: hidden; margin: 4px 0 6px; }
.hm-rip-bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.hm-rip-go { margin-top: 0; color: #fff; }
.hm-rip-empty { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 24, 78, .55), rgba(255, 24, 78, 0) 60%), var(--ink); justify-content: flex-start; }
.hm-rip-empty .hm-lab { position: static; align-self: flex-start; }
.hm-rip-empty .hm-rip-tit { margin-top: auto; }

/* il prossimo webinar */
.hm-live-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 62px; border-radius: 16px; background: var(--ink); color: #fff; margin: 4px 0 6px; }
.hm-live-date b { font-size: 24px; line-height: 1; }
.hm-live-date small { font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .75; }
.hm-live.is-live .hm-lab { color: var(--accent); }
.hm-live.is-live .hm-live-date { background: var(--accent); }

/* i tuoi numeri */
.hm-nums-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.hm-nums-grid a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--ink); text-decoration: none; transition: background .2s; }
.hm-nums-grid a:hover { background: var(--accent-soft); color: var(--ink); }
.hm-nums-grid b { font-size: 22px; line-height: 1.1; }
.hm-nums-grid small { font-size: 12px; color: var(--muted); font-weight: 600; }
.hm-nudge { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-dark); font-size: 12.5px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.hm-nudge i { font-style: normal; margin-left: auto; }

/* le persone da conoscere */
.hm-people { margin: 6px 0 26px; }
.hm-people-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-person {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 14px 16px; text-align: center; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: transform .3s cubic-bezier(.34, 1.4, .42, 1), box-shadow .3s;
}
.hm-person:hover { transform: translateY(-3px); color: var(--ink); box-shadow: 0 22px 40px -28px rgba(11, 11, 15, .45); }
.hm-person .avatar { margin-bottom: 8px; }
.hm-person strong { font-size: 15px; line-height: 1.25; display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.hm-person small { font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hm-person em { font-style: normal; font-size: 12px; color: var(--muted); }

/* Academy: la ricerca anche quando è vuota */
.acad-find { margin-bottom: 16px; }

@media (max-width: 1100px) {
  .hm-next { grid-template-columns: 1fr 1fr; }
  .hm-rip { grid-column: 1 / -1; min-height: 230px; }
  .hm-people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hm-next { grid-template-columns: 1fr; gap: 10px; }
  .hm-card { min-height: 0; }
  .hm-rip { min-height: 220px; }
  .hm-people-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}
.hm-card.hm-rip > .hm-rip-sub { color: rgba(255, 255, 255, .78); }

/* ============================================================
   Blocco 46c — file senza schede tagliate, percorsi tutti uguali,
   emoji Apple sui dispositivi Apple, Messaggi + contatti
   ============================================================ */

/* --- le file: ci stanno sempre schede intere (4, 3, 2 o 1 secondo lo spazio), mai mezze --- */
@supports (container-type: inline-size) {
  .rail { --rail-gap: 18px; gap: var(--rail-gap); container-type: inline-size; scroll-padding-inline: 4px; }
  .rail > *, .rail > .c-card, .rail-paths > .p-card, .rail-rub > .r-card {
    flex: 0 0 calc((100cqi - 3 * var(--rail-gap)) / 4); width: auto; min-width: 0; max-width: none;
  }
  @container (max-width: 1020px) {
    .rail > *, .rail > .c-card, .rail-paths > .p-card, .rail-rub > .r-card { flex-basis: calc((100cqi - 2 * var(--rail-gap)) / 3); }
  }
  @container (max-width: 700px) {
    .rail > *, .rail > .c-card, .rail-paths > .p-card, .rail-rub > .r-card { flex-basis: calc((100cqi - var(--rail-gap)) / 2); }
  }
  @container (max-width: 470px) {
    .rail > *, .rail > .c-card, .rail-paths > .p-card, .rail-rub > .r-card { flex-basis: 100cqi; }
  }
  @media (max-width: 760px) {
    .rail { --rail-gap: 12px; }
    .rail > *, .rail-paths > .p-card { flex-basis: calc((100cqi - var(--rail-gap)) / 2); }
  }
  @media (max-width: 560px) {
    .rail > *, .rail-paths > .p-card, .rail-rub > .r-card { flex-basis: 100cqi; }
  }
}

/* --- i percorsi: tutti della stessa altezza e misura, sempre --- */
.p-card { height: 292px; min-height: 0; justify-content: flex-start; padding: 30px 20px 20px; }
.p-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: stretch; }
.p-emoji, .p-card .p-mark { width: 84px; height: 84px; margin: 4px 0 16px; }
.p-title {
  font-size: 20px; line-height: 1.2; margin: 0 0 6px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.p-meta { margin-top: auto; }
.p-card .p-out { position: absolute; top: 14px; left: 14px; z-index: 2; }
@media (max-width: 560px) { .p-card { height: 270px; } .p-title { font-size: 19px; } }

/* --- emoji: su iPhone, iPad e Mac sono quelle di Apple, disegnate dal sistema --- */
span.emo.emo-apple {
  display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal;
}
.p-emoji span.emo-apple { display: grid; width: 100%; height: 100%; }
.ex-ico span.emo-apple, .ex-head-flag span.emo-apple, .term-flag span.emo-apple, .emoji-big span.emo-apple, .emoji-btn span.emo-apple { width: 100%; height: 100%; }

/* --- Messaggi: Chat / Contatti e le richieste di contatto --- */
.chat-switch { display: flex; gap: 4px; margin: 0 0 10px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.chat-switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.chat-switch button b { font-size: 11px; color: var(--muted); }
.chat-switch button.is-on { background: #fff; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(11, 11, 15, .45); }
.chat-reqs { margin: 0 0 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.chat-reqs-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--accent-dark); }
.chat-reqs-tit b { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; }
.chat-req, .chat-contact { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.chat-req + .chat-req { border-top: 1px solid rgba(217, 15, 63, .12); }
.chat-contact + .chat-contact { border-top: 1px solid var(--line); }
.chat-req-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.chat-req-who span { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-req-who strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-req-who small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-req-act { flex: none; display: flex; gap: 6px; }
.chat-req-act form { margin: 0; }
.chat-reqs-more { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--accent-dark); }
.chat-contacts { overflow-y: auto; }
.chat-switch, .chat-reqs { margin-left: 14px; margin-right: 14px; }
.chat-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-pane[hidden] { display: none; }
.chat-contacts { padding: 0 18px 14px; }
.chat-req .avatar, .chat-contact .avatar { flex: none; }

/* ---------- 46c: foto dei Local Coordinators rotonde ---------- */
.lcd-photo, .lcp-photo { border-radius: 50% !important; }
.lcd-card-top {
  display: grid; place-items: center; aspect-ratio: auto; height: 190px;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(255, 24, 78, .28), rgba(255, 24, 78, 0) 70%),
    linear-gradient(160deg, #1d1d25, #0b0b0f);
}
.lcd-card-top .lcd-photo {
  position: relative; inset: auto; width: 124px; height: 124px; font-size: 36px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 18px 34px -14px rgba(0, 0, 0, .7);
  transition: transform .45s cubic-bezier(.34, 1.4, .42, 1);
}
.lcd-card:hover .lcd-card-top .lcd-photo { transform: scale(1.05); }
.lcd-card:hover .lcd-card-top .lcd-photo img { transform: none; }
.lcd-place { left: 50%; transform: translateX(-50%); bottom: 10px; white-space: nowrap; }
.lcd-card-body { text-align: center; align-items: center; padding-top: 16px; }
.lcd-tags { justify-content: center; }
.lcp-photo { box-shadow: 0 0 0 5px #fff, 0 24px 40px -20px rgba(11, 11, 15, .6); }
@media (max-width: 560px) {
  .lcd-card-top { height: 150px; }
  .lcd-card-top .lcd-photo { width: 92px; height: 92px; font-size: 28px; }
}
.lcd-promise { margin: 0 0 14px; padding: 9px 12px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-dark); font-size: 13.5px; line-height: 1.4; }

/* ---------- 46d: «Riprendi da dove eri» con la miniatura pulita ---------- */
.hm-rip-v2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); align-items: center; gap: 20px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255, 24, 78, .32), rgba(255, 24, 78, 0) 55%), var(--ink);
}
.hm-rip-v2 .hm-rip-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hm-rip-v2 .hm-lab { position: static; align-self: flex-start; margin-bottom: 6px; }
.hm-rip-v2 .hm-rip-tit { font-size: 20px !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.hm-rip-thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: #22222a center / cover no-repeat; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .45s cubic-bezier(.34, 1.4, .42, 1);
}
.hm-rip-thumb b { font-size: 34px; color: rgba(255, 255, 255, .35); }
.hm-rip-play {
  position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent); color: #fff; box-shadow: 0 10px 20px -8px rgba(255, 24, 78, .8);
}
a.hm-rip-v2:hover .hm-rip-thumb { transform: scale(1.03) rotate(-1deg); }
@media (max-width: 640px) {
  .hm-rip-v2 { grid-template-columns: 1fr; }
  .hm-rip-v2 .hm-rip-thumb { order: -1; }
}
/* l'area del Local Coordinator: il suo profilo pubblico */
.lcme { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.lcme .lcme-photo { width: 110px; height: 110px; font-size: 32px; flex: none; box-shadow: 0 0 0 4px #fff, 0 18px 30px -16px rgba(11, 11, 15, .5); }
.lcme-txt h2 { margin: 2px 0 2px; font-size: 22px; }
.lcme-head { margin: 0 0 6px; color: var(--ink-2); }
.lcme-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 560px) { .lcme { flex-direction: column; text-align: center; } .lcme-act { justify-content: center; } }

/* ============================================================
   BLOCCO 49b — il Direttore scientifico dell'Academy: il più alto
   dei docenti. Nero e oro, con un filo d'oro che corre sul bordo.
   ============================================================ */
.dir-mark {
  color: #f6e3a6; background: linear-gradient(135deg, #1b1712 0%, #3a2d14 55%, #1b1712 100%);
  border: 1px solid rgba(232, 196, 104, .65);
  box-shadow: 0 1px 0 rgba(255, 236, 180, .25) inset, 0 4px 12px -6px rgba(160, 120, 20, .7);
  position: relative; overflow: hidden;
}
.dir-mark svg { fill: #e8c468; }
.dir-mark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 240, 200, .45) 48%, transparent 66%);
  translate: -120% 0; animation: dir-shine 4.5s ease-in-out infinite;
}
@keyframes dir-shine { 0%, 55% { translate: -120% 0; } 100% { translate: 120% 0; } }

.lv-direttore { --lv-a: #3a2d14; --lv-b: #17130d; --lv-c: #0b0b0f; --lv-ink: #f6e3a6; --lv-glow: rgba(232, 196, 104, .35); }
.pcard.lv-direttore { border-color: rgba(232, 196, 104, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 0 1px rgba(232, 196, 104, .25), 0 30px 80px -40px rgba(120, 90, 20, .55), 0 2px 8px -2px rgba(11, 11, 15, .06); }
.lv-direttore .pcard-cover::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 18% 120%, rgba(232, 196, 104, .55), transparent 45%),
    repeating-linear-gradient(115deg, rgba(232, 196, 104, 0) 0 22px, rgba(232, 196, 104, .12) 22px 23px);
}
.lv-direttore .pcard-cover::after { background: linear-gradient(180deg, rgba(11, 11, 15, 0), rgba(11, 11, 15, .35)); }
.lv-direttore .pcard-lvl { color: #f6e3a6; background: rgba(20, 16, 10, .55); border-color: rgba(232, 196, 104, .55); font-weight: 700; letter-spacing: .14em; }
.lv-direttore .pcard-photo .avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #e8c468, 0 0 0 8px rgba(120, 90, 20, .35), 0 22px 44px -18px rgba(120, 90, 20, .65); }
.mcard.lv-direttore { --lv-a: #3a2d14; --lv-b: #1b1712; --lv-c: #0b0b0f; --lv-ink: #7a5a12; border-color: rgba(232, 196, 104, .55); }
.mcard.lv-direttore .mcard-role { color: #f6e3a6; background: linear-gradient(135deg, #1b1712, #3a2d14); border: 1px solid rgba(232, 196, 104, .55); }
.lvl-direttore img { filter: drop-shadow(0 0 4px rgba(232, 196, 104, .8)); }
@media (prefers-reduced-motion: reduce) { .dir-mark::after { animation: none; } }
/* Blocco 49b — la fila dei paesi dei Local si trascina col mouse */
.lcd-chips[data-drag-scroll] { cursor: grab; -webkit-user-select: none; user-select: none; scroll-behavior: auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent); }
.lcd-chips.is-dragging { cursor: grabbing; }
.lcd-chips.is-dragging .lcd-chip { pointer-events: none; }

/* Blocco 49b — Statistiche: «Persone entrate» e «Nuovi professionisti» si aprono e dicono chi */
.stat-click { cursor: pointer; transition: transform .25s var(--out, ease-out), box-shadow .25s; }
.stat-click:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(11, 11, 15, .45); }
.stat-click:focus-visible { outline: 2px solid var(--accent, #ff184e); outline-offset: 3px; }
.stat-chi { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent, #ff184e); opacity: .85; }
.stat-click:hover .stat-chi { opacity: 1; }
.st-dlg { width: min(720px, calc(100vw - 24px)); max-height: min(78vh, 760px); padding: 0; border: 0; border-radius: 24px; background: #fff; color: var(--ink, #0b0b0f);
  box-shadow: 0 40px 100px -30px rgba(11, 11, 15, .55); overflow: hidden; }
.st-dlg[open] { display: flex; flex-direction: column; animation: st-dlg-in .35s cubic-bezier(.16, 1, .3, 1); }
.st-dlg::backdrop { background: rgba(11, 11, 15, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@keyframes st-dlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.st-dlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line, #eceaf0); }
.st-dlg-h .eyebrow { margin: 0 0 4px; }
.st-dlg-h h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.st-dlg-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f2f1f5; cursor: pointer; font-size: 14px; }
.st-dlg-x:hover { background: #e7e5ec; }
.st-dlg-empty { padding: 24px; margin: 0; }
.st-dlg-list { overflow-y: auto; padding: 8px 12px 14px; }
.st-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; }
.st-person:hover { background: #f6f5f9; }
.st-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff184e, #ff6b93); }
.st-who { min-width: 0; display: flex; flex-direction: column; }
.st-who b { font-size: 15px; }
.st-who small { color: var(--muted, #7a7a85); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-num, .st-when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.st-num small, .st-when small { color: var(--muted, #7a7a85); font-size: 11.5px; }
.st-num b { font-size: 17px; }
.st-when b { font-size: 13.5px; font-weight: 600; }
@media (max-width: 600px) {
  .st-person { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .st-when { display: none; }
  .st-dlg-h h2 { font-size: 19px; }
}

/* ============================================================
   BLOCCO 49e — niente ombra sotto le schede (corsi, membri, docenti,
   gruppi, rubriche, webinar): nelle file che scorrono l'ombra veniva
   tagliata e restava un rettangolo grigio. Resta solo un bordo sottile.
   ============================================================ */
.layout-app .c-card, .layout-app .member-card, .layout-app .tutor-card, .layout-app .group-card, .layout-app .r-card, .layout-app .wv-card, .layout-app .p-card,
.layout-admin .c-card, .layout-admin .member-card, .layout-admin .tutor-card, .layout-admin .group-card, .layout-admin .r-card, .layout-admin .wv-card, .layout-admin .p-card,
.c-card, .p-card, .mx-grid .mcard {
  box-shadow: none !important;
  border: 1px solid rgba(11, 11, 15, .07) !important;
}
.c-card:hover, .p-card:hover, .member-card:hover, .tutor-card:hover, .group-card:hover, .r-card:hover, .wv-card:hover, .mx-grid .mcard:hover {
  box-shadow: none !important;
  border-color: rgba(255, 24, 78, .28) !important;
}
.mx-grid .mcard:focus-within { box-shadow: 0 0 0 3px var(--accent-soft) !important; }