/* Circl core sections (Learn, Money), home launcher and app-feel touches. Loaded after native.css. */

/* ---------- press feedback, like native buttons ---------- */
button,.btn,a.card{-webkit-tap-highlight-color:transparent}
.launch button,.pbcard,.contcard,.mhome,.mquick,.story,.statgrid button,.clist>*,.menu>button,.moregrid button,.card[data-tab],.ptcard{transition:transform .16s cubic-bezier(.2,.8,.2,1),opacity .16s}
.launch button:active,.pbcard:active,.contcard:active,.mhome:active,.mquick:active,.story:active,.statgrid button:active,.moregrid button:active{transform:scale(.96)}
.btn:active:not(:disabled){transform:scale(.97)}
nav.tabs button:active svg{transform:scale(.86)}
nav.tabs button svg{transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
nav.tabs button[aria-current="page"] svg{animation:tabpop .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes tabpop{0%{transform:scale(.8)}100%{transform:scale(1)}}

/* ---------- title folds into the top bar on scroll ---------- */
header.top .center{position:relative}
header.top .hdr-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-30%);opacity:0;pointer-events:none;white-space:nowrap;max-width:44vw;overflow:hidden;text-overflow:ellipsis;font:700 16.5px/1.2 "Figtree",var(--body);letter-spacing:-.01em;transition:opacity .2s,transform .2s}
header.top .center .brand{transition:opacity .2s,transform .2s}
header.top .center.titled .hdr-title{opacity:1;transform:translate(-50%,-50%)}
header.top .center.titled .brand{opacity:0;transform:translateY(-6px)}
body[data-tab="home"] header.top .hdr-title{display:none}
body[data-tab="home"] header.top .center.titled .brand{opacity:1;transform:none}

