@cardinali-studio/adminkit 2.2.20 → 2.2.22

package/dist/app/next.css

@@ -0,0 +1,826 @@
+/* Nuova interfaccia ---------------------------------------------------------------
+ *
+ * Questo foglio è interamente subordinato alla feature flag `data-admin-interface="next"`.
+ * La UI corrente continua quindi a usare app.css senza una sola sovrascrittura. Il linguaggio
+ * nasce dalla reference del redesign: neutri caldi, gerarchie per tono invece che per tratti,
+ * navigazione globale in alto, navigazione contestuale a sinistra e un solo grande foglio di
+ * lavoro bianco.
+ */
+
+:root[data-admin-interface="next"] {
+  --ak-bg: #f0eeef;
+  --ak-panel: #ffffff;
+  --ak-ground: #f0eeef;
+  --ak-inset: #f7f5f6;
+  --ak-inset-deep: #e4e2e3;
+  --ak-col-bg: #f0eeef;
+
+  --ak-ink: #252424;
+  --ak-ink-quiet: #706d6e;
+  --ak-ink-faint: #969293;
+  --ak-line: #dfdcdd;
+
+  --ak-accent: #007b5e;
+  --ak-accent-hover: #006b52;
+  --ak-accent-ink: #ffffff;
+  --ak-notification: #d93636;
+  --ak-danger: #b0443b;
+
+  --ak-rail-bg: #f7f5f6;
+  --ak-rail-ink: #5f5b5c;
+  --ak-rail-ink-on: #252424;
+  --ak-rail-hover: #efedee;
+  --ak-rail-on: #ffffff;
+  --ak-rail-line: #e7e4e5;
+
+  --ak-col-w: clamp(272px, 23vw, 340px);
+  --ak-radius: 14px;
+  --ak-hover: rgba(37, 36, 36, .055);
+  --ak-shadow: 0 1px 2px rgba(35, 30, 32, .05), 0 7px 18px -13px rgba(35, 30, 32, .38);
+  --ak-lift-1: 0 1px 2px rgba(35, 30, 32, .045), 0 7px 18px -14px rgba(35, 30, 32, .28);
+  --ak-lift-2: 0 1px 2px rgba(35, 30, 32, .055), 0 13px 28px -18px rgba(35, 30, 32, .34);
+  --ak-lift-3: 0 2px 5px rgba(35, 30, 32, .06), 0 25px 52px -28px rgba(35, 30, 32, .42);
+}
+
+:root[data-theme="dark"][data-admin-interface="next"] {
+  --ak-bg: #202124;
+  --ak-panel: #292a2e;
+  --ak-ground: #202124;
+  --ak-inset: #25262a;
+  --ak-inset-deep: #191a1d;
+  --ak-col-bg: #202124;
+
+  --ak-ink: #f1efef;
+  --ak-ink-quiet: #aaa6a7;
+  --ak-ink-faint: #858183;
+  --ak-line: rgba(255, 255, 255, .105);
+
+  --ak-accent: #4bc39d;
+  --ak-accent-hover: #5bd0ac;
+  --ak-accent-ink: #10241d;
+  --ak-notification: #ff625c;
+  --ak-danger: #ef7b6f;
+
+  --ak-rail-bg: #191a1d;
+  --ak-rail-ink: #aaa6a7;
+  --ak-rail-ink-on: #f1efef;
+  --ak-rail-hover: #25262a;
+  --ak-rail-on: #292a2e;
+  --ak-rail-line: rgba(255, 255, 255, .08);
+  --ak-hover: rgba(255, 255, 255, .055);
+}
+
+/* La shell usa tutto il viewport: la cornice della reference è utile in una presentazione,
+ * ma nel pannello operativo sottrarrebbe spazio senza aggiungere gerarchia. */
+:root[data-admin-interface="next"] body {
+  padding: 0;
+  overflow: hidden;
+  background: var(--ak-bg);
+}
+:root[data-theme="dark"][data-admin-interface="next"] body { background: var(--ak-bg); }
+
+:root[data-admin-interface="next"] .app,
+:root[data-admin-interface="next"] .app.is-two {
+  height: 100vh;
+  grid-template-columns: var(--ak-col-w) minmax(0, 1fr);
+  grid-template-rows: 82px minmax(0, 1fr);
+  overflow: hidden;
+  border-radius: 0;
+  background: var(--ak-bg);
+  box-shadow: 0 1px 1px rgba(35, 30, 32, .04);
+}
+:root[data-admin-interface="next"] .app.is-two { grid-template-columns: minmax(0, 1fr); }
+
+/* Navigazione globale: una sola riga, con il contesto corrente espresso come tab sollevato. */
+:root[data-admin-interface="next"] .rail {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  z-index: 20;
+  min-width: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 18px;
+  overflow: hidden;
+  background: var(--ak-rail-bg);
+  color: var(--ak-rail-ink);
+}
+:root[data-admin-interface="next"] .rail-brand {
+  flex: none;
+  min-width: 164px;
+  height: 52px;
+  justify-content: center;
+  gap: 2px;
+  padding: 0 17px;
+  border-radius: 15px;
+  background: color-mix(in srgb, var(--ak-rail-bg) 74%, var(--ak-line));
+}
+:root[data-admin-interface="next"] .rail-brand-name {
+  overflow: hidden;
+  color: var(--ak-rail-ink-on);
+  font-size: 14px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:root[data-admin-interface="next"] .rail-brand-role {
+  color: var(--ak-rail-ink);
+  font-size: 9px;
+  letter-spacing: .14em;
+  opacity: .7;
+}
+:root[data-admin-interface="next"] .rail-nav {
+  min-width: 0;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+}
+:root[data-admin-interface="next"] .rail-nav::-webkit-scrollbar { display: none; }
+:root[data-admin-interface="next"] .rail-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+:root[data-admin-interface="next"] .rail-group + .rail-group { margin: 0; }
+:root[data-admin-interface="next"] .rail-group-title { display: none; }
+:root[data-admin-interface="next"] .rail-item {
+  width: auto;
+  min-height: 48px;
+  flex: none;
+  gap: 8px;
+  padding: 0 13px;
+  border-radius: 14px;
+  color: var(--ak-rail-ink);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+:root[data-admin-interface="next"] .rail-item:hover {
+  background: var(--ak-rail-hover);
+  color: var(--ak-rail-ink-on);
+}
+:root[data-admin-interface="next"] .rail-item.is-on {
+  background: var(--ak-rail-on);
+  color: var(--ak-rail-ink-on);
+  box-shadow: var(--ak-shadow);
+}
+:root[data-admin-interface="next"] .rail-item:focus-visible {
+  outline: 0;
+  box-shadow: var(--ak-ring);
+}
+:root[data-admin-interface="next"] .rail-item .ico { width: 17px; height: 17px; opacity: .78; }
+:root[data-admin-interface="next"] .rail-item.is-on .ico { color: var(--ak-accent); opacity: 1; }
+:root[data-admin-interface="next"] .rail-badge {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: var(--ak-notification);
+  color: #fff;
+  font-size: 10px;
+  line-height: 20px;
+}
+:root[data-admin-interface="next"] .rail-foot {
+  flex: none;
+  margin: 0 0 0 auto;
+  padding: 0;
+  border: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+:root[data-admin-interface="next"] .rail-foot .rail-item {
+  width: 48px;
+  justify-content: center;
+  padding: 0;
+  background: color-mix(in srgb, var(--ak-rail-bg) 74%, var(--ak-line));
+}
+:root[data-admin-interface="next"] .rail-foot .rail-item span { display: none; }
+:root[data-admin-interface="next"] .rail-foot .rail-item.is-on {
+  background: var(--ak-rail-on);
+  color: var(--ak-rail-ink-on);
+}
+:root[data-admin-interface="next"] .rail-foot > :not(.rail-item) {
+  width: 48px;
+  height: 48px;
+  margin: 0;
+  overflow: hidden;
+}
+:root[data-admin-interface="next"] .rail-foot > :not(.rail-item) > :first-child {
+  width: 48px;
+  height: 48px;
+  min-height: 48px;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--ak-rail-bg) 74%, var(--ak-line));
+  box-shadow: none;
+  overflow: hidden;
+}
+:root[data-admin-interface="next"] .rail-foot > :not(.rail-item) > :first-child {
+  color: transparent;
+  font-size: 0;
+}
+:root[data-admin-interface="next"] .rail-foot > :not(.rail-item) > :first-child :is(strong, p, small) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* Navigazione contestuale: ciò che prima era la seconda colonna diventa il primo livello del
+ * workspace. Nessun bordo verticale: basta la differenza fra superficie e foglio bianco. */
+:root[data-admin-interface="next"] .col {
+  grid-column: 1;
+  grid-row: 2;
+  padding: 24px 18px 18px;
+  border: 0;
+  background: var(--ak-col-bg);
+}
+:root[data-admin-interface="next"] .col-head {
+  min-height: 46px;
+  padding: 0 10px 17px;
+  border: 0;
+}
+:root[data-admin-interface="next"] .col-head-actions {
+  height: auto;
+  min-height: 0;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 16px;
+}
+:root[data-admin-interface="next"] .col-title {
+  color: var(--ak-ink);
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -.015em;
+  text-transform: none;
+}
+:root[data-admin-interface="next"] .col-head .ak-btn,
+:root[data-admin-interface="next"] .col-head .pa-new > button {
+  min-height: 48px;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 16px;
+  border: 0;
+  border-radius: 14px;
+  background: var(--ak-accent);
+  color: var(--ak-accent-ink);
+  font-size: 13px;
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] .col-body {
+  padding: 0 10px 24px;
+  scrollbar-color: var(--ak-line) transparent;
+}
+:root[data-admin-interface="next"] .col-list,
+:root[data-admin-interface="next"] .pg-list,
+:root[data-admin-interface="next"] .rq-list,
+:root[data-admin-interface="next"] .dl-list { gap: 4px; }
+:root[data-admin-interface="next"] .col-item,
+:root[data-admin-interface="next"] .pg-row,
+:root[data-admin-interface="next"] .rq-row,
+:root[data-admin-interface="next"] .mf-item {
+  border: 0;
+  border-radius: 14px;
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] .col-item {
+  min-height: 48px;
+  padding: 11px 14px;
+  font-size: 14px;
+}
+:root[data-admin-interface="next"] .settings-list { gap: 7px; }
+:root[data-admin-interface="next"] .settings-list-item {
+  min-height: 78px;
+  justify-content: center;
+  gap: 6px;
+  padding: 14px 16px;
+}
+:root[data-admin-interface="next"] .settings-list-item strong { font-size: 14px; }
+:root[data-admin-interface="next"] .settings-list-item span { font-size: 12px; line-height: 1.45; }
+:root[data-admin-interface="next"] :is(.col-item, .pg-row, .rq-row, .mf-item):hover {
+  background: color-mix(in srgb, var(--ak-inset-deep) 55%, transparent);
+}
+:root[data-admin-interface="next"] :is(.col-item, .pg-row, .rq-row, .mf-item).is-on {
+  border: 0;
+  background: var(--ak-inset-deep);
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] :is(.col-item, .pg-row, .rq-row, .mf-item).is-on :is(.ico, .pg-icon, .mf-ico) {
+  color: var(--ak-accent);
+}
+:root[data-admin-interface="next"] :is(.col-item, .pg-open, .rq-open, .mf-open, .dl-row):focus-visible {
+  outline: 0;
+  border-radius: 12px;
+  box-shadow: var(--ak-ring);
+}
+:root[data-admin-interface="next"] .pg-group-title,
+:root[data-admin-interface="next"] .bk-list-label {
+  margin: 0 0 8px;
+  padding: 0 14px;
+  color: var(--ak-ink-quiet);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: .02em;
+  text-transform: none;
+}
+:root[data-admin-interface="next"] .pg-open,
+:root[data-admin-interface="next"] .mf-open { min-height: 48px; padding-block: 11px; font-size: 14px; }
+:root[data-admin-interface="next"] .mf-list + .mf-list,
+:root[data-admin-interface="next"] .mf-tail,
+:root[data-admin-interface="next"] .dl-col-foot,
+:root[data-admin-interface="next"] .bk-settings-link { border-color: var(--ak-line); }
+
+/* Area di lavoro: header-breadcrumb sul fondo quieto, poi un solo foglio bianco arrotondato. */
+:root[data-admin-interface="next"] .pane {
+  grid-column: 2;
+  grid-row: 2;
+  min-width: 0;
+  padding: 0 18px 18px 0;
+  overflow-y: auto;
+  background: var(--ak-bg);
+  scrollbar-color: var(--ak-line) transparent;
+}
+:root[data-admin-interface="next"] .app.is-two .pane { grid-column: 1; padding-left: 18px; }
+:root[data-admin-interface="next"] .pane-head {
+  min-height: 70px;
+  padding: 10px 20px 10px 34px;
+  border: 0;
+  background: transparent;
+}
+:root[data-admin-interface="next"] .pane-title {
+  color: var(--ak-accent);
+  font-size: 15px;
+  font-weight: 600;
+}
+:root[data-admin-interface="next"] .pane-crumb { font-size: 14px; }
+:root[data-admin-interface="next"] .pane-crumb.is-current { color: var(--ak-accent); font-size: 15px; }
+:root[data-admin-interface="next"] .pane-crumb-sep { color: var(--ak-ink-faint); }
+:root[data-admin-interface="next"] .pane-count { color: var(--ak-ink-quiet); font-size: 12px; }
+:root[data-admin-interface="next"] .pane-head .ak-btn,
+:root[data-admin-interface="next"] .pane-open,
+:root[data-admin-interface="next"] .pe-seo-button,
+:root[data-admin-interface="next"] .pe-status {
+  min-height: 40px;
+  padding-inline: 14px;
+  border-color: transparent;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--ak-panel) 68%, transparent);
+}
+:root[data-admin-interface="next"] .pane-head .ak-btn-primary {
+  background: var(--ak-accent);
+  color: var(--ak-accent-ink);
+}
+:root[data-admin-interface="next"] .pane-body,
+:root[data-admin-interface="next"] .pane-body.is-wide {
+  flex: none;
+  min-height: calc(100% - 70px);
+  margin: 0;
+  padding: clamp(24px, 3vw, 42px) clamp(24px, 3vw, 44px) 72px;
+  overflow: visible;
+  border-radius: 28px;
+  background: var(--ak-panel);
+}
+:root[data-admin-interface="next"] .pane-body:has(.ed-portfolio),
+:root[data-admin-interface="next"] .pane-body:has(.ed-gallery),
+:root[data-admin-interface="next"] .pane-body:has(.ed-about),
+:root[data-admin-interface="next"] .pane-body:has(.ed-workshop),
+:root[data-admin-interface="next"] .pane-body:has(.ed-home),
+:root[data-admin-interface="next"] .pane-body:has(.ov) { background: var(--ak-panel); }
+:root[data-admin-interface="next"] .pane-body > :is(.ed, .rq-detail, .rg, .pane-empty) { max-width: 920px; }
+:root[data-admin-interface="next"] .pane-empty { min-height: 180px; justify-content: center; }
+
+/* Controlli condivisi: dimensioni più comode, tratti quieti e focus affidato all'anello. */
+:root[data-admin-interface="next"] .ak-btn {
+  min-height: 40px;
+  padding: 0 15px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+:root[data-admin-interface="next"] .ak-btn-primary { border-color: transparent; }
+:root[data-admin-interface="next"] :is(.ak-input, .st-input, .dl-field input, .dl-field textarea, .dl-select) {
+  border-color: transparent;
+  border-radius: 12px;
+  background: var(--ak-inset);
+}
+:root[data-admin-interface="next"] :is(.ak-input, .st-input, .dl-field input, .dl-field textarea, .dl-select):focus {
+  outline: 0;
+  border-color: transparent;
+  box-shadow: var(--ak-ring);
+}
+
+/* Consegne: il flusso resta interamente visibile, ma le opzioni diventano gruppi tonali
+ * annidati nel foglio invece di una griglia di riquadri tecnici. */
+:root[data-admin-interface="next"] .dl-work { gap: 18px; }
+:root[data-admin-interface="next"] .dl-work-head {
+  position: static;
+  z-index: auto;
+  top: auto;
+  margin: 0;
+  padding: 0 2px 12px;
+  background: var(--ak-panel);
+}
+:root[data-admin-interface="next"] .dl-work-title h2 {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -.02em;
+}
+:root[data-admin-interface="next"] .dl-grid { gap: 18px; }
+:root[data-admin-interface="next"] :is(.dl-main, .dl-side) { gap: 12px; }
+:root[data-admin-interface="next"] :is(.dl-card, .dl-group) {
+  border: 0;
+  border-radius: 18px;
+  background: var(--ak-inset);
+}
+:root[data-admin-interface="next"] .dl-pick-tile {
+  border: 0;
+  border-radius: 14px;
+  background: var(--ak-panel);
+}
+:root[data-admin-interface="next"] .dl-drop { border-color: color-mix(in srgb, var(--ak-ink-faint) 45%, transparent); }
+:root[data-admin-interface="next"] :is(.dl-card, .dl-group) :is(.dl-field input, .dl-field textarea, .dl-select) {
+  background: var(--ak-panel);
+}
+:root[data-admin-interface="next"] .dl-get { background: transparent; }
+:root[data-admin-interface="next"] .dl-col-foot { border: 0; padding-inline: 10px; }
+
+/* Richieste: il dettaglio è un blocco editoriale dentro il foglio, non un secondo foglio. */
+:root[data-admin-interface="next"] .rq-detail {
+  border: 0;
+  border-radius: 18px;
+  background: var(--ak-inset);
+}
+:root[data-admin-interface="next"] .rq-new { background: var(--ak-notification); }
+:root[data-admin-interface="next"] .rq-head { border-color: color-mix(in srgb, var(--ak-line) 72%, transparent); }
+
+/* Impostazioni: una gerarchia editoriale dentro il foglio, non un modulo tecnico. */
+:root[data-admin-interface="next"] .settings-editor {
+  width: min(1040px, 100%);
+  padding: 0 4px 76px;
+  gap: 52px;
+}
+:root[data-admin-interface="next"] .st-intro { padding: 2px 0 28px; border-color: var(--ak-line); }
+:root[data-admin-interface="next"] .st-intro > span { color: var(--ak-accent); font-size: 11px; }
+:root[data-admin-interface="next"] .st-intro h2 {
+  font-size: clamp(28px, 3vw, 38px);
+  font-weight: 550;
+  letter-spacing: -.035em;
+}
+:root[data-admin-interface="next"] .st-intro p { max-width: 700px; font-size: 14px; }
+:root[data-admin-interface="next"] .st-section > h2 { padding-bottom: 16px; font-size: 17px; }
+:root[data-admin-interface="next"] .st-row {
+  grid-template-columns: minmax(220px, 310px) minmax(280px, 620px);
+  padding: 30px 0;
+}
+:root[data-admin-interface="next"] .st-copy h3 { font-size: 15px; }
+:root[data-admin-interface="next"] .st-copy p { font-size: 13px; }
+:root[data-admin-interface="next"] .st-input { min-height: 48px; padding: 12px 14px; font-size: 14px; }
+
+/* Panoramica: preserva la densità informativa, ma mette i moduli su un tono incassato invece
+ * di moltiplicare bordi e ombre dentro il foglio principale. */
+:root[data-admin-interface="next"] .ov { gap: 18px; }
+:root[data-admin-interface="next"] .ov-bar { padding: 0 2px 6px; }
+:root[data-admin-interface="next"] .ov-bar-hi { font-size: 14px; }
+:root[data-admin-interface="next"] .ov-grid { gap: 14px; }
+:root[data-admin-interface="next"] .ov-tile {
+  border-radius: 18px;
+  background: var(--ak-inset);
+}
+:root[data-admin-interface="next"] .ov-cta {
+  background: var(--ak-accent);
+  color: var(--ak-accent-ink);
+}
+:root[data-admin-interface="next"] .ov-tile-head { padding: 18px 18px 14px; }
+:root[data-admin-interface="next"] .ov-tile-head h2 { font-size: 14px; }
+
+/* Editor Home e Pagine -------------------------------------------------------------
+ * Nel foglio bianco non serve ripetere una seconda pila di card bianche sollevate. I gruppi
+ * di contenuto diventano quindi superfici tonali, mentre campi e anteprime tornano bianchi
+ * solo quando devono emergere dal gruppo. La gerarchia resta affidata a tono, spazio e scala,
+ * come nella reference, e gli editor visuali possono usare tutta la larghezza disponibile. */
+:root[data-admin-interface="next"] .pane-body > :is(.ed-home, .ed-gallery, .ed-about, .ed-workshop) {
+  width: 100%;
+  max-width: none;
+}
+:root[data-admin-interface="next"] :is(.hm, .gs-editor, .abo, .wsh-intro) {
+  width: min(1180px, 100%);
+}
+:root[data-admin-interface="next"] .hm {
+  gap: 20px;
+  padding-bottom: 32px;
+}
+:root[data-admin-interface="next"] .hm-hint {
+  margin: 0 2px;
+  max-width: 66ch;
+  color: var(--ak-ink-quiet);
+  font-size: 13px;
+  line-height: 1.55;
+}
+:root[data-admin-interface="next"] .hm-split {
+  grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr);
+  gap: 20px;
+}
+:root[data-admin-interface="next"] .hm-photos {
+  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+  gap: 12px;
+}
+:root[data-admin-interface="next"] .hm-stacked-photos { grid-template-columns: minmax(0, 1fr); }
+:root[data-admin-interface="next"] .hm-photo {
+  gap: 10px;
+  padding: 14px;
+  border-radius: 18px;
+  background: var(--ak-inset);
+}
+:root[data-admin-interface="next"] .hm-photo-label,
+:root[data-admin-interface="next"] .pw-label > span {
+  font-size: 12px;
+  font-weight: 550;
+}
+:root[data-admin-interface="next"] :is(.hm-block, .abo-block, .abo-side-inner, .wsh-intro) {
+  border-radius: 18px;
+  background: var(--ak-inset);
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] .hm-block {
+  gap: 14px;
+  padding: 18px;
+}
+:root[data-admin-interface="next"] :is(.pw-block-head h4, .gs-card-head strong, .pw-card-kind) {
+  color: var(--ak-ink);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+}
+:root[data-admin-interface="next"] :is(.hm-block, .abo-block, .abo-side-inner, .wsh-intro) .pw-field,
+:root[data-admin-interface="next"] .hm-row .pw-field {
+  background: var(--ak-panel);
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] :is(.hm-block, .abo-block, .abo-side-inner, .wsh-intro) .pw-field:hover,
+:root[data-admin-interface="next"] .hm-row .pw-field:hover {
+  background: color-mix(in srgb, var(--ak-panel) 88%, var(--ak-inset-deep));
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] :is(.hm-block, .abo-block, .abo-side-inner, .wsh-intro) .pw-field:focus,
+:root[data-admin-interface="next"] .hm-row .pw-field:focus { background: var(--ak-panel); box-shadow: var(--ak-ring); }
+:root[data-admin-interface="next"] .hm-title-preview {
+  padding: 16px;
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--ak-inset-deep) 62%, var(--ak-inset));
+}
+:root[data-admin-interface="next"] .hm-title-preview span {
+  font-size: clamp(17px, 2.3vw, 25px);
+  letter-spacing: -.03em;
+}
+:root[data-admin-interface="next"] .hm-row {
+  padding: 5px 7px 5px 2px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--ak-inset-deep) 58%, transparent);
+}
+:root[data-admin-interface="next"] .pw-add-quiet {
+  align-self: flex-start;
+  min-height: 34px;
+  padding-inline: 10px;
+  border-radius: 10px;
+}
+
+/* Le card riordinabili sono gruppi, non fogli indipendenti. L'elevazione compare soltanto
+ * durante il drag: nello stato normale il tono è sufficiente a renderne visibili i confini. */
+:root[data-admin-interface="next"] :is(.pw-work, .pw-card, .gs-card) {
+  border-radius: 18px;
+  background: var(--ak-inset);
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] :is(.pw-work, .pw-card, .gs-card):hover { box-shadow: none; }
+:root[data-admin-interface="next"] .pw-work.is-open {
+  background: color-mix(in srgb, var(--ak-inset) 78%, var(--ak-inset-deep));
+  box-shadow: none;
+}
+:root[data-admin-interface="next"] .pw-work-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows 440ms cubic-bezier(.4, 0, .2, 1),
+    opacity 240ms cubic-bezier(.4, 0, .2, 1);
+}
+:root[data-admin-interface="next"] .pw-work-reveal.is-expanded {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+:root[data-admin-interface="next"] .pw-work-reveal-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+:root[data-admin-interface="next"] .pw-work.is-dragging,
+:root[data-admin-interface="next"] .pw-card.is-dragging,
+:root[data-admin-interface="next"] .gs-card.is-dragging { box-shadow: var(--ak-lift-3); }
+:root[data-admin-interface="next"] .pw-block {
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--ak-panel) 72%, var(--ak-inset));
+}
+:root[data-admin-interface="next"] .pw-card { background: var(--ak-panel); }
+
+/* Gallery: l'intestazione, i conteggi, le azioni e la griglia appartengono a un solo gruppo
+ * tonale. `display: contents` elimina il guscio visuale dell'editor fotografico senza alterarne
+ * semantica o stato React: i suoi figli diventano righe della card grigia. */
+:root[data-admin-interface="next"] .gs-editor { gap: 18px; padding-top: 0; }
+:root[data-admin-interface="next"] .gs-list { gap: 14px; }
+:root[data-admin-interface="next"] .gs-card-head {
+  min-height: 58px;
+  padding: 10px 16px 8px 10px;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  padding-bottom: 8px;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery > .gs-card-head {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  padding-right: clamp(230px, 25vw, 280px);
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery > .gs-gallery,
+:root[data-admin-interface="next"] .gs-card.is-gallery > .gs-gallery > .pe-gallery,
+:root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-bar {
+  display: contents;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-summary {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  gap: 3px;
+  padding: 2px 20px 12px;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-bar > :is(.pe-add, .pe-add-group) {
+  grid-column: 2;
+  grid-row: 1;
+  z-index: 2;
+  align-self: center;
+  justify-self: end;
+  margin-right: 16px;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery :is(.pe-photo-grid, .pe-gallery-empty, .pe-hidden-gallery) {
+  grid-column: 1 / -1;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery .pe-photo-grid {
+  grid-row: 3;
+  margin: 0;
+  padding: 8px 20px 36px;
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-empty {
+  grid-row: 3;
+  margin: 0 20px 12px;
+  background: color-mix(in srgb, var(--ak-panel) 58%, transparent);
+}
+:root[data-admin-interface="next"] .gs-card.is-gallery .pe-hidden-gallery {
+  grid-row: 4;
+  margin: 0 20px;
+}
+:root[data-admin-interface="next"] .pe-gallery-bar {
+  min-height: 52px;
+  padding: 0;
+  border: 0;
+}
+:root[data-admin-interface="next"] .pe-gallery-bar strong { font-size: 14px; }
+:root[data-admin-interface="next"] .pe-photo-grid {
+  gap: 24px 18px;
+  padding-top: 8px;
+}
+:root[data-admin-interface="next"] .pe-photo-frame img {
+  border-radius: 7px;
+  box-shadow: 0 5px 18px -12px rgba(35, 30, 32, .55);
+}
+:root[data-admin-interface="next"] .pe-photo-actions {
+  border: 0;
+  border-radius: 10px;
+  box-shadow: var(--ak-lift-3);
+}
+/* Tutte le azioni primarie usano la coppia di colori del tema. Alcuni componenti storici
+ * fissavano il testo a bianco: in dark l'accento diventa chiaro e richiede invece inchiostro
+ * scuro, come il pulsante di pubblicazione. */
+:root[data-admin-interface="next"] :is(.gs-add, .pe-add, .pe-add-position, .btn-soft.is-primary) {
+  color: var(--ak-accent-ink);
+}
+
+@media (max-width: 900px) {
+  :root[data-admin-interface="next"] .gs-card.is-gallery > .gs-card-head { padding-right: 16px; }
+  :root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-bar > :is(.pe-add, .pe-add-group) {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: start;
+    margin: 4px 20px 12px;
+  }
+  :root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-summary { grid-row: 3; }
+  :root[data-admin-interface="next"] .gs-card.is-gallery .pe-photo-grid,
+  :root[data-admin-interface="next"] .gs-card.is-gallery .pe-gallery-empty { grid-row: 4; }
+  :root[data-admin-interface="next"] .gs-card.is-gallery .pe-hidden-gallery { grid-row: 5; }
+}
+:root[data-admin-interface="next"] :is(.gs-fields, .gs-image-editor) { padding-inline: 16px; }
+:root[data-admin-interface="next"] :is(.gs-fields input, .gs-fields textarea, .gs-fields .ak-prose-field, .gs-image-fields input) {
+  border-radius: 12px;
+  background: var(--ak-panel);
+}
+
+/* La testata di una pagina contiene due gruppi leggibili: identità a sinistra, stato e azioni
+ * a destra. Il wrap evita che i controlli comprimano il titolo sui viewport intermedi. */
+:root[data-admin-interface="next"] .pe-head-main {
+  gap: 8px;
+  flex-wrap: wrap;
+}
+:root[data-admin-interface="next"] .pe-title {
+  max-width: min(32vw, 380px);
+  margin-right: 4px;
+  font-size: 18px;
+  letter-spacing: -.02em;
+}
+:root[data-admin-interface="next"] .pe-language {
+  border: 0;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--ak-panel) 68%, transparent);
+}
+:root[data-admin-interface="next"] .pe-language button { min-height: 36px; border: 0; }
+:root[data-admin-interface="next"] .pe-language button.is-active { box-shadow: none; }
+:root[data-admin-interface="next"] .pe-menu-toggle {
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--ak-panel) 68%, transparent);
+}
+
+@media (max-width: 1050px) {
+  :root[data-admin-interface="next"] .hm-split { grid-template-columns: minmax(0, 1fr); }
+  :root[data-admin-interface="next"] .hm-split > .hm-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[data-admin-interface="next"] .pw-work-reveal { transition-duration: 1ms; }
+}
+
+/* I vecchi avvisi restano distinguibili, ma appartengono al foglio e non spezzano più la shell. */
+:root[data-admin-interface="next"] .app-legacy {
+  margin: 0 18px 12px 0;
+  padding: 12px 16px;
+  border: 0;
+  border-radius: 14px;
+  background: color-mix(in srgb, #f0b94a 13%, var(--ak-panel));
+}
+
+/* Prima cedono le etichette delle attività meno frequenti, così le aree editoriali
+ * restano leggibili anche su un portatile. */
+@media (max-width: 1450px) {
+  :root[data-admin-interface="next"] .rail-nav .rail-group:nth-child(3) .rail-item {
+    position: relative;
+    width: 48px;
+    justify-content: center;
+    padding: 0;
+  }
+  :root[data-admin-interface="next"] .rail-nav .rail-group:nth-child(3) .rail-item > span:not(.rail-badge) { display: none; }
+  :root[data-admin-interface="next"] .rail-nav .rail-group:nth-child(3) .rail-badge {
+    position: absolute;
+    transform: translate(13px, -13px);
+  }
+}
+
+/* A larghezze intermedie anche gli altri tab globali conservano le icone e cedono le etichette. */
+@media (max-width: 1180px) {
+  :root[data-admin-interface="next"] .rail-brand { min-width: 148px; }
+  :root[data-admin-interface="next"] .rail-nav .rail-item { width: 48px; justify-content: center; padding: 0; }
+  :root[data-admin-interface="next"] .rail-nav .rail-item > span:not(.rail-badge) { display: none; }
+  :root[data-admin-interface="next"] .rail-nav .rail-badge { position: absolute; transform: translate(13px, -13px); }
+}
+
+@media (max-width: 820px) {
+  :root[data-admin-interface="next"] body { padding: 0; }
+  :root[data-admin-interface="next"] .app,
+  :root[data-admin-interface="next"] .app.is-two {
+    height: 100vh;
+    grid-template-columns: minmax(220px, 40vw) minmax(0, 1fr);
+    grid-template-rows: 70px minmax(0, 1fr);
+    border-radius: 0;
+  }
+  :root[data-admin-interface="next"] .app.is-two { grid-template-columns: minmax(0, 1fr); }
+  :root[data-admin-interface="next"] .rail { padding: 9px 10px; align-items: center; }
+  :root[data-admin-interface="next"] .rail-brand { min-width: 48px; width: 48px; height: 48px; padding: 0; }
+  :root[data-admin-interface="next"] .rail-brand-name { font-size: 0; }
+  :root[data-admin-interface="next"] .rail-brand-name::first-letter { font-size: 14px; }
+  :root[data-admin-interface="next"] .rail-brand-role { display: none; }
+  :root[data-admin-interface="next"] .rail-foot .rail-item:not(.is-on) { display: none; }
+  :root[data-admin-interface="next"] .col { padding: 18px 10px 10px; }
+  :root[data-admin-interface="next"] .pane { padding: 0 10px 10px 0; }
+  :root[data-admin-interface="next"] .app.is-two .pane { padding-left: 10px; }
+  :root[data-admin-interface="next"] .pane-head { min-height: 62px; padding: 8px 10px 8px 18px; }
+  :root[data-admin-interface="next"] .pane-body,
+  :root[data-admin-interface="next"] .pane-body.is-wide { border-radius: 22px; padding: 24px 20px 56px; }
+}