/* DG Vani round 20: premium polish (banner carousel, lecture-of-the-day hero, rows, cards, filter/sort sheets, motion) */
:root{--r20-r:22px;--r20-depth:0 10px 30px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.04) inset}
.tdate{color:var(--mute);font-size:.82rem;letter-spacing:.02em;margin:4px 4px 10px}
/* banners: bigger, rounded, edge-to-edge, big serif titles, pill dots */
.banners{margin:0 -16px;padding:0 16px;gap:12px;scroll-padding:0 16px}
.banner{height:250px!important;border-radius:26px!important;border:0!important;box-shadow:var(--r20-depth)!important;flex-basis:100%!important}
.banner .bshade{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)!important}
.banner .btxt{left:20px!important;right:70px!important;bottom:18px!important}
.banner .bt{font-family:'Noto Serif',Georgia,serif!important;font-size:2rem!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.banner .bk{font-size:.7rem!important;letter-spacing:.16em!important;color:color-mix(in srgb,var(--saf) 70%,#fff)!important;font-weight:700}
.banner .bs{opacity:.92;margin-top:4px}
.banner .bshare{top:14px!important;right:14px!important;background:rgba(0,0,0,.35)!important;border:1.5px solid color-mix(in srgb,var(--saf) 80%,transparent)!important;color:#fff!important;backdrop-filter:blur(6px)}
.bdots{display:flex;justify-content:center;gap:6px;margin:12px 0 4px}
.bdots i{width:7px!important;height:7px!important;border-radius:99px!important;background:color-mix(in srgb,var(--mute) 45%,transparent)!important;transition:width .3s,background .3s;display:block}
.bdots i.on{width:24px!important;background:var(--saf)!important}
/* lecture of the day hero */
.lotdx{position:relative;margin:18px 0 6px;border-radius:var(--r20-r);overflow:hidden;background:var(--card);box-shadow:var(--r20-depth)}
.lxart{position:relative;height:200px;background:#000}
.lxart img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.lxshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,var(--card) 100%)}
.lxplay{position:absolute;right:18px;bottom:-26px;width:64px;height:64px;border-radius:50%;border:0;background:var(--saf);color:#000;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 8px 24px color-mix(in srgb,var(--saf) 45%,transparent);cursor:pointer;z-index:2;transition:transform .15s}
.lxplay .ic{width:28px;height:28px;margin-left:3px}
.lxplay:active{transform:scale(.9)}
.lxbody{padding:8px 96px 18px 18px;cursor:pointer}
.lxbody .k{color:var(--saf);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.lxt{font-family:'Noto Serif',Georgia,serif;font-size:1.35rem;line-height:1.2;margin:4px 0 6px;color:var(--ink)}
.lxm{color:var(--mute);font-size:.84rem}
.lxmore{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.35)!important;border:1.5px solid color-mix(in srgb,var(--saf) 80%,transparent)!important;color:#fff!important}
/* cards: fewer borders, soft depth, more air */
.card{border:0!important;border-radius:var(--r20-r)!important;box-shadow:var(--r20-depth)!important;margin:16px 0!important;padding:18px!important}
.card.festbar{padding:14px 16px!important}
h2{margin:26px 4px 10px!important;font-size:1.12rem!important;letter-spacing:.01em}
.rowh{display:flex;align-items:baseline;justify-content:space-between}
.rowh h2{margin-bottom:10px!important}
.rmore{color:var(--saf);font-size:.84rem;text-decoration:none;font-weight:600;margin-right:4px}
/* horizontal rows */
.hrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none}
.hrow::-webkit-scrollbar{display:none}
.hcard{flex:0 0 148px;scroll-snap-align:start;cursor:pointer}
.hcard.hv{flex-basis:210px}
.hcw{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1;background:var(--soft);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.hcard.hv .hcw{aspect-ratio:16/9}
.hcw .cover,.hcw>img{width:100%!important;height:100%!important;border-radius:0!important;object-fit:cover;margin:0!important}
.hcw .play{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;border:0;background:var(--saf);color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.hcw .play .ic{margin-left:2px}
.hdur{position:absolute;left:8px;bottom:10px;font-size:.7rem;font-weight:600;background:rgba(0,0,0,.6);color:#fff;padding:2px 7px;border-radius:99px}
.hcw .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.hcw .prog i{display:block;height:100%;background:var(--saf)}
.hmeta{padding:8px 2px 0}
.hmeta .ti{font-size:.86rem;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
.hmeta .su{font-size:.74rem;color:var(--mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* lecture cards */
.list .lcard{border:0!important;background:var(--card)!important;border-radius:20px!important;box-shadow:0 6px 20px rgba(0,0,0,.28)!important;margin-bottom:12px!important;padding:12px!important;transition:transform .15s,background .2s}
.list .lcard:active{transform:scale(.985)}
.list .lcard .ti{font-weight:600;line-height:1.25}
.list .lcard .su{color:var(--mute);font-size:.8rem;margin-top:3px}
.list .lcard .tg{background:color-mix(in srgb,var(--saf) 16%,transparent)!important;color:var(--saf)!important;border:0!important;border-radius:99px!important}
.list .lcard .tg2{border-radius:99px!important}
.list .lcard .more{border-radius:50%;width:34px;height:34px;color:var(--mute)}
/* consistent circular orange-outlined icon buttons */
.cbtn{width:40px!important;height:40px!important;border-radius:50%!important;border:1.6px solid color-mix(in srgb,var(--saf) 75%,transparent)!important;background:transparent!important;color:var(--saf)!important;transition:transform .15s,background .2s}
.cbtn:active{transform:scale(.9);background:color-mix(in srgb,var(--saf) 18%,transparent)!important}
#menuBtn{border-radius:50%}
/* bottom tab bar + raised centre radio */
.tabs{background:color-mix(in srgb,var(--card) 88%,transparent)!important;border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.tabs a{position:relative}
.tabs a.on::before{content:'';position:absolute;top:0;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 3px 3px;background:var(--saf)}
.tabs a.on b{font-weight:700}
.npbtn{box-shadow:0 8px 22px color-mix(in srgb,var(--saf) 40%,transparent),0 0 0 1px rgba(255,255,255,.06) inset!important;transition:transform .15s}
.npbtn:active{transform:scale(.93)}
/* persistent mini player: floating rounded bar above the tabs */
.player{margin:0 10px!important;border-radius:18px!important;border:0!important;box-shadow:0 10px 30px rgba(0,0,0,.5)!important;bottom:calc(74px + env(safe-area-inset-bottom))!important;overflow:hidden}
.player .pbar{border-radius:18px 18px 0 0;overflow:hidden}
.player .playbtn{border-radius:50%;background:var(--saf)!important;color:#000!important}
/* filter bar + sheets */
.fbar{display:flex;gap:8px;align-items:center;margin:12px 0 10px;flex-wrap:wrap}
.fbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid color-mix(in srgb,var(--saf) 70%,transparent);background:transparent;color:var(--ink);border-radius:99px;padding:8px 14px;font:inherit;font-size:.86rem;cursor:pointer;transition:transform .15s,background .2s}
.fbtn .ic{color:var(--saf)}
.fbtn.on{background:color-mix(in srgb,var(--saf) 18%,transparent)}
.fbtn b{background:var(--saf);color:#000;border-radius:99px;padding:0 7px;font-size:.74rem}
.fbtn:active{transform:scale(.95)}
.fclear{color:var(--saf);font-size:.84rem;text-decoration:none;font-weight:600;margin-left:2px}
.sheet.fsheet .sheetbox{padding:0!important;max-height:82vh;overflow:hidden;display:flex;flex-direction:column}
.fsh{display:flex;flex-direction:column;height:min(78vh,620px)}
.fshh{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;font-size:1.1rem;border-bottom:1px solid var(--line)}
.fshb{flex:1;display:flex;min-height:0}
.fleft{list-style:none;margin:0;padding:6px 0;width:40%;background:var(--soft);overflow:auto}
.fleft li{padding:15px 14px;cursor:pointer;color:var(--mute);font-size:.92rem;display:flex;justify-content:space-between;align-items:center;border-left:3px solid transparent}
.fleft li.on{color:var(--ink);background:var(--card);border-left-color:var(--saf);font-weight:600}
.fleft li i{font-style:normal;background:var(--saf);color:#000;border-radius:99px;font-size:.7rem;padding:0 7px;font-weight:700}
.fright{flex:1;overflow:auto;padding:6px 10px}
.fopt{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);cursor:pointer;font-size:.92rem}
.fopt input{accent-color:var(--saf);width:18px;height:18px}
.fshf{display:flex;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.fshf .btn{flex:1;justify-content:center;border-radius:99px;padding:12px}
.ssh{display:flex;flex-direction:column}
.ssh>b{font-size:1.1rem;margin:2px 4px 10px}
.sopt{display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding:14px 6px;color:var(--ink);font:inherit;font-size:.95rem;text-align:left;cursor:pointer}
.sopt.on{color:var(--saf);font-weight:600}
/* motion: screen transitions + press feedback */
@keyframes r20in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#view.r20in>*{animation:r20in .32s cubic-bezier(.2,.8,.2,1) both}
#view.r20in>*:nth-child(2){animation-delay:.03s}#view.r20in>*:nth-child(3){animation-delay:.06s}#view.r20in>*:nth-child(4){animation-delay:.09s}#view.r20in>*:nth-child(n+5){animation-delay:.12s}
.btn,.chip,.tile,.hcard,.tabs a{transition:transform .15s,background .2s,opacity .2s}
.btn:active,.chip:active,.tile:active,.hcard:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){#view.r20in>*{animation:none}.bdots i{transition:none}}
/* drawer */
.dpanel{border-radius:0 24px 24px 0;box-shadow:12px 0 40px rgba(0,0,0,.5)}
.tile{border:0!important;border-radius:18px!important;box-shadow:0 6px 18px rgba(0,0,0,.25)!important}
.fopt input{appearance:none;-webkit-appearance:none;width:20px!important;height:20px!important;flex:none;margin:0;border:1.8px solid color-mix(in srgb,var(--saf) 70%,transparent);border-radius:6px;background:transparent;display:grid;place-content:center;box-shadow:none!important}
.fopt input[type=radio]{border-radius:50%}
.fopt input:checked{background:var(--saf);border-color:var(--saf)}
.fopt input:checked::after{content:'';width:10px;height:6px;border:2.4px solid #000;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.lotdx .cbtn.lxmore{background:rgba(0,0,0,.45)!important;border-color:color-mix(in srgb,var(--saf) 85%,transparent)!important;color:#fff!important;z-index:2}
.fopt input::after{content:none!important;position:static!important;background:none!important;box-shadow:none!important;transform:none!important}
.fopt input:checked::after{content:''!important;width:10px!important;height:6px!important;border:2.4px solid #000;border-top:0;border-right:0;border-radius:0!important;transform:rotate(-45deg) translate(1px,-1px)!important;top:auto;left:auto}
.fopt input[type=checkbox]{position:relative;width:20px!important;height:20px!important;border-radius:6px!important;padding:0!important}
/* round 21: slim Lecture of the Day card */
.lotds{display:flex;align-items:center;gap:14px;margin:18px 0 6px;padding:14px 14px 14px 12px;border-radius:var(--r20-r);background:var(--card);box-shadow:var(--r20-depth)}
.lxicon{flex:none;width:56px;height:56px;border-radius:16px;background:color-mix(in srgb,var(--saf) 10%,transparent);display:grid;place-items:center}
.lxbook{width:40px;height:40px}
.lotds .lxbody{flex:1;min-width:0;padding:0}
.lotds .lxt{font-size:1.08rem;margin:2px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lotds .lxm{font-size:.8rem}
.lotds .lxplay{position:static;flex:none;width:56px;height:56px}
.lotds .lxbody .k{font-size:.64rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* round 25: intro slides — r20's global h2 margin (!important) pushed the slide title left; centre it like the lotus */
.ob .obfade{left:0;right:0;width:100%;box-sizing:border-box;text-align:center;display:flex;flex-direction:column;align-items:center}
.ob .obtitle{margin:0 auto 6px!important;width:100%;max-width:min(15ch,100%);text-align:center}
@media (min-width:700px){.ob .obslide{background-size:cover!important;background-position:center 30%!important}.ob .obtitle{font-size:2.6rem!important}}
