/* ==========================================================================
   FHED — Demo interattiva
   Tutto ciò che sta dentro il telefono usa il prefisso .ph- per non
   collidere con gli effetti globali di main.js (tilt su .card, magnete su
   .btn, smooth scroll su a[href^="#"]) né con i selettori di elemento di
   style.css. Colori campionati dalle schermate reali dell'app.
   ========================================================================== */

:root{
  --ph-navy:    #2e4278;
  --ph-navy-2:  #3251ac;
  --ph-navy-3:  #4b6bbf;
  --ph-ink:     #1a1b1f;
  --ph-text:    #212835;
  --ph-grey:    #6c727f;
  --ph-grey-2:  #9aa0ab;
  --ph-line:    #e8eaee;
  --ph-field:   #e3e6eb;
  --ph-bg:      #f8f8fa;
  --ph-chip:    #eaecf2;
  --ph-soft:    #ebf0fa;
  --ph-soft-bd: #ccd8ee;
  --ph-ok-bg:   #f0fdf6;
  --ph-ok-bd:   #b8f1d2;
  --ph-ok:      #42946c;
  --ph-ok-txt:  #285d47;
  --ph-warn-bg: #fdf4e4;
  --ph-warn:    #c7851f;
  --ph-red:     #e5484d;
  --ph-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Pagina ---------- */
.demo-section{ padding-top: clamp(6.5rem, 9vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.demo-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 5rem);
  grid-template-areas: "intro phone" "panel phone"; align-items:start;
  /* La seconda riga assorbe lo spazio: titolo e pannello restano fermi
     anche quando il testo del pannello cambia altezza tra un passo e l'altro. */
  grid-template-rows: auto 1fr;
}
.demo-intro-head{ grid-area: intro; padding-top: clamp(0rem, 4vw, 3.5rem); }
.demo-phone-col{ grid-area: phone; }
.demo-panel{ grid-area: panel; }
.demo-intro h1{ font-size: clamp(2.1rem, 4vw, 3.2rem); }
.demo-intro .lead{ margin-top: 1rem; max-width: 520px; }
.demo-cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.demo-cta span{ font-size:.92rem; color: var(--ink-soft); }
.demo-cta.done{ display:none; }

/* Il bagliore che segue il mouse (main.js) sta sopra la pagina: sul telefono lo spegne. */
body.ph-over .cursor-glow{ opacity:0 !important; }

.demo-panel{
  margin-top: 2.2rem; background: var(--white); border:1px solid var(--line);
  border-radius: var(--radius-md); padding: 1.8rem; box-shadow: var(--shadow-md);
  max-width: 520px;
}
.demo-step-label{
  font-family: var(--ff-head); font-weight:700; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--primary);
}
.demo-step-title{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-top:.5rem; }
.demo-step-text{ margin-top:.7rem; min-height: 3.2em; }
.demo-tip[hidden]{ display:none; }
.demo-tip{ margin-top:.9rem; font-size:.88rem; color: var(--ink-soft); display:flex; gap:.5rem; align-items:center; }
.demo-tip i{ width:10px; height:10px; border-radius:50%; background: var(--ph-navy); flex-shrink:0;
  box-shadow: 0 0 0 4px hsl(224 45% 33% / .18); }

.demo-dots{ display:flex; gap:.4rem; margin-top:1.5rem; flex-wrap:wrap; }
.demo-dots button{
  width:26px; height:6px; border-radius:99px; background: var(--line);
  transition: background .25s, width .25s;
}
.demo-dots button:hover{ background: var(--primary-light); }
.demo-dots button[aria-current="step"]{ background: var(--primary); width:38px; }
.demo-dots button.done{ background: var(--primary-light); }

.demo-actions{ display:flex; gap:.7rem; margin-top:1.5rem; flex-wrap:wrap; }
.demo-actions .btn{ padding:.8rem 1.5rem; font-size:.9rem; }
.demo-actions .btn[disabled]{ opacity:.4; pointer-events:none; }

