/* Videos tab, guides, teacher settings */
.vid-scroll { position: absolute; inset: 0; background: #32256B; overflow-y: auto; scrollbar-width: none; touch-action: pan-y; }
.vid-scroll::-webkit-scrollbar { display: none; }
.vid-grid { display: grid; grid-template-columns: repeat(3, 360px); gap: 44px 50px; padding: 170px 70px 80px; }
.vg-card { position: relative; height: 250px; border-radius: 40px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 8px 0 rgba(0,0,0,.18); }
.vg-card.locked { filter: grayscale(.7) brightness(.8); }
.vg-letter { font-family: var(--font-read); font-weight: 700; font-size: 150px; color: var(--navy); margin-top: -20px; }
.vg-letter.stop { color: #C42E45; }
.vg-abc { display: flex; gap: 4px; margin-top: -10px; }
.vg-play { position: absolute; left: 24px; bottom: 22px; width: 76px; height: 76px; border-radius: 50%; background: var(--white); display: grid; place-items: center; }
.vg-play svg { width: 38px; height: 38px; margin-left: 4px; }

.guides { position: absolute; inset: 0; z-index: 450; background: var(--white); }
.guides h1 { margin: 0; position: absolute; top: 50px; left: 0; right: 0; text-align: center; font-size: 52px; }
.guide-row { position: absolute; left: 0; right: 0; top: 190px; display: flex; gap: 50px; padding: 0 120px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.guide-row::-webkit-scrollbar { display: none; }
.guide-card { position: relative; flex: none; width: 300px; height: 520px; border-radius: 40px; background: #EAE6FD; overflow: hidden; }
.gc-num { position: absolute; left: 24px; top: -6px; font-size: 150px; font-weight: 700; color: rgba(80,49,245,.18); }
.gc-art { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); }
.gc-title { position: absolute; left: 0; right: 0; bottom: 26px; font-weight: 700; font-size: 32px; }
.guide-deck { position: absolute; inset: 0; z-index: 460; background: #EAE6FD; }
.gd-card { position: absolute; left: 280px; right: 280px; top: 190px; background: var(--white); border-radius: 44px; padding: 70px 80px; min-height: 480px; }
.gd-card h2 { margin: 0 0 24px; font-size: 52px; }
.gd-card p { margin: 0; font-size: 42px; line-height: 1.45; color: #4F4780; }

.teachers { position: absolute; inset: 0; z-index: 450; background: #EAE6FD; }
.t-card { position: absolute; left: 330px; right: 330px; top: 90px; background: var(--white); border-radius: 44px; padding: 50px 70px; }
.t-head { display: flex; gap: 30px; align-items: center; margin-bottom: 26px; }
.t-head svg { border-radius: 50%; }
.t-head h2 { margin: 0; font-size: 48px; }
.t-head p { margin: 6px 0 0; font-size: 30px; color: #6F6792; }
.t-card label { display: block; font-size: 30px; font-weight: 700; margin: 20px 0; }
.t-card input[type=text], .t-card input:not([type]), .t-card input[type=number] { display: block; width: 100%; margin-top: 10px; height: 76px; border-radius: 20px; border: 3px solid #D7D4E2; font: inherit; font-size: 34px; padding: 0 24px; color: var(--navy); }
.t-row { display: flex !important; align-items: center; gap: 16px; }
.t-row input { width: 40px; height: 40px; }
.t-actions { display: flex; gap: 24px; margin-top: 30px; }
.t-save { background: var(--purple); color: var(--white); }