.shell--student{font:400 16px/1.65 var(--font-sans);background:var(--page-bg)}
.shell--student .outlet{padding:0;max-width:none}.shell--student .page{width:calc(100% - 48px);max-width:1160px;margin:32px auto 48px;gap:24px;min-width:0}.page__title{font:700 28px/1.35 var(--font-sans)}.page__subtitle{font:400 14px/1.6 var(--font-sans);color:var(--text-secondary)}.section__title{font:650 20px/1.45 var(--font-sans)}
.shell--student{display:flex;flex-direction:column;min-height:100dvh}.topbar{display:flex;align-items:center;position:sticky;top:0;z-index:100;flex-shrink:0;height:64px;padding:0 max(24px,calc((100vw - 1160px)/2));gap:24px;background:var(--card-bg);border-bottom:1px solid var(--border-base);box-shadow:var(--material-contact)}.topbar__brand{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--fg)}.topbar__nav{display:flex;align-items:center}.topbar__right{display:flex;align-items:center;margin-left:auto}.topbar__avatar{display:grid;place-items:center;border:1px solid var(--border-base);border-radius:50%;padding:0;overflow:hidden;background:var(--card-bg);flex-shrink:0}.topbar__avatar img{width:100%;height:100%;object-fit:cover}.topbar__vip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;white-space:nowrap}.topbar__language{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border-base);border-radius:8px;min-height:36px;padding:4px 8px;background:var(--panel-bg);color:var(--fg-muted)}.topbar__language .is-selected{color:var(--primary);font-weight:600}.topbar__icon-btn{display:grid;place-items:center}.tabbar{display:none}.topbar__logo{width:32px;height:32px}.topbar__name{font:700 24px/1.3 var(--font-serif)}.topbar__nav{gap:8px}.topbar__link{font-size:14px;min-height:44px;border-radius:8px;padding:10px 16px}.topbar__right{gap:8px}.topbar__avatar{width:36px;height:36px}.topbar__vip{font-size:12px;padding:4px 10px}.topbar__icon-btn{width:36px;height:44px}.topbar__language{font-size:12px}.topbar__nav .is-active{background:var(--selected-bg);color:var(--selection-ink)}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.card--video{overflow:hidden}.card__media{aspect-ratio:2.14;position:relative}.card__cover{width:100%;height:100%;object-fit:cover}.card__body{display:flex;flex-direction:column;gap:8px;padding:16px;min-width:0;min-height:0}.card__title{font:650 16px/1.5 var(--font-sans);margin:0;overflow-wrap:anywhere}.card__subtitle,.card__eyebrow{font-size:14px;line-height:1.6;color:var(--text-secondary)}.card__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}.card__tags>.chip{height:24px;padding:0 8px;font:500 12px/1 var(--font-sans);border-radius:6px;flex:none}.card__play{width:44px;height:44px;background:var(--card-bg);box-shadow:0 2px 8px #0003}.card__duration-badge{font:500 12px/1.6 var(--font-sans);color:#fff;background:#142333e6;padding:2px 8px;border-radius:6px;right:12px;bottom:12px}.card__progress{height:4px;margin:4px 0 0;background:var(--border-base)}
.home{display:flex;flex-direction:column}.home__summary{display:flex;gap:24px;flex-wrap:wrap}.home__stat{display:flex;align-items:center;gap:8px;font-size:14px}.home__stat svg{width:20px;height:20px}.home__browse{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.home__search{display:flex;gap:8px;position:relative;flex:1;min-width:240px}.home__search .input{padding-left:36px;min-width:0}.home__search-icon{position:absolute;left:12px;top:12px;pointer-events:none}.home__categories{display:flex;gap:8px;flex-wrap:wrap}.home__category{min-height:44px;padding:8px 12px;font-size:14px;border:1px solid var(--border-base);border-radius:8px;background:var(--card-bg);color:var(--fg-muted)}.home__category.is-active{background:var(--selected-bg);color:var(--selection-ink);border-color:var(--primary)}.home__section-head,.home__continue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.home__section-kicker{color:var(--text-secondary);font-size:12px}.home__section-chevron{display:none}.home{position:relative;isolation:isolate}.resume{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;padding:16px}.resume__thumb{aspect-ratio:2.14;border-radius:8px;overflow:hidden}.resume__body{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}.resume__title{font:650 24px/1.4 var(--font-sans)}.resume__meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}.resume__bar{height:6px}.resume__cta{align-self:flex-start;margin-top:0}.resume-row{display:flex;gap:12px;flex-wrap:wrap}.resume-mini{padding:12px;border:1px solid var(--border-base);border-radius:8px;background:var(--card-bg)}
.catalog__filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.catalog__search{display:flex;gap:8px;flex:1;min-width:220px}.catalog__search .input{min-width:0}.catalog__categories{display:flex;gap:8px;flex-wrap:wrap}.catalog__count{font-size:14px;color:var(--text-secondary)}.filter-bar{border-radius:12px;background:var(--card-bg);padding:16px;border:1px solid var(--border-base)}.filter-chip{min-height:44px;border-radius:8px;font-size:14px;padding:8px 12px;transition:box-shadow var(--motion-ui),border-color var(--motion-ui)}.filter-sheet__panel{border-radius:16px;max-height:calc(100dvh - 32px);background:var(--card-bg);box-shadow:var(--material-layer-shadow)}.filter-sheet__title{font:650 20px/1.4 var(--font-sans)}.filter-sheet__actions .btn{flex:1}.filter-sheet{z-index:500}
.study-plan{display:flex;flex-direction:column;gap:24px}.plan-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;padding:24px}.plan-summary__cover{width:100%;height:180px;object-fit:cover;border-radius:8px}.plan-summary__body{display:flex;flex-direction:column;gap:12px;min-width:0}.plan-summary__body h2{font:650 20px/1.4 var(--font-sans)}.plan-summary__date,.plan-summary__description{font-size:14px;color:var(--text-secondary)}.plan-summary__actions{display:flex;flex-wrap:wrap;gap:8px}.plan-summary__progress{display:flex;align-items:center;gap:12px;font-size:14px}.plan-summary__track{flex:1;height:6px;border-radius:3px;overflow:hidden;background:var(--border-base)}.plan-summary__track>span{display:block;height:100%;background:var(--primary)}.plan-status{display:flex;flex-wrap:wrap;gap:8px}.plan-status__button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--border-base);border-radius:8px;background:var(--card-bg);color:var(--fg-muted)}.plan-status__button.is-active{background:var(--selected-bg);color:var(--selection-ink)}.plan-lessons{display:flex;flex-direction:column;gap:8px;padding:16px}.plan-lesson{display:grid;grid-template-columns:32px 120px minmax(0,1fr) auto 36px;align-items:center;gap:16px;padding:12px;border-radius:8px;background:var(--panel-bg)}.plan-lesson__number{font-weight:600;color:var(--text-secondary)}.plan-lesson__thumb{appearance:none;display:block;width:120px;height:67.5px;padding:0;border:0;background:var(--panel-bg);border-radius:8px;position:relative;overflow:hidden;cursor:pointer;outline:1px solid var(--card-edge);outline-offset:-1px}.plan-lesson__thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.plan-lesson__thumb:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.plan-lesson__thumb:disabled{cursor:default}.plan-lesson__title{text-align:left;display:flex;flex-direction:column;gap:8px;background:none;border:0;color:var(--fg);min-width:0;font-size:16px}.plan-lesson__tags{display:flex;gap:8px;flex-wrap:wrap}.plan-lesson__state{font-size:12px;white-space:nowrap}.plan-lesson__more{background:none;border:0;color:var(--fg-muted);width:36px;height:44px}.plan-summary__tools{display:flex;flex-wrap:wrap;gap:8px}.plan-summary__tools .btn{min-height:44px;font-size:14px}
.vocab__workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.vocab__content{display:flex;flex-direction:column;gap:20px;min-width:0}.vocab__sidebar{padding:24px;display:flex;flex-direction:column;gap:16px;align-self:start}.vocab__sidebar h2{display:flex;align-items:center;gap:8px;font:700 20px/1.4 var(--font-heading)}.vocab__stats{display:flex;gap:16px;justify-content:space-between}.vocab__stats>div{display:flex;flex-direction:column;font-size:14px;color:var(--text-secondary)}.vocab__stats strong{font-size:24px;color:var(--fg)}.vocab .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0 0 8px}.vocab .tab{display:flex;align-items:center;gap:8px;min-height:44px;font-weight:600}.vocab__tab-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--panel-bg);color:var(--fg);font-size:12px;font-variant-numeric:tabular-nums}.vocab-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}.vocab-item{padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}.vocab-item__main{display:flex;flex:1;flex-direction:column;align-items:stretch;gap:12px;width:100%;min-width:0;padding:0;border:0;background:transparent;color:var(--fg);text-align:left;font-family:var(--font-sans);cursor:pointer}.vocab-item__head{display:flex;flex-direction:column;gap:8px}.vocab-item__word{font:700 22px/1.4 var(--font-heading);overflow-wrap:anywhere}.vocab-item__gloss{font-size:16px;line-height:1.6}.vocab-item__sentence{font-size:15px;line-height:1.65;color:var(--text-secondary);overflow-wrap:anywhere}.vocab-item__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-top:auto}.vocab-item__mastery{background:linear-gradient(160deg,#fff1bc,#f4d475 58%,#edc55c);border-color:#b28b31;color:#573b08;box-shadow:inset 0 1px 0 #fff9dd,0 3px 8px #89641b26;font-weight:600;min-height:44px}.vocab-item__status{display:inline-flex;align-items:center;gap:4px;color:var(--fg);font-size:13px;margin-right:auto}.vocab-item__main:focus-visible{outline:2px solid var(--primary);outline-offset:6px;border-radius:4px}
.account__workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:24px}.account__summary,.account__settings{min-width:0}.account__settings{display:flex;flex-direction:column;gap:24px}.account-profile{padding:24px;display:flex;flex-direction:column;align-items:center;gap:12px}.account-profile__portrait{position:relative}.account-profile__portrait>img{width:96px;height:96px;border:3px solid var(--card-bg);border-radius:50%;object-fit:cover}.account-profile__camera{position:absolute;right:0;bottom:0;width:32px;height:32px;border:2px solid var(--card-bg);border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center}.account-profile h2{font-size:22px}.account-profile__phone,.account-profile__expiry{font-size:14px;color:var(--text-secondary)}.account-profile__membership{display:flex;align-items:center;gap:8px;padding:4px 12px;border:1px solid var(--vip-border);border-radius:999px;background:var(--vip-bg);color:var(--vip-fg);font-size:14px}.account-profile__actions{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:8px}
.player{position:relative;gap:12px}.player__topbar>.player__top-btn:first-child{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--fg);transition:none;transform:none}.player__topbar>.player__top-btn:first-child:before{content:"";position:absolute;inset:3px;border:3px solid currentColor;border-radius:50%;pointer-events:none}.player__topbar>.player__top-btn:first-child svg{width:22px;height:22px;stroke-width:2.25}.player__stage{border-radius:12px;aspect-ratio:16/9}.player__video{object-fit:contain}.player__mode{min-height:44px;padding:6px;font-size:12px;border-radius:8px}.player__controls{height:52px}.player__control{min-height:44px;height:48px;gap:2px;padding:3px;border-radius:8px;font-size:12px}.player__control svg{width:20px;height:20px}.player__control-label,.player__control-text{font-size:12px;line-height:1.3}.player__play{isolation:isolate;position:relative;width:44px;height:44px;border:0;border-radius:50%;color:var(--on-primary);display:grid;place-items:center}.player__play:before{content:'';position:absolute;inset:2px;z-index:-1;border-radius:50%}.player__play[data-playing=true]{animation:play-ring .7s ease-out}.player__play svg{width:24px;height:24px}.player__progress{min-height:24px;gap:8px}.player__time{font-size:12px}.player__footer{padding-top:4px;gap:0}.player__stat{min-height:44px;gap:3px;padding:4px;border-radius:8px}.player__stat-label{font-size:12px;line-height:1.3}.player__stat-icon{position:relative;width:24px;height:24px;display:grid;place-items:center}.player__stat-icon svg{width:20px;height:20px}.player__stat-badge{position:absolute;top:-5px;right:-9px;left:auto;min-width:16px;width:auto;height:16px;padding:0 4px;display:grid;place-items:center;font-size:10px;line-height:1;border-radius:999px;background:var(--action-fill);color:var(--on-primary)}.player__more{position:absolute;inset:auto 0 calc(100% + 8px) auto;width:200px;max-width:calc(100% - 24px);max-height:50dvh;overflow:auto;z-index:30;padding:6px;border:1px solid var(--border-base);border-radius:12px}.player__rate-menu{left:0;right:auto;width:156px}.player__more-item{min-height:44px;font-size:14px;padding:10px 12px;border-radius:8px;color:var(--fg);background:transparent;border:0;width:100%;text-align:left}.player__more-item:hover,.player__more-item:focus-visible,.player__more-item[aria-checked=true]{background:var(--selected-bg);color:var(--selection-ink)}.player__subtitles{gap:8px}.player__sentence{padding:10px 12px;gap:4px;border-radius:8px}.player__sentence-main{gap:4px}.player__sentence-foot{margin-top:0}.player__sentence-text{font-size:16px;line-height:1.65}.player__sentence-translation{font-size:14px;line-height:1.6;color:var(--text-secondary)}.player.is-translation-hidden .player__sentence-translation{display:none}.player.is-key-hidden .word-token.is-key{color:inherit;background:transparent;text-decoration:none}.player__loading,.player__media-error{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:#071321b3;color:#fff;z-index:4}.video-loader{width:fit-content;font-weight:700;font-family:monospace;font-size:24px;background:linear-gradient(90deg,#fff 50%,transparent 0) right/200% 100%;animation:video-loading 2s infinite linear}.video-loader:before{content:'Loading...';color:transparent;padding:0 5px;background:inherit;background-image:linear-gradient(90deg,var(--primary) 50%,#fff 0);background-clip:text;-webkit-background-clip:text}@keyframes video-loading{100%{background-position:left}}@keyframes play-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary) 45%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@media(max-width:860px){.topbar{height:56px;padding:0 12px;gap:8px}.topbar__name{font-size:22px}.topbar__logo{width:24px;height:24px}.topbar__right{gap:4px}.topbar__right>.topbar__icon-btn{width:32px}.topbar__nav{display:none}.shell--student .page{width:calc(100% - 24px);margin:24px auto calc(88px + env(safe-area-inset-bottom));gap:16px}.page__title{font-size:24px}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card__body{padding:12px;min-height:0}.card__title{font-size:15px}.card__tags{gap:4px}.card__tags>.chip{padding:0 6px;font-size:12px;height:24px}.card__subtitle{font-size:12px}.resume{grid-template-columns:1fr;padding:0;gap:0;overflow:hidden}.resume__body{padding:16px}.resume__thumb{border-radius:0}.resume__title{font-size:20px}.home__summary{gap:12px;font-size:12px}.home__search{min-width:0;width:100%;flex-basis:100%}.home__categories{gap:6px}.home__category{font-size:12px;min-height:36px;padding:6px 10px}.home__browse{gap:12px}.catalog__search{min-width:0;flex-basis:100%}.catalog__categories{flex-wrap:nowrap;overflow:auto;width:100%}.plan-summary{grid-template-columns:1fr;padding:16px;gap:16px}.plan-summary__cover{height:140px}.plan-lessons{padding:8px}.plan-lesson{grid-template-columns:24px 84px minmax(0,1fr) 28px;gap:8px;padding:8px;position:relative}.plan-lesson__thumb{width:84px;height:47.25px}.plan-lesson__title{font-size:14px}.plan-lesson__state{grid-column:3;grid-row:2}.plan-lesson__more{grid-column:4;grid-row:1}.plan-lesson__tags{gap:4px}.plan-status__button{flex:1;font-size:12px;padding:8px}.vocab__workspace{grid-template-columns:1fr}.vocab__sidebar{order:-1;padding:16px}.vocab-list{grid-template-columns:1fr}.vocab-item{padding:16px}.account__workspace{grid-template-columns:1fr}.account-profile{align-items:flex-start;padding:16px}.account-profile__actions{flex-direction:row;flex-wrap:wrap}.account-profile__actions .btn{flex:1;padding:8px;font-size:12px}.tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0;z-index:100;padding:2px 6px max(2px,env(safe-area-inset-bottom));min-height:52px;border-radius:12px 12px 0 0;background:var(--card-bg);border:1px solid var(--border-base);box-shadow:var(--material-contact)}.tabbar__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--fg-muted);border-radius:8px;padding:3px 2px;font-size:11px;line-height:1.3;min-height:44px}.tabbar__item.is-active{background:var(--selected-bg);color:var(--selection-ink);font-weight:600}.tabbar__item::after{display:none}.filter-sheet__panel{border-radius:16px 16px 0 0}.player{grid-template-columns:minmax(0,1fr);grid-template-areas:'topbar' 'stage' 'modes' 'side' 'progress' 'controls' 'footer';gap:4px}.player__side{min-height:0;max-height:36dvh;overflow:auto;gap:8px}.player__subtitle-title{font-size:16px}.player__subtitles{max-height:none}.player__learning{display:contents}.player__mode{font-size:11px}.player__mode svg{width:16px;height:16px}.player__controls{height:48px}.player__more{bottom:calc(100% + 8px)}.player__stat{min-height:40px}.player__stat-label{font-size:11px}.player__footer{padding-top:0}.player__play{width:44px;height:44px}.player__top-title{font-size:16px}.player__sentence-text{font-size:16px}.filter-bar__inline{display:none}.filter-bar__toggle{display:flex;min-height:44px}.filter-bar{padding:12px}.home .filter-bar,.catalog .filter-bar{display:none}}
@media(prefers-reduced-motion:reduce){.video-loader,.player__play[data-playing=true]{animation:none}}

.account__settings>section{padding:24px;border:1px solid var(--border-base);border-radius:12px;background:linear-gradient(155deg,var(--material-surface-top),var(--material-surface-bottom));box-shadow:var(--material-contact),var(--material-elevation);display:flex;flex-direction:column;gap:16px}.account .section__title{display:flex;align-items:center;gap:8px}.account .section__title svg{width:20px;height:20px}.account .stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.account__links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.account__stats-hint{color:var(--text-secondary);font-size:14px}.account-theme-modes{display:flex;gap:8px;flex-wrap:wrap}.account-theme-modes .is-active{background:var(--selected-bg);color:var(--selection-ink);border-color:var(--primary)}.account-theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.account-theme-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:1px solid var(--border-base);border-radius:8px;background:var(--card-bg);color:var(--text-secondary);font:500 12px/1.5 var(--font-sans);cursor:pointer}.account-theme-card__preview{height:44px;display:block;border-radius:6px;overflow:hidden}.account-theme-card__preview svg{width:100%;height:100%}.account-theme-card>svg{display:none;position:absolute;right:8px;top:8px;color:var(--primary)}.account-theme-card.is-active{border-color:var(--primary);color:var(--selection-ink)}.account-theme-card.is-active>svg{display:block}.invite-row{display:flex;align-items:flex-end;gap:12px}.invite-row .field{flex:1;min-width:0}.invite-row .btn{flex-shrink:0}.account .account-card{padding:16px;background:var(--panel-bg);border-radius:12px}.skeleton{background:linear-gradient(120deg,var(--skeleton-base) 30%,var(--skeleton-shine) 40%,var(--skeleton-base) 48%);background-size:200% 100%;animation:skeleton-load 2s infinite linear}@keyframes skeleton-load{to{background-position:-100% 0}}
@media(max-width:860px){.account__settings>section{padding:16px}.account-theme-grid{gap:8px}.account-theme-card{padding:6px;font-size:11px}.account .stat-row{gap:8px}.topbar__right{gap:4px}.topbar__brand{gap:6px}.topbar__language{font-size:11px;min-height:32px;padding:4px}.topbar__vip{padding:4px 6px}.topbar__avatar{width:28px;height:28px}.topbar__right .topbar__icon-btn{width:28px}.account-profile__actions{gap:8px}.account-theme-card__preview{height:36px}}
@media(max-width:360px){.topbar__name{font-size:18px}.topbar__right .topbar__icon-btn{width:24px}.topbar__vip{font-size:10px}.topbar__logo{width:20px;height:20px}.invite-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}