/* ---------- home launcher ---------- */
.launch-sec{margin-top:18px}
.launch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px;background:var(--bg);border-radius:22px;box-shadow:var(--card-sh);padding:16px 8px 14px}
.launch button{background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink);min-width:0}
.lic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 60%,color-mix(in srgb,var(--c) 82%,#000));box-shadow:0 6px 14px -6px color-mix(in srgb,var(--c) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.lic svg{width:26px;height:26px}
.launch small{font:600 12px/1.1 var(--body);letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-end{margin:30px 0 4px}

/* ---------- shared bits ---------- */
.pbbar{display:block;height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.pbbar i{display:block;height:100%;border-radius:inherit;background:var(--online);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pring{flex:none;transform:rotate(-90deg)}
.pring circle{fill:none;stroke-width:5}
.pring .tr{stroke:color-mix(in srgb,var(--ink) 9%,transparent)}
.pring .fg{stroke:var(--online);stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1)}
.pos{color:var(--online)}.neg{color:var(--danger)}
html[data-dark] .neg{color:#FF6B6B}
.chev{font-size:24px;color:var(--muted);line-height:1;flex:none}
.hscroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start}

/* ---------- learn ---------- */
.learn-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.learn-sum div{background:var(--bg);box-shadow:var(--card-sh);border-radius:18px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.learn-sum b{font:800 22px/1.1 "Figtree",var(--body)}
.learn-sum span{font-size:12px;color:var(--muted);font-weight:600}
.pbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pbcard{--h:262;position:relative;text-align:left;border:0;border-radius:20px;padding:14px;min-height:150px;display:flex;flex-direction:column;gap:6px;color:var(--ink);
  background:linear-gradient(165deg,hsl(var(--h) 90% 96%),var(--bg) 70%);box-shadow:var(--card-sh);min-width:0}
html[data-dark] .pbcard{background:linear-gradient(165deg,hsl(var(--h) 45% 17%),var(--bg) 75%)}
.pbcard.wide{flex:0 0 74%;min-height:160px}
.pbc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:auto}
.pbe{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:24px;background:var(--bg);box-shadow:var(--card-sh);flex:none}
.pbv{font:700 11.5px var(--body);background:var(--bg);border-radius:20px;padding:4px 8px;box-shadow:var(--card-sh)}
.pbcard b{font:750 15px/1.22 "Figtree",var(--body);letter-spacing:-.015em;margin-top:8px}
.pbcard small{color:var(--muted);font-size:12px;line-height:1.3}
.pbcard .pbbar{margin-top:4px}
.contcard{--h:262;width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:0;border-radius:20px;padding:14px 14px 14px 16px;color:var(--ink);background:linear-gradient(110deg,hsl(var(--h) 90% 96%),var(--bg) 65%);box-shadow:var(--card-sh)}
html[data-dark] .contcard{background:linear-gradient(110deg,hsl(var(--h) 45% 17%),var(--bg) 70%)}
.contcard .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.contcard small{font-size:12px;color:var(--muted);font-weight:600}
.contcard b{font:750 16px/1.25 "Figtree",var(--body);letter-spacing:-.015em}
.contcard .muted{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbhero{--h:262;position:relative;margin:4px -16px 0;padding:58px 20px 22px;background:linear-gradient(180deg,hsl(var(--h) 90% 94%),var(--canvas));text-align:left}
html[data-dark] .pbhero{background:linear-gradient(180deg,hsl(var(--h) 45% 16%),var(--canvas))}
.pbhero .back{position:absolute;top:10px;left:16px;background:var(--bg);box-shadow:var(--card-sh);border-radius:50%}
.pbhero .back svg{width:20px;height:20px}
.pbe.big{width:64px;height:64px;font-size:34px;border-radius:19px;margin-bottom:12px}
.pbhero small{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.pbhero h1{margin:4px 0 14px;font:800 28px/1.1 "Figtree",var(--body);letter-spacing:-.03em}
.pbprog{display:flex;align-items:center;gap:10px}
.pbprog .pbbar{flex:1;height:8px}
.pbprog span.num{font:700 13px var(--body)}
.steps{list-style:none;margin:14px 0 0;padding:0;background:var(--bg);border-radius:20px;box-shadow:var(--card-sh);overflow:hidden}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 14px 12px;position:relative}
.steps li+li::before{content:"";position:absolute;top:0;left:56px;right:0;border-top:.5px solid var(--sep)}
.stck{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);background:none;display:grid;place-items:center;color:transparent;margin-top:-2px;transition:background .2s,border-color .2s,transform .2s}
.stck svg{width:16px;height:16px}
.steps li.done .stck{background:var(--online);border-color:var(--online);color:#fff;animation:tick .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes tick{0%{transform:scale(.6)}100%{transform:scale(1)}}
.steps li.next .stck{border-color:var(--ink)}
.steps details{flex:1;min-width:0}
.steps summary{list-style:none;display:flex;gap:8px;align-items:baseline;cursor:pointer}
.steps summary::-webkit-details-marker{display:none}
.steps .sn{font:700 12px var(--mono);color:var(--muted);flex:none}
.steps summary b{font:650 15.5px/1.3 var(--body);letter-spacing:-.01em}
.steps li.done summary b{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.steps details p{margin:6px 0 0 18px;font-size:14px;line-height:1.5;color:var(--muted)}
.pbacts{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:18px}
.pbacts .link{align-self:center}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.confetti i{position:absolute;top:-12px;left:calc(5% + var(--i) * 5%);width:7px;height:12px;border-radius:2px;background:hsl(calc(var(--i) * 40) 85% 58%);animation:fall 1.6s calc(var(--i) * 45ms) cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fall{to{transform:translateY(340px) rotate(calc(var(--i) * 70deg));opacity:0}}
.sheet{position:relative}

/* ---------- money ---------- */
.mswitch{display:flex;align-items:center;justify-content:space-between;margin-top:12px;background:var(--bg);box-shadow:var(--card-sh);border-radius:16px;padding:6px}
.mswitch button{width:40px;height:36px;border:0;border-radius:11px;background:var(--panel);font-size:22px;line-height:1;color:var(--ink)}
.mswitch button:disabled{opacity:.3}
.mswitch b{font:700 15.5px var(--body)}
.mhero{margin-top:12px;background:var(--bg);box-shadow:var(--card-sh);border-radius:22px;padding:20px 18px 18px;text-align:center}
.mhero>small{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.mhero>b{display:block;font:800 44px/1.05 "Figtree",var(--body);letter-spacing:-.04em;margin:4px 0 10px}
.mio{display:flex;justify-content:center;gap:18px;font-size:14px;color:var(--muted)}
.mio b{color:var(--ink);margin-left:3px}
.mio i,.mleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
i.in{background:var(--online)}i.out{background:color-mix(in srgb,var(--ink) 25%,transparent)}
.mtarget{margin-top:16px;display:flex;flex-direction:column;gap:8px;align-items:center}
.mtarget .pbbar{width:100%;height:8px}
.mbars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;height:150px;align-items:end}
.mb{height:100%;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);border-radius:12px}
.mb .cols{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:6px 0 0;border-radius:10px}
.mb .cols i{width:34%;max-width:16px;min-height:3px;border-radius:5px 5px 2px 2px;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.mb small{font:600 11.5px var(--body)}
.mb.on small{color:var(--ink);font-weight:800}
.mb.on .cols{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.mleg{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:12.5px;color:var(--muted)}
.mst,.ment{display:flex;align-items:center;gap:12px;padding:12px 14px}
.mst .grow,.ment .grow{display:flex;flex-direction:column;gap:5px;min-width:0}
.ment .grow{gap:1px}
.ment .grow b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.ment small{color:var(--muted);font-size:12.5px}
.mst .cic,.ment .cic{width:38px;height:38px;border-radius:12px;font-size:19px;background:var(--panel);border:0;flex:none}
.mday{margin-bottom:14px}
.mday>small{display:block;font:700 12px var(--body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 6px 6px}
.mdel{border:0;background:none;color:var(--muted);width:30px;height:30px;border-radius:50%;font-size:13px;flex:none;opacity:.6}
.mdel:hover{opacity:1;background:var(--panel)}
.mseg{display:grid;grid-template-columns:1fr 1fr;background:var(--panel);border-radius:12px;padding:3px;margin:8px 0 6px}
.mseg button{border:0;background:none;border-radius:9px;padding:9px;font:700 14px var(--body);color:var(--muted)}
.mseg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
html[data-dark] .mseg button[aria-pressed="true"]{background:#33353D}
.mamt{display:flex;align-items:center;justify-content:center;gap:2px;margin:10px 0 16px;font:800 46px/1 "Figtree",var(--body);letter-spacing:-.03em}
.mamt span{color:var(--muted)}
.mamt input{border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--ink);width:5.2ch;text-align:left;outline:none;padding:0}
.mhome-wrap{position:relative}
.mhome{width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:0;border-radius:20px;padding:16px 70px 16px 18px;background:var(--bg);box-shadow:var(--card-sh);color:var(--ink)}
.mhome .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.mhome small{font-size:12.5px;font-weight:700;color:var(--muted)}
.mhome>.grow>b{font:800 30px/1.1 "Figtree",var(--body);letter-spacing:-.03em}
.mhome .pring{margin-right:-2px}
.mquick{position:absolute;right:14px;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;border:0;background:var(--ink);color:var(--on-ink,#fff);font-size:22px;line-height:1;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.mhome.empty-m{padding-right:18px}
.mh-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--online) 14%,var(--bg));flex:none}
.mhome.empty-m b{font:750 16px "Figtree",var(--body)}
.mhome.empty-m small{font-weight:500;line-height:1.35}

/* ---------- personal dashboard ---------- */
.dash{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.dtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dtile{position:relative;text-align:left;border:0;border-radius:20px;background:var(--bg);box-shadow:var(--card-sh);padding:14px 14px 13px;display:flex;flex-direction:column;gap:2px;color:var(--ink);min-width:0;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.dtile:active{transform:scale(.97)}
.dt-ic{position:absolute;top:12px;right:12px;font-size:18px;opacity:.9}
.dtile small{font:700 12px/1.2 var(--body);color:var(--muted);padding-right:24px}
.dtile b{font:800 26px/1.15 "Figtree",var(--body);letter-spacing:-.03em;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtile span:last-child{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard{background:var(--bg);box-shadow:var(--card-sh);border-radius:20px;padding:14px 16px}
.dhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.dhead b{font:750 16px "Figtree",var(--body);letter-spacing:-.015em}
.dhead small{color:var(--muted);font-size:12.5px;font-weight:600}
.dweek{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;height:92px}
.dweek>div{display:flex;flex-direction:column;align-items:center;gap:6px}
.dbar{flex:1;width:100%;max-width:26px;border-radius:8px;background:color-mix(in srgb,var(--ink) 6%,transparent);display:flex;align-items:flex-end;overflow:hidden}
.dbar i{display:block;width:100%;border-radius:8px;background:color-mix(in srgb,var(--online) 55%,transparent);transition:height .6s cubic-bezier(.2,.8,.2,1)}
.dweek .on .dbar i{background:var(--online)}
.dweek small{font:700 11.5px var(--body);color:var(--muted)}
.dweek .on small{color:var(--ink)}
.dtop{display:flex;flex-direction:column}
.dtop button{display:flex;align-items:center;gap:12px;border:0;background:none;padding:8px 0;text-align:left;color:var(--ink)}
.dtop button+button{border-top:.5px solid var(--sep)}
.dcic{width:36px;height:36px;border-radius:11px;background:var(--panel);display:grid;place-items:center;font-size:18px;flex:none}
.dtop .grow{display:flex;flex-direction:column;gap:6px;min-width:0}
.dtop .grow b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtop small{color:var(--muted);font-size:12.5px;font-weight:600;flex:none}
.dempty{margin:0;color:var(--muted);font-size:14px}
.dprog{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dprog button{display:flex;align-items:center;gap:10px;border:0;border-radius:18px;background:var(--bg);box-shadow:var(--card-sh);padding:12px;color:var(--ink);text-align:left;min-width:0}
.dprog span{display:flex;flex-direction:column;min-width:0}
.dprog b{font:800 18px/1.1 "Figtree",var(--body)}
.dprog small{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}

/* ---------- video guides ---------- */
.tvids{display:grid;grid-template-columns:1fr;gap:12px}
.tvid{display:flex;flex-direction:column;background:var(--bg);border-radius:18px;box-shadow:var(--card-sh);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.tvid:active{transform:scale(.98)}
.tvid-th{position:relative;aspect-ratio:16/9;background:#111;display:block}
.tvid-th img{width:100%;height:100%;object-fit:cover;display:block}
.tvid-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center}
.tvid-play svg{width:24px;height:24px;margin-left:3px}
.tvid-len{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;font:700 11.5px var(--body);padding:3px 6px;border-radius:6px}
.tvid-t{display:flex;flex-direction:column;gap:2px;padding:11px 14px 13px}
.tvid-t b{font:700 15px/1.3 var(--body)}
.tvid-t small{color:var(--muted);font-size:12.5px}
.hscroll.vids .tvid{flex:0 0 78%}
@media (min-width:560px){.tvids{grid-template-columns:1fr 1fr}}

/* ---------- profile: settings-style menu ---------- */
.ymenu button,.ymenu .yrow{padding:11px 14px;gap:12px}
.ymenu .yrow{display:flex;align-items:center;position:relative}
.ymenu>*+*::before{content:"";position:absolute;top:0;left:58px;right:0;height:.5px;background:var(--sep)}
.ymenu button+button::before{left:58px}
.yic{width:30px;height:30px;border-radius:8px;background:var(--c);color:#fff;display:grid;place-items:center;flex:none}
.yic svg{width:18px!important;height:18px!important}
.ymenu .mt small{color:var(--muted);font-size:12.5px}
.ymenu .chev{width:18px!important;height:18px!important;color:var(--muted);opacity:.6}
.ybadge{background:var(--danger);color:#fff;font:700 12px/1 var(--body);border-radius:20px;padding:4px 7px;min-width:22px;text-align:center}
.ytag{margin:6px auto 0;color:var(--muted);max-width:34ch;font-size:14.5px}
.ysub-head{display:flex;align-items:center;gap:12px;padding:10px 0 0}
.ysub-head h1{margin:0;font:800 26px/1.1 "Figtree",var(--body);letter-spacing:-.03em}
.ysub-head .back{background:var(--bg);box-shadow:var(--card-sh);border-radius:50%}
.ysub-head .back svg{width:20px;height:20px}
.signout-row{border:0;box-shadow:var(--card-sh);border-radius:16px;margin-top:0}
.me .meta .tag{display:none}
html[data-dark] .yic[style*="#0F1014"]{background:#3A3C44!important}
#notifSec>.sec-title:first-child,#appearSec>.sec-title:first-child{display:none}

/* ---------- profile photos ---------- */
.av{position:relative;overflow:hidden}
.av.pic{color:transparent}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.avpick{position:relative;display:inline-block;cursor:pointer}
.avcam{position:absolute;right:-2px;bottom:-2px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--on-ink,#fff);display:grid;place-items:center;box-shadow:0 0 0 3px var(--canvas)}
.avcam svg{width:16px;height:16px}
.avrow{display:flex;align-items:center;gap:16px}
.avrow .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.avrow small{color:var(--muted);font-size:13px}
.avrow label.btn{cursor:pointer}

/* ---------- today list ---------- */
.tlist{display:flex;flex-direction:column}
.titem{display:flex;align-items:center;gap:12px;padding:8px 0}
.titem+.titem{border-top:.5px solid var(--sep)}
.titem .grow{display:flex;flex-direction:column;font-size:15px;line-height:1.35;min-width:0;overflow-wrap:anywhere}
.titem .grow small{font-size:12px;color:var(--muted)}
.titem.done .grow{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.titem.done .stck{background:var(--online);border-color:var(--online);color:#fff;animation:tick .35s cubic-bezier(.3,1.6,.5,1)}
.stck.sm{width:26px;height:26px;margin:0}
.stck.sm svg{width:14px;height:14px}
.tadd{display:flex;gap:8px;margin-top:8px}
.tadd .in{flex:1;min-width:0}

/* ---------- focus ---------- */
.fwrap{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:16px}
.fring{position:relative;width:min(72vw,260px);aspect-ratio:1}
.fring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fring circle{fill:none;stroke-width:12}
.fring .tr{stroke:color-mix(in srgb,var(--ink) 8%,transparent)}
.fring .fg{stroke:#12A594;stroke-linecap:round;transition:stroke-dashoffset .5s linear}
.fmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.fmid b{font:800 54px/1 "Figtree",var(--body);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fmid small{color:var(--muted);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.flabel{width:100%;max-width:360px;text-align:center}
.fpre{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fpre button{border:0;background:var(--bg);box-shadow:var(--card-sh);border-radius:20px;padding:8px 14px;font:700 14px var(--body);color:var(--ink)}
.fpre button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink,#fff)}
.fbtns{display:flex;gap:10px;width:100%;max-width:360px}
.fbtns .btn{flex:1}
#focusPill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:30;border:0;border-radius:22px;padding:9px 16px 9px 12px;background:var(--ink);color:var(--on-ink,#fff);font:800 15px var(--body);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.fdot{width:9px;height:9px;border-radius:50%;background:#12A594;animation:fpulse 1.6s infinite}
.fdot.p{background:#F5A524;animation:none}
@keyframes fpulse{50%{opacity:.35}}

/* ---------- video covers: never a black box ---------- */
.tvid-th{background:linear-gradient(135deg,#2b2d42,#1a1b26)}
.tvid-th::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 30%,rgba(255,255,255,.08),transparent)}