/* Design system Plannest Pay
   Colori dal kit logo PAY (ottobre 2026): viola notte #240046 (corpo della P,
   titoli), lilla #A68BFF (angolo, onde, PAY: solo decorativo), viola #5B2EE0
   per CTA e link; successo #09AE00, avviso #D28E28, errore #D30000, fondo
   #FBFAFE. Inter con letter-spacing -2%.
   Le pagine tengono i loro stili; questo file aggiunge i token comuni, le
   illustrazioni di stato animate (vedi /ds/states.js) e le rifiniture dei
   componenti condivisi (pulsanti, bottom sheet, banner, barra in basso).
   La pagina /design le mostra tutte. */

:root {
  /* ===== tokens:light (DESIGN_SYSTEM.md §3, letti anche da scripts/contrast.js) ===== */
  --brand:#5B2EE0; --brand-from:#6A3DEB; --brand-to:#5B2EE0; --brand-rgb:91,46,224;
  --brand-ink:#5B2EE0;            /* brand usato come testo (link, Text button) */
  --brand-gradient:linear-gradient(135deg, var(--brand-from), var(--brand-to));
  --ring-gradient:linear-gradient(135deg, var(--accent), var(--brand));   /* decorativo: anelli avatar */
  --accent:#A68BFF; --accent-rgb:166,139,255;   /* solo decorativo, mai sotto testo bianco */
  --on-brand:#FFFFFF;
  --surface:#FBFAFE; --card-from:#FFFFFF; --card-to:#FCFBFF; --card-solid:#FFFFFF;
  --card:linear-gradient(180deg, var(--card-from), var(--card-to));
  --text-primary:#240046; --text-secondary:#5E5878; --text-muted:#6B6585;
  --border-subtle:rgba(16,24,40,.06); --border-input:rgba(16,24,40,.14);
  --success:#09AE00; --success-rgb:9,174,0; --success-text:#0B7A32;
  --warning:#D28E28; --warning-rgb:210,142,40; --warning-text:#8A5A00;
  /* anzianità delle richieste in attesa: giallo (1-6 giorni), arancione (7-29), poi danger */
  --yellow:#EAB308; --yellow-rgb:234,179,8; --yellow-text:#6B5300;
  --orange:#EA580C; --orange-rgb:234,88,12; --orange-text:#B03A00;
  --danger:#D30000; --danger-rgb:211,0,0; --danger-text:#B00000;
  --neutral:#64748B; --neutral-rgb:100,116,139; --neutral-text:#4B5A70;
  --tint:.12;                     /* opacità delle tinte di stato */
  --tonal:.08;                    /* opacità del fondo dei bottoni tonal */
  --glass:rgba(255,255,255,.72); --glass-solid:rgba(255,255,255,.92); --glass-border:rgba(255,255,255,.6);
  --tab-active-bg:rgba(91,46,224,.10);
  --skeleton-base:rgba(16,24,40,.06); --skeleton-shine:rgba(255,255,255,.65);
  --ring-gap:var(--card-solid);
  --focus-ring:0 0 0 3px rgba(91,46,224,.28);
  /* ===== tokens:end ===== */

  /* raggi */
  --radius-card:20px; --radius-tile:16px; --radius-icon-box:12px; --radius-button:16px;
  --radius-input:16px; --radius-tabbar:28px; --radius-tab:20px; --radius-pill:999px;
  /* ombre */
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-card-pressed:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  --shadow-float:0 8px 32px rgba(36,0,70,.16), 0 2px 8px rgba(36,0,70,.08);
  --shadow-cta:0 6px 16px rgba(91,46,224,.28);
  --cta-highlight:inset 0 1px 0 rgba(255,255,255,.25);
  --glow-brand:0 4px 16px rgba(166,139,255,.22);
  /* spaziatura (scala a 4px) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px;
  --page-pad:20px; --page-bottom:110px; --card-gap:12px; --section-gap:28px;
  /* tipografia */
  --font:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif; --tracking:-0.02em;
  --fs-page:28px; --fs-section:20px; --fs-value:24px; --fs-body:16px;
  --fs-label:14px; --fs-label-sm:13px; --fs-caption:12px;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* misure componenti */
  --tap:44px; --tabbar-h:64px; --btn-h:52px; --search-h:48px; --row-min:56px; --chip-h:28px;
  --chip-w:96px; --dot:6px; --status-dot:10px; --icon:20px; --icon-sm:16px; --icon-box:44px;
  --sk-line:12px; --sk-line-lg:16px; --sk-value:24px;
  /* banner legacy: fondo chiaro anche in tema scuro, quindi testo fisso */
  --banner-ok-text:#4A1FC0; --banner-err-text:#8F0000;
  --avatar-sm:32px; --avatar-md:44px; --avatar-lg:64px; --logo-h:40px; --stroke:1.75;
  --code-tracking:.55em;          /* cifre del codice di accesso ben separate */
  /* motion */
  --dur-tap:120ms; --dur:200ms; --dur-slow:250ms; --ease-out:cubic-bezier(.22,1,.36,1);
  --stagger:30ms;
  /* avatar: 6 coppie sobrie (viola, indaco, teal) scelte per hash del nome */
  --av-1:#5B2EE0,#8B6BF2; --av-2:#4F46E5,#7C73F0; --av-3:#0E7490,#22A3BC;
  --av-4:#3A0A6B,#6A3DAA; --av-5:#7C3AED,#A68BFF; --av-6:#0F766E,#2BA597;

  /* ---- alias legacy: le pagine non ancora migrate usano questi nomi ---- */
  --pp-navy:#240046; --pp-title:var(--text-primary); --pp-text:#2E1F4D; --pp-muted:#8E87A6;
  --pp-primary:var(--brand); --pp-secondary:var(--accent); --pp-primary-soft:#F1ECFF;
  --pp-gradient:linear-gradient(100deg, #8B6BF2 -30%, #5B2EE0 75%);
  --pp-gradient-logo:linear-gradient(225deg, #A68BFF 0%, #5B2EE0 100%);
  --pp-success:var(--success); --pp-success-soft:#E6F7E5;
  --pp-warn:var(--warning); --pp-warn-soft:#FBF3E2;
  --pp-error:var(--danger); --pp-error-soft:#FCE8E8;
  --pp-bg:var(--surface); --pp-surface:#FFFFFF; --pp-line:#E9E5F2;
  --pp-radius-s:10px; --pp-radius-m:14px; --pp-radius-l:18px;
  --pp-shadow-1:0 1px 2px rgba(36,0,70,.04);
  --pp-shadow-2:0 8px 24px rgba(36,0,70,.08);
  --pp-ease-out:var(--ease-out);
  --pp-ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- illustrazioni di stato ---------- */
.pp-state { display:block; margin:0 auto; overflow:visible; }
.pp-state-box { text-align:center; padding:1.2rem 0 .4rem; }
.pp-state-box .pp-state { margin-bottom:.9rem; }

.pp-state .pp-halo { transform-origin:48px 48px; animation:pp-pop .55s var(--pp-ease-back) both; }
.pp-state .pp-disc { transform-origin:48px 48px; animation:pp-pop .5s var(--pp-ease-back) .08s both; }
.pp-state .pp-ring { transform-origin:48px 48px; opacity:0; animation:pp-ring .9s var(--pp-ease-out) .35s; }
.pp-state .pp-draw { stroke-dasharray:1; stroke-dashoffset:1; animation:pp-draw .38s var(--pp-ease-out) .38s forwards; }
.pp-state .pp-draw.pp-late { animation-delay:.58s; }
.pp-state .pp-bit { opacity:0; animation:pp-burst .8s var(--pp-ease-out) calc(.42s + var(--d)) both; }
.pp-state .pp-wobble { transform-origin:48px 62px; animation:pp-drop .45s var(--pp-ease-back) .3s both, pp-wobble 1.2s ease-in-out .8s 2; }
.pp-state .pp-shake { animation:pp-shake .45s ease-in-out .95s; }
.pp-state .pp-spin { transform-origin:48px 48px; animation:pp-rotate 1.6s linear infinite; }
.pp-state .pp-spin-slow { transform-origin:48px 48px; animation:pp-rotate 9.6s linear infinite; }
.pp-pending .pp-halo { animation:pp-pop .55s var(--pp-ease-back) both, pp-breathe 2.4s ease-in-out .6s infinite; }
.pp-state .pp-bob { animation:pp-pop .45s var(--pp-ease-back) .2s both, pp-bob 2.2s ease-in-out .7s infinite; transform-origin:48px 48px; }
.pp-state .pp-flap { stroke-dasharray:40; stroke-dashoffset:40; animation:pp-flap .5s var(--pp-ease-out) .5s forwards; }
.pp-tap .pp-wave { opacity:.25; animation:pp-wave 1.5s ease-in-out var(--d) infinite; }

@keyframes pp-pop { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes pp-ring { 0% { transform:scale(1); opacity:.55; } 100% { transform:scale(1.55); opacity:0; } }
@keyframes pp-draw { to { stroke-dashoffset:0; } }
@keyframes pp-burst {
  0% { transform:translate(0,0) scale(.4); opacity:0; }
  25% { opacity:1; }
  100% { transform:translate(var(--x),var(--y)) scale(1); opacity:0; }
}
@keyframes pp-drop { from { transform:translateY(-10px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes pp-wobble { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-9deg); } 75% { transform:rotate(9deg); } }
@keyframes pp-shake { 0%,100% { transform:translateX(0); } 20%,60% { transform:translateX(-5px); } 40%,80% { transform:translateX(5px); } }
@keyframes pp-rotate { to { transform:rotate(360deg); } }
@keyframes pp-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(.93); } }
@keyframes pp-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes pp-flap { to { stroke-dashoffset:0; } }
@keyframes pp-wave { 0%,100% { opacity:.25; } 35% { opacity:1; } }

/* ---------- banner con icona (ok = informazione, warn = avviso) ---------- */
.banner { position:relative; padding-left:2.9rem !important; }
.banner::before {
  content:''; position:absolute; left:1rem; top:.95rem; width:20px; height:20px;
  background:no-repeat center/20px 20px;
}
.banner.ok::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%235B2EE0'/%3E%3Cpath d='M10 9v5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6' r='1.25' fill='%23fff'/%3E%3C/svg%3E"); }
.banner.warn::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23D28E28'/%3E%3Cpath d='M10 5.5v5.5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.25' fill='%23fff'/%3E%3C/svg%3E"); }
.banner.err { background:var(--pp-error-soft); border:1px solid #F3C2C2; color:#8F0000; }
.banner.err::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23D30000'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.banner { animation:pp-fade-up .35s var(--pp-ease-out) both; }
@keyframes pp-fade-up { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ---------- pulsanti: feedback al tocco e focus visibile ---------- */
button, .btn { transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; -webkit-tap-highlight-color:transparent; }
button:active:not(:disabled) { transform:scale(.98); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--pp-primary); outline-offset:2px; }
input:focus, select:focus { border-color:var(--pp-primary); box-shadow:0 0 0 3px rgba(91,46,224,.12); outline:none; }

/* ---------- bottom sheet: maniglia e ingresso dal basso ---------- */
.modal-bg.on { animation:pp-fade .2s ease both; }
.modal-bg.on .modal { animation:pp-sheet .32s var(--pp-ease-out) both; position:relative; padding-top:1.35rem; }
.modal-bg .modal::before {
  content:''; position:absolute; top:.5rem; left:50%; width:38px; height:4px; margin-left:-19px;
  border-radius:2px; background:var(--pp-line);
}
@keyframes pp-fade { from { opacity:0; } to { opacity:1; } }
@keyframes pp-sheet { from { transform:translateY(100%); } to { transform:none; } }

/* ---------- opzioni selezionabili e card ---------- */
.opt { transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.opt:hover { border-color:#D6CBFF; }
.opt:active { transform:scale(.995); }

/* ---------- logo ---------- */
.pp-logo { display:block; height:36px; width:auto; }

@media (prefers-reduced-motion: reduce) {
  .pp-state *, .banner, .modal-bg.on, .modal-bg.on .modal { animation:none !important; }
  .pp-state .pp-draw, .pp-state .pp-flap { stroke-dashoffset:0; }
  .pp-state .pp-ring, .pp-state .pp-bit { opacity:0; }
  .pp-tap .pp-wave { opacity:1; }
}

/* =====================================================================
   Componenti DESIGN_SYSTEM.md v2 (§4)
   Valgono solo dentro un contenitore .ds (vista migrata, /ui-kit): le
   viste non ancora migrate di panel.html usano classi con lo stesso nome
   (.card, .stat, .empty, .tabbar) e non devono cambiare aspetto.
   Tema: chiaro di default; scuro con prefers-color-scheme o
   data-theme="dark" su <html> o sul contenitore .ds.
   ===================================================================== */

.ds[data-theme="light"] {
  --brand-ink:#5B2EE0; --surface:#FBFAFE; --card-from:#FFFFFF; --card-to:#FCFBFF; --card-solid:#FFFFFF;
  --text-primary:#240046; --text-secondary:#5E5878; --text-muted:#6B6585;
  --border-subtle:rgba(16,24,40,.06); --border-input:rgba(16,24,40,.14);
  --success-text:#0B7A32; --warning-text:#8A5A00; --danger-text:#B00000; --neutral-text:#4B5A70; --tint:.12;
  --yellow-text:#6B5300; --orange-text:#B03A00;
  --glass:rgba(255,255,255,.72); --glass-solid:rgba(255,255,255,.92); --glass-border:rgba(255,255,255,.6);
  --tab-active-bg:rgba(91,46,224,.10); --skeleton-base:rgba(16,24,40,.06); --skeleton-shine:rgba(255,255,255,.65);
  --shadow-card:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-card-pressed:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  --shadow-float:0 8px 32px rgba(36,0,70,.16), 0 2px 8px rgba(36,0,70,.08);
  --logo-light:block; --logo-dark:none; color-scheme:light;
}
/* ===== tokens:dark ===== */
:root[data-theme="dark"] .ds:not([data-theme="light"]), :root[data-theme="dark"] .ds-page, .ds[data-theme="dark"] {
  --brand-ink:#B9A4FF; --surface:#0F0A1C; --card-from:#1A1330; --card-to:#1A1330; --card-solid:#1A1330;
  --text-primary:#F3F0FF; --text-secondary:#ABA3C4; --text-muted:#958DB0;
  --border-subtle:rgba(255,255,255,.08); --border-input:rgba(255,255,255,.16);
  --success-text:#4ADE80; --warning-text:#F5B95A; --danger-text:#FF6B6B; --neutral-text:#ABA3C4; --tint:.16;
  --yellow-text:#FACC15; --orange-text:#FB923C;
  --glass:rgba(26,19,48,.72); --glass-solid:rgba(26,19,48,.94); --glass-border:rgba(255,255,255,.08);
  --tab-active-bg:rgba(185,164,255,.16); --skeleton-base:rgba(255,255,255,.06); --skeleton-shine:rgba(255,255,255,.10);
  --shadow-card:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.24);
  --shadow-card-pressed:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.20);
  --shadow-float:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --logo-light:none; --logo-dark:block; color-scheme:dark;
}
/* ===== tokens:end ===== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ds:not([data-theme="light"]), :root:not([data-theme="light"]) .ds-page {
    --brand-ink:#B9A4FF; --surface:#0F0A1C; --card-from:#1A1330; --card-to:#1A1330; --card-solid:#1A1330;
    --text-primary:#F3F0FF; --text-secondary:#ABA3C4; --text-muted:#958DB0;
    --border-subtle:rgba(255,255,255,.08); --border-input:rgba(255,255,255,.16);
    --success-text:#4ADE80; --warning-text:#F5B95A; --danger-text:#FF6B6B; --neutral-text:#ABA3C4; --tint:.16;
  --yellow-text:#FACC15; --orange-text:#FB923C;
    --glass:rgba(26,19,48,.72); --glass-solid:rgba(26,19,48,.94); --glass-border:rgba(255,255,255,.08);
    --tab-active-bg:rgba(185,164,255,.16); --skeleton-base:rgba(255,255,255,.06); --skeleton-shine:rgba(255,255,255,.10);
    --shadow-card:0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.24);
    --shadow-card-pressed:0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.20);
    --shadow-float:0 8px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
    --logo-light:none; --logo-dark:block; color-scheme:dark;
  }
}

/* ---------- base ---------- */
/* token composti: ridefiniti su ogni .ds perché var() si risolve dove è
   dichiarata, e a :root prenderebbe sempre i colori del tema chiaro */
.ds { --card:linear-gradient(180deg, var(--card-from), var(--card-to)); --ring-gap:var(--card-solid); }
.ds { background:var(--surface); color:var(--text-primary); font-family:var(--font); letter-spacing:var(--tracking);
  font-size:var(--fs-body); line-height:1.45; -webkit-font-smoothing:antialiased; }
.ds *, .ds *::before, .ds *::after { box-sizing:border-box; }
.ds .num, .ds .stat__value, .ds .list-row__value { font-variant-numeric:tabular-nums; }
.ds :focus-visible { outline:2px solid var(--brand-ink); outline-offset:2px; }
.ds .ico { width:var(--icon); height:var(--icon); flex:none; stroke:currentColor; fill:none;
  stroke-width:var(--stroke); stroke-linecap:round; stroke-linejoin:round; }
.ds .ico--sm { width:var(--icon-sm); height:var(--icon-sm); }
.ds .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* pagina: margini uguali ovunque, spazio sotto per la TabBar flottante.
   Il guscio Expo applica solo gli inset top/lati (App.tsx, SafeAreaView
   edges top/left/right): nella WebView env(top) vale 0, env(bottom) è
   l'indicatore home. Nessun doppio padding. */
.ds .page { padding:max(var(--space-4), env(safe-area-inset-top)) max(var(--page-pad), env(safe-area-inset-right))
  calc(var(--page-bottom) + env(safe-area-inset-bottom)) max(var(--page-pad), env(safe-area-inset-left)); }
.ds .stack { display:grid; gap:var(--card-gap); }
.ds .section { margin-top:var(--section-gap); }

/* ---------- PageHeader / SectionHeader ---------- */
.ds .page-header { position:relative; display:flex; align-items:flex-end; gap:var(--space-3); margin-bottom:var(--space-6); }
.ds .page-header__logo { display:var(--logo-light, block); height:var(--logo-h); width:auto; margin-bottom:var(--space-5); }
.ds .page-header__logo--dark { display:var(--logo-dark, none); }
.ds .page-header__text { flex:1; min-width:0; }
.ds .page-header__title { margin:0; font-size:var(--fs-page); font-weight:var(--fw-bold); line-height:1.15; color:var(--text-primary); }
.ds .page-header__sub { margin:var(--space-1) 0 0; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--text-secondary); }
.ds .page-header__action { flex:none; }
.ds .page-header__action--top { position:absolute; top:calc((var(--logo-h) - var(--tap)) / 2); right:0; }
.ds .section-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin:0 0 var(--space-3); min-height:var(--tap); }
.ds .section-header__title { margin:0; font-size:var(--fs-section); font-weight:var(--fw-semibold); color:var(--text-primary); }
.ds .section-header__sub { margin:calc(-1 * var(--space-2)) 0 var(--space-3); font-size:var(--fs-label); color:var(--text-secondary); }

/* ---------- Card / StatTile ---------- */
.ds .card { margin:0; background:var(--card); border:1px solid var(--border-subtle); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); padding:var(--space-4) var(--space-5); color:var(--text-primary); }
.ds .stat-grid { display:grid; gap:var(--card-gap); grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:1fr; }
.ds .stat-grid--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-2); }
.ds .stat { position:relative; display:flex; flex-direction:column; gap:var(--space-1); min-width:0; height:100%;
  background:var(--card); border:1px solid var(--border-subtle); border-radius:var(--radius-tile);
  box-shadow:var(--shadow-card); padding:var(--space-4); color:var(--text-primary); text-align:left;
  font:inherit; text-decoration:none; }