.resume,.account-profile,.plan-summary,.vocab__sidebar{border-radius:var(--radius-card)}
.resume{text-decoration:none;color:var(--fg)}.resume__thumb{position:relative}.resume__cover{width:100%;height:100%;object-fit:cover}.resume__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--card-bg);box-shadow:0 2px 12px #0003}.resume__play:after{content:'';margin-left:4px;border-left:13px solid var(--primary);border-top:9px solid transparent;border-bottom:9px solid transparent}.resume__bar{background:var(--panel-bg);border-radius:999px;overflow:hidden}.resume__bar-fill{height:100%;background:var(--primary);border-radius:inherit}.resume:hover .resume__cta{box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-button-shadow),var(--material-contact)}



.filter-bar--compact .filter-row__options{display:none}.filter-row__select{min-height:44px;max-width:100%;border:1px solid var(--control-border);border-radius:8px;padding:8px 12px;background:var(--card-bg);color:var(--fg);font:400 14px/1.5 var(--font-sans)}.filter-sheet .filter-row__select{display:none}.home__search>.input,.catalog__search>.input{flex:1;min-width:0}.catalog__search>.btn{flex-shrink:0;white-space:nowrap}.home__search>.filter-bar__toggle,.catalog__search>.filter-bar__toggle{width:auto;flex:0 0 auto;gap:8px;padding:8px 12px;justify-content:center;white-space:nowrap}.player__mode svg{flex-shrink:0}


