@cardinali-studio/adminkit 1.0.0

package/dist/app/app.css

@@ -0,0 +1,2068 @@
+/* Impaginazione dell'applicazione. L'ASPETTO dei campi sta in adminkit (theme.css), qui c'è
+   solo come sono disposte le cose in questa app.
+
+   Tre colonne, e ognuna scorre per conto suo: la navigazione non si muove, l'elenco resta al suo
+   posto mentre si modifica, e a scorrere è solo la cosa che si sta guardando. Con una pagina sola
+   che scorreva tutta insieme, aprire una pagina in fondo all'elenco e tornare indietro
+   significava ritrovarsi in cima. */
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--ak-bg); color: var(--ak-ink); font-family: var(--ak-font); }
+
+.app {
+  height: 100vh;
+  display: grid;
+  grid-template-columns: var(--ak-rail-w) var(--ak-col-w) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+/* Prenotazioni: agenda operativa e impostazioni condividono la stessa grammatica del
+   pannello, ma usano più spazio orizzontale per rendere leggibili orari e stati. */
+.bk-page{max-width:1180px;margin:0 auto;padding:clamp(1.4rem,3vw,3rem)}
+.bk-kicker{margin:0 0 .55rem;text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;color:var(--ak-muted,#777)}
+.bk-hero,.bk-detail-head{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;padding-bottom:2.2rem;border-bottom:1px solid var(--ak-line,#ddd)}
+.bk-hero h2,.bk-detail-head h2,.bk-settings-section>header h2,.bk-settings-form>header h2{margin:0;font:400 clamp(2.1rem,4vw,4.5rem)/.98 Georgia,serif;letter-spacing:-.04em}
+.bk-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.ak-btn.is-danger{color:#9a3028;border-color:#c89892}
+.bk-section{margin-top:2.5rem}.bk-section>h3,.bk-note>h3,.bk-reschedule>h3,.bk-settings-section>h3{font:400 1.15rem Georgia,serif}
+.bk-filter-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.bk-filter-head h3{font:400 1.15rem Georgia,serif}.bk-filters{display:flex;gap:.5rem;flex-wrap:wrap}.bk-filters input,.bk-filters select{min-height:38px;padding:.5rem;border:1px solid var(--ak-line,#ccc);background:var(--ak-paper,#fff);color:inherit}
+.bk-table{border-top:1px solid var(--ak-line,#ddd)}.bk-table>button{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:1rem;align-items:center;width:100%;padding:1rem 0;border:0;border-bottom:1px solid var(--ak-line,#ddd);background:none;text-align:left;cursor:pointer}.bk-table>button:hover{background:rgba(0,0,0,.025)}.bk-table time,.bk-table span{color:var(--ak-muted,#777);font-size:.82rem}.bk-table em{font-style:normal}
+.bk-status{display:inline-flex;align-items:center;width:max-content;padding:.35rem .55rem;border:1px solid currentColor;border-radius:99px;font-size:.7rem}.bk-status.is-pending{color:#9c671e}.bk-status.is-confirmed{color:#25734b}.bk-status.is-cancelled,.bk-status.is-rejected{color:#9b3b32}.bk-status.is-completed{color:#4e6070}
+.bk-list{min-height:100%;display:flex;flex-direction:column}.bk-list-label{padding:1.2rem .9rem .5rem;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;color:var(--ak-muted,#777)}.bk-list-item{display:grid!important;grid-template-columns:8px 1fr!important;align-items:start!important}.bk-list-item>span:last-child{display:grid;gap:.2rem}.bk-list-item small{font-size:.68rem;color:var(--ak-muted,#777);font-weight:400}.bk-dot{width:7px;height:7px;margin-top:.35rem;border-radius:50%;background:#aaa}.bk-dot.is-pending{background:#d79532}.bk-dot.is-confirmed{background:#3a8c63}.bk-settings-link{margin-top:auto!important;border-top:1px solid var(--ak-line,#ddd)!important}.bk-settings-link span{font-size:.7rem;color:var(--ak-muted,#777)}
+.bk-manual{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0;padding:1.5rem;border:1px solid var(--ak-line,#ddd);background:var(--ak-paper,#fff)}.bk-manual h3{grid-column:1/-1;margin:0;font:400 1.4rem Georgia,serif}.bk-manual label,.bk-settings-form label,.bk-type label,.bk-target{display:grid;gap:.4rem;font-size:.72rem;color:var(--ak-muted,#777)}.bk-manual input,.bk-manual select,.bk-manual textarea,.bk-settings-form input,.bk-type input,.bk-type select,.bk-type textarea,.bk-target select,.bk-note textarea,.bk-reschedule input{min-height:40px;padding:.65rem;border:1px solid var(--ak-line,#ccc);background:var(--ak-paper,#fff);color:inherit;font:inherit}.bk-manual textarea,.bk-type textarea,.bk-note textarea{resize:vertical}.bk-manual .is-wide{grid-column:1/-1}.bk-manual button{grid-column:1/-1;justify-self:start}
+.bk-blocks{display:grid;border-top:1px solid var(--ak-line,#ddd)}.bk-blocks>div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--ak-line,#ddd);font-size:.8rem}.bk-blocks button{border:0;background:none;text-decoration:underline;cursor:pointer}
+.bk-facts{display:grid;grid-template-columns:1fr 1fr;margin:0}.bk-facts>div{padding:1.2rem 0;border-bottom:1px solid var(--ak-line,#ddd)}.bk-facts>div:nth-child(odd){padding-right:1.5rem}.bk-facts>div:nth-child(even){padding-left:1.5rem;border-left:1px solid var(--ak-line,#ddd)}.bk-facts dt{text-transform:uppercase;letter-spacing:.09em;font-size:.64rem;color:var(--ak-muted,#777)}.bk-facts dd{margin:.45rem 0 0;line-height:1.5}.bk-note,.bk-reschedule{margin-top:2rem}.bk-note p{max-width:70ch;white-space:pre-wrap;line-height:1.6}.bk-note textarea{display:block;width:min(100%,760px);margin-bottom:.7rem}.bk-reschedule{display:flex;align-items:end;gap:.7rem}.bk-reschedule h3{width:100%;margin:0}.bk-detail-actions{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--ak-line,#ddd)}
+.bk-tabs{display:flex;gap:0;overflow-x:auto;margin-bottom:3rem;border-bottom:1px solid var(--ak-line,#ddd)}.bk-tabs button{padding:.8rem 1rem;border:0;border-bottom:2px solid transparent;background:none;white-space:nowrap;cursor:pointer}.bk-tabs button.is-on{border-bottom-color:currentColor}
+.bk-settings-form,.bk-settings-section{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.bk-settings-form>header,.bk-settings-section>header,.bk-settings-section>p,.bk-settings-section>h3,.bk-settings-section>.bk-actions,.bk-settings-section>.ak-btn,.bk-types,.bk-week,.bk-overrides,.bk-google-list,.bk-checklist,.bk-target{grid-column:1/-1}.bk-settings-form>header,.bk-settings-section>header{margin-bottom:1.3rem}.bk-settings-form .is-wide{grid-column:1/-1}.bk-settings-form>button{grid-column:1/-1;justify-self:start}
+.bk-types{display:grid;gap:1rem}.bk-type{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding:1.2rem;border:1px solid var(--ak-line,#ddd)}.bk-type-name{grid-column:span 2;font:400 1.2rem Georgia,serif!important}.bk-type textarea{grid-column:1/-1}.bk-check{display:flex!important;align-items:center!important}.bk-check input{min-height:0}.bk-type .bk-actions{grid-column:1/-1}
+.bk-week{display:grid;border-top:1px solid var(--ak-line,#ddd)}.bk-week>div{display:grid;grid-template-columns:150px 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--ak-line,#ddd)}.bk-week>div>div{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.bk-week span{display:flex;gap:.35rem;align-items:center}.bk-week input{padding:.4rem;border:1px solid var(--ak-line,#ccc)}.bk-week button,.bk-overrides button{border:0;background:none;text-decoration:underline;cursor:pointer}
+.bk-overrides{display:grid;gap:.6rem}.bk-overrides>div{display:flex;gap:.5rem;flex-wrap:wrap}.bk-overrides input,.bk-overrides select{padding:.55rem;border:1px solid var(--ak-line,#ccc);background:var(--ak-paper,#fff)}
+.bk-google-list{display:grid;border-top:1px solid var(--ak-line,#ddd)}.bk-google-list label{display:flex;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--ak-line,#ddd)}.bk-target{max-width:520px}
+.bk-checklist{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ak-line,#ddd)}.bk-checklist>div{display:flex;gap:.7rem;padding:.8rem;border-bottom:1px solid var(--ak-line,#ddd);color:#9b3b32}.bk-checklist>div.is-ready{color:#25734b}
+@media(max-width:800px){.bk-table>button{grid-template-columns:1fr 1fr}.bk-manual,.bk-settings-form,.bk-settings-section,.bk-facts{grid-template-columns:1fr}.bk-manual>*{grid-column:auto!important}.bk-settings-form>*,.bk-settings-section>*{grid-column:1!important}.bk-type{grid-template-columns:1fr}.bk-type>*{grid-column:1!important}.bk-facts>div:nth-child(n){padding-left:0;padding-right:0;border-left:0}.bk-week>div{grid-template-columns:1fr}.bk-hero{display:grid}.bk-checklist{grid-template-columns:1fr}}
+/* Sezioni senza elenco (richieste, anteprima): la modifica prende tutto lo spazio, invece di una
+   colonna vuota che sembrerebbe rotta. */
+.app.is-two { grid-template-columns: var(--ak-rail-w) minmax(0, 1fr); }
+
+/* ---- Prima colonna: dove sono ---------------------------------------------------------- */
+.rail {
+  display: flex; flex-direction: column; gap: 20px;
+  padding: 16px 12px;
+  background: var(--ak-rail-bg); color: var(--ak-rail-ink);
+}
+.rail-brand { display: flex; flex-direction: column; gap: 3px; padding: 4px 10px 0; }
+.rail-brand-name { font: 600 13px/1.3 var(--ak-font); color: var(--ak-rail-ink-on); }
+.rail-brand-role {
+  font: 500 10px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .12em; opacity: .6;
+}
+.rail-nav { display: flex; flex-direction: column; gap: 1px; }
+.rail-group + .rail-group { margin-top: 14px; }
+/* Stessa ricetta tipografica di `.col-title`/`.pg-group-title` (maiuscolo, tracciato), ma NON
+   lo stesso colore: quelle usano `--ak-ink-quiet`, pensato per una superficie chiara, e sul rail
+   scuro sarebbe quasi invisibile. */
+.rail-group-title {
+  display: block; margin: 0 0 3px; padding: 0 10px;
+  font: 600 10px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .1em;
+  color: var(--ak-rail-ink); opacity: .65;
+}
+.rail-item {
+  display: flex; align-items: center; gap: 9px; width: 100%;
+  border: 0; background: transparent; cursor: pointer; text-align: left; text-decoration: none;
+  padding: 8px 10px; border-radius: 6px;
+  font: 500 13px/1.2 var(--ak-font); color: inherit;
+}
+.rail-item:hover { background: var(--ak-rail-hover); color: var(--ak-rail-ink-on); }
+.rail-item.is-on { background: var(--ak-rail-on); color: var(--ak-rail-ink-on); }
+.rail-item .ico { flex: none; opacity: .85; }
+.rail-item.is-on .ico { opacity: 1; }
+/* Quante richieste sono ancora da gestire. È l'unico numero della prima colonna: se ce ne
+   fossero altri smetterebbe di essere una cosa che si nota. */
+.rail-badge {
+  margin-left: auto; flex: none; min-width: 18px; padding: 0 5px; border-radius: 9px;
+  background: var(--ak-accent); color: var(--ak-accent-ink);
+  font: 600 10px/18px var(--ak-font); text-align: center; font-variant-numeric: tabular-nums;
+}
+.rail-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ak-rail-line); }
+.rail-foot { display: flex; flex-direction: column; gap: 1px; }
+
+/* ---- Seconda colonna: cosa c'è dentro -------------------------------------------------- */
+.col {
+  display: flex; flex-direction: column; min-width: 0; min-height: 0;
+  background: var(--ak-col-bg); border-right: 1px solid var(--ak-line);
+}
+.col-head {
+  flex: none; display: flex; align-items: center; min-height: 57px; padding: 10px 12px;
+  border-bottom: 1px solid var(--ak-line);
+}
+.col-title {
+  font: 600 11px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .09em;
+  color: var(--ak-ink-quiet);
+}
+.col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
+.col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.col-item {
+  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
+  border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer;
+  padding: 8px 10px; font: 500 13px/1.3 var(--ak-font); color: var(--ak-ink);
+}
+.col-item:hover { background: var(--ak-hover); }
+.col-item.is-on {
+  background: var(--ak-panel); border-color: var(--ak-line); font-weight: 600;
+  box-shadow: var(--ak-shadow), inset 2px 0 0 var(--ak-accent);
+}
+.col-item .ico { flex: none; color: var(--ak-ink-quiet); }
+.settings-list { gap: 5px; }
+.settings-list-item {
+  align-items: flex-start; flex-direction: column; gap: 5px; min-height: 68px; padding: 11px 12px;
+}
+.settings-list-item strong { font: 600 13px/1.2 var(--ak-font); }
+.settings-list-item span { font: 400 11px/1.45 var(--ak-font); color: var(--ak-ink-quiet); }
+
+/* ---- Terza colonna: cosa sto facendo --------------------------------------------------- */
+/* `min-height: 0` non è decorazione: un elemento di griglia ha `min-height: auto`, quindi senza
+   questa riga la colonna cresce con il suo contenuto oltre l'altezza della riga, `.app` la taglia
+   con `overflow: hidden` e la parte in fondo diventa IRRAGGIUNGIBILE — il corpo non scorre perché
+   non è lui a essere troppo alto. Si vede solo sulle pagine lunghe (una gallery con molte foto). */
+.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ak-bg); }
+.pane-head {
+  flex: none; display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 10px 20px;
+  background: var(--ak-panel); border-bottom: 1px solid var(--ak-line);
+}
+.pane-title { margin: 0; font: 600 15px/1.2 var(--ak-font); }
+.pane-slug { font: 400 12px/1 var(--ak-font-mono); color: var(--ak-ink-quiet); }
+.pane-count { font: 400 13px/1 var(--ak-font); color: var(--ak-ink-quiet); font-variant-numeric: tabular-nums; }
+/* Il percorso dei media: ogni pezzo è un posto in cui tornare. L'ultimo è dove sei, e ha il peso
+   del titolo — è lui a fare da titolo, non un'aggiunta al titolo. */
+.pane-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
+.pane-crumb-part { display: inline-flex; align-items: center; gap: 6px; }
+.pane-crumb {
+  border: 0; background: transparent; cursor: pointer; padding: 2px 0; border-radius: 4px;
+  font: 500 14px/1.2 var(--ak-font); color: var(--ak-ink-quiet);
+}
+.pane-crumb:hover { color: var(--ak-accent); }
+.pane-crumb.is-current { font: 600 15px/1.2 var(--ak-font); color: var(--ak-ink); cursor: default; }
+.pane-crumb.is-current:hover { color: var(--ak-ink); }
+.pane-crumb-sep { color: var(--ak-line); font-size: 14px; }
+.pane-open {
+  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
+  font: 500 12px/1 var(--ak-font); color: var(--ak-ink-quiet);
+}
+.pane-open:hover { color: var(--ak-accent); }
+.pane-spacer { flex: 1; }
+.pane-notice {
+  border: 0; background: transparent; cursor: pointer; text-align: right;
+  font: 400 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink-quiet);
+}
+.pane-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-accent); }
+.pane-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 64px; }
+/* Una colonna di testo che non diventa mai troppo larga da leggere. Il browser dei media invece
+   vuole tutto lo spazio: là le miniature sono il contenuto. */
+.pane-body > .ed, .pane-body > .rq-detail, .pane-body > .rg, .pane-body > .pane-empty { max-width: 820px; }
+.pane-body.is-wide { padding: 14px 16px 40px; }
+.pane-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
+
+.app-legacy {
+  flex: none; padding: 9px 20px; background: #fff8e6; border-bottom: 1px solid var(--ak-line);
+  font: 400 var(--ak-fs-small)/1.5 var(--ak-font); color: var(--ak-ink-quiet);
+}
+.app-legacy-row { margin: 0; display: flex; align-items: center; gap: 12px; }
+.app-legacy-row > span { flex: 1; }
+.app-legacy-list { margin: 6px 0 0; opacity: .8; }
+
+/* ---- Impostazioni globali --------------------------------------------------------------- */
+.settings-editor {
+  width: min(1120px, 100%); margin: 0 auto; padding: 12px 18px 70px;
+  display: flex; flex-direction: column; gap: 44px;
+}
+.st-intro { padding: 18px 0 22px; border-bottom: 1px solid var(--ak-line); }
+.st-intro > span {
+  display: block; margin-bottom: 7px; color: var(--ak-accent);
+  font: 600 10px/1 var(--ak-font); letter-spacing: .1em; text-transform: uppercase;
+}
+.st-intro h2 { margin: 0; font: 600 24px/1.2 var(--ak-font); }
+.st-intro p {
+  max-width: 640px; margin: 9px 0 0; color: var(--ak-ink-quiet);
+  font: 400 13px/1.55 var(--ak-font);
+}
+.st-section { display: flex; flex-direction: column; }
+.st-section > h2 {
+  margin: 0; padding: 0 0 13px; border-bottom: 1px solid var(--ak-line);
+  font: 600 15px/1.2 var(--ak-font);
+}
+.st-row {
+  display: grid; grid-template-columns: minmax(210px, 300px) minmax(280px, 620px);
+  gap: clamp(30px, 6vw, 90px); align-items: start;
+  padding: 27px 0; border-bottom: 1px solid var(--ak-line);
+}
+.st-copy h3 { margin: 0 0 8px; font: 600 14px/1.3 var(--ak-font); }
+.st-copy p {
+  margin: 0; color: var(--ak-ink-quiet); font: 400 12px/1.55 var(--ak-font);
+}
+.st-control { position: relative; min-width: 0; }
+.st-input {
+  width: 100%; min-height: 43px; padding: 10px 12px;
+  border: 1px solid var(--ak-line); border-radius: 5px;
+  background: var(--ak-panel); color: var(--ak-ink);
+  font: 400 13px/1.45 var(--ak-font);
+}
+.st-input:focus {
+  outline: 2px solid color-mix(in srgb,var(--ak-accent) 24%,transparent);
+  border-color: var(--ak-accent);
+}
+.st-textarea { resize: vertical; min-height: 82px; }
+/* L'interruttore di una funzione non attiva: si vede, non si preme. `not-allowed` sul cursore
+   dice che è così di proposito — un elemento solo sbiadito si scambia per un caricamento. */
+.st-toggle.is-locked { cursor: not-allowed; opacity: .62; }
+.st-toggle.is-locked input { cursor: not-allowed; }
+.st-extras-note { margin-top: 2px; }
+/* Arrivando dal pulsante «Attiva» di una card bloccata: un velo d'accento che si spegne da
+   solo. Serve a dire «è questa» dopo lo scorrimento, senza lasciare una sezione evidenziata
+   per sempre a chi poi resta a lavorare sulle impostazioni. */
+.st-section.is-focused { animation: st-focus 2.4s ease-out 1; border-radius: 10px; }
+@keyframes st-focus {
+  0%, 40% { background: color-mix(in srgb, var(--ak-accent) 9%, transparent); }
+  100% { background: transparent; }
+}
+/* Il campo del tag contiene codice, e si vede che lo contiene: a spaziatura fissa gli a capo
+   e le virgolette si contano, e nessuno lo scambia per una frase da scrivere. */
+.st-code {
+  font: 400 12px/1.6 var(--ak-font-mono); white-space: pre; overflow-wrap: normal;
+  overflow-x: auto; tab-size: 2;
+}
+.st-count {
+  display: block; margin-top: 6px; text-align: right; color: var(--ak-ink-faint);
+  font: 400 10px/1 var(--ak-font-mono);
+}
+.st-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
+.st-inline-help {
+  margin: -3px 0 0; color: var(--ak-ink-quiet); font: 400 11px/1.45 var(--ak-font);
+}
+.st-favicon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.st-favicon-preview {
+  width: 48px; height: 48px; display: grid; place-items: center; flex: none;
+  overflow: hidden; border: 1px solid var(--ak-line); border-radius: 8px;
+  background: var(--ak-panel); color: var(--ak-ink-quiet);
+}
+.st-favicon-preview img { width: 100%; height: 100%; display: block; object-fit: contain; }
+.st-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
+.st-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
+.st-toggle-track {
+  width: 39px; height: 23px; padding: 3px; flex: none; border-radius: 20px;
+  background: var(--ak-line); transition: background-color .16s;
+}
+.st-toggle-track span {
+  display: block; width: 17px; height: 17px; border-radius: 50%;
+  background: var(--ak-panel); box-shadow: 0 1px 3px rgba(0,0,0,.22);
+  transition: transform .16s;
+}
+.st-toggle input:checked + .st-toggle-track { background: var(--ak-accent); }
+.st-toggle input:checked + .st-toggle-track span { transform: translateX(16px); }
+.st-toggle input:focus-visible + .st-toggle-track {
+  outline: 2px solid var(--ak-accent); outline-offset: 2px;
+}
+.st-toggle > span:last-child {
+  color: var(--ak-ink-quiet); font: 500 12px/1.3 var(--ak-font);
+}
+.st-sitemap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.st-sitemap code {
+  flex: 1; min-width: 240px; padding: 12px; overflow: hidden; text-overflow: ellipsis;
+  border: 1px solid var(--ak-line); border-radius: 5px; background: var(--ak-panel);
+  color: var(--ak-ink-quiet); font: 400 11px/1.4 var(--ak-font-mono); white-space: nowrap;
+}
+.st-sitemap .ak-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
+.st-sitemap .ico { width: 14px; height: 14px; }
+
+/* ---- Elenco delle pagine (seconda colonna) --------------------------------------------- */
+.pg { display: flex; flex-direction: column; gap: 18px; }
+.pg-group-title {
+  font: 600 11px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .09em;
+  color: var(--ak-ink-quiet); margin: 0 0 6px; padding: 0 10px;
+}
+.pg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.pg-empty { margin: 0; padding: 2px 10px; font: 400 12px/1 var(--ak-font); color: var(--ak-ink-quiet); }
+.pg-row {
+  position: relative; display: flex; align-items: center; gap: 2px;
+  border: 1px solid transparent; border-radius: 6px; background: transparent;
+}
+.pg-row:hover { background: var(--ak-hover); }
+.pg-row.is-on {
+  background: var(--ak-panel); border-color: var(--ak-line);
+  box-shadow: var(--ak-shadow), inset 2px 0 0 var(--ak-accent);
+}
+.pg-row.is-on .pg-title { font-weight: 600; }
+.pg-row.is-dragging { background: var(--ak-panel); box-shadow: 0 8px 22px rgba(0,0,0,.14); z-index: 2; }
+/* Maniglia e ••• compaiono al passaggio: in una colonna stretta, otto maniglie sempre accese
+   sono rumore. Restano raggiungibili da tastiera — `:focus-visible` le riaccende. */
+.pg-handle {
+  flex: none; display: flex; border: 0; background: transparent; cursor: grab;
+  color: var(--ak-ink-quiet); padding: 6px 0 6px 5px; opacity: 0;
+}
+.pg-row:hover .pg-handle, .pg-row.is-dragging .pg-handle, .pg-handle:focus-visible { opacity: .5; }
+.pg-open {
+  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
+  border: 0; background: transparent; cursor: pointer; text-align: left;
+  padding: 8px 2px; font: 500 13px/1.3 var(--ak-font); color: var(--ak-ink);
+}
+.pg-icon, .pg-off { flex: none; display: flex; }
+.pg-icon { color: var(--ak-ink-quiet); }
+.pg-off { color: var(--ak-danger); opacity: .7; }
+.pg-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---- Azioni sulla riga: popover ancorato ------------------------------------------------ */
+.pa { position: relative; flex: none; }
+.pa-more {
+  display: flex; border: 0; background: transparent; cursor: pointer; border-radius: 4px;
+  color: var(--ak-ink-quiet); padding: 6px; opacity: 0;
+}
+.pg-row:hover .pa-more, .pg-row.is-on .pa-more, .pa-more:focus-visible { opacity: 1; }
+.pa-more:hover { background: var(--ak-bg); color: var(--ak-ink); }
+.pa-menu {
+  position: absolute; top: calc(100% + 2px); right: 0; z-index: 20;
+  min-width: 196px; padding: 4px;
+  display: flex; flex-direction: column; gap: 1px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: 8px;
+  box-shadow: 0 12px 30px rgba(0,0,0,.16);
+}
+.pa-menu > button {
+  border: 0; background: transparent; cursor: pointer; text-align: left; border-radius: 5px;
+  padding: 7px 9px; font: 400 13px/1.2 var(--ak-font); color: var(--ak-ink);
+}
+.pa-menu > button:hover { background: var(--ak-bg); }
+.pa-menu > button.pa-danger { color: var(--ak-danger); }
+.pa-menu-form { min-width: 252px; padding: 10px; gap: 8px; }
+.pa-row { display: flex; gap: 6px; }
+.pa-new { display: flex; flex-direction: column; gap: 8px; width: 100%; }
+
+.ed { display: flex; flex-direction: column; gap: 18px; }
+/* Gallery e portfolio prendono tutta la larghezza: il contenuto sono superfici e miniature,
+   non una colonna di testo da tenere leggibile. */
+.pane-body > .ed.ed-gallery, .pane-body > .ed.ed-portfolio { max-width: none; }
+
+/* ---- Editor visuale delle gallery -------------------------------------------------------
+   La gallery è il contenuto della pagina: niente fieldset e campi tecnici fra chi la modifica
+   e le sue fotografie. I controlli comuni restano nella prima riga, accanto al salvataggio. */
+.pe-head-main {
+  min-width: 0; display: flex; align-items: center; gap: 20px;
+}
+.pe-title {
+  min-width: 0; max-width: min(34vw, 420px); overflow: hidden; text-overflow: ellipsis;
+  border: 0; padding: 3px 2px; background: transparent; color: var(--ak-ink); cursor: pointer;
+  font: 600 17px/1.2 var(--ak-font); white-space: nowrap; text-align: left;
+}
+.pe-title:hover { color: var(--ak-accent); }
+.pe-title:focus-visible,
+.pe-seo-button:focus-visible,
+.pe-status:focus-visible,
+.pe-menu-toggle:has(input:focus-visible) {
+  outline: 2px solid var(--ak-accent); outline-offset: 3px; border-radius: 3px;
+}
+.pe-seo-button {
+  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 29px;
+  padding: 0 9px; border: 1px solid var(--ak-line); border-radius: 4px;
+  background: transparent; color: var(--ak-ink-quiet); cursor: pointer;
+  font: 600 11px/1 var(--ak-font); letter-spacing: .03em;
+}
+.pe-seo-button:hover { border-color: var(--ak-ink-quiet); color: var(--ak-ink); }
+.pe-seo-button.is-active {
+  border-color: var(--ak-accent); background: color-mix(in srgb,var(--ak-accent) 8%,var(--ak-panel));
+  color: var(--ak-accent);
+}
+.pe-seo-button .ico { width: 14px; height: 14px; }
+.pe-visibility { position: relative; flex: none; }
+.pe-status {
+  display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 5px 2px;
+  background: transparent; cursor: pointer; color: var(--ak-ink-quiet);
+  font: 500 13px/1 var(--ak-font);
+}
+.pe-status.is-online { color: #168666; }
+.pe-status.is-offline { color: var(--ak-danger); }
+.pe-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+.pe-chevron { margin-left: 1px; color: var(--ak-ink-quiet); transform: translateY(-1px); }
+.pe-status-menu {
+  position: absolute; z-index: 40; top: calc(100% + 13px); right: -18px;
+  width: 330px; overflow: hidden; border: 1px solid var(--ak-line); border-radius: 8px;
+  background: var(--ak-panel); box-shadow: 0 18px 46px rgba(0,0,0,.18);
+}
+.pe-status-label {
+  display: block; padding: 17px 20px 13px; color: var(--ak-ink-quiet);
+  font: 600 10px/1 var(--ak-font); letter-spacing: .12em; text-transform: uppercase;
+}
+.pe-status-menu button {
+  width: 100%; min-height: 94px; display: grid; grid-template-columns: 24px minmax(0,1fr);
+  gap: 12px; align-items: start; padding: 18px 20px; border: 0; border-top: 1px solid var(--ak-line);
+  background: var(--ak-panel); color: var(--ak-ink); cursor: pointer; text-align: left;
+}
+.pe-status-menu button:hover { background: var(--ak-bg); }
+.pe-status-menu button.is-selected {
+  background: color-mix(in srgb, #20b987 10%, var(--ak-panel));
+  box-shadow: inset 3px 0 0 #20b987;
+}
+.pe-status-menu button:last-child.is-selected {
+  background: color-mix(in srgb, var(--ak-danger) 7%, var(--ak-panel));
+  box-shadow: inset 3px 0 0 var(--ak-danger);
+}
+.pe-status-menu button > span:last-child { display: flex; flex-direction: column; gap: 7px; }
+.pe-status-menu strong { font: 600 14px/1.2 var(--ak-font); }
+.pe-status-menu small { color: var(--ak-ink-quiet); font: 400 12px/1.45 var(--ak-font); }
+.pe-radio {
+  width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%;
+  border: 1px solid #c9c9c7; background: var(--ak-panel);
+}
+.is-selected .pe-radio span { width: 9px; height: 9px; border-radius: 50%; background: #20b987; }
+.pe-status-menu button:last-child.is-selected .pe-radio span { background: var(--ak-danger); }
+.pe-menu-toggle {
+  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px;
+  color: var(--ak-ink); cursor: pointer; font: 500 12px/1 var(--ak-font);
+}
+.pe-menu-toggle input { width: 15px; height: 15px; margin: 0; }
+
+.pe-modal {
+  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px;
+  background: rgba(23,24,26,.42);
+}
+.pe-modal-card {
+  width: min(560px, 100%); overflow: hidden; border: 1px solid var(--ak-line); border-radius: 9px;
+  background: var(--ak-panel); box-shadow: 0 24px 70px rgba(0,0,0,.22);
+}
+.pe-modal-card header {
+  min-height: 70px; display: flex; align-items: center; padding: 0 24px;
+  border-bottom: 1px solid var(--ak-line);
+}
+.pe-modal-card h2 { margin: 0; font: 600 16px/1.2 var(--ak-font); }
+.pe-modal-card header button {
+  margin-left: auto; border: 0; background: transparent; color: var(--ak-ink-quiet);
+  cursor: pointer; font: 300 24px/1 var(--ak-font);
+}
+.pe-modal-fields { display: grid; gap: 20px; padding: 24px; }
+.pe-modal-fields label { display: grid; gap: 7px; color: var(--ak-ink); font: 500 13px/1.3 var(--ak-font); }
+.pe-modal-fields input {
+  width: 100%; height: 43px; padding: 9px 11px; border: 1px solid var(--ak-line);
+  border-radius: 5px; background: var(--ak-panel); color: var(--ak-ink); font: 400 14px/1 var(--ak-font);
+}
+.pe-modal-fields input:focus { outline: 2px solid var(--ak-accent); outline-offset: 1px; }
+.pe-modal-fields small { color: var(--ak-ink-quiet); font: 400 11px/1.4 var(--ak-font); }
+.pe-url-input {
+  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center;
+  border: 1px solid var(--ak-line); border-radius: 5px; padding: 0 11px; color: var(--ak-ink-quiet);
+}
+.pe-url-input:focus-within { outline: 2px solid var(--ak-accent); outline-offset: 1px; }
+.pe-url-input input { height: 41px; padding-inline: 2px; border: 0; outline: 0 !important; }
+.pe-modal-card footer {
+  display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px;
+  border-top: 1px solid var(--ak-line); background: var(--ak-bg);
+}
+
+.ed-gallery { width: 100%; }
+
+/* Sezioni introduttive: blocchi progettati sopra la gallery.
+   Stesso linguaggio dell'editor dei lavori (`.pw-*`) e stessi valori, presi da `theme.css`:
+   niente tratti, superfici separate da tinta e ombra, campi riempiti. Erano card contornate su
+   fondo quasi bianco — la stessa mancanza di contrasto già corretta nel portfolio.
+
+   Cosa NON c'è più, e non è una dimenticanza: le barre blu di inserimento durante il
+   trascinamento. Erano un tratto di 3px in un blu (#1677ff) che non appartiene alla palette di
+   questo pannello, e soprattutto erano ridondanti — con `verticalListSortingStrategy` dnd-kit
+   allontana già gli elementi per mostrare dove cadrà quello trascinato, che è il modo in cui lo
+   raccontano le interfacce a cui punta il redesign. Vedi routes/GallerySectionsEditor.tsx. */
+.gs-editor {
+  width: min(1080px, 100%); margin: 0 auto;
+  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
+  padding: 4px 0 26px;
+}
+.gs-add-wrap { position: relative; align-self: center; z-index: 8; }
+/* Pieno d'accento, non contornato: è l'unica azione primaria della zona. */
+.gs-add {
+  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
+  padding: 0 17px; border: 0; border-radius: 10px;
+  background: var(--ak-accent); color: #fff; cursor: pointer;
+  font: 600 12px/1 var(--ak-font); box-shadow: var(--ak-lift-2);
+  transition: background-color .15s;
+}
+.gs-add:hover { background: var(--ak-accent-hover); }
+.gs-add:focus-visible { outline: 0; box-shadow: var(--ak-ring); }
+.gs-add-menu {
+  position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; width: 300px;
+  padding: 6px; transform: translateX(-50%); border: 0;
+  border-radius: 12px; background: var(--ak-panel); box-shadow: var(--ak-lift-3);
+}
+.gs-add-menu button {
+  width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px;
+  align-items: center; padding: 10px; border: 0; border-radius: 9px;
+  background: transparent; color: var(--ak-ink); cursor: pointer; text-align: left;
+}
+.gs-add-menu button:hover { background: var(--ak-inset); }
+.gs-add-menu button > span:first-child {
+  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
+  background: var(--ak-inset); color: var(--ak-ink-quiet);
+}
+.gs-add-menu button > span:last-child { display: flex; flex-direction: column; gap: 3px; }
+.gs-add-menu strong { font: 600 12px/1.2 var(--ak-font); }
+.gs-add-menu small { color: var(--ak-ink-quiet); font: 400 10px/1.3 var(--ak-font); }
+
+.gs-list { display: flex; flex-direction: column; gap: 8px; }
+.gs-card {
+  position: relative; overflow: visible; border: 0; border-radius: 14px;
+  background: var(--ak-panel); box-shadow: var(--ak-lift-1);
+  transition: box-shadow .18s ease;
+}
+.gs-card:hover { box-shadow: var(--ak-lift-2); }
+/* Sollevata e semitrasparente mentre la si trascina: staccata dal foglio. Dove cadrà lo
+   mostrano gli altri che si spostano. */
+.gs-card.is-dragging { z-index: 4; opacity: .9; box-shadow: var(--ak-lift-3); }
+
+/* L'intestazione non è separata da niente: né riga né tinta. A distinguerla bastano lo spazio e
+   la micro-etichetta maiuscola (IMMAGINE, HEADER, TESTO), che è già un cambio di registro
+   tipografico — aggiungerci anche un fondo diverso sarebbe dire due volte la stessa cosa. */
+.gs-card-head {
+  min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px;
+}
+.gs-drag {
+  display: grid; place-items: center; width: 26px; height: 32px; padding: 0; border: 0;
+  border-radius: 8px; background: transparent; color: var(--ak-ink-quiet); cursor: grab;
+  touch-action: none; opacity: 0; transition: opacity .15s, background-color .15s;
+}
+.gs-drag:active { cursor: grabbing; }
+.gs-card:hover .gs-drag, .gs-card.is-dragging .gs-drag, .gs-drag:focus-visible { opacity: .55; }
+.gs-drag:hover { background: var(--ak-inset); opacity: 1 !important; }
+.gs-card-icon { display: flex; color: var(--ak-ink-quiet); }
+.gs-card-head strong {
+  color: var(--ak-ink-quiet); font: 600 10px/1 var(--ak-font);
+  text-transform: uppercase; letter-spacing: .09em;
+}
+.gs-position { min-width: 18px; color: var(--ak-ink-faint, var(--ak-ink-quiet)); font: 400 10px/1 var(--ak-font-mono); }
+/* Duplica ed Elimina compaiono al passaggio: sono azioni distruttive o moltiplicative, non
+   devono stare sotto il dito mentre si scorre. */
+.gs-head-action {
+  margin-left: auto; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent;
+  color: var(--ak-ink-quiet); cursor: pointer; font: 500 11px/1 var(--ak-font);
+  opacity: 0; transition: opacity .15s, background-color .15s, color .15s;
+}
+.gs-head-action + .gs-head-action { margin-left: 4px; }
+.gs-card:hover .gs-head-action, .gs-card:focus-within .gs-head-action { opacity: 1; }
+.gs-head-action:hover { background: var(--ak-inset); color: var(--ak-ink); }
+.gs-head-action.is-danger { color: var(--ak-danger); }
+.gs-head-action.is-danger:hover { background: color-mix(in srgb, var(--ak-danger) 9%, transparent); }
+
+/* La griglia delle foto dentro il suo blocco. L'editor arriva già impaginato (`.pe-gallery`,
+   che vive fuori di qui): serve solo il contenimento, cioè togliergli i margini che aveva da
+   pannello a sé stante e dargli il respiro interno della card. */
+.gs-gallery { padding: 0 14px 14px; }
+.gs-gallery .pe-gallery { gap: 16px; }
+.gs-gallery .pe-gallery-bar { padding-bottom: 0; }
+/* Il fondo qui è bianco (la card), non il foglio tinto: la griglia non deve sembrare incollata
+   sul bordo. */
+.gs-gallery .pe-photo-grid { padding-bottom: 4px; }
+.gs-fields { display: grid; gap: 14px; padding: 2px 14px 16px; }
+.gs-fields label,
+.gs-image-fields label { display: flex; flex-direction: column; gap: 6px; }
+.gs-fields label > span,
+.gs-image-fields label > span,
+.gs-layout > span { color: var(--ak-ink); font: 500 11px/1.3 var(--ak-font); }
+.gs-fields label > span small,
+.gs-image-fields label > span small { color: var(--ak-ink-quiet); font-weight: 400; }
+/* Campi RIEMPITI: il contrasto col fondo dice già dove si scrive, e l'anello di focus fa il
+   lavoro che faceva il bordo. */
+/* `.ak-prose-field` accanto a `textarea`: il campo di prosa non è più una textarea ma un
+   contenteditable (vedi adminkit form/prose/ProseField.tsx), e senza questo perderebbe il suo
+   riquadro — resterebbe testo appoggiato sul fondo della card. */
+.gs-fields input,
+.gs-fields textarea,
+.gs-fields .ak-prose-field,
+.gs-image-fields input {
+  width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
+  background: var(--ak-inset); color: var(--ak-ink); font: 400 13px/1.5 var(--ak-font);
+  transition: background-color .15s, box-shadow .15s;
+}
+.gs-fields textarea, .gs-fields .ak-prose-field { min-height: 96px; }
+.gs-fields textarea { resize: vertical; }
+.gs-fields input:hover, .gs-fields textarea:hover, .gs-fields .ak-prose-field:hover,
+.gs-image-fields input:hover {
+  background: var(--ak-inset-deep);
+}
+.gs-fields input:focus,
+.gs-fields textarea:focus,
+.gs-fields .ak-prose-field:focus,
+.gs-image-fields input:focus {
+  outline: 0; background: var(--ak-panel); box-shadow: var(--ak-ring);
+}
+.gs-fields label > small { color: var(--ak-ink-quiet); font: 400 10px/1.45 var(--ak-font); }
+.gs-card.is-header .gs-fields label:nth-child(2) input {
+  padding-block: 13px; font-size: 18px; font-weight: 600; letter-spacing: -.01em;
+}
+.gs-image-editor {
+  display: grid; grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.15fr);
+  gap: 18px; padding: 2px 14px 16px;
+}
+/* Il segnaposto è una superficie incassata, non un rettangolo tratteggiato: invita a premere
+   invece di sembrare un contenitore rotto. */
+.gs-image-preview {
+  position: relative; min-height: 210px; display: grid; place-items: center; overflow: hidden;
+  padding: 0; border: 0; border-radius: 11px;
+  background: var(--ak-inset-deep); color: var(--ak-ink-quiet); cursor: pointer;
+}
+.gs-image-preview:hover { color: var(--ak-accent); }
+.gs-image-preview img { width: 100%; height: 100%; max-height: 320px; display: block; object-fit: contain; }
+.gs-image-preview > span { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--ak-font); }
+.gs-image-fields { display: flex; flex-direction: column; gap: 13px; }
+.gs-image-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+/* Larga/Contenuta è UNA scelta fra due, non due pulsanti: la vaschetta incassata e l'unica
+   opzione sollevata lo dicono senza contorni. */
+.gs-layout { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+
+.pe-gallery { width: 100%; display: flex; flex-direction: column; gap: 26px; }
+.pe-gallery-bar {
+  display: flex; align-items: center; justify-content: space-between; gap: 18px;
+  min-height: 48px; padding: 0 2px 18px; border-bottom: 1px solid var(--ak-line);
+}
+.pe-gallery-bar > div { display: flex; flex-direction: column; gap: 4px; }
+.pe-gallery-bar strong { font: 600 13px/1.2 var(--ak-font); }
+.pe-gallery-bar span { color: var(--ak-ink-quiet); font: 400 11px/1.3 var(--ak-font); }
+/* Stessa forma di `.gs-add`: sono due azioni primarie sulla STESSA schermata (aggiungi una
+   sezione, aggiungi delle foto) e vederle una contornata e una piena le fa sembrare di peso
+   diverso, che non è. La griglia delle foto per il resto non è stata ridisegnata. */
+.pe-add {
+  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 38px; padding: 0 17px; border: 0; border-radius: 10px;
+  background: var(--ak-accent); color: #fff; cursor: pointer;
+  font: 600 12px/1 var(--ak-font); box-shadow: var(--ak-lift-2);
+  transition: background-color .15s;
+}
+.pe-add:hover { background: var(--ak-accent-hover); }
+.pe-add:focus-visible { outline: 0; box-shadow: var(--ak-ring); }
+.pe-gallery-empty {
+  min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 8px;
+  border: 1px dashed var(--ak-line); border-radius: 8px; background: var(--ak-panel);
+  color: var(--ak-ink-quiet); cursor: pointer;
+}
+.pe-gallery-empty .ico { width: 24px; height: 24px; margin-bottom: 4px; }
+.pe-gallery-empty strong { color: var(--ak-ink); font: 600 14px/1.2 var(--ak-font); }
+.pe-gallery-empty span { font: 400 12px/1.2 var(--ak-font); }
+.pe-gallery-empty:hover { border-color: var(--ak-accent); color: var(--ak-accent); }
+
+.pe-photo-grid {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
+  gap: 28px 24px; align-items: start; padding: 4px 2px 40px;
+}
+.pe-photo {
+  position: relative; min-width: 0; margin: 0; padding-top: 18px;
+  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
+}
+.pe-photo-frame {
+  position: relative; height: clamp(155px, 16vw, 230px); display: flex; align-items: center; justify-content: center;
+  cursor: grab; touch-action: none;
+}
+.pe-photo-frame:active { cursor: grabbing; }
+.pe-photo-frame img {
+  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
+  background: var(--ak-line); box-shadow: 0 1px 4px rgba(0,0,0,.15);
+  transition: opacity .15s, filter .15s;
+}
+.pe-photo figcaption {
+  overflow: hidden; padding-inline: 2px; color: #8a8a91; text-align: center;
+  font: 400 11px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap;
+}
+.pe-photo-actions {
+  position: absolute; z-index: 3; top: 0; left: 50%; transform: translate(-50%, -18%);
+  display: flex; align-items: center; padding: 5px; border: 1px solid var(--ak-line);
+  border-radius: 5px; background: var(--ak-panel); box-shadow: 0 8px 24px rgba(0,0,0,.14);
+  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
+}
+.pe-photo:hover .pe-photo-actions,
+.pe-photo:focus-within .pe-photo-actions {
+  opacity: 1; pointer-events: auto; transform: translate(-50%, -28%);
+}
+.pe-photo-actions button {
+  width: 34px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 3px;
+  background: transparent; color: var(--ak-ink); cursor: pointer;
+}
+.pe-photo-actions button:hover { background: var(--ak-bg); }
+.pe-photo-actions button.is-danger { color: var(--ak-danger); }
+.pe-photo-actions .ico { width: 17px; height: 17px; }
+.pe-photo.is-hidden .pe-photo-frame img { opacity: .25; filter: grayscale(1); }
+.pe-hidden-label {
+  position: absolute; inset: auto 7px 7px; padding: 4px 7px; border-radius: 3px;
+  background: rgba(25,25,25,.78); color: #fff; font: 600 9px/1 var(--ak-font);
+  letter-spacing: .05em; text-transform: uppercase;
+}
+.pe-photo.is-dragging { opacity: .22; }
+.pe-photo.is-insert-before::before,
+.pe-photo.is-insert-after::after {
+  content: ""; position: absolute; z-index: 4; top: 17px; bottom: 29px; width: 3px;
+  border-radius: 3px; background: #1677ff; box-shadow: 0 0 0 1px rgba(22,119,255,.12);
+}
+.pe-photo.is-insert-before::before { left: -13px; }
+.pe-photo.is-insert-after::after { right: -13px; }
+.pe-photo-overlay {
+  width: 180px; height: 230px; display: flex; align-items: center; justify-content: center;
+  padding: 5px; background: rgba(255,255,255,.96); box-shadow: 0 16px 38px rgba(0,0,0,.2);
+  cursor: grabbing;
+}
+.pe-photo-overlay img { max-width: 100%; max-height: 100%; display: block; }
+.pe-load-error {
+  margin: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb,var(--ak-danger) 30%,var(--ak-line));
+  border-radius: 5px; color: var(--ak-danger); background: var(--ak-panel);
+  font: 500 11px/1.4 var(--ak-font);
+}
+
+/* ---- SEO della pagina ------------------------------------------------------------------
+   Tre colonne come nella reference: nome della proprietà, superficie operativa, spiegazione.
+   La colonna centrale resta quella dominante; gli aiuti accompagnano senza trasformarsi in
+   un'altra scheda da aprire. */
+.seo-editor {
+  width: 100%; margin: 0; padding: 6px 18px 64px;
+  display: flex; flex-direction: column; gap: 26px;
+}
+.seo-intro {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
+  padding: 10px 0 21px; border-bottom: 1px solid var(--ak-line);
+}
+.seo-kicker {
+  display: block; margin-bottom: 8px; color: var(--ak-ink-quiet);
+  font: 600 10px/1 var(--ak-font); letter-spacing: .12em; text-transform: uppercase;
+}
+.seo-intro h2 { margin: 0; font: 600 23px/1.15 var(--ak-font); letter-spacing: -.02em; }
+.seo-intro p { margin: 8px 0 0; color: var(--ak-ink-quiet); font: 400 12px/1.5 var(--ak-font); }
+.seo-complete {
+  flex: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 7px;
+  color: #a26a18; font: 600 12px/1 var(--ak-font);
+}
+.seo-complete > span {
+  width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid currentColor;
+  border-radius: 50%; font: 700 11px/1 var(--ak-font);
+}
+.seo-complete.is-complete { color: #129c76; }
+.seo-section {
+  display: flex; flex-direction: column; border-top: 1px solid var(--ak-line);
+}
+.seo-section-heading,
+.seo-row {
+  display: grid;
+  grid-template-columns: clamp(110px, 10vw, 150px) minmax(440px, 720px) minmax(220px, 1fr);
+  gap: 22px; align-items: start;
+}
+.seo-section-heading { padding: 20px 0 17px; }
+.seo-section-heading > span {
+  color: var(--ak-ink); font: 600 13px/1.3 var(--ak-font);
+}
+.seo-section-heading > div { grid-column: 2; }
+.seo-section-heading h3 { margin: 0; font: 600 16px/1.2 var(--ak-font); }
+.seo-section-heading p { margin: 5px 0 0; color: var(--ak-ink-quiet); font: 400 11px/1.4 var(--ak-font); }
+.seo-row {
+  padding: 19px 0; border-top: 1px solid color-mix(in srgb,var(--ak-line) 72%,transparent);
+}
+.seo-row-label { padding-top: 4px; color: var(--ak-ink); font: 500 12px/1.3 var(--ak-font); }
+.seo-row > .seo-field { grid-column: 2; }
+.seo-row > .seo-help { grid-column: 3; }
+.seo-help {
+  margin: 0; padding-top: 29px; color: #92929a; font: 400 11px/1.5 var(--ak-font);
+}
+.seo-preview-row .seo-help { padding-top: 4px; }
+.seo-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.seo-field > span:first-child { color: var(--ak-ink); font: 500 13px/1.3 var(--ak-font); }
+.seo-field input,
+.seo-field textarea {
+  width: 100%; border: 1px solid var(--ak-line); border-radius: 4px;
+  background: var(--ak-panel); color: var(--ak-ink); padding: 11px 12px;
+  font: 400 13px/1.45 var(--ak-font);
+}
+.seo-field textarea { resize: vertical; min-height: 105px; }
+.seo-field input:focus,
+.seo-field textarea:focus {
+  outline: 2px solid color-mix(in srgb,var(--ak-accent) 28%,transparent);
+  outline-offset: 1px; border-color: var(--ak-accent);
+}
+.seo-count {
+  align-self: flex-end; color: var(--ak-ink-quiet); font: 400 10px/1 var(--ak-font);
+  font-variant-numeric: tabular-nums;
+}
+.seo-count.is-long { color: #a26a18; }
+
+.seo-search-preview {
+  min-height: 166px; display: flex; flex-direction: column; padding: 19px 21px;
+  border: 1px solid #ececec; border-radius: 7px; background: #fff;
+  box-shadow: 0 5px 18px rgba(0,0,0,.09); font-family: Arial, sans-serif;
+}
+.seo-search-site { color: #3c4043; font-size: 11px; line-height: 1.3; }
+.seo-search-url {
+  margin-top: 2px; overflow: hidden; color: #202124; font-size: 10px; line-height: 1.3;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.seo-search-preview strong {
+  display: -webkit-box; margin-top: 7px; overflow: hidden; color: #1a0dab;
+  font-size: 18px; font-weight: 400; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+.seo-search-preview p {
+  display: -webkit-box; margin: 6px 0 0; overflow: hidden; color: #4d5156;
+  font-size: 12px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+
+.seo-og-preview {
+  overflow: hidden; border: 1px solid #d9d9dc; border-radius: 7px; background: #f4f4f5;
+  box-shadow: 0 4px 15px rgba(0,0,0,.07);
+}
+.seo-og-image {
+  aspect-ratio: 1.91 / 1; display: grid; place-items: center; overflow: hidden;
+  background: #e8e8e8; color: var(--ak-ink-quiet);
+}
+.seo-og-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
+.seo-og-image > span { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; }
+.seo-og-copy { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
+.seo-og-copy > span {
+  color: #65656d; font: 500 9px/1 var(--ak-font); letter-spacing: .04em;
+}
+.seo-og-copy strong {
+  overflow: hidden; color: #171719; font: 600 14px/1.25 var(--ak-font);
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.seo-og-copy p {
+  display: -webkit-box; margin: 0; overflow: hidden; color: #65656d;
+  font: 400 11px/1.35 var(--ak-font); -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+}
+.seo-image-picker { display: flex; align-items: flex-start; gap: 14px; }
+.seo-image-picker > img,
+.seo-image-picker > div:first-child {
+  flex: none; width: 150px; aspect-ratio: 1.91/1; display: grid; place-items: center;
+  object-fit: cover; border: 1px solid var(--ak-line); border-radius: 4px; background: var(--ak-bg);
+  color: var(--ak-ink-quiet);
+}
+.seo-image-picker > div:last-child { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 7px; }
+.seo-image-picker small {
+  flex-basis: 100%; color: var(--ak-ink-quiet); font: 400 10px/1.4 var(--ak-font);
+}
+
+/* ---- Richieste dal form di contatto -----------------------------------------------------
+   Elenco a sinistra, messaggio a destra. Nell'elenco basta chi ha scritto, quando e le prime
+   parole — è così che si ritrova quella di tre settimane fa; nel messaggio invece niente
+   troncamenti. Le gestite restano, smorzate: sparire sarebbe perdere il filo di cosa è arrivato. */
+.rq-bulk { display: flex; align-items: center; gap: 10px; width: 100%; }
+
+.rq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
+.rq-row {
+  display: flex; align-items: flex-start; gap: 6px; padding: 2px 4px 2px 0;
+  border: 1px solid transparent; border-radius: 6px; background: transparent;
+}
+.rq-row:hover { background: var(--ak-hover); }
+.rq-row.is-on {
+  background: var(--ak-panel); border-color: var(--ak-line);
+  box-shadow: var(--ak-shadow), inset 2px 0 0 var(--ak-accent);
+}
+/* Smorzata, non sparita: `opacity` sul contenuto e non sulla riga, così la casella per sceglierla
+   resta leggibile anche su una richiesta già chiusa. */
+.rq-row.is-handled .rq-open { opacity: .55; }
+.rq-pick { margin: 12px 0 0 8px; width: 14px; height: 14px; flex: none; }
+/* Nome, data e anteprima incolonnati, come nella reference: un nome lungo — e i nomi veri lo
+   sono — non deve dividersi lo spazio con la data. Il pallino sta a destra, dove si guarda per
+   sapere se c'è qualcosa di nuovo, non attaccato al nome. */
+.rq-open {
+  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
+  border: 0; background: transparent; cursor: pointer; text-align: left; padding: 9px 10px 10px 2px;
+}
+.rq-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.rq-who {
+  flex: 1; min-width: 0; font: 600 13px/1.35 var(--ak-font); color: var(--ak-ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.rq-new { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-accent); }
+.rq-when { font: 400 11px/1.3 var(--ak-font-mono); color: var(--ak-ink-quiet); white-space: nowrap; }
+.rq-snip {
+  font: 400 12px/1.4 var(--ak-font); color: var(--ak-ink-quiet);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.rq-detail {
+  display: flex; flex-direction: column;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+}
+/* Una richiesta gestita si smorza nei CAMPI, non nei bottoni: dimmando tutta la scheda,
+   «Rispondi» sembrerebbe disattivato proprio quando serve rispondere di nuovo. Stessa regola
+   della foto nascosta nel widget delle gallery. */
+.rq-detail.is-handled .rq-fields { opacity: .6; }
+.rq-head {
+  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
+  border-bottom: 1px solid var(--ak-line);
+}
+.rq-avatar {
+  flex: none; width: 30px; height: 30px; border-radius: 50%;
+  display: grid; place-items: center; background: var(--ak-ink); color: #fff;
+  font: 600 11px/1 var(--ak-font); letter-spacing: .04em;
+}
+.rq-name { font: 600 14px/1.2 var(--ak-font); }
+.rq-tag {
+  font: 500 11px/1 var(--ak-font); padding: 3px 7px; border-radius: 20px;
+  background: var(--ak-bg); border: 1px solid var(--ak-line); color: var(--ak-ink-quiet);
+}
+.rq-date { font: 400 11px/1 var(--ak-font-mono); color: var(--ak-ink-quiet); white-space: nowrap; }
+.rq-menu-wrap { position: relative; display: inline-flex; }
+
+.rq-fields {
+  margin: 0; padding: 16px; display: grid; grid-template-columns: 130px minmax(0, 1fr);
+  gap: 14px 16px; align-items: baseline;
+}
+.rq-fields dt { font: 400 var(--ak-fs-small)/1.4 var(--ak-font); color: var(--ak-ink-quiet); }
+.rq-fields dd { margin: 0; font: 400 var(--ak-fs)/1.5 var(--ak-font); }
+.rq-mail { color: var(--ak-accent); text-decoration: none; }
+.rq-mail:hover { text-decoration: underline; }
+/* `pre-wrap`: chi scrive va a capo, e quegli a capo sono parte del messaggio. */
+.rq-msg { white-space: pre-wrap; }
+.rq-actions { display: flex; gap: 8px; padding: 0 16px 16px; }
+
+/* ---- Consegne --------------------------------------------------------------------------
+   Una schermata sola per un transfer: a sinistra il lavoro (file, nome, messaggio, link), a
+   destra le opzioni. La forma viene da WeTransfer; la differenza è che qui lo spazio c'è, e
+   quindi le opzioni stanno APERTE invece che dietro a una freccia. Vedi routes/Deliveries.tsx.
+   -------------------------------------------------------------------------------------- */
+
+/* L'elenco */
+.dl-list { gap: 3px; }
+.dl-row {
+  display: grid; grid-template-columns: 9px minmax(0,1fr) auto; gap: 5px 9px;
+  align-items: center; padding: 10px;
+}
+.dl-state { width: 8px; height: 8px; border-radius: 50%; background: var(--ak-ink-faint); grid-row: span 2; }
+.dl-state.is-ready { background: #2f8b62; }
+.dl-state.is-downloaded { background: #3978b8; }
+.dl-state.is-expiring { background: #d28b27; }
+.dl-state.is-uploading { background: var(--ak-accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ak-accent) 15%,transparent); }
+.dl-state.is-expired,.dl-state.is-archived { background: var(--ak-ink-quiet); }
+.dl-row-main { display: flex; flex-direction: column; min-width: 0; text-align: left; }
+.dl-row-main strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
+.dl-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ak-ink-quiet); font-size: 11px; }
+.dl-row-meta,.dl-row-size { font: 500 10px/1.2 var(--ak-font-mono); color: var(--ak-ink-quiet); white-space: nowrap; }
+.dl-row-size { grid-column: 2/4; }
+.dl-col-foot { flex: none; padding: 10px; border-top: 1px solid var(--ak-line); display: grid; gap: 6px; }
+.dl-total { margin: 0; padding: 0 4px; font: 500 10px/1.2 var(--ak-font-mono); color: var(--ak-ink-faint); }
+
+/* Lo spazio di lavoro */
+.dl-work { width: min(1180px,100%); margin: 0 auto; display: grid; gap: 14px; padding-bottom: 48px; }
+.dl-work-head {
+  position: sticky; z-index: 6; top: 0; margin: -4px 0 0; padding: 10px 0;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  background: var(--ak-bg);
+}
+.dl-work-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.dl-work-title h2 {
+  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font: 600 17px/1.2 var(--ak-font);
+}
+.dl-work-actions { display: flex; align-items: center; gap: 6px; flex: none; }
+.dl-pill {
+  flex: none; padding: 3px 9px; border-radius: 20px; background: var(--ak-inset);
+  font: 600 10px/1.2 var(--ak-font); color: var(--ak-ink-quiet);
+}
+.dl-pill.is-ready { color: #226c4c; background: color-mix(in srgb,#2f8b62 14%,var(--ak-panel)); }
+.dl-pill.is-downloaded { color: #285f99; background: color-mix(in srgb,#3978b8 14%,var(--ak-panel)); }
+.dl-pill.is-expiring { color: #8b5a15; background: color-mix(in srgb,#d28b27 16%,var(--ak-panel)); }
+.dl-pill.is-uploading { color: var(--ak-accent); background: color-mix(in srgb,var(--ak-accent) 12%,var(--ak-panel)); }
+
+.dl-feedback {
+  margin: 0; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between;
+  border: 1px solid color-mix(in srgb,#c34848 35%,var(--ak-line)); border-radius: var(--ak-radius);
+  background: color-mix(in srgb,#c34848 8%,var(--ak-panel));
+}
+.dl-feedback.is-ok { color: #226c4c; border-color: color-mix(in srgb,#2f8b62 30%,var(--ak-line)); background: color-mix(in srgb,#2f8b62 7%,var(--ak-panel)); }
+.dl-feedback button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 17px; }
+
+/* Le due colonne. 1fr/360px: la destra tiene le opzioni su una riga sola di testo.
+   `minmax(0,…)` e `min-width: 0` a OGNI livello annidato, non solo sul primo: un elemento di
+   griglia parte da `min-width: auto`, cioè «non più stretto del mio contenuto», e un nome di
+   file lungo con `white-space: nowrap` ha un contenuto minimo largo quanto tutta la riga. Il
+   risultato era che durante il caricamento la colonna di sinistra si allargava fin sotto a
+   quella di destra, e il nome non veniva mai troncato perché nessuno gli diceva quanto era
+   largo. `text-overflow: ellipsis` da solo non basta: prima serve una larghezza. */
+.dl-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 14px; align-items: start; }
+.dl-main,.dl-side {
+  display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; align-content: start; min-width: 0;
+}
+.dl-card,.dl-group { min-width: 0; }
+.dl-card { background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius); }
+
+/* Le due mattonelle di scelta: sono la prima cosa che si guarda entrando. */
+.dl-pick { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.dl-pick-tile {
+  display: grid; justify-items: center; gap: 6px; padding: 18px 12px;
+  border: 1px solid color-mix(in srgb,var(--ak-accent) 22%,var(--ak-line)); border-radius: 10px;
+  background: color-mix(in srgb,var(--ak-accent) 5%,var(--ak-panel));
+  font: 600 12px/1.2 var(--ak-font); color: var(--ak-ink); cursor: pointer;
+  transition: background-color .15s, border-color .15s;
+}
+.dl-pick-tile span { font-size: 19px; line-height: 1; color: var(--ak-accent); }
+.dl-pick-tile:hover:not(:disabled) { background: color-mix(in srgb,var(--ak-accent) 10%,var(--ak-panel)); border-color: var(--ak-accent); }
+.dl-pick-tile:disabled { opacity: .5; cursor: default; }
+
+.dl-drop {
+  margin: 0 14px 14px; padding: 16px; display: grid; gap: 3px; justify-items: center;
+  border: 1px dashed var(--ak-line); border-radius: 10px; text-align: center;
+  color: var(--ak-ink-quiet);
+}
+.dl-drop strong { color: var(--ak-ink); font-size: 12px; }
+.dl-drop span { font-size: 10px; }
+.dl-drop.is-over { border-color: var(--ak-accent); background: color-mix(in srgb,var(--ak-accent) 7%,var(--ak-panel)); }
+.dl-drop.is-off { opacity: .5; }
+
+.dl-files { margin: 0; padding: 0 14px 14px; list-style: none; display: grid; gap: 8px; }
+.dl-file {
+  display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 10px; align-items: center;
+  padding: 10px; border: 1px solid var(--ak-line); border-radius: 8px; background: var(--ak-bg);
+}
+.dl-file-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ak-panel); color: var(--ak-ink-quiet); }
+.dl-file.is-ready .dl-file-icon { color: #226c4c; background: color-mix(in srgb,#2f8b62 12%,var(--ak-panel)); }
+.dl-file-main { min-width: 0; display: grid; gap: 2px; }
+.dl-file-main strong { font-size: 13px; }
+.dl-file-main span { color: var(--ak-ink-quiet); font-size: 11px; }
+.dl-file-actions { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
+/* La riga che chiede conferma prende lo stesso rosso tenue del riquadro in fondo:
+   «Rimuovi» cancella i byte all'istante, esattamente come «Elimina il transfer». */
+.dl-file.is-confirming {
+  border-color: color-mix(in srgb,#c34848 35%,var(--ak-line));
+  background: color-mix(in srgb,#c34848 6%,var(--ak-panel));
+}
+
+.dl-progress { margin: 0 14px 14px; padding: 12px; border: 1px solid var(--ak-line); border-radius: 8px; background: var(--ak-bg); }
+.dl-progress-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
+.dl-progress-top strong { min-width: 0; font-weight: 600; }
+/* Il conteggio non si accorcia mai: a cedere è il nome del file, che è l'unica cosa lunga. */
+.dl-progress-top span { flex: 0 0 auto; color: var(--ak-ink-quiet); white-space: nowrap; }
+.dl-progress-track { height: 5px; margin: 9px 0; overflow: hidden; border-radius: 4px; background: var(--ak-line); }
+.dl-progress-track i { display: block; height: 100%; background: var(--ak-accent); transition: width .2s; }
+.dl-progress p,.dl-progress small { margin: 0; color: var(--ak-ink-quiet); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dl-progress small { display: block; margin-top: 4px; white-space: normal; }
+
+.dl-about { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
+.dl-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.dl-field.is-wide { grid-column: 1/-1; }
+.dl-field > span { font: 500 11px/1.3 var(--ak-font); color: var(--ak-ink-quiet); }
+.dl-field small { font: 400 10px/1.35 var(--ak-font); color: var(--ak-ink-faint); }
+.dl-field input,.dl-field textarea,.dl-select {
+  width: 100%; padding: 8px 9px; border: 1px solid var(--ak-line); border-radius: 6px;
+  font: inherit; font-size: 13px; color: var(--ak-ink); background: var(--ak-bg);
+}
+.dl-field textarea { resize: vertical; min-height: 62px; }
+.dl-field input:focus,.dl-field textarea:focus,.dl-select:focus {
+  outline: 2px solid color-mix(in srgb,var(--ak-accent) 25%,transparent); border-color: var(--ak-accent);
+}
+
+/* Il link: è il prodotto finito, e si vede che lo è. */
+.dl-link { padding: 14px; display: grid; gap: 10px; }
+.dl-link-head { display: grid; gap: 5px; }
+.dl-link-head code {
+  padding: 9px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  border: 1px solid var(--ak-line); border-radius: 6px; background: var(--ak-bg);
+  color: var(--ak-accent); font: 400 12px/1.3 var(--ak-font-mono);
+}
+.dl-link-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.dl-link-stats { margin: 0; color: var(--ak-ink-quiet); font-size: 11px; line-height: 1.5; }
+.dl-step { color: var(--ak-ink-quiet); font: 500 10px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .08em; }
+
+.dl-get { padding: 14px; display: grid; gap: 8px; justify-items: start; }
+.dl-get-btn { padding: 11px 22px; font-size: 13px; }
+.dl-get p { margin: 0; color: var(--ak-ink-quiet); font-size: 11px; line-height: 1.5; }
+
+/* La colonna delle opzioni */
+.dl-group {
+  padding: 14px; display: grid; gap: 10px;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+}
+.dl-group h3 { margin: 0; font: 600 12px/1.2 var(--ak-font); }
+.dl-note { margin: 0; color: var(--ak-ink-quiet); font-size: 11px; line-height: 1.5; }
+.dl-radio,.dl-check { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 9px; align-items: start; cursor: pointer; }
+.dl-radio input,.dl-check input { margin: 2px 0 0; accent-color: var(--ak-accent); }
+.dl-radio span,.dl-check span { display: grid; gap: 2px; }
+.dl-radio strong,.dl-check strong { font: 500 12px/1.35 var(--ak-font); }
+.dl-radio small,.dl-check small { color: var(--ak-ink-quiet); font-size: 11px; line-height: 1.45; }
+.dl-code { display: flex; gap: 6px; }
+.dl-code input {
+  flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid var(--ak-line); border-radius: 6px;
+  background: var(--ak-bg); color: var(--ak-ink);
+  font: 600 13px/1.2 var(--ak-font-mono); letter-spacing: .08em; text-transform: uppercase;
+}
+.dl-group .dl-field { gap: 4px; }
+
+/* La copertina: una griglia, quindi a piena larghezza */
+.dl-cover { display: grid; }
+.dl-cover-head {
+  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  border-bottom: 1px solid var(--ak-line);
+}
+.dl-cover-head p { margin: 3px 0 0; color: var(--ak-ink-quiet); font-size: 11px; }
+.dl-cover-actions { display: flex; gap: 6px; flex: none; }
+.dl-cover-grid { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill,minmax(116px,1fr)); gap: 8px; }
+.dl-cover-grid button {
+  position: relative; min-width: 0; padding: 0; overflow: hidden; cursor: pointer;
+  border: 2px solid transparent; border-radius: 6px; background: var(--ak-bg);
+}
+.dl-cover-grid button.is-chosen { border-color: var(--ak-accent); }
+.dl-cover-grid img { width: 100%; aspect-ratio: 3/2; display: block; object-fit: cover; }
+.dl-cover-grid em {
+  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; display: grid; place-items: center;
+  border-radius: 50%; background: var(--ak-accent); color: #fff; font: 600 11px/1 var(--ak-font); font-style: normal;
+}
+.dl-cover-grid.is-static img { border-radius: 6px; }
+.dl-cover-empty { padding: 14px; }
+
+/* Il fondo: le cose che tolgono */
+.dl-danger {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
+  padding-top: 6px; border-top: 1px solid var(--ak-line);
+}
+.dl-danger > div { display: flex; gap: 6px; flex-wrap: wrap; }
+.dl-danger-btn { color: #a33; border-color: color-mix(in srgb,#c34848 35%,var(--ak-line)); }
+.dl-danger-btn:hover { border-color: #c34848; }
+.dl-confirm {
+  flex: 1; min-width: 260px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  border: 1px solid color-mix(in srgb,#c34848 35%,var(--ak-line)); border-radius: var(--ak-radius);
+  background: color-mix(in srgb,#c34848 6%,var(--ak-panel));
+}
+.dl-confirm p { margin: 0; flex: 1; min-width: 200px; font-size: 11px; line-height: 1.5; }
+
+/* ---- Il riquadro dei caricamenti ---------------------------------------------------------
+   In basso a destra, sopra tutto, sempre presente finché c'è un caricamento: è la prova
+   visibile che l'upload NON è più prigioniero della schermata del transfer. Si riduce a una
+   riga; non si chiude mentre lavora, perché chiuderlo sembrerebbe fermarlo. */
+.uk {
+  position: fixed; z-index: 40; right: 14px; bottom: 14px; width: min(360px, calc(100vw - 28px));
+  display: grid; overflow: hidden;
+  background: var(--ak-panel); border: 1px solid var(--ak-line); border-radius: var(--ak-radius);
+  box-shadow: var(--ak-shadow);
+}
+.uk-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  padding: 10px 12px; border: 0; background: var(--ak-bg); cursor: pointer;
+  font: 600 12px/1.2 var(--ak-font); color: var(--ak-ink); text-align: left;
+}
+.uk-head-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.uk-chevron { color: var(--ak-ink-quiet); font-size: 10px; }
+.uk-list { margin: 0; padding: 0; list-style: none; display: grid; max-height: 46vh; overflow-y: auto; }
+.uk-job { padding: 11px 12px; display: grid; gap: 7px; border-top: 1px solid var(--ak-line); }
+.uk-job-top { display: grid; gap: 2px; }
+.uk-job-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.uk-job-top span { color: var(--ak-ink-quiet); font-size: 11px; }
+.uk-job.is-done .uk-job-top span { color: #226c4c; }
+.uk-job.is-failed .uk-job-top span { color: #a33; }
+.uk-track { height: 4px; overflow: hidden; border-radius: 3px; background: var(--ak-line); }
+.uk-track i { display: block; height: 100%; background: var(--ak-accent); transition: width .25s; }
+.uk-job.is-paused .uk-track i { background: var(--ak-ink-quiet); }
+.uk-error { margin: 0; color: #a33; font-size: 11px; line-height: 1.45; }
+.uk-job-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
+.uk-job-actions .ak-btn { padding: 4px 9px; font-size: 11px; }
+.uk-confirm { flex: 1 0 100%; color: var(--ak-ink-quiet); font-size: 11px; }
+/* Il riquadro è `fixed` e copre l'angolo: finché c'è, il fondo della schermata si allunga,
+   altrimenti l'ultima riga di ogni pagina resta là sotto senza modo di raggiungerla. */
+body:has(.uk) .pane-body { padding-bottom: 190px; }
+
+@media (max-width: 1100px) {
+  .dl-grid { grid-template-columns: minmax(0,1fr); }
+  .dl-about { grid-template-columns: 1fr; }
+  .dl-field.is-wide { grid-column: auto; }
+}
+@media (max-width: 800px) {
+  .dl-pick { grid-template-columns: 1fr; }
+  .dl-work-head { flex-wrap: wrap; }
+  .dl-cover-head { flex-direction: column; align-items: flex-start; }
+  .gs-image-editor { grid-template-columns: 1fr; }
+}
+/* ---- Portfolio: i lavori -----------------------------------------------------------------
+   Linguaggio nuovo del pannello: NIENTE tratti. A separare sono il colore del fondo e l'ombra,
+   come nelle interfacce editoriali a cui punta il redesign — un bordo di un pixel disegna una
+   scatola, e una schermata piena di scatole si legge come un modulo da compilare invece che
+   come il contenuto che rappresenta.
+
+   Tre livelli, e non di più: la pagina (fondo tenue), la card di un lavoro (bianca, sollevata),
+   e dentro di essa i blocchi (fondo tenue di nuovo, incassati). Un quarto livello e la
+   gerarchia smette di leggersi.
+
+   I valori (`--ak-ground`, `--ak-inset`, `--ak-inset-deep`, `--ak-lift-*`, `--ak-ring`) stanno
+   in `theme.css`, non qui: li condivide con le sezioni delle gallery, ed è là che si cambiano
+   per un altro cliente. Vedi routes/PortfolioWorksEditor.tsx.
+   -------------------------------------------------------------------------------------- */
+/* Il FONDO su cui poggiano le card è più profondo di quello del resto del pannello. È l'unico
+   modo di dare contrasto a una card bianca senza disegnarle un bordo intorno: se il foglio
+   sotto è quasi bianco anche lui (`--ak-bg` è #fbfbfa, un punto e mezzo di differenza), la card
+   resta appesa a un'ombra al cinque per cento e l'elenco si legge come un blocco unico.
+   `:has()` invece di una classe passata da App.tsx: la tinta appartiene a queste schermate, e
+   farla dipendere da uno stato React vorrebbe dire tenere allineate due cose che descrivono la
+   stessa. */
+.pane-body:has(.ed-portfolio), .pane-body:has(.ed-gallery), .pane-body:has(.ed-about),
+.pane-body:has(.ed-workshop), .pane-body:has(.ed-home), .pane-body:has(.ov) { background: var(--ak-ground); }
+
+/* I valori del linguaggio senza tratti stanno in `theme.css` (`--ak-ground`, `--ak-inset`,
+   `--ak-inset-deep`, `--ak-lift-*`, `--ak-ring`): li usano sia questa schermata sia le sezioni
+   delle gallery, e una seconda copia sarebbe la prima occasione per farle divergere. */
+.pw {
+  width: min(1080px, 100%); margin: 0 auto;
+  display: flex; flex-direction: column; gap: 16px;
+  padding-bottom: 56px;
+}
+
+.pw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 2px 4px; }
+.pw-head h3 { margin: 0; font: 600 17px/1.2 var(--ak-font); letter-spacing: -.01em; }
+.pw-head p { margin: 5px 0 0; color: var(--ak-ink-quiet); font: 400 12px/1.45 var(--ak-font); }
+/* Il bottone della testata non si stringe e non va a capo: è l'azione, e «Aggiungi voce»
+   spezzato su due righe si legge come due parole finite lì per sbaglio. A cedere è il testo
+   accanto, che è una spiegazione e può andare a capo quanto vuole. */
+.pw-head > .btn-soft { flex: none; white-space: nowrap; }
+
+.pw-list { display: flex; flex-direction: column; gap: 8px; }
+
+/* La card di un lavoro. `transition` anche sull'ombra: aprendola l'elevazione cresce, e quel
+   movimento è ciò che racconta che il contenuto sta uscendo da lì e non comparendo altrove. */
+.pw-work {
+  position: relative; background: var(--ak-panel); border-radius: 14px;
+  box-shadow: var(--ak-lift-1);
+  transition: box-shadow .18s ease, transform .18s ease;
+}
+.pw-work:hover { box-shadow: var(--ak-lift-2); }
+.pw-work.is-open { box-shadow: var(--ak-lift-3); }
+/* Sollevata e semitrasparente mentre la si trascina: l'elemento sotto il dito è "staccato" dal
+   foglio. Il posto in cui cadrà lo mostrano gli altri che si spostano — non serve una riga di
+   inserimento, che sarebbe di nuovo un tratto. */
+.pw-work.is-dragging { z-index: 3; opacity: .9; box-shadow: var(--ak-lift-3); }
+
+.pw-work-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 2px; padding: 8px 12px 8px 6px; }
+
+/* La maniglia compare al passaggio: otto maniglie sempre accese sono rumore in un elenco che
+   si guarda per capire l'ordine. Resta raggiungibile da tastiera. */
+.pw-grip {
+  display: grid; place-items: center; width: 26px; height: 34px; padding: 0;
+  border: 0; border-radius: 8px; background: transparent; color: var(--ak-ink-quiet);
+  cursor: grab; touch-action: none; opacity: 0; transition: opacity .15s, background-color .15s;
+}
+.pw-grip:active { cursor: grabbing; }
+.pw-work:hover .pw-grip, .pw-work.is-open .pw-grip, .pw-grip:focus-visible,
+.pw-info-row:hover .pw-grip, .pw-card:hover .pw-grip { opacity: .55; }
+.pw-grip:hover { background: var(--ak-inset); opacity: 1 !important; }
+
+.pw-work-open {
+  display: flex; align-items: center; gap: 13px; min-width: 0; width: 100%;
+  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
+  padding: 6px 8px; text-align: left; color: inherit; font: inherit;
+}
+.pw-work-open:hover { background: var(--ak-inset); }
+.pw-work-open:focus-visible { outline: 0; box-shadow: var(--ak-ring); }
+
+.pw-thumb {
+  flex: none; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden;
+  padding: 0; border: 0; border-radius: 9px; background: var(--ak-inset-deep);
+  color: var(--ak-ink-quiet); cursor: pointer;
+}
+.pw-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
+.pw-thumb-empty { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--ak-font); }
+/* La copertina grande NON si taglia: `contain` su fondo tenue. Ritagliare la copertina di un
+   libro nell'anteprima di chi la sta scegliendo è il modo più rapido per farla scegliere male. */
+.pw-thumb.is-cover, .pw-thumb.is-large, .pw-thumb.is-portrait {
+  width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 11px;
+}
+.pw-thumb.is-large { aspect-ratio: 3 / 2; }
+/* Il ritratto della pagina "chi sono": verticale, perché è la forma in cui esce sul sito. */
+.pw-thumb.is-portrait { aspect-ratio: 3 / 4; }
+.pw-thumb.is-cover img, .pw-thumb.is-large img, .pw-thumb.is-portrait img { object-fit: contain; }
+.pw-thumb:hover { color: var(--ak-accent); }
+
+.pw-work-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.pw-work-title strong {
+  overflow: hidden; font: 600 14px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap;
+}
+.pw-work-title strong.is-empty { color: var(--ak-ink-quiet); font-weight: 500; font-style: italic; }
+.pw-work-title small { color: var(--ak-ink-quiet); font: 400 11px/1.2 var(--ak-font); }
+
+.pw-chevron { flex: none; display: flex; color: var(--ak-ink-quiet); transition: transform .2s ease; }
+.pw-work.is-open .pw-chevron { transform: rotate(180deg); }
+
+/* Duplica ed Elimina compaiono al passaggio o a card aperta: sono azioni distruttive o
+   moltiplicative, non devono stare sotto il dito mentre si scorre un elenco. */
+.pw-work-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
+.pw-work:hover .pw-work-actions, .pw-work.is-open .pw-work-actions,
+.pw-work-actions:focus-within { opacity: 1; }
+
+.pw-work-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 18px 16px; }
+
+.pw-identity { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; }
+/* La casella immagine: l'anteprima è il bersaglio, i comandi ci stanno sopra e compaiono al
+   passaggio. Su touch restano visibili — senza `hover: none` la rimozione sarebbe
+   irraggiungibile dall'iPad, che è un dispositivo con cui questo pannello si usa davvero. */
+.pw-media { position: relative; min-width: 0; }
+.pw-media-hint, .pw-media-clear {
+  position: absolute; opacity: 0; pointer-events: none; transition: opacity .15s;
+}
+.pw-media-hint {
+  left: 8px; bottom: 8px; padding: 5px 10px; border-radius: 7px;
+  background: rgba(22, 22, 26, .72); color: #fff;
+  font: 500 11px/1 var(--ak-font); backdrop-filter: blur(6px);
+}
+.pw-media-clear {
+  top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center;
+  border: 0; border-radius: 8px; background: rgba(22, 22, 26, .72); color: #fff; cursor: pointer;
+  backdrop-filter: blur(6px);
+}
+.pw-media-clear .ico { width: 14px; height: 14px; }
+.pw-media-clear:hover { background: var(--ak-danger); }
+.pw-media.has-image:hover .pw-media-hint,
+.pw-media.has-image:hover .pw-media-clear,
+.pw-media.has-image:focus-within .pw-media-hint,
+.pw-media.has-image:focus-within .pw-media-clear { opacity: 1; pointer-events: auto; }
+@media (hover: none) {
+  .pw-media.has-image .pw-media-clear { opacity: 1; pointer-events: auto; }
+}
+.pw-identity-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+
+.pw-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.pw-label > span { color: var(--ak-ink); font: 500 11px/1.3 var(--ak-font); }
+.pw-label > span small { color: var(--ak-ink-quiet); font-weight: 400; }
+.pw-label > small { color: var(--ak-ink-quiet); font: 400 10px/1.45 var(--ak-font); }
+
+/* I campi sono RIEMPITI, non contornati: il contrasto col fondo dice già dove si scrive.
+   Il fondo cambia con la superficie che li ospita — tenue sul bianco, bianco dentro un blocco
+   tenue — così restano leggibili a qualunque profondità senza aggiungere una linea. */
+.pw-field {
+  width: 100%; border: 0; border-radius: 9px; background: var(--ak-inset); color: var(--ak-ink);
+  padding: 10px 12px; font: 400 13px/1.5 var(--ak-font);
+  transition: background-color .15s, box-shadow .15s;
+}
+.pw-field::placeholder { color: color-mix(in srgb, var(--ak-ink-quiet) 70%, transparent); }
+.pw-field:hover { background: var(--ak-inset-deep); }
+.pw-field:focus { outline: 0; background: var(--ak-panel); box-shadow: var(--ak-ring); }
+.pw-textarea { resize: vertical; min-height: 96px; }
+.pw-field-title { font: 600 15px/1.4 var(--ak-font); }
+.pw-block .pw-field { background: var(--ak-panel); box-shadow: var(--ak-lift-1); }
+.pw-block .pw-field:hover { background: var(--ak-panel); box-shadow: var(--ak-lift-2); }
+.pw-block .pw-field:focus { box-shadow: var(--ak-ring); }
+
+/* Un blocco: fondo tenue e nessun contorno. È il livello "incassato" dentro la card bianca. */
+.pw-block { display: flex; flex-direction: column; gap: 10px; padding: 13px 14px 14px; border-radius: 12px; background: var(--ak-inset); }
+.pw-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.pw-block-head h4 {
+  margin: 0; color: var(--ak-ink-quiet); font: 600 10px/1 var(--ak-font);
+  letter-spacing: .1em; text-transform: uppercase;
+}
+.pw-empty-note { margin: 0; color: var(--ak-ink-quiet); font: 400 11px/1.5 var(--ak-font); }
+
+.pw-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.pw-info-row {
+  display: grid; grid-template-columns: 26px minmax(0, 200px) minmax(0, 1fr) 32px;
+  align-items: center; gap: 6px; border-radius: 10px;
+}
+.pw-info-row.is-dragging { z-index: 3; background: var(--ak-panel); box-shadow: var(--ak-lift-3); }
+.pw-field-label { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
+
+.pw-card-list { display: flex; flex-direction: column; gap: 8px; }
+.pw-card { background: var(--ak-panel); border-radius: 11px; box-shadow: var(--ak-lift-1); }
+.pw-card.is-dragging { z-index: 3; opacity: .9; box-shadow: var(--ak-lift-3); }
+.pw-card-head { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) 32px; align-items: center; gap: 8px; padding: 8px 10px 8px 6px; }
+.pw-card-kind {
+  color: var(--ak-ink-quiet); font: 600 10px/1 var(--ak-font);
+  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
+}
+.pw-card-body { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 13px; }
+.pw-card-body.is-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
+.pw-card-text { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
+
+/* Il segmentato, CONDIVISO fra l'editor dei lavori e quello delle sezioni: la scelta vive
+   dentro una vaschetta incassata e l'opzione attiva è l'unica cosa sollevata. Bottoni
+   contornati direbbero "tre pulsanti", non "una scelta fra tre". */
+.seg { justify-self: end; display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--ak-inset-deep); }
+.seg-btn {
+  border: 0; border-radius: 7px; background: transparent; cursor: pointer; padding: 5px 10px;
+  color: var(--ak-ink-quiet); font: 500 11px/1 var(--ak-font); transition: background-color .15s, color .15s;
+}
+.seg-btn:hover { color: var(--ak-ink); }
+.seg-btn.is-on { background: var(--ak-panel); color: var(--ak-ink); box-shadow: var(--ak-lift-1); }
+
+/* I bottoni senza contorno, condivisi dalle due schermate: il riempimento tenue basta a dire
+   che sono premibili, e solo l'azione primaria è piena d'accento. */
+.btn-soft {
+  display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 9px;
+  background: var(--ak-inset); color: var(--ak-ink); cursor: pointer; padding: 8px 13px;
+  font: 500 12px/1 var(--ak-font); transition: background-color .15s, color .15s, box-shadow .15s;
+}
+.btn-soft:hover { background: var(--ak-inset-deep); }
+.btn-soft:focus-visible { outline: 0; box-shadow: var(--ak-ring); }
+.btn-soft.is-primary { background: var(--ak-accent); color: #fff; box-shadow: var(--ak-lift-2); }
+.btn-soft.is-primary:hover { background: var(--ak-accent-hover); }
+.btn-soft.is-quiet { background: transparent; color: var(--ak-ink-quiet); }
+.btn-soft.is-quiet:hover { background: var(--ak-inset); color: var(--ak-ink); }
+.btn-soft.is-danger { background: transparent; color: var(--ak-danger); }
+.btn-soft.is-danger:hover { background: color-mix(in srgb, var(--ak-danger) 9%, transparent); }
+.btn-soft .ico { width: 14px; height: 14px; }
+
+.pw-icon-btn {
+  display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0;
+  border-radius: 8px; background: transparent; color: var(--ak-ink-quiet); cursor: pointer;
+  transition: background-color .15s, color .15s;
+}
+.pw-icon-btn:hover { background: var(--ak-inset); color: var(--ak-ink); }
+.pw-icon-btn.is-danger:hover { background: color-mix(in srgb, var(--ak-danger) 10%, transparent); color: var(--ak-danger); }
+.pw-icon-btn .ico { width: 15px; height: 15px; }
+
+.pw-add-quiet {
+  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px;
+  background: transparent; color: var(--ak-ink-quiet); cursor: pointer; padding: 5px 8px;
+  font: 500 11px/1 var(--ak-font);
+}
+.pw-add-quiet:hover { background: var(--ak-panel); color: var(--ak-ink); box-shadow: var(--ak-lift-1); }
+.pw-add-quiet .ico { width: 13px; height: 13px; }
+
+.pw-add-wrap { position: relative; }
+.pw-menu {
+  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 268px; padding: 6px;
+  border-radius: 12px; background: var(--ak-panel); box-shadow: var(--ak-lift-3);
+}
+.pw-menu button {
+  width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px;
+  align-items: center; padding: 9px 9px; border: 0; border-radius: 9px; background: transparent;
+  color: var(--ak-ink); cursor: pointer; text-align: left;
+}
+.pw-menu button:hover { background: var(--ak-inset); }
+.pw-menu-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--ak-inset); color: var(--ak-ink-quiet); }
+.pw-menu button > span:last-child { display: flex; flex-direction: column; gap: 2px; }
+.pw-menu strong { font: 600 12px/1.2 var(--ak-font); }
+.pw-menu small { color: var(--ak-ink-quiet); font: 400 10px/1.35 var(--ak-font); }
+
+/* Il vuoto è una superficie, non un rettangolo tratteggiato: invita a premere invece di
+   sembrare un contenitore rotto. */
+.pw-blank {
+  display: grid; justify-items: center; gap: 6px; padding: 46px 20px; border: 0;
+  border-radius: 14px; background: var(--ak-inset); color: var(--ak-ink-quiet); cursor: pointer;
+  transition: background-color .15s, box-shadow .15s;
+}
+.pw-blank:hover { background: var(--ak-panel); box-shadow: var(--ak-lift-2); }
+.pw-blank .ico { width: 22px; height: 22px; margin-bottom: 4px; }
+.pw-blank strong { color: var(--ak-ink); font: 600 14px/1.2 var(--ak-font); }
+.pw-blank span { font: 400 12px/1.4 var(--ak-font); }
+
+@media (max-width: 900px) {
+  .pw-identity, .pw-card-body.is-split { grid-template-columns: minmax(0, 1fr); }
+  .pw-identity > .pw-media { max-width: 240px; }
+  .pw-card-head { grid-template-columns: 26px auto minmax(0, 1fr) 32px; }
+  .seg { flex-wrap: wrap; }
+  .pw-info-row { grid-template-columns: 26px minmax(0, 1fr) 32px; }
+  .pw-info-row .pw-field:nth-of-type(2) { grid-column: 2 / 4; }
+}
+
+/* ---- Chi sono ----------------------------------------------------------------------------
+   Le due colonne della pagina vera: la biografia a sinistra, il ritratto fermo a destra. Stessi
+   tre livelli e stessi valori del portfolio (`--ak-ground` sotto, `--ak-panel` per i blocchi,
+   `--ak-inset` dentro) — qui non si dichiara nessun colore nuovo.
+
+   Il prefisso è `abo-` e non `ab-`: `ab-` è già il prefisso della pagina "chi sono" SUL SITO
+   (static/css/about.css). Sono due fogli che non si incontrano mai, ma cercare `.ab-credit` e
+   trovare due posti distanti è il modo in cui si finisce per modificare quello sbagliato.
+   Vedi routes/AboutEditor.tsx. ------------------------------------------------------------ */
+.abo {
+  width: min(1080px, 100%); margin: 0 auto; padding-bottom: 56px;
+  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start;
+}
+.abo-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
+
+/* Ferma mentre scorre il testo, come il ritratto nella pagina. 18px è il respiro sopra: senza,
+   incollandosi al bordo sembra uscita dal pannello invece che ancorata. */
+.abo-side { position: sticky; top: 18px; }
+.abo-side-inner {
+  display: flex; flex-direction: column; gap: 12px; padding: 16px;
+  border-radius: 14px; background: var(--ak-panel); box-shadow: var(--ak-lift-1);
+}
+.abo-side-inner h3 { margin: 0; font: 600 13px/1.2 var(--ak-font); letter-spacing: -.01em; }
+
+.abo-block {
+  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px;
+  border-radius: 14px; background: var(--ak-panel); box-shadow: var(--ak-lift-1);
+}
+.abo-block .pw-head { padding: 0; }
+
+/* Quanto testo c'è. In cifre tabellari perché cambia a ogni tasto: senza, la riga balla. */
+.ed-count {
+  flex: none; color: var(--ak-ink-quiet); font: 400 11px/1 var(--ak-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* La colonna della biografia non supera la misura di lettura, e l'altezza la decide il testo
+   (`ProseEditor` la ricalcola): un campo che scorre dentro una pagina che ha spazio libero è
+   il modo più rapido per perdere il filo di quello che si sta scrivendo. */
+.ed-prose {
+  width: 100%; max-width: 68ch; min-height: 160px; resize: none; overflow: hidden;
+  font: 400 14px/1.75 var(--ak-font);
+}
+
+/* I riconoscimenti: righe su fondo incassato, non card bianche. Sono voci di un elenco, e a
+   distinguerle basta lo spazio — sollevarle una per una darebbe a tre parole il peso di un
+   lavoro del portfolio. */
+.abo-credits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.abo-credit {
+  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px 6px;
+  border-radius: 11px; background: var(--ak-inset);
+}
+.abo-credit.is-dragging { z-index: 3; background: var(--ak-panel); box-shadow: var(--ak-lift-3); }
+.abo-credit:hover .pw-grip, .abo-credit:focus-within .pw-grip { opacity: .55; }
+.abo-credit-main { display: grid; grid-template-columns: 26px 180px minmax(0, 1fr) 30px; align-items: center; gap: 8px; }
+.abo-credit .pw-field { background: var(--ak-panel); }
+.abo-credit .pw-field:hover { background: var(--ak-panel); box-shadow: var(--ak-lift-1); }
+.abo-credit .pw-field:focus { box-shadow: var(--ak-ring); }
+
+/* Ruolo e nome hanno la grafia con cui escono sul sito: il ruolo è testo corrente, il nome è
+   l'entità in evidenza (`.ab-credit-name` in about.css). Così la riga è già l'anteprima di sé
+   stessa e non serve mostrarla due volte. */
+.abo-role { font: 400 13px/1.4 var(--ak-font); }
+.abo-name {
+  color: var(--ak-accent); font: 600 12px/1.4 var(--ak-font);
+  text-transform: uppercase; letter-spacing: .04em;
+}
+
+/* L'indirizzo è il campo quieto: si vede sempre — nascondere una riga costerebbe uno stato per
+   voce da ricalcolare a ogni riordino — ma si spegne finché è vuoto. */
+.abo-credit-link { display: grid; grid-template-columns: 26px minmax(0, 1fr) 30px; align-items: center; gap: 8px; opacity: .55; transition: opacity .15s; }
+.abo-credit-link:hover, .abo-credit-link:focus-within, .abo-credit-link.is-linked { opacity: 1; }
+.abo-link-mark { display: grid; place-items: center; color: var(--ak-ink-quiet); }
+.abo-credit-link.is-linked .abo-link-mark { color: var(--ak-accent); }
+.abo-link-mark .ico { width: 13px; height: 13px; }
+.abo-href { grid-column: 2; font: 400 11px/1.4 var(--ak-font-mono); }
+
+/* Il riquadro dei recapiti: dice una cosa e porta altrove, quindi non è una superficie
+   sollevata come i blocchi che si compilano. */
+.abo-note {
+  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
+  padding: 15px 18px 17px; border-radius: 14px; background: var(--ak-inset);
+}
+.abo-note-text h4 { margin: 0 0 5px; font: 600 12px/1.3 var(--ak-font); }
+.abo-note-text p { margin: 0; max-width: 64ch; color: var(--ak-ink-quiet); font: 400 12px/1.55 var(--ak-font); }
+.abo-note-list { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
+.abo-note-list > div { display: flex; flex-direction: column; gap: 2px; }
+.abo-note-list dt { color: var(--ak-ink-quiet); font: 400 10px/1 var(--ak-font); text-transform: uppercase; letter-spacing: .05em; }
+.abo-note-list dd { margin: 0; color: var(--ak-ink); font: 500 12px/1.3 var(--ak-font); }
+
+/* Sotto i 900px la colonna è una sola e il ritratto passa SOPRA la biografia: è l'ordine della
+   pagina vera su schermo stretto (`order: -1` in about.css), ed è la foto ad aprire. */
+@media (max-width: 900px) {
+  .abo { grid-template-columns: minmax(0, 1fr); }
+  .abo-side { position: static; order: -1; }
+  .abo-side-inner { flex-direction: row; align-items: flex-start; gap: 16px; }
+  .abo-side-inner h3 { flex: none; width: 72px; }
+  .abo-side-inner .pw-media { flex: none; width: 160px; }
+  /* Ruolo e nome si incolonnano invece di stringersi: «Contributor for» in un campo largo
+     ottanta pixel non si legge. Aree esplicite, altrimenti l'auto-placement infila il cestino
+     in una terza riga per conto suo. */
+  .abo-credit-main {
+    grid-template-columns: 26px minmax(0, 1fr) 30px;
+    grid-template-areas: "grip role del" "grip name name";
+  }
+  .abo-credit-main .pw-grip { grid-area: grip; align-self: start; }
+  .abo-credit-main .abo-role { grid-area: role; }
+  .abo-credit-main .abo-name { grid-area: name; }
+  .abo-credit-main .pw-icon-btn { grid-area: del; }
+}
+
+/* ---- Workshop: introduzione ed edizioni --------------------------------------------------
+   Quasi tutto è già scritto: la card di un'edizione è `.pw-work` (il guscio condiviso con i
+   lavori, vedi ui/OpenCard.tsx) e i suoi blocchi sono `.pw-card` dentro un `.pw-block`. Qui
+   restano l'introduzione in cima e le due cose che un blocco ha e una card di un lavoro no:
+   il titolo dentro la testata, e nessun segmentato accanto. Vedi routes/WorkshopEditionsEditor.tsx.
+   ------------------------------------------------------------------------------------------ */
+.ed-workshop { display: flex; flex-direction: column; gap: 16px; }
+/* Stessa misura e stesso fondo dell'elenco che segue: sono due parti della stessa pagina, non
+   un riquadro appoggiato sopra un elenco. */
+.wsh-intro {
+  width: min(1080px, 100%); margin: 0 auto;
+  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px;
+  border-radius: 14px; background: var(--ak-panel); box-shadow: var(--ak-lift-1);
+}
+.wsh-intro .pw-head { padding: 0; }
+.ed-workshop .pw { padding-bottom: 56px; }
+
+/* La testata di un blocco: maniglia, titolo, cestino. Il titolo è un campo VERO e non
+   un'etichetta, perché è l'unica cosa che distingue un blocco dall'altro — ma resta quieto
+   (fondo trasparente finché non lo si tocca), altrimenti sembra la cosa principale. */
+.wsh-block-head { grid-template-columns: 26px minmax(0, 1fr) 32px; }
+.wsh-block-title {
+  background: transparent; font: 600 12px/1.3 var(--ak-font);
+  text-transform: uppercase; letter-spacing: .05em;
+}
+.wsh-block-title::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; }
+.wsh-block-title:hover { background: var(--ak-inset); }
+
+/* ---- Home: una schermata alla volta -------------------------------------------------------
+   Stessi tre livelli e stessi valori delle altre schermate (`--ak-ground` sotto, `--ak-panel`
+   per i blocchi, `--ak-inset` dentro): qui non si dichiara nessun colore nuovo. Le porte verso
+   le altre pagine riusano le card dei lavori (`.pw-*`), che sono la stessa cosa.
+   Vedi routes/HomeEditor.tsx. --------------------------------------------------------------- */
+.hm { width: min(1080px, 100%); margin: 0 auto; padding-bottom: 56px; display: flex; flex-direction: column; gap: 16px; }
+.hm .pw-head { padding: 0 4px; }
+/* La riga che dice cos'è la schermata sul sito. Il suo NOME sta nella testata del pannello. */
+.hm-hint { margin: 0 4px; max-width: 76ch; color: var(--ak-ink-quiet); font: 400 12px/1.5 var(--ak-font); }
+/* L'anteprima del risultato di ricerca è quella della SEO delle pagine (`.seo-search-preview`),
+   riusata invece che ricopiata. Là sta in una riga di griglia alta 166px; qui è in un blocco che
+   si adatta al contenuto, e quel minimo lascerebbe un vuoto bianco sotto il testo. */
+.hm .seo-search-preview { min-height: 0; }
+
+/* La foto a sinistra e i testi a destra: è l'impaginazione della schermata vera, e serve a
+   ricordare che quella foto è la protagonista — non un campo come gli altri. */
+.hm-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
+.hm-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
+/* Le anteprime NON si stirano: due sfondi larghi mezzo schermo l'uno sono la cosa più grande
+   della schermata, e non sono la cosa più importante — quello che si modifica qui sono i
+   numeri. Colonne a larghezza fissa, quindi, non `1fr`. */
+.hm-photos { display: grid; grid-template-columns: repeat(auto-fill, 240px); gap: 18px; align-items: start; }
+.hm-photo { display: flex; flex-direction: column; gap: 8px; }
+.hm-photo-label { color: var(--ak-ink); font: 500 11px/1.3 var(--ak-font); }
+.hm-photo-label small { color: var(--ak-ink-quiet); font-weight: 400; }
+
+.hm-block {
+  display: flex; flex-direction: column; gap: 12px; padding: 15px 16px 17px;
+  border-radius: 14px; background: var(--ak-panel); box-shadow: var(--ak-lift-1);
+}
+.hm-block .pw-block-head { margin-bottom: 2px; }
+.hm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
+.hm-head-action { display: flex; justify-content: space-between; align-items: center; }
+
+/* Le righe di un elenco: maniglia, campi, cestino. Fondo incassato invece che card sollevata —
+   sono voci, non cose. */
+.hm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.hm-row {
+  display: grid; grid-template-columns: 26px minmax(0, 1fr) 30px; align-items: center; gap: 8px;
+  padding: 4px 6px 4px 0; border-radius: 10px; background: var(--ak-inset);
+}
+.hm-row.is-dragging { z-index: 3; background: var(--ak-panel); box-shadow: var(--ak-lift-3); }
+.hm-row:hover .pw-grip, .hm-row:focus-within .pw-grip { opacity: .55; }
+.hm-row .pw-field { background: var(--ak-panel); }
+/* Due campi in una riga (numero + etichetta): il numero è corto e resta corto. */
+.hm-row:has(.hm-num) { grid-template-columns: 26px 96px minmax(0, 1fr) 30px; }
+.hm-num { font: 600 13px/1.4 var(--ak-font-mono); }
+
+/* L'anteprima del titolo della home: le interruzioni di riga SONO contenuto (una riga più
+   lunga rimpicciolisce tutto il titolo sul sito), e in un elenco di caselle non si vedono. */
+.hm-title-preview {
+  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
+  border-radius: 10px; background: var(--ak-inset); overflow-x: auto;
+}
+.hm-title-preview span {
+  white-space: nowrap; color: var(--ak-ink);
+  font: 600 clamp(14px, 2.2vw, 20px)/1.15 var(--ak-font); letter-spacing: -.02em;
+}
+.hm-title-preview span.is-empty { color: var(--ak-ink-quiet); font-style: italic; font-weight: 400; }
+
+/* Le foto che ciclano nell'ultima schermata: una griglia piccola, perché quello che conta è
+   quali sono e in che ordine. */
+.hm-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
+.hm-shot { position: relative; margin: 0; }
+.hm-shot-frame {
+  aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--ak-inset-deep);
+  cursor: grab; touch-action: none;
+}
+.hm-shot.is-dragging { z-index: 3; opacity: .9; }
+.hm-shot-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
+.hm-shot-remove {
+  position: absolute; top: 6px; right: 6px; display: grid; place-items: center;
+  width: 26px; height: 26px; border: 0; border-radius: 8px; cursor: pointer;
+  background: color-mix(in srgb, var(--ak-panel) 88%, transparent); color: var(--ak-ink);
+  opacity: 0; transition: opacity .15s, background-color .15s;
+}
+.hm-shot:hover .hm-shot-remove, .hm-shot:focus-within .hm-shot-remove { opacity: 1; }
+.hm-shot-remove:hover { background: var(--ak-danger); color: #fff; }
+@media (hover: none) { .hm-shot-remove { opacity: 1; } }
+
+@media (max-width: 900px) {
+  .hm-split { grid-template-columns: minmax(0, 1fr); }
+  .hm-split > .hm-photo { max-width: 260px; }
+}
+
+/* ---- Panoramica ------------------------------------------------------------------------
+   Un bento: dodici colonne, riquadri che ne occupano da tre a otto. Gli span stanno in
+   `data-span` e NON in uno stile inline, perché uno stile inline batte qualunque regola di un
+   foglio di stile: su schermo stretto la griglia non potrebbe più collassare, e questo pannello
+   si usa anche dall'iPad.
+
+   I riquadri hanno un raggio più generoso del resto del pannello (12px contro i 6 di
+   `--ak-radius`): è una superficie diversa — si guarda, non si compila — e la differenza è
+   quello che la fa leggere come un cruscotto invece che come un form senza campi.
+   Vedi routes/Overview.tsx. ------------------------------------------------------------ */
+.ov { display: flex; flex-direction: column; gap: 14px; }
+.ov-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.ov-bar-hi { margin: 0; color: var(--ak-ink-quiet); font: 400 13px/1.4 var(--ak-font); }
+
+/* `dense`: quando la griglia collassa, un riquadro che ci sta va a riempire il buco lasciato da
+   uno più largo invece di andare a capo. A larghezza piena non cambia niente — le righe tornano
+   esatte (3+3+3+3, 8+4, 7+5, 6+6) — ma a 1024px il grafico prende dodici colonne e senza questo
+   accanto agli «Archivi» resterebbe mezza riga vuota, con l'elenco dei transfer buttato sotto. */
+.ov-grid {
+  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-auto-flow: row dense; gap: 12px;
+}
+.ov-grid > [data-span="3"] { grid-column: span 3; }
+.ov-grid > [data-span="4"] { grid-column: span 4; }
+.ov-grid > [data-span="5"] { grid-column: span 5; }
+.ov-grid > [data-span="6"] { grid-column: span 6; }
+.ov-grid > [data-span="7"] { grid-column: span 7; }
+.ov-grid > [data-span="8"] { grid-column: span 8; }
+
+/* Si distingue dal fondo per TONO, non per ombra: il pane della Panoramica sta su `--ak-ground`
+   (vedi la regola `.pane-body:has(.ov)` più sopra), quindi il pannello `--ak-panel` della card
+   contrasta già di per sé — la stessa leva usata da `.ed-portfolio`/`.ed-gallery`. */
+.ov-tile {
+  min-width: 0; display: flex; flex-direction: column; text-align: left;
+  background: var(--ak-panel); border: 0; border-radius: 14px;
+  color: var(--ak-ink); font: inherit; transition: filter .15s;
+}
+.ov-tile-head {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
+  padding: 15px 16px 12px;
+}
+.ov-tile-head h2 { margin: 0; font: 600 13px/1.2 var(--ak-font); }
+.ov-tile-head p { margin: 4px 0 0; color: var(--ak-ink-quiet); font: 400 11px/1.35 var(--ak-font); }
+.ov-pad { margin: 0; padding: 0 16px 16px; }
+.ov-more, .ov-link {
+  flex: none; border: 0; background: transparent; cursor: pointer; padding: 0;
+  color: var(--ak-ink-quiet); font: 500 11px/1 var(--ak-font);
+}
+.ov-more:hover, .ov-link:hover { color: var(--ak-accent); text-decoration: underline; }
+
+/* La riga di sopra: una cifra sola per riquadro */
+.ov-stat { gap: 5px; padding: 15px 16px 16px; }
+.ov-stat.is-link { cursor: pointer; }
+/* Stesso principio del bottone Consegne (`.ov-cta:hover`, sotto): un cambio di tono, non
+   un'ombra. Scurire invece di schiarire funziona su un pannello chiaro E su uno scuro. */
+.ov-stat.is-link:hover { filter: brightness(.97); }
+.ov-stat-icon {
+  width: 30px; height: 30px; margin-bottom: 2px; flex: none;
+  display: grid; place-items: center; border-radius: 9px;
+}
+.ov-stat-icon.is-accent { background: color-mix(in srgb, var(--ak-accent) 14%, var(--ak-panel)); color: var(--ak-accent); }
+.ov-stat-icon.is-green  { background: color-mix(in srgb, #2f8b62 14%, var(--ak-panel)); color: #2f8b62; }
+.ov-stat-icon.is-blue   { background: color-mix(in srgb, #3978b8 14%, var(--ak-panel)); color: #3978b8; }
+.ov-stat-icon.is-quiet  { background: var(--ak-inset); color: var(--ak-ink-quiet); }
+.ov-stat-label {
+  color: var(--ak-ink-quiet); font: 600 10px/1 var(--ak-font);
+  letter-spacing: .1em; text-transform: uppercase;
+}
+.ov-stat-value {
+  margin-top: 3px; font: 600 27px/1.1 var(--ak-font); letter-spacing: -.02em;
+  font-variant-numeric: tabular-nums;
+}
+.ov-stat-foot {
+  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
+  color: var(--ak-ink-quiet); font: 400 11px/1.3 var(--ak-font);
+}
+.ov-stat-quiet { font-style: normal; color: var(--ak-ink-faint, var(--ak-ink-quiet)); }
+
+.ov-delta {
+  display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 20px;
+  font: 600 10px/1.3 var(--ak-font); font-style: normal; font-variant-numeric: tabular-nums;
+}
+.ov-delta.is-up { color: #226c4c; background: color-mix(in srgb,#2f8b62 13%,var(--ak-panel)); }
+.ov-delta.is-down { color: #97392b; background: color-mix(in srgb,var(--ak-accent) 12%,var(--ak-panel)); }
+
+/* ---- Tonalità di stato per il tema scuro -------------------------------------------------
+   La formula testo-scuro-fisso + color-mix(…, var(--ak-panel)) funziona su un pannello quasi
+   bianco; su un pannello quasi nero un testo anch'esso scuro sparisce nel fondo. In scuro serve
+   una tinta più CHIARA per il testo e un mix più forte per il fondo — verificato ≥5:1. */
+[data-theme="dark"] .dl-pill.is-ready, [data-theme="dark"] .ov-stat-icon.is-green
+  { color: #8fe0b5; background: color-mix(in srgb, #2f8b62 22%, var(--ak-panel)); }
+[data-theme="dark"] .dl-pill.is-downloaded, [data-theme="dark"] .ov-stat-icon.is-blue
+  { color: #9dc9f1; background: color-mix(in srgb, #3978b8 22%, var(--ak-panel)); }
+[data-theme="dark"] .dl-pill.is-expiring
+  { color: #f4c988; background: color-mix(in srgb, #d28b27 22%, var(--ak-panel)); }
+[data-theme="dark"] .dl-pill.is-uploading, [data-theme="dark"] .ov-stat-icon.is-accent
+  { color: #f5b39a; background: color-mix(in srgb, var(--ak-accent) 22%, var(--ak-panel)); }
+[data-theme="dark"] .ov-delta.is-up   { color: #8fe0b5; background: color-mix(in srgb, #2f8b62 20%, var(--ak-panel)); }
+[data-theme="dark"] .ov-delta.is-down { color: #f5b39a; background: color-mix(in srgb, var(--ak-accent) 20%, var(--ak-panel)); }
+
+/* La scorciatoia alle Consegne. È l'unico riquadro colorato della schermata: se ce ne fosse un
+   secondo smetterebbe di essere quello che si nota. */
+.ov-cta {
+  position: relative; overflow: hidden; cursor: pointer; justify-content: space-between;
+  padding: 15px 16px 16px; border-color: transparent;
+  background: linear-gradient(122deg, var(--ak-accent) 0%, #c95b34 52%, #d9834a 100%);
+  color: #fff;
+}
+.ov-cta:hover { filter: brightness(1.06); }
+.ov-cta-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
+.ov-cta-copy strong { font: 600 15px/1.2 var(--ak-font); }
+.ov-cta-copy span { font: 400 11px/1.35 var(--ak-font); opacity: .82; }
+.ov-cta-go {
+  position: absolute; z-index: 2; top: 13px; right: 13px;
+  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
+  background: rgba(255,255,255,.2);
+}
+/* Le barrette in basso a destra sono decorazione, e si comportano come tale: `aria-hidden`,
+   nessun dato dietro. Suggeriscono "qui si misura qualcosa" senza fingere un grafico vero. */
+.ov-cta-bars {
+  position: absolute; z-index: 1; right: 0; bottom: 0; left: 42%; height: 54%;
+  display: flex; align-items: flex-end; gap: 3px; padding: 0 12px 12px; opacity: .5;
+}
+.ov-cta-bars i { flex: 1; min-width: 0; border-radius: 2px 2px 0 0; background: rgba(255,255,255,.75); }
+.ov-cta-badge {
+  position: relative; z-index: 2; align-self: flex-start; margin-top: 10px;
+  padding: 3px 8px; border-radius: 20px; background: rgba(0,0,0,.22);
+  font: 600 10px/1.4 var(--ak-font);
+}
+
+/* Le visite */
+.ov-range { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--ak-bg); }
+.ov-range-btn {
+  border: 0; border-radius: 5px; background: transparent; cursor: pointer; padding: 5px 9px;
+  color: var(--ak-ink-quiet); font: 500 11px/1 var(--ak-font);
+}
+.ov-range-btn:hover { color: var(--ak-ink); }
+.ov-range-btn.is-on { background: var(--ak-panel); color: var(--ak-ink); box-shadow: var(--ak-shadow); }
+
+.ov-chart-figures {
+  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
+  padding: 4px 16px 14px;
+}
+.ov-figure { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.ov-figure > span { color: var(--ak-ink-quiet); font: 400 10px/1.2 var(--ak-font); }
+.ov-figure strong { font: 600 18px/1.15 var(--ak-font); font-variant-numeric: tabular-nums; }
+.ov-figure .ov-delta { align-self: flex-start; }
+
+/* Margini e non padding: il tooltip è posizionato in pixel a partire dal bordo del riquadro
+   (`left: <x>px`, con la stessa x del punto sul grafico), e `left` di un elemento assoluto parte
+   dal padding box — cioè PRIMA dell'eventuale padding. Con un padding qui, riquadretto e punto
+   risulterebbero sfalsati esattamente di quel valore. */
+.ov-plot { position: relative; margin: 0 16px; padding-bottom: 12px; }
+/* La larghezza la decide il ResizeObserver e finisce nell'attributo `width`; qui c'è solo la
+   garanzia che l'elemento non superi la sua colonna mentre la misura si aggiorna. */
+.ov-plot-svg { max-width: 100%; display: block; overflow: visible; }
+.ov-plot-grid { stroke: var(--ak-line); stroke-width: 1; opacity: .7; }
+.ov-plot-tick { fill: var(--ak-ink-quiet); font: 400 9px var(--ak-font); }
+.ov-plot-line { fill: none; stroke: var(--ak-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+.ov-plot-line.is-second { stroke: var(--ak-ink); stroke-width: 1.25; opacity: .35; stroke-dasharray: 3 3; }
+.ov-plot-cursor { stroke: var(--ak-ink); stroke-width: 1; opacity: .28; }
+.ov-plot-dot { fill: var(--ak-ink); stroke: var(--ak-panel); stroke-width: 2; }
+/* `left` e `transform` arrivano inline da Overview.tsx e si spostano col punto: qui c'è solo
+   l'aspetto. Il valore di partenza serve al primo fotogramma, prima che React scriva il suo. */
+.ov-plot-tip {
+  position: absolute; z-index: 3; top: 2px; transform: translateX(-50%);
+  display: flex; flex-direction: column; gap: 2px; white-space: nowrap; pointer-events: none;
+  padding: 7px 10px; border: 1px solid var(--ak-line); border-radius: 7px;
+  background: var(--ak-panel); box-shadow: 0 10px 26px rgba(0,0,0,.14);
+}
+.ov-plot-tip strong { font: 600 11px/1.2 var(--ak-font); }
+.ov-plot-tip span { color: var(--ak-ink-quiet); font: 400 10px/1.2 var(--ak-font); }
+.ov-plot-legend { display: flex; gap: 14px; margin: 6px 0 0; }
+.ov-key {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--ak-ink-quiet); font: 400 10px/1 var(--ak-font);
+}
+.ov-key::before { content: ""; width: 11px; height: 2px; border-radius: 2px; background: var(--ak-accent); }
+.ov-key.is-second::before { background: var(--ak-ink); opacity: .35; }
+
+/* Gli archivi. Il riquadro sta accanto al grafico, quindi è alto quanto lui: le tre righe si
+   distribuiscono nello spazio (`space-evenly`) e le note restano in fondo, invece di lasciare
+   mezzo riquadro bianco sotto un contenuto schiacciato in cima. */
+.ov-store { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 2px 16px 16px; }
+.ov-store-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 16px; }
+.ov-store-row {
+  display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left;
+  border: 0; background: transparent; cursor: pointer; padding: 0; color: inherit; font: inherit;
+}
+.ov-store-row:hover .ov-store-name { color: var(--ak-accent); }
+.ov-store-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
+.ov-store-name { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--ak-font); }
+.ov-store-name em {
+  font: 600 9px/1 var(--ak-font-mono); font-style: normal; letter-spacing: .06em;
+  color: var(--ak-ink-quiet); border: 1px solid var(--ak-line); border-radius: 3px; padding: 2px 4px;
+}
+.ov-store-top strong { font: 600 13px/1.2 var(--ak-font); font-variant-numeric: tabular-nums; }
+.ov-store-track { height: 6px; overflow: hidden; border-radius: 4px; background: var(--ak-bg); }
+/* `min-width` in pixel e non in percentuale: una quota dello 0,05% sparirebbe del tutto, e una
+   barra assente si legge come «non misurato» invece che «quasi niente». Il minimo è un trattino
+   sottile, non un pallino — con il raggio pieno su una larghezza di 5px diventava un punto, che
+   sembrava un errore di disegno. La cifra esatta è comunque scritta accanto. */
+.ov-store-track i {
+  display: block; height: 100%; min-width: 3px; border-radius: 1.5px; background: var(--ak-accent);
+}
+.ov-store-rows .ov-store-row:nth-child(2) .ov-store-track i { background: var(--ak-ink); opacity: .55; }
+.ov-store-rows .ov-store-row:nth-child(3) .ov-store-track i { background: var(--ak-ink); opacity: .25; }
+.ov-store-detail {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
+  color: var(--ak-ink-quiet); font: 400 10px/1.3 var(--ak-font);
+}
+.ov-store-detail > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ov-store-detail em {
+  flex: none; font-style: normal; font-variant-numeric: tabular-nums; font-weight: 500;
+}
+.ov-store-notes {
+  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; margin: 0;
+  padding-top: 12px; border-top: 1px solid var(--ak-line);
+}
+.ov-store-notes:empty { display: none; }
+.ov-store-notes dt { color: var(--ak-ink-quiet); font: 500 10px/1.4 var(--ak-font); }
+.ov-store-notes dd { margin: 0; font: 400 10px/1.4 var(--ak-font); }
+
+/* Gli ultimi transfer */
+.ov-table { width: 100%; border-collapse: collapse; }
+.ov-table th {
+  padding: 0 16px 8px; text-align: left; color: var(--ak-ink-quiet);
+  font: 600 9px/1 var(--ak-font); letter-spacing: .09em; text-transform: uppercase;
+}
+.ov-table tbody tr { cursor: pointer; border-top: 1px solid var(--ak-line); }
+.ov-table tbody tr:hover { background: var(--ak-hover); }
+.ov-table td { padding: 9px 16px; vertical-align: middle; }
+.ov-table tbody tr:last-child td { padding-bottom: 13px; }
+.ov-table td:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ov-row-main { overflow: hidden; font: 500 12px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap; }
+.ov-row-sub { color: var(--ak-ink-quiet); font: 400 10px/1.3 var(--ak-font); }
+.ov-when { color: var(--ak-ink-quiet); font: 400 11px/1.2 var(--ak-font-mono); white-space: nowrap; }
+.ov-num { text-align: right; font: 600 13px/1.2 var(--ak-font); font-variant-numeric: tabular-nums; }
+.ov-num.is-zero { color: var(--ak-ink-quiet); font-weight: 400; }
+.ov-state { text-align: right; white-space: nowrap; }
+
+/* L'ultima richiesta. `flex: 1` più `margin-top: auto` sui bottoni: il riquadro è alto quanto
+   quello dei transfer che gli sta accanto, e un messaggio corto lasciava «Rispondi» a mezz'aria
+   in mezzo al bianco. */
+.ov-req { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 2px 16px 16px; }
+.ov-req.is-handled .ov-req-msg { opacity: .6; }
+.ov-req-head { display: flex; align-items: center; gap: 10px; }
+.ov-req-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.ov-req-who strong { overflow: hidden; font: 600 13px/1.2 var(--ak-font); text-overflow: ellipsis; white-space: nowrap; }
+.ov-req-who a {
+  overflow: hidden; color: var(--ak-accent); font: 400 11px/1.3 var(--ak-font);
+  text-decoration: none; text-overflow: ellipsis; white-space: nowrap;
+}
+.ov-req-who a:hover { text-decoration: underline; }
+.ov-req-when { flex: none; color: var(--ak-ink-quiet); font: 400 10px/1.2 var(--ak-font-mono); }
+/* Quattro righe e poi sfuma: il messaggio intero sta nella sua sezione, e un troncamento netto
+   a metà parola fa sembrare che manchi qualcosa invece di dire che continua. */
+.ov-req-msg {
+  display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4; white-space: pre-wrap;
+  font: 400 12px/1.55 var(--ak-font); color: var(--ak-ink);
+}
+.ov-req-actions { margin-top: auto; padding-top: 4px; display: flex; align-items: center; gap: 8px; }
+
+/* Le classifiche */
+.ov-top { list-style: none; margin: 0; padding: 2px 16px 16px; display: flex; flex-direction: column; gap: 9px; }
+/* Le classifiche stanno su quattro colonne, non sei: la barra si stringe e i numeri si
+   avvicinano, altrimenti un titolo di pagina un po' lungo viene troncato a metà. */
+.ov-top li {
+  display: grid; grid-template-columns: minmax(0, 1fr) 56px 36px; gap: 8px; align-items: center;
+}
+.ov-top-name { overflow: hidden; font: 400 12px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap; }
+.ov-top-track { height: 5px; overflow: hidden; border-radius: 3px; background: var(--ak-bg); }
+.ov-top-track i { display: block; height: 100%; border-radius: 3px; background: var(--ak-accent); opacity: .75; }
+.ov-top-count {
+  text-align: right; color: var(--ak-ink-quiet);
+  font: 500 11px/1.2 var(--ak-font); font-variant-numeric: tabular-nums;
+}
+
+/* Una funzione non attiva. Il riquadro resta un riquadro come gli altri — stesso bordo, stesso
+   raggio, stesso titolo: se fosse tratteggiato o grigio sembrerebbe un errore invece di una
+   cosa che si può avere. Il contenuto si centra nello spazio che avanza, così il pulsante sta
+   dove cade l'occhio anche quando la card accanto è alta il doppio. */
+.ov-locked-body {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 12px; padding: 8px 16px 26px; text-align: center;
+}
+.ov-locked-body p { margin: 0; color: var(--ak-ink-quiet); font: 400 12px/1.5 var(--ak-font); }
+.ov-locked-body .ak-btn { padding-inline: 22px; }
+
+/* I prossimi appuntamenti */
+.ov-bookings { list-style: none; margin: 0; padding: 2px 10px 14px; display: flex; flex-direction: column; gap: 2px; }
+.ov-bookings button {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%;
+  border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left;
+  padding: 8px 6px; color: inherit; font: inherit;
+}
+.ov-bookings button:hover { background: var(--ak-hover); }
+.ov-book-when {
+  grid-column: 1 / -1; color: var(--ak-ink-quiet);
+  font: 500 10px/1.2 var(--ak-font-mono); text-transform: lowercase;
+}
+.ov-book-who { min-width: 0; overflow: hidden; font: 500 12px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap; }
+.ov-book-what {
+  grid-column: 1; min-width: 0; overflow: hidden; color: var(--ak-ink-quiet);
+  font: 400 10px/1.3 var(--ak-font); text-overflow: ellipsis; white-space: nowrap;
+}
+.ov-bookings .dl-pill { grid-row: 2; grid-column: 2; align-self: center; }
+
+/* Statistiche non collegate */
+.ov-setup { display: flex; flex-direction: column; gap: 8px; padding: 2px 16px 16px; }
+.ov-setup-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
+.ov-setup-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.ov-setup-item > strong { font: 600 12px/1.2 var(--ak-font); }
+.ov-setup-ok { color: #226c4c; font: 500 11px/1.4 var(--ak-font); }
+.ov-setup p { margin: 0; color: var(--ak-ink-quiet); font: 400 12px/1.5 var(--ak-font); }
+.ov-setup p strong { color: var(--ak-ink); }
+/* I comandi VANNO A CAPO invece di scorrere in orizzontale: affiancando due servizi la colonna
+   è stretta, e con `overflow-x` la metà destra di `wrangler pages secret put …` resta nascosta
+   dietro un bordo — cioè proprio il pezzo da copiare. Il `\` di continuazione è già nel testo,
+   quindi anche copiato a capo resta un comando valido. */
+.ov-setup pre {
+  margin: 4px 0 0; padding: 11px 12px; white-space: pre-wrap; overflow-wrap: anywhere;
+  border: 1px solid var(--ak-line); border-radius: 7px; background: var(--ak-bg);
+  color: var(--ak-ink-quiet); font: 400 11px/1.6 var(--ak-font-mono);
+}
+
+@media (max-width: 1240px) {
+  .ov-grid > [data-span="7"], .ov-grid > [data-span="8"] { grid-column: span 12; }
+  .ov-grid > [data-span="4"], .ov-grid > [data-span="5"] { grid-column: span 6; }
+}
+@media (max-width: 900px) {
+  .ov-grid > [data-span] { grid-column: span 6; }
+  .ov-chart-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 620px) {
+  .ov-grid > [data-span] { grid-column: span 12; }
+}
+
+/* ---- Schermi stretti (l'iPad in orizzontale è il caso reale) ---------------------------- */
+@media (max-width: 1040px) {
+  .app { grid-template-columns: 52px var(--ak-col-w) minmax(0, 1fr); }
+  .app.is-two { grid-template-columns: 52px minmax(0, 1fr); }
+  .rail { padding: 14px 8px; align-items: center; }
+  .rail-brand, .rail-item span, .rail-group-title { display: none; }
+  .rail-item { justify-content: center; padding: 9px; }
+  .rail-foot { width: 100%; }
+  .pe-head-main { gap: 12px; }
+  .pe-title { max-width: 25vw; }
+  .pe-photo-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap-inline: 18px; }
+}
+
+@media (max-width: 1280px) {
+  .seo-section-heading,
+  .seo-row { grid-template-columns: 110px minmax(0, 1fr); }
+  .seo-section-heading > div { grid-column: 2; }
+  .seo-row > .seo-field,
+  .seo-row > .seo-help { grid-column: 2; }
+  .seo-help { padding-top: 0; }
+}
+
+@media (max-width: 900px) {
+  .settings-editor { padding-inline: 6px; gap: 34px; }
+  .st-row { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 22px 0; }
+  .seo-editor { padding-inline: 6px; }
+  .seo-section-heading,
+  .seo-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
+  .seo-section-heading > div,
+  .seo-row > .seo-field,
+  .seo-row > .seo-help,
+  .seo-preview-row > * { grid-column: 1; }
+  .seo-row-label { font-weight: 600; }
+}
+
+/* ---- Una funzione aggiuntiva spenta ---------------------------------------------------------
+   Non è una schermata d'errore e non deve sembrarlo: la funzione non è rotta, semplicemente non
+   è stata attivata. Quindi niente rosso, niente icone d'allarme — la stessa impaginazione
+   tranquilla delle altre schermate introduttive del pannello.
+   -------------------------------------------------------------------------------------------- */
+.feature-off {
+  max-width: 46rem; margin: 0 auto; padding: 48px 28px;
+}
+.feature-off-kicker {
+  display: block; margin-bottom: 10px;
+  font: 600 11px/1 var(--ak-font); letter-spacing: .08em; text-transform: uppercase;
+  color: var(--ak-ink-quiet);
+}
+.feature-off h2 { margin: 0 0 12px; font: 600 26px/1.15 var(--ak-font); color: var(--ak-ink); }
+.feature-off-lead { margin: 0 0 24px; font: 400 15px/1.6 var(--ak-font); color: var(--ak-ink-quiet); }
+.feature-off ul { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; }
+.feature-off li {
+  position: relative; padding-left: 26px;
+  font: 400 14px/1.5 var(--ak-font); color: var(--ak-ink);
+}
+/* Il segno di spunta è disegnato, non un carattere: un'emoji cambia forma e colore da un sistema
+   all'altro, e qui deve restare dello stesso accento del resto del pannello. */
+.feature-off li::before {
+  content: ""; position: absolute; left: 4px; top: 6px;
+  width: 9px; height: 5px; border-left: 2px solid var(--ak-accent); border-bottom: 2px solid var(--ak-accent);
+  transform: rotate(-45deg);
+}
+.feature-off-cta {
+  margin: 0; padding: 18px 20px; border-radius: var(--ak-radius);
+  background: var(--ak-inset); box-shadow: var(--ak-shadow);
+  font: 400 14px/1.6 var(--ak-font); color: var(--ak-ink);
+}
+.feature-off-cta a { color: var(--ak-accent); text-decoration: underline; text-underline-offset: 2px; }