/* App 35 · Basiri v4 — rebuilt on the NewHuman architecture (see RESEARCH.md). One CSS file: tokens → chrome → components → screens. */
:root{
  --ui:'Vazirmatn',system-ui,sans-serif; --disp:'Estedad','Vazirmatn',sans-serif;
  --ink:#111118; --ink2:#6B6B78; --ink3:#A3A3AE; --line:#EEEEF3; --bg:#FFFFFF; --soft:#F7F7FA;
  --vio:#7B3FE4; --vio2:#9A6AF3; --lav:#F4EFFF; --lav2:#E9E0FE; --yel:#F9B90B; --grn:#1FAF6A; --grn-bg:#EAF8F0; --red:#FF3B30; --org:#FF8A00;
  --r:24px; --r-s:16px; --sh:0 1px 2px rgba(20,12,60,.04),0 8px 24px rgba(20,12,60,.06);
  --spring:cubic-bezier(.32,1.25,.6,1); --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
input,textarea{font:inherit;color:inherit;border:0;outline:0;background:none;min-width:0;resize:none}
html,body{height:100%;background:#fff}
body{font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
.fa-num{font-feature-settings:"ss01"}

/* ---------- presentation page ---------- */
.stage{height:100vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:56px;padding:24px 40px}
.side{max-width:330px;justify-self:end}
.side.l{justify-self:start}
.side .eb{font:600 13px var(--ui);color:var(--vio);margin-bottom:10px}
.side h1{font:800 34px/1.35 var(--disp);margin-bottom:12px}
.side p{font:400 15px/1.9 var(--ui);color:var(--ink2)}
.jump{display:flex;flex-direction:column;gap:4px;margin-top:22px}
.jump button{height:40px;padding:0 14px;border-radius:12px;font:500 14px var(--ui);display:flex;align-items:center;justify-content:space-between;color:var(--ink2)}
.jump button:hover{background:var(--soft)}
.jump button.on{background:var(--lav);color:var(--vio);font-weight:700}
.docs{display:flex;flex-direction:column;gap:8px}
.docs a{font:500 14px var(--ui);color:var(--vio);text-decoration:none}
.back{position:fixed;top:14px;left:14px;z-index:100;height:34px;padding:0 14px;border-radius:17px;display:flex;align-items:center;background:var(--soft);color:#000;font:600 13px system-ui,sans-serif;text-decoration:none;direction:ltr}
@media(max-width:1100px){.stage{grid-template-columns:1fr;justify-items:center}.side{display:none}}

/* ---------- device ---------- */
.dev{position:relative;width:406px;height:860px;border-radius:66px;background:#0B0B0F;padding:8px;box-shadow:0 0 0 1.5px #2A2A30,0 50px 90px -30px rgba(40,20,90,.35),0 20px 40px -20px rgba(0,0,0,.25);flex:none}
.scr{position:relative;width:390px;height:844px;border-radius:58px;overflow:hidden;background:var(--bg);isolation:isolate}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000;z-index:60}
.sbar{position:absolute;top:0;left:0;right:0;height:54px;z-index:55;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0 38px;direction:ltr;font:600 16px -apple-system,'SF Pro Text',system-ui,sans-serif;pointer-events:none}
.sbar.lt{color:#fff}
.hbar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:136px;height:5px;border-radius:3px;background:#000;z-index:60;pointer-events:none}
.dev{transform:scale(var(--fit,1));transform-origin:center}

/* ---------- navigation stack ---------- */
.stk{position:absolute;inset:0}
.pg{position:absolute;inset:0;background:var(--bg);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:124px}
.pg::-webkit-scrollbar{display:none}
.pg.push{animation:push .42s var(--ease);box-shadow:0 0 40px rgba(0,0,0,.08);z-index:2}
.pg.pop{animation:pop .32s var(--ease) forwards;z-index:3}
@keyframes push{from{transform:translateX(-100%)}}
@keyframes pop{to{transform:translateX(-100%)}}
.pg.under{animation:dim .42s var(--ease)}
@keyframes dim{to{transform:translateX(30%)}}
.fadein{animation:fi .35s var(--ease)}
@keyframes fi{from{transform:translateY(8px)}}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:20;height:106px;padding:54px 16px 0;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);transition:box-shadow .2s}
.hd.sc{box-shadow:0 .5px 0 rgba(0,0,0,.12)}
.hd h2{position:absolute;left:0;right:0;bottom:15px;text-align:center;font:700 17px var(--ui);pointer-events:none}
.hd h2 small{display:block;font:500 11.5px var(--ui);color:var(--ink2);margin-top:1px}
.ibtn{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 8px rgba(0,0,0,.04);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .2s var(--spring)}
.ibtn:active{transform:scale(.9)}
.ibtn .dot{position:absolute;top:10px;right:11px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
.pts{height:38px;padding:0 12px 0 14px;border-radius:19px;background:#fff;box-shadow:0 0 0 1px var(--line),0 2px 8px rgba(0,0,0,.04);display:flex;align-items:center;gap:6px;font:700 14px var(--ui)}
.pts.fire{background:#FFF3E6;box-shadow:none;color:#E56A00}
.lgT{padding:4px 20px 14px;font:800 32px/1.3 var(--disp)}
.lgT+p{padding:0 20px 16px;margin-top:-10px;font:400 14px var(--ui);color:var(--ink2)}
.shop{height:38px;padding:0 14px;border-radius:19px;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;gap:6px;font:600 13.5px var(--ui);background:#fff}

/* ---------- tab bar ---------- */
.tb{position:absolute;left:12px;right:12px;bottom:22px;height:78px;border-radius:30px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 10px 30px rgba(30,15,70,.12);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:0 6px;z-index:40}
.tb>button{height:64px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 11px var(--ui);color:#3A3A44;margin:0 3px;transition:background .3s var(--ease),color .3s}
.tb>button.on{background:var(--lav);color:var(--vio);font-weight:800}
.tb>button.mid{position:relative;background:none}
.tb .orb{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04),0 0 0 8px rgba(123,63,228,.08),0 10px 24px rgba(123,63,228,.28);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--spring)}
.tb .orb img{width:44px;height:44px;object-fit:contain}
.tb>button.mid.on .orb{transform:translateX(-50%) scale(1.06);box-shadow:0 0 0 2px var(--vio),0 0 0 9px rgba(123,63,228,.14),0 12px 28px rgba(123,63,228,.36)}
.tb>button.mid span{margin-top:34px}
.tb>button.mid.on span{color:var(--vio)}

/* ---------- common ---------- */
.px{padding:0 16px}
.card{background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line),var(--sh)}
.sec{display:flex;align-items:center;justify-content:space-between;padding:26px 20px 12px}
.sec h3{font:800 18px var(--disp);display:flex;align-items:center;gap:6px}
.sec button{font:500 13.5px var(--ui);color:var(--vio)}
.chip{height:24px;padding:0 10px;border-radius:12px;background:var(--soft);font:600 11.5px var(--ui);color:var(--ink2);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.chip.v{background:var(--lav);color:var(--vio)}
.chip.g{background:var(--grn-bg);color:var(--grn)}
.chip.y{background:#FFF4D6;color:#A87400}
.btn{white-space:nowrap;height:52px;border-radius:26px;display:flex;align-items:center;justify-content:center;gap:8px;font:700 16px var(--ui);width:100%;transition:transform .2s var(--spring),opacity .2s}
.btn:active{transform:scale(.97)}
.btn.blk{background:#111118;color:#fff}
.btn.vio{background:var(--vio);color:#fff;box-shadow:0 8px 20px -8px rgba(123,63,228,.6)}
.btn.out{background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.btn.sm{height:40px;border-radius:20px;font-size:14px;width:auto;padding:0 18px}
.btn:disabled{opacity:.35}
.bar{height:6px;border-radius:3px;background:#EEEEF3;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--vio);transition:width .6s var(--ease)}
.ph{background-size:cover;background-position:center;background-repeat:no-repeat}
.avs{display:flex}
.avs span{width:26px;height:26px;border-radius:50%;box-shadow:0 0 0 2px #fff;background-size:cover;background-position:center;margin-inline-start:-8px}
.avs span:first-child{margin-inline-start:0}
.ttl{font:800 16px/1.5 var(--disp)}
.sub{font:400 13px/1.7 var(--ui);color:var(--ink2)}

/* banners */
.ban{position:relative;border-radius:var(--r);overflow:hidden;color:#fff}
.ban .ph{position:absolute;inset:0}
.ban .sh{position:absolute;inset:0;background:linear-gradient(270deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.25) 48%,rgba(0,0,0,0) 70%)}
.ban .sh.b{background:linear-gradient(0deg,rgba(10,6,24,.78),rgba(10,6,24,.1) 60%,rgba(10,6,24,0))}
.ban .in{position:relative;z-index:2;padding:22px}
.ban h1{font:800 27px/1.35 var(--disp);text-shadow:0 2px 12px rgba(0,0,0,.2)}
.ban p{font:500 14px/1.8 var(--ui);opacity:.92;margin-top:4px}

/* home: hero */
.hero{height:176px;margin:4px 16px 0}
.hero .in{padding:26px 22px}
.hero .ph{transform:scaleX(-1);background-position:70% 30%!important}
/* continue card */
.cont{margin:16px 16px 0;padding:14px}
.alert{display:flex;align-items:center;gap:10px;background:var(--lav);border-radius:16px;padding:10px 12px;color:#4B2A96;font:500 12.5px/1.7 var(--ui);transition:all .35s var(--ease);overflow:hidden}
.alert.gone{max-height:0;padding:0 12px;margin:0;opacity:0}
.alert b{color:var(--vio);font-weight:700;flex:none;cursor:pointer}
.alert .x{flex:none;color:var(--ink3)}
.cont .row{display:flex;gap:14px;margin-top:14px}
.cont .art{width:112px;flex:none;border-radius:18px;background:#FAF7F2 center/cover}
.cont h4{font:800 19px/1.5 var(--disp);margin-top:8px}
.cont .orbit{display:flex;justify-content:space-between;font:700 13px var(--ui);margin:10px 0 6px}
.cont .orbit span{color:var(--ink3);font-weight:500}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 12px;text-align:center}
.stats3 div+div{border-inline-start:1px solid var(--line)}
.stats3 b{display:block;font:800 16px var(--disp)}
.stats3 small{font:500 11px var(--ui);color:var(--ink2)}
/* podcast poster */
.pod{margin:16px 16px 0;height:190px;background:var(--yel);color:#1A1405}
.pod .obj{position:absolute;left:-10px;top:10px;bottom:0;width:210px;background:url(../img/headphones.jpg) center/cover;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15)}
.pod .in{position:absolute;right:0;top:0;bottom:0;width:62%;display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
.pod small{font:600 12.5px var(--ui);opacity:.75}
.pod h1{font:900 30px/1.2 var(--disp);color:#111;text-shadow:none;margin-top:4px}
.pod .rule{display:flex;align-items:center;gap:8px;font:600 13px var(--ui);margin:8px 0 12px}
.pod .rule:before,.pod .rule:after{content:"";flex:1;height:1px;background:rgba(0,0,0,.35)}
.pod .btn{background:#111;color:#fff;height:38px;font-size:13px;width:auto;padding:0 16px;align-self:center}
/* content rail */
.rail{display:flex;gap:12px;overflow-x:auto;padding:0 16px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{display:none}
.pc{flex:none;width:172px;scroll-snap-align:start;padding:6px;text-align:right}
.pc .im{position:relative;height:150px;border-radius:18px;background:linear-gradient(160deg,#FBFAFF,#EFEAFB);overflow:hidden}
.pc .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pc .im img.fit{object-fit:contain;padding:14px;mix-blend-mode:multiply}
.pc .im .chip{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92)}
.pc .im .lk{position:absolute;top:auto;bottom:8px;right:8px;background:rgba(17,17,24,.72);color:#fff}
.pc .im .nw{position:absolute;top:8px;right:auto;left:8px;background:#FFE08A;color:#6B4A00}
.pc .b{padding:10px 6px 6px}
.pc h5{font:700 14.5px/1.6 var(--ui);min-height:46px}
.pc .m{display:flex;align-items:center;gap:4px;font:500 11.5px var(--ui);color:var(--ink3);margin-top:2px}
.pc .f{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.pc .f b{font:800 13px var(--ui)}
.pc .f .btn{height:34px;font-size:12.5px;padding:0 14px;width:auto}
/* events */
.evt{display:flex;align-items:center;gap:12px;padding:12px}
.evt+.evt{border-top:1px solid var(--line)}
.date{width:54px;height:58px;border-radius:16px;background:var(--lav);color:var(--vio);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.date b{font:800 20px/1 var(--disp)}.date small{font:600 11px var(--ui);margin-top:3px}
.evt .t{flex:1;min-width:0}
.evt h6{font:700 14.5px var(--ui)}
.evt p{font:400 12px var(--ui);color:var(--ink2);margin-top:2px}
/* challenge */
.chal{margin:0 16px;height:200px}
.chal .in{position:absolute;inset:auto 0 0 0;padding:18px 20px}
.chal h1{font-size:23px}
.chal .ft{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.chal .ft small{font:500 12px var(--ui);opacity:.9;margin-inline-start:8px}
.chal .btn{background:#fff;color:#111;height:38px;font-size:13.5px;width:auto;padding:0 18px}
.chal .btn.on{background:var(--grn);color:#fff}
/* leaderboard */
.lb{margin:0 16px;padding:6px 14px}
.lbr{display:flex;align-items:center;gap:12px;height:62px}
.lbr+.lbr{border-top:1px solid var(--line)}
.lbr .n{width:22px;font:800 15px var(--disp);color:var(--ink3);text-align:center}
.lbr .n.g{color:#D49A00}
.lbr .a{width:40px;height:40px;border-radius:50%;background:center/cover}
.lbr .t{flex:1}.lbr b{font:700 14.5px var(--ui)}.lbr small{display:block;font:400 12px var(--ui);color:var(--ink2)}
.lbr .s{font:800 14px var(--disp);color:var(--vio)}
.lbr.me{background:var(--lav);margin:0 -14px;padding:0 14px;border-radius:0 0 20px 20px}

/* path tab */
.phero{height:290px;margin:4px 16px 0;text-align:center}
.phero .sh{background:linear-gradient(180deg,rgba(20,10,40,.1),rgba(20,10,40,.45))}
.phero .in{padding:22px 18px}
.phero h1{font-size:25px}
.ring{position:relative;width:96px;height:96px;margin:14px auto 4px}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 22px var(--disp)}
.ring+small{font:500 12.5px var(--ui);opacity:.9}
.days{display:flex;justify-content:center;gap:6px;margin-top:14px;direction:rtl}
.days span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font:700 11.5px var(--ui);color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.days span.d{background:rgba(255,255,255,.9);color:var(--vio)}
.days span.c{background:#fff;color:#111;box-shadow:0 0 0 3px rgba(255,255,255,.45);transform:scale(1.18)}
.pmeta{display:flex;justify-content:space-between;font:500 12px var(--ui);opacity:.85;margin-top:12px}
.st4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 16px 0}
.st4 div{height:72px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.st4 small{font:500 11px var(--ui);color:var(--ink2)}
.st4 b{font:800 16px var(--disp);display:flex;align-items:center;gap:4px}
.unit{margin:16px 16px 0;padding:18px 16px 8px}
.unit .hdr{display:flex;justify-content:space-between;align-items:flex-start}
.unit .hdr p{font:400 12.5px var(--ui);color:var(--ink2);margin-top:2px}
.unit .bar{margin:14px 0 6px}
.ur{display:flex;align-items:center;gap:12px;padding:14px 0;transition:opacity .3s}
.ur+.ur{border-top:1px solid var(--line)}
.ur .ic{width:46px;height:46px;border-radius:15px;background:var(--soft);color:var(--ink2);display:flex;align-items:center;justify-content:center;flex:none}
.ur.act .ic,.ur.nxt .ic{background:var(--lav);color:var(--vio)}
.ur.dn .ic{background:var(--grn-bg);color:var(--grn)}
.ur .t{flex:1;min-width:0}
.ur h6{font:700 15px var(--ui);display:flex;align-items:center;gap:8px}
.ur h6 em{font:600 12px var(--ui);font-style:normal;color:var(--grn)}
.ur p{font:400 12px var(--ui);color:var(--ink2);margin-top:2px}
.ur .go{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 1.5px var(--lav2);color:var(--vio);display:flex;align-items:center;justify-content:center;flex:none}
.ur .ok{width:28px;height:28px;border-radius:9px;background:var(--grn);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ur.lk{opacity:.42}
.ur .pb{margin-top:8px;display:flex;align-items:center;gap:8px}
.ur .pb .bar{flex:1;margin:0;height:5px}
.ur .pb .btn{height:30px;font-size:12px;padding:0 12px;width:auto;background:var(--lav);color:var(--vio)}

/* coach */
.chero{margin:4px 16px 0;height:196px;border-radius:var(--r);background:linear-gradient(135deg,#F6F1FF,#E8DEFF);position:relative;overflow:hidden;color:var(--ink)}
.chero .ph{position:absolute;left:0;top:0;bottom:0;width:44%;-webkit-mask:linear-gradient(90deg,#000 55%,transparent);mask:linear-gradient(90deg,#000 55%,transparent)}
.chero .rings{position:absolute;inset:0;background:repeating-radial-gradient(circle at 20% 60%,transparent 0 22px,rgba(123,63,228,.05) 22px 23px)}
.chero .in{position:absolute;right:0;top:0;bottom:0;width:62%;padding:24px 20px 20px 0;display:flex;flex-direction:column}
.chero h1{font:800 23px/1.35 var(--disp)}
.chero p{font:400 13px/1.8 var(--ui);color:#4E4A5E;margin-top:6px}
.chero .bs{display:flex;gap:8px;margin-top:auto}
.chero .btn{height:38px;font-size:12.5px;width:auto;padding:0 12px}
.rec{margin:16px 16px 0;padding:6px 16px}
.rec .top{display:flex;justify-content:space-between;align-items:center;height:48px}
.rec .top h3{font:800 16px var(--disp);display:flex;align-items:center;gap:6px}
.rec .top button{font:500 12.5px var(--ui);color:var(--ink2)}
.rr{display:flex;align-items:center;gap:12px;height:64px;width:100%}
.rr+.rr{border-top:1px solid var(--line)}
.rr .ic{width:40px;height:40px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex:none;color:#444}
.rr .t{flex:1;min-width:0}.rr b{font:700 14.5px var(--ui);display:block}.rr small{font:400 12px var(--ui);color:var(--ink2)}
.rr>svg:last-child{color:var(--ink3)}
.cmp{margin:16px 16px 0;height:58px;border-radius:29px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh);display:flex;align-items:center;gap:8px;padding:0 8px 0 8px}
.cmp input{flex:1;font:400 14.5px var(--ui);padding:0 8px}
.cmp input::placeholder{color:var(--ink3)}
.cmp .mic{width:42px;height:42px;border-radius:50%;background:var(--lav);color:var(--vio);display:flex;align-items:center;justify-content:center}
.cmp .snd{width:42px;height:42px;border-radius:50%;background:var(--vio);color:#fff;display:flex;align-items:center;justify-content:center}
.qs{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.qs::-webkit-scrollbar{display:none}
.qs button{flex:none;height:48px;padding:0 14px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh);display:flex;align-items:center;gap:8px;font:600 13.5px var(--ui)}
.qs button i{width:30px;height:30px;border-radius:10px;background:var(--lav);color:var(--vio);display:flex;align-items:center;justify-content:center;font-style:normal}
.wk{margin:0 16px;padding:16px;display:flex;align-items:center;gap:14px}
.wk .ring{width:70px;height:70px;margin:0;flex:none}
.wk .ring b{font-size:17px}
/* chat */
.msgs{padding:10px 16px 0;display:flex;flex-direction:column;gap:10px}
.msg{max-width:80%;padding:12px 15px;border-radius:22px;font:400 14.5px/1.85 var(--ui);animation:fi .3s var(--ease)}
.msg.u{align-self:flex-start;background:var(--vio);color:#fff;border-bottom-right-radius:8px}
.msg.a{align-self:flex-end;background:var(--soft);border-bottom-left-radius:8px}
.msg.a .who{display:flex;align-items:center;gap:6px;font:700 12px var(--ui);color:var(--vio);margin-bottom:4px}
.typing{display:inline-flex;gap:4px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:tp 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{50%{transform:translateY(-4px);opacity:.5}}
.chatin{position:sticky;bottom:0;padding:10px 12px 8px;background:linear-gradient(0deg,#fff 70%,rgba(255,255,255,0));z-index:30}
.chatin .cmp{margin:0}
.chatin .qs{padding:0 0 10px}
.chatin .qs button{height:36px;font-size:12.5px;box-shadow:0 0 0 1px var(--line)}

/* tribe */
.stories{display:flex;gap:14px;overflow-x:auto;padding:4px 16px 4px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 11.5px var(--ui)}
.story .r{width:66px;height:66px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,#7B3FE4,#FF5FA2,#FFB020,#7B3FE4)}
.story .r.seen{background:#E4E4EA}
.story .r>span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 3px #fff;background:center/cover var(--soft)}
.story .me{position:relative;background:#F1F1F5;box-shadow:none}
.story .me>span{display:flex;align-items:center;justify-content:center;color:#666}
.story .me em{position:absolute;bottom:0;left:0;width:22px;height:22px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px #fff}
.tcmp{margin:14px 16px 0;height:60px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),var(--sh);display:flex;align-items:center;gap:8px;padding:0 10px 0 8px}
.tcmp input{flex:1;font:400 14px var(--ui);padding-inline-start:8px}
.tcmp .a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.tcmp .a.l{background:var(--lav);color:var(--vio)}.tcmp .a.d{background:#111;color:#fff}
.utabs{display:flex;gap:22px;padding:0 20px;margin-top:14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.utabs::-webkit-scrollbar{display:none}
.utabs button{flex:none;height:44px;font:600 13.5px var(--ui);color:var(--ink2);position:relative}
.utabs button.on{color:var(--ink);font-weight:800}
.utabs button.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:var(--ink)}
.post{margin:14px 16px 0;padding:16px}
.post .h{display:flex;align-items:center;gap:10px}
.post .h .a{width:42px;height:42px;border-radius:50%;background:center/cover}
.post .h .t{flex:1}.post .h b{font:700 14.5px var(--ui);display:flex;align-items:center;gap:4px}.post .h small{font:400 12px var(--ui);color:var(--ink3)}
.post .h .vf{color:var(--vio)}
.post h5{font:800 15.5px/1.6 var(--disp);margin-top:12px}
.post p{font:400 14px/2 var(--ui);color:#2A2A33;margin-top:6px}
.post .im{position:relative;height:200px;border-radius:18px;margin-top:12px;overflow:hidden}
.post .im .ph{position:absolute;inset:0}
.post .poster{position:absolute;inset:0;background:linear-gradient(270deg,rgba(249,185,11,.97) 38%,rgba(249,185,11,.0) 78%);display:flex;flex-direction:column;justify-content:center;padding:0 18px;color:#1A1405}
.post .poster small{font:600 12px var(--ui)}
.post .poster strong{font:900 26px/1.3 var(--disp);max-width:60%}
.post .poster em{font:500 11px var(--ui);font-style:normal;margin-top:6px;opacity:.8;max-width:55%}
.post .acts{display:flex;align-items:center;gap:18px;margin-top:12px;color:var(--ink2);font:600 13px var(--ui)}
.post .acts button{display:flex;align-items:center;gap:6px;height:36px}
.post .acts button.on{color:#E0245E}
.post .acts .sp{flex:1}
.post .acts button.sv.on{color:var(--vio)}

/* profile */
.pcard{margin:4px 16px 0;padding:24px 16px 18px;text-align:center;background:linear-gradient(180deg,#FAFAFD,#fff)}
.pav{position:relative;width:112px;height:112px;margin:0 auto;border-radius:50%;padding:4px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.08)}
.pav span{display:block;width:100%;height:100%;border-radius:50%;background:center 20%/cover}
.pav i{position:absolute;bottom:8px;left:8px;width:16px;height:16px;border-radius:50%;background:#2BD46B;box-shadow:0 0 0 3px #fff}
.pcard h2{font:800 24px var(--disp);margin-top:12px}
.pcard>small{font:400 13px var(--ui);color:var(--ink2)}
.plan{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px;border-radius:19px;box-shadow:0 0 0 1px var(--line);margin-top:16px;font:600 13.5px var(--ui)}
.plan b{color:var(--vio);font-weight:700}.plan hr{width:1px;height:14px;border:0;background:var(--line)}
.lrow{display:flex;align-items:center;gap:12px;padding:14px 16px;width:100%}
.lrow+.lrow{border-top:1px solid var(--line)}
.lrow .ic{width:40px;height:40px;border-radius:13px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex:none}
.lrow .t{flex:1}.lrow b{font:700 14.5px var(--ui);display:block}.lrow small{font:400 12px var(--ui);color:var(--ink2)}
.lrow>svg:last-child{color:var(--ink3)}
.cur{margin:14px 16px 0;padding:16px;display:flex;gap:12px;background:linear-gradient(135deg,#FBF9FF,#F2EDFF)}
.cur .art{width:110px;border-radius:18px;background:center/cover;flex:none}
.cur .t{flex:1;min-width:0}
.cur h4{font:800 20px var(--disp);margin-top:8px}
.cur .cs{display:flex;gap:6px;margin:8px 0 10px;flex-wrap:wrap}
.cur .cs .chip{background:#fff}
.cur .ft{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.cur .ft .btn{height:38px;font-size:13px;width:auto;padding:0 14px}
.heat{margin:0 16px;padding:16px}
.heat .g{display:grid;grid-template-columns:repeat(15,1fr);gap:5px;margin-top:12px;direction:ltr}
.heat .g i{aspect-ratio:1;border-radius:5px;background:#F0F0F4}
.heat .g i.l1{background:#E2D6FC}.heat .g i.l2{background:#B89AF6}.heat .g i.l3{background:var(--vio)}
.heat .lg{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:10px;font:500 11px var(--ui);color:var(--ink3)}
.heat .lg i{width:11px;height:11px;border-radius:3px}

/* courses */
.segs{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;scrollbar-width:none}
.segs::-webkit-scrollbar{display:none}
.segs button{flex:none;height:42px;padding:0 16px;border-radius:21px;box-shadow:0 0 0 1px var(--line);display:flex;align-items:center;gap:8px;font:600 14px var(--ui);background:#fff;transition:all .25s}
.segs button em{font:700 11px var(--ui);font-style:normal;min-width:20px;height:20px;border-radius:10px;background:var(--soft);display:flex;align-items:center;justify-content:center;padding:0 5px}
.segs button.on{background:#111;color:#fff;box-shadow:none}.segs button.on em{background:rgba(255,255,255,.2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px 0}
.grid2 .pc{width:auto}
.grid2 .pc .btn.navy{background:#1B2340;color:#fff}

/* lesson */
.vid{position:relative;margin:4px 16px 0;height:220px;border-radius:var(--r);overflow:hidden}
.vid .ph{position:absolute;inset:0;transition:transform 8s linear}
.vid.pl .ph{transform:scale(1.12)}
.vid .sh{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0) 45%)}
.vid .pb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .25s var(--spring)}
.vid .pb:active{transform:translate(-50%,-50%) scale(.9)}
.vid .tl{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:10px;color:#fff;font:600 11.5px var(--ui);direction:ltr}
.vid .tl .bar{flex:1;background:rgba(255,255,255,.3);height:4px}.vid .tl .bar i{background:#fff}
.lh{padding:18px 20px 0;font:800 24px/1.45 var(--disp)}
.lh+.sub{padding:4px 20px 0}
.kp{margin:16px 16px 0;padding:6px 18px}
.kp h4{display:flex;align-items:center;gap:6px;font:800 16px var(--disp);height:52px;border-bottom:1px solid var(--line)}
.kp li{list-style:none;position:relative;padding:14px 18px 14px 0;font:400 14px/1.95 var(--ui);color:#2A2A33}
.kp li+li{border-top:1px solid var(--line)}
.kp li:before{content:"";position:absolute;right:2px;top:26px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.tip{margin:14px 16px 0;padding:16px 18px;border-radius:var(--r);background:var(--grn-bg)}
.tip h4{display:flex;align-items:center;gap:6px;font:800 15px var(--disp);color:#11804C}
.tip p{font:400 14px/1.95 var(--ui);color:#1F4D36;margin-top:6px}

/* sheet */
.dim{position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:70;animation:fo .3s}
@keyframes fo{from{opacity:0}}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;background:#fff;border-radius:34px 34px 0 0;padding:10px 20px 34px;max-height:88%;overflow-y:auto;animation:su .45s var(--spring);box-shadow:0 -10px 40px rgba(0,0,0,.12)}
@keyframes su{from{transform:translateY(100%)}}
.grab{width:38px;height:5px;border-radius:3px;background:#DADAE0;margin:0 auto 12px}
.sheet .sh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet .sh-h h3{font:800 19px var(--disp)}
.sheet .sh-h button{width:32px;height:32px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center}
.sheet .lead{font:400 14.5px/2 var(--ui);color:#2A2A33}
.breath{width:190px;height:190px;margin:10px auto 18px;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--lav) 60%,var(--lav2) 100%);display:flex;align-items:center;justify-content:center;font:800 18px var(--disp);color:var(--vio);transition:transform 4s ease-in-out;box-shadow:0 0 0 14px rgba(123,63,228,.06)}
.breath.in{transform:scale(1.18)}
.opts{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px}
.opts button{min-height:52px;padding:10px 16px;border-radius:16px;box-shadow:0 0 0 1px var(--line);font:500 14.5px/1.7 var(--ui);display:flex;align-items:center;gap:10px;transition:all .2s}
.opts button.ok{background:var(--grn-bg);box-shadow:0 0 0 1.5px var(--grn);color:#0E6B3E}
.opts button.no{background:#FFF0EF;box-shadow:0 0 0 1.5px var(--red);color:#B3261E}
.opts button.pick{background:var(--lav);box-shadow:0 0 0 1.5px var(--vio);color:var(--vio);font-weight:700}
.ta{width:100%;min-height:110px;border-radius:18px;background:var(--soft);padding:14px 16px;font:400 15px/1.9 var(--ui);margin:12px 0 16px}
.subs .pl{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;box-shadow:0 0 0 1px var(--line);margin-bottom:10px;width:100%;transition:all .2s}
.subs .pl.on{box-shadow:0 0 0 2px var(--vio);background:var(--lav)}
.subs .pl .t{flex:1}.subs .pl b{font:800 16px var(--disp);display:block}.subs .pl small{font:400 12.5px var(--ui);color:var(--ink2)}
.subs .pl strong{font:800 15px var(--disp)}
.subs .rd{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px #D0D0D8;flex:none}
.subs .pl.on .rd{box-shadow:inset 0 0 0 7px var(--vio)}
.feat{list-style:none;margin:6px 0 16px}
.feat li{display:flex;align-items:center;gap:10px;font:500 14px/2.4 var(--ui)}
.feat li svg{color:var(--grn)}
.player{text-align:center}
.player .cv{width:210px;height:210px;margin:6px auto 16px;border-radius:28px;background:var(--yel);position:relative;overflow:hidden;box-shadow:0 20px 40px -16px rgba(180,120,0,.5)}
.player .cv i{position:absolute;inset:0;background:url(../img/headphones.jpg) center/cover;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15)}
.player h3{font:800 20px var(--disp)}.player p{font:400 13px var(--ui);color:var(--ink2);margin-top:2px}
.player .tl{display:flex;align-items:center;gap:10px;margin:18px 0 6px;font:600 11.5px var(--ui);color:var(--ink3);direction:ltr}.player .tl .bar{flex:1}
.player .ctl{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:10px;direction:ltr}
.player .ctl .pp{width:70px;height:70px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center}
.toast{position:absolute;top:60px;left:50%;transform:translate(-50%,-90px);z-index:80;height:44px;padding:0 18px;border-radius:22px;background:rgba(20,20,26,.92);color:#fff;font:600 13.5px var(--ui);display:flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .5s var(--spring);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.toast.on{transform:translate(-50%,0)}
.toast svg{color:#5BE39A}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:75}