/* Sequoia Fitness | Website: https://www.sequoia.fitness | Author: Ali Hosseini | Copyright (c) 2026 sequoia.fitness. All rights reserved. */
/* Designed and developed by Pouria Shabani | https://linkedin.com/in/pouriashabani */
@font-face { font-family: dana; font-weight: 400; src: url('/fonts/Dana-Regular.woff2') format('woff2'); }
@font-face { font-family: dana; font-weight: 700; src: url('/fonts/Dana-Bold.woff2') format('woff2'); }
@font-face { font-family: dana; font-weight: 900; src: url('/fonts/Dana-Black.woff2') format('woff2'); }
html { font-size: 0.52083vw; background: #1f504c; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: #1f504c; color: #ffead0; font-family: dana, Tahoma, sans-serif; font-size: 2.4rem; overflow: hidden; width: 100vw; height: 100vh; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
img { display: block; }
.screen { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 6rem 9rem; overflow: hidden; }
.screen.on { display: block; }
[data-f] { outline: 0.5rem solid transparent; outline-offset: 0.3rem; transition: transform 120ms ease, outline-color 120ms ease; }
[data-f].focus { outline-color: #e06d02; transform: scale(1.06); }
.pairWrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; }
.pairWrap h1 { margin: 0; font-size: 5.2rem; font-weight: 900; }
.pairLogo { width: 12rem; height: auto; }
.qrBox { width: 40rem; height: 40rem; padding: 2rem; background: #fff; border-radius: 2.4rem; }
.qrBox svg { width: 100%; height: 100%; display: block; }
.pairCode { direction: ltr; font-size: 8rem; font-weight: 900; letter-spacing: 1.2rem; color: #ffead0; }
.head { display: flex; align-items: center; justify-content: space-between; height: 10rem; }
.headLeft { display: flex; align-items: center; gap: 3rem; }
.headLogo { width: 7rem; height: auto; }
.userName { font-size: 2.8rem; font-weight: 700; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 6.4rem; padding: 0 3.2rem; border-radius: 1.6rem; background: #163a37; font-weight: 700; font-size: 2.6rem; }
.btnAccent { background: #e06d02; color: #ffead0; }
.rowTitle { margin: 3rem 0 2rem; font-size: 3.6rem; font-weight: 900; }
.rows { height: calc(100% - 10rem); overflow-y: auto; overflow-x: hidden; padding-bottom: 8rem; }
.rows::-webkit-scrollbar { display: none; }
.cards { display: flex; flex-wrap: nowrap; gap: 3rem; overflow-x: auto; padding: 1rem 1rem 3rem; }
.cards::-webkit-scrollbar { display: none; }
.card { flex: none; width: 48rem; border-radius: 2rem; background: #163a37; overflow: hidden; position: relative; }
.card img { width: 100%; aspect-ratio: 16 / 9; height: 27rem; object-fit: cover; background: #0f2a28; }
.cardBody { padding: 2rem 2.4rem 2.4rem; }
.cardTitle { font-size: 3rem; font-weight: 900; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardSub { margin-top: 0.4rem; font-size: 2.2rem; opacity: 0.8; direction: ltr; text-align: right; }
.prog { position: absolute; left: 0; right: 0; bottom: 0; height: 0.8rem; background: rgba(0, 0, 0, 0.45); direction: ltr; }
.prog i { display: block; height: 100%; background: #e06d02; }
.courseWrap { display: flex; gap: 6rem; height: 100%; }
.coursePane { width: 62rem; flex: none; }
.coursePane img { width: 100%; height: 35rem; object-fit: cover; border-radius: 2.4rem; background: #163a37; }
.coursePane h1 { margin: 3rem 0 1.6rem; font-size: 5rem; font-weight: 900; line-height: 1.4; }
.coursePane p { margin: 0; font-size: 2.6rem; line-height: 1.9; opacity: 0.9; max-height: 22rem; overflow: hidden; }
.vlist { flex: 1; min-width: 0; overflow-y: auto; padding: 1rem 1rem 6rem; }
.vlist::-webkit-scrollbar { display: none; }
.vrow { position: relative; display: flex; align-items: center; gap: 2.4rem; width: 100%; min-height: 10rem; margin-bottom: 2rem; padding: 0 3rem; border-radius: 2rem; background: #163a37; overflow: hidden; }
.vnum { flex: none; width: 6rem; font-size: 3.6rem; font-weight: 900; color: #e06d02; text-align: center; }
.vtitle { flex: 1; min-width: 0; font-size: 3rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdur { flex: none; font-size: 2.6rem; opacity: 0.85; direction: ltr; }
#s-player { padding: 0; background: #000; }
#s-player video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; }
.ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 200ms ease; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.85) 100%); }
.ov.on { opacity: 1; pointer-events: auto; }
.ovTop { position: absolute; top: 4rem; left: 7rem; right: 7rem; display: flex; align-items: center; gap: 3rem; }
.ovTitle { flex: 1; font-size: 3.4rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovSub { font-size: 2.4rem; font-weight: 400; opacity: 0.85; }
.ovBottom { position: absolute; left: 7rem; right: 7rem; bottom: 4rem; direction: ltr; }
.chapNow { font-size: 3rem; font-weight: 700; margin-bottom: 1.6rem; direction: rtl; text-align: right; min-height: 4.4rem; }
.seekWrap { position: relative; padding: 1.6rem 0; }
.seek { position: relative; height: 1.4rem; border-radius: 1rem; background: rgba(255, 234, 208, 0.28); }
.seek .buf, .seek .done { position: absolute; left: 0; top: 0; height: 100%; border-radius: 1rem; }
.seek .buf { background: rgba(255, 234, 208, 0.35); }
.seek .done { background: #e06d02; }
.seek .tick { position: absolute; top: -0.3rem; width: 0.4rem; height: 2rem; background: #ffead0; border-radius: 0.2rem; margin-left: -0.2rem; }
.seek .knob { position: absolute; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%; background: #ffead0; }
.seekFocus.focus { transform: none; }
.seekFocus.focus .seek { height: 2rem; }
.bubble { position: absolute; bottom: 6rem; width: 28rem; margin-left: -14rem; display: none; direction: rtl; text-align: center; }
.bubble.on { display: block; }
.bubble img { width: 28rem; height: 15.8rem; object-fit: cover; border-radius: 1.4rem; background: #163a37; }
.bubble .bt { margin-top: 0.8rem; font-size: 2.4rem; font-weight: 700; direction: ltr; }
.bubble .bc { font-size: 2.2rem; opacity: 0.9; }
.ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; }
.times { font-size: 2.8rem; font-weight: 700; min-width: 24rem; }
.btns { display: flex; align-items: center; gap: 2rem; }
.ib { position: relative; width: 8.4rem; height: 8.4rem; border-radius: 50%; background: rgba(22, 58, 55, 0.92); display: flex; align-items: center; justify-content: center; }
.ib svg { width: 4.4rem; height: 4.4rem; fill: #ffead0; }
.ib .dot { position: absolute; right: 0.2rem; top: 0.2rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0.3rem solid #163a37; }
.dot.r { background: #e53935; }
.dot.g { background: #43a047; }
.dot.y { background: #fdd835; }
.dot.b { background: #1e88e5; }
.ib.hide { display: none; }
.qtxt { min-width: 14rem; text-align: center; font-size: 2.6rem; font-weight: 900; }
.panel { position: absolute; top: 0; bottom: 0; right: 0; width: 70rem; background: rgba(15, 42, 40, 0.97); padding: 5rem 4rem; overflow-y: auto; display: none; direction: rtl; }
.panel.on { display: block; }
.panel::-webkit-scrollbar { display: none; }
.pitem { display: flex; align-items: center; gap: 2.4rem; width: 100%; min-height: 9rem; margin-bottom: 1.6rem; padding: 1.2rem 2rem; border-radius: 1.8rem; background: #163a37; font-size: 2.8rem; font-weight: 700; }
.pitem.cur { background: #e06d02; }
.pitem img { flex: none; width: 17rem; height: 9.6rem; object-fit: cover; border-radius: 1rem; background: #0f2a28; }
.pitem .pt { flex: 1; min-width: 0; line-height: 1.5; }
.pitem .ptime { flex: none; direction: ltr; font-size: 2.4rem; opacity: 0.9; }
.spin { position: absolute; left: 50%; top: 50%; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; border: 1rem solid rgba(255, 234, 208, 0.25); border-top-color: #e06d02; animation: spin 900ms linear infinite; display: none; }
.spin.on { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.errWrap { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem; }