:root{
  --brand1:#7c3aed; --brand2:#8b5cf6; --brand3:#06b6d4;
  --brand-grad:linear-gradient(100deg,var(--brand1),var(--brand2) 45%,var(--brand3));
  --grad: var(--brand-grad);
  --text:#0f172a; --muted:#6b7280; --card:#ffffffcc; --radius:18px;
  --shadow:0 14px 36px rgba(2,6,23,.08);

  /* velocità shine titolo (come Chat) */
  --title-shine-duration: 6s;
}

*{box-sizing:border-box}
html,body{height:100%}

/* SFONDO identico a /chat */
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#eef2f6 url("/images/lab-bg.jpg") center / cover fixed no-repeat;
}
/* niente aurora sopra lo sfondo */
body::before{content:none !important;}

.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124, 58, 237, .25);
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.head-center {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ⬇️ Titolo con effetto gloss IDENTICO a chat.css */
h1.title {
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
  font-size: clamp(20px, 2.4vw, 28px);
  position: relative;
  color: #fff;
  overflow: hidden;
}
h1.title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 15%, transparent 30%);
  background-size: 200% 100%;
  mix-blend-mode: screen;
  animation: gloss var(--title-shine-duration) linear infinite;
  pointer-events: none;
}
@keyframes gloss{from{background-position-x:200%}to{background-position-x:-200%}}

