/* Ambra Hub · Lab · Social Lab · Biblioteca
   Stile del cruscotto approvato (AmbraOS/strumenti/cruscotto.py): base shadcn/ui, font Geist,
   neutri zinco, bordi 1px, contenuto SEMPRE su bianco puro. Il colore della barra laterale,
   del banner e della cornice della foto cambia secondo la piattaforma (hub/colori_definitivi.html). */
:root {
  --bg:#ffffff; --fg:#09090b; --muted:#71717a; --border:#e4e4e7; --soft:#fafafa; --ring:#a1a1aa;
  --peach:#f0805a; --peach-bg:#fff1ea; --sage:#2f9e72; --sage-bg:#e9f7f0; --lav:#7c6fd6; --lav-bg:#f1effd;
  --blue:#2f6fe4; --blue-bg:#ebf2fe; --red:#dc3d43; --red-bg:#fdeeee; --amber:#c27a0e; --amber-bg:#fdf5e4; --gray:#71717a; --gray-bg:#f4f4f5;
  --font:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono:"Geist Mono", ui-monospace, monospace;
  --r:12px; color-scheme:light;
  --hub:#002fa7; --lab:#0ea5e9; --soc1:#7b2ff7; --soc2:#e1306c; --soc3:#fcaf45; --bib:#ffa62b; --nero:#231f20;
  /* piattaforma corrente (Hub di base) */
  --pc:var(--hub); --pc-side:var(--hub); --pc-ban:var(--hub); --pc-fg:#fff; --pc-fg2:rgba(255,255,255,.75); --pc-txt:var(--hub); --cornice:var(--hub);
}
.app[data-p="lab"] { --pc:var(--lab); --pc-side:var(--lab); --pc-ban:var(--lab); --pc-txt:#0369a1; --cornice:var(--lab) }
.app[data-p="social"] { --pc:var(--soc1); --pc-side:linear-gradient(180deg,var(--soc1),var(--soc2)); --pc-ban:linear-gradient(120deg,var(--soc1),var(--soc2) 55%,var(--soc3)); --pc-txt:var(--soc1); --cornice:linear-gradient(135deg,var(--soc1),var(--soc2) 55%,var(--soc3)) }
.app[data-p="biblioteca"] { --pc:var(--bib); --pc-side:var(--bib); --pc-ban:var(--bib); --pc-fg:var(--nero); --pc-fg2:rgba(35,31,32,.72); --pc-txt:var(--nero); --cornice:var(--bib) }
.app[data-p="famiglia"] { --pc-side:var(--pc); --pc-ban:var(--pc); --pc-txt:var(--pc); --cornice:var(--pc) }

* { box-sizing:border-box }
html, body { background:var(--bg); margin:0; max-width:100%; overflow-x:clip }
body { color:var(--fg); font:14px/1.5 var(--font); -webkit-font-smoothing:antialiased }
a { color:inherit }
img { max-width:100% }
.app { display:grid; grid-template-columns:256px minmax(0,1fr); min-height:100vh }

/* ---------- barra laterale */
aside.side { background:var(--pc-side); color:var(--pc-fg); padding:18px 12px; position:sticky; top:0; height:100vh; overflow:auto; display:flex; flex-direction:column; gap:20px }
.brand { display:flex; gap:10px; align-items:center; padding:4px 8px; text-decoration:none }
.logo { width:34px; height:34px; border-radius:10px; background:#fff; color:var(--pc-txt); display:grid; place-items:center; font-weight:700; flex:none }
.app[data-p="biblioteca"] .logo { background:var(--nero); color:var(--bib) }
.brand b { display:block; font-weight:600 } .brand span { color:var(--pc-fg2); font-size:12px }
.grp-t { font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--pc-fg2); padding:0 10px 6px }
aside.side nav { display:grid; gap:2px }
aside.side nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:500; color:var(--pc-fg); opacity:.92 }
aside.side nav a:hover { background:rgba(255,255,255,.16); opacity:1 }
aside.side nav a.on { background:#fff; color:var(--pc-txt); box-shadow:0 4px 14px rgba(11,40,120,.2); opacity:1 }
aside.side nav a.sub { padding-left:36px; font-size:13px }
aside.side nav svg, .ico { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
aside.side nav i.pdot { width:10px; height:10px; border-radius:3px; flex:none; box-shadow:0 0 0 1.5px rgba(255,255,255,.75) }
aside.side nav em { margin-left:auto; font-style:normal; font-size:11px; color:var(--pc-fg2); border:1px solid currentColor; border-radius:6px; padding:0 6px }
.me { margin-top:auto; display:flex; gap:10px; align-items:center; padding:10px; background:rgba(255,255,255,.16); border-radius:12px; text-decoration:none }
.me b { display:block; font-size:13px } .me span { font-size:12px; color:var(--pc-fg2) }
.me .cornice { box-shadow:0 0 0 2px #fff }

/* ---------- foto profilo: QUADRATA con angoli 14px e cornice nel colore della piattaforma */
.cornice { display:inline-grid; padding:3px; border-radius:14px; background:var(--cornice); flex:none }
.cornice > * { width:var(--s,32px); height:var(--s,32px); border-radius:11px; display:grid; place-items:center; background:#fff; color:var(--pc-txt); font-weight:700; font-size:calc(var(--s,32px) * .38); object-fit:cover; overflow:hidden }

/* ---------- barra in alto */
main.main { min-width:0 }
.top { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; padding:10px 24px }
.crumb { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .crumb b { color:var(--fg); font-weight:500 } .crumb a { text-decoration:none } .crumb a:hover { color:var(--fg) }
.search { margin-left:auto; position:relative; width:min(320px,45vw) }
.search svg { position:absolute; left:10px; top:50%; translate:0 -50%; width:15px; height:15px; fill:none; stroke:var(--muted); stroke-width:2 }
.search input { width:100%; font:inherit; padding:7px 10px 7px 32px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--fg) }
.search input:focus, .campo:focus { outline:2px solid var(--ring); outline-offset:1px }
.btn { display:inline-flex; align-items:center; gap:6px; font:500 13.5px var(--font); text-decoration:none; padding:7px 12px; border-radius:8px; background:var(--fg); color:#fff; white-space:nowrap; border:1px solid var(--fg); cursor:pointer }
.btn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2 }
.btn.ghost { background:#fff; color:var(--fg); border-color:var(--border) } .btn.ghost:hover { background:var(--soft) }
.btn.ok { background:var(--sage); border-color:var(--sage) } .btn.no { background:#fff; color:var(--red); border-color:#f3c9cb }
.btn.pc { background:var(--pc); border-color:transparent; color:var(--pc-fg) } .app[data-p="social"] .btn.pc { background:var(--pc-ban) }
.btn.sm { padding:4px 10px; font-size:12.5px }
.vedi-come { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); border:1px dashed var(--border); border-radius:8px; padding:3px 6px }
.vedi-come select { font:inherit; border:0; background:transparent; color:var(--fg); font-weight:500 }

/* ---------- contenuto */
.content { padding:28px 24px 64px; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; max-width:1240px }
.content > *, .mainc > *, section { min-width:0 }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start }
.mainc { display:grid; gap:24px; min-width:0 }
.rail { display:grid; gap:16px; position:sticky; top:72px }
.banner { position:relative; overflow:hidden; border-radius:16px; padding:24px 26px; color:var(--pc-fg); background:var(--pc-ban); min-height:118px }
.banner h1 { font-size:26px; font-weight:600; letter-spacing:-.02em; margin:0; position:relative; max-width:calc(100% - 200px) }
.banner p { margin:6px 0 0; color:var(--pc-fg); opacity:.9; max-width:52ch; position:relative }
.banner svg.deco { position:absolute; right:0; top:50%; translate:0 -50%; width:260px; height:164px }
.app[data-p="biblioteca"] .banner svg.deco [fill="#fff"], .app[data-p="biblioteca"] .banner svg.deco g[fill="#fff"] { fill:var(--nero) }
.app[data-p="biblioteca"] .banner svg.deco [stroke="#fff"] { stroke:var(--nero) }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--r); box-shadow:0 1px 2px rgba(0,0,0,.04); min-width:0 }
.kpi { padding:18px }
.kpi-h { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-weight:500; font-size:13px }
.ki { width:30px; height:30px; border-radius:8px; display:grid; place-items:center }
.ki svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
.ki.peach { background:var(--peach-bg); color:var(--peach) } .ki.lav { background:var(--lav-bg); color:var(--lav) } .ki.red { background:var(--red-bg); color:var(--red) } .ki.sage { background:var(--sage-bg); color:var(--sage) } .ki.blue { background:var(--blue-bg); color:var(--blue) }
.kv { font-size:30px; font-weight:600; letter-spacing:-.02em; margin-top:8px; font-variant-numeric:tabular-nums }
.kf { color:var(--muted); font-size:12.5px; margin-top:2px }
.sec-h { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:8px 16px; margin-bottom:12px }
.sec-h h2 { font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0 }
.sec-h p { margin:2px 0 0; color:var(--muted); font-size:13px }
.cols-2 { display:grid; grid-template-columns:1.25fr 1fr; gap:16px }
.pad { padding:18px }
.progress { display:flex; align-items:center; gap:12px; margin-bottom:6px; font-size:13px; color:var(--muted) }
.bar { flex:1; height:8px; border-radius:99px; background:var(--gray-bg); overflow:hidden } .bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--sage),var(--peach)) }
ol.steps { list-style:none; margin:0; padding:0; display:grid }
.st { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--border) }
.st .dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--border); justify-self:center }
.st.green .dot { background:var(--sage); border-color:var(--sage) } .st.blue .dot { border-color:var(--blue) } .st.peach .dot { border-color:var(--peach) } .st.red .dot { border-color:var(--red) } .st.amber .dot { border-color:var(--amber) }
.stx b { display:block; font-weight:500 } .stx span { display:block; color:var(--muted); font-size:12.5px }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:2px 8px; border-radius:6px; white-space:nowrap }
.badge i { width:6px; height:6px; border-radius:50%; background:currentColor }
.badge.green { background:var(--sage-bg); color:#1f7a55 } .badge.blue { background:var(--blue-bg); color:var(--blue) } .badge.amber { background:var(--amber-bg); color:var(--amber) }
.badge.red { background:var(--red-bg); color:var(--red) } .badge.peach { background:var(--peach-bg); color:#b9532f } .badge.gray { background:var(--gray-bg); color:var(--gray) } .badge.lav { background:var(--lav-bg); color:var(--lav) }
.trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.box { padding:16px }
.box h3 { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin:0 0 10px }
.box h3 i { width:8px; height:8px; border-radius:50% }
.box ul { list-style:none; margin:0; padding:0; display:grid; gap:10px }
.box li b { display:block; font-weight:500 } .box li span { display:block; color:var(--muted); font-size:12.5px }
.box ul.plain li { padding-left:14px; position:relative } .box ul.plain li::before { content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--ring) }
.box ul.st3 li { display:flex; gap:10px }
.box + .box { border-top:1px solid var(--border) }
.tag { font:500 11.5px var(--mono); color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:1px 6px; height:max-content; white-space:nowrap }
.toolbar { display:flex; flex-wrap:wrap; gap:6px; align-items:end }
.toolbar button, .toolbar a { font:500 12.5px var(--font); padding:5px 10px; border-radius:8px; border:1px solid var(--border); background:#fff; color:#3f3f46; cursor:pointer; text-decoration:none }
.toolbar [aria-pressed="true"], .toolbar a.on { background:var(--fg); border-color:var(--fg); color:#fff }

/* Social Lab · Ispirazioni: miniature compatte, come la griglia video approvata. */
.inspirations-title { align-items:flex-start }
.inspiration-add { position:relative }
.inspiration-add > summary { list-style:none }
.inspiration-add > summary::-webkit-details-marker { display:none }
.inspiration-add[open] > form { position:absolute; z-index:4; width:min(720px,calc(100vw - 48px)); right:0; margin-top:8px; display:grid; gap:10px; box-shadow:0 14px 35px rgba(9,9,11,.12) }
.inspiration-metrics-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px }
.inspiration-filters { display:flex; gap:10px; align-items:end; flex-wrap:wrap }
.inspiration-filters > div { min-width:190px; flex:1 }
.inspiration-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px 14px }
.inspiration-card { min-width:0 }
.inspiration-thumb { aspect-ratio:16/9; border-radius:9px; overflow:hidden; background:#e9e9ec; display:grid; place-items:center; position:relative; color:#52525b; text-decoration:none }
.inspiration-thumb img { width:100%; height:100%; object-fit:cover }
.inspiration-thumb > span { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.86); display:grid; place-items:center; padding-left:2px }
.inspiration-thumb > b { position:absolute; right:6px; bottom:6px; color:#fff; background:rgba(9,9,11,.82); padding:2px 6px; border-radius:5px; font-size:11.5px }
.inspiration-body { padding:8px 2px 0; display:grid; gap:4px }
.inspiration-name { font-weight:600; line-height:1.35; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.inspiration-channel, .inspiration-numbers { color:var(--muted); font-size:12px }
.inspiration-taxonomy { display:flex; gap:5px; flex-wrap:wrap }
.inspiration-taxonomy span { color:#52525b; background:var(--gray-bg); border-radius:5px; padding:1px 6px; font-size:11.5px }
.inspiration-numbers { display:flex; gap:4px 9px; flex-wrap:wrap }
.inspiration-numbers b { color:#3f3f46; font-weight:500 }
.inspiration-body > .badge { justify-self:start; margin-top:2px }
@media (max-width:760px) { .inspiration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px } .inspiration-metrics-form { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:420px) { .inspiration-grid { grid-template-columns:minmax(0,1fr) } }
.tw { overflow-x:auto; border-top:1px solid var(--border) }
table { width:100%; border-collapse:collapse; min-width:760px }
table.stretto { min-width:0 }
th { text-align:left; font-size:12.5px; font-weight:500; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--border); background:var(--soft) }
td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top }
tr:last-child td { border-bottom:0 } tbody tr:hover { background:var(--soft) }
.tt { font-weight:500 } .ts { color:var(--muted); font-size:12.5px } .ts2 { font-size:13px }
.muted { color:var(--muted); font-size:12.5px } .nowrap { white-space:nowrap }
ul.rows { list-style:none; margin:0; padding:0; border-top:1px solid var(--border) }
ul.rows li { display:flex; gap:12px; padding:12px 18px; border-top:1px solid var(--border) } ul.rows li:first-child { border-top:0 }
.when { font:500 12px var(--mono); color:var(--peach); min-width:7.5em; padding-top:2px }
:focus-visible { outline:2px solid var(--ring); outline-offset:2px }
.profile { padding:20px; text-align:center }
.profile .cornice { margin:0 auto 10px }
.profile b { display:block; font-size:16px } .profile > span { color:var(--muted); font-size:13px }
.profile .pb { text-align:left; margin-top:16px }
.profile .pb small { display:flex; justify-content:space-between; color:var(--muted); font-size:12.5px; margin-bottom:6px }
.minis { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; text-align:left }
.minis div { border:1px solid var(--border); border-radius:10px; padding:10px }
.minis b { font-size:20px; font-weight:600 } .minis span { display:block; font-size:12px }
.chart { padding:18px } .chart h3 { font-size:14px; font-weight:600; margin:0 0 12px }
.donutw { display:flex; gap:16px; align-items:center } .donut { width:120px; height:120px; flex:none }
.donut .dn { font:600 22px var(--font); fill:var(--fg) } .donut .dl { font:500 11px var(--font); fill:var(--muted) }
ul.leg { list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:12.5px; flex:1 }
ul.leg li { display:flex; align-items:center; gap:8px } ul.leg i { width:9px; height:9px; border-radius:3px; flex:none } ul.leg b { margin-left:auto; font-weight:600 }
ul.bars { list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:12.5px }
ul.bars li { display:grid; grid-template-columns:minmax(0,1.3fr) 1fr auto; gap:10px; align-items:center }
ul.bars span { color:#3f3f46; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
ul.bars div { height:8px; background:var(--gray-bg); border-radius:99px; overflow:hidden } ul.bars i { display:block; height:100%; border-radius:99px; background:var(--pc-ban) }

/* ---------- messaggi, moduli, testo */
.avviso { border:1px solid var(--border); border-left:4px solid var(--amber); background:#fff; border-radius:10px; padding:12px 14px; font-size:13.5px }
.avviso.ok { border-left-color:var(--sage) } .avviso.err { border-left-color:var(--red) } .avviso.info { border-left-color:var(--blue) }
.campo { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--fg) }
textarea.campo { min-height:110px; resize:vertical }
label.et { display:block; font-weight:500; font-size:13px; margin:12px 0 6px }
.azioni { display:flex; flex-wrap:wrap; gap:8px; align-items:center }
details.cambia summary { list-style:none; cursor:pointer } details.cambia summary::-webkit-details-marker { display:none }
details.cambia[open] { flex-basis:100% }
.prosa { font-size:14.5px; line-height:1.65; max-width:78ch; overflow-wrap:anywhere }
.prosa h1 { font-size:24px; letter-spacing:-.02em } .prosa h2 { font-size:19px; margin-top:28px } .prosa h3 { font-size:16px }
.prosa table { min-width:0; font-size:13px; display:block; overflow-x:auto } .prosa td, .prosa th { padding:6px 10px; border:1px solid var(--border) }
.prosa code { font:12.5px var(--mono); background:var(--gray-bg); padding:1px 5px; border-radius:5px } .prosa pre { overflow-x:auto; background:var(--soft); padding:12px; border-radius:8px; border:1px solid var(--border) }
.prosa blockquote { border-left:3px solid var(--border); margin:0; padding-left:14px; color:#3f3f46 }
.vuoto { padding:28px; text-align:center; color:var(--muted) } .vuoto b { display:block; color:var(--fg); font-size:15px; margin-bottom:4px }
.kv-list { display:grid; grid-template-columns:180px minmax(0,1fr); gap:10px 16px; margin:0 } .kv-list dt { color:var(--muted); font-size:13px } .kv-list dd { margin:0 }
.pager { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:16px }
.pager .pagination { display:flex; align-items:center; gap:6px; margin:0; padding:0; list-style:none }
.pager .page-link { display:grid; min-width:34px; height:34px; padding:0 9px; place-items:center; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--fg); font-size:13px; line-height:1; text-decoration:none }
.pager .active .page-link { background:var(--fg); border-color:var(--fg); color:#fff }
.pager .disabled .page-link { color:var(--ring); background:var(--soft) }
.pager svg { width:16px; height:16px }

/* Elenchi contatti: colonne fluide e leggibili senza allargare la pagina. */
.contacts-filters > input, .contacts-filters > select { flex:1 1 170px; width:auto; min-width:0 }
.contacts-table { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:#fff }
.contacts-table .tw { overflow:visible; border-top:0 }
.contacts-table table { min-width:0; table-layout:fixed }
.contacts-table th:first-child, .contacts-table td:first-child { width:44px; padding-right:4px }
.contacts-table td { overflow-wrap:anywhere }
.contacts-actions { display:flex; align-items:end; flex-wrap:wrap; gap:8px; padding:12px; border-top:1px solid var(--border) }
.contacts-actions select { flex:1 1 170px; min-width:0 }
@media (max-width:760px) {
  .contacts-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%) }
  .contacts-table tbody, .contacts-table tr, .contacts-table td { display:block; width:100% }
  .contacts-table tr { position:relative; padding:12px 12px 12px 46px; border-bottom:1px solid var(--border) }
  .contacts-table tr:last-child { border-bottom:0 }
  .contacts-table td { border:0; padding:3px 0; min-width:0 }
  .contacts-table td:first-child { position:absolute; left:14px; top:14px; width:auto; padding:0 }
  .contacts-table td[data-label]::before { content:attr(data-label); display:block; color:var(--muted); font-size:11.5px }
}
.inbox-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start }
.inbox-folders { position:sticky; top:72px }
.inbox-folders .box { display:grid; gap:4px }
.inbox-folders .box h3 { margin-bottom:6px }
.inbox-folders a, .inbox-folders .disabled { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:7px 8px; border-radius:8px; text-decoration:none; font-size:12.5px }
.inbox-folders a:hover { background:var(--soft) }
.inbox-folders a.on { color:var(--pc-txt); background:var(--lav-bg); font-weight:600 }
.inbox-folders a b { font-size:11.5px }
.inbox-folders .disabled { color:var(--muted) }
@media (max-width:800px) { .inbox-layout { grid-template-columns:1fr } .inbox-folders { position:static } .inbox-folders .box { grid-template-columns:repeat(2,minmax(0,1fr)) } .inbox-folders .box h3 { grid-column:1/-1 } }

/* ---------- Social Lab: panoramica canali */
.social-heading { display:flex; align-items:end; justify-content:space-between; gap:16px }
.social-heading h1 { margin:0; font-size:24px; letter-spacing:-.02em }
.social-heading p, .channel-toolbar p { margin:3px 0 0; color:var(--muted) }
.social-kpis { grid-template-columns:repeat(4,minmax(0,1fr)) }
.channel-summary-grid { display:grid; grid-template-columns:repeat(6,minmax(140px,1fr)); gap:12px }
.channel-summary { padding:14px; display:grid; grid-template-columns:auto 1fr; gap:0 9px; align-items:center }
.channel-mark { width:9px; height:9px; border-radius:3px; background:var(--channel-color) }
.channel-summary h3 { margin:0; font-size:14px }.channel-summary p { margin:0; color:var(--muted); font-size:12px }
.channel-summary strong { grid-column:1 / -1; margin-top:14px; font-size:20px; font-weight:600 }.channel-summary small { grid-column:1 / -1; color:var(--muted) }
.channel-summary.is-empty { opacity:.68 }
.channel-browser { overflow:hidden }.channel-toolbar { padding:16px 18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-bottom:1px solid var(--border) }
.channel-toolbar h2 { margin:0; font-size:17px }.channel-filters { margin-left:auto; display:flex; flex-wrap:wrap; gap:7px }.channel-filters .campo { padding:6px 9px; width:auto }
.view-switcher { display:flex; border:1px solid var(--border); border-radius:8px; padding:2px }.view-switcher a { padding:4px 9px; border-radius:6px; text-decoration:none; font-size:12.5px }.view-switcher a.on { background:var(--fg); color:#fff }
.channel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 }.channel-card { padding:18px; border-right:1px solid var(--border); border-bottom:1px solid var(--border) }.channel-card:nth-child(3n) { border-right:0 }
.channel-card-head { display:flex; justify-content:space-between; gap:8px; align-items:center }.platform-label { display:inline-flex; gap:7px; align-items:center }.platform-label i { width:9px; height:9px; border-radius:3px; flex:none }
.channel-card h3 { margin:16px 0 2px; font-size:15px }.channel-card > p { margin:0; color:var(--muted); font-size:12.5px }.channel-niche { margin:14px 0; padding:9px 10px; border-radius:8px; background:var(--soft) }.channel-niche b, .channel-niche span { display:block }.channel-niche b { font-size:12.5px }.channel-niche span { color:var(--muted); font-size:12px }
.channel-card dl { margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:8px }.channel-card dl div { min-width:0 }.channel-card dt { color:var(--muted); font-size:11px }.channel-card dd { margin:1px 0 0; font-weight:600; font-variant-numeric:tabular-nums }
.niche-groups { padding:0 18px 18px }.niche-title { display:flex; align-items:center; gap:8px; padding:18px 0 8px }.niche-title h3 { margin:0 }.niche-title span { color:var(--muted) }.niche-groups .channel-grid { border:1px solid var(--border); border-radius:10px; overflow:hidden }.legacy-channels summary { cursor:pointer; padding:14px 18px; font-weight:500 }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ---------- Biblioteca: libreria */
.scaffale { display:grid; grid-auto-flow:column; grid-auto-columns:132px; gap:18px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity }
.griglia-libri { display:grid; gap:22px 18px; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) }
.libro { display:flex; flex-direction:column; gap:7px; text-decoration:none; scroll-snap-align:start; min-width:0 }
.cop { position:relative; aspect-ratio:300/440; border-radius:5px; overflow:hidden; background:var(--gray-bg); box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.08); transition:transform .18s, box-shadow .18s }
.libro:hover .cop { transform:translateY(-3px); box-shadow:0 2px 6px rgba(0,0,0,.1), 0 16px 32px rgba(0,0,0,.14) }
.cop img { width:100%; height:100%; object-fit:cover; display:block }
.cop::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,0) 9%,rgba(255,255,255,.07) 11%,rgba(0,0,0,0) 16%) }
.cop .senza { position:absolute; inset:0; display:grid; place-items:center; padding:10px; text-align:center; font-weight:600; font-size:12px; color:var(--nero); background:linear-gradient(160deg,#fff4e2,#ffd59a) }
.libro .lt { font-size:13px; font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.libro .la { font-size:12px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.libro .lc { font-size:11.5px; color:#b45309; font-weight:600 }
.scheda-libro { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start }
.lettore { font:17px/1.75 Georgia, "Iowan Old Style", serif; max-width:68ch; margin:0 auto }
.lettore p { margin:0 0 1em }
.pdfbox { width:100%; height:80vh; border:1px solid var(--border); border-radius:10px }

/* ---------- Biblioteca: corsi */
.griglia-corsi { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.categoria-corsi { margin:0 0 20px }
.categoria-corsi > summary { cursor:pointer; display:flex; align-items:baseline; gap:8px; margin-bottom:12px; font-size:17px; font-weight:600; list-style-position:inside }
.categoria-corsi > summary small { color:var(--muted); font-size:13px; font-weight:400 }
.corso { text-decoration:none; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; transition:box-shadow .15s, transform .15s }
.corso:hover { box-shadow:0 10px 26px rgba(0,0,0,.08); transform:translateY(-2px) }
.corso .img { aspect-ratio:16/9; background:linear-gradient(135deg,#fff4e2,#ffd59a); display:grid; place-items:center; overflow:hidden }
.corso .img img { width:100%; height:100%; object-fit:cover }
.corso .img span { font-weight:600; color:var(--nero); padding:12px; text-align:center }
.corso .cb { padding:12px 14px; display:grid; gap:6px }
.corso .cb b { font-weight:600; line-height:1.3 } .corso .cb small { color:var(--muted); font-size:12px }
.player { aspect-ratio:16/9; width:100%; background:#0b0b0c; border-radius:12px; overflow:hidden; display:grid; place-items:center; position:relative }
.player video, .player img { width:100%; height:100%; object-fit:contain; background:#0b0b0c }
.player .nota { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:4px 8px; border-radius:6px }
.lezioni { list-style:none; margin:0; padding:0 }
.lezioni li a { display:flex; gap:10px; align-items:center; padding:9px 14px; text-decoration:none; border-top:1px solid var(--border) }
.lezioni li a:hover { background:var(--soft) } .lezioni li a.on { background:var(--gray-bg); font-weight:600 }
.lezioni .num { font:500 12px var(--mono); color:var(--muted); min-width:2.2em }
.lezioni .ic { margin-left:auto; display:flex; gap:6px }
.modulo-h { padding:12px 14px; font-weight:600; background:var(--soft); border-top:1px solid var(--border) }
/* varianti sobrie per piattaforma d'origine */
.stile-canvas .corso-testa { border-left:6px solid #e66000 } .stile-canvas .modulo-h { background:#f5f5f5; text-transform:none; border-left:3px solid #e66000 }
.stile-skool .corso-testa { border-radius:16px } .stile-skool .modulo-h { background:#fff; color:#1f2937; font-size:13px; letter-spacing:.02em } .stile-skool .lezioni li a.on { background:#fef9c3 }
.stile-muccarossa .corso-testa { border-top:5px solid #c81e1e } .stile-muccarossa .modulo-h { color:#c81e1e }
.stile-kajabi .corso-testa { background:#0f172a; color:#fff } .stile-kajabi .corso-testa .muted { color:#cbd5e1 } .stile-kajabi .modulo-h { background:#f8fafc }
.stile-masterclass .corso-testa { background:#000; color:#fff } .stile-masterclass .corso-testa .muted { color:#a1a1aa } .stile-masterclass .modulo-h { background:#111; color:#fff; border-top-color:#111 } .stile-masterclass .player { border-radius:4px }
.corso-testa { padding:20px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:center }
.corso-testa .img { border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,#fff4e2,#ffd59a) } .corso-testa .img img { width:100%; height:100%; object-fit:cover }
.corso-testa h1 { font-size:22px; margin:0 0 4px; letter-spacing:-.01em }

/* pagina lezione corsi: modello RAM */
.ram-lezione { display:grid; gap:18px; max-width:1500px }
.ram-player-wrap { width:min(900px,100%); margin:auto; display:grid; gap:14px }
.ram-player iframe { width:100%; height:100%; border:0 }
.ram-player-link { color:#fff; font-size:18px; font-weight:600; text-decoration:none; padding:24px; text-align:center }
.ram-titolo h1 { margin:0 0 3px; font-size:24px }.ram-titolo > a { font-weight:600 }
.ram-nav { display:flex; gap:8px; margin-top:12px }.ram-nav .btn:last-child { margin-left:auto }
.ram-interruttori { display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.ram-pill { border:1px solid var(--border); border-radius:999px; padding:7px 14px; background:#fff; color:var(--fg); font:600 13px var(--font); cursor:pointer }
.ram-pill[aria-pressed="true"] { background:var(--fg); color:#fff; border-color:var(--fg) }
.ram-colonne { display:grid; grid-template-columns:minmax(210px,.75fr) minmax(320px,1.35fr) minmax(260px,1fr); gap:16px; align-items:start }
.ram-pannello { max-height:72vh; overflow:auto }.ram-pannello[hidden] { display:none }
.ram-colonne:has(.ram-pannello[hidden]) { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.ram-cerca { display:block; margin-bottom:14px }.ram-cerca input { width:100% }
.tempo { border:0; padding:1px 5px; border-radius:5px; background:var(--gray-bg); color:var(--blue); font:600 12px var(--mono); cursor:pointer }
.ram-materiali { display:grid; gap:7px }.ram-materiale { padding:10px 12px; border:1px solid var(--border); border-radius:8px; text-decoration:none }
.ram-anteprima { display:grid; gap:10px; margin-top:12px }.ram-anteprima iframe { width:100%; height:55vh; border:1px solid var(--border); border-radius:8px }.ram-schermo { justify-self:end }
@media (max-width:979px) {
  .ram-lezione { display:flex; flex-direction:column }.ram-player-wrap { position:sticky; top:0; z-index:4; background:var(--bg); width:100%; padding-bottom:8px }
  .ram-colonne { display:flex; flex-direction:column }.ram-pannello { width:100%; max-height:none }
}

@media (max-width:1250px) { .layout { grid-template-columns:minmax(0,1fr) !important } .rail { position:static; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) } }
@media (max-width:1100px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)) } .cols-2, .trio { grid-template-columns:minmax(0,1fr) } }
@media (max-width:760px) {
  .app { grid-template-columns:minmax(0,1fr) } aside.side { min-width:0; max-width:100vw }
  aside.side { position:sticky; top:0; z-index:6; height:auto; flex-direction:row; overflow-x:auto; padding:8px 12px; gap:8px; align-items:center }
  aside.side .brand, aside.side .grp-t, .me { display:none } aside.side > div { display:contents } aside.side nav { display:flex; gap:4px } aside.side nav a { white-space:nowrap } aside.side nav em, aside.side nav a.sub { display:none }
  .top { position:static; padding:10px 16px; flex-wrap:wrap } .search { width:100%; margin-left:0; order:3 } .content { padding:20px 16px 48px }
  .banner { padding:20px } .banner h1 { max-width:none; font-size:22px } .banner svg.deco { opacity:.35; width:200px }
  .scheda-libro, .corso-testa { grid-template-columns:minmax(0,1fr) } .kv-list { grid-template-columns:minmax(0,1fr) } .top > * { min-width:0 } .kpis { grid-template-columns:repeat(2,minmax(0,1fr)) } .kpis { gap:10px }
}

/* foto dei figli accanto alla foto della founder */
.me-w { margin-top:auto; display:grid; gap:8px }
.me-w .me { margin-top:0 }
.figli { display:flex; flex-wrap:wrap; gap:6px; padding:0 4px }
.figli a { display:flex; align-items:center; gap:6px; text-decoration:none; font-size:12px; color:var(--pc-fg); padding:3px 8px 3px 3px; border-radius:10px; background:rgba(255,255,255,.12) }
.figli a:hover, .figli a.on { background:rgba(255,255,255,.28) }
.figli .cornice { padding:2px; border-radius:9px; box-shadow:0 0 0 1.5px #fff } .figli .cornice > * { border-radius:7px }
.me-prof { font-size:12px; color:var(--pc-fg2); text-decoration:none; padding:0 10px } .me-prof:hover { color:var(--pc-fg) }
@media (max-width:760px) { aside.side .me-w { display:none !important } }
.accesso { min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:#fff }

/* ---------- telefono: in alto le pagine della piattaforma, in basso le 4 piattaforme + profilo */
.bottombar { display:none }
@media (max-width:760px) {
  aside.side .grp-piatt { display:none }
  .bottombar { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--border); padding:6px 4px calc(6px + env(safe-area-inset-bottom)) }
  .bottombar a { display:grid; justify-items:center; align-content:center; gap:3px; min-width:44px; min-height:44px; text-decoration:none; font-size:11px; font-weight:500; color:var(--muted); padding:4px 2px; border-radius:10px }
  .bottombar a.on { color:var(--fg); background:var(--gray-bg) }
  .bottombar .pdot { width:18px; height:18px; border-radius:6px; display:block }
  .bottombar a.on .pdot { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--fg) }
  .bottombar svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8 }
  .bottombar .cornice { padding:2px; border-radius:8px } .bottombar .cornice > * { border-radius:6px }
  .content { padding-bottom:96px }
  aside.side { padding-top:calc(8px + env(safe-area-inset-top)) }
}

/* P26 · posta unica e comandi utilizzabili tra 375 e 430 px. */
@media (max-width:430px) {
  .content { padding-inline:12px }
  .top { padding-inline:12px }
  .btn, .btn.sm, button, input[type="button"], input[type="submit"], select.campo { min-height:44px }
  .toolbar { flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin }
  .toolbar a, .toolbar button { display:inline-flex; align-items:center; min-height:44px; flex:none }
  .azioni > .campo, .azioni > form, .azioni > label { min-width:0; max-width:100% }
  .st { grid-template-columns:16px minmax(0,1fr); gap:8px }
  .st > .when, .st > :last-child:not(.stx):not(.dot) { grid-column:2; min-width:0 }
  .card, .box, .pad, .tw { max-width:100% }
  .installa-app { overflow-wrap:anywhere }
}

/* ---------- schede di Lab, Social Lab e Hub (esperimenti, calendario, profili, opportunità) */
.scheda + .scheda { border-top:1px solid var(--border) }
.scheda-h { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; margin-bottom:8px } .scheda-h b { font-weight:600; min-width:0; overflow-wrap:anywhere }
.kv-list.mini { grid-template-columns:150px minmax(0,1fr); gap:6px 12px; font-size:13.5px } .kv-list.mini dd { overflow-wrap:anywhere }
.due { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.giorno { padding:10px 18px 6px; font:600 12.5px var(--font); color:var(--muted); background:var(--soft); border-top:1px solid var(--border) }
.giorno.oggi { color:var(--pc-txt) }
.piatt-g { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.dc { color:var(--muted); font-size:12px; font-style:italic }
.trunc { overflow-wrap:anywhere }
@media (max-width:760px) { .kv-list.mini { grid-template-columns:minmax(0,1fr); gap:2px } .kv-list.mini dd { margin-bottom:6px } .due { grid-template-columns:minmax(0,1fr) } }
/* parole o indirizzi lunghissimi (link incollati) non allargano la pagina sul telefono */
.content p, .content dd, .content li, .content .tt, .content .ts, .scheda, .vuoto { overflow-wrap:anywhere }

/* Conversazioni: ogni vista resta nel contenitore e l'inbox passa da tabella a schede. */
.conversazioni-responsive, .conversazioni-responsive > *, .conversazioni-responsive .box, .conversazioni-responsive .st, .conversazioni-responsive .stx, .conversazioni-responsive form { min-width:0 }
.conversazioni-responsive p, .conversazioni-responsive b, .conversazioni-responsive span, .conversazioni-responsive td, .conversazioni-responsive a { overflow-wrap:anywhere }
.conversazioni-responsive .campo, .conversazioni-responsive textarea, .conversazioni-responsive select { max-width:100% }
.conversazioni-filtri .due { grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)) }
.inbox-responsive { overflow:visible }
.inbox-responsive table { min-width:0; table-layout:fixed }
.inbox-responsive th:nth-child(1) { width:16% }
.inbox-responsive th:nth-child(2) { width:14% }
.inbox-responsive th:nth-child(3) { width:10% }
.inbox-responsive th:nth-child(4) { width:24% }
.inbox-responsive th:nth-child(5) { width:13% }
.inbox-responsive th:nth-child(6) { width:14% }
.inbox-responsive th:nth-child(7) { width:9% }

@media (max-width:900px) {
  .conversazioni-responsive .st { grid-template-columns:minmax(0,1fr) !important }
  .conversazioni-responsive .st > .dot { justify-self:start }
  .inbox-responsive table, .inbox-responsive tbody, .inbox-responsive tr, .inbox-responsive td { display:block; width:100% }
  .inbox-responsive thead { display:none }
  .inbox-responsive tbody { padding:0 14px }
  .inbox-responsive tr { padding:14px 0; border-bottom:1px solid var(--border) }
  .inbox-responsive tr:last-child { border-bottom:0 }
  .inbox-responsive td { display:grid; grid-template-columns:minmax(100px,32%) minmax(0,1fr); gap:10px; padding:5px 0; border:0 }
  .inbox-responsive td::before { content:attr(data-label); color:var(--muted); font-size:12.5px; font-weight:500 }
  .inbox-responsive td[colspan] { display:block; padding:0 }
  .inbox-responsive td[colspan]::before { content:none }
}

@media (max-width:520px) {
  .inbox-responsive td { grid-template-columns:minmax(0,1fr) }
  .conversazioni-responsive .azioni > form, .conversazioni-responsive .azioni > details { max-width:100% }
}
/* Fonti cliccabili (13/10) */
.materiali { margin:0; padding-left:18px; display:grid; gap:6px } .materiali li { overflow-wrap:anywhere }
.materiali .badge { margin-left:6px }
a.link-esterno, a.link-biblioteca { overflow-wrap:anywhere }
.prosa a.link-esterno:not(:has(.badge))::after { content:" ↗"; font-size:.85em; opacity:.6 }
.prosa td a .badge, .prosa td > .badge { margin-left:4px }

/* ---------- Staff: architettura degli agenti (14/10) */
.st-conta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; padding:20px }
.st-num { display:flex; align-items:baseline; gap:10px } .st-num b { font-size:48px; line-height:1; font-weight:700; letter-spacing:-.03em; color:#1f7a55; font-variant-numeric:tabular-nums } .st-num span { font-size:17px; font-weight:600 }
.st-prog { display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:220px }
.st-chip { display:inline-flex; gap:6px; align-items:center; font-size:13px; padding:4px 10px; border-radius:999px; background:var(--sage-bg); color:#1f7a55; font-weight:500 } .st-chip b { font-variant-numeric:tabular-nums }
.st-meta { color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:4px 14px }
.st-liv { margin-top:22px } .st-liv > .sec-h { margin-bottom:10px }
.st-grp-t { font:600 12.5px var(--font); color:var(--muted); margin:14px 0 8px; text-transform:none }
.st-grid { display:grid; gap:12px; align-items:start; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)) }
.st-grid.sb { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) }
.sc { background:#fff; border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--r); padding:12px 14px; display:grid; gap:6px; min-width:0; align-content:start }
.sc.st-lavoro { border-left-color:var(--sage); background:linear-gradient(90deg,#f3fbf7,#fff 40%) } .sc.st-oggi { border-left-color:#e0a82e }
.sc.st-bloccato, .sc.st-errore { border-left-color:var(--red); background:linear-gradient(90deg,#fdf3f3,#fff 40%) } .sc.st-esterno { border-left-color:var(--blue) } .sc.st-pausa { border-left-color:#d4d4d8 }
.sc-h { display:flex; gap:8px; align-items:flex-start; justify-content:space-between } .sc-n { font-weight:600; text-decoration:none; overflow-wrap:anywhere } .sc-n:hover { text-decoration:underline }
.sc-r { color:var(--muted); font-size:12.5px } .sc-x { font-size:13px; overflow-wrap:anywhere } .sc-x b { font-weight:600 } .sc-x .q { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:4px }
.sc-dec { font-size:12.5px; color:#b9532f; background:var(--peach-bg); border-radius:8px; padding:4px 8px }
.sc-a { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:2px }
.sc-risp { font-size:12.5px; border-top:1px dashed var(--border); padding-top:6px } .sc-risp b { font-weight:600 }
.parla[open] { flex-basis:100% } .parla summary { list-style:none } .parla summary::-webkit-details-marker { display:none }
.parla form { display:grid; gap:6px; margin-top:8px } .parla textarea { min-height:80px }
.cmd { display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--muted) } .cmd code { font:500 12.5px var(--mono); background:var(--gray-bg); color:var(--fg); padding:3px 8px; border-radius:6px }
.st-altri > summary { cursor:pointer; list-style:none; display:flex; gap:8px; align-items:center; font:600 13.5px var(--font); padding:10px 0 } .st-altri > summary::-webkit-details-marker { display:none }
.st-altri > summary::before { content:"▸"; color:var(--muted) } .st-altri[open] > summary::before { content:"▾" }
.diretta { font:12.5px/1.45 var(--mono); max-height:340px; overflow:auto; background:#0b0b0f; color:#e4e4e7; border-radius:10px; padding:10px 12px; margin:0; list-style:none }
.diretta li { display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; padding:2px 0; border-bottom:1px solid #1c1c22 } .diretta li:last-child { border-bottom:0 }
.diretta .o { color:#71717a } .diretta .a { color:#7dd3a8 } .diretta .a.ris { color:#a1a1aa } .diretta .n { color:#93c5fd } .diretta .d { color:#e4e4e7; overflow-wrap:anywhere }
.diretta .nuova { animation:lampo 1.2s ease-out } @keyframes lampo { from { background:#1f3a2e } to { background:transparent } }
.diretta-h { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px } .live { display:inline-flex; gap:6px; align-items:center; font-size:12px; color:#1f7a55 } .live i { width:8px; height:8px; border-radius:50%; background:var(--sage); animation:pulsa 1.6s infinite } @keyframes pulsa { 50% { opacity:.3 } }
.msg { border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:grid; gap:6px } .msg + .msg { margin-top:8px } .msg pre { white-space:pre-wrap; font:inherit; margin:0 } .msg .risp { background:var(--sage-bg); border-radius:8px; padding:8px 10px }
@media (max-width:760px) { .st-num b { font-size:40px } .st-grid, .st-grid.sb { grid-template-columns:minmax(0,1fr) } .diretta { max-height:300px } .diretta li { grid-template-columns:52px minmax(0,1fr) } }

/* ---------- Staff: organigramma a livelli (14/10, richiesta di Ambra) — solo CSS, niente librerie */
.org { margin-top:18px; --org-linea:#cfcfd4 }
.org-h { display:flex; align-items:center; gap:12px; padding:10px 14px; margin:0 0 14px; border:1px solid var(--border); border-radius:var(--r); background:linear-gradient(90deg,var(--soft),#fff) }
.org-h h2 { font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0 } .org-h p { margin:1px 0 0; color:var(--muted); font-size:12.5px }
.org-k { width:28px; height:28px; border-radius:50%; background:var(--pc); color:var(--pc-fg); display:grid; place-items:center; font:700 13px var(--font); flex:none }
.org-n { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:7px; align-items:start; padding:9px 10px; background:#fff; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:inherit; min-width:0; font-size:12.5px; line-height:1.3 }
a.org-n:hover { border-color:var(--ring); box-shadow:0 2px 10px rgba(9,9,11,.07) } a.org-n:hover b { text-decoration:underline }
.org-n b { font-weight:600; overflow-wrap:anywhere }
.org-n .org-r, .org-n .org-p, .org-n .org-s { grid-column:2; color:var(--muted); font-size:11.5px; overflow-wrap:anywhere }
.org-n .org-p { color:var(--fg); font-weight:500 } .org-n .org-s { font-size:11px; margin-top:1px }
.org-dot { width:10px; height:10px; border-radius:50%; margin-top:3px; background:#c4c4c9; box-shadow:0 0 0 2px #fff; grid-row:1 }
.org-dot.green { background:var(--sage) } .org-dot.amber { background:#e0a82e } .org-dot.red { background:var(--red) } .org-dot.blue { background:var(--blue) } .org-dot.gray { background:#c4c4c9 }
.org-n.st-lavoro { border-color:#b9e2cd; background:linear-gradient(180deg,#f1faf5,#fff) } .org-n.st-lavoro .org-s { color:#1f7a55; font-weight:600 }
.org-n.st-oggi { border-color:#ecd9a8 } .org-n.st-oggi .org-s { color:var(--amber) }
.org-n.st-bloccato, .org-n.st-errore { border-color:#f1c2c4; background:linear-gradient(180deg,#fdf3f3,#fff) } .org-n.st-bloccato .org-s, .org-n.st-errore .org-s { color:var(--red); font-weight:600 }
.org-n.vuoto { border-style:dashed; background:transparent; grid-template-columns:minmax(0,1fr) } .org-n.vuoto .org-r { grid-column:1 }
.org-n.sb { padding:12px 14px; font-size:14px; border-width:1.5px } .org-n.sb b { font-size:14.5px } .org-n.sb .org-dot { width:12px; height:12px; margin-top:4px }
.org-n.capo b { font-size:13px }
.org-sb { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 10px; margin:0 auto }
.org-giunto { position:relative; height:16px; max-width:720px; margin:0 auto 14px }
.org-giunto::before { content:""; position:absolute; left:calc(25% - 2px); right:calc(25% - 2px); top:0; border-top:2px solid var(--org-linea) }
.org-giunto::after { content:""; position:absolute; left:50%; margin-left:-1px; top:0; height:100%; border-left:2px solid var(--org-linea) }
.org-grid { display:grid; grid-template-columns:repeat(var(--col,8),minmax(0,1fr)); gap:0 10px; align-items:stretch }
.org-grid + .org-grid, .org-grid + .org-liv { margin-top:0 }
.org-cell { display:flex; flex-direction:column; min-width:0; position:relative }
.org-cell > .org-n + .org-n { margin-top:14px }
.org-cell > .org-n + .org-n::before { content:""; position:absolute; left:50%; top:-15px; height:14px; margin-left:-1px; border-left:2px solid var(--org-linea) }
.org-cell.su::before { content:""; display:block; width:2px; height:14px; margin:0 auto; background:var(--org-linea); flex:none }
.org-cell.giu::after { content:""; display:block; width:2px; flex:1; min-height:14px; margin:0 auto; background:var(--org-linea) }
.org-sub { display:none }
.org-vuoto { margin:0 0 14px }
.st-altri-org { margin-top:10px }
@media (max-width:1100px) {
  .org-grid { grid-template-columns:minmax(0,1fr); gap:12px }
  .org-grid .org-cell { gap:8px }
  .org-spec .org-cell, .org-esec .org-cell { border-left:2px solid var(--org-linea); padding-left:12px; margin-left:6px }
  .org-cell.vuota { display:none }
  .org-grid .org-cell.su::before, .org-grid .org-cell.giu::after, .org-grid .org-cell > .org-n + .org-n::before { display:none }
  .org-grid .org-cell > .org-n + .org-n { margin-top:0 }
  .org-sub { display:block; font:600 12px var(--font); color:var(--muted); margin:0 0 -2px }
  .org-giunto { margin-bottom:10px }
}
@media (max-width:760px) { .org-h { padding:9px 12px } .org-h h2 { font-size:15px } .org-n.sb { padding:10px 11px; font-size:13px } .org-n.sb b { font-size:13.5px } }

/* Matrice: settori in riga, progetti in colonna con le schede esistenti. */
.org-liv[aria-labelledby="org-matrice"] .org-grid { grid-template-columns:repeat(var(--col),minmax(0,1fr)) }
.org-liv[aria-labelledby="org-matrice"] .org-cell { gap:12px }
@media (max-width:760px) {
  .org-sb { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .org-liv[aria-labelledby="org-matrice"] .org-grid { grid-template-columns:minmax(0,1fr) }
}
/* Superbrain: i 4 quadrati tutti dello stesso formato (Ambra, 16/10) */
.org-sb { align-items:stretch }
.org-sb > .org-cell > .org-n.sb { height:150px; overflow:hidden; display:flex; flex-direction:column; align-content:start }
.org-sb > .org-cell > .org-n.sb .org-s { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
@media (max-width:760px) { .org-sb > .org-cell > .org-n.sb { height:auto; min-height:120px } }

/* Forma: stessi livelli e colonne, schede compatte con attività espandibile. */
.staff-bussola:where(:not(.staff-classico, .staff-classico *)) { margin-bottom:14px }
.staff-bussola h2:where(:not(.staff-classico, .staff-classico *)) { margin:0; font-size:16px }
.staff-bussola p:where(:not(.staff-classico, .staff-classico *)) { color:var(--muted); font-size:12.5px }
.staff-bussola .sc-a:where(:not(.staff-classico, .staff-classico *)) { gap:10px 20px }
.badge.staff-nuovo:where(:not(.staff-classico, .staff-classico *)) { color:var(--peach); background:var(--peach-bg); border:1px dashed var(--peach) }
.org-n:where(:not(.staff-classico, .staff-classico *)) { display:flex; flex-direction:column; gap:6px; border-left:4px solid var(--gray); background:linear-gradient(90deg,var(--gray-bg),var(--bg) 45%) }
.org-n .sc-a:where(:not(.staff-classico, .staff-classico *)) { gap:4px; min-width:0 }
.org-n .badge:where(:not(.staff-classico, .staff-classico *)) { font-size:10px; padding:2px 5px; white-space:normal }
.org-n .tag:where(:not(.staff-classico, .staff-classico *)) { font-size:10px }
.org-n.st-lavoro:where(:not(.staff-classico, .staff-classico *)), .sc.st-lavoro:where(:not(.staff-classico, .staff-classico *)) { border-left-color:var(--sage); background:linear-gradient(90deg,var(--sage-bg),var(--bg) 45%) }
.org-n.st-oggi:where(:not(.staff-classico, .staff-classico *)), .sc.st-oggi:where(:not(.staff-classico, .staff-classico *)) { border-left-color:var(--amber); background:linear-gradient(90deg,var(--amber-bg),var(--bg) 45%) }
.org-n.st-bloccato:where(:not(.staff-classico, .staff-classico *)), .org-n.st-errore:where(:not(.staff-classico, .staff-classico *)), .sc.st-bloccato:where(:not(.staff-classico, .staff-classico *)), .sc.st-errore:where(:not(.staff-classico, .staff-classico *)) { border-left-color:var(--red); background:linear-gradient(90deg,var(--red-bg),var(--bg) 45%) }
.org-n.st-esterno:where(:not(.staff-classico, .staff-classico *)), .sc.st-esterno:where(:not(.staff-classico, .staff-classico *)) { border-left-color:var(--blue); background:linear-gradient(90deg,var(--blue-bg),var(--bg) 45%) }
.org-n.st-pausa:where(:not(.staff-classico, .staff-classico *)), .org-n.st-fermo:where(:not(.staff-classico, .staff-classico *)), .sc.st-pausa:where(:not(.staff-classico, .staff-classico *)), .sc.st-fermo:where(:not(.staff-classico, .staff-classico *)) { border-left-color:var(--gray); background:linear-gradient(90deg,var(--gray-bg),var(--bg) 45%) }
.staff-attivita:where(:not(.staff-classico, .staff-classico *)) { font-size:12px; min-width:0; overflow-wrap:anywhere }
.staff-attivita summary:where(:not(.staff-classico, .staff-classico *)) { cursor:pointer; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; list-style:none }
.staff-attivita summary:where(:not(.staff-classico, .staff-classico *))::-webkit-details-marker { display:none }
.staff-attivita[open] summary:where(:not(.staff-classico, .staff-classico *)) { display:block; font-size:0 }
.staff-attivita[open] summary b:where(:not(.staff-classico, .staff-classico *)) { font-size:12px }
.staff-attivita[open] > div:where(:not(.staff-classico, .staff-classico *)) { margin-top:4px; white-space:pre-wrap }
.org-n .sc-dec:where(:not(.staff-classico, .staff-classico *)) { font-size:11px; border:1px solid var(--peach); overflow-wrap:anywhere }
.org-n > .org-dot:where(:not(.staff-classico, .staff-classico *)) { position:absolute; top:9px; right:8px; width:6px; height:6px }
.org-n > a:where(:not(.staff-classico, .staff-classico *)), .org-n > b:where(:not(.staff-classico, .staff-classico *)) { padding-right:8px }
.org-sb > .org-cell > .org-n.sb:where(:not(.staff-classico, .staff-classico *)) { height:auto; min-height:190px; overflow:visible; border-left-width:4px; flex:1 }
.org-grid:where(:not(.staff-classico, .staff-classico *)) { grid-template-columns:repeat(var(--col,8),minmax(0,1fr)) }
.org-sb:where(:not(.staff-classico, .staff-classico *)) { grid-template-columns:repeat(4,minmax(0,1fr)) }

/* Scala uniforme delle schede, senza modificare i piani dell’organigramma. */
#staff-albero .sc-n:where(:not(.staff-classico, .staff-classico *)), #staff-albero .org-n > b:where(:not(.staff-classico, .staff-classico *)) { font-size:15px; font-weight:700; color:var(--fg) }
#staff-albero .sc-r:where(:not(.staff-classico, .staff-classico *)), #staff-albero .sc-x:where(:not(.staff-classico, .staff-classico *)), #staff-albero .org-r:where(:not(.staff-classico, .staff-classico *)), #staff-albero .org-p:where(:not(.staff-classico, .staff-classico *)), #staff-albero .staff-attivita:where(:not(.staff-classico, .staff-classico *)), #staff-albero .sc-dec:where(:not(.staff-classico, .staff-classico *)) { font-size:13.5px; color:var(--fg); line-height:1.5 }
#staff-albero .sc-r b:where(:not(.staff-classico, .staff-classico *)), #staff-albero .org-r b:where(:not(.staff-classico, .staff-classico *)), #staff-albero .staff-attivita b:where(:not(.staff-classico, .staff-classico *)) { font-weight:700; font-size:inherit }
#staff-albero .staff-attivita[open] summary:where(:not(.staff-classico, .staff-classico *)) { font-size:13.5px }
#staff-albero .badge:where(:not(.staff-classico, .staff-classico *)), #staff-albero .tag:where(:not(.staff-classico, .staff-classico *)) { font-size:12px }
#staff-albero .org-n .sc-h:where(:not(.staff-classico, .staff-classico *)) { width:100% }
#staff-albero .org-n .sc-h .org-dot:where(:not(.staff-classico, .staff-classico *)) { flex:none; margin-top:6px }
#staff-albero .sc-h .badge:where(:not(.staff-classico, .staff-classico *)) { flex:none }
#staff-albero .org-n.nuovo:where(:not(.staff-classico, .staff-classico *)), #staff-albero .sc.nuovo:where(:not(.staff-classico, .staff-classico *)) { border:1px dashed var(--peach); border-left:4px solid var(--peach); background:linear-gradient(90deg,var(--peach-bg),#fff 45%) }

/* I quattro Superbrain condividono la sfumatura, con il proprio bordo e badge. */
#staff-albero .org-sb .org-n.sb:where(:not(.staff-classico, .staff-classico *)) { background:linear-gradient(90deg,var(--peach-bg),var(--lav-bg) 100%) }

#staff-albero .org-sb .org-n.st-esterno:where(:not(.staff-classico, .staff-classico *)) { border-color:var(--blue) }

/* Gli esecutori occupano tutta la larghezza disponibile, indipendentemente dagli otto reparti. */
#staff-albero .org-grid.org-esec { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px }
#staff-albero .org-esec .org-cell { border:0; margin:0; padding:0 }
#staff-albero .org-esec .org-sub { display:block; margin-bottom:8px }
#staff-albero .org-esec .org-n { min-height:240px; padding:16px; flex:1 }
.staff-vista { margin:18px 0 }
/* Stesso punto di partenza per il pallino e il nome dei quattro Superbrain. */
.org-sb > .org-cell > .org-n.sb { display:grid; grid-template-columns:12px minmax(0,1fr); align-content:start; row-gap:4px }
.org-sb .org-n.sb > b { grid-column:2; grid-row:1 }
/* Superbrain colorati (Ambra 16/10): Ambra fucsia, Strategy giallo, Forma azzurro, Technology blu Hub */
.org-sb > .org-cell:nth-child(1) > .org-n { border-color:#d63384; background:linear-gradient(160deg,#fde4f1,#fff 60%) }
.org-sb > .org-cell:nth-child(2) > .org-n { border-color:#e0a800; background:linear-gradient(160deg,#fff4cc,#fff 60%) }
.org-sb > .org-cell:nth-child(3) > .org-n { border-color:#0ea5e9; background:linear-gradient(160deg,#e0f4fd,#fff 60%) }
.org-sb > .org-cell:nth-child(4) > .org-n { border-color:#2f6fe4; background:linear-gradient(160deg,#e3ecfd,#fff 60%) }
.org-sb > .org-cell > .org-n { border-width:2px }
/* Modalità architettura: linea laterale colorata per stato e sfumatura, come Forma (Ambra 16/10) */
.staff-classico .org-n { border-left:4px solid #d4d4d8 }
.staff-classico .org-n.st-lavoro { border-left-color:var(--sage); background:linear-gradient(90deg,var(--sage-bg),#fff 45%) }
.staff-classico .org-n.st-oggi { border-left-color:#e0a82e; background:linear-gradient(90deg,var(--amber-bg),#fff 45%) }
.staff-classico .org-n.st-bloccato, .staff-classico .org-n.st-errore { border-left-color:var(--red); background:linear-gradient(90deg,var(--red-bg),#fff 45%) }
.staff-classico .org-n.st-esterno { border-left-color:var(--blue); background:linear-gradient(90deg,var(--blue-bg),#fff 45%) }
.staff-classico .org-n.st-pausa, .staff-classico .org-n.st-fermo { border-left-color:#d4d4d8 }
.staff-classico .org-n.nuovo { border:1px dashed var(--peach); border-left:4px solid var(--peach); background:linear-gradient(90deg,var(--peach-bg),#fff 45%) }
.staff-classico .org-n:has(.sc-dec), .staff-classico .org-n.ha-decisioni { border-left-color:var(--peach); box-shadow:0 0 0 2px var(--peach-bg) }
/* Sfumatura leggera del colore della linea su TUTTI i quadrati dello Staff (Ambra 16/10) */
#staff-albero .org-n, #staff-albero .sc { border-left-width:4px }
#staff-albero .org-n.st-pausa, #staff-albero .org-n.st-fermo, #staff-albero .sc.st-pausa, #staff-albero .sc.st-fermo,
#staff-albero .org-n:not([class*="st-"]):not(.nuovo):not(.sb), #staff-albero .sc:not([class*="st-"]):not(.nuovo) { border-left-color:#c4c4cc; background:linear-gradient(90deg,#f1f1f3,#fff 45%) }
#staff-albero .sc.st-oggi { background:linear-gradient(90deg,var(--amber-bg),#fff 45%) }
#staff-albero .sc.st-esterno { background:linear-gradient(90deg,var(--blue-bg),#fff 45%) }
#staff-albero .perc-r, #staff-albero .mx-w { border-left:4px solid var(--hub); background:linear-gradient(90deg,var(--blue-bg),#fff 30%) }
/* Staff: i quadrati dell'architettura identici alle schede .sc di Forma (Ambra 16/10) */
.app:has(#staff-albero) .content, .app:has(#staff-albero) main.main { background:#fafafa }
#staff-albero .org-n { background:#fff; border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--r); padding:12px 14px; box-shadow:none }
#staff-albero .org-n.st-lavoro { border-left-color:var(--sage); background:linear-gradient(90deg,#f3fbf7,#fff 40%) }
#staff-albero .org-n.st-oggi { border-left-color:#e0a82e; background:linear-gradient(90deg,#fdf5e4,#fff 40%) }
#staff-albero .org-n.st-bloccato, #staff-albero .org-n.st-errore { border-left-color:var(--red); background:linear-gradient(90deg,#fdf3f3,#fff 40%) }
#staff-albero .org-n.st-esterno { border-left-color:var(--blue); background:linear-gradient(90deg,#ebf2fe,#fff 40%) }
#staff-albero .org-n.st-pausa, #staff-albero .org-n.st-fermo { border-left-color:#d4d4d8; background:linear-gradient(90deg,#f4f4f5,#fff 40%) }
#staff-albero .org-n.nuovo { border-style:dashed; border-color:var(--peach); border-left:4px solid var(--peach); background:linear-gradient(90deg,var(--peach-bg),#fff 45%) }
#staff-albero .org-n b { font-weight:600; color:var(--fg) }
#staff-albero .org-n .org-r { color:var(--muted); font-size:12.5px }
/* Superbrain: ognuno il suo colore, sempre (Ambra fucsia) — vince sugli stili per stato */
#staff-albero .org-sb > .org-cell:nth-child(1) > .org-n { border-color:#f4b6d6; border-left:4px solid #d63384; background:linear-gradient(90deg,#fde4f1,#fff 55%) }
#staff-albero .org-sb > .org-cell:nth-child(2) > .org-n { border-color:#f3dc8f; border-left:4px solid #e0a800; background:linear-gradient(90deg,#fff4cc,#fff 55%) }
#staff-albero .org-sb > .org-cell:nth-child(3) > .org-n { border-color:#a9dcf5; border-left:4px solid #0ea5e9; background:linear-gradient(90deg,#e0f4fd,#fff 55%) }
#staff-albero .org-sb > .org-cell:nth-child(4) > .org-n { border-color:#b3c9f5; border-left:4px solid #2f6fe4; background:linear-gradient(90deg,#e3ecfd,#fff 55%) }

/* Social Lab: cinque contenuti confrontabili per riga, con pannello di lavoro separato. */
.griglia-filtri { display:grid; grid-template-columns:2fr repeat(5,minmax(110px,1fr)) auto; gap:8px; align-items:end }
.griglia-canale-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:16px; align-items:start }
.griglia-canale { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px }
.griglia-contenuto { min-width:0; overflow:hidden }
.griglia-anteprima { aspect-ratio:4/5; padding:10px; display:flex; flex-direction:column; justify-content:space-between; color:#fff; text-decoration:none; background:linear-gradient(145deg,var(--social),#34206e) }
.griglia-anteprima b { align-self:flex-end; font-size:25px }
.griglia-corpo { padding:10px; display:grid; gap:7px }
.griglia-metriche { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin:0 }
.griglia-metriche div { min-width:0 }
.griglia-metriche dt { color:var(--muted); font-size:10px }
.griglia-metriche dd { margin:0; font-size:12px; font-weight:600 }
.griglia-decisioni { display:flex; flex-wrap:wrap; gap:4px }
.griglia-decisioni .btn { padding:5px 7px; font-size:11px }
.griglia-pannello { position:sticky; top:76px }
.griglia-pannello h3 { margin:12px 0 4px }
.griglia-pannello h3:first-child { margin-top:0 }
@media (max-width:1100px) { .griglia-canale { grid-template-columns:repeat(3,minmax(0,1fr)) } .griglia-filtri { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:760px) { .griglia-canale-layout { grid-template-columns:minmax(0,1fr) } .griglia-pannello { position:static } }
@media (max-width:390px) { .griglia-canale { grid-template-columns:repeat(2,minmax(0,1fr)) } .griglia-filtri { grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* Social Lab: griglia canale e lettura YouTube, sobrie e dentro la barra laterale comune. */
.social-lab-head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px }
.social-lab-head h1, .youtube-head h1 { margin:3px 0; font-size:24px }
.social-lab-head p, .youtube-head p { margin:0; color:var(--muted) }
.eyebrow { color:var(--social); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.social-filtri { display:flex; align-items:end; gap:10px; padding:12px; margin-bottom:14px; flex-wrap:wrap }
.social-filtri label { display:grid; gap:4px; min-width:180px; color:var(--muted); font-size:12px }
.social-filtri .campo { margin:0 }
.social-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px }
.social-tile { overflow:hidden; min-width:0 }
.social-tile.is-selected { border-color:var(--sage); box-shadow:0 0 0 2px var(--sage-bg) }
.social-preview { aspect-ratio:9/11; display:flex; flex-direction:column; justify-content:space-between; padding:10px; color:#fff; text-decoration:none; background:linear-gradient(155deg,#39445c,#68758f) }
.social-preview span { align-self:start; padding:3px 7px; border-radius:99px; background:rgba(0,0,0,.35); font-size:11px }
.social-preview b { font-size:12px }
.social-tile-body { padding:10px }
.social-tile-title { font-weight:700; overflow-wrap:anywhere }
.social-meta { margin:3px 0 7px; color:var(--muted); font-size:11.5px }
.social-tags, .social-actions { display:flex; gap:5px; flex-wrap:wrap }
.social-note { margin:8px 0; padding:8px; border-radius:9px; background:var(--gray-bg); font-size:11.5px }
.social-actions form { margin:0 }
.social-empty { grid-column:1/-1; display:grid; gap:4px; padding:30px; color:var(--muted); text-align:center }
.social-empty b { color:var(--fg) }
.youtube-head { display:flex; align-items:center; gap:14px; padding:16px; margin-bottom:14px }
.youtube-mark { width:58px; height:58px; display:grid; place-items:center; flex:none; border-radius:50%; color:#fff; background:#b4232d; font-size:22px }
.youtube-status { display:grid; justify-items:end; gap:5px; margin-left:auto; color:var(--muted) }
.youtube-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:14px }
.social-tabs { display:flex; gap:6px; margin-bottom:12px; overflow:auto }
.social-tabs span { white-space:nowrap; padding:6px 12px; border:1px solid var(--border); border-radius:99px; background:#fff; font-size:12px; font-weight:600 }
.social-tabs .on { color:#fff; border-color:#9e2530; background:#9e2530 }
.youtube-videos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.youtube-video { overflow:hidden }
.youtube-thumb { aspect-ratio:16/9; display:grid; place-items:center; color:#fff; text-decoration:none; background:linear-gradient(145deg,#334155,#64748b); font-size:24px }
.youtube-video > div { padding:9px; font-size:12px }
.youtube-video p { margin:4px 0 0; color:var(--muted) }
.youtube-rail { display:grid; align-content:start; gap:12px }
.youtube-rail ul { padding-left:18px; font-size:12.5px }
.social-number { display:grid; margin-top:10px; padding:10px; border-radius:10px; background:var(--blue-bg) }
.social-number strong { font-size:22px }
.table-wrap { overflow:auto }
@media(max-width:1200px) { .social-grid { grid-template-columns:repeat(3,minmax(0,1fr)) } .youtube-videos { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:760px) { .social-lab-head { align-items:start; flex-direction:column } .social-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } .youtube-layout { grid-template-columns:minmax(0,1fr) } .youtube-head { align-items:start; flex-wrap:wrap } .youtube-status { width:100%; align-items:start; justify-items:start; margin-left:72px } }
.staff-modalita-bussola .st-grid.sb > .sc:nth-child(1) { border-left-color:#d63384; background:linear-gradient(90deg,#fde4f1,#fff 55%) }

/* Social Lab: viste di regia sobrie derivate dal mockup v3. */
.social-lab-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px }
.social-lab-heading h1 { margin:0; font-size:22px; letter-spacing:-.02em }
.social-lab-heading p { margin:4px 0 0; color:var(--muted) }
.social-lab-kpis { margin:16px 0 }
.social-lab-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 }
.chip { display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12.5px; background:#fff }
.chip.on { background:var(--fg); border-color:var(--fg); color:#fff }
.social-lab-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px }
.social-lab-tile { overflow:hidden }
.social-lab-tile .pad { padding:10px }
.social-lab-tile p { margin:4px 0 0; font-size:12px }
.social-lab-thumb { aspect-ratio:16/9; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--gray-bg),#e4e4e7); color:var(--muted); font-size:11px; font-weight:600 }
.social-lab-tile > .social-lab-thumb { border-radius:0 }
.social-lab-strip { display:grid; grid-auto-flow:column; grid-auto-columns:200px; gap:12px; overflow-x:auto; padding-bottom:10px }
.social-lab-strip article { display:grid; gap:7px; align-content:start; font-size:13px }
.social-lab-strip .btn { justify-self:start }
@media (max-width:1100px) { .social-lab-grid { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:760px) { .social-lab-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } .social-lab-strip { grid-auto-columns:150px } }
@media (max-width:1100px) { .channel-summary-grid { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:800px) { .social-heading { align-items:start; flex-direction:column } .channel-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } .channel-grid { grid-template-columns:minmax(0,1fr) } .channel-card, .channel-card:nth-child(3n) { border-right:0 } .channel-filters { margin-left:0; width:100% } .channel-filters label { flex:1 } .channel-filters .campo { width:100% } .view-switcher { width:100% } .view-switcher a { flex:1; text-align:center } }
/* Social Lab · calendario settimanale: struttura del mockup 03, colori sobri dell'Hub. */
.social-cal-head{align-items:flex-end}.social-cal-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0}.social-cal-tools>.campo{width:auto;min-width:150px;padding:6px 9px;font-size:12.5px}.social-cal-legend{display:flex;flex:1;flex-wrap:wrap;gap:5px}.social-cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}.social-week{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));border:1px solid var(--border);overflow:auto;background:#fff}.social-day{min-height:390px;border-right:1px solid var(--border);display:flex;flex-direction:column}.social-day:last-child{border-right:0}.social-day h3{margin:0;padding:8px;font-size:12.5px;background:var(--soft);border-bottom:1px solid var(--border)}.social-day h3 span{display:block;color:var(--muted);font-size:11px;font-weight:400}.social-day.today h3{background:var(--fg);color:#fff}.social-day.today h3 span{color:#ddd}.social-slot{padding:8px 7px;border-bottom:1px solid var(--border);border-left:4px solid var(--gray);font-size:11.5px}.social-slot.state-peach,.social-slot.state-amber{border-left-color:#d4a62a}.social-slot.state-green{border-left-color:var(--sage)}.social-slot.state-blue,.social-slot.state-lav{border-left-color:var(--blue)}.social-slot.state-red{border-left-color:var(--red)}.social-slot b{display:block;line-height:1.3}.social-slot small{color:var(--muted)}.social-channel{display:flex;flex-wrap:wrap;gap:3px;margin:5px 0}.social-channel span{border:1px solid var(--border);padding:1px 4px;background:#fff;font-size:10px}.social-empty{color:var(--muted);font-size:11px;padding:8px;margin:auto 0}.social-approval{border:1px solid var(--border);background:#fff;position:sticky;top:74px}.social-approval-head{padding:11px 12px;border-bottom:1px solid var(--border)}.social-approval-head h3,.social-approval-head p{margin:0}.social-approval-head p{color:var(--muted);font-size:11.5px}.social-approval-item{padding:11px 12px;border-bottom:1px solid var(--border);font-size:12px}.social-approval-item label{display:flex;gap:6px;align-items:flex-start}.social-approval-item p{color:var(--muted);margin:5px 0}.social-approval-foot{padding:11px 12px;background:var(--soft)}.social-approval-foot p{color:var(--muted);font-size:11px;margin:7px 0 0}.social-new{margin-top:16px}.social-new summary{cursor:pointer}.social-new form{max-width:720px;margin-top:12px}@media(max-width:1100px){.social-cal-layout{grid-template-columns:1fr}.social-approval{position:static}.social-week{grid-template-columns:repeat(7,minmax(135px,1fr))}}@media(max-width:760px){.social-week{grid-template-columns:1fr;overflow:visible}.social-day{min-height:0;border-right:0;border-bottom:1px solid var(--border)}.social-empty{margin:0}.social-cal-tools>*{flex-basis:100%}.social-cal-tools>.campo{width:100%}}
/* Social Lab: scheda di replica, layout sobrio a due colonne come i mockup. */
.replica-layout { grid-template-columns:minmax(0,1fr) 320px }
.replica-rules { margin:0; padding-left:18px; display:grid; gap:10px; color:#3f3f46; font-size:13px; line-height:1.45 }
/* Ambra Lab · il cantiere approvato il 15/10. */
.cantiere{font:13px/1.45 -apple-system,"Helvetica Neue",Arial,sans-serif;color:#111;max-width:1280px;margin:auto;min-width:0}.cantiere *{box-sizing:border-box;border-radius:0!important;overflow-wrap:anywhere}.cantiere h1{font-size:17px;margin:0 0 4px}.cantiere h2,.cantiere h3{font-size:13px;margin:0 0 8px}.cantiere p{margin:0 0 8px}.cantiere a{color:inherit}.lab-muted{color:#6b6b6b;font-size:11.5px}.lab-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:12px 0}.lab-tools label{font-size:11px}.cantiere input:not([type=checkbox]),.cantiere select,.cantiere textarea{display:block;border:1px solid #dcdcdc;background:#fff;color:#111;padding:6px 8px;font:inherit;max-width:100%;min-width:0}.lab-tools input[type=search]{flex:1;min-width:180px}.cantiere .btn{background:#fff;color:#111;border:1px solid #111;font-size:12px;padding:4px 8px;min-height:30px}.cantiere .btn:hover,.lab-tabs a.on{outline:1px solid #111}.lab-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.lab-panel{border:1px solid #111;padding:10px;margin-bottom:12px;min-width:0}.lab-panel h2{display:flex;justify-content:space-between}.lab-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lab-mini-card{display:block;border:1px solid #dcdcdc;padding:8px;text-decoration:none}.lab-mini-card small,.lab-mini-card span{display:block;font-size:11px;color:#6b6b6b}.lab-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.lab-tabs a{border:1px solid #dcdcdc;padding:5px 9px;text-decoration:none;font-size:12px}.lab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.lab-group{text-transform:uppercase;letter-spacing:.06em;color:#6b6b6b;margin:16px 0 8px!important}.lab-card{border:1px solid #dcdcdc;border-top:4px solid #9a9a9a;display:flex;flex-direction:column;min-width:0;background:#fff}.lab-card[data-stato="in lavorazione"]{border-top-color:#2f6fe4}.lab-card[data-stato="pronto da lanciare"]{border-top-color:#2f9e72}.lab-card[data-stato="in rifacimento"]{border-top-color:#b26a00}.lab-card[data-stato="in revisione da Ambra"]{border-top-color:#7c6fd6}.lab-image{aspect-ratio:16/10;background:linear-gradient(160deg,#ececec,#d2d2d2);position:relative;display:grid;place-items:center;font-size:11px;color:#444}.lab-image img{width:100%;height:100%;object-fit:cover;position:absolute}.lab-type,.lab-state{position:absolute;top:6px;left:6px;background:#fff;border:1px solid #dcdcdc;padding:1px 5px;font-size:10px;max-width:65%}.lab-state{left:auto;right:6px;top:30px}.lab-body{padding:8px;font-size:12px}.lab-stars,.lab-ask{color:#b26a00;font-size:11px}.lab-ask{border:1px solid #b26a00;padding:1px 5px}.lab-actions{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px;margin-top:auto}.lab-more{text-align:center;margin:16px}.lab-head{display:grid;grid-template-columns:1fr 320px;border:1px solid #dcdcdc;padding:12px;gap:16px}.lab-head ol{padding-left:18px}.lab-percent{font-size:22px}.lab-head progress{width:100%;height:8px;accent-color:#111}.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:14px;margin-top:14px}.lab-layout .lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-review{border:1px solid #111;position:sticky;top:14px}.lab-review>h2{padding:10px;border-bottom:1px solid #dcdcdc}.lab-review small{font-weight:400;color:#6b6b6b;display:block}.lab-preview{background:#f6f6f6;border:1px solid #dcdcdc;margin:10px;padding:12px}.lab-note{border:1px solid #dcdcdc;padding:8px;margin:6px 0}.lab-note.closed{opacity:.65}.lab-new-note{border:1px solid #111;padding:8px;margin:10px 0}.lab-new-note label{display:block;margin-bottom:8px}.lab-new-note input,.lab-new-note textarea{width:100%}.lab-new-note textarea{min-height:80px;resize:vertical}
@media(min-width:1100px){.app[data-p=lab]{grid-template-columns:180px minmax(0,1fr)}.app[data-p=lab] .content{padding:16px}}
.lab-message{border-bottom:1px solid #dcdcdc;padding:8px 0}.lab-message:last-child{border-bottom:0}.lab-message>p:first-child{color:#6b6b6b;font-size:11px}.lab-new-message{display:grid;gap:8px;margin:12px 0}.lab-new-message textarea{min-height:80px;resize:vertical;width:100%}.lab-new-message .btn{justify-self:start}
@media(max-width:1100px){.lab-layout{grid-template-columns:1fr}.lab-review{position:static}.lab-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.lab-head{grid-template-columns:1fr}}
@media(max-width:800px){.lab-two{grid-template-columns:1fr}.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.lab-grid,.lab-layout .lab-grid,.lab-mini{grid-template-columns:1fr}.lab-tools>*{max-width:100%}.lab-tools select{width:100%}.lab-tools label{flex:1 1 130px}.lab-head{padding:10px}.lab-layout{min-width:0}}

/* ---------- AmbraManyChat Lab: stile Social Lab v3 (isolato) */
.lab-tool {
  --pc:var(--soc1);
  --pc-ban:linear-gradient(120deg,var(--soc1),var(--soc2) 55%,var(--soc3));
  box-sizing:border-box;
  width:100%;
  max-width:1240px;
  min-height:100vh;
  margin:0;
  padding:28px 24px 64px;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;
}
.lab-tool *, .lab-tool *::before, .lab-tool *::after { box-sizing:border-box }
.lab-tool > nav {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin:-28px -24px 24px;
  padding:10px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
}
.lab-tool > nav a {
  margin:0;
  padding:6px 10px;
  border-radius:8px;
  color:#3f3f46;
  font-size:12.5px;
  font-weight:500;
  text-decoration:none;
}
.lab-tool > nav a:hover { background:var(--soft); color:var(--fg) }
.lab-tool > h1, .lab-tool > header h1 {
  margin:0;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
}
.lab-tool > h1 + p, .lab-tool > header p { color:var(--muted) }
.lab-tool h2 { margin:0 0 12px; font-size:17px; font-weight:600; letter-spacing:-.01em }
.lab-tool h3 { font-size:14px; font-weight:600 }
.lab-tool section, .lab-tool article, .lab-tool aside, .lab-tool .result, .lab-tool .boardwrap {
  margin:16px 0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.lab-tool label { color:#3f3f46; font-size:13px; font-weight:500 }
.lab-tool input:not([type="checkbox"]):not([type="radio"]),
.lab-tool select,
.lab-tool textarea {
  max-width:100%;
  margin:5px 0;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--fg);
  font:inherit;
}
.lab-tool textarea { width:100%; min-height:110px; resize:vertical }
.lab-tool button, .lab-tool a.btn {
  display:inline-flex;
  min-height:0;
  margin:5px 4px 5px 0;
  padding:7px 12px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--fg);
  font:500 13.5px var(--font);
  text-decoration:none;
  cursor:pointer;
}
.lab-tool button:hover { background:var(--soft) }
.lab-tool button.primary, .lab-tool form button[type="submit"] { border-color:transparent; background:var(--pc-ban); color:#fff }
.lab-tool fieldset { margin:14px 0; padding:14px; border:1px solid var(--border); border-radius:10px }
.lab-tool fieldset:disabled { background:var(--soft); color:var(--muted) }
.lab-tool .tag { border-color:var(--border); border-radius:6px; font:500 11.5px var(--mono) }
.lab-tool table { width:100%; min-width:600px; border-collapse:collapse }
.lab-tool section:has(> table) { overflow-x:auto }
.lab-tool th { padding:10px 14px; border-bottom:1px solid var(--border); background:var(--soft); color:var(--muted); font-size:12.5px; font-weight:500; text-align:left }
.lab-tool td { padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top }
.lab-tool tbody tr:hover { background:var(--soft) }
.lab-tool #status[role="status"] { min-height:38px; padding:9px 12px; border-left:4px solid var(--sage); border-radius:8px; background:var(--sage-bg) }
.lab-tool .workspace { padding:0 }
.lab-tool--percorsi { max-width:none }
.lab-tool--percorsi header, .lab-tool--percorsi .tools, .lab-tool--percorsi .leads { padding:14px 0 }
.lab-tool--percorsi .workspace aside { margin:0 }
.lab-tool--percorsi .boardwrap { margin:0; padding:0 }
.lab-tool--percorsi .block { border-color:var(--border); box-shadow:0 1px 2px rgba(0,0,0,.06) }
@media (max-width:760px) {
  .lab-tool { padding:20px 12px 48px }
  .lab-tool > nav { margin:-20px -12px 20px; padding:8px 12px; overflow-x:auto; flex-wrap:nowrap }
  .lab-tool > nav a { white-space:nowrap }
  .lab-tool section, .lab-tool article, .lab-tool aside, .lab-tool .result { padding:14px }
}
/* Automazioni Lab: composizione sulle primitive Social Lab v3. */
.automazioni-page{display:grid;gap:18px}.automazioni-page .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.automazioni-page .page-head h1{margin:2px 0}.automazioni-page .eyebrow{color:var(--muted);font:600 11px Geist Mono,monospace;letter-spacing:.08em;text-transform:uppercase}.automation-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.automation-row small,.automation-rule footer span{display:block;color:var(--muted);margin-top:4px}.automation-form{display:grid;gap:12px}.automation-form label{display:grid;gap:6px;font-size:13px;font-weight:600}.automation-form .check,.automation-stop label{display:flex;align-items:center;gap:7px}.automation-form fieldset{display:grid;gap:10px;border:1px solid var(--border);border-radius:12px;padding:13px}.automation-form legend{padding:0 6px;font-weight:700}.automation-form input,.automation-form select,.automation-form textarea{width:100%}.automation-stop{display:grid;gap:8px;color:var(--muted);font-size:13px}.automation-rule{padding:14px 0;border-bottom:1px solid var(--border)}.rule-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px}.rule-flow span{padding:10px;border-radius:10px;background:var(--soft)}.rule-flow small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.automation-rule footer{display:flex;align-items:center;gap:12px;margin-top:9px}.automation-rule footer .badge{margin-left:auto}.table-wrap{overflow:auto}.automazioni-page table{width:100%;border-collapse:collapse}.automazioni-page th,.automazioni-page td{padding:11px;text-align:left;border-bottom:1px solid var(--border);font-size:13px}@media(max-width:760px){.rule-flow{grid-template-columns:1fr}.rule-flow i{transform:rotate(90deg);text-align:center}.automation-rule footer{align-items:flex-start;flex-direction:column}.automation-rule footer .badge{margin-left:0}}

/* ---------- Conversazioni: sottomenu raggruppato per argomento */
.sottomenu-gruppi { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center }
.sottomenu-gruppo { align-items:center; gap:4px }
.sottomenu-gruppo > b { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:2px }

.me-azioni { display:flex; align-items:center; justify-content:space-between } .me-esci { background:none; border:0; cursor:pointer; font:inherit }

/* Biblioteca · Esperti: mockup approvato il 21/10. */
.esperti-page { max-width:1180px; width:100%; margin:0 auto }
.esperti-page .esperti-nav { font-size:13px; color:var(--muted); margin-bottom:10px }
.esperti-page .esperti-nav b { color:var(--fg) }
.esperti-page a { text-decoration:none }
.esperti-page .banner { background:linear-gradient(120deg,#fff4e0,#ffe2b8); color:var(--fg); margin-bottom:18px; min-height:0 }
.esperti-page .banner h1 { max-width:none; font-weight:700 }
.esperti-page .banner p { max-width:62ch; color:var(--fg); opacity:1 }
.esperti-page .tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px }
.esperti-page .tab { padding:6px 12px; border:1px solid var(--border); border-radius:99px; font-size:13px; background:#fff; color:var(--fg) }
.esperti-page .tab.on { background:var(--fg); color:#fff; border-color:var(--fg) }
.esperti-page .sec-h { margin:22px 0 12px }
.esperti-page .novita { display:grid; gap:10px }
.esperti-page .nv { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--border); border-radius:var(--r); padding:12px 14px }
.esperti-page .av { width:44px; height:44px; flex:none; border-radius:50%; background:var(--soft); border:1px solid var(--border); display:grid; place-items:center; font-weight:600; color:var(--muted) }
.esperti-page .nv small, .esperti-page .esp small { color:var(--muted) }
.esperti-page .nv b, .esperti-page .esp-top b { display:block }
.esperti-page .pill { font-size:12px; padding:3px 9px; border-radius:99px; white-space:nowrap }
.esperti-page .p-new { background:var(--blue-bg); color:var(--blue) }
.esperti-page .p-try { background:var(--amber-bg); color:var(--amber) }
.esperti-page .p-ok { background:var(--sage-bg); color:var(--sage) }
.esperti-page .p-no { background:var(--red-bg); color:var(--red) }
.esperti-page .btns { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.esperti-page .btn { font:400 12px/1.5 var(--font); padding:4px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--fg) }
.esperti-page .btn[aria-pressed="true"] { border-color:var(--fg) }
.esperti-page .griglia { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)) }
.esperti-page .esp { border:1px solid var(--border); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:8px; overflow-wrap:anywhere }
.esperti-page a.esp:hover { border-color:var(--muted) }
.esperti-page .esp-top { display:flex; gap:12px; align-items:center }
.esperti-page .esp ul { margin:0; padding-left:18px; color:#333 }
.esperti-page .meta { display:flex; gap:6px; flex-wrap:wrap }
.esperti-page .ph { color:var(--muted); font-style:italic }
.esperti-page .riassunto { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line }
.esperti-page .aggiungi { border-style:dashed; justify-content:center; align-items:center; color:var(--muted); text-align:center }
.esperti-page .testo { white-space:pre-wrap; overflow-wrap:anywhere }
@media(max-width:640px) { .esperti-page .nv { grid-template-columns:44px minmax(0,1fr) } .esperti-page .nv > .pill { grid-column:2; justify-self:start } }