@media(max-width:860px){
  .tabbar__item svg{width:18px;height:18px}
  .is-watch-page .shell--student>.topbar,.is-watch-page .tabbar{display:none}
  .is-watch-page .shell--student .outlet{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .is-watch-page .shell--student .page.watch{width:calc(100% - 16px);margin:8px auto;min-height:0;gap:0}
  .is-watch-page .player{height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:430px;gap:8px;grid-template-rows:44px auto 44px minmax(0,1fr) 24px 48px 44px;align-items:stretch}
  .is-watch-page .player__topbar{min-height:44px}
  .is-watch-page .player__stage{width:calc(100% + 16px);margin-inline:-8px;height:auto;min-height:0;max-height:none;aspect-ratio:16/9;align-self:start}
  .is-watch-page .player__side{max-height:none;overflow:auto;padding-block:12px}
  .is-watch-page .player__mode{min-height:44px}
  .is-watch-page .player__footer{height:44px}
  .is-watch-page .player__subtitles{overflow:visible}
}

@media(min-width:1180px){
  .is-watch-page .shell--student .page.watch{max-width:1320px;margin-top:16px}
  .is-watch-page .player{grid-template-columns:minmax(0,1fr) minmax(320px,360px)}
}

.topbar__logo{position:relative;overflow:hidden;background:transparent;flex-shrink:0}.topbar__logo>img{position:absolute;width:140%;max-width:none;height:auto;left:-20%;top:-10%;clip-path:inset(0 0 34% 0);filter:none}

/* Functional controls share the reference material without changing their layout. */
.player__mode{background:var(--material-control-face);border-color:var(--material-control-edge);color:var(--text-secondary);box-shadow:var(--material-control-shadow)}
.player__mode.is-on{background:var(--material-selected-face);color:var(--fg);border-color:var(--primary);box-shadow:inset 0 1px 0 var(--material-highlight),inset 0 0 0 1px var(--primary),var(--material-contact)}
.player__control{color:var(--text-secondary);background:linear-gradient(180deg,color-mix(in srgb,var(--material-surface-top) 25%,transparent),transparent 80%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--material-highlight) 30%,transparent)}
.player__control:first-child{background:linear-gradient(155deg,var(--card-bg),var(--panel-bg));color:var(--fg);box-shadow:var(--material-control-shadow)}
.player__control.is-on,.player__control[aria-expanded=true]{background:var(--material-selected-face);color:var(--fg);box-shadow:inset 0 1px 0 var(--material-highlight),inset 0 0 0 1px var(--material-control-edge),var(--material-contact)}
.player__play{background:linear-gradient(145deg,var(--primary),var(--material-button-bottom));box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-button-shadow)}
.player__play:before{background:linear-gradient(145deg,var(--material-button-top),var(--material-button-mid) 50%,var(--material-button-bottom));box-shadow:inset 0 1px 0 var(--material-highlight)}
.player__more{background:linear-gradient(155deg,var(--material-surface-top),var(--card-bg));border-color:var(--material-control-edge);box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-contact),var(--material-layer-shadow)}
.player__more-item[aria-checked=true]{background:var(--material-selected-face);color:var(--fg);box-shadow:inset 0 1px 0 var(--material-highlight);font-weight:600}
.player__stat.is-on .player__stat-icon{background:var(--material-selected-face);border-radius:6px;box-shadow:inset 0 1px 0 var(--material-highlight)}
.player__stage-btn{background:linear-gradient(155deg,#192633b3,#07132180);box-shadow:inset 0 1px 0 #ffffff40}
:is(.filter-chip,.plan-status__button,.account-theme-modes .btn,.account__links .btn,.topbar__language,.home__category){background:var(--material-control-face);box-shadow:var(--material-control-shadow);border-color:var(--material-control-edge)}
:is(.plan-status__button.is-active,.account-theme-modes .is-active,.topbar__nav .is-active,.home__category.is-active){background:var(--material-selected-face);box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-contact)}
.filter-chip.is-active,.filter-sheet .filter-chip.is-active{background:linear-gradient(135deg,var(--material-button-top),var(--material-button-mid) 48%,var(--material-button-bottom));color:var(--on-primary);border-color:var(--primary);box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-button-shadow);font-weight:600}
:is(.filter-chip,.plan-status__button,.account-theme-modes .btn,.account__links .btn,.home__category):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
:is(.player__control,.player__mode,.player__play,.player__stat):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
:is(.player__control,.player__mode,.player__play,.player__stat):disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){
 .player__mode,.player__control:first-child,.player__control.is-on,.player__control[aria-expanded=true],.player__more,.player__stage-btn{-webkit-backdrop-filter:blur(var(--material-control-blur));backdrop-filter:blur(var(--material-control-blur))}
 .player__more{background:var(--material-control-face)}
}
@media(hover:hover){
 .player__control:hover:not(:disabled),.player__mode:hover:not(:disabled){background:var(--material-selected-face);color:var(--selection-ink)}
 .player__play:hover:not(:disabled){box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-contact),var(--material-button-shadow)}
}

