/* Lavora con noi: l'app Vibra dentro un iPhone 18 Pro Max in 3D.
   Il telefono è Three.js (assets/js/app-phone.js); lo schermo è l'HTML qui sotto (.ui),
   montato sulla faccia del modello con CSS3DRenderer: è vivo, non un video. */

/* ---------- sezione fissata ---------- */
.app { position: relative; }
.app__pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; --barra: calc(100lvh - 100svh); }   /* come .dis__pin: niente fascia scura quando la barra del browser sparisce */
.app__track { height: 460svh; }                 /* 6 passi (introduzione + 5 funzioni): circa tre quarti di schermata di scroll l'uno */
.app__stage { position: absolute; inset: 0; }
.app__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.app__css3d { position: absolute; inset: 0; pointer-events: none; }

.app__info {
  position: absolute; top: 0; bottom: 18svh; height: max-content; margin-block: auto; z-index: 2;   /* centrato ma più in alto del telefono */
  width: min(34vw, 540px); display: grid; gap: clamp(12px, min(1.2vw, 2svh), 24px); opacity: 0; visibility: hidden;
}
.app__info--left { left: calc((100vw - var(--frame)) / 2); }
.app__info--right { right: calc((100vw - var(--frame)) / 2); }
.app__info h2 { font-size: clamp(1.6rem, min(3vw, 5.6svh), 4.2rem); }
.app__info p { color: var(--grigio); font-size: clamp(1rem, min(1.2vw, 2.3svh), 1.5rem); max-width: 40ch; }
.app__info .app__kicker { font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em; color: var(--viola-chiaro); }
.app__info .btn { width: max-content; }
/* chiusura dell'ultimo passo (Vibra VS): staccata da una riga sottile, un filo più piccola del testo */
.app__info .app__note { margin-top: clamp(20px, 4svh, 48px); padding-top: clamp(12px, min(1.2vw, 2svh), 24px); border-top: 1px solid rgba(255,255,255,.12); font-size: clamp(.9rem, min(1vw, 2svh), 1.2rem); color: rgba(247,243,255,.6); text-wrap: pretty; }
.app__progress { position: absolute; right: calc(var(--gutter) * .5); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 4; }
.app__progress i { width: 4px; height: 1.625rem; border-radius: 4px; background: rgba(255,255,255,.14); transition: background .3s, transform .3s; }
.app__progress i.is-on { background: var(--bianco); transform: scaleX(1.6); }

@media (max-width: 860px) {
  .app__info, .app__info--left, .app__info--right { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(6svh + var(--barra, 0px)); margin-block: 0; width: auto; gap: 8px; }
  .app__info h2 { font-size: 1.4rem; }
  .app__info p { font-size: .98rem; }
  .app__info .app__note { margin-top: 18px; padding-top: 12px; font-size: var(--m-small); }
  .app__progress { right: 10px; }
}

