/* Mare profondo, luce d'oro.
   Questo foglio cambia solo l'aspetto: colori, fondi, angoli, ombre e caratteri.
   Nessuna regola nasconde, sposta o aggiunge qualcosa, e nessuna tocca cosa fa un tasto.
   I colori valgono solo nel tema chiaro: il tema scuro resta quello di prima. */

:root {
  --mp-crema: #fdfbf7;
  --mp-inchiostro: #0c2a33;
  --mp-muto: #5a7479;
  --mp-secondo: #33525a;
  --mp-mare: #157d92;
  --mp-petrolio: #0a3a48;
  --mp-oro: #c9a24b;
  --mp-oro-testo: #846718;
  --mp-oro-sfondo: linear-gradient(120deg, #f6e6bf 0%, #e4c27a 55%, #c9a24b 100%);
  --mp-laguna: linear-gradient(135deg, #0c5566, #157d92);
  --mp-abisso: radial-gradient(70% 90% at 100% 0%, rgba(228,194,122,.32) 0%, rgba(228,194,122,0) 62%), linear-gradient(160deg, #06222c 0%, #0a3a48 55%, #11687a 100%);
  --mp-ombra: 0 1px 2px rgba(12,42,51,.05), 0 18px 36px -28px rgba(12,42,51,.45);
  --mp-ombra-alta: 0 2px 4px rgba(12,42,51,.06), 0 26px 48px -30px rgba(12,42,51,.55);
  --mp-bordo: 0 0 0 1px rgba(12,42,51,.08);
  --mp-titolo: "Playfair Display", Georgia, serif;
  --mp-testo: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ───────────── Gestionale su PC ───────────── */

/* Menu a sinistra: abisso con un filo d'oro in basso */
html.gd-on .dnav {
  background: radial-gradient(90% 30% at 0% 100%, rgba(201,162,75,.18) 0%, rgba(201,162,75,0) 70%), linear-gradient(180deg, #06222c 0%, #0a3a48 60%, #0c4656 100%);
}
html.gd-on .dnav .ml-di { border-radius: 12px; transition: background .15s ease; }
html.gd-on .dnav .ml-di:hover:not(.on):not(.pcg-pubblica) { background: rgba(255,255,255,.06); }
html.gd-on .dnav .ml-di.on {
  background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  color: #fff;
}
html.gd-on .dnav .ml-di.on svg { color: #e4c27a; stroke: currentColor; }
html.gd-on .dnav .pcg-tit { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: #7f9aa3; }
html.gd-on .dnav .ml-di.pcg-pubblica {
  background: var(--mp-oro-sfondo);
  color: #3d3410;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px -14px rgba(201,162,75,.9);
}
html.gd-on .dnav .ml-di.pcg-pubblica:hover { filter: brightness(1.04); }
html.gd-on .dnav .ml-di.pcg-pubblica svg { color: #3d3410; }

/* Fondo della pagina: crema con due velature, mare in alto e sabbia in basso */
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gestisci.screen {
  background: radial-gradient(50% 40% at 100% 0%, #e2eeee 0%, rgba(226,238,238,0) 70%), radial-gradient(40% 30% at 30% 100%, #f6efe2 0%, rgba(246,239,226,0) 70%), #f4f7f6;
  background-attachment: fixed;
}

/* Barra in alto: vetro crema */
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-barra {
  height: 68px;
  background: rgba(253,251,247,.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(12,42,51,.07);
}
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cerca {
  height: 44px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(12,42,51,.08), 0 8px 20px -16px rgba(12,42,51,.5);
}
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cerca:focus-within { box-shadow: 0 0 0 2px var(--mp-mare), 0 8px 20px -16px rgba(12,42,51,.5); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cerca kbd { border-color: #e1e8e9; background: #f6f8f8; color: var(--mp-muto); }
html.gd-on #app .gd-tasto { height: 44px; border-radius: 14px; font-weight: 700; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tasto { border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(12,42,51,.1); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tasto:hover { box-shadow: 0 0 0 1px var(--mp-mare); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tasto.gd-pri {
  background: var(--mp-laguna);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -10px rgba(21,125,146,.9);
}
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tasto.gd-pri:hover { filter: brightness(1.06); }

/* Testa della pagina: occhiello d'oro, titolo in Playfair */
html.gd-on #app #gnCorpo .gn-occ { font: 700 12px var(--mp-testo); letter-spacing: .14em; text-transform: uppercase; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-occ { color: var(--mp-oro-testo); }
html.gd-on #app #gnCorpo .gn-h1 { font: 600 42px/1.08 var(--mp-titolo); letter-spacing: -.015em; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-h1 { color: var(--mp-inchiostro); }
html.gd-on #app #gnCorpo .gn-testa .gn-sotto { font-size: 15px; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-testa .gn-sotto { color: var(--mp-secondo); }

/* Filtri a pillola */
html.gd-on #app #gnCorpo > .gn-chips button,
html.gd-on #app #gnCorpo .gn-chips .gn-chip { height: 38px; min-height: 38px; padding: 0 16px; font: 700 14px var(--mp-testo); border-radius: 999px; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-chips .gn-chip { border: 0; background: #fff; color: var(--mp-inchiostro); box-shadow: 0 0 0 1px rgba(12,42,51,.1); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-chips .gn-chip:hover { box-shadow: 0 0 0 1px var(--mp-mare); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-chips .gn-chip.on { background: var(--mp-petrolio); color: #fff; box-shadow: 0 8px 16px -10px rgba(10,58,72,.9); }

/* Le cifre in cima: la prima è scura, le altre bianche */
html.gd-on #app .gd-cifre { gap: 14px; }
html.gd-on #app .gd-cifre > * { border-radius: 20px; padding: 18px 20px; }
html.gd-on #app .gd-cifre b { font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
html.gd-on #app .gd-cifre span { font-size: 13px; font-weight: 700; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cifre > * { border: 0; box-shadow: var(--mp-ombra); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cifre > :first-child { background: var(--mp-abisso); color: #fff; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cifre > :first-child span { color: #a9d3dc; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cifre > :first-child small { color: #cfe3e8; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cifre button[data-gd-va="conferma"] b { color: var(--mp-oro-testo); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-cifre button:hover { background: #fff; box-shadow: 0 0 0 1px var(--mp-mare), var(--mp-ombra); }

/* Titoli delle sezioni */
html.gd-on #app #gnCorpo .gn-tit { font: 800 13px var(--mp-testo); letter-spacing: .08em; text-transform: uppercase; }

/* Riquadri: bianchi, angoli morbidi, ombra leggera */
html.gd-on #app .gd-t-box,
html.gd-on #app .gd-strumenti,
html.gd-on #app .gd-dettaglio,
html.gd-on #app #gnCorpo .gn-carta,
html.gd-on #app #gnCorpo .gp3-soldi { border-radius: 20px; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-t-box,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-strumenti,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-dettaglio,
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-carta,
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gp3-soldi { border: 0; box-shadow: var(--mp-ombra); }
html.gd-on #app .gd-strumenti { padding: 18px; }

/* La stima dei soldi: una velatura d'oro e la cifra in Playfair */
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gp3-soldi {
  background: radial-gradient(80% 60% at 100% 0%, #fbf1dc 0%, rgba(251,241,220,0) 70%), #fff;
}
html.gd-on #app #gnCorpo .gp3-soldi b,
html.gd-on #app #gnCorpo .gp3-soldi strong { font-family: var(--mp-titolo); font-weight: 600; letter-spacing: -.01em; }

/* Tabelle */
html.gd-on #app .gd-tabella th,
html.gd-on #app .gd-uscite th,
html.gd-on #app .gd-tabella th button { font: 700 12px var(--mp-testo); letter-spacing: .05em; text-transform: uppercase; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tabella th,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-uscite th { background: #f8fbfa; border-bottom-color: #e8eeed; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tabella th,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-uscite th,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tabella th button { color: var(--mp-muto); }
html.gd-on #app .gd-tabella th:not(:has(button)),
html.gd-on #app .gd-tabella th button,
html.gd-on #app .gd-uscite th { padding: 12px; }
html.gd-on #app .gd-tabella td,
html.gd-on #app .gd-uscite td { padding: 13px 12px; font-size: 14px; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tabella td,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-uscite td { border-top-color: #eef2f1; color: var(--mp-inchiostro); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-uscite .gd-finita td { color: var(--mp-muto); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tabella tbody tr:hover td,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-uscite tbody tr:hover td { background: #f7faf9; }

/* Pillole di stato */
html.gd-on #app .gd-stato { min-height: 26px; line-height: 20px; padding: 3px 10px; font-size: 12px; font-weight: 800; box-sizing: border-box; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-stato { background: #edf1f2; color: var(--mp-secondo); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-st-confirmed,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-st-completed { background: #dff0f2; color: #0c5566; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-st-pending,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-ad-presto { background: #fbf1dc; color: #6e560f; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-ad-corso { background: var(--mp-laguna); color: #fff; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-tabella tr[aria-selected="true"] td { background: #eef7f8; }

/* Dettaglio della prenotazione a destra */
html.gd-on #app .gd-dettaglio { padding: 20px; }
html.gd-on #app .gd-dettaglio h2 { font: 600 26px/1.15 var(--mp-titolo); letter-spacing: -.01em; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-dettaglio h2 { color: var(--mp-inchiostro); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-d-fonte { color: var(--mp-oro-testo); letter-spacing: .04em; }

/* Avvisi, voci e caselle vuote */
html.gd-on #app #gnCorpo .gn-avviso { border-radius: 18px; }
html.gd-on #app #gnCorpo .gn-voce { border-radius: 16px; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-voce { box-shadow: var(--mp-ombra); }
html.gd-on #app #gnCorpo .gn-vuoto { border-radius: 20px; }

/* Strumenti nella colonna a destra */
html.gd-on #app .gd-strumenti .gn-btn,
html.gd-on #app .gd-strumenti .gp3-tasto { border-radius: 10px !important; font-weight: 600; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-strumenti .gn-btn:hover,
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-strumenti .gp3-tasto:hover { background: #f1f6f6 !important; }

/* Tasti piccoli e tondi */
html.gd-on #app #gnCorpo .gn-tondo { border-radius: 14px; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-tondo.scuro {
  background: var(--mp-laguna);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -10px rgba(21,125,146,.9);
}
html.gd-on #app .gd-riga-az { border-radius: 10px; font-weight: 700; }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-riga-az { border: 0; background: #fff; color: var(--mp-inchiostro); box-shadow: 0 0 0 1px rgba(12,42,51,.12); }
html.gd-on:not(.lux-scura) #app:not(.luxdark) .gd-riga-az:hover { box-shadow: 0 0 0 1px var(--mp-mare); color: var(--mp-mare); }

/* La cifra della stima */
html.gd-on #app #gnCorpo .gp3-soldi-tx b { font-size: 36px; line-height: 1.1; margin: 4px 0; }

/* Il pontile di oggi */
html.gd-on #app #gnCorpo .gp6-num > div { border-radius: 16px; }
html.gd-on #app #gnCorpo .gp6-num b { font-family: var(--mp-titolo); font-weight: 600; }
html.gd-on #app #gnCorpo .gn-pt-testa b { font: 600 22px/1.2 var(--mp-titolo); letter-spacing: -.005em; }

/* ───────────── Clienti ───────────── */

/* Le carte di «Pronte a salpare»: bianche, come i risultati della ricerca */
#app #home #featured > .vcard { border-radius: 22px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
html:not(.lux-scura) #app:not(.luxdark) #home #featured > .vcard { background: #fff; box-shadow: var(--mp-ombra) !important; }
html:not(.lux-scura) #app:not(.luxdark) #home #featured > .vcard:hover { transform: translateY(-2px); box-shadow: var(--mp-ombra-alta) !important; }
#app #home #featured > .vcard .vph { border-radius: 0; }
#app #home #featured > .vcard .vph img { transition: transform .5s ease; }
#app #home #featured > .vcard:hover .vph img { transform: scale(1.035); }
#app #home #featured > .vcard .vinfo { padding: 14px 18px 18px; }
#app #home #featured > .vcard .vrow h4 { font: 600 21px/1.15 var(--mp-titolo); letter-spacing: -.005em; }
#app #home #featured > .vcard .vkick { font-size: 11.5px; letter-spacing: .12em; }
#app #home #featured > .vcard .vrate.nv { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
html.cd-on #app #home #featured > .vcard .vprice b { font-size: 19px; }
html:not(.cd-on) #app #home #featured > .vcard .vrow h4 { font-size: 19px; }
html:not(.lux-scura) #app:not(.luxdark) #home #featured > .vcard .vkick { color: var(--mp-mare) !important; }
html:not(.lux-scura) #app:not(.luxdark) #home #featured > .vcard .vrate.nv { color: var(--mp-oro-testo); }
html.cd-on #app #featured.featv { align-items: stretch; }

/* Ricerca */
html.cd-on #app #search .backrow .ti { border-radius: 16px; padding: 4px 16px; }
html.cd-on:not(.lux-scura) #app:not(.luxdark) #search .backrow .ti { background: #fff; box-shadow: 0 0 0 1px rgba(12,42,51,.08), 0 8px 20px -16px rgba(12,42,51,.5); }
#app #search #searchLoc { font-family: var(--mp-testo); font-size: 17px; }
html:not(.lux-scura) #app:not(.luxdark) #s37tabs button.on i { background: #e4c27a; color: #3d3410; }
#app #results .rcard .type { font: 700 11.5px var(--mp-testo); letter-spacing: .12em; }
#app #results .rcard .lictag { font-size: 11.5px; letter-spacing: .06em; }
html:not(.lux-scura) #app:not(.luxdark) #results .rcard .lictag { background: #e6f2f4; color: #0c5566; }
#app #results .rcard .rt.nv { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; }
html:not(.lux-scura) #app:not(.luxdark) #results .rcard .rt.nv { color: var(--mp-oro-testo); }
html:not(.lux-scura) #app:not(.luxdark) #results .rcard { box-shadow: var(--mp-ombra) !important; }
html:not(.lux-scura) #app:not(.luxdark) #results .rcard:hover { box-shadow: var(--mp-ombra-alta) !important; }

/* Scheda della barca su PC: fondo crema, titolo grande, riquadro di prenotazione bianco */
html.cd-on:not(.lux-scura) #app:not(.luxdark) #detail.screen { background: var(--mp-crema); }
html.cd-on:not(.lux-scura) #app:not(.luxdark) #detail #dtbar { background: var(--mp-crema); }
html.cd-on:not(.lux-scura) #app:not(.luxdark) #detail #dsheet { background: transparent; }
html.cd-on #app #detail #dsheet { padding-left: 0; padding-right: 0; }
html.cd-on #app #detail .dhead h2 { font: 600 40px/1.08 var(--mp-titolo); letter-spacing: -.015em; }
html.cd-on #app #detail .dhead .type { font: 700 12px var(--mp-testo); letter-spacing: .14em; }
#app #detail .ratebox.nuovo b { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
html:not(.lux-scura) #app:not(.luxdark) #detail .ratebox.nuovo { background: #fbf3e0; box-shadow: inset 0 0 0 1px #ecd9a8; }
html:not(.lux-scura) #app:not(.luxdark) #detail .ratebox.nuovo b { color: var(--mp-oro-testo); }
html:not(.lux-scura) #app:not(.luxdark) #detail .spec,
html:not(.lux-scura) #app:not(.luxdark) #detail .optline { box-shadow: var(--mp-ombra); }
html.cd-on #app #detail .spec { border-radius: 18px; }
html.cd-on #app #detail .spec b { font-size: 19px; font-weight: 800; }
html.cd-on #app #detail #dbookbar { border-radius: 24px; padding: 24px; }
html.cd-on:not(.lux-scura) #app:not(.luxdark) #detail #dbookbar {
  background: radial-gradient(70% 45% at 100% 0%, rgba(246,230,191,.75) 0%, rgba(246,230,191,0) 70%), #fff;
  box-shadow: var(--mp-ombra-alta);
}
html.cd-on #app #detail #dbookbar .pp b { font-size: 34px; letter-spacing: -.01em; }
html.cd-on #app #detail #dbookbar .cp2-datab,
html.cd-on #app #detail #dbookbar .cp2-pers { border-radius: 14px; }
html.cd-on #app #detail #dbookbar .cta { background-image: var(--mp-oro-sfondo); color: #3d3410; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 28px -14px rgba(201,162,75,.95); }

/* I miei viaggi: il titolo in Playfair */
#app #trips .ti > b { font: 600 28px/1.1 var(--mp-titolo); letter-spacing: -.01em; }

/* ───────────── Gestionale sul telefono ───────────── */
html:not(.gd-on) #app #gnCorpo .gn-occ { font: 700 12px var(--mp-testo); letter-spacing: .14em; text-transform: uppercase; }
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-occ { color: var(--mp-oro-testo); }
html:not(.gd-on) #app #gnCorpo .gn-testa .gn-h1 { font: 600 40px/1.05 var(--mp-titolo); letter-spacing: -.015em; }
html:not(.gd-on) #app #gnCorpo .gn-tit { font: 800 13px var(--mp-testo); letter-spacing: .08em; text-transform: uppercase; }
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-chip { border: 0; box-shadow: 0 0 0 1px rgba(12,42,51,.1); }
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-chip.on { background: var(--mp-petrolio); color: #fff; box-shadow: 0 8px 16px -10px rgba(10,58,72,.9); }
html:not(.gd-on) #app #gnCorpo .gn-tondo { border-radius: 14px; }
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-tondo.scuro { background: var(--mp-laguna); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -10px rgba(21,125,146,.9); }
html:not(.gd-on) #app #gnCorpo .gt-cifre > * { border-radius: 18px; }
html:not(.gd-on) #app #gnCorpo .gt-cifre b { font-weight: 800; }
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gt-cifre > * { border: 0; box-shadow: var(--mp-ombra); }
html:not(.gd-on) #app #gnCorpo .gt-strumenti,
html:not(.gd-on) #app #gnCorpo .gp3-tasto,
html:not(.gd-on) #app #gnCorpo .gn-carta { border-radius: 20px; }
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gt-strumenti,
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gp3-tasto,
html:not(.gd-on):not(.lux-scura) #app:not(.luxdark) #gnCorpo .gn-carta { border: 0; box-shadow: var(--mp-ombra); }
html:not(.gd-on) #app #gnCorpo .gn-avviso { border-radius: 18px; }

/* La barra in alto del sito da PC: crema piena.
   Niente vetro: la barra sta ferma sopra il contenitore scuro (la pagina scorre dentro #home, non dietro la barra),
   quindi un fondo trasparente lasciava vedere il blu scuro e la barra usciva grigia. */
html.cd-on:not(.lux-scura):not(:has(#app.luxdark)) .cd-testa {
  background: var(--mp-crema);
  border-bottom-color: rgba(12,42,51,.08);
}

/* ───────────── Messaggi: l'elenco e la conversazione (clienti e gestionale, PC e telefono) ───────────── */

/* L'elenco: crema, titolo in Playfair, filtri a pillola */
html:not(.lux-scura) #app:not(.luxdark) #s33inbox { background: var(--mp-crema); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .subhead .ti b { font-family: var(--mp-titolo); font-weight: 600; font-size: 30px; letter-spacing: -.01em; color: var(--mp-inchiostro); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .subhead .ti small { color: var(--mp-muto); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .gp4-filtri button { border-radius: 999px; border-color: transparent; background: #fff; box-shadow: var(--mp-bordo); color: var(--mp-secondo); font-weight: 700; }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .gp4-filtri button[aria-pressed="true"] { background: var(--mp-petrolio); color: #fff; box-shadow: 0 10px 20px -14px rgba(10,58,72,.9); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .gp4-filtri button em { font-style: normal; color: var(--mp-oro-testo); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .gp4-filtri button[aria-pressed="true"] em { color: #e4c27a; }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-riga { border-radius: 16px; transition: background .15s ease, box-shadow .15s ease; }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-riga:hover { background: #fff; }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-riga.gd-riga-on { background: #fff; box-shadow: inset 3px 0 0 var(--mp-oro), var(--mp-ombra); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-tondo { background: var(--mp-laguna); color: #fff; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 16px -10px rgba(12,85,102,.9); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-mezzo b { color: var(--mp-inchiostro); font-weight: 800; }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-mezzo small { color: var(--mp-muto); }
html:not(.lux-scura) #app:not(.luxdark) #s33inbox .s33-destra em { font-style: normal; color: var(--mp-muto); font-weight: 600; }

/* La conversazione: fondo crema con una velatura di mare, testata di vetro */
html:not(.lux-scura) #app:not(.luxdark) #chat.active {
  background: radial-gradient(60% 40% at 100% 0%, #e2eeee 0%, rgba(226,238,238,0) 70%), radial-gradient(50% 30% at 0% 100%, #f6efe2 0%, rgba(246,239,226,0) 70%), var(--mp-crema);
}
html:not(.lux-scura) #app:not(.luxdark) #chat .subhead { background: rgba(253,251,247,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(12,42,51,.06); }
html:not(.lux-scura) #app:not(.luxdark) #chat #chatName { font-family: var(--mp-titolo); font-weight: 600; font-size: 24px; letter-spacing: -.01em; color: var(--mp-inchiostro); }
html:not(.lux-scura) #app:not(.luxdark) #chat .subhead .ti small { color: var(--mp-muto); }
html:not(.lux-scura) #app:not(.luxdark) #chat .subhead .iconbtn { background: #fff; box-shadow: var(--mp-bordo), 0 6px 14px -10px rgba(12,42,51,.5); border-color: transparent; }

/* La prenotazione in cima alla conversazione */
html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-pren { background: #fff; border-radius: 20px; box-shadow: var(--mp-ombra); }
html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-eti { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; color: var(--mp-oro-testo); }
html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-tit { font-family: var(--mp-titolo); font-weight: 600; font-size: 22px; color: var(--mp-inchiostro); }
html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-dett, html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-altre { color: var(--mp-secondo); }

/* Le nuvolette: bianche con un'ombra per chi scrive, laguna per te */
html:not(.lux-scura) #app:not(.luxdark) #chat .bubble { border-radius: 18px; }
html:not(.lux-scura) #app:not(.luxdark) #chat .bubble.them { background: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(12,42,51,.06), 0 10px 22px -16px rgba(12,42,51,.45); }
html:not(.lux-scura) #app:not(.luxdark) #chat .bubble.me { background: var(--mp-laguna); box-shadow: 0 12px 24px -16px rgba(12,85,102,.9); }
html:not(.lux-scura) #app:not(.luxdark) #chat .bubble.them.last { border-bottom-left-radius: 6px; }
html:not(.lux-scura) #app:not(.luxdark) #chat .bubble.me.last { border-bottom-right-radius: 6px; }
html:not(.lux-scura) #app:not(.luxdark) #chat .btime { color: var(--mp-muto); }
html:not(.lux-scura) #app:not(.luxdark) #chat .chatsep span { background: rgba(201,162,75,.14); color: var(--mp-oro-testo); }

/* Le risposte pronte e la barra per scrivere */
html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-pronte-t { color: var(--mp-muto); font-weight: 700; }
html:not(.lux-scura) #app:not(.luxdark) #chat .gp9-pronte-l button { background: #fff; border-color: transparent; box-shadow: var(--mp-bordo), 0 8px 16px -14px rgba(12,42,51,.5); color: var(--mp-mare); border-radius: 999px; }
html:not(.lux-scura) #app:not(.luxdark) #chat .chatbar { background: rgba(253,251,247,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top-color: rgba(12,42,51,.06); }
html:not(.lux-scura) #app:not(.luxdark) #chat #chatInput { background: #fff; border-radius: 16px; border-color: rgba(12,42,51,.1); box-shadow: 0 1px 2px rgba(12,42,51,.04); color: var(--mp-inchiostro); }
html:not(.lux-scura) #app:not(.luxdark) #chat #chatInput:focus { border-color: var(--mp-mare); box-shadow: 0 0 0 3px rgba(21,125,146,.14); }
html:not(.lux-scura) #app:not(.luxdark) #chat .chatsend { background: var(--mp-laguna); border-radius: 14px; box-shadow: 0 10px 20px -14px rgba(12,85,102,.9); }

/* ───────────── Profilo del cliente: «Il tuo profilo» e «Il mio account» (PC e telefono) ───────────── */
/* Tasti con colori scritti dentro la pagina (blu notte): li riporto alla tavolozza */
html:not(.lux-scura) #app:not(.luxdark) .js-push-toggle { background: var(--mp-laguna) !important; color: #fff !important; box-shadow: 0 14px 28px -18px rgba(12,85,102,.8) !important; }
html:not(.lux-scura) #app:not(.luxdark) .js-push-test { color: var(--mp-mare) !important; border-color: rgba(21,125,146,.28) !important; }
html:not(.lux-scura) #app:not(.luxdark) #account .cta.full[onclick^="salpeFiscale"] { color: var(--mp-inchiostro) !important; border-color: transparent !important; box-shadow: var(--mp-bordo), var(--mp-ombra) !important; }
html:not(.lux-scura) #app:not(.luxdark) #account .cta.full.dark { background: var(--mp-abisso); }
html:not(.lux-scura) #app:not(.luxdark) #accRole span { color: var(--mp-oro-testo) !important; background: rgba(255,255,255,.92) !important; }
html:not(.lux-scura) #app:not(.luxdark) #account .cp-hero { background: var(--mp-abisso); }
html.cd-on:not(.lux-scura) #app:not(.luxdark) #account .cp-hero { border-radius: 22px; overflow: hidden; box-shadow: var(--mp-ombra-alta); }
html:not(.lux-scura) #app:not(.luxdark) #account .ml-carta,
html:not(.lux-scura) #app:not(.luxdark) #account .pt-sub { border-color: transparent; box-shadow: var(--mp-bordo), var(--mp-ombra); border-radius: 18px; }
html:not(.lux-scura) #app:not(.luxdark) #account .eyebrow2 { color: var(--mp-oro-testo); letter-spacing: .16em; }
html:not(.lux-scura) #app:not(.luxdark) #account .ml-carta-btn.pieno,
html:not(.lux-scura) #app:not(.luxdark) #cprofile .ml-carta-btn.pieno { background: var(--mp-petrolio); border-color: var(--mp-petrolio); color: #fff; }

/* «Il mio account» su PC: fondo crema, iniziale e «Passa al lavoro» di nuovo leggibili (prima bianco su bianco) */
html.gd-profilo:not(.lux-scura) body .app#app:not(.luxdark) .screen#cprofile,
html.gd-profilo:not(.lux-scura) body #app:not(.luxdark) .screen#cprofile { background: var(--mp-crema); }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) #cprofile > .cp-hero .cp-av { background: linear-gradient(135deg, #c9a24b, #e0c074) !important; color: var(--mp-inchiostro) !important; border: 2px solid #fff !important; box-shadow: var(--mp-ombra) !important; }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) #cprofile > .ml-carta .ml-carta-btn { background: var(--mp-petrolio) !important; border-color: var(--mp-petrolio) !important; color: #fff !important; border-radius: 12px; box-shadow: 0 12px 24px -16px rgba(10,58,72,.8) !important; }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) .gp-nav button:hover { background: rgba(21,125,146,.08); }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) .gp-nav button[aria-current="page"] { background: var(--mp-petrolio); box-shadow: inset 3px 0 0 var(--mp-oro); }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) #s38corpo .s38-box,
html.gd-profilo:not(.lux-scura) body #app:not(.luxdark) #cprofile #s38corpo > #s38fondo.gp-su { border-color: transparent; border-radius: 18px; box-shadow: var(--mp-bordo), var(--mp-ombra) !important; }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) #s38corpo .cprow:hover { background: #fbf7ee; }
html.gd-profilo:not(.lux-scura) #app:not(.luxdark) #s38corpo .cprow .ce { border-radius: 11px; }
html:not(.lux-scura) #app:not(.luxdark) #cprofile .cp-stat b { color: var(--mp-inchiostro); }