/* Keep the two functional rows visually separated on narrow screens. */
@media(max-width:860px){
 .player__controls{column-gap:6px}
 .player__footer{column-gap:8px;padding-inline:4px}
}

/* Interactive cards and navigation use their component states for feedback. */
.shell--student :is(.resume,.resume-mini,.card__link,.topbar__brand,.topbar__link,.tabbar__item):is(:hover,:focus-visible){text-decoration:none}
.card__tags{flex-wrap:nowrap;min-width:0}
.card__tags>.chip{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__tags>:is(.chip--level,.chip--ok){flex:0 0 auto}
.filter-bar{background:linear-gradient(155deg,var(--material-surface-top),var(--material-surface-bottom));box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-contact)}
:is(.card:not(.card--skeleton),.resume,.resume-mini,.account-profile,.account__settings>section,.plan-summary,.vocab__sidebar,.vocab-item,.stat){--text-secondary:var(--card-text-secondary);--fg-muted:var(--card-text-secondary);background:var(--card-surface-face);border:1px solid var(--card-edge);border-top-color:var(--card-edge-light);border-left-color:var(--card-edge-light);box-shadow:var(--card-surface-shadow)}
.card--video:hover,.resume:hover{background:var(--card-surface-face);box-shadow:var(--card-surface-shadow);border-color:var(--card-edge-light)}
.plan-lesson{--text-secondary:var(--card-text-secondary);--fg-muted:var(--card-text-secondary);background:var(--card-surface-face);box-shadow:inset 0 1px 0 var(--material-highlight);border:1px solid var(--card-edge)}
.vip-badge{
  box-sizing:border-box;
  border:1px solid #a55d07;
  background-color:#d2a13a;
  background-image:linear-gradient(160deg,#c68a25,#d2a13a,#fff0a3,#d0a038,#c68a25);
  background-size:100% 100%;
  background-position:center;
  color:#442307;
  font-weight:650;
  text-shadow:0 1px 1px #fae385;
  box-shadow:0 3px 6px #00000029,0 3px 6px #6e501466,inset 0 -2px 5px 1px #8b4208,inset 0 -1px 1px 3px #fae385;
}
@media(forced-colors:active){.vip-badge{color:CanvasText;background:Canvas;border-color:CanvasText;text-shadow:none;box-shadow:none}}
.vocab-item{border-radius:var(--radius-card)}
.resume__play,.card__play{background:var(--material-control-face);box-shadow:inset 0 1px 0 var(--material-highlight),var(--material-button-shadow)}
/* Only the track and fill are adapted from Uiverse.io by Juanes200122. */
.resume__bar,.card__progress,.plan-summary__track{height:8px;border-radius:6px;overflow:hidden;background:var(--panel-bg)}
.card__progress{margin:4px 0 0}
.resume__bar-fill,.card__progress-fill,.plan-summary__track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--material-button-bottom),var(--primary));transform-origin:left;animation:learning-progress .4s ease-out both}
@keyframes learning-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.resume__bar-fill,.card__progress-fill,.plan-summary__track>span{animation:none}}


