/* IronFlow v6 — Player del flow (palco chiaro, pannello, recupero, sforzo, fine). */
.pl{background:var(--stage);color:var(--ink)}
.pl-top{position:absolute;top:0;left:0;right:0;padding:14px 14px 0;z-index:4;display:flex;align-items:center;gap:10px}
.ib{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink)}
.rest .ib,.intro .ib{background:var(--surf2);color:var(--tx)}
.ib svg{width:18px;height:18px}
.bars{flex:1;display:flex;gap:3px}
.bars i{flex:1;height:4px;border-radius:2px;background:rgba(20,21,22,.12);overflow:hidden;position:relative}
.rest .bars i,.intro .bars i{background:rgba(255,255,255,.12)}
.bars i b{position:absolute;inset:0;background:var(--ink);transform-origin:left;transition:transform .3s}
.rest .bars i b,.intro .bars i b{background:var(--tx)}
.bars i.cur b{background:#6E8C00}
.rest .bars i.cur b{background:var(--volt)}
.eta{font-size:11.5px;color:var(--ink2);position:absolute;top:60px;right:16px;z-index:4}
.rest .eta,.intro .eta{color:var(--tx3)}
.blk{position:absolute;top:60px;left:16px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);z-index:4}
.rest .blk,.intro .blk{color:var(--tx3)}
.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:84px 10px 8px}
.stage img.loop{height:100%;max-height:100%;max-width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
/* clip a fondo scuro: palco del colore del clip, bordi sfumati per non vedere il riquadro */
.stage.dk img.loop{mix-blend-mode:normal;aspect-ratio:auto;width:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 8%,#000 92%,transparent);
  mask-composite:intersect}
.pl.dk .blk,.pl.dk .eta{color:rgba(255,255,255,.82)}
.pl.dk .bars i{background:rgba(255,255,255,.25)}
.pl.dk .bars i b{background:#fff}
.fallback{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink3)}
.fallback small{font-size:12px}
.side-badge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:20px;letter-spacing:.06em}
.panel{background:#fff;border-radius:26px 26px 0 0;padding:16px 18px 20px;box-shadow:0 -10px 30px rgba(20,21,22,.06);position:relative;z-index:3}
.big{display:flex;align-items:baseline;gap:10px}
.big .n{font-size:66px;font-weight:800;line-height:.9;font-stretch:80%}
.big .n small{font-size:28px;font-weight:700}
.big .s{color:var(--ink2);font-size:13px}
.exname{font-size:21px;font-weight:700;margin:6px 0 10px;line-height:1.15}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.chip{font-size:12px;font-weight:600;padding:5px 9px;border-radius:9px;background:var(--chip);color:var(--ink);display:flex;align-items:center;gap:6px}
.chip.rpe{background:var(--ink);color:#fff}
.tank{display:inline-flex;gap:2px}
.tank i{width:5px;height:11px;border-radius:2px;background:var(--volt)}
.tank i.o{background:transparent;box-shadow:inset 0 0 0 1px #6F747A}
.tank i.h{background:transparent;box-shadow:inset 0 0 0 1px var(--volt)}
.tech{border-top:1px solid #EDEDEA;padding-top:10px;margin-bottom:12px}
.tech-h{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.tech-h svg{width:16px;height:16px;transition:.25s}
.tech.open .tech-h svg{transform:rotate(180deg)}
.tech ul{list-style:none;display:grid;gap:7px;max-height:0;overflow:hidden;transition:max-height .35s var(--ease),margin .35s}
.tech.open ul{max-height:220px;margin-top:10px}
.tech li{display:flex;gap:10px;align-items:center;font-size:14.5px}
.tech li i{width:22px;height:22px;border-radius:7px;background:var(--ink);color:var(--volt);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11.5px;font-weight:800;flex:none}
.tech li.setup{color:var(--ink2);font-size:13px}
.tech li.setup i{background:var(--chip);color:var(--ink2)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.next{font-size:12.5px;color:var(--ink2);line-height:1.3;min-width:0}
.next b{color:var(--ink);font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-done{height:52px;padding:0 24px;border-radius:28px;background:var(--ink);color:#fff;font-weight:700;font-size:16px;flex:none}
.knee{position:absolute;right:14px;top:80px;z-index:4;background:#fff;border-radius:16px;padding:6px 10px;font-size:11.5px;font-weight:700;color:#A15C00}
.ring-time{position:relative;width:92px;height:92px;flex:none}
.ring-time svg{transform:rotate(-90deg)}
.ring-time .v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800}
.dark{background:var(--bg);color:var(--tx);align-items:center;justify-content:center}
.cd{font-size:200px;font-weight:800;font-stretch:70%;animation:pop .9s var(--ease)}
.cd.volt{color:var(--volt)}
@keyframes pop{from{transform:scale(1.4);opacity:0}30%{opacity:1}to{transform:scale(1);opacity:1}}
.cd-cap{position:absolute;left:22px;right:22px;bottom:46px}
.cd-cap b{font-size:24px;display:block}
.intro{background:var(--bg)}
.intro .scroll{padding-top:84px}
.car{display:flex;gap:8px;overflow-x:auto;margin:14px -16px;padding:0 16px;scrollbar-width:none}
.car .thumb{width:120px;flex:none}
.sum{display:grid;gap:10px;margin-top:6px}
.sum>div{display:flex;gap:12px;align-items:center}
.sum .thumb{width:50px;border-radius:10px;flex:none}
.sum b{font-size:14.5px;font-weight:600}.sum small{color:var(--tx3);font-size:12.5px;display:block}
.autostart{position:absolute;left:16px;right:16px;bottom:18px;z-index:5}
.autostart .btn{width:100%;position:relative;overflow:hidden}
.autostart .btn i{position:absolute;left:0;top:0;bottom:0;width:100%;background:rgba(22,27,0,.16);transform-origin:left;transform:scaleX(0)}
.rest{background:var(--bg);color:var(--tx)}
.rest-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 18px 18px}
.ring{position:relative;width:236px;height:236px}
.ring svg{transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .c .t{font-size:60px;font-weight:800;font-stretch:80%}
.ring .c small{color:var(--tx3);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.ring .c small.ok{color:var(--volt)}
.adj{display:flex;gap:10px;margin:20px 0}
.adj button{height:42px;padding:0 16px;border-radius:22px;border:1px solid var(--line2);font-weight:600}
.nx{width:100%;background:var(--surf);border-radius:18px;padding:12px;display:flex;gap:12px;align-items:center}
.nx .thumb{width:64px;border-radius:12px;flex:none}
.nx small{font-size:11px;letter-spacing:.1em;color:var(--tx3);text-transform:uppercase;font-weight:600}
.nx b{display:block;font-size:15.5px;margin:2px 0}
.nx span{font-size:12.5px;color:var(--tx2)}
.tip{margin-top:10px;width:100%;background:var(--volt-soft);color:var(--volt);border-radius:14px;padding:10px 12px;font-size:13px}
.eff{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:16px 0 6px}
.eff button{height:74px;border-radius:16px;background:#F1F1EE;font-size:26px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink)}
.eff button small{font-size:10.5px;font-weight:600;color:var(--ink2)}
.edit{display:flex;gap:10px;margin-top:14px}
.step{flex:1;background:#F1F1EE;border-radius:14px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;color:var(--ink)}
.step button{width:32px;height:32px;border-radius:10px;background:#fff;font-weight:800;font-size:18px}
.step b{font-size:18px}.step small{display:block;font-size:10.5px;color:var(--ink3);text-align:center}
.fin{background:var(--bg)}
.fin .scroll{padding-top:56px;text-align:center}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.kpis div{background:var(--surf);border-radius:16px;padding:14px 6px}
.kpis b{font-size:26px;display:block;font-stretch:80%;font-weight:800}
.kpis small{font-size:11px;color:var(--tx3);letter-spacing:.06em;text-transform:uppercase}
.lst{text-align:left;background:var(--surf);border-radius:16px;padding:6px 14px}
.lst div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:14px;gap:10px}
.lst div:first-child{border:0}
.lst span{color:var(--tx2)}

.check-q{margin-bottom:18px}.check-q b{display:block;font-size:15px;margin-bottom:8px}
.check-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.check-opts button{height:56px;border-radius:14px;background:var(--surf);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--tx2)}
.check-opts button.on{background:var(--volt);color:var(--on-volt);border-color:transparent}
.swap{font-size:12px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;margin:-4px 0 12px;display:inline-block}
.btn-done[disabled]{opacity:.35}
.pl-top{padding-top:calc(14px + var(--safe-top))}

/* panoramica del flow */
.ovw{display:grid;gap:8px}
.ovw-b{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px;border-radius:14px;background:var(--surf2);color:var(--tx)}
.ovw-b b{display:block;font-size:15px}.ovw-b small{display:block;color:var(--tx3);font-size:12px;line-height:1.35;margin-top:2px}
.ovw-b>div{flex:1;min-width:0}
.ovw-m{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--surf3);color:var(--tx2)}
.ovw-b.done .ovw-m{background:var(--volt-soft);color:var(--volt)}
.ovw-b.skipped{opacity:.75}
.ovw-b.current{outline:2px solid var(--volt);outline-offset:-2px}.ovw-b.current .ovw-m{background:var(--volt);color:#141516}
.ovw-go{font-size:12px;font-weight:700;color:var(--volt);flex:none}
