/* Final authenticated shell layer. Practice is excluded in CSS and app.js. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar {
  border-bottom-color: rgba(0, 126, 222, 0.18) !important;
  background-color: rgba(248, 252, 255, 0.94) !important;
  background-image:
    linear-gradient(112deg, rgba(0, 126, 222, 0.065) 0 13%, transparent 13.1% 100%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(0, 91, 156, 0.03) 79px 80px) !important;
  background-size: auto !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.84), 0 5px 18px rgba(9, 42, 70, 0.07) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  animation: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar::after {
  right: 24px !important;
  bottom: -1px !important;
  width: 96px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--auth-primary), transparent) !important;
  opacity: 0.9 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper {
  border-right-color: var(--auth-border-strong) !important;
  background-color: rgba(237, 246, 253, 0.97) !important;
  background-image:
    linear-gradient(155deg, rgba(255, 255, 255, 0.74) 0 18%, transparent 18.1% 100%),
    repeating-linear-gradient(135deg, transparent 0 47px, rgba(0, 126, 222, 0.035) 47px 48px),
    linear-gradient(180deg, #f4faff 0%, #e6f2fb 100%) !important;
  box-shadow: 4px 0 20px rgba(9, 42, 70, 0.07) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > :is(.main-wrapper, .study-main),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > :is(.main-wrapper, .study-main) {
  background-color: var(--auth-canvas) !important;
  background-image:
    linear-gradient(115deg, rgba(0, 126, 222, 0.045) 0 14%, transparent 14.1% 100%),
    linear-gradient(245deg, rgba(0, 126, 222, 0.028) 0 10%, transparent 10.1% 100%),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--auth-shell-line) 79px 80px),
    repeating-linear-gradient(180deg, transparent 0 79px, var(--auth-shell-line) 79px 80px),
    linear-gradient(180deg, #f9fcff 0%, var(--auth-canvas) 100%) !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  background-size: cover, cover, auto, auto, 100% 100% !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a {
  border-color: transparent !important;
  color: var(--auth-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a:hover {
  border-color: rgba(0, 126, 222, 0.22) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.84), rgba(0, 126, 222, 0.06)) !important;
  box-shadow: 0 5px 14px rgba(9, 42, 70, 0.07) !important;
  transform: translateX(2px) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active > .sidebar-item > a {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(0, 126, 222, 0.11)) !important;
  box-shadow: inset 3px 0 0 var(--auth-primary), 0 6px 16px rgba(0, 103, 184, 0.09) !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group > li.active > .sidebar-item > a > i,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active > .sidebar-item > a > i {
  color: var(--auth-primary-pressed) !important;
  -webkit-text-fill-color: var(--auth-primary-pressed) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg {
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 4px 14px rgba(9, 42, 70, 0.06), inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg:hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg[aria-expanded="true"] {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 8px 20px rgba(0, 103, 184, 0.1), inset 0 -2px 0 var(--auth-primary) !important;
}

html body[data-requires-auth="true"][data-view][data-theme="dark"]:not([data-view="practice"])
.study-shell > .study-utility-bar,
html body[data-requires-auth="true"][data-view][data-theme="dark"]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper {
  background-color: rgba(12, 26, 39, 0.97) !important;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 47px, rgba(72, 174, 244, 0.035) 47px 48px),
    linear-gradient(180deg, #102333, #0a1824) !important;
}

html body[data-requires-auth="true"][data-view][data-theme="dark"]:not([data-view="practice"])
.study-shell > :is(.main-wrapper, .study-main),
html body[data-requires-auth="true"][data-view][data-theme="dark"]:not([data-view="practice"])
.container-fuild.study-shell > :is(.main-wrapper, .study-main) {
  background-color: var(--auth-canvas) !important;
  background-image:
    linear-gradient(115deg, rgba(72, 174, 244, 0.045) 0 14%, transparent 14.1%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(72, 174, 244, 0.025) 79px 80px),
    repeating-linear-gradient(180deg, transparent 0 79px, rgba(72, 174, 244, 0.025) 79px 80px) !important;
}

/* Final component treatment for page-specific legacy styles. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  background-color: var(--auth-canvas) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.container-fuild.study-shell[class~="study-shell"], .study-shell) {
  background-color: var(--auth-canvas) !important;
  background-image:
    linear-gradient(115deg, rgba(0, 126, 222, 0.04) 0 14%, transparent 14.1% 100%),
    repeating-linear-gradient(90deg, transparent 0 79px, var(--auth-shell-line) 79px 80px),
    repeating-linear-gradient(180deg, transparent 0 79px, var(--auth-shell-line) 79px 80px),
    linear-gradient(180deg, #f9fcff 0%, var(--auth-canvas) 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .profile-hero,
  .profile-panel,
  .profile-summary-card,
  .recharge-panel,
  .tier-card,
  .benefit-table,
  .partner-hero,
  .partner-plan-card,
  .partner-rule-card,
  .partner-feature-card,
  .market-toolbar,
  .market-results-bar,
  .market-list,
  .market-course-card,
  .mistake-course-option,
  .source_tab
) {
  border-color: var(--auth-border) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244, 250, 255, 0.96)) !important;
  box-shadow: var(--auth-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .profile-hero,
  .profile-panel,
  .recharge-panel,
  .partner-hero,
  .partner-plan-card,
  .benefit-table
) {
  border-top-color: rgba(0, 126, 222, 0.42) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .profile-empty,
  .profile-identity-line,
  .course-detail-notice,
  .benefit-col--label,
  .benefit-col--free
) {
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  background: linear-gradient(135deg, #f8fcff 0%, #edf6fd 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .home-icon-button,
  .profile-avatar-action,
  .vocab-records-trigger
) {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e5f2fc 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 103, 184, 0.1), inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .home-icon-button,
  .profile-avatar-action,
  .vocab-records-trigger
):hover {
  border-color: var(--auth-primary) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1493ed 0%, var(--auth-primary) 52%, #005daa 100%) !important;
  box-shadow: var(--auth-shadow-blue) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .course-directory-total,
  .course-lesson-level-pill,
  .mistake-course-option__count,
  .profile-badge--muted,
  .profile-pill,
  .recharge-state-pill--partner,
  .partner-chip,
  .partner-status-label,
  .partner-limit-tag
) {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(135deg, rgba(0, 126, 222, 0.12), rgba(0, 126, 222, 0.055)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.course-lesson-level-pill.is-primary {
  border-color: var(--auth-primary) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1493ed, #0067b8) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.wdrq > span {
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  background: linear-gradient(180deg, #ffffff, #edf6fd) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.wdrq > span.on,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.wdrq > span.active {
  border-color: var(--auth-primary) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1493ed, #0067b8) !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .planBox .planR .calendar .days p label span {
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  background: linear-gradient(180deg, #ffffff, #edf6fd) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .planBox .planR .calendar .days p label span.on,
html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .planBox .planR .calendar .days p label span.active {
  border-color: var(--auth-primary) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1493ed, #0067b8) !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN .vocab-records-trigger {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e5f2fc 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 103, 184, 0.1), inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.tier-card--partner {
  border-color: var(--auth-primary-border) !important;
  border-top-color: var(--auth-primary) !important;
  color: var(--auth-heading) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eaf5fd 100%) !important;
  box-shadow: 0 14px 34px rgba(0, 103, 184, 0.12), inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]
main.main-wrapper .upgrade-page .tier-card--partner {
  border-color: var(--auth-primary-border) !important;
  border-top-color: var(--auth-primary) !important;
  color: var(--auth-heading) !important;
  background: linear-gradient(145deg, #ffffff 0%, #eaf5fd 100%) !important;
  box-shadow: 0 14px 34px rgba(0, 103, 184, 0.12), inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]
main.main-wrapper .upgrade-page .recharge-state-pill--partner,
html body[data-requires-auth="true"][data-view="upgrade"]
main.main-wrapper .upgrade-page .recharge-state-pill--partner[data-plan-pill="partner"],
html body[data-requires-auth="true"][data-view="upgrade"]
main.main-wrapper .upgrade-page .tier-card--partner .tier-tag {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(135deg, rgba(0, 126, 222, 0.12), rgba(0, 126, 222, 0.055)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .benefit-col--member,
  .benefit-col--partner
) {
  border-color: var(--auth-border) !important;
  background: rgba(235, 246, 254, 0.72) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.benefit-value--exclusive .benefit-value__mark {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: var(--auth-primary-soft) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .chip,
  .reading-scope-button,
  .reading-filter-chip,
  .reading-button-group button,
  .home-period-tab,
  .reading-mode-switch button
) {
  min-height: 36px !important;
  border-color: var(--auth-border) !important;
  color: var(--auth-text) !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef6fc 100%) !important;
  box-shadow: 0 3px 9px rgba(9, 42, 70, 0.055), inset 0 1px 0 #fff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .chip.on,
  .reading-scope-button.is-active,
  .reading-filter-chip.is-active,
  .reading-button-group button.is-active,
  .home-period-tab.is-active,
  .reading-mode-switch button.is-active
) {
  border-color: var(--auth-primary-border) !important;
  color: var(--auth-primary-pressed) !important;
  background: linear-gradient(180deg, #ffffff 0%, #dceefb 100%) !important;
  box-shadow: inset 0 -2px 0 var(--auth-primary), 0 5px 12px rgba(0, 103, 184, 0.09) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > :is(.main-wrapper, .study-main),
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .container-fuild.study-shell > :is(.main-wrapper, .study-main) {
    background-attachment: scroll !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a:hover {
    transform: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
    .chip,
    .reading-scope-button,
    .reading-filter-chip,
    .reading-button-group button,
    .home-period-tab,
    .reading-mode-switch button,
    .pager-control,
    .pager-numbers button
  ) {
    min-height: 44px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    .course-back-link,
    .guide-series-card a,
    .pages a,
    a.del,
    .mistake-pagination a,
    .mistake-pagination button,
    .reading-back-link,
    .profile-avatar-action,
    .profile-link,
    .payment-channel-pill,
    .upgrade-agreement a,
    .market-toolbar-right a,
    .rebate-back-link
  ) {
    min-height: 44px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab"]
  .plan .planBox .planL .planN .vocab-records-trigger {
    min-height: 44px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
    .course-back-link,
    .reading-back-link,
    .profile-link,
    .upgrade-agreement a,
    .market-toolbar-right a,
    .rebate-back-link
  ) {
    display: inline-flex !important;
    align-items: center !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .course-back-link {
    width: 44px !important;
    min-width: 44px !important;
    justify-content: center !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
    .pages a,
    a.del
  ) {
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell {
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) *,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) *::before,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}