/* MED AI DX Sales Hub v39: Training manual. Everything is prefixed .tr- so nothing else in the Hub is touched. */
.tr-pg{padding-bottom:28px}
.tr-off{background:#FFF4E0;color:#7A4A00;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.35;margin:12px 0 0}
.tr-hero{margin-top:14px;padding:16px}
.tr-lvl{display:flex;align-items:center;gap:12px}
.tr-lv{width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#F28C1A,#E0630F);color:#fff;font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #153968,0 6px 14px rgba(21,57,104,.25);border:3px solid #fff;flex:none}
.tr-lvl small{display:block;font-size:12px;font-weight:700;letter-spacing:.9px;color:var(--gray)}.tr-lvl b{font-size:22px;color:var(--navy)}
.tr-xp{margin-left:auto;font-size:15px;color:var(--gray);font-weight:700}.tr-xp b{font-size:26px;color:var(--teal)}
.tr-bar{height:9px;border-radius:9px;background:#E3E9F1;overflow:hidden;margin-top:6px}.tr-bar i{display:block;height:100%;border-radius:9px;background:var(--teal);transition:width .4s}
.tr-hero .tr-bar{height:12px;margin-top:14px}.tr-next{font-size:14px;color:var(--gray);margin-top:7px}
.tr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.tr-stats .card{padding:12px 6px;text-align:center}.tr-stats b{display:block;font-size:26px;color:var(--navy);line-height:1.1}.tr-stats em{font-style:normal;font-size:15px;color:var(--gray);font-weight:700}.tr-stats span{font-size:13px;color:var(--gray);font-weight:700;letter-spacing:.4px}
.tr-cont{margin-top:14px;justify-content:flex-start;text-align:left;padding:14px 16px}.tr-cont span{display:flex;flex-direction:column;line-height:1.2;min-width:0}.tr-cont small{font-size:14px;font-weight:600;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tr-sbox{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #CFD9E6;border-radius:15px;padding:0 12px;margin-top:16px;color:var(--gray)}
.tr-sbox input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;padding:13px 0;color:var(--ink)}.tr-sbox:focus-within{border-color:var(--teal)}
.tr-chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}.tr-chips::-webkit-scrollbar{display:none}
.tr-chip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:8px 14px;border-radius:99px;background:#fff;border:1.5px solid #CFD9E6;font-weight:700;font-size:14px;color:var(--navy)}
.tr-chip.tr-pinned{background:var(--navy);border-color:var(--navy);color:#fff}
.tr-res{margin-top:10px;overflow:hidden}.tr-none{color:var(--gray);padding:16px 4px;font-size:15px}
.tr-rr{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line);color:var(--navy)}.tr-rr:first-child{border-top:0}
.tr-rt{flex:1;min-width:0}.tr-rt b{display:block;font-size:16px}.tr-rt small{color:var(--gray);font-size:13px}
.tr-n{flex:none;min-width:38px;text-align:center;padding:5px 6px;border-radius:9px;background:var(--hc);color:#fff;font-weight:800;font-size:13px}
.tr-pin{display:flex;align-items:center;gap:12px;padding:14px;margin-top:16px;border:2px solid var(--navy);background:linear-gradient(135deg,#fff,#E9F6F7);color:var(--navy)}
.tr-pin>div{flex:1;min-width:0}.tr-pin small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.8px;color:var(--teal)}.tr-pin b{display:block;font-size:19px}.tr-pin span:not(.tr-pn){display:block;font-size:14px;color:var(--gray);line-height:1.3;margin-top:2px}
.tr-pn{width:42px;height:42px;border-radius:12px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.tr-h{font-size:19px;font-weight:800;color:var(--navy);margin:22px 2px 10px}
.tr-shelf{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}.tr-shelf::-webkit-scrollbar{display:none}
.tr-sb{display:flex;flex-direction:column;align-items:center;gap:5px;width:70px;flex:none;text-align:center}.tr-sb small{font-size:11.5px;font-weight:700;color:var(--gray);line-height:1.15}.tr-sb.on small{color:var(--navy)}
.tr-bdg{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#DDE3EC;color:#8793A5;position:relative;flex:none;border:3px solid #fff;box-shadow:0 2px 6px rgba(21,57,104,.15)}
.tr-bdg.on{background:linear-gradient(145deg,var(--hc),#153968);color:#fff;box-shadow:0 3px 0 rgba(21,57,104,.55),0 6px 14px rgba(21,57,104,.22)}
.tr-bdg i{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:#2E9E5B;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.tr-chs{overflow:hidden}.tr-ch{border-top:1px solid var(--line)}.tr-ch:first-child{border-top:0}
.tr-chh{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;text-align:left;color:var(--navy)}.tr-chh>svg:last-child{flex:none;transition:transform .2s;color:var(--gray)}.tr-ch.open .tr-chh>svg:last-child{transform:rotate(90deg)}
.tr-cn{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:2.5px solid var(--hc,#9AA7B8);color:var(--hc,#53606f);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center}.tr-cn.ok{background:var(--hc,#2E9E5B);color:#fff}
.tr-ct{flex:1;min-width:0}.tr-ct b{display:block;font-size:16.5px;line-height:1.2}.tr-ct small{display:block;font-size:13px;color:var(--gray);margin-top:2px}
.tr-cl{display:none;padding:0 8px 10px 56px}.tr-ch.open .tr-cl{display:block}
.tr-li{display:flex;align-items:center;gap:10px;padding:10px 6px;font-size:15px;color:var(--navy);border-radius:10px;min-height:44px}.tr-li:active{background:var(--panel)}
.tr-li i{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #B8C3D2;display:flex;align-items:center;justify-content:center;color:#fff}.tr-li.dn i{background:#2E9E5B;border-color:#2E9E5B}
.tr-li span{flex:1;min-width:0;line-height:1.25}.tr-li small{color:var(--gray);font-size:12.5px;flex:none}.tr-li.cur{background:var(--tint);font-weight:700}.tr-li.ck span{font-style:italic}
.tr-adm{margin-top:18px;display:flex;flex-direction:column;gap:8px;align-items:stretch}.tr-reset{font-size:14px;color:var(--gray);text-decoration:underline;padding:8px}

/* lesson + check pages */
.tr-top{background:linear-gradient(160deg,#153968,#1D4C86);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 14px;border-radius:0 0 26px 26px;position:relative}
.tr-top:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--hc,var(--teal));border-radius:0 0 26px 26px;opacity:.95}
.tr-tr{display:flex;align-items:center;gap:8px}.tr-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#7FE6EC;flex:none;margin-left:-6px}
.tr-tt{flex:1;min-width:0}.tr-tt small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.8px;color:#9FD9DE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-tt b{font-size:18px}
.tr-toc{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:14px;padding:9px 12px;border-radius:12px;min-height:40px}
.tr-steps{display:flex;align-items:center;margin:10px 2px 0}.tr-steps u{flex:1;height:3px;background:rgba(255,255,255,.28);min-width:4px}
.tr-dot{flex:none;width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,255,255,.55);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.tr-dot.dn{background:#2E9E5B;border-color:#2E9E5B}.tr-dot.cur{background:#F28C1A;border-color:#fff;transform:scale(1.12);box-shadow:0 2px 8px rgba(0,0,0,.3)}.tr-dot.flag{border-style:dashed}
.tr-track{height:6px;background:rgba(255,255,255,.2);border-radius:6px;margin-top:12px;overflow:hidden}.tr-track i{display:block;height:100%;background:#7FE6EC;border-radius:6px}
.tr-lh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:18px 0 12px}.tr-lh h2{font-size:24px;line-height:1.15;color:var(--navy);letter-spacing:-.3px}.tr-lh h2:focus{outline:0}
.tr-min{flex:none;display:inline-flex;align-items:center;gap:4px;background:var(--tint);color:#00727A;font-weight:700;font-size:13px;padding:5px 10px;border-radius:99px;margin-top:3px}
.tr-shot{position:relative;margin:0;border-radius:18px;overflow:hidden;border:2px solid #fff;box-shadow:0 8px 22px rgba(21,57,104,.2);background:#fff;width:100%}
.tr-shot img{display:block;width:100%;height:100%;object-fit:fill}.tr-shot svg{position:absolute;inset:0;width:100%;height:100%}
.tr-pin-n{position:absolute;transform:translate(-45%,-45%);width:26px;height:26px;border-radius:50%;background:#F28C1A;color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tr-co{list-style:none;display:flex;flex-direction:column;gap:7px;margin:14px 0 4px}.tr-co li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--navy)}
.tr-co b{flex:none;width:26px;height:26px;border-radius:50%;background:#F28C1A;color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center}
.tr-body{margin-top:14px}.tr-body p{font-size:17px;line-height:1.5;color:var(--ink);margin:0 0 12px}
.tr-box{display:flex;flex-direction:column;gap:4px;border-radius:16px;padding:13px 15px;margin-top:6px;font-size:16px;line-height:1.4}.tr-box b{display:flex;align-items:center;gap:6px;font-size:14px;letter-spacing:.3px}
.tr-box.tr-tip{background:var(--tint);color:#064E54;border-left:5px solid var(--teal)}.tr-box.tr-note{background:#FFF4E0;color:#6B3F00;border-left:5px solid #F28C1A}
.tr-lk{display:block;padding:6px 0;color:var(--navy);text-decoration:underline;font-weight:700}
.tr-nav{display:flex;gap:10px;margin-top:20px}.tr-nav .obtn{flex:0 0 38%}.tr-nav .pbtn{flex:1}
.tr-dn{display:flex;align-items:center;justify-content:center;gap:6px;color:#1E7F46;font-weight:700;font-size:14px;margin-top:12px}
.tr-ckc{margin-top:18px;padding:18px}.tr-ckc h2{font-size:22px;color:var(--navy)}.tr-ckc p{color:var(--gray);font-size:15px;line-height:1.4;margin:6px 0 14px}
.tr-ck{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:14px;border:2px solid #D5DEEA;margin-bottom:9px;font-size:16.5px;color:var(--navy);line-height:1.3;min-height:56px}
.tr-ck i{flex:none;width:28px;height:28px;border-radius:9px;border:2.5px solid #9AA7B8;display:flex;align-items:center;justify-content:center;color:#fff}.tr-ck.on{border-color:#2E9E5B;background:#EDF8F1}.tr-ck.on i{background:#2E9E5B;border-color:#2E9E5B}
.tr-cnt{text-align:center;font-weight:700;color:var(--gray);font-size:14px;margin-top:4px}
.tr-pg .pbtn:disabled{background:#B9C4D2}

/* badge screen */
.tr-bh{background:linear-gradient(160deg,var(--hc),#153968)}
.tr-win{position:relative;overflow:hidden;text-align:center;padding:30px 18px 24px;margin-top:18px}
.tr-burst{position:absolute;left:50%;top:48px;width:230px;height:230px;margin-left:-115px;background:var(--hc);opacity:.16;clip-path:polygon(50% 0,59% 14%,75% 7%,77% 24%,93% 25%,87% 41%,100% 50%,87% 59%,93% 75%,77% 76%,75% 93%,59% 86%,50% 100%,41% 86%,25% 93%,23% 76%,7% 75%,13% 59%,0 50%,13% 41%,7% 25%,23% 24%,25% 7%,41% 14%)}
.tr-big{position:relative;display:flex;justify-content:center;margin:34px 0 4px}.tr-big .tr-bdg{animation:trpop .6s cubic-bezier(.2,1.6,.4,1) both}
.tr-wn{position:relative;font-size:28px;font-weight:800;color:var(--navy);margin-top:16px;letter-spacing:-.4px}.tr-ws{position:relative;color:var(--gray);font-size:16px;margin-top:4px}
.tr-xpp{position:relative;display:inline-block;margin-top:16px;background:#F28C1A;color:#fff;font-weight:800;font-size:17px;padding:8px 18px;border-radius:99px;transform:rotate(-2deg);box-shadow:0 3px 0 #153968}
.tr-wl{position:relative;color:var(--navy);font-weight:700;margin-top:14px;font-size:15px}.tr-thx{text-align:center;color:var(--gray);line-height:1.45;margin:16px 6px}
.tr-conf{position:absolute;inset:0;pointer-events:none}.tr-conf i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.9;animation:trfall 2.6s ease-in both}
@keyframes trfall{to{transform:translateY(420px) rotate(540deg);opacity:0}}@keyframes trpop{from{transform:scale(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.tr-conf i,.tr-big .tr-bdg{animation:none}.tr-conf{display:none}.tr-bar i{transition:none}}

/* drawer + team */
.tr-toc-l .tr-tg{margin-bottom:6px}.tr-tgh{display:flex;align-items:center;gap:10px;padding:8px 0 2px;color:var(--navy)}.tr-tgh b{flex:1;font-size:16.5px}.tr-tgh small{color:var(--gray);font-weight:700}.tr-tgh .tr-cn{width:28px;height:28px;font-size:14px}
.tr-toc-l .tr-li{padding-left:8px}
.tr-ts{color:var(--gray);padding:6px 0 10px;font-size:15px}.tr-tu{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.tr-tu small{display:block;color:var(--gray);font-size:12.5px}.tr-tu b{color:var(--navy);font-size:15px}.tr-tn{text-align:right;flex:none}
@media (min-width:700px){.tr-lh h2{font-size:28px}.tr-body p{font-size:18px}}
.tr-shtop{position:sticky;top:0;z-index:3;background:#fff;padding-top:8px;padding-bottom:10px;border-bottom:1px solid var(--line)}