/* senza animazioni o senza WebGL: schermo piatto e funzioni in elenco */
.app--static .app__pin { position: static; height: auto; overflow: visible; padding: 40px 0 100px; }
.app--static .app__track, .app--static .app__progress, .app--static .app__gl, .app--static .app__css3d { display: none; }
.app--static .app__stage { position: relative; display: grid; gap: 40px; justify-items: center; padding: 0 var(--gutter); }
.app--static .ui { position: relative; visibility: visible; zoom: .62; border: 14px solid #0b0b0e; }
.app--static .app__info { position: relative; left: auto; right: auto; opacity: 1; visibility: visible; width: auto; max-width: 620px; }

/* ---------- lo schermo: 440 × 948 punti, come un iPhone Pro Max ---------- */
.ui {
  --bg: #0b0711; --card: #16101f; --line: rgba(255,255,255,.07); --tx: #f5f1fb; --mut: #8e84a3;
  --acc: #9b5cf0; --acc2: #c4a1ff; --ok: #22c55e;
  position: absolute; left: 0; top: 0; width: 440px; height: 948px; border-radius: 62px; overflow: hidden;
  background: radial-gradient(120% 60% at 50% -10%, #3a1468 0%, #1a0a2e 45%, var(--bg) 75%);
  color: var(--tx); font-family: var(--font-body); visibility: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ui * { box-sizing: border-box; }
.ui p, .ui h3, .ui ol { margin: 0; }
.ui small { font-size: 12px; color: var(--mut); font-weight: 600; }
.ui__status { position: absolute; inset: 0 0 auto; height: 58px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 42px; font: 700 16px/1 var(--font-body); }
.ui__island { position: absolute; left: 50%; top: 14px; width: 82px; height: 26px; border-radius: 999px; background: #000; transform: translateX(-50%); }
.ui__sys { display: flex; align-items: center; gap: 6px; }
.ui__sig { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.ui__sig b { width: 3px; border-radius: 1px; background: #fff; }
.ui__sig b:nth-child(1) { height: 4px; } .ui__sig b:nth-child(2) { height: 6px; } .ui__sig b:nth-child(3) { height: 9px; } .ui__sig b:nth-child(4) { height: 12px; }
.ui__wifi { width: 15px; height: 11px; border-radius: 15px 15px 0 0 / 13px 13px 0 0; background: #fff; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.ui__bat { width: 25px; height: 12px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.5); padding: 1.5px; }
.ui__bat b { display: block; width: 78%; height: 100%; border-radius: 2px; background: #fff; }
.ui__home { position: absolute; left: 50%; bottom: 9px; width: 150px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.85); transform: translateX(-50%); z-index: 5; }

.ui__screen { position: absolute; inset: 0; padding: 74px 22px 34px; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; perspective: 900px; }
.ui__screen.is-on { opacity: 1; visibility: visible; }
.ui__head { display: flex; align-items: flex-end; justify-content: space-between; padding: 6px 2px 4px; }
.ui__head h3 { font: 800 30px/1.05 var(--font-display); letter-spacing: -.02em; margin-top: 4px; }
.ui__head img { height: 30px; width: auto; }
.ui-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; }
.ui-av { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6d28d9, #9b5cf0); color: #fff; font-size: 12px; font-weight: 700; }



/* weekend: "Aggiungi Presenze per Evento", stesso disegno del Box Presenze dell'app */
.ui-pr { gap: 10px; padding-top: 68px; }
.ui-pr__head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); }
.ui-pr__ico { flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(155,92,240,.16); display: grid; place-items: center; }
.ui-pr__ico svg { width: 19px; height: 19px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-pr__head b { display: block; font-size: 14.5px; }
.ui-pr__head small { font-size: 11px; font-weight: 500; }
.ui-pr__tabs { margin-left: auto; display: flex; padding: 3px; border-radius: 9px; background: #1a1424; border: 1px solid var(--line); font-size: 10.5px; font-weight: 600; }
.ui-pr__tabs span { padding: 4px 8px; border-radius: 7px; color: var(--mut); }
.ui-pr__tabs .is-on { background: var(--acc); color: #fff; }
.ui-pr__event { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #17121f; }
.ui-pr__venue { flex: none; width: 46px; height: 46px; border-radius: 10px; background: #241c30; display: grid; place-items: center; padding: 5px; }
.ui-pr__venue img { width: 100%; height: auto; }
.ui-pr__event small, .ui-pr__ph { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.ui-pr__event b { display: block; font-size: 14px; margin-top: 2px; }
.ui-pr__chev { margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(45deg) translateY(-3px); }
.ui-pr__add { border-radius: 14px; border: 1px solid rgba(155,92,240,.45); padding: 10px 12px; display: grid; gap: 8px; }
.ui-pr__addtitle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #b794ff; }
.ui-pr__addtitle span { width: 24px; height: 24px; border-radius: 7px; background: rgba(155,92,240,.16); display: grid; place-items: center; font-size: 16px; }
.ui-pr__seg { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: #1a1424; width: max-content; font-size: 11px; font-weight: 600; }
.ui-pr__seg span { padding: 4px 10px; border-radius: 6px; color: var(--mut); }
.ui-pr__seg .is-on { background: var(--card); color: var(--tx); }
.ui-pr__search { display: flex; align-items: center; gap: 2px; padding: 9px 12px 9px 34px; border-radius: 10px; border: 1px solid var(--line); background: #15101d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e84a3' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 12px 50% / 14px no-repeat; font-size: 13px; font-weight: 600; min-height: 38px; }
.ui-pr__caret { width: 1.5px; height: 15px; background: var(--acc2); }
.is-on .ui-pr__caret { animation: ui-blink 1s steps(1) infinite; }
@keyframes ui-blink { 50% { opacity: 0; } }
.ui-pr__form { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #1b1525; font-size: 12px; font-weight: 700; }
.ui-pr__eur { color: #34d399; } .ui-pr__ppl { color: #38bdf8; }
.ui-pr__eur b, .ui-pr__ppl b { display: inline-block; min-width: 38px; margin-left: 4px; padding: 3px 6px; border-radius: 6px; background: #0f0b16; color: var(--tx); text-align: center; font-variant-numeric: tabular-nums; }
.ui-pr__save { margin-left: auto; padding: 6px 12px; border-radius: 8px; background: #059669; color: #fff; }
.ui-pr__stats { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-pr__chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 10px; border: 1px solid var(--line); background: #1a1424; font-size: 11px; font-weight: 600; color: #ddd6ea; }
.ui-pr__chip b { font-variant-numeric: tabular-nums; }
.ui-pr__chip--new { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); color: #f87171; font-weight: 700; }
.ui-pr__panel { border-radius: 14px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.ui-pr__panel--new { border-color: rgba(248,113,113,.25); }
.ui-pr__ph { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.ui-pr__dot { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.ui-pr__ph em { font-style: normal; padding: 1px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); letter-spacing: 0; }
.ui .ui-pr__row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; margin: 7px 9px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 12.5px; font-weight: 700; }
.ui-pr__row b { color: #a78bfa; } .ui-pr__row small { font-size: 11px; } .ui-pr__row i { font-style: normal; color: var(--mut); }
.ui-pr__row--new { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.1); color: #fca5a5; }
.ui-pr__row--new b, .ui-pr__row--new i { color: #f87171; } .ui-pr__row--new small { color: rgba(252,165,165,.8); }
.ui-pr__row s { text-decoration: none; color: #facc15; margin-right: 5px; }
.ui-pr__leader { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(234,179,8,.4); background: rgba(234,179,8,.1); }
.ui-pr__leader span { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 8px; background: rgba(234,179,8,.16); display: grid; place-items: center; color: #facc15; }
.ui-pr__leader b { font-size: 12px; color: #fde047; } .ui-pr__leader small { font-size: 11px; color: rgba(250,204,21,.8); }

  position: absolute; left: 0; right: 0; top: calc(var(--i, 0) * 72px); height: 64px; padding: 0 14px 0 10px;
  display: grid; grid-template-columns: 30px 34px 1fr 64px auto; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; font-weight: 700;
  transition: top .7s cubic-bezier(.22, 1, .36, 1), border-color .4s;
}

/* apertura dell'app: solo viola Vibra e logo al centro */
.ui-splash { align-items: center; justify-content: center; padding: 0; background: #551a8e; }
.ui-splash__logo { width: 290px; height: auto; }

.ui [data-k="ring"] { stroke-dashoffset: calc(1 - var(--p, 1) * var(--s, 1)); }

.ui em.t-warn { color: #fbbf24; background: rgba(251,191,36,.13); }
.ui em.t-pr { color: var(--acc2); background: rgba(155,92,240,.18); }
.ui-av--big { width: 54px; height: 54px; font-size: 17px; }

/* ---------- schermate riprese dall'app vera (Base44): stessi colori e componenti ---------- */
.ui .x-title { font: 800 27px/1.05 var(--font-display); letter-spacing: -.02em; padding: 2px 2px 0; }
.t-vi { color: #a78bfa; } .t-gr { color: #4ade80; } .t-bl { color: #60a5fa; } .t-cy { color: #67e8f9; } .t-pri { color: #a78bfa; }
.t-am { color: #fbbf24; } .t-mu { color: var(--mut); } .t-up { color: #34d399; } .t-st { color: #94a3b8; } .t-dn { color: #f87171; }
.x-tabs { overflow: hidden; border-radius: 12px; background: rgba(255,255,255,.04); padding: 4px; }
.x-tabs__rail { display: flex; gap: 3px; width: max-content; transform: translateX(-208px); }
.x-tabs__rail--end { transform: translateX(-60px); }
.x-tabs__rail span { padding: 7px 11px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.x-tabs__rail .is-on { background: var(--card); color: var(--tx); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.x-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 10px; border: 1px solid rgba(167,139,250,.2); background: rgba(167,139,250,.06); color: #a78bfa; font-size: 13px; font-weight: 700; }
.x-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(167,139,250,.15); font-style: normal; font-size: 11px; }
.x-btn { padding: 7px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); font-size: 12px; font-weight: 600; }
.x-mv__who { display: flex; align-items: center; justify-content: space-between; }
.ui .x-mv__since { font-size: 11px; color: var(--mut); } .x-mv__since b { color: var(--tx); }
.x-mv__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.x-stat { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: var(--card); padding: 12px 14px; display: grid; gap: 3px; }
.x-stat::before, .x-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .55; background: linear-gradient(90deg, transparent, var(--a), transparent); }
.x-stat small { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); }
.x-stat b { font: 800 21px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.x-stat em { font-style: normal; font-size: 10px; color: var(--mut); }
.x-box { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: var(--card); padding: 11px 14px; display: grid; gap: 8px; }
.x-box--flat::before { display: none; }
.ui .x-sh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.x-sh i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-style: normal; font-size: 11px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.x-sh b { margin-left: auto; color: #a78bfa; font-variant-numeric: tabular-nums; } .x-sh > span { font-size: 11px; color: var(--mut); }
.x-sh .x-sel { margin-left: auto; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 10.5px; }
.x-sh--c { justify-content: center; }
.ui .x-badges { display: flex; gap: 7px; }
.x-badges span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 19px; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25); }
.x-badges .is-off { opacity: .28; background: rgba(255,255,255,.04); border-color: var(--line); }
.x-goal { display: grid; gap: 5px; }
.ui .x-goal p { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.x-goal em { font-style: normal; color: var(--mut); font-weight: 500; }
.x-goal small { font-size: 9.5px; text-align: right; }
.x-bar { display: block; height: 7px; border-radius: 99px; background: #241d2f; overflow: hidden; }
.x-bar b { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 99px; background: #8b5cf6; transform-origin: left; }
.x-line, .x-area { display: block; width: 100%; height: 96px; overflow: visible; }
.x-area { height: 80px; }
.x-mv__avg { font-size: 10px; }

.x-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui .x-mini p { position: relative; border-radius: 14px; border: 1px solid rgba(255,255,255,.06); background: var(--card); padding: 9px 11px; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; }
.x-mini i { grid-row: 1 / span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-size: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.x-mini small { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; } .x-mini b { font: 800 18px/1 var(--font-display); color: var(--c); }
.x-search { padding: 10px 14px 10px 36px; border-radius: 12px; border: 1px solid var(--line); background: #15101d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e84a3' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 13px 50% / 14px no-repeat; font-size: 13px; color: var(--mut); }
.x-search--sm { padding-top: 7px; padding-bottom: 7px; font-size: 12px; }
.x-list { border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: var(--card); overflow: hidden; }
.x-row { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; padding: 11px 12px 10px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.x-pos { position: absolute; left: 0; top: 0; width: 19px; height: 19px; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--c); background: #1c1626; border-radius: 0 0 7px 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.x-av { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #6d28d9, #a78bfa); color: #fff; font-size: 11.5px; font-weight: 700; }
.x-av--lg { width: 44px; height: 44px; font-size: 14px; }
.ui .x-nm { display: flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.x-nm s, .x-dlg__name s { text-decoration: none; color: #facc15; }
.g-gem { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-gem::before { content: ""; width: 10px; height: 10px; background: currentColor; clip-path: polygon(50% 100%, 0 38%, 22% 6%, 78% 6%, 100% 38%); }
.g-gem--lg { font-size: 15px; } .g-gem--lg::before { width: 13px; height: 13px; }
.x-tr { font-size: 12px; font-weight: 800; }
.ui .x-tags { display: flex; gap: 4px; margin-top: 3px; }
.x-tags em { font-style: normal; font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px; border: 1px solid; }
.x-tip { color: #c4b5fd; background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.3) !important; }
.b-ye { color: #facc15; background: rgba(234,179,8,.15); border-color: rgba(234,179,8,.3) !important; }
.b-cy { color: #22d3ee; background: rgba(6,182,212,.15); border-color: rgba(6,182,212,.3) !important; }
.b-vi { color: #a78bfa; background: rgba(139,92,246,.15); border-color: rgba(139,92,246,.3) !important; }
.ui .x-nums { grid-column: 2; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 7px; font-size: 13px; font-weight: 700; text-align: center; }
.x-nums small { display: block; font-size: 9.5px; font-weight: 500; }
.x-dim { position: absolute; inset: 0; background: rgba(0,0,0,.72); z-index: 3; }
.x-dlg { position: absolute; left: 12px; right: 12px; top: 92px; z-index: 4; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(#120d19, #0d0912); overflow: hidden; display: flex; flex-direction: column; }
.x-dlg__head { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(90deg, rgba(255,255,255,.04), transparent); display: grid; gap: 8px; }
.ui .x-dlg__name { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.x-x { margin-left: auto; font-style: normal; color: var(--mut); font-size: 20px; line-height: 1; }
.ui .x-dlg__st, .ui .x-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.x-dlg__body { padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.x-pill { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--mut); }
.p-gr { color: #6ee7b7; background: rgba(16,185,129,.15); } .p-zone { color: #ede9fe; background: #3b0764; }
.p-bl { color: #93c5fd; background: rgba(59,130,246,.15); } .p-ye { color: #fde047; background: rgba(234,179,8,.15); } .p-vi { color: #c4b5fd; background: rgba(139,92,246,.15); }
.x-rec { border-radius: 14px; border: 1px solid rgba(245,158,11,.3); background: linear-gradient(135deg, rgba(245,158,11,.12), transparent); padding: 10px 12px; display: grid; gap: 8px; }
.ui .x-recs { display: flex; gap: 8px; }
.x-recs span { flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.04); }
.x-recs b { grid-row: 1 / span 2; font-size: 18px; } .x-recs i { font-style: normal; font-size: 11px; font-weight: 700; } .x-recs small { font-size: 9.5px; }
.x-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ui .x-kpi p { border-radius: 12px; padding: 9px 6px; text-align: center; border: 1px solid; display: grid; gap: 2px; }
.x-kpi small { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.x-kpi b { font: 800 19px/1.1 var(--font-display); }
.k-gr { border-color: rgba(16,185,129,.2) !important; background: linear-gradient(135deg, rgba(16,185,129,.1), transparent); } .k-gr small { color: rgba(52,211,153,.8); } .k-gr b { color: #4ade80; }
.k-vi { border-color: rgba(139,92,246,.2) !important; background: linear-gradient(135deg, rgba(139,92,246,.1), transparent); } .k-vi small { color: rgba(167,139,250,.8); } .k-vi b { color: #a78bfa; }
.k-am { border-color: rgba(245,158,11,.2) !important; background: linear-gradient(135deg, rgba(245,158,11,.1), transparent); } .k-am small { color: rgba(251,191,36,.8); } .k-am b { color: #fcd34d; }

.x-rcbox { position: relative; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: var(--card); overflow: hidden; }
.x-rcbox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .55; background: linear-gradient(90deg, transparent, #fb923c, transparent); }
.x-rc__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.x-rc__head i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(249,115,22,.15); font-style: normal; font-size: 14px; }
.x-rc__head b { display: block; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: #fb923c; }
.x-rc__head small { font-size: 11px; }
.x-rc__filters { padding: 10px 14px; display: grid; gap: 8px; background: rgba(255,255,255,.025); border-bottom: 1px solid rgba(255,255,255,.06); }
.ui .x-rc__filters > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.x-rc__filters small { width: 62px; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.x-rc__filters span { padding: 4px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--mut); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); }
.x-rc__filters .is-on { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
.x-rr { display: grid; grid-template-columns: 34px 1fr auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ui .x-ph { font-size: 11px; color: rgba(142,132,163,.85); margin-top: 2px; min-height: 1.3em; }
.ui .x-acts { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11px; color: var(--mut); }
.x-acts b { color: var(--tx); margin-left: -4px; }
.x-acts i { font-style: normal; font-size: 12px; }
.x-wa { color: #34d399; } .x-ig { color: #f472b6; }
.x-ct { padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); font-size: 10px !important; }
.x-ct--ok { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.06); }
.x-urg { font-style: normal; font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 8px; border: 1px solid; white-space: nowrap; }
.u-bl { color: #60a5fa; background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.3); }
.u-ye { color: #facc15; background: rgba(250,204,21,.1); border-color: rgba(250,204,21,.3); }
.u-or { color: #fb923c; background: rgba(251,146,60,.1); border-color: rgba(251,146,60,.3); }
.u-re { color: #f87171; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }

.x-vs__hd, .x-vs__me, .x-vs__gap { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(167,139,250,.2); background: var(--card); padding: 12px 14px; text-align: center; display: grid; gap: 4px; }
.x-vs__hd::before, .x-vs__gap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .6; background: linear-gradient(90deg, transparent, #a78bfa, transparent); }
.x-vs__hd small, .x-vs__me small, .x-vs__gap small { font-size: 11px; } .x-vs__hd b { color: var(--tx); } .x-vs__hd em { font-size: 10px; font-style: italic; color: var(--mut); }
.x-vs__me { border-color: rgba(251,146,60,.3); background: rgba(251,146,60,.08); }
.x-vs__me::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: .6; background: linear-gradient(90deg, transparent, #fb923c, transparent); }
.x-vs__me > small:first-child { letter-spacing: .08em; text-transform: uppercase; }
.x-vs__pos { font: 900 54px/1 var(--font-display); color: #fb923c; font-variant-numeric: tabular-nums; }
.ui .x-vs__me p { font-size: 14px; font-weight: 700; }
.x-vs__me strong { font: 800 21px/1.1 var(--font-display); color: #a78bfa; }
.x-rk { display: grid; grid-template-columns: 30px 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); }
.x-rk > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-weight: 900; font-size: 15px; }
.x-rk .x-av { width: 32px; height: 32px; font-size: 11px; }
.x-rk small { display: block; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; } .x-rk b { font-size: 13.5px; } .x-rk em { display: block; font-style: normal; font-size: 10px; color: var(--mut); }
.x-rk strong { font-size: 13.5px; font-weight: 800; }
.x-rk--up > i { color: #4ade80; background: rgba(74,222,128,.1); } .x-rk--up small, .x-rk--up strong { color: #4ade80; }
.x-rk--me { border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.1); } .x-rk--me > i { color: #a78bfa; background: rgba(167,139,250,.2); } .x-rk--me small, .x-rk--me strong, .x-rk--me b { color: #a78bfa; }
.x-rk--dn > i { color: #f87171; background: rgba(248,113,113,.1); } .x-rk--dn small, .x-rk--dn strong { color: #f87171; }
.x-vs__gap b { font: 900 26px/1.1 var(--font-display); color: #a78bfa; } .x-vs__gap span { color: var(--tx); font-weight: 700; }
.ui [data-k="zoom"] { opacity: var(--p, 1); transform: translate3d(0, calc((1 - var(--p, 1)) * 24px), 0) scale(calc(.9 + var(--p, 1) * .1)); }

/* ---------- l'app si costruisce mentre scorri ----------
   app-phone.js scrive --p (0 → 1) su ogni elemento con data-at, in base allo scroll.
   Solo opacità e trasformazioni: niente che costringa a ricalcolare la pagina. */
.ui [data-at]:not([data-count]):not([data-k]):not([data-type]) { opacity: var(--p, 1); transform: translate3d(0, calc((1 - var(--p, 1)) * 18px), 0); }
.ui [data-k="fly"] { opacity: var(--p, 1); transform-origin: 50% 100%; transform: translate3d(0, calc((1 - var(--p, 1)) * 70px), calc((1 - var(--p, 1)) * -120px)) rotateX(calc((1 - var(--p, 1)) * 38deg)); }
.ui [data-k="pop"] { opacity: var(--p, 1); transform: translate3d(0, calc((1 - var(--p, 1)) * 14px), 0) scale(calc(.85 + var(--p, 1) * .15)); }
.ui [data-k="drop"] { opacity: var(--p, 1); transform: translate3d(0, calc((1 - var(--p, 1)) * -22px), 0) scale(calc(.5 + var(--p, 1) * .5)); }
.ui [data-k="fade"] { opacity: var(--p, 1); }
.ui [data-k="out"] { opacity: calc(1 - var(--p, 1)); }
.ui [data-k="bar"] { transform: scaleY(var(--p, 1)); }
.ui [data-k="barx"] { transform: scaleX(var(--p, 1)); }
.ui [data-k="line"] { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 1)); }
.ui mark[data-k="mark"] { background: rgba(196,161,255,calc(var(--p, 1) * .3)); }
/* pezzo fermo (finito, o non ancora partito e invisibile): niente trasformazione, che a riposo vale comunque zero.
   translate3d(0,0,0) lasciava ogni pezzo su un livello grafico suo (19 nello schermo): girando il telefono l'iPhone li ricomponeva
   tutti in 3D a ogni fotogramma. Così il pezzo si disegna dentro lo schermo; il livello esiste solo mentre si muove (app-phone.js) */
.ui .is-fermo[data-at] { transform: none !important; }   /* !important: la regola generale dei pezzi ([data-at]:not(...)) è più specifica */
.ui .is-zero[data-at]:is(:not([data-k]), [data-k="fly"], [data-k="pop"], [data-k="drop"], [data-k="zoom"], [data-k="fade"]) { transform: none !important; visibility: hidden; }

/* respiro continuo, solo sulla schermata accesa */
@keyframes ui-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.is-on .ui-pulse { transform-box: fill-box; transform-origin: center; animation: ui-pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ui *, .ui { animation: none !important; transition: none !important; }
}