/* Account statistics: three slow gradient waves behind live, readable data. */
.account-stat{--account-stat-ink:#fff;--account-stat-base:#292052;--account-stat-shade:rgba(16,12,49,.5);position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-width:0;min-height:224px;padding:24px 12px;overflow:hidden;border:1px solid #bfb5ff66;border-radius:16px;background:var(--account-stat-base);box-shadow:inset 0 1px 0 #ffffff38,0 8px 28px -9px #00000073;color:var(--account-stat-ink)}
.account-stat__waves{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.account-stat__wave{position:absolute;left:-50%;top:-65%;width:240%;height:280%;border-radius:40%;opacity:.6;background:linear-gradient(24deg,#af40ff,#5b42f3 60%,#00ddeb);animation:account-stat-wave 55s linear infinite;transform:rotate(0deg)}
.account-stat__wave:nth-child(2){left:-65%;top:45%;height:180%;animation-duration:50s;animation-delay:-17s}
.account-stat__wave:nth-child(3){left:-35%;top:45%;height:180%;animation-duration:45s;animation-delay:-31s}
.account-stat::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--account-stat-shade)}
.account-stat__content{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;min-width:0;text-align:center;color:var(--account-stat-ink)}
.account-stat__icon{display:grid;place-items:center;color:inherit}
.account-stat__value{max-width:100%;font:700 clamp(30px,3vw,42px)/1.2 var(--font-heading);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:inherit}
.account-stat__label{max-width:100%;font:600 14px/1.5 var(--font-sans);color:inherit;overflow-wrap:anywhere}
@keyframes account-stat-wave{to{transform:rotate(360deg)}}
@media(max-width:860px){.account-stat{min-height:168px;padding:20px 6px}.account-stat__content{gap:10px}.account-stat__icon svg{width:26px;height:26px}.account-stat__label{min-height:42px;display:flex;align-items:center;justify-content:center}}
@media(prefers-reduced-motion:reduce){.account-stat__wave{animation:none}.account-stat__wave:nth-child(2){transform:rotate(125deg)}.account-stat__wave:nth-child(3){transform:rotate(248deg)}}
@media(forced-colors:active){.account-stat{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;--account-stat-ink:CanvasText}.account-stat__waves,.account-stat::after{display:none}}

/* Full-width scenery stays independent from the live interface. */
.shell--student{--font-heading:Arial,"Microsoft YaHei","PingFang SC",sans-serif}
.shell--student :is(.page__title,.section__title,.plan-summary__title,.account-profile h2){font-family:var(--font-heading);font-weight:700}
.topbar__link{font-weight:600}
.home__browse-wrap{display:flex;flex-direction:column;gap:20px}
.shell--student .page__head{row-gap:10px}
.page--panorama{position:relative;isolation:isolate}
.page__panorama-image{position:absolute;z-index:-2;top:-96px;left:calc((100% - 100vw)/2);width:100vw;height:480px;max-width:none;object-fit:cover;object-position:right 65%;pointer-events:none;mask-image:linear-gradient(#000 48%,transparent)}
.page--panorama::before{content:'';position:absolute;z-index:-1;pointer-events:none;top:-96px;left:calc((100% - 100vw)/2);width:100vw;height:480px;background:linear-gradient(90deg,color-mix(in srgb,var(--page-bg) 94%,transparent),color-mix(in srgb,var(--page-bg) 80%,transparent) 48%,color-mix(in srgb,var(--page-bg) 35%,transparent)),linear-gradient(0deg,var(--page-bg),transparent 60%)}
.page--panorama>.page__head{min-height:140px;align-content:center;padding:16px 0 20px}
.page__blessing{grid-column:1;max-width:38em;margin-top:6px;font:600 18px/1.5 var(--font-serif);color:#805006;background:linear-gradient(165deg,#754805 8%,#a76d14 34%,#805006 48%,#9b6310 62%,#754805 85%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 #fff8)}
html[data-mode=dark] .page__blessing{color:#e4c779;background-image:linear-gradient(165deg,#ead28b 8%,#c3a75d 34%,#f9e6a4 48%,#c3a75d 62%,#ead28b 85%);filter:drop-shadow(0 1px 1px #0005)}
@media(max-width:860px){.home__browse-wrap{gap:16px}.vocab__content{gap:16px}.page__panorama-image,.page--panorama::before{top:-80px;height:400px}.page--panorama>.page__head{min-height:126px;padding:8px 0 14px}.page__blessing{font-size:16px;max-width:28em}}
@media(forced-colors:active){.page__panorama-image,.page--panorama::before{display:none}.page__blessing{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText;filter:none}.vocab-item__mastery{background:ButtonFace;color:ButtonText;border-color:ButtonText}}
.home{--home-hero-base:var(--page-bg);--home-hero-shade:color-mix(in srgb,var(--page-bg) 84%,transparent)}
.home__hero-image{position:absolute;z-index:-2;top:-96px;left:calc((100% - 100vw)/2);width:100vw;height:540px;max-width:none;object-fit:cover;object-position:right 65%;pointer-events:none;mask-image:linear-gradient(#000 60%,transparent)}
.home::before{content:'';position:absolute;z-index:-1;pointer-events:none;top:-96px;left:calc((100% - 100vw)/2);width:100vw;height:540px;background:linear-gradient(90deg,var(--home-hero-shade),color-mix(in srgb,var(--page-bg) 64%,transparent) 48%,color-mix(in srgb,var(--page-bg) 20%,transparent)),linear-gradient(0deg,var(--page-bg),transparent 55%)}
.home__hero{position:relative;display:flex;flex-direction:column;justify-content:center;gap:24px;min-height:188px;padding:24px 0;background:transparent}
.home__hero .page__head{display:flex;flex-direction:column;gap:8px;max-width:66%}
.home__hero .page__subtitle{max-width:34em;color:var(--fg)}
.home__hero .home__summary{gap:8px;max-width:76%}
.home__hero .home__stat{gap:6px;min-height:36px;padding:6px 10px;border:1px solid var(--material-control-edge);border-radius:8px;background:color-mix(in srgb,var(--card-bg) 96%,transparent);box-shadow:inset 0 1px 0 var(--material-highlight);font-size:13px}
.home__hero .home__stat svg{width:16px;height:16px;flex-shrink:0;color:var(--selection-ink)}
.home__hero .home__summary:empty{display:none}
.filter-bar__toggle>.filter-bar__summary:not(:empty){display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;line-height:1;border-radius:999px;background:var(--action-fill);color:var(--on-primary);font-size:12px;font-weight:600}
.filter-bar__toggle.is-filtered{border-color:var(--primary)}
.plan-status__label{white-space:nowrap}
.plan-status__count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--panel-bg);color:var(--fg);font:600 12px/1 var(--font-sans);font-variant-numeric:tabular-nums;flex-shrink:0}
.plan-status__button.is-active .plan-status__count{background:var(--action-fill);color:var(--on-primary)}
.plan-status__button{font:500 14px/1.4 var(--font-sans)}
.plan-lesson__state{display:flex;align-items:center;gap:4px;font:500 14px/1.5 var(--font-sans);color:var(--fg)}
.plan-lesson__state svg{flex-shrink:0;width:18px;height:18px}
.plan-lesson__tags>.chip{font-size:12px;min-height:26px}
@media(max-width:860px){
 .home__hero{min-height:180px;padding:12px 0;gap:18px}
 .home__hero-image,.home::before{top:-80px;height:420px}
 .home__hero .page__head{max-width:100%}
 .home::before{background:linear-gradient(90deg,color-mix(in srgb,var(--page-bg) 92%,transparent),var(--home-hero-shade) 42%,color-mix(in srgb,var(--page-bg) 44%,transparent)),linear-gradient(0deg,var(--page-bg),transparent 80%)}
 .home__hero .page__subtitle{max-width:28em}
 .home__hero .home__summary{max-width:100%;gap:6px}
 .home__hero .home__stat{flex-wrap:wrap;gap:4px;padding:5px 8px;font-size:12px;min-height:34px}
 .plan-status{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
 .plan-status__button{gap:4px;padding:8px 6px;font-size:14px}
 .plan-lesson__title{font-size:15px;line-height:1.45}
 .home__category{font-size:13px}
}
@media(max-width:420px){.plan-status{grid-template-columns:repeat(2,minmax(0,1fr))}}