.ds .stat__label { font-size:var(--fs-label-sm); font-weight:var(--fw-medium); color:var(--text-secondary); line-height:1.3; }
.ds .stat__value { font-size:var(--fs-value); font-weight:var(--fw-semibold); letter-spacing:-0.02em; line-height:1.15; margin-top:auto;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds .stat { container-type:inline-size; }
/* il valore si restringe solo se non entra: --len = numero di caratteri (da ui.statTile) */
.ds .stat__value { font-size:clamp(var(--fs-label), calc(100cqi / (var(--len, 8) * .52)), var(--fs-value)); }
.ds .stat__meta { font-size:var(--fs-caption); font-weight:var(--fw-medium); color:var(--text-muted); }
.ds .stat .icon-box { margin-bottom:var(--space-2); }
.ds .stat__chev { position:absolute; top:var(--space-4); right:var(--space-3); color:var(--text-muted); }
.ds a.stat, .ds button.stat { cursor:pointer; transition:transform var(--dur-tap) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ds a.stat:active, .ds button.stat:active { transform:translateY(1px); box-shadow:var(--shadow-card-pressed); }
/* tile compatte (3 colonne): servono anche da segmented control */
.ds .stat--compact { padding:var(--space-3); border-radius:var(--radius-tile); }
.ds .stat--compact .stat__value { display:flex; align-items:center; gap:var(--space-1); font-size:var(--fs-section); }
.ds .stat--compact .stat__label { font-size:var(--fs-caption); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds .stat[aria-pressed="true"] { border-color:currentColor; box-shadow:var(--shadow-card), inset 0 0 0 1px currentColor; }
.ds .stat--success { --tone:var(--success-text); } .ds .stat--warning { --tone:var(--warning-text); }
.ds .stat--neutral { --tone:var(--neutral-text); } .ds .stat--danger { --tone:var(--danger-text); }
.ds .stat[class*="stat--"] .stat__value { color:var(--tone, var(--text-primary)); }
.ds .stat[aria-pressed="true"][class*="stat--"] { color:var(--tone); }
.ds .stat[aria-pressed] .stat__label { color:var(--text-secondary); }

.ds .icon-box { display:inline-flex; align-items:center; justify-content:center; width:var(--icon-box); height:var(--icon-box);
  flex:none; border-radius:var(--radius-icon-box); color:var(--brand-ink);
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.15), rgba(var(--brand-rgb),.05)); box-shadow:var(--glow-brand); }

/* ---------- ListCard / ListRow ---------- */
.ds .list-card { background:var(--card); border:1px solid var(--border-subtle); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); overflow:hidden; margin:0; padding:0; list-style:none; }
.ds .list-row { display:flex; align-items:center; gap:var(--space-3); min-height:var(--row-min); width:100%;
  padding:var(--space-3) var(--space-4); background:none; border:0; color:var(--text-primary);
  font:inherit; text-align:left; text-decoration:none; }
