/* PNL — stile IDENTICO a Training/Autoipnosi (con hardening mobile) */
:root{
  --brand1:#7c3aed; --brand2:#8b5cf6; --brand3:#06b6d4;
  --brand-grad:linear-gradient(100deg,var(--brand1),var(--brand2) 45%,var(--brand3));
  --text:#0f172a; --muted:#6b7280; --card:#ffffffcc; --radius:18px;
  --shadow:0 14px 36px rgba(2,6,23,.08);
  --title-shine-duration: 6s;
}

*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow-x:hidden}
img,svg,video,canvas{max-width:100%; height:auto; display:block}

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;
}
.container{max-width:1180px;margin:0 auto;padding:0 16px;width:100%}

/* Header */
.ta-header{position:sticky;top:0;z-index:50;background:var(--brand-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:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center
}
.ta-brand{display:flex;align-items:center;gap:12px;justify-self:center;min-width:0}
.ta-header__icon{width:42px;height:42px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}
.title{margin:0;font-weight:900;letter-spacing:.2px;white-space:nowrap;font-size:clamp(22px,3.2vw,34px);position:relative;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.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}
@keyframes gloss{from{background-position-x:200%}to{background-position-x:-200%}}
.ta-header__cta{justify-self:end;white-space:nowrap}
@media (max-width:640px){
  .ta-header__inner{grid-template-columns:auto 1fr auto}
  .ta-header__icon{width:36px;height:36px}
  .ta-brand{gap:10px}
  .title{white-space:normal}
}

/* Buttons */
.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;transition:transform .15s}
.btn--pill:hover{transform:translateY(-1px)}
.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--ghost{padding:10px 16px;background:#fff;color:var(--brand1);border:1px solid #e5e7eb}
.btn--ghost:hover{box-shadow:0 10px 24px rgba(124,58,237,.16)}

/* Intro */
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)}
.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}
.ta-four{margin:10px 0 0;color:var(--text);font-weight:600}
.ai-ul{margin:8px 0 0 18px;line-height:1.55;color:var(--text)}
.tip{margin-top:14px;color:var(--muted)}

/* Cards */
.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}

/* Pulsanti card */
.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:1px solid #e5e7eb;padding:10px 16px;border-radius:9999px;box-shadow:0 6px 14px rgba(15,23,42,.08)}
.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 dettaglio */
.detail{position:fixed;inset:0;background:rgba(2,6,23,.60);backdrop-filter:blur(3px);display:none;z-index:200}
.detail[hidden]{display:none}
.detail:not([hidden]){display:block}
.detail__content{
  background:#fff;color:#0f172a;border-radius:18px;
  width:min(92vw,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:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:calc(28px + env(safe-area-inset-bottom))
}
.detail h1,.detail h2{color:#7c3aed;margin:10px 0}
.detail ol,.detail ul{margin-left:1.25rem}
.detail__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start;margin-top:12px}
.detail__actions .btn{font-size:16px;padding:12px 16px}
@media (min-width:561px){.detail__actions .btn{font-size:15px;padding:10px 16px}}

/* Immagine */
.detail__img{max-width:100%;width:100%;height:auto;max-height:48vh;object-fit:cover;border-radius:12px;margin:12px 0;box-shadow:0 10px 24px rgba(2,6,23,.08)}

/* Seek bar */
.media-bar{display:flex;align-items:center;gap:10px;margin:12px 0 8px}
.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}

/* Chiudi sticky */
.btn-close{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));display:block;margin:10px auto 0;font-size:18px;font-weight:800;padding:12px 22px;border-radius:9999px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 14px 28px rgba(2,6,23,.12);color:var(--brand1);z-index:1}

/* No-scroll quando modale aperta */
body.no-scroll{overflow:hidden}

/* Responsive & motion */
@media (max-width:640px){.card img{height:140px}}
@media (prefers-reduced-motion:reduce){.btn--pill::before,.title--gloss::after,.card::before,.card::after{animation:none !important;transition:none !important}}