/* =========================================================
   FOUNDER → BRAND DEL COACH (js/brand-admin.js, prefisso ba-). Fase 4, mig. 072.
   Nero + rosso (l'anteprima prende il colore scelto con data-hx-accent), ingresso a cascata quando apri
   l'editor, hover ovunque, niente backdrop-filter, telefono prima di tutto (niente scroll orizzontale).
   ========================================================= */
@keyframes baFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes baRise{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes baUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes baPop{ 0%{ opacity:0; transform:scale(.8); } 60%{ opacity:1; transform:scale(1.04); } 100%{ opacity:1; transform:none; } }
@keyframes baSpin{ to{ transform:rotate(360deg); } }
@keyframes baShim{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@keyframes baFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }

html.ba-lock, html.ba-lock body{ overflow:hidden; }

/* ---------- riquadro nel dettaglio del coach ---------- */
.ba-sec .ba-sec-t{ display:flex; align-items:center; gap:6px; }
.ba-sec .ba-sec-t .ic{ width:14px; height:14px; color:var(--red); }
.ba-sec-row{ display:flex; align-items:center; gap:12px; margin:2px 0 8px; }
.ba-sec-logo{ width:46px; height:46px; flex:none; border-radius:13px; display:grid; place-items:center; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px -10px rgba(0,0,0,.8); transition:transform .25s cubic-bezier(.2,.8,.2,1.3); }
.ba-sec:hover .ba-sec-logo{ transform:rotate(-4deg) scale(1.06); }
.ba-sec-logo img{ width:74%; height:74%; object-fit:contain; }
.ba-sec-logo span{ color:#fff; font-weight:900; font-size:15px; }
.ba-sec-main{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.ba-sec-main > b{ color:#fff; font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ba-sec-v{ font-size:11px; color:#8a8a94; }
.ba-sec-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.ba-sec-acts .btn{ width:auto; }
.ba-sec-none{ margin:0 0 10px; line-height:1.5; }
.ba-sec-err{ margin:0 0 10px; color:#ffb15a; }
.ba-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.ba-sec-sk{ display:flex; align-items:center; gap:12px; }
.ba-sk-col{ flex:1; display:flex; flex-direction:column; gap:8px; }
.ba-sk{ display:block; height:12px; border-radius:6px; background:linear-gradient(90deg,#1a1a20 25%,#232330 37%,#1a1a20 63%); background-size:400% 100%; animation:baShim 1.2s ease-in-out infinite; }

/* ---------- editor a tutto schermo ---------- */
.ba-bd{ position:fixed; inset:0; z-index:60; display:flex; justify-content:center; align-items:stretch; background:rgba(4,4,6,.86);
  animation:baFade .2s ease both; overscroll-behavior:contain; }
.ba-panel{ position:relative; width:100%; max-width:1240px; height:100%; display:flex; flex-direction:column; background:var(--bg); color:var(--txt); min-width:0;
  animation:baRise .42s cubic-bezier(.2,.8,.2,1) both; }
@media (min-width:900px){
  .ba-bd{ padding:22px; }
  .ba-panel{ border-radius:26px; border:1px solid var(--line); box-shadow:0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02) inset; overflow:hidden; }
}
.ba-head{ flex:none; display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top, 0px)) 14px 12px 16px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--red-soft), transparent 160%), var(--bg-2); min-width:0; }
.ba-head-ic{ width:44px; height:44px; flex:none; border-radius:14px; display:grid; place-items:center; color:#fff; background:var(--grad); box-shadow:var(--shadow-red); }
.ba-head-ic .ic{ width:22px; height:22px; }
.ba-in .ba-head-ic .ic{ animation:baPop .6s cubic-bezier(.2,.8,.2,1) .2s both; }
.ba-head:hover .ba-head-ic{ animation:baFloat 1.2s ease-in-out infinite; }
.ba-head-tx{ flex:1; min-width:0; }
.ba-head-tx h2{ margin:0; font-size:19px; font-weight:900; letter-spacing:-.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ba-head-tx h2 span{ color:var(--red); }
.ba-head-tx p{ margin:2px 0 0; font-size:12.5px; color:var(--txt-2); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ba-pill{ flex:none; font-size:12px; font-weight:800; padding:5px 11px; border-radius:999px; border:1px solid var(--line); transition:background .25s, color .25s, border-color .25s; }
.ba-pill.on{ background:rgba(47,208,122,.14); color:#5fdd86; border-color:rgba(47,208,122,.35); }
.ba-pill.off{ background:var(--surface-2); color:var(--txt-2); }
@media (max-width:520px){ .ba-pill{ display:none; } .ba-head-tx p{ display:none; } }
.ba-x{ width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--red); background:var(--red-soft); transition:transform .2s cubic-bezier(.2,.8,.2,1.3), background .2s; }
.ba-x .ic{ width:19px; height:19px; stroke-width:2.4; }
.ba-x:hover{ transform:rotate(90deg); background:color-mix(in srgb, var(--red) 22%, transparent); }
.ba-x:active{ transform:scale(.88); }

.ba-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.ba-body{ display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:18px; padding:16px; align-items:start; min-width:0; }
@media (max-width:980px){ .ba-body{ grid-template-columns:minmax(0, 1fr); } }
.ba-form{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.ba-side{ min-width:0; }
@media (min-width:981px){ .ba-side{ position:sticky; top:0; } }
.ba-side-in{ display:flex; flex-direction:column; gap:12px; }

.ba-loading{ padding:40px 16px; }
.ba-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; color:var(--txt-2); padding:40px 10px; }
.ba-empty .ic{ width:30px; height:30px; color:var(--txt-3); }
.ba-empty p{ margin:0; font-weight:700; }
.ba-empty .btn{ width:auto; }
.ba-spin{ width:30px; height:30px; border-radius:50%; border:3px solid var(--surface-3); border-top-color:var(--red); animation:baSpin .8s linear infinite; }

/* ingresso a cascata */
.ba-in .ba-card, .ba-in .ba-side-in > *{ animation:baUp .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--d, 0ms); }
.ba-in .ba-side-in > :nth-child(1){ --d:80ms; } .ba-in .ba-side-in > :nth-child(2){ --d:140ms; } .ba-in .ba-side-in > :nth-child(3){ --d:200ms; }
.ba-in .ba-side-in > :nth-child(4){ --d:260ms; } .ba-in .ba-side-in > :nth-child(5){ --d:320ms; }

/* card delle sezioni */
.ba-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px; min-width:0; transition:border-color .2s, box-shadow .25s, transform .25s; }
.ba-card:hover{ border-color:color-mix(in srgb, var(--red) 26%, var(--line)); box-shadow:0 18px 40px -30px var(--red-glow); }
.ba-card-h{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.ba-step{ width:22px; height:22px; flex:none; border-radius:7px; display:grid; place-items:center; background:var(--red-soft); color:var(--red); font-size:11.5px; font-weight:900; margin-top:1px; }
.ba-card-h h3{ margin:0; font-size:15.5px; font-weight:900; letter-spacing:-.2px; }
.ba-card-h p{ margin:2px 0 0; font-size:12.5px; color:var(--txt-2); line-height:1.45; }

/* campi */
.ba-f{ margin-top:10px; min-width:0; }
.ba-f:first-child{ margin-top:0; }
.ba-f-top{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.ba-f-top label{ flex:1; min-width:0; font-size:12px; font-weight:800; color:var(--txt-3); text-transform:uppercase; letter-spacing:.6px; }
.ba-cnt{ font-size:11.5px; font-weight:800; color:var(--txt-3); font-variant-numeric:tabular-nums; transition:color .15s; }
.ba-cnt.over{ color:var(--red); }
.ba-input.input{ height:48px; font-size:15px; }
.ba-f.bad .input, .ba-input.bad{ border-color:var(--red); }
.ba-msg{ display:none; align-items:flex-start; gap:6px; margin-top:6px; font-size:12.5px; font-weight:700; line-height:1.4; }
.ba-msg .ic{ width:14px; height:14px; flex:none; margin-top:1px; }
.ba-msg.err, .ba-msg.ok, .ba-msg.warn{ display:flex; animation:baUp .25s ease both; }
.ba-msg.err{ color:#ff6b74; }
.ba-msg.ok{ color:#5fdd86; }
.ba-msg.warn{ color:#ffca43; }
.ba-hint{ margin-top:6px; font-size:12px; color:var(--txt-3); line-height:1.45; font-weight:600; }
.ba-lnk{ color:var(--red); font-weight:800; text-decoration:underline; text-underline-offset:2px; padding:0; background:none; font-size:12px; }
.ba-lnk:hover{ color:var(--red-hot, var(--red)); }
.ba-auto{ font-size:11px; font-weight:800; color:#5fdd86; }

/* link /c/<slug> */
.ba-slug{ display:flex; align-items:center; min-width:0; height:50px; border-radius:15px; background:var(--surface-2); border:1.5px solid var(--line); transition:border-color .18s, box-shadow .18s, background .18s; overflow:hidden; }
.ba-slug:focus-within{ border-color:var(--red); background:var(--surface-3); box-shadow:0 0 0 4px var(--red-soft); }
.ba-slug.bad{ border-color:var(--red); }
.ba-slug-pre{ flex:none; padding:0 2px 0 14px; color:var(--txt-3); font-weight:700; font-size:14px; white-space:nowrap; }
.ba-slug-in{ flex:1; min-width:0; height:100%; background:none; border:0; outline:none; color:var(--txt); font-weight:800; font-size:15px; padding:0 12px 0 0; }
@media (max-width:380px){ .ba-slug-pre{ font-size:12.5px; padding-left:10px; } }

/* interruttori */
.ba-swrow{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:12px 14px; border-radius:15px; background:var(--bg-2); border:1px solid var(--line); color:var(--txt);
  transition:border-color .18s, background .18s, transform .18s; }
.ba-swrow:hover{ border-color:color-mix(in srgb, var(--red) 40%, var(--line)); transform:translateY(-1px); }
.ba-swrow:active{ transform:scale(.99); }
.ba-swrow:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.ba-swrow-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ba-swrow-tx b{ font-size:14.5px; font-weight:800; }
.ba-swrow-tx > span{ font-size:12.5px; color:var(--txt-2); line-height:1.4; }
.ba-switch{ position:relative; width:50px; height:30px; flex:none; border-radius:999px; background:var(--surface-3); border:1px solid var(--line); transition:background .22s, border-color .22s, box-shadow .22s; }
.ba-switch span{ position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.45); transition:transform .3s cubic-bezier(.2,.8,.2,1.35); }
.ba-swrow.on .ba-switch{ background:var(--red); border-color:var(--red); box-shadow:0 6px 16px -8px var(--red-glow); }
.ba-swrow.on .ba-switch span{ transform:translateX(20px); }
.ba-swrow.on{ border-color:color-mix(in srgb, var(--red) 55%, var(--line)); background:linear-gradient(180deg, var(--red-soft), transparent 160%), var(--bg-2); }

/* scelte (radio a card) */
.ba-opts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.ba-opts-3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
@media (max-width:560px){ .ba-opts-3{ grid-template-columns:1fr; } }
@media (max-width:420px){ .ba-opts{ grid-template-columns:1fr; } }
.ba-opt{ position:relative; display:flex; flex-direction:column; gap:3px; text-align:left; min-width:0; padding:11px 30px 11px 12px; border-radius:14px; background:var(--bg-2); border:1px solid var(--line); color:var(--txt);
  transition:border-color .16s, background .16s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.ba-opt:hover{ border-color:color-mix(in srgb, var(--red) 45%, var(--line)); transform:translateY(-2px); box-shadow:0 12px 24px -16px var(--red-glow); }
.ba-opt:active{ transform:scale(.98); }
.ba-opt:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.ba-opt b{ font-size:13.5px; font-weight:800; }
.ba-opt > span:not(.ba-radio){ font-size:11.5px; color:var(--txt-3); line-height:1.35; }
.ba-radio{ position:absolute; top:12px; right:11px; width:14px; height:14px; border-radius:50%; border:2px solid var(--surface-3); transition:border-color .16s, box-shadow .2s; }
.ba-opt.on{ border-color:var(--red); background:linear-gradient(180deg, var(--red-soft), transparent 140%), var(--bg-2); box-shadow:0 0 0 1px var(--red) inset, 0 14px 28px -18px var(--red-glow); }
.ba-opt.on .ba-radio{ border-color:var(--red); box-shadow:inset 0 0 0 2px var(--bg-2), inset 0 0 0 7px var(--red); }
.ba-reveal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1), opacity .25s; opacity:0; }
.ba-reveal > *{ overflow:hidden; min-height:0; }
.ba-reveal.open{ grid-template-rows:1fr; opacity:1; }
.ba-reveal .ba-f{ margin-top:12px; padding:2px; }

/* logo */
.ba-drop{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:16px; cursor:pointer; min-width:0;
  background:var(--bg-2); border:1.5px dashed color-mix(in srgb, var(--red) 40%, var(--line)); transition:border-color .18s, background .18s, transform .2s, box-shadow .2s; }
.ba-drop:hover, .ba-drop.over{ border-color:var(--red); background:linear-gradient(180deg, var(--red-soft), transparent 150%), var(--bg-2); transform:translateY(-1px); box-shadow:0 14px 30px -20px var(--red-glow); }
.ba-drop:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
.ba-drop-pv{ width:64px; height:64px; flex:none; border-radius:14px; display:grid; place-items:center; color:var(--txt-3);
  background:repeating-conic-gradient(#1c1c23 0% 25%, #141419 0% 50%) 50% / 14px 14px; overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1.3); }
.ba-drop-pv .ic{ width:24px; height:24px; }
.ba-drop-pv img{ width:86%; height:86%; object-fit:contain; animation:baPop .45s cubic-bezier(.2,.8,.2,1) both; }
.ba-drop:hover .ba-drop-pv{ transform:scale(1.05) rotate(-3deg); }
.ba-drop-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ba-drop-tx b{ font-size:14.5px; font-weight:800; }
.ba-drop-tx span{ font-size:12px; color:var(--txt-3); line-height:1.4; }
.ba-drop-go{ width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--grad-flat); color:#fff; box-shadow:var(--shadow-red); transition:transform .2s; }
.ba-drop-go .ic{ width:18px; height:18px; }
.ba-drop:hover .ba-drop-go{ transform:translateY(-2px); }
@media (max-width:380px){ .ba-drop-go{ display:none; } }

.ba-icons{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:12px; }
@media (max-width:460px){ .ba-icons{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.ba-icons-empty, .ba-icons > .ba-note, .ba-icons > .ba-new{ grid-column:1 / -1; }
.ba-icons-empty{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; background:var(--bg-2); border:1px solid var(--line); font-size:12.5px; color:var(--txt-3); font-weight:600; }
.ba-icons-empty .ic{ width:18px; height:18px; flex:none; }
.ba-ico{ margin:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:14px; background:var(--bg-2); border:1px solid var(--line); min-width:0;
  animation:baPop .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 70ms); transition:transform .2s, border-color .2s; }
.ba-ico:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--red) 40%, var(--line)); }
.ba-ico-img{ position:relative; width:58px; height:58px; border-radius:14px; overflow:hidden; background:var(--surface-3); box-shadow:0 10px 20px -12px rgba(0,0,0,.9); }
.ba-ico.mask .ba-ico-img{ border-radius:50%; }
.ba-ico-img img{ width:100%; height:100%; display:block; }
.ba-ico-safe{ position:absolute; inset:10%; border-radius:50%; border:1.5px dashed rgba(255,255,255,.55); pointer-events:none; opacity:0; transition:opacity .2s; }
.ba-ico:hover .ba-ico-safe{ opacity:1; }
.ba-ico figcaption{ display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center; }
.ba-ico figcaption b{ font-size:12px; font-weight:800; }
.ba-ico figcaption span{ font-size:10.5px; color:var(--txt-3); font-weight:600; }
.ba-new{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#5fdd86; }
.ba-new .ic{ width:14px; height:14px; }

.ba-bg{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.ba-bg-pick{ position:relative; width:48px; height:48px; flex:none; border-radius:14px; overflow:hidden; cursor:pointer; border:1.5px solid var(--line); transition:transform .2s, border-color .2s; }
.ba-bg-pick:hover{ transform:scale(1.06); border-color:var(--red); }
.ba-bg-pick input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
.ba-bg-pick span{ position:absolute; inset:0; pointer-events:none; }
.ba-bg-hex.input{ width:124px; height:48px; font-size:15px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform:uppercase; }
.ba-bg-quick{ display:flex; gap:6px; flex-wrap:wrap; }
.ba-bgq{ width:30px; height:30px; border-radius:10px; border:1.5px solid rgba(255,255,255,.18); transition:transform .18s cubic-bezier(.2,.8,.2,1.4), box-shadow .18s; }
.ba-bgq:hover{ transform:scale(1.14); }
.ba-bgq.on{ box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--red); }
.ba-row-acts{ display:flex; gap:8px; margin-top:12px; }
.ba-row-acts .btn{ width:auto; }

/* colore dell'app */
.ba-acc{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; }
@media (max-width:560px){ .ba-acc{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.ba-sw{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:14px; background:var(--bg-2); border:1px solid var(--line); color:var(--txt); min-width:0;
  transition:border-color .16s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.ba-sw:hover{ transform:translateY(-2px); border-color:var(--sw, var(--line)); }
.ba-sw b{ font-size:12px; font-weight:800; }
.ba-sw-c{ width:30px; height:30px; border-radius:50%; background:var(--sw); box-shadow:0 8px 18px -8px var(--sw); transition:transform .25s cubic-bezier(.2,.8,.2,1.4); }
.ba-sw:hover .ba-sw-c{ transform:scale(1.12); }
.ba-sw.none .ba-sw-c{ background:linear-gradient(135deg, transparent 45%, var(--txt-3) 45% 55%, transparent 55%), var(--surface-3); box-shadow:none; }
.ba-sw.on{ border-color:var(--sw, var(--txt-2)); box-shadow:0 0 0 1px var(--sw, var(--txt-2)) inset, 0 12px 24px -16px var(--sw, rgba(0,0,0,.6)); }
.ba-sw.on .ba-sw-c{ transform:scale(1.08); box-shadow:0 0 0 3px var(--bg-2), 0 0 0 5px var(--sw, var(--txt-2)); }
.ba-sw.none.on .ba-sw-c{ box-shadow:0 0 0 3px var(--bg-2), 0 0 0 5px var(--txt-2); }

.ba-note{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); font-size:12.5px; color:var(--txt-2); line-height:1.45; font-weight:600; }
.ba-note .ic{ width:15px; height:15px; flex:none; margin-top:1px; color:var(--txt-3); }
.ba-note.warn{ border-color:rgba(255,202,67,.3); color:#ffd56a; }
.ba-note.warn .ic{ color:#ffca43; }

/* ---------- anteprima ---------- */
.ba-pv-t{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.6px; color:var(--txt-3); }
.ba-pv-t .ic{ width:15px; height:15px; }
.ba-phone{ position:relative; width:280px; max-width:100%; margin:0 auto; padding:8px; border-radius:42px; background:#050507; border:1px solid #26262F;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.04); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ba-phone:hover{ transform:translateY(-4px) rotate(-.5deg); box-shadow:0 44px 80px -36px rgba(0,0,0,.95), 0 0 0 1px color-mix(in srgb, var(--red) 30%, transparent); }
.ba-phone::before{ content:''; position:absolute; top:16px; left:50%; width:78px; height:22px; margin-left:-39px; border-radius:14px; background:#000; z-index:3; }
.ba-screen{ position:relative; height:500px; border-radius:34px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; }
.ba-ph-top{ flex:none; display:flex; align-items:center; gap:8px; padding:44px 10px 10px; background:var(--grad); box-shadow:0 10px 26px -16px var(--red-glow); transition:background .3s; min-width:0; }
.ba-ph-badge{ width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(0,0,0,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); overflow:hidden; }
.ba-ph-badge img{ width:25px; height:25px; object-fit:contain; display:block; }
.ba-ph-name{ min-width:0; flex:1; color:#fff; font-size:16px; font-weight:900; letter-spacing:-.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.28); }
.ba-ph-name.empty{ flex:1; }
.ba-ph-ics{ display:flex; gap:4px; flex:none; }
.ba-ph-ics i{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff; }
.ba-ph-ics .ic{ width:13px; height:13px; }
.ba-ph-body{ flex:1; min-height:0; padding:12px 10px; display:flex; flex-direction:column; gap:9px; overflow:hidden; }
.ba-ph-hi{ font-size:17px; font-weight:900; letter-spacing:-.3px; }
.ba-ph-sub{ font-size:11.5px; color:var(--txt-3); margin-top:-6px; font-weight:600; }
.ba-ph-card{ background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:10px; }
.ba-ph-ch{ display:flex; align-items:center; gap:6px; }
.ba-ph-ch .ic{ width:15px; height:15px; color:var(--red); }
.ba-ph-ch b{ font-size:13px; font-weight:900; }
.ba-ph-lab{ font-size:10.5px; font-weight:700; color:var(--txt-3); margin:2px 0 7px 21px; }
.ba-ph-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.ba-ph-tile{ aspect-ratio:1; min-width:0; border-radius:10px; padding:6px; display:flex; flex-direction:column; justify-content:flex-end; gap:1px; overflow:hidden;
  background:linear-gradient(150deg, color-mix(in srgb, var(--red) 55%, transparent), var(--surface-2) 75%); border:1px solid var(--line); }
.ba-ph-tile b{ font-size:10px; font-weight:900; color:#fff; }
.ba-ph-tile i{ font-style:normal; font-size:8.5px; color:rgba(255,255,255,.7); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ba-ph-tile.hx{ background:linear-gradient(150deg, rgba(255,46,62,.7), #1C1C23 75%); }
.ba-ph-beats{ display:flex; align-items:center; gap:9px; }
.ba-ph-disc{ width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; color:#fff; background:var(--grad); box-shadow:var(--shadow-red); }
.ba-ph-disc .ic{ width:17px; height:17px; }
.ba-ph-bt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ba-ph-bt b{ font-size:13px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ba-ph-bt i{ font-style:normal; font-size:10.5px; color:var(--txt-3); font-weight:600; }
.ba-ph-play{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--red-soft); color:var(--red); }
.ba-ph-play .ic{ width:12px; height:12px; }
.ba-ph-card.ghost{ display:flex; flex-direction:column; gap:7px; }
.ba-ph-bar{ display:block; height:9px; border-radius:5px; background:var(--surface-3); }
.ba-ph-bar.s{ width:60%; }
.ba-ph-tab{ flex:none; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); padding:9px 6px 16px; border-top:1px solid var(--line); background:var(--nav-bg); }
.ba-ph-tab span{ display:grid; place-items:center; color:var(--txt-3); }
.ba-ph-tab span.on{ color:var(--red); }
.ba-ph-tab .ic{ width:17px; height:17px; }

/* schermata Home del telefono */
.ba-home{ display:flex; justify-content:center; gap:14px; padding:16px 10px 12px; border-radius:18px; min-width:0; overflow:hidden;
  background:radial-gradient(120% 90% at 15% 0%, #3a1622 0%, #120b16 45%, #07070b 100%); border:1px solid var(--line); }
.ba-app{ display:flex; flex-direction:column; align-items:center; gap:5px; width:66px; min-width:0; }
.ba-app-ic{ width:58px; height:58px; border-radius:14px; overflow:hidden; display:block; background:rgba(255,255,255,.08); box-shadow:0 10px 22px -12px rgba(0,0,0,.95);
  transition:transform .25s cubic-bezier(.2,.8,.2,1.3); }
.ba-app:not(.ghost):hover .ba-app-ic{ transform:translateY(-3px) scale(1.06); }
.ba-app-ic.round{ border-radius:50%; }
.ba-app-ic > img{ width:100%; height:100%; display:block; }
.ba-app-ph{ width:100%; height:100%; display:grid; place-items:center; }
.ba-app-ph img{ width:72%; height:72%; object-fit:contain; }
.ba-app-l{ max-width:100%; font-size:11px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.ba-app-os{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:rgba(255,255,255,.45); }
.ba-app.ghost{ opacity:.35; }
@media (max-width:360px){ .ba-app.ghost{ display:none; } }

/* link + QR (dentro la sezione "Link per installare l'app") */
.ba-linkbox{ margin-top:12px; padding:12px; border-radius:16px; background:var(--bg-2); border:1px solid var(--line); min-width:0; transition:border-color .2s, box-shadow .25s; }
.ba-linkbox:hover{ border-color:color-mix(in srgb, var(--red) 26%, var(--line)); box-shadow:0 18px 40px -30px var(--red-glow); }
.ba-lk{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:14px; align-items:start; min-width:0; }
.ba-lk.noqr{ grid-template-columns:minmax(0, 1fr); }
.ba-lk-main{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.ba-url{ font-size:14px; font-weight:800; color:var(--txt); padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); word-break:break-all; user-select:all; }
.ba-link-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.ba-link-acts .btn{ width:auto; flex:1 1 140px; }
.ba-qr{ padding:7px; border-radius:16px; background:#fff; line-height:0; box-shadow:0 18px 40px -24px rgba(0,0,0,.9); animation:baPop .4s cubic-bezier(.2,.8,.2,1) both; transition:transform .25s cubic-bezier(.2,.8,.2,1.3); }
.ba-qr:hover{ transform:scale(1.04) rotate(-1deg); }
.ba-qr svg{ display:block; width:164px; height:164px; max-width:100%; }
.ba-link-no{ margin-top:0; }
@media (max-width:620px){
  .ba-lk{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .ba-lk-main{ display:contents; }
  .ba-url, .ba-link-no{ order:1; } .ba-link-acts{ order:2; } .ba-qr{ order:3; justify-self:center; } .ba-lstate{ order:4; } .ba-limits{ order:5; }
  .ba-qr svg{ width:184px; height:184px; }
}
.ba-lstate{ font-size:12.5px; font-weight:700; line-height:1.4; padding:8px 10px; border-radius:10px; }
.ba-lstate.ok{ background:rgba(47,208,122,.1); color:#5fdd86; }
.ba-lstate.warn{ background:rgba(255,202,67,.08); color:#ffd56a; }
.ba-limits{ margin:0; padding:0 0 0 18px; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--txt-3); line-height:1.45; font-weight:600; }

/* ---------- barra in basso ---------- */
.ba-foot{ flex:none; display:flex; align-items:center; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); background:var(--bg-2); min-width:0; }
.ba-foot[hidden]{ display:none; }
.ba-why{ flex:1; min-width:0; font-size:12.5px; font-weight:700; color:var(--txt-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ba-why.err{ color:#ff6b74; }
.ba-why.ok{ color:#5fdd86; }
.ba-foot .btn{ width:auto; flex:none; }
.ba-save{ min-width:112px; }
.ba-save.busy .ic{ animation:baSpin .8s linear infinite; }
@media (max-width:420px){ .ba-foot .btn.ghost{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .ba-bd, .ba-panel, .ba-in .ba-card, .ba-in .ba-side-in > *, .ba-ico, .ba-qr, .ba-drop-pv img, .ba-msg.err, .ba-msg.ok, .ba-msg.warn{ animation:none !important; }
  .ba-phone:hover, .ba-opt:hover, .ba-swrow:hover, .ba-drop:hover, .ba-sw:hover, .ba-ico:hover{ transform:none; }
}