.ds .list-card > li + li .list-row, .ds .list-card > .list-row + .list-row { border-top:1px solid var(--border-subtle); }
.ds a.list-row, .ds button.list-row { cursor:pointer; transition:background-color var(--dur) var(--ease-out); }
.ds a.list-row:active, .ds button.list-row:active { background:rgba(var(--brand-rgb),.06); }
.ds .list-row__main { flex:1; min-width:0; }
.ds .list-row__title { font-size:var(--fs-body); font-weight:var(--fw-semibold); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }
.ds .list-row__sub { display:block; margin-top:2px; font-size:var(--fs-label-sm); font-weight:var(--fw-medium); color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds .list-row__end { flex:none; display:flex; align-items:center; gap:var(--space-2); }
.ds .list-row__end-stack { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); }
.ds .list-row__value { font-size:var(--fs-body); font-weight:var(--fw-semibold); white-space:nowrap; }
.ds .list-row__chev { color:var(--text-muted); }
.ds .list-row__head { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.ds .list-row__head .list-row__title { min-width:0; }
.ds .list-row__trail { flex:none; display:flex; align-items:center; margin-right:calc(-1 * var(--space-2)); }
.ds .list-row.is-off .list-row__title { color:var(--text-secondary); }

/* ---------- Avatar ---------- */
.ds .avatar { --size:var(--avatar-md); position:relative; flex:none; width:var(--size); height:var(--size);
  border-radius:50%; padding:2px; background:var(--ring-gradient); }
.ds .avatar--sm { --size:var(--avatar-sm); } .ds .avatar--lg { --size:var(--avatar-lg); }
.ds .avatar__inner { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%;
  border:2px solid var(--ring-gap); overflow:hidden; color:var(--on-brand); font-weight:var(--fw-semibold);
  font-size:calc(var(--size) * .36); letter-spacing:0; background:linear-gradient(135deg, var(--av)); }
.ds .avatar__inner img { width:100%; height:100%; object-fit:cover; display:block; }
.ds .avatar[data-av="1"] { --av:var(--av-1); } .ds .avatar[data-av="2"] { --av:var(--av-2); }
.ds .avatar[data-av="3"] { --av:var(--av-3); } .ds .avatar[data-av="4"] { --av:var(--av-4); }
.ds .avatar[data-av="5"] { --av:var(--av-5); } .ds .avatar[data-av="6"] { --av:var(--av-6); }
.ds .avatar__dot { position:absolute; right:0; bottom:0; width:var(--status-dot); height:var(--status-dot); border-radius:50%;
  border:2px solid var(--ring-gap); box-sizing:content-box; background:var(--neutral); }
.ds .avatar__dot--success { background:var(--success); } .ds .avatar__dot--warning { background:var(--warning); }
.ds .avatar__dot--danger { background:var(--danger); }

/* ---------- Bottoni ---------- */
.ds .btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); position:relative;
  min-height:var(--btn-h); padding:0 var(--space-5); border:0; border-radius:var(--radius-button);
  font:inherit; font-size:var(--fs-body); font-weight:var(--fw-semibold); letter-spacing:var(--tracking);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform var(--dur-tap) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.ds .btn:active:not(:disabled) { transform:scale(.98); }
