/* 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 }
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 }
.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 }
.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 }

/* ---------- 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)) }
.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 }

@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; gap:3px; 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)) }
}

/* ---------- 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 }
/* 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 }