/* ===================================================================
   AppAgenti 2.0 — Stile condiviso · Direzione "Console"
   Usato da tutte le pagine mockup. Font Montserrat + design system.
   =================================================================== */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(montserrat.woff2) format('woff2');
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--text)}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

:root{
  --navy:#123c6e;--navy-2:#0c2a50;--ink:#0b1e38;
  --paper:#fbfaf6;--bg:#eef1f5;--gold:#b8892b;--gold-soft:#e7cf95;
  --line:#e2e6ec;--text:#1a2536;--muted:#6a7282;
  --cat-rizzoli:#123c6e;--cat-oxford:#14507a;--cat-hub:#2e7d46;--cat-form:#a9781f;--cat-social:#b23a6b;
}

/* logo */
.logo{display:inline-flex;flex-direction:column;line-height:1;text-decoration:none}
.logo .r{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:.01em}
.logo .e{font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase}

/* ---------------- Scocca ---------------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--navy);color:#cdd8ea;position:sticky;top:0;height:100vh;padding:24px 16px;display:flex;flex-direction:column}
.side .brand{padding:0 8px 22px}
.side .r{font-size:24px;color:#fff}
.side .e{font-size:8.5px;letter-spacing:.42em;color:var(--gold-soft);margin-top:3px}
.side nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.side nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;color:#aebdd6;text-decoration:none;font-size:14px;font-weight:600}
.side nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.side nav a.on{background:rgba(255,255,255,.12);color:#fff}
.side nav a.on svg{color:var(--gold-soft)}
.side .user{margin-top:auto;display:flex;align-items:center;gap:11px;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.1)}
.side .user .av{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#22160a;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.side .user b{color:#fff;font-size:13px;font-weight:600;display:block}
.side .user span{font-size:11px;color:#93a3bf}

.main{min-width:0}
.topbar{position:sticky;top:0;z-index:30;background:rgba(238,241,245,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:16px 28px 0}
.topbar.plain{padding-bottom:16px}
.tb-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.tb-head .h{font-size:22px;font-weight:700;color:var(--navy-2);margin:0}
.tb-head .sub{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px}
.back{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--navy-2);text-decoration:none}
.back:hover{border-color:#cdd6e2}
.crumb{font-size:13px;color:var(--muted);font-weight:500}
.crumb b{color:var(--text);font-weight:600}
.tb-act{margin-left:auto;display:flex;gap:8px;align-items:center}

.search{position:relative;width:min(320px,42vw)}
.search input{width:100%;border:1px solid #d7dde6;background:#fff;border-radius:10px;padding:10px 14px 10px 38px;font:inherit;font-size:14px;color:var(--text)}
.search svg{position:absolute;left:12px;top:11px;color:var(--muted)}

.iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;flex:none}
.iconbtn:hover{color:var(--navy);border-color:#cdd6e2}
.iconbtn.on{color:var(--cat-social);border-color:var(--cat-social)}

/* bottoni */
.btn{border:1px solid var(--line);background:#fff;color:var(--navy-2);border-radius:10px;padding:11px 16px;font-size:13.5px;font-weight:600;display:inline-flex;gap:8px;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:#cdd6e2}
.btn-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-primary:hover{background:#0e3160}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#22160a}
.btn-block{width:100%}

/* chips filtro */
.chips{display:flex;align-items:center;gap:8px;padding-bottom:16px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1px solid #d7dde6;background:#fff;color:#4a5566;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-fav{margin-left:auto;display:inline-flex;gap:7px;align-items:center;border:1px solid #d7dde6;background:#fff;color:#4a5566;border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;white-space:nowrap}
.chip-fav.on{color:var(--cat-social);border-color:var(--cat-social)}

/* app bar mobile + bottom nav */
.appbar,.bottombar{display:none}

/* ---------------- Lista news ---------------- */
.wrap{max-width:1100px;margin:0 auto;padding:20px 28px 40px}
.feed{display:flex;flex-direction:column;gap:12px}
.ncard{display:grid;grid-template-columns:104px 1fr auto;gap:16px;background:#fff;border:1px solid #e6e9ee;border-radius:14px;padding:14px;align-items:center;cursor:pointer;transition:.15s;position:relative;text-decoration:none;color:inherit}
.ncard:hover{box-shadow:0 8px 24px -12px rgba(18,60,110,.35);border-color:#d3dbe6;transform:translateY(-1px)}
.ncover{width:104px;height:80px;border-radius:9px;flex:none}
.ncover .cr{font-size:16px}.ncover .ce{font-size:5.5px;letter-spacing:.24em;margin-top:2px}
.nbody{min-width:0}
.nrow{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:6px}
.lv{font-size:10px;font-weight:600;color:var(--muted);background:var(--bg);border-radius:5px;padding:2px 7px}
.unread{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block}
.ntitle{font-size:15.5px;font-weight:600;line-height:1.32;color:var(--navy-2);margin:0 0 8px;text-wrap:balance}
.nmeta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);font-weight:500}
.nmeta .av{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.heart{align-self:flex-start;color:#c2cad6;background:transparent;border:0;padding:6px}
.heart.on{color:var(--cat-social)}
.spin{display:flex;justify-content:center;padding:22px 0}
.spin i{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--navy);border-top-color:transparent;animation:sp .7s linear infinite;opacity:.4}
@keyframes sp{to{transform:rotate(360deg)}}
.endmsg{text-align:center;font-size:12.5px;letter-spacing:.06em;padding:26px 0 10px;opacity:.55;font-weight:600}
.empty{text-align:center;padding:60px 20px;opacity:.6;font-weight:500}

/* copertine brand (arte segnaposto) */
.cover{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;text-align:center}
.cover .cr{font-family:Georgia,serif;font-weight:500;line-height:.9}
.cover .ce{font-family:'Montserrat';font-weight:600;text-transform:uppercase;opacity:.9}
.cover.b-rizzoli{background:linear-gradient(150deg,#153f72,#0e2c52)}
.cover.b-paripasso{background:linear-gradient(150deg,#d6203a,#a01126)}
.cover.b-hub{background:linear-gradient(150deg,#123536,#0a2223)}
.cover.b-hub .cr{font-family:'Montserrat';font-weight:800;text-transform:lowercase;color:#a4d81f}
.cover.b-oxford{background:linear-gradient(150deg,#0f2f5e,#0a1f42)}
.cover.b-oxford .cr{font-family:Georgia,serif;letter-spacing:.02em}
.cover.b-social{background:linear-gradient(135deg,#7a2ff2,#c0367a 55%,#f0932b)}
.cover.b-social .cr{font-family:'Montserrat';font-weight:800}
.cover.b-focus{background:linear-gradient(150deg,#3a4658,#232c3a)}
.cover.b-focus .cr{font-family:'Montserrat';font-weight:800;text-transform:uppercase;letter-spacing:.02em}

/* ---------------- Dettaglio news ---------------- */
.detail{max-width:1100px;margin:0 auto;padding:26px 28px 60px;display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start}
.article{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hero{position:relative;height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center}
.hero .cr{font-family:Georgia,serif;font-size:34px;line-height:.9}
.hero .ce{font-family:'Montserrat';font-weight:600;text-transform:uppercase;font-size:9px;letter-spacing:.32em;margin-top:6px;opacity:.9}
.artbody{padding:28px 34px 34px}
.eyebrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cat{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:6px}
.h1{font-size:29px;line-height:1.22;font-weight:700;color:var(--navy-2);margin:0 0 18px;letter-spacing:-.01em;text-wrap:balance}
.byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.byline .av{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.byline .who b{font-size:13.5px;font-weight:600;color:var(--text);display:block}
.byline .who span{font-size:12px;color:var(--muted)}
.byline .sep{width:4px;height:4px;border-radius:50%;background:#c7cdd6}
.byline .rt{font-size:12.5px;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.prose{font-size:15.5px;line-height:1.72;color:#2b3646}
.prose p{margin:0 0 17px}
.prose h2{font-size:19px;font-weight:700;color:var(--navy-2);margin:28px 0 12px}
.prose ul{margin:0 0 17px;padding-left:20px}.prose li{margin:0 0 8px}
.prose a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:3px}
.prose strong{color:var(--navy-2)}
.pull{border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(184,137,43,.07),transparent);padding:14px 20px;margin:22px 0;border-radius:0 10px 10px 0;font-size:16.5px;line-height:1.55;color:var(--navy-2);font-weight:500}
.aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.card h3{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:700}
.confirm{border:1px solid #e6d6ad;background:linear-gradient(180deg,#fdf8ec,#fff)}
.confirm .lead{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px}
.confirm .badge{flex:none;width:34px;height:34px;border-radius:9px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center}
.confirm .lead b{font-size:14px;color:var(--navy-2);display:block;margin-bottom:2px}
.confirm .lead span{font-size:12.5px;color:var(--muted);line-height:1.45}
.confirmed{display:none;align-items:center;gap:10px;background:#e9f4ec;border:1px solid #bfe0c8;border-radius:10px;padding:13px;color:#1f6b39;font-size:13.5px;font-weight:600}
.confirm.done .btn-primary,.confirm.done .lead{display:none}
.confirm.done .confirmed{display:flex}
.att{display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:10px;text-decoration:none;transition:.15s}
.file:hover{border-color:#cdd6e2;background:#fafbfc}
.file .ic{flex:none;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:700}
.file .ic.pdf{background:#c0392b}.file .ic.img{background:#2e7d46}.file .ic.doc{background:#14507a}.file .ic.vid{background:#7a2ff2}
.file .fi{min-width:0}
.file .fi b{font-size:13px;font-weight:600;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file .fi span{font-size:11.5px;color:var(--muted)}
.file .dl{margin-left:auto;color:var(--muted)}
.stats .role{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.stat-row{display:flex;gap:10px;margin-bottom:12px}
.stat{flex:1;background:var(--bg);border-radius:10px;padding:12px}
.stat b{font-size:22px;font-weight:700;color:var(--navy-2);font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.stat span{font-size:11px;color:var(--muted);font-weight:600}
.stat.warn b{color:var(--cat-form)}
.bar{height:7px;border-radius:4px;background:#e4e8ee;overflow:hidden;margin-bottom:12px}
.bar i{display:block;height:100%;background:var(--navy);border-radius:4px}

/* ---------------- Form (login / componi / profilo) ---------------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-2);margin-bottom:7px}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}
.inp,.sel,.ta{width:100%;border:1px solid #d7dde6;background:#fff;border-radius:10px;padding:12px 14px;font:inherit;font-size:14.5px;color:var(--text)}
.ta{resize:vertical;min-height:120px;line-height:1.6}
.inp:focus,.ta:focus,.sel:focus{border-color:var(--navy);outline:none}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg .opt{border:1px solid #d7dde6;background:#fff;border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:600;color:#4a5566}
.seg .opt.on{border-color:var(--navy);background:rgba(18,60,110,.06);color:var(--navy)}
.toggletag{display:inline-flex;align-items:center;gap:7px;border:1px solid #d7dde6;background:#fff;border-radius:40px;padding:7px 13px;font-size:12.5px;font-weight:600;color:#4a5566}
.toggletag.on{border-color:var(--navy);background:var(--navy);color:#fff}
.toggletag.excl.on{border-color:var(--cat-social);background:var(--cat-social)}

/* ---------------- Catalogo ---------------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.pcard{background:#fff;border:1px solid #e6e9ee;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.15s;display:flex;flex-direction:column}
.pcard:hover{box-shadow:0 10px 26px -14px rgba(18,60,110,.4);transform:translateY(-2px);border-color:#d3dbe6}
.pcover{aspect-ratio:3/4;background:linear-gradient(150deg,#e9edf3,#dbe2ea);display:flex;align-items:center;justify-content:center;padding:16px;position:relative}
.pcover .bk{width:100%;height:100%;border-radius:4px;background:linear-gradient(150deg,#153f72,#0e2c52);box-shadow:0 6px 18px -6px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:#fff}
.pcover .bk .t{font-size:12px;font-weight:700;line-height:1.2}
.pcover .bk .a{font-size:9px;opacity:.8;margin-top:4px}
.pcover .lvl{position:absolute;top:10px;left:10px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--navy);padding:3px 8px;border-radius:6px}
.pinfo{padding:12px 14px 14px}
.pinfo .pt{font-size:13.5px;font-weight:600;color:var(--navy-2);line-height:1.3;margin:0 0 4px}
.pinfo .pa{font-size:12px;color:var(--muted)}
.pinfo .pm{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);font-weight:600}
.pinfo .isbn{font-variant-numeric:tabular-nums}

/* ---------------- Scheda prodotto ---------------- */
.prod{max-width:1100px;margin:0 auto;padding:26px 28px 60px;display:grid;grid-template-columns:280px 1fr;gap:30px;align-items:start}
.prod .bigcover{aspect-ratio:3/4;background:linear-gradient(150deg,#153f72,#0e2c52);border-radius:12px;box-shadow:0 16px 40px -18px rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff}
.prod .bigcover .t{font-size:19px;font-weight:700;line-height:1.2}
.prod .bigcover .a{font-size:12px;opacity:.85;margin-top:8px}
.prodmain h1{font-size:26px;font-weight:700;color:var(--navy-2);margin:0 0 6px;line-height:1.2}
.prodmain .sub{font-size:14px;color:var(--muted);margin-bottom:14px}
.metagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0}
.metagrid .m{background:#fff;padding:12px 14px}
.metagrid .m span{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-bottom:3px}
.metagrid .m b{font-size:14px;color:var(--navy-2);font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:24px 0 0}
.tabs button{border:0;background:transparent;padding:12px 16px;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--navy);border-bottom-color:var(--gold)}
.tabpane{display:none;padding:22px 0}
.tabpane.on{display:block}
.matlist{display:flex;flex-direction:column;gap:10px}
.matrow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.matrow .mt{flex:none;width:44px;height:44px;border-radius:10px;background:rgba(18,60,110,.08);color:var(--navy);display:flex;align-items:center;justify-content:center}
.matrow .mi{min-width:0}
.matrow .mi b{font-size:14px;font-weight:600;color:var(--navy-2);display:block}
.matrow .mi span{font-size:12px;color:var(--muted)}
.matrow .mtype{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);background:rgba(184,137,43,.1);padding:3px 9px;border-radius:6px}
.matrow .act{margin-left:auto;display:flex;gap:8px}

/* ---------------- Drive ---------------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:16px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--navy);font-weight:600}
.crumbs .sepc{color:#c7cdd6}
.drivelist{display:flex;flex-direction:column;gap:8px}
.drow{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 16px;text-decoration:none;color:inherit;transition:.15s}
.drow:hover{border-color:#cdd6e2;background:#fafbfc}
.drow .di{flex:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}
.drow .di.folder{background:var(--navy)}.drow .di.pdf{background:#c0392b}.drow .di.img{background:#2e7d46}.drow .di.vid{background:#7a2ff2}.drow .di.doc{background:#14507a}
.drow .dn{min-width:0;flex:1}
.drow .dn b{font-size:14px;font-weight:600;color:var(--navy-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow .dn span{font-size:12px;color:var(--muted)}
.vtag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:6px;border:1px solid;background:transparent}
.vtag.t-ss2{color:var(--cat-hub);border-color:var(--cat-hub)}
.vtag.t-ss1{color:var(--cat-oxford);border-color:var(--cat-oxford)}
.vtag.t-primaria{color:var(--cat-form);border-color:var(--cat-form)}
.vtag.pub{color:var(--muted);border-color:var(--line)}

/* ---------------- Academy ---------------- */
.videogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.vcard{background:#fff;border:1px solid #e6e9ee;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.15s}
.vcard:hover{box-shadow:0 10px 26px -14px rgba(18,60,110,.4);transform:translateY(-2px)}
.vthumb{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;color:#fff}
.vthumb .play{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.vthumb .dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.vinfo{padding:14px 16px 16px}
.vinfo b{font-size:14.5px;font-weight:600;color:var(--navy-2);line-height:1.3;display:block;margin-bottom:6px}
.vinfo span{font-size:12px;color:var(--muted)}

/* ---------------- Profilo ---------------- */
.profhead{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.profhead .bigav{width:78px;height:78px;border-radius:50%;background:var(--navy);color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center}
.profhead h1{font-size:24px;font-weight:700;color:var(--navy-2);margin:0}
.profhead .role{font-size:13px;color:var(--muted);margin-top:4px}
.badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.badge2{font-size:11px;font-weight:600;color:var(--navy);background:rgba(18,60,110,.08);border-radius:6px;padding:4px 10px}
.rowfields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.lock{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.filepick{display:flex;align-items:stretch;border:1px solid #d7dde6;border-radius:10px;overflow:hidden;background:#fff}
.filepick input[type=file]{display:none}
.filepick label{background:#eef1f5;padding:11px 14px;font-size:13px;font-weight:600;color:var(--navy-2);cursor:pointer;white-space:nowrap;border-right:1px solid #d7dde6;display:flex;align-items:center}
.filepick .fname{padding:11px 12px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}
.checkline{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--navy-2);cursor:pointer}
.checkline input{width:17px;height:17px;accent-color:var(--navy)}
@media(max-width:640px){.row3{grid-template-columns:1fr}}

/* ---------------- Mobile ---------------- */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .appbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:35;background:var(--navy);color:#fff;padding:12px 15px}
  .appbar .r{font-size:19px;color:#fff}.appbar .e{font-size:7px;letter-spacing:.34em;color:var(--gold-soft);margin-top:2px}
  .appbar .sp{margin-left:auto}
  .appbar .mbtn,.appbar .back-m{background:rgba(255,255,255,.12);border:0;color:#fff;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;text-decoration:none}
  .appbar .mbtn.on{color:#ff9dbd}
  .topbar{position:static;background:transparent;border:0;padding:14px 15px 0}
  .tb-head .h{font-size:19px}.tb-head .sub{display:none}
  .topbar .search{display:none}
  .wrap,.detail,.prod{padding-left:15px;padding-right:15px;padding-bottom:96px}
  .bottombar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));justify-content:space-around}
  .bottombar a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#8a94a4;text-decoration:none;font-size:10px;font-weight:600;padding:2px 10px}
  .bottombar a.on{color:var(--navy)}
  .ncard{grid-template-columns:78px 1fr;gap:13px;padding:12px}
  .ncover{width:78px;height:78px}
  .ncard .heart{position:absolute;top:8px;right:8px}
  .ntitle{padding-right:22px}
  .detail{grid-template-columns:1fr;max-width:760px}
  .aside{position:static}
  .prod{grid-template-columns:1fr}
  .prod .bigcover{max-width:230px;margin:0 auto}
  .rowfields{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero{height:150px}.hero .cr{font-size:24px}
  .artbody{padding:22px 18px 26px}.h1{font-size:22px}
  .catgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  /* Il gruppo "ORDINE · Anno · Alfabetico" deve poter andare a capo: su
     schermi stretti (o con lo zoom pagina di Safari) una riga fissa da
     ~290px sfonda la pagina e taglia i badge delle card. */
  .catbar .grp{flex-wrap:wrap}
}

/* ---------------- Catalogo: barra controlli + campi card + modale filtri ---------------- */
.catbar{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;padding-bottom:16px}
.catbar .grp{display:flex;align-items:center;gap:8px}
.catbar .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.catbar .spacer{margin-left:auto}
.ordbtn{border:1px solid #d7dde6;background:#fff;color:#4a5566;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap}
.ordbtn.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sortbtn{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:7px 11px;font-size:13px;font-weight:600}
.sortbtn.on{color:var(--navy);background:rgba(18,60,110,.08)}
.filtra{border:1px solid #d7dde6;background:#fff;color:var(--navy-2);border-radius:10px;padding:10px 15px;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.filtra:hover{border-color:#cdd6e2}
.filtra .badge-n{background:var(--gold);color:#22160a;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px;font-variant-numeric:tabular-nums}

/* campi opera nella card */
.pauthor{font-size:11.5px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.02em;margin:2px 0 8px;line-height:1.35}
.pfields{display:flex;flex-direction:column;gap:4px}
.pf{font-size:12px;line-height:1.35;color:var(--navy-2)}
.pf s{font-style:italic;color:var(--muted);text-decoration:none;margin-right:5px}
.pf b{font-weight:600}

/* modale filtri */
.modal-back{position:fixed;inset:0;background:rgba(11,30,56,.5);backdrop-filter:blur(2px);display:none;align-items:flex-start;justify-content:center;z-index:60;padding:70px 16px;overflow:auto}
.modal-back.on{display:flex}
.modal{background:#fff;border-radius:16px;width:100%;max-width:660px;padding:22px 24px 20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.modal .mh{display:flex;align-items:center;margin-bottom:18px}
.modal .mh h2{font-size:17px;font-weight:700;color:var(--navy-2);margin:0}
.modal .mx{margin-left:auto;border:0;background:transparent;color:var(--muted);width:32px;height:32px;border-radius:8px;font-size:20px}
.modal .mx:hover{background:var(--bg)}
.modal .mrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.modal .mfoot{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:20px}
.modal .mfoot .clear{margin-right:auto;font-size:13px;color:var(--muted);background:transparent;border:0;font-weight:600}
.msearch{position:relative;margin-bottom:16px}
.msearch input{width:100%;border:1px solid #d7dde6;border-radius:10px;padding:11px 14px 11px 38px;font:inherit;font-size:14px}
.msearch svg{position:absolute;left:12px;top:12px;color:var(--muted)}

/* multiselect */
.ms{position:relative}
.ms .msbtn{width:100%;border:1px solid #d7dde6;border-radius:10px;padding:11px 13px;background:#fff;font-size:13.5px;font-weight:600;color:#4a5566;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}
.ms .msbtn.has{color:var(--navy-2);border-color:var(--navy)}
.ms .msbtn svg{flex:none;color:var(--muted);transition:.15s}
.ms.open .msbtn svg{transform:rotate(180deg)}
.ms .mspanel{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 34px -10px rgba(0,0,0,.32);padding:6px;max-height:240px;overflow:auto;z-index:5;display:none}
.ms.open .mspanel{display:block}
.ms label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--text);cursor:pointer}
.ms label:hover{background:var(--bg)}
.ms input[type=checkbox]{width:16px;height:16px;accent-color:var(--navy)}
@media(max-width:560px){
  .modal .mrow{grid-template-columns:1fr}
  .catbar .spacer{display:none;margin:0}
  .catbar{gap:12px}
}

/* ---------------- Scheda prodotto: composizioni commerciali ---------------- */
.compgroup{margin-bottom:22px}
.compgroup h4{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 4px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.comprow{display:flex;align-items:flex-start;gap:16px;padding:13px 0;border-bottom:1px solid #eff1f5}
.comprow:last-child{border-bottom:0}
.comprow .cd{flex:1;min-width:0}
.comprow .cd b{font-size:14px;font-weight:600;color:var(--navy-2);display:block;line-height:1.4}
.comprow .cd .cisbn{font-size:12px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.comprow .cp{white-space:nowrap;font-size:15px;font-weight:700;color:var(--navy-2);font-variant-numeric:tabular-nums;text-align:right}
.comprow .cp s{display:block;font-style:normal;text-decoration:none;font-weight:600;color:var(--muted);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}

/* ---------------- Drive: file manager (azioni gestione, gated permessi) ---------------- */
.dv-toolbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:14px}
.dv-toolbar .btn{padding:9px 13px;font-size:13px}
.dv-perm{font-size:12px;color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:7px;background:#fbfaf6;border:1px solid var(--line);border-radius:9px;padding:9px 13px}
.dv-perm svg{color:var(--gold);flex:none}
.dvtable{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dv-head,.dv-row{display:grid;grid-template-columns:38px 44px 1fr 118px minmax(174px,auto);align-items:center}
.dv-head{background:#f7f9fb;border-bottom:1px solid var(--line)}
.dv-head > div{padding:12px 8px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700}
.dv-head .rgt{text-align:right}
.dv-row{border-bottom:1px solid #eff1f5}
.dv-row:last-child{border-bottom:0}
.dv-row:hover{background:#fafbfc}
.dv-c1{display:flex;align-items:center;justify-content:center;align-self:stretch}
.dv-bar{width:4px;height:26px;border-radius:3px}
.dv-c1 input{width:16px;height:16px;accent-color:var(--navy)}
.dv-ic2{display:flex;align-items:center;justify-content:center}
.dv-fic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;color:#fff;font-size:8px;font-weight:700}
.dv-fic.pdf{background:#c0392b}.dv-fic.img{background:#2e7d46}.dv-fic.vid{background:#c0392b}.dv-fic.xls{background:#1f7a4d}.dv-fic.zip{background:#a9781f}.dv-fic.doc{background:#14507a}.dv-fic.link{background:#5a3d7a}
.dv-name{padding:12px 8px;font-size:14px;font-weight:500;color:var(--navy-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;display:block}
a.dv-name:hover{color:var(--navy);text-decoration:underline}
.dv-size{padding:12px 8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.dv-act{display:flex;gap:2px;justify-content:flex-end;padding:6px 10px}
.dv-act button{width:30px;height:30px;border:0;background:transparent;border-radius:7px;color:#9aa4b2;display:flex;align-items:center;justify-content:center}
.dv-act button:hover{background:#eef1f5;color:var(--navy)}
.dv-act button.danger:hover{background:#fdeceb;color:#c0392b}
.dv-kebab{display:none}
.dv-count{font-size:12.5px;color:var(--muted);margin-top:14px;font-weight:500}
@media(max-width:760px){
  .dv-head,.dv-row{grid-template-columns:30px 40px 1fr auto}
  .dv-size,.dv-head .colsize{display:none}
  .dv-act .ibtn{display:none}
  .dv-kebab{display:flex}
}

/* ---------------- Academy: stessa struttura del Drive, faccia "gallery" ---------------- */
.ac-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#241f4d,#122a63 70%);color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:20px;display:flex;align-items:center;gap:18px}
.ac-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(231,207,149,.18),transparent 70%)}
.ac-hero .ic{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none;color:var(--gold-soft)}
.ac-hero h1{font-size:23px;margin:0 0 4px;font-weight:700}
.ac-hero p{margin:0;color:#c3c9e6;font-size:13.5px}
.ac-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ac-bar .crumbs{margin:0}
.ac-bar .tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ac-bar .tools .btn{padding:8px 12px;font-size:12.5px}
.acgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:16px}
.accard{background:#fff;border:1px solid #e6e9ee;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.15s;position:relative;display:flex;flex-direction:column}
.accard:hover{box-shadow:0 12px 28px -14px rgba(18,60,110,.42);transform:translateY(-2px)}
.ac-thumb{height:128px;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
.ac-thumb .play{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.ac-thumb .dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;font-variant-numeric:tabular-nums}
.ac-thumb .bigic{opacity:.95}
.ac-type{position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:rgba(255,255,255,.92);color:var(--navy);padding:3px 8px;border-radius:6px}
.ac-info{padding:13px 15px 15px}
.ac-info b{font-size:14px;font-weight:600;color:var(--navy-2);display:block;line-height:1.32;margin-bottom:5px}
.ac-info span{font-size:12px;color:var(--muted)}
.ac-kebab{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.92);border:0;color:#64748b;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s}
.accard:hover .ac-kebab{opacity:1}
@media(hover:none){.ac-kebab{opacity:1}}
.ac-count{font-size:12.5px;color:var(--muted);margin-top:16px;font-weight:500}