.ds .btn--block { display:flex; width:100%; }
.ds .btn--primary { background:var(--brand-gradient); color:var(--on-brand); box-shadow:var(--shadow-cta), var(--cta-highlight); }
.ds .btn--tonal { background:rgba(var(--brand-rgb), var(--tonal)); color:var(--brand-ink); }
.ds .btn--text { background:none; color:var(--brand-ink); min-height:var(--tap); padding:0 var(--space-3); }
.ds .btn--destructive { background:var(--danger); color:var(--on-brand); }
.ds .btn--text.btn--destructive { background:none; color:var(--danger-text); }
.ds .btn--sm { min-height:var(--tap); padding:0 var(--space-4); font-size:var(--fs-label); }
.ds .btn:disabled { opacity:.5; box-shadow:none; cursor:default; }
.ds .btn.is-loading { color:transparent; pointer-events:none; }
.ds .btn.is-loading::after { content:''; position:absolute; left:50%; top:50%; width:var(--icon); height:var(--icon);
  margin:calc(var(--icon) / -2) 0 0 calc(var(--icon) / -2); border-radius:50%;
  border:2px solid currentColor; border-color:var(--spin, var(--on-brand)) transparent var(--spin, var(--on-brand)) var(--spin, var(--on-brand));
  animation:pp-rotate .8s linear infinite; }