/* Pulsante Torna al Lab (uguale a Chat) */
.btn {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

/* ===========================
   Bottoni base
=========================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  text-decoration:none;font-weight:800;border-radius:999px;box-shadow:0 10px 26px rgba(16,24,40,.18)
}
.btn--pill{padding:10px 16px;background:var(--brand-grad);color:#fff;position:relative;isolation:isolate}
.btn--pill::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from 0deg,#7c3aed33,#8b5cf655,#06b6d433,#7c3aed33);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;z-index:-1
}
.btn--pill:hover{transform:translateY(-1px)}
.btn--pill:active{transform:translateY(0)}
.btn--ghost{padding:10px 14px;background:#ffffff;color:var(--brand1);border:1px solid #e5e7eb}
.btn--ghost:hover{box-shadow:0 10px 24px rgba(124,58,237,.16)}

/* ===========================
   Intro / descrizione
=========================== */
main{padding:clamp(20px,4vw,44px) 0}
.intro-card{
  background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:var(--shadow);
  padding:clamp(16px,3.6vw,24px);margin-bottom:clamp(18px,3vw,28px);text-align:left
}
/* layout a UNA colonna */
.ta-info{
  display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch;margin-bottom:8px
}
.ta-info__box{
  background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:var(--shadow);
  padding:16px 18px
}
.ta-info__box h2{margin:0 0 8px;font-weight:900}
#intro-text{margin:8px 0 0;color:var(--text);line-height:1.6;font-size:16px;font-weight:400;text-align:left}
.ta-sixline{margin:10px 0 0;color:var(--text);font-weight:600}
.ta-sixline strong{font-weight:900}
.tip{margin-top:14px;color:var(--muted);line-height:1.55}
.spark{margin-right:6px}

/* Icone tematiche inline (iniettate dal JS) */
.ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin:0 4px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.ic-breath{background:radial-gradient(circle at 50% 45%,#fff 0 7px,transparent 8px), var(--brand-grad); border-radius:10px; animation:breath 3s ease-in-out infinite}
.ic-heart{background:var(--brand-grad); clip-path:path("M9 16 C 2 10, 9 5, 9 7 C 9 5, 16 10, 9 16 Z"); animation:pulse 1.8s ease-in-out infinite}
.ic-sun{background:radial-gradient(circle,#fff 0 6px,transparent 8px),var(--brand-grad);border-radius:50%;animation:spin 6s linear infinite}
.ic-snow{background:conic-gradient(from 0deg,#fff 0 25%,transparent 25% 50%,#fff 50% 75%,transparent 75% 100%), var(--brand-grad);border-radius:6px;animation:floatY 4.2s ease-in-out infinite}

/* ===========================
   Grid card + effetti
=========================== */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,2.2vw,22px)
}
.card{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--card);backdrop-filter:blur(8px);
  border:1px solid #e5e7eb;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.12);border-color:#e2e8f0}
.card img{width:100%;height:150px;object-fit:cover;border-radius:12px}
.card h3{margin:10px 0 6px;font-size:18px;font-weight:900}
.card p{margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.55}

/* azioni card */
.card .card-actions{display:flex;gap:10px;flex-wrap:wrap}
.card .btn{font-size:14px}
.card .btn.listen{background:var(--brand-grad);color:#fff}
.card .btn.stop{background:#fff;color:var(--brand1);border:1px solid #e5e7eb}
.card .btn.more{background:#fff;color:#0f172a;border:1px solid #e5e7eb}

/* luce puntatore + ripple + glow orbit */
.card::after{
  content:""; position:absolute; width:120px; height:120px; border-radius:50%;
  left:var(--rx,50%); top:var(--ry,50%); transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, #ffffffaa, #ffffff00 70%); opacity:.0; transition:opacity .2s ease
}
.card:hover::after{opacity:.6}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--radius);
  background: conic-gradient(from 0deg,#7c3aed33,#8b5cf655,#06b6d433,#7c3aed33);
  filter:blur(6px); opacity:0; transition:opacity .25s ease; z-index:-1
}
.card:hover::before{opacity:.55}
.card .ripple{
  position:absolute;width:8px;height:8px;border-radius:999px;pointer-events:none;background:#fff;filter:blur(2px);
  opacity:.65;transform:translate(-50%,-50%) scale(1);animation:ripple .6s ease-out forwards
}
@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%) scale(12)}}

/* ===========================
   Overlay dettaglio
=========================== */
.detail{position:fixed;inset:0;background:rgba(2,6,23,.60);backdrop-filter:blur(3px);display:none;z-index:60}
.detail[hidden]{display:none}
.detail:not([hidden]){display:block}
.detail__content{
  background:#fff;color:#0f172a;border-radius:18px;max-width:760px;margin:clamp(16px,4vw,28px) auto;padding:clamp(16px,3.2vw,24px);
  box-shadow:0 18px 44px rgba(2,6,23,.28);max-height:calc(100vh - 2*clamp(16px,4vw,28px));overflow-y:auto;scroll-behavior:smooth
}
.detail__close{position:sticky;top:-8px;float:right;border:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:6px 10px;cursor:pointer}
.detail__close:hover{background:#f8fafc}
.detail h1,.detail h2{color:#7c3aed;margin:10px 0}
.detail ol,.detail ul{margin-left:1.25rem}
.detail .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.detail .actions .btn{background:var(--brand-grad);color:#fff}

/* ===========================
   ADV slot (anti-CLS) — opzionale
=========================== */
.ad-slot{
  width:100%; max-width:820px; margin:12px auto 0; position:relative;
  border-radius:16px; border:1px solid #e5e7eb; background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.08);
  overflow:hidden; transition:opacity .25s ease, transform .25s ease; opacity:0; transform:translateY(6px)
}
.ad-slot.is-ready{opacity:1; transform:translateY(0)}
.ad-rsp{aspect-ratio:16/9}
@media (max-width:680px){.ad-rsp{aspect-ratio:320/100}}
.ad-skeleton{
  width:100%; height:100%;
  background:linear-gradient(90deg,#f3f4f6 0,#e5e7eb 20%,#f3f4f6 40%); background-size:200% 100%;
  animation:adshimmer 1.2s linear infinite
}
@keyframes adshimmer{to{background-position:-200% 0}}
.ad-card{position:relative; display:block; width:100%; height:100%}
.ad-card img{width:100%; height:100%; object-fit:cover; display:block}
.ad-tag{
  position:absolute; top:8px; right:8px; font-size:12px; font-weight:800;
  background:linear-gradient(90deg,#7c3aed,#06b6d4); color:#fff; padding:4px 8px; border-radius:999px;
  box-shadow:0 6px 14px rgba(0,0,0,.18)
}

/* ===========================
   Keyframes icone
=========================== */
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===========================
   Responsive & motion
=========================== */
@media (max-width:640px){
  .ta-header__inner{grid-template-columns:auto 1fr auto}
  .ta-header__icon{width:36px;height:36px}
  .ta-brand{gap:10px}
  .card img{height:140px}
}
@media (prefers-reduced-motion:reduce){
  .btn--pill::before,.card::before,.card::after,.card .ripple,
  .ic-breath,.ic-heart,.ic-sun,.ic-snow,
  .ta-header__title{animation:none !important;transition:none !important}
}
/* --- HOTFIX HEADER TRAINING (append in fondo al file) --- */
.ta-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 2px 10px rgba(124,58,237,.25);
}
.ta-header__inner{
  min-height: 88px;
  display: grid;
  gap: 12px;
  padding: 0 16px;
  grid-template-columns: 1fr auto 1fr; /* [spacer] [brand] [cta] */
  align-items: center;
}
.ta-brand{display:flex; align-items:center; gap:12px; justify-self:center}

/* icona header: dimensioni fisse desktop (prima mancavano → icona gigante) */
.ta-header__icon{
  width: 42px;
  height: 42px;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.28));
}

/* titolo con gloss, identico a chat/index/lab */
h1.title{
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
  font-size: clamp(22px,3.2vw,34px);
  color:#fff;
  position:relative;
  white-space:nowrap;
}
.title.title--gloss::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 15%,transparent 30%);
  background-size:200% 100%;
  mix-blend-mode:screen;
  animation: gloss var(--title-shine-duration) linear infinite;
  pointer-events:none;
}
/* keyframes coerenti a tutte le pagine */
@keyframes gloss{from{background-position-x:200%} to{background-position-x:-200%}}

/* CTA a destra */
.ta-header__cta{justify-self:end}

/* tuning mobile coerente */
@media (max-width:640px){
  .ta-header__inner{grid-template-columns:auto 1fr auto}
  .ta-header__icon{width:36px;height:36px}
  .ta-brand{gap:10px}
}
/* ===== Enhancements: fade-in, glow, btn press, will-change ===== */
.detail__img {
  max-width: 100%;
  border-radius: 12px;
  margin: 12px 0;
  opacity: 0;
  transform: scale(.97);
  animation: fadeIn .5s ease forwards;
  will-change: opacity, transform;
}
@keyframes fadeIn { to { opacity: 1; transform: scale(1); } }

.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px rgba(124,58,237,.25), 0 0 22px rgba(6,182,212,.25);
  will-change: transform, box-shadow;
}

.detail__actions .btn {
  transition: transform .15s ease;
  will-change: transform;
}
.detail__actions .btn:active { transform: scale(.95); }
/* --- FIX SCROLL DETTAGLIO MOBILE/PWA --- */
.detail {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200;
}
.detail[hidden] { display:none; }

.detail__content {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh; /* limite altezza */
  overflow-y: auto; /* scroll se serve */
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* blocco scroll sfondo quando modale aperta */
body.no-scroll {
  overflow: hidden;
}


/* === Detail readability enhancements (v12) === */
.detail__title{
  margin: 6px 0 10px;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(20px, 2.2vw, 26px);
  color: #7c3aed;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.detail__obj{
  margin: 12px 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.detail__obj strong{
  color: #111827;
  font-weight: 700;
}
.detail__steps{
  margin: 0;
  padding-left: 1.25rem;
  font-size: 16px;
  line-height: 1.7;
  color: #1f2937;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.detail__steps li{ margin-bottom: 10px; }
.detail__tips{
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 4px solid #7c3aed;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  box-shadow: 0 6px 18px rgba(2,6,23,.04);
}
.detail__tips strong{ color:#0b1020; }


/* === Media bar (detail modal) === */
.media-bar{display:flex;align-items:center;gap:10px;margin:10px 0 0;}
.media-bar .time{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);min-width:48px;text-align:right}
.media-bar input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;background:#e5e7eb;outline:none;box-shadow:inset 0 0 0 1px #e5e7eb,0 4px 10px rgba(2,6,23,.08)}
.media-bar input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--brand-grad);border:0;box-shadow:0 2px 8px rgba(2,6,23,.25);margin-top:-5px}
.media-bar input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:0;background:var(--brand-grad);box-shadow:0 2px 8px rgba(2,6,23,.25)}
.media-bar input[type="range"]{background-image:linear-gradient(100deg,var(--brand1),var(--brand2) 45%,var(--brand3));background-size:var(--fill,0%) 100%;background-repeat:no-repeat}

/* Fix Chiudi btn on mobile */
@media (max-width:480px){
  .detail .btn.btn--ghost{font-size:1rem;padding:12px 16px}
}


/* === Icone animate comuni === */
.ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin:0 4px;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes blink{50%{filter:brightness(1.4)}}

.ic-breath{background:radial-gradient(circle,#fff 0 5px,transparent 6px),var(--brand-grad);
  border-radius:50%;animation:breath 3s ease-in-out infinite;}
.ic-heart{background:radial-gradient(circle,#fff 0 5px,transparent 6px),var(--brand-grad);
  clip-path:circle(50% at 50% 50%);animation:pulse 2s ease-in-out infinite;}
.ic-sun{background:radial-gradient(circle,#fff 0 3px,transparent 4px),var(--brand-grad);
  border-radius:50%;animation:spin 12s linear infinite;}
.ic-snow{background:linear-gradient(#fff,#fff),var(--brand-grad);
  clip-path:polygon(50% 0,60% 35%,98% 35%,66% 57%,78% 91%,50% 70%,22% 91%,34% 57%,2% 35%,40% 35%);
  animation:floatY 4s ease-in-out infinite;}


/* === Themed inline icons (light, brand) === */
.ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin:0 4px;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes breath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes blink{50%{filter:brightness(1.4)}}

/* Training Autogeno */
.ic-breath{background: radial-gradient(circle at 50% 45%,#fff 0 7px,transparent 8px), var(--brand-grad);
  border-radius:10px; animation:breath 3s ease-in-out infinite}
.ic-heart{background: var(--brand-grad);
  clip-path:path("M9 16 C 2 10, 9 5, 9 7 C 9 5, 16 10, 9 16 Z"); animation:pulse 1.8s ease-in-out infinite}
.ic-sun{background: radial-gradient(circle,#fff 0 6px,transparent 8px), var(--brand-grad);
  border-radius:50%; animation:spin 6s linear infinite}
.ic-snow{background: conic-gradient(from 0deg,#fff 0 25%,transparent 25% 50%,#fff 50% 75%,transparent 75% 100%), var(--brand-grad);
  border-radius:6px; animation:floatY 4.2s ease-in-out infinite}
/* === Harmonization Mobile/UI (v13.1) — append-only === */

/* Bottoni card: dimensioni e stile come Autoipnosi */
.card .card-actions{display:flex;gap:10px;flex-wrap:wrap}
.card .btn{font-size:15px}
.card .btn.listen,
.card .btn.pause{
  background: var(--brand-grad);
  color:#fff;
  padding:10px 16px;
  border-radius:9999px;
}
.card .btn.stop{
  background:#fff;
  color:var(--brand1);
  border:2px solid var(--brand1);
  padding:10px 16px;
  border-radius:9999px;
}
.card .btn.more{
  background:#fff;
  color:#0f172a;
  border:1px solid #e5e7eb;
  padding:10px 16px;
  border-radius:9999px;
}
.card .btn:hover{transform:translateY(-1px)}
.card .btn:active{transform:scale(.95)}

/* Modale: altezza/scroll “touch” + spazio per safe-area */
.detail__content{
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

/* Body no-scroll quando la modale è aperta */
body.no-scroll{ overflow:hidden; }

/* Chiudi sempre visibile e non tagliato su mobile */
#m-close{
  position: sticky;
  bottom: max(8px, env(safe-area-inset-bottom));
  display: block;
  margin: 12px auto 0;
  background:#fff;
  border:1px solid #e5e7eb;
  z-index: 1;
}

/* Piccolo ritocco leggibilità testo nella modale */
.detail__title{margin:6px 0 10px;font-weight:800;letter-spacing:.2px;
  font-size:clamp(20px,2.2vw,26px);color:#7c3aed;}
.detail__obj{margin:12px 0 18px;font-size:16px;line-height:1.7;color:#374151}
.detail__steps{margin:0;padding-left:1.25rem;font-size:16px;line-height:1.7;color:#1f2937}
.detail__steps li{margin-bottom:10px}
.detail__tips{margin-top:16px;padding:12px 14px;border-left:4px solid #7c3aed;
  background:#f9fafb;border-radius:10px;font-size:15px;line-height:1.6;color:#374151}