.demo-end{
  display:none; margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.demo-end.show{ display:block; }
.demo-end p{ font-size:.95rem; }
.demo-end .btn{ margin-top:1rem; }

.demo-note{ margin-top:1rem; font-size:.8rem; color: var(--ink-soft); text-align:center; max-width: 414px; }

/* ---------- Telefono ---------- */
.ph-stage{ position:relative; margin-inline:auto; }
.phone{
  position:absolute; top:0; left:0; transform-origin: top left;
  width:414px; height:868px; border-radius:64px; padding:12px;
  background: linear-gradient(145deg, #2b2f38, #0e1014 55%, #23262d);
  box-shadow:
    0 0 0 1.5px #3a3f4a inset,
    0 40px 80px hsl(222 40% 15% / .28),
    0 12px 30px hsl(222 40% 15% / .18);
}
.phone::before, .phone::after{ /* tasti laterali */
  content:''; position:absolute; width:3px; border-radius:2px; background:#1c1f25;
}
.phone::before{ left:-3px; top:170px; height:62px; box-shadow: 0 86px 0 #1c1f25; }
.phone::after{ right:-3px; top:220px; height:96px; }

.ph-screen-wrap{
  position:relative; width:390px; height:844px; border-radius:52px; overflow:hidden;
  background:#000; font-family: var(--ph-font); color: var(--ph-text);
  -webkit-font-smoothing: antialiased; isolation:isolate;
}
.ph-island{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:124px; height:36px; border-radius:20px; background:#000; z-index:60;
}

/* Status bar e home indicator: sopra tutte le schermate */
.ph-status{
  position:absolute; inset:0 0 auto 0; height:54px; z-index:50; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between; padding: 6px 30px 0 44px;
  font-size:17px; font-weight:600; letter-spacing:-.01em; color:#000; transition: color .3s;
}
.ph-status svg{ height:13px; width:auto; }
.ph-status .ph-status-r{ display:flex; gap:6px; align-items:center; }
.ph-status.light{ color:#fff; }
.ph-homebar{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:134px; height:5px; border-radius:3px; background:#000; z-index:50; pointer-events:none;
  transition: background .3s;
}
.ph-homebar.light{ background:#fff; }

/* ---------- Schermate ---------- */
.ph-screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background: var(--ph-bg); padding-top:54px; will-change: transform;
}
.ph-screen[hidden]{ display:none; }
.ph-screen *{ box-sizing:border-box; }
:where(.ph-screen) :where(button){ font: inherit; color: inherit; text-align:inherit; }

.ph-body{ flex:1; overflow-y:auto; padding:16px 16px 24px; scrollbar-width:none; }
.ph-body::-webkit-scrollbar{ display:none; }
.ph-body.has-footer{ padding-bottom: 110px; }

.ph-top{
  height:58px; flex-shrink:0; background:#fff; display:flex; align-items:center; gap:14px;
  padding: 0 16px; font-size:20px; font-weight:600; color: var(--ph-ink); letter-spacing:-.01em;
}
.ph-top .ph-title{ flex:1; margin-left:14px; }
.ph-icon-btn{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color: var(--ph-ink); }
.ph-icon-btn:active{ background: var(--ph-chip); }
.ph-icon-btn svg{ width:24px; height:24px; }

.ph-brandbar{
  height:58px; flex-shrink:0; background:#fff; display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px 0 16px;
}
.ph-brandbar img{ height:30px; width:auto; }
.ph-brandbar .ph-icons{ display:flex; gap:4px; }
.ph-bell{ position:relative; }
.ph-bell .ph-dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background: var(--ph-red); box-shadow:0 0 0 2px #fff; }

.ph-h1{ font-size:22px; font-weight:600; color: var(--ph-ink); letter-spacing:-.01em; margin: 4px 0 12px; }
.ph-h2{ font-size:17px; font-weight:600; color: var(--ph-ink); margin: 18px 0 10px; }

.ph-card{ background:#fff; border:1px solid var(--ph-line); border-radius:12px; padding:16px; }
.ph-card + .ph-card{ margin-top:12px; }
.ph-muted{ color: var(--ph-grey); font-size:13.5px; line-height:1.45; }
.ph-small{ color: var(--ph-grey); font-size:12px; }

/* Pulsanti app */
.ph-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  height:50px; border-radius:10px; font-size:16px; font-weight:600; letter-spacing:-.005em;
  transition: filter .15s, transform .1s, background .2s;
}
.ph-btn:active{ transform: scale(.985); }
.ph-btn svg{ width:18px; height:18px; }
.ph-btn-primary{ background: var(--ph-navy); color:#fff; }
.ph-btn-primary:hover{ filter: brightness(1.08); }
.ph-btn-soft{ background: var(--ph-soft); color: var(--ph-navy); border:1px solid var(--ph-soft-bd); }
.ph-btn-disabled{ background:#eceef2; color: var(--ph-grey-2); cursor:default; }
.ph-btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.ph-footer{
  position:absolute; left:0; right:0; bottom:0; padding:12px 16px 34px;
  background: linear-gradient(to top, var(--ph-bg) 70%, transparent);
}

/* Evidenziazione del prossimo tocco */
.ph-hint{ position:relative; animation: phPulse 1.7s ease-out infinite; z-index:2; }
@keyframes phPulse{
  0%  { box-shadow: 0 0 0 0 rgba(75,107,191,.55); }
  70% { box-shadow: 0 0 0 11px rgba(75,107,191,0); }
  100%{ box-shadow: 0 0 0 0 rgba(75,107,191,0); }
}

/* ---------- 01 Accesso ---------- */
.ph-login{ background: var(--ph-navy-2); overflow:hidden; }
.ph-login .ph-blob{ position:absolute; border-radius:50%; }
.ph-login .b1{ width:720px; height:900px; left:-470px; top:-140px; background: var(--ph-navy-3); }
.ph-login .b2{ width:560px; height:560px; left:-90px; bottom:-420px; background: var(--ph-navy); }
.ph-login .b3{ width:420px; height:900px; right:-330px; top:300px; background: var(--ph-navy); transform: rotate(-18deg); }
.ph-login .ph-body{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; padding: 0 20px 70px; overflow:visible; }
.ph-login-card{ position:relative; background:#fff; border-radius:18px; padding: 26px 22px 24px; }
/* Fumetto di avvio sotto il pulsante Accedi */
.ph-callout{
  position:absolute; left:22px; right:22px; top:calc(100% + 14px); z-index:3;
  background: #1a1b1f; color:#fff; border-radius:12px; padding:12px 14px; text-align:center;
  box-shadow: 0 12px 28px rgba(10,15,35,.35);
  opacity:0; transform: translateY(6px); transition: opacity .35s, transform .35s; pointer-events:none;
}
.ph-callout::before{
  content:''; position:absolute; top:-7px; left:50%; width:14px; height:14px; margin-left:-7px;
  background:#1a1b1f; transform: rotate(45deg); border-radius:2px;
}
.ph-callout strong{ display:block; font-size:15px; font-weight:700; margin-bottom:2px; }
.ph-callout span{ font-size:13px; color: rgba(255,255,255,.75); }
.ph-callout.show{ opacity:1; transform:none; animation: phBob 2.4s ease-in-out .4s infinite; }
@keyframes phBob{ 50%{ transform: translateY(3px); } }
.ph-login-card img{ height:54px; width:auto; margin: 0 auto 26px; display:block; }
.ph-label{ display:block; font-size:14.5px; font-weight:600; color: var(--ph-text); margin: 14px 0 7px; }
.ph-input{
  display:flex; align-items:center; height:50px; border:1px solid var(--ph-field); border-radius:10px;
  padding: 0 14px; font-size:16px; color: var(--ph-ink); background:#fff;
}
.ph-input .ph-caret[hidden]{ display:none; }
.ph-input .ph-caret{ display:inline-block; width:1.5px; height:20px; background: var(--ph-navy); margin-left:1px; animation: phBlink 1s steps(1) infinite; }
.ph-input.pw{ justify-content:space-between; letter-spacing:.18em; }
.ph-input.pw svg{ width:22px; height:22px; color: var(--ph-grey); flex-shrink:0; }
@keyframes phBlink{ 50%{ opacity:0; } }
.ph-link{ color: var(--ph-navy); font-weight:600; font-size:14.5px; }
.ph-login-card .ph-link.forgot{ display:block; margin: 14px 0 22px; }
.ph-sep{ height:1px; background: var(--ph-line); margin: 20px 0 16px; }
.ph-center{ text-align:center; }
.ph-copy{ text-align:center; color: rgba(255,255,255,.7); font-size:12.5px; margin-top:16px; }
.ph-spinner{ width:20px; height:20px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation: phSpin .7s linear infinite; }
@keyframes phSpin{ to{ transform: rotate(360deg); } }

/* ---------- 02 Home ---------- */
.ph-hello{ background: var(--ph-navy); color:#fff; border-radius:14px; padding:20px 18px; }
.ph-hello strong{ display:block; font-size:22px; font-weight:700; margin-bottom:10px; }
.ph-hello span{ font-size:14.5px; line-height:1.5; color: rgba(255,255,255,.82); }
.ph-fav .ph-small{ margin-bottom:4px; }
.ph-fav .ph-name{ font-size:18px; font-weight:600; color: var(--ph-navy); margin-bottom:10px; }
.ph-meta{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--ph-grey); margin-top:6px; }
.ph-meta svg{ width:16px; height:16px; flex-shrink:0; }
.ph-meta.tel{ color: var(--ph-navy); }
.ph-fav .ph-btn{ margin-top:10px; height:46px; font-size:15px; }
.ph-fav .ph-btn:first-of-type{ margin-top:18px; }

/* Tab bar */
.ph-tabbar{
  position:absolute; left:0; right:0; bottom:0; height:92px; background:#fff; border-top:1px solid var(--ph-line);
  display:grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 30px; gap:6px;
}
.ph-tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border-radius:12px; font-size:11.5px; font-weight:500; color: var(--ph-text); position:relative; }
.ph-tab svg{ width:21px; height:21px; }
.ph-tab.active{ background: var(--ph-navy); color:#fff; }
.ph-tab .ph-badge{ position:absolute; top:3px; left:50%; margin-left:4px; min-width:16px; height:16px; border-radius:8px; background: var(--ph-red); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px; box-shadow:0 0 0 2px var(--ph-navy); }

/* ---------- Stepper ---------- */
.ph-stepper{ display:grid; grid-template-columns: repeat(3, 1fr); background:#fff; padding: 10px 6px 12px; flex-shrink:0; border-bottom:1px solid var(--ph-line); }
.ph-step{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color: var(--ph-grey); position:relative; }
.ph-step::before{ /* linea verso lo step precedente */
  content:''; position:absolute; top:10px; right:calc(50% + 14px); width:calc(100% - 28px); height:2px; background:#e1e4ea;
}
.ph-step:first-child::before{ display:none; }
.ph-step.done::before, .ph-step.active::before{ background: var(--ph-navy); }
.ph-step i{ width:21px; height:21px; border-radius:50%; border:1.5px solid #d5d9e0; background:#fff; display:grid; place-items:center; }
.ph-step.active{ color: var(--ph-navy); font-weight:600; }
.ph-step.active i{ border:2px solid var(--ph-navy); }
.ph-step.active i::after{ content:''; width:9px; height:9px; border-radius:50%; background: var(--ph-navy); }
.ph-step.done{ color: var(--ph-navy); }
.ph-step.done i{ background: var(--ph-navy); border-color: var(--ph-navy); }
.ph-step.done i svg{ width:12px; height:12px; color:#fff; }

/* ---------- 03 Scelta farmacia ---------- */
.ph-search{ display:flex; align-items:center; gap:10px; height:46px; background:#fff; border:1px solid var(--ph-line); border-radius:10px; padding: 0 14px; margin-bottom:12px; }
.ph-search svg{ width:20px; height:20px; color: var(--ph-grey); flex-shrink:0; }
.ph-search input{ border:0; outline:0; flex:1; font: inherit; font-size:14.5px; color: var(--ph-ink); background:transparent; min-width:0; }
.ph-search input::placeholder{ color: var(--ph-grey-2); letter-spacing:.01em; }
.ph-row{ display:flex; align-items:center; gap:12px; width:100%; background:#fff; border:1px solid var(--ph-line); border-radius:12px; padding:14px 12px; transition: border-color .2s; }
.ph-row + .ph-row{ margin-top:10px; }
.ph-row:hover{ border-color: var(--ph-soft-bd); }
.ph-ico{ width:42px; height:42px; border-radius:10px; background: var(--ph-chip); display:grid; place-items:center; color: var(--ph-navy); flex-shrink:0; }
.ph-ico svg{ width:22px; height:22px; }
.ph-row .ph-txt{ flex:1; min-width:0; }
.ph-row .ph-name{ font-size:15px; font-weight:600; color: var(--ph-ink); line-height:1.3; }
.ph-row .ph-muted{ margin-top:3px; font-size:13px; }
.ph-row .ph-end{ display:flex; gap:8px; color: var(--ph-grey); }
.ph-row .ph-end svg{ width:19px; height:19px; }
.ph-empty{ text-align:center; color: var(--ph-grey); font-size:14px; padding: 30px 10px; }

/* ---------- 04 Scheda ---------- */
.ph-shop{ text-align:center; padding: 22px 16px; }
.ph-shop .ph-ico{ width:64px; height:64px; border-radius:16px; margin: 0 auto 14px; }
.ph-shop .ph-ico svg{ width:32px; height:32px; }
.ph-shop .ph-name{ font-size:19px; font-weight:600; color: var(--ph-ink); }
.ph-shop .ph-muted{ margin-top:6px; font-size:14px; }
.ph-map{ margin-top:12px; border-radius:12px; overflow:hidden; aspect-ratio: 720/317; background:#e9e4dc; }
.ph-map img{ width:100%; height:100%; object-fit:cover; }
.ph-scheda .ph-btn-row{ margin-top:12px; }
.ph-scheda .ph-btn-row .ph-btn{ height:48px; font-size:15.5px; }
.ph-contacts .ph-title2{ font-size:15px; font-weight:600; color: var(--ph-ink); margin-bottom:6px; }
.ph-contacts .ph-meta{ font-size:14.5px; margin-top:10px; color: var(--ph-text); }
.ph-contacts .ph-meta.mail{ color: var(--ph-navy); }
.ph-contacts .ph-meta svg{ color: var(--ph-grey); width:18px; height:18px; }

/* ---------- 05/07/08 Nuova richiesta ---------- */
.ph-pickup{ display:flex; align-items:center; gap:12px; }
.ph-pickup .ph-txt{ flex:1; min-width:0; }
.ph-pickup .ph-small{ font-size:11.5px; }
.ph-pickup .ph-name{ font-size:15px; font-weight:600; color: var(--ph-ink); margin: 1px 0 2px; }
.ph-pickup .ph-muted{ font-size:12.5px; }
.ph-pickup .ph-link{ font-size:14.5px; }
.ph-norx{ text-align:center; padding: 22px 18px; }
.ph-norx svg{ width:34px; height:34px; color: var(--ph-grey-2); margin-bottom:12px; }
.ph-norx strong{ display:block; font-size:15.5px; font-weight:600; color: var(--ph-text); margin-bottom:6px; }
.ph-rx{ display:flex; align-items:center; gap:12px; }
.ph-rx.new{ animation: phIn .35s ease-out; }
.ph-rx + .ph-rx{ margin-top:10px; }
.ph-rx .ph-ico{ width:38px; height:38px; }
.ph-rx .ph-ico svg{ width:20px; height:20px; }
.ph-rx .ph-txt{ flex:1; }
.ph-rx .ph-nre{ font-size:15px; font-weight:600; letter-spacing:.04em; color: var(--ph-ink); }
.ph-rx .ph-small{ letter-spacing:.02em; margin-top:2px; }
.ph-rx .ph-del{ color: var(--ph-red); width:34px; height:34px; display:grid; place-items:center; border-radius:8px; }
.ph-rx .ph-del:hover{ background:#fdeeee; }
.ph-rx .ph-del svg{ width:20px; height:20px; }
@keyframes phIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.ph-choice{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; text-align:center; border-radius:12px; padding: 20px 14px 18px; background: var(--ph-soft); border:1px solid var(--ph-soft-bd); }
.ph-choice + .ph-choice{ margin-top:12px; }
.ph-choice svg{ width:28px; height:28px; color: var(--ph-navy); margin-bottom:4px; }
.ph-choice strong{ font-size:15.5px; font-weight:600; color: var(--ph-navy); }
.ph-choice span{ font-size:12.5px; color: var(--ph-grey); }
.ph-choice.alt{ background:#fff; border-color: var(--ph-line); }

/* ---------- 06 Scanner ---------- */
.ph-scanner{ background:#000; }
.ph-scanner .ph-top{ background:#000; color:#fff; }
.ph-scanner .ph-icon-btn{ color:#fff; }
.ph-scanner .ph-icon-btn:active{ background: rgba(255,255,255,.12); }
.ph-cam{ position:relative; flex:1; overflow:hidden; background:#1d1c1a; }
.ph-cam-inner{ position:absolute; left:0; right:0; top:0; aspect-ratio: 720/1125; display:block; width:100%; padding:0; cursor:pointer; }
.ph-cam-inner img{ width:100%; height:100%; object-fit:cover; animation: phCam 5s ease-in-out infinite alternate; }
@keyframes phCam{ from{ transform: scale(1.015) translate(0,0); } to{ transform: scale(1.015) translate(-1.5px, 1px) rotate(.15deg); } }
.ph-frame{ /* posizione della finestra di scansione nella foto */
  position:absolute; left:14.9%; right:14.9%; top:46.4%; height:27.6%;
  border-radius:24px; box-shadow: 0 0 0 2.5px rgba(255,255,255,.95);
  transition: box-shadow .25s;
}
.ph-frame::before{ /* laser */
  content:''; position:absolute; left:8%; right:8%; height:2px; top:18%;
  background: linear-gradient(90deg, transparent, #ff3b30 18%, #ff3b30 82%, transparent);
  box-shadow: 0 0 10px 2px rgba(255,59,48,.55); animation: phLaser 1.1s ease-in-out infinite alternate;
}
@keyframes phLaser{ to{ top:82%; } }
.ph-frame.ok{ box-shadow: 0 0 0 3px #34c759, 0 0 34px rgba(52,199,89,.55); }
.ph-frame.ok::before{ display:none; }
.ph-nre-patch{ /* sostituisce le cifre stampate per la seconda ricetta */
  position:absolute; left:31%; top:63.3%; width:38.5%; height:3.3%;
  background:#fafaf9; display:none; align-items:center; justify-content:center;
  transform: rotate(-2.3deg); font-family: 'Inter', sans-serif; font-weight:700; font-size:10.4px; letter-spacing:2.5px; color:#111;
}
.ph-nre-patch.show{ display:flex; }
.ph-read{
  position:absolute; left:50%; bottom:22px; transform: translate(-50%, 10px); opacity:0;
  background: rgba(20,20,20,.82); color:#fff; font-size:13px; font-weight:500; padding:9px 14px; border-radius:99px;
  display:flex; gap:8px; align-items:center; white-space:nowrap; transition: opacity .25s, transform .25s; backdrop-filter: blur(8px);
}
.ph-read svg{ width:16px; height:16px; color:#34c759; }
.ph-read.show{ opacity:1; transform: translate(-50%, 0); }
.ph-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.ph-flash.go{ animation: phFlash .45s ease-out; }
@keyframes phFlash{ 0%{ opacity:.55; } 100%{ opacity:0; } }
.ph-cam-caption{ flex-shrink:0; height:120px; background:#161616; color:#fff; text-align:center; padding: 20px 22px 0; }
.ph-cam-caption strong{ display:block; font-size:16px; font-weight:600; margin-bottom:8px; }
.ph-cam-caption span{ font-size:13px; color: rgba(255,255,255,.62); line-height:1.45; }

/* ---------- 09/11 Richiesta ---------- */
.ph-okbar{ display:flex; gap:12px; align-items:center; background: var(--ph-ok-bg); border:1px solid var(--ph-ok-bd); color: var(--ph-ok-txt); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.45; margin-bottom:12px; }
.ph-okbar svg{ width:22px; height:22px; color: var(--ph-ok); flex-shrink:0; }
.ph-qrcard{ text-align:center; padding: 20px 16px 18px; }
.ph-qrcard .ph-cap{ font-size:15px; font-weight:600; color: var(--ph-text); margin-bottom:14px; }
.ph-qr{ width:212px; height:212px; margin: 0 auto; padding:18px; border:1px solid var(--ph-line); border-radius:14px; background:#fff; }
.ph-qr img{ width:100%; height:100%; image-rendering: pixelated; }
.ph-code{ font-size:25px; font-weight:700; letter-spacing:.2em; color: var(--ph-ink); margin-top:16px; }
.ph-qrcard .ph-small{ margin-top:4px; font-size:12.5px; }
.ph-state{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ph-state b{ font-size:15.5px; font-weight:600; color: var(--ph-ink); }
.ph-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:99px; }
.ph-pill svg{ width:14px; height:14px; }
.ph-pill.warn{ background: var(--ph-warn-bg); color: var(--ph-warn); }
.ph-pill.ok{ background: var(--ph-ok-bg); color: var(--ph-ok); border:1px solid var(--ph-ok-bd); }
.ph-shopline{ display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; color: var(--ph-ink); }
.ph-shopline svg{ width:18px; height:18px; color: var(--ph-grey); }
.ph-shopinfo{ margin-top:10px; font-size:14.5px; color: var(--ph-text); }
.ph-shopinfo .ph-muted{ margin-top:3px; font-size:13.5px; }
.ph-sentat{ border-top:1px solid var(--ph-line); margin-top:14px; padding-top:12px; }
.ph-rxmini{ display:flex; justify-content:space-between; font-size:13.5px; padding: 8px 0; border-top:1px solid var(--ph-line); }
.ph-rxmini:first-of-type{ border-top:0; }
.ph-rxmini b{ font-weight:600; letter-spacing:.04em; color: var(--ph-ink); }

/* ---------- 10 Notifiche ---------- */
.ph-notif{ display:flex; gap:12px; align-items:flex-start; width:100%; }
.ph-notif .ph-ico{ width:38px; height:38px; border-radius:50%; }
.ph-notif .ph-ico.ok{ background: var(--ph-ok-bg); color: var(--ph-ok); border:1px solid var(--ph-ok-bd); }
.ph-notif .ph-ico svg{ width:20px; height:20px; }
.ph-notif .ph-txt{ flex:1; }
.ph-notif .ph-txt > span{ display:block; }
.ph-notif .ph-ico.old{ background: var(--ph-chip); color: var(--ph-grey); }
.ph-notif .ph-txt > .ph-name{ font-size:15px; font-weight:600; color: var(--ph-ink); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ph-notif .ph-name i{ display:block; flex-shrink:0; width:8px; height:8px; border-radius:50%; background: var(--ph-red); }
.ph-notif .ph-muted{ margin: 4px 0 6px; }
.ph-notif .ph-small{ font-size:11.5px; letter-spacing:.01em; }
.ph-notif.new{ animation: phIn .4s ease-out; }

/* Notifica push stile iOS */
.ph-push{
  position:absolute; left:10px; right:10px; top:52px; z-index:40;
  display:flex; gap:11px; align-items:center; text-align:left;
  background: rgba(245,245,247,.9); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-radius:22px; padding:12px 14px; color:#000;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  transform: translateY(-140%); opacity:0; transition: transform .5s cubic-bezier(.2,.9,.2,1.05), opacity .3s;
}
.ph-push.show{ transform:none; opacity:1; }
.ph-push .ph-appicon{ width:38px; height:38px; border-radius:9px; background:#fff; display:grid; place-items:center; flex-shrink:0; box-shadow: 0 0 0 .5px rgba(0,0,0,.08); overflow:hidden; }
.ph-push .ph-appicon img{ width:100%; height:100%; }
.ph-push .ph-pt{ flex:1; min-width:0; font-size:14px; line-height:1.3; }
.ph-push .ph-p1{ display:flex; justify-content:space-between; font-weight:600; }
.ph-push .ph-p1 span{ font-weight:400; color: rgba(0,0,0,.5); font-size:12.5px; }
.ph-push .ph-pl{ display:block; color:#000; font-size:14px; }

/* Toast in-app */
.ph-toast{
  position:absolute; left:16px; right:16px; bottom:104px; z-index:45;
  background: var(--ph-navy); color:#fff; font-size:14px; font-weight:500; border-radius:8px; padding:13px 14px;
  box-shadow: 0 8px 22px rgba(20,30,60,.3);
  opacity:0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events:none;
}
.ph-toast.show{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .demo-grid{ grid-template-columns: 1fr; grid-template-areas: "intro" "phone" "panel"; row-gap: 2rem; }
  .demo-intro{ text-align:center; }
  .demo-intro .lead, .demo-panel{ margin-inline:auto; }
  .demo-panel{ margin-top:0; width:100%; }
  .demo-note{ margin-inline:auto; }
  .demo-dots{ flex-wrap:nowrap; gap:.3rem; }
  .demo-dots button{ width:auto; flex:1 1 0; max-width:26px; }
  .demo-dots button[aria-current="step"]{ width:auto; flex-grow:1.8; max-width:38px; }
}

@media (prefers-reduced-motion: reduce){
  .ph-hint, .ph-cam-inner img, .ph-frame::before, .ph-input .ph-caret, .ph-callout.show{ animation:none !important; }
  .ph-hint{ outline: 3px solid rgba(75,107,191,.6); outline-offset: 3px; }
}