.ds .btn--tonal.is-loading, .ds .btn--text.is-loading { --spin:var(--brand-ink); }
.ds .btn-icon { display:inline-flex; align-items:center; justify-content:center; width:var(--tap); height:var(--tap);
  border:0; border-radius:var(--radius-pill); background:rgba(var(--brand-rgb), var(--tonal)); color:var(--brand-ink); cursor:pointer; }
.ds .btn-icon--quiet { background:none; color:var(--text-muted); }

/* ---------- Chip ---------- */
.ds .chip { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); height:var(--chip-h);
  padding:0 var(--space-3); border-radius:var(--radius-pill); font-size:var(--fs-caption); font-weight:var(--fw-semibold);
  letter-spacing:0; white-space:nowrap; flex:none;
  --c:var(--neutral-rgb); --t:var(--neutral-text); --dc:var(--neutral);
  background:rgba(var(--c), var(--tint)); color:var(--t); }
.ds .chip::before { content:''; width:var(--dot); height:var(--dot); border-radius:50%; background:var(--dc); flex:none; }
.ds .chip--fixed { min-width:var(--chip-w); }
.ds .chip--success { --c:var(--success-rgb); --t:var(--success-text); --dc:var(--success); }
.ds .chip--warning { --c:var(--warning-rgb); --t:var(--warning-text); --dc:var(--warning); }
.ds .chip--danger { --c:var(--danger-rgb); --t:var(--danger-text); --dc:var(--danger); }
.ds .chip--yellow { --c:var(--yellow-rgb); --t:var(--yellow-text); --dc:var(--yellow); }
.ds .chip--orange { --c:var(--orange-rgb); --t:var(--orange-text); --dc:var(--orange); }
.ds .chip--brand { --c:var(--brand-rgb); --t:var(--brand-ink); --dc:var(--brand); }
.ds .chip--count::before { content:none; }

/* ---------- SearchField ---------- */
.ds .search { position:relative; display:flex; align-items:center; }
.ds .search > .ico { position:absolute; left:var(--space-4); color:var(--text-muted); pointer-events:none; }
.ds .search__input { width:100%; height:var(--search-h); padding:0 var(--search-h) 0 calc(var(--space-4) + var(--icon) + var(--space-2));
  border:1px solid var(--border-input); border-radius:var(--radius-input); background:var(--card-solid);
  color:var(--text-primary); font:inherit; font-size:var(--fs-body); letter-spacing:var(--tracking); -webkit-appearance:none; appearance:none; }
.ds .search__input::placeholder { color:var(--text-muted); }
.ds .search__input:focus { outline:none; border-color:var(--brand); box-shadow:var(--focus-ring); }
.ds .search__input::-webkit-search-cancel-button { -webkit-appearance:none; }
.ds .search__clear { position:absolute; right:var(--space-1); display:none; align-items:center; justify-content:center;
  width:var(--tap); height:var(--tap); border:0; background:none; color:var(--text-muted); cursor:pointer; border-radius:var(--radius-pill); }
.ds .search.has-value .search__clear { display:inline-flex; }

/* ---------- Stati: vuoto, caricamento, errore ---------- */
.ds .empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2);
  padding:var(--space-8) var(--space-5); color:var(--text-primary); }
.ds .empty .pp-state { margin-bottom:var(--space-2); }
.ds .empty .icon-box { margin-bottom:var(--space-2); }
.ds .empty__title { margin:0; font-size:var(--fs-body); font-weight:var(--fw-semibold); }
.ds .empty__text { margin:0; max-width:30ch; font-size:var(--fs-label); color:var(--text-secondary); }
.ds .empty .btn { margin-top:var(--space-3); }
.ds .error-state { display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--space-2); padding:var(--space-6) var(--space-5); }
.ds .error-state .icon-box { color:var(--danger-text); background:rgba(var(--danger-rgb), var(--tint)); box-shadow:none; }
.ds .error-state__title { margin:0; font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--danger-text); }
.ds .error-state__text { margin:0; font-size:var(--fs-label); color:var(--text-secondary); }
.ds .skeleton { position:relative; overflow:hidden; background:var(--skeleton-base); border-radius:var(--radius-icon-box); }
.ds .skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation:ds-shimmer 1.4s ease-in-out infinite; }
.ds .skeleton--line { height:var(--sk-line); border-radius:var(--radius-pill); }
.ds .skeleton--line-lg { height:var(--sk-line-lg); border-radius:var(--radius-pill); }
.ds .skeleton--circle { border-radius:50%; width:var(--avatar-md); height:var(--avatar-md); flex:none; }
.ds .skeleton--icon { width:var(--icon-box); height:var(--icon-box); flex:none; margin-bottom:var(--space-2); }
.ds .skeleton--chip { width:var(--chip-w); height:var(--chip-h); border-radius:var(--radius-pill); flex:none; }
.ds .skeleton--value { width:60%; height:var(--sk-value); margin-top:auto; border-radius:var(--radius-pill); }
.ds .list-row__main .skeleton { display:block; }
.ds .list-row__main .skeleton + .skeleton { margin-top:var(--space-2); }
.ds .w-40 { width:40%; } .ds .w-60 { width:60%; } .ds .w-80 { width:80%; }
@keyframes ds-shimmer { to { transform:translateX(100%); } }

/* entrata liste: fade + 8px con stagger (variabile --i per elemento) */
.ds .enter { animation:ds-enter var(--dur-slow) var(--ease-out) both; animation-delay:calc(var(--i, 0) * var(--stagger)); }
@keyframes ds-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- TabBar (floating glass) ---------- */
.ds .tabbar, .tabbar.ds { position:fixed; z-index:50; left:var(--space-4); right:var(--space-4);
  bottom:max(var(--space-3), env(safe-area-inset-bottom)); height:var(--tabbar-h); padding:var(--space-1);
  display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); border-radius:var(--radius-tabbar);
  background:var(--glass-solid); border:1px solid var(--glass-border); box-shadow:var(--shadow-float); }
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .ds .tabbar, .tabbar.ds { background:var(--glass); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); }
}
.ds .tabbar__indicator { position:absolute; top:var(--space-1); bottom:var(--space-1); left:var(--space-1);
  width:calc((100% - 2 * var(--space-1)) / var(--n, 5)); border-radius:var(--radius-tab); background:var(--tab-active-bg);
  transform:translateX(calc(var(--i, 0) * 100%)); transition:transform var(--dur) var(--ease-out); pointer-events:none; }
.ds .tabbar__item { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:0; border-radius:var(--radius-tab); color:var(--text-muted); text-decoration:none;
  font-size:var(--fs-caption); font-weight:var(--fw-medium); letter-spacing:0;
  transition:transform var(--dur-tap) var(--ease-out), color var(--dur) var(--ease-out); -webkit-tap-highlight-color:transparent; }
.ds .tabbar__item:active { transform:scale(.96); }
.ds .tabbar__item[aria-current="page"] { color:var(--brand-ink); font-weight:var(--fw-bold); }
.ds .tabbar__item[aria-current="page"] .ico { fill:rgba(var(--brand-rgb),.18); }
.ds .tabbar__label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .ds .skeleton::after { animation:none; }
}

/* =====================================================================
   Pannello coach (panel.html): impaginazione delle viste migrate
   body.ds-page è attivo solo mentre è aperta una vista migrata: porta il
   fondo e il tema scuro fino ai bordi; le viste legacy restano chiare.
   ===================================================================== */
body.ds-page { background:var(--surface); }
.ds-page .top { display:none; }
/* banner legacy (stato verifica Stripe) dentro una vista migrata: testo leggibile anche in scuro */
.ds .banner { color:var(--pp-text); margin-bottom:var(--space-5); }
.ds .banner.ok { color:var(--banner-ok-text); }
.ds .banner.err { color:var(--banner-err-text); }
.ds .cta-bottom { margin-top:var(--section-gap); }
/* azione principale in cima alla vista, sempre visibile mentre la lista scorre */
.ds .cta-top { position:sticky; top:0; z-index:5; margin:calc(-1 * var(--space-3)) 0 var(--space-5);
  padding:var(--space-3) 0; background:var(--surface); }
.ds .search-wrap { margin-bottom:var(--space-4); }
/* bottom sheet migrato (.modal.ds): stessi token delle viste, anche in tema scuro */
.modal.ds { background:var(--card-solid); color:var(--text-primary); max-height:85vh; }
.modal.ds::before { background:var(--border-input); }
.ds .sheet-body { overflow-y:auto; margin:0 calc(-1 * var(--space-1)); padding:0 var(--space-1) var(--space-2); }
.ds .sheet-head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.ds .sheet-head__text { flex:1; min-width:0; }
.ds .sheet-head__title { margin:0; font-size:var(--fs-section); font-weight:var(--fw-semibold); color:var(--text-primary); overflow-wrap:break-word; }
.ds .sheet-head__sub { margin:var(--space-1) 0 0; font-size:var(--fs-label); color:var(--text-secondary); overflow-wrap:anywhere; }
.ds .sheet-note { margin:var(--space-3) 0 0; font-size:var(--fs-label); color:var(--text-secondary); }
.ds .sheet-note--lead { margin:0 0 var(--space-4); font-size:var(--fs-body); }
.ds .sheet-error { margin:var(--space-2) 0 0; min-height:1.2em; font-size:var(--fs-label); color:var(--danger-text); }
.ds .sheet-error:empty { min-height:0; }
.ds .sheet-actions { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-5); }
/* seconda riga che va a capo sotto il sottotitolo (es. il motivo di un'eliminazione) */
.ds .list-row__more { display:block; margin-top:var(--space-1); font-size:var(--fs-label); color:var(--text-secondary); overflow-wrap:anywhere; white-space:normal; }
/* scelta singola in un elenco (motivi): riga intera toccabile, ≥ 44px */
.ds .choices { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.ds .choices__legend { padding:0; margin-bottom:var(--space-2); font-weight:var(--fw-semibold); color:var(--text-primary); }
.ds .choice { display:flex; align-items:center; gap:var(--space-3); min-height:var(--tap); padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-input); border-radius:var(--radius-input); background:var(--card-solid); color:var(--text-primary); cursor:pointer; }
.ds .choice input { width:20px; height:20px; margin:0; accent-color:var(--brand); flex:none; }
.ds .choice:has(input:checked) { border-color:var(--brand); background:rgba(var(--brand-rgb), var(--tonal)); }
.ds .field-wrap { margin-top:var(--space-3); }
.ds .textarea { display:block; width:100%; min-height:88px; padding:var(--space-3) var(--space-4); border:1px solid var(--border-input);
  border-radius:var(--radius-input); background:var(--card-solid); color:var(--text-primary); font:inherit; resize:vertical; }
.ds .list-row__note { font-size:var(--fs-label); color:var(--text-secondary); white-space:nowrap; }
/* tappe di un bonifico: preparato → partito → sul conto */
.ds .steps { list-style:none; margin:0 0 var(--space-5); padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-2); }
.ds .steps__item { position:relative; display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--fs-label); color:var(--text-secondary); }
.ds .steps__dot { display:block; height:4px; border-radius:2px; background:var(--border-input); }
.ds .steps__item.is-done .steps__dot { background:var(--brand); }
.ds .steps__item.is-current { color:var(--text-primary); font-weight:var(--fw-semibold); }
.ds .list-more { display:flex; justify-content:center; margin-top:var(--space-2); }

/* ---------- InfoRow: dato con etichetta (Profilo) ---------- */
.ds .info-row { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4);
  min-height:var(--row-min); padding:var(--space-3) var(--space-4); }
.ds .list-card > li + li .info-row { border-top:1px solid var(--border-subtle); }
.ds .info-row__label { flex:none; max-width:48%; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--text-secondary); line-height:1.35; }
.ds .info-row__note { display:block; font-size:var(--fs-caption); color:var(--text-muted); }
.ds .info-row__value { min-width:0; text-align:right; font-size:var(--fs-body); font-weight:var(--fw-semibold); line-height:1.35;
  color:var(--text-primary); overflow-wrap:anywhere; }
.ds .info-row__value a, .ds .link { color:var(--brand-ink); font-weight:var(--fw-semibold); text-decoration:none; }
.ds .info-row__value a, .ds .link { display:inline-flex; align-items:center; min-height:var(--tap); }

/* ---------- Field: etichetta + campo (input o select) ---------- */
.ds .field { display:grid; gap:var(--space-2); }
.ds .field__label { font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--text-primary); }
.ds .field__control { position:relative; display:flex; align-items:center; }
.ds .field__input { width:100%; height:var(--search-h); padding:0 var(--space-4); border:1px solid var(--border-input);
  border-radius:var(--radius-input); background:var(--card-solid); color:var(--text-primary);
  font:inherit; font-size:var(--fs-body); letter-spacing:var(--tracking); -webkit-appearance:none; appearance:none; }
.ds .field__input::placeholder { color:var(--text-muted); }
.ds .field__input:focus { outline:none; border-color:var(--brand); box-shadow:var(--focus-ring); }
.ds select.field__input { padding-right:calc(var(--space-4) * 2 + var(--icon-sm)); cursor:pointer; }
.ds .field__input--multi { height:auto; min-height:calc(var(--search-h) * 2); padding:var(--space-3) var(--space-4); line-height:1.5; resize:vertical; }
.ds .field__chev { position:absolute; right:var(--space-4); color:var(--text-muted); transform:rotate(90deg); pointer-events:none; }
.ds .field__error { min-height:1.4em; margin:0; font-size:var(--fs-label); font-weight:var(--fw-medium); color:var(--danger-text); }

/* testo di spiegazione sotto una card o in un modulo */
.ds .note { margin:var(--space-3) 0 0; font-size:var(--fs-label); color:var(--text-secondary); line-height:1.5; }
.ds .note strong { color:var(--text-primary); font-weight:var(--fw-semibold); }
.ds .section-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.ds .page-end { display:flex; justify-content:center; margin-top:var(--section-gap); }

/* ---------- Pagine di accesso (login) ---------- */
body.ds { margin:0; }
.ds .auth { max-width:26rem; margin:0 auto; padding-top:max(var(--space-10), env(safe-area-inset-top)); padding-bottom:var(--space-10); }
.ds .auth form { display:grid; gap:var(--space-4); }
.ds .auth [hidden] { display:none; }
.ds .auth .note { text-align:center; margin-top:var(--space-6); }
/* inserimento del codice a 6 cifre (code-entry.js): sulle pagine .ds prende i token */
.ds .ce-title { font-size:var(--fs-section); font-weight:var(--fw-semibold); color:var(--text-primary); }
.ds .ce-p, .ds .ce-note { color:var(--text-secondary); font-size:var(--fs-label); }
.ds .ce-p strong { color:var(--text-primary); }
.ds .ce-code { height:auto; font-size:var(--fs-page); font-weight:var(--fw-bold); letter-spacing:var(--code-tracking); text-align:center; border:1px solid var(--border-input); border-radius:var(--radius-input); background:var(--card-solid);
  color:var(--text-primary); padding:var(--space-3) var(--space-2); }
.ds .ce-code:focus { outline:none; border-color:var(--brand); box-shadow:var(--focus-ring); }
.ds .ce-err { color:var(--danger-text); font-size:var(--fs-label); }
.ds .ce-note a, .ds .ce-link { display:inline-flex; align-items:center; min-height:var(--tap); color:var(--brand-ink); }
.ds .ce-dev { background:rgba(var(--brand-rgb), var(--tonal)); border:1px solid var(--border-subtle); border-radius:var(--radius-icon-box);
  color:var(--text-primary); }
.ds .ce-art { display:flex; justify-content:center; }

/* ---------- Telefono: prefisso del paese + numero (public/ds/phone.js) ----------
   Il selettore nativo è trasparente sopra l'etichetta "+39": al tocco si apre
   la lista completa dei paesi, a riposo si vede solo il prefisso. Stesso
   aspetto dei campi accanto (legacy nelle modali, token v2 nelle viste .ds). */
.phone { display:flex; gap:var(--space-2); }
.phone > input { flex:1; min-width:0; }
.phone__cc { position:relative; flex:none; display:flex; align-items:center; gap:var(--space-1);
  padding:0 var(--space-3); border:1px solid var(--pp-line); border-radius:var(--pp-radius-s);
  background:var(--pp-surface); color:var(--pp-text); font-weight:var(--fw-semibold); }
.phone__cc select { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.phone__cc:focus-within { border-color:var(--pp-primary); box-shadow:var(--focus-ring); }
.phone__chev { width:var(--icon-sm); height:var(--icon-sm); fill:none; stroke:currentColor; stroke-width:2; color:var(--pp-muted); }
.ds .phone__cc { border-color:var(--border-input); border-radius:var(--radius-input); background:var(--card-solid); color:var(--text-primary); }
.ds .phone > input { height:var(--search-h); }

/* WhatsApp: il pulsante principale della consegna via link */
.btn-wa { display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%;
  min-height:var(--btn-h); border-radius:var(--pp-radius-s); background:var(--pp-gradient); color:var(--on-brand);
  font-weight:var(--fw-semibold); text-decoration:none; }
.btn-wa svg { width:var(--icon); height:var(--icon); fill:none; stroke:currentColor; stroke-width:var(--stroke); stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* Scegli dalla rubrica (solo nell'app): in cima al modulo del cliente */
.contact-pick { display:block; width:100%; margin-top:var(--space-2); }

/* ---------- Notifiche a tutto schermo (onboarding, panel.html showPushGate) ---------- */
.push-gate { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + var(--space-8)) var(--page-pad) calc(env(safe-area-inset-bottom) + var(--space-6));
  background:var(--surface); overflow-y:auto; }
.push-gate[hidden] { display:none; }
body.push-gate-on { overflow:hidden; }
.push-gate__body { max-width:26rem; margin:0 auto; width:100%; }
.push-gate__phone { display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-4) 0 var(--space-8);
  padding:var(--space-4); border-radius:var(--radius-card); background:var(--brand-gradient); box-shadow:var(--shadow-cta); }
.push-gate__note { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3); border-radius:var(--radius-tile);
  background:var(--card-solid); color:var(--text-primary); box-shadow:var(--shadow-card); animation:push-gate-in .5s var(--ease-out) both; }
.push-gate__note + .push-gate__note { animation-delay:.25s; }
.push-gate__note strong { display:block; font-size:var(--fs-label); font-weight:var(--fw-semibold); }
.push-gate__note small { display:block; font-size:var(--fs-caption); color:var(--text-secondary); }
.push-gate__app { width:36px; height:36px; border-radius:9px; flex:none; }
.push-gate__title { margin:0 0 var(--space-3); font-size:var(--fs-page); font-weight:var(--fw-bold); line-height:1.15; color:var(--text-primary); }
.push-gate__text { margin:0 0 var(--space-3); font-size:var(--fs-body); line-height:1.5; color:var(--text-secondary); }
.push-gate__text strong { color:var(--text-primary); font-weight:var(--fw-semibold); }
.push-gate__text--muted { color:var(--text-muted); font-size:var(--fs-caption); }
.push-gate__actions { max-width:26rem; margin:var(--space-6) auto 0; width:100%; display:flex; flex-direction:column; gap:var(--space-2); }
@keyframes push-gate-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .push-gate__note { animation:none; } }

/* ---------- Attesa a tutto schermo (ds/loader.js) ---------- */
.pp-loader { position:fixed; inset:0; z-index:210; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + var(--space-8)) var(--page-pad) calc(env(safe-area-inset-bottom) + var(--space-6));
  background:var(--surface); text-align:center; }
.pp-loader[hidden] { display:none; }
body.pp-loader-on { overflow:hidden; }
.pp-loader__mark { position:relative; width:96px; height:96px; margin-bottom:var(--space-6); display:flex; align-items:center; justify-content:center; }
.pp-loader__mark img { display:var(--logo-light, block); width:56px; height:56px; animation:pp-loader-beat 1.6s var(--ease-out) infinite; }
.pp-loader__mark img.pp-loader__dark { display:var(--logo-dark, none); }
.pp-loader__ring { position:absolute; inset:0; border-radius:50%; border:3px solid rgba(var(--brand-rgb), .15);
  border-top-color:var(--pp-primary); animation:pp-loader-spin 1s linear infinite; }
.pp-loader__title { margin:0 0 var(--space-2); max-width:22rem; font-size:var(--fs-section); font-weight:var(--fw-bold); color:var(--text-primary); line-height:1.2; }
.pp-loader__text { margin:0; max-width:22rem; font-size:var(--fs-body); line-height:1.5; color:var(--text-secondary); }
.pp-loader__action { margin-top:var(--space-6); width:100%; max-width:22rem; }
@keyframes pp-loader-spin { to { transform:rotate(360deg); } }
@keyframes pp-loader-beat { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .pp-loader__mark img, .pp-loader__ring { animation:none; } }

/* campo sito: Instagram (prefisso fisso + username) oppure sito web */
.web-kind { display:flex; gap:var(--space-2); margin:.3rem 0 .4rem; }
.web-kind button { flex:1; height:36px; border:1px solid var(--pp-line); border-radius:10px; background:var(--pp-surface);
  color:var(--pp-muted); font:inherit; font-weight:600; font-size:.88rem; cursor:pointer; }
.web-kind button.on { border-color:var(--pp-primary); color:var(--pp-primary); background:var(--pp-primary-soft); }
.web-ig { display:flex; align-items:stretch; }
.web-ig__prefix { display:flex; align-items:center; padding:0 .6rem 0 .75rem; border:1px solid var(--pp-line); border-right:0;
  border-radius:10px 0 0 10px; background:var(--pp-bg); color:var(--pp-muted); font-weight:600; white-space:nowrap; }
.web-ig input { border-radius:0 10px 10px 0 !important; min-width:0; flex:1; }