/* flat-ui.css
   右侧内容页扁平化设计层，最后加载，覆盖 base/app 及线上 reset/common。
   色系：深空科技 (deep space) + 电光蓝 + 霓虹青/淡紫。
   作用域：非练习页，兼容暗色模式。 */

/* ===== 令牌与线上变量兼容 ===== */
body:not([data-view="practice"]) {
  /* 深空基底 + 电光蓝主色 */
  --flat-bg: #0a0e1a;
  --flat-surface: #131829;
  --flat-surface-2: #1a2138;
  --flat-text: #e2e8f0;
  --flat-text-strong: #ffffff;
  --flat-muted: #94a3b8;
  --flat-muted-2: #7a85a8;
  --flat-border: #3a4470;
  --flat-border-soft: #2a3252;
  --flat-primary: #3b82f6;
  --flat-primary-hover: #2563eb;
  --flat-primary-soft: rgba(59, 130, 246, 0.15);
  --flat-primary-border: rgba(59, 130, 246, 0.45);
  --flat-accent-cyan: #22d3ee;
  --flat-accent-sky: #38bdf8;
  --flat-accent-teal: #2dd4bf;
  --flat-accent-green: #22c55e;
  --flat-accent-amber: #f59e0b;
  --flat-accent-rose: #fb7185;
  --flat-accent-purple: #a78bfa;
  --flat-accent-indigo: #6366f1;
  --flat-success: #22c55e;
  --flat-warning: #f59e0b;
  --flat-danger: #ef4444;
  --flat-radius: 10px;
  --flat-radius-sm: 8px;
  --flat-radius-xs: 6px;
  --flat-shadow: none;
  --flat-shadow-hover: 0 18px 34px rgba(2, 6, 23, 0.20), 0 0 0 1px rgba(34, 211, 238, 0.08);

  /* 兼容线上 common/reset 引用的变量（未引入时提供回退） */
  --bodyBg: #0a0e1a;
  --bodyT: #e2e8f0;
  --mainBox: #131829;
  --asideText: #94a3b8;
  --asideItemBg: rgba(59, 130, 246, 0.15);
  --asideItemB: rgba(59, 130, 246, 0.45);
  --bordere8e9eb: #3a4470;
  --bgf9f9f9: #1a2138;
  --focus: 0 0 0 3px rgba(59, 130, 246, 0.25);

  /* ===== 线上远程 CSS 模块引用的变量（market/study/vocab-search/knowledge 等）===== */
  --bgwhite: #131829;
  --maincolor: #3b82f6;
  --bordere4e9f1: #3a4470;
  --borderf2f6f9: #2a3252;
  --color2d3a4b: #ffffff;
  --color65748b: #e2e8f0;
  --color9ba9bb: #94a3b8;
  --color475568: #e2e8f0;
  --color6b798f: #94a3b8;
  --color66758c: #94a3b8;
  --color94a3b8: #94a3b8;
  --color94a3b7: #94a3b8;
  --color64748b: #94a3b8;
  --color7c899c: #94a3b8;
  --color242323: #ffffff;
  --color213c89: #60a5fa;
  --colorf9fafc: #1a2138;
  --bgf8fafc: #1a2138;
  --f1f5f9: #2a3252;
  --planBg: #131829;
  --bgeff6ff: rgba(59, 130, 246, 0.08);
  --bgf0f4fa: rgba(59, 130, 246, 0.06);
  --bg224fd50d: rgba(59, 130, 246, 0.10);
  --bordere4effe: rgba(59, 130, 246, 0.20);
  --bordere1edfd: rgba(59, 130, 246, 0.25);
  --borderf8: 1px solid #2a3252;
  --border8: 1px solid #3a4470;
  --borderf0: 1px solid #2a3252;
  --btn000: #3b82f6;
  --btnshine: rgba(255, 255, 255, 0.1);
  --e2e8f0: #3a4470;
  --bodyGrayT: #94a3b8;
  --locationBack: rgba(255, 255, 255, 0.06);
  --Knowledgebg: rgba(59, 130, 246, 0.08);
  --Knowledgecolor: #60a5fa;
  --Knowledgeico1: rgba(167, 139, 250, 0.10);
  --Knowledgeico2: rgba(34, 197, 94, 0.10);
  --Knowledgeico3: rgba(59, 130, 246, 0.10);
  --Knowledgeico4: rgba(245, 158, 11, 0.10);

  font-size: 14px !important;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0) 24%),
    linear-gradient(225deg, rgba(34, 211, 238, 0.10) 0%, rgba(34, 211, 238, 0) 22%),
    linear-gradient(315deg, rgba(167, 139, 250, 0.08) 0%, rgba(167, 139, 250, 0) 20%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 24%),
    var(--flat-bg) !important;
  background-attachment: fixed !important;
  color: var(--flat-text) !important;
  color-scheme: dark;
}

body:not([data-view="practice"])::selection,
body:not([data-view="practice"]) *::selection {
  background: rgba(125, 211, 252, 0.62) !important;
  color: #07111d !important;
}

body:not([data-view="practice"])::-moz-selection,
body:not([data-view="practice"]) *::-moz-selection {
  background: rgba(125, 211, 252, 0.62) !important;
  color: #07111d !important;
}

body:not([data-view="practice"])::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body:not([data-view="practice"])::-webkit-scrollbar-track {
  background: rgba(19, 24, 41, 0.92);
}

body:not([data-view="practice"])::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid rgba(19, 24, 41, 0.92);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.72), rgba(37, 99, 235, 0.92));
}

body:not([data-view="practice"])::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.84), rgba(37, 99, 235, 1));
}

body[data-theme="dark"]:not([data-view="practice"]) {
  --flat-bg: #060912;
  --flat-surface: #0f1422;
  --flat-surface-2: #161c2e;
  --flat-text: #d1dae8;
  --flat-text-strong: #f1f5f9;
  --flat-muted: #8b98b8;
  --flat-muted-2: #6b7699;
  --flat-border: #232b45;
  --flat-border-soft: #1a1f33;
  --flat-primary-soft: rgba(59, 130, 246, 0.18);
  --flat-primary-border: rgba(59, 130, 246, 0.50);
  --flat-shadow-hover: 0 18px 34px rgba(2, 6, 23, 0.24), 0 0 0 1px rgba(34, 211, 238, 0.10);
  --bodyBg: #060912;
  --bodyT: #b8c2dc;
  --mainBox: #0f1422;
  --asideText: #6b7699;
  --asideItemBg: rgba(59, 130, 246, 0.18);
  --asideItemB: rgba(59, 130, 246, 0.50);
  --bordere8e9eb: #232b45;
  --bgf9f9f9: #161c2e;
}

/* ===== 覆盖 reset.css 的 overflow:hidden / 焦点色 ===== */
html:not(:has(body[data-view="practice"])),
html body:not([data-view="practice"]) {
  overflow: auto !important;
  height: auto !important;
  width: auto !important;
  background: var(--flat-bg) !important;
}

/* 强制深色背景：覆盖远程 CSS 所有浅色背景 */
body:not([data-view="practice"]),
body:not([data-view="practice"]) .main-wrapper,
body:not([data-view="practice"]) .study-main,
body:not([data-view="practice"]) .mainBox,
body:not([data-view="practice"]) .study-shell,
body:not([data-view="practice"]) .maxWidth,
body:not([data-view="practice"]) .page-wrap,
body:not([data-view="practice"]) .bgwhite {
  background: var(--flat-bg) !important;
}

body:not([data-view="practice"]) .study-topbar,
body:not([data-view="practice"]) .market-layout,
body:not([data-view="practice"]) .market-sidebar,
body:not([data-view="practice"]) .market-content,
body:not([data-view="practice"]) .course,
body:not([data-view="practice"]) .guide,
body:not([data-view="practice"]) .knowledge,
body:not([data-view="practice"]) .plan {
  background: transparent !important;
}

body:not([data-view="practice"]) input:focus,
body:not([data-view="practice"]) textarea:focus,
body:not([data-view="practice"]) select:focus {
  border-color: var(--flat-primary) !important;
  box-shadow: var(--focus) !important;
  outline: none !important;
}

/* ===== 全局文字色强制覆盖：确保深色背景下文字鲜明可读 ===== */
body:not([data-view="practice"]) .mainBox,
body:not([data-view="practice"]) .main-wrapper,
body:not([data-view="practice"]) .study-main,
body:not([data-view="practice"]) .maxWidth,
body:not([data-view="practice"]) .bgwhite,
body:not([data-view="practice"]) .page-wrap {
  color: var(--flat-text) !important;
}

body:not([data-view="practice"]) h1,
body:not([data-view="practice"]) h2,
body:not([data-view="practice"]) h3,
body:not([data-view="practice"]) h4,
body:not([data-view="practice"]) h5,
body:not([data-view="practice"]) h6,
body:not([data-view="practice"]) strong,
body:not([data-view="practice"]) b {
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) p,
body:not([data-view="practice"]) label,
body:not([data-view="practice"]) .muted,
body:not([data-view="practice"]) .tiny {
  color: var(--flat-text) !important;
}

body:not([data-view="practice"]) .muted-2,
body:not([data-view="practice"]) .study-breadcrumbs,
body:not([data-view="practice"]) .study-breadcrumbs .divider {
  color: var(--flat-muted) !important;
}

/* ===== 全局边框增强：确保卡片与背景有鲜明区分 ===== */
body:not([data-view="practice"]) :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .quick-link-card, .category-card, .market-spotlight-item, .lesson-item,
  .course-card, .metric-card, .notice-strip, .dashboard-hero, .support-strip,
  .trial-banner, .detail-card, .membership-status-card, .cs-banner-compact,
  .market-notice, .vip-feature, .vip-quote, .vip-pay, .calendar, .progress,
  .progress2, .progress3, .hours, .time, .chat, .parmeBox, .terms-article,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .recent-course, .search-section, .explore-section,
  .search-result, .market-category-card, .market-filter-card, .market-list-card,
  .dashboard-panel, .market-toolbar, .market-notice-mini
) {
  border: 1px solid var(--flat-border) !important;
}

/* ===== 全局组件选中态统一 ===== */
body:not([data-view="practice"]) .chip.on,
body:not([data-view="practice"]) .chip.active,
body:not([data-view="practice"]) .status-pill.on,
body:not([data-view="practice"]) .category-btn.on,
body:not([data-view="practice"]) .Wtype span.on {
  background: linear-gradient(135deg, var(--flat-primary) 0%, var(--flat-accent-cyan) 100%) !important;
  border-color: rgba(34, 211, 238, 0.40) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18), 0 0 0 1px rgba(34, 211, 238, 0.08) !important;
}

/* ===== 全局按钮主色统一 ===== */
body:not([data-view="practice"]) .button.primary,
body:not([data-view="practice"]) .register,
body:not([data-view="practice"]) .btns a.VIP,
body:not([data-view="practice"]) .login-submit,
body:not([data-view="practice"]) .continue-btn {
  background: linear-gradient(135deg, var(--flat-primary) 0%, var(--flat-accent-cyan) 100%) !important;
  border-color: rgba(34, 211, 238, 0.30) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .button.primary:hover,
body:not([data-view="practice"]) .register:hover,
body:not([data-view="practice"]) .btns a.VIP:hover,
body:not([data-view="practice"]) .login-submit:hover,
body:not([data-view="practice"]) .continue-btn:hover {
  background: linear-gradient(135deg, var(--flat-primary-hover) 0%, var(--flat-accent-purple) 100%) !important;
  border-color: rgba(167, 139, 250, 0.34) !important;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.24), 0 0 0 1px rgba(167, 139, 250, 0.10) !important;
}

/* ===== 全局链接色统一 ===== */
body:not([data-view="practice"]) a {
  color: #e2e8f0;
}

body:not([data-view="practice"]) .course-link,
body:not([data-view="practice"]) .upgrade-link,
body:not([data-view="practice"]) .view-course-link {
  color: #93c5fd !important;
}

/* ===== 全局输入框统一 ===== */
body:not([data-view="practice"]) input,
body:not([data-view="practice"]) textarea,
body:not([data-view="practice"]) select,
body:not([data-view="practice"]) .search-box,
body:not([data-view="practice"]) .market-search,
body:not([data-view="practice"]) .mycourses-search {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) input::placeholder,
body:not([data-view="practice"]) textarea::placeholder {
  color: var(--flat-muted) !important;
}

/* ===== 全局分页选中态统一 ===== */
body:not([data-view="practice"]) .market-pages .on,
body:not([data-view="practice"]) .pages .on {
  background: var(--flat-primary) !important;
  border-color: var(--flat-primary) !important;
  color: #ffffff !important;
}

/* ===== 整体 shell：左侧固定栏 + 右侧自然滚动 ===== */
body:not([data-view="practice"]) .study-shell {
  display: block !important;
  min-height: 100vh !important;
  padding-left: 220px !important;
  margin: 0 !important;
  background: var(--flat-bg) !important;
  position: relative !important;
  overflow-x: clip !important;
}

/* ===== 侧边栏：统一框架，覆盖线上 common 的 !important ===== */
body:not([data-view="practice"]) .study-sidebar,
body:not([data-view="practice"]) .sidebar-wrapper {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 100vh !important;
  padding: 20px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(19, 24, 41, 0.98) 0%, rgba(15, 20, 34, 0.98) 100%) !important;
  border-right: 1px solid rgba(59, 130, 246, 0.16) !important;
  border-radius: 0 !important;
  box-shadow: 12px 0 36px rgba(0, 0, 0, 0.18) !important;
  z-index: 100 !important;
  transition: none !important;
}

body:not([data-view="practice"]) .study-sidebar.on,
body:not([data-view="practice"]) .sidebar-wrapper.on {
  width: 220px !important;
}

body:not([data-view="practice"]) .logo-wrapper {
  line-height: 1 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 20px !important;
  padding: 12px 14px !important;
  min-height: 72px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(59, 130, 246, 0.20) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(19, 24, 41, 0.96) 100%) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24) !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: left !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .logo-wrapper img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain !important;
  display: block !important;
  vertical-align: middle !important;
  position: static !important;
  top: 0 !important;
}

/* ===== 侧边导航：扁平，覆盖 common 的 padding:0 !important 与 scale hover ===== */
body:not([data-view="practice"]) .sidebar {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  display: block !important;
}

body:not([data-view="practice"]) .sidebar-wrapper .sidebar ul,
body:not([data-view="practice"]) .sidebar ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 2px !important;
  display: flex !important;
  flex-direction: column !important;
}

body:not([data-view="practice"]) .sidebar ul li {
  display: block !important;
  position: relative !important;
}

body:not([data-view="practice"]) .sidebar ul li:after {
  display: none !important;
}

body:not([data-view="practice"]) .sidebar ul li .sidebar-item {
  line-height: 1.2 !important;
  border-radius: var(--flat-radius-sm) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  backface-visibility: visible !important;
  perspective: none !important;
}

body:not([data-view="practice"]) .sidebar .sidebar-item a,
body:not([data-view="practice"]) body:not(.drawer-open) .sidebar .sidebar-item a {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 14px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  position: relative !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: var(--flat-radius-sm) !important;
  overflow: hidden !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

body:not([data-view="practice"]) .sidebar .sidebar-item a span,
body:not([data-view="practice"]) .sidebar .sidebar-item a i,
body:not([data-view="practice"]) .sidebar span.iconfont {
  color: #ffffff !important;
  margin-right: 0 !important;
  font-size: 16px !important;
  width: auto !important;
  line-height: 1 !important;
  position: static !important;
  top: 0 !important;
  flex-shrink: 0 !important;
}

body:not([data-view="practice"]) .sidebar .sidebar-item a img.sidebar-menu-icon {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
}

body:not([data-view="practice"]) .sidebar li.active .sidebar-item,
body:not([data-view="practice"]) .sidebar-item a:hover,
body:not([data-view="practice"]) .sidebar ul li:hover .sidebar-item {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  position: relative !important;
}

body:not([data-view="practice"]) .sidebar li.active .sidebar-item a,
body:not([data-view="practice"]) .sidebar li.active .sidebar-item a span,
body:not([data-view="practice"]) .sidebar li.active .sidebar-item a i,
body:not([data-view="practice"]) .sidebar-item a:hover,
body:not([data-view="practice"]) .sidebar-item a:hover span,
body:not([data-view="practice"]) .sidebar-item a:hover i,
body:not([data-view="practice"]) .sidebar ul li:hover .sidebar-item a,
body:not([data-view="practice"]) .sidebar ul li:hover .sidebar-item a span,
body:not([data-view="practice"]) .sidebar ul li:hover .sidebar-item a i {
  color: #ffffff !important;
  font-weight: 600 !important;
}


body:not([data-view="practice"]) .sidebar li.active .sidebar-item::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--flat-primary) !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5) !important;
}

body:not([data-view="practice"]) .sidebar-wrapper li.active .sidebar-item::before {
  display: none !important;
}

body:not([data-view="practice"]) .userinfo,
body:not([data-view="practice"]) .UserImg,
body:not([data-view="practice"]) .userbox {
  border-color: var(--flat-border) !important;
  background: var(--flat-surface) !important;
  border-radius: var(--flat-radius-sm) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer !important;
}

/* ===== 右侧内容区：覆盖 common 的 overflow/height/margin ===== */
body:not([data-view="practice"]) .main-wrapper,
body:not([data-view="practice"]) .study-main {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
  padding: 28px 32px 48px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0) 18%), var(--flat-bg) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
}

body:not([data-view="practice"]) .main-wrapper:after {
  display: none !important;
}

body:not([data-view="practice"]) .mainBox,
body:not([data-view="practice"]) .mainBox.report {
  background: transparent !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

body:not([data-view="practice"]) .main-wrapper > *,
body:not([data-view="practice"]) .study-main > *,
body:not([data-view="practice"]) .mainBox.report > *,
body:not([data-view="practice"]) .page-wrap,
body:not([data-view="practice"]) .guide,
body:not([data-view="practice"]) .knowledge,
body:not([data-view="practice"]) .course-detail-page,
body:not([data-view="practice"]) .maxWidth,
body:not([data-view="practice"]) .bgwhite {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not([data-view="practice"]) .main-wrapper > * + *,
body:not([data-view="practice"]) .study-main > * + *,
body:not([data-view="practice"]) .mainBox.report > * + * {
  margin-top: 24px !important;
}

/* ===== 卡片：扁平 ===== */
body:not([data-view="practice"]) :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .quick-link-card, .category-card, .market-spotlight-item, .lesson-item,
  .course-card, .metric-card, .notice-strip, .dashboard-hero, .support-strip,
  .trial-banner, .detail-card, .membership-status-card, .cs-banner-compact,
  .market-notice, .vip-feature, .vip-quote, .vip-pay, .calendar, .progress,
  .progress2, .progress3, .hours, .time, .chat, .parmeBox, .terms-article,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .recent-course, .search-section, .explore-section,
  .search-result, .market-category-card, .market-filter-card, .market-list-card,
  .dashboard-panel
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 18%, rgba(255, 255, 255, 0) 100%),
    var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow:
    0 16px 34px rgba(3, 7, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
}

body:not([data-view="practice"]) .panel-gradient {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(167, 139, 250, 0.08) 52%, rgba(34, 197, 94, 0.05) 100%),
    var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .panel-soft {
  background: var(--flat-surface-2) !important;
}

body:not([data-view="practice"]) .section-card-head,
body:not([data-view="practice"]) .section-head,
body:not([data-view="practice"]) .dashboard-panel__head,
body:not([data-view="practice"]) .title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.14) !important;
}

body:not([data-view="practice"]) .section-card-head > div,
body:not([data-view="practice"]) .section-head > div,
body:not([data-view="practice"]) .dashboard-panel__head > div,
body:not([data-view="practice"]) .title > div {
  min-width: 0 !important;
}

/* 卡片内填充统一 */
body:not([data-view="practice"]) .section-card,
body:not([data-view="practice"]) .panel-card,
body:not([data-view="practice"]) .dashboard-panel,
body:not([data-view="practice"]) .market-notice,
body:not([data-view="practice"]) .market-category-card,
body:not([data-view="practice"]) .market-filter-card,
body:not([data-view="practice"]) .market-list-card,
body:not([data-view="practice"]) .course-directory-card,
body:not([data-view="practice"]) .membership-status-card,
body:not([data-view="practice"]) .cs-banner-compact,
body:not([data-view="practice"]) .bgwhite {
  padding: 20px !important;
}

body:not([data-view="practice"]) .dashboard-hero,
body:not([data-view="practice"]) .detail-card {
  padding: 20px !important;
  gap: 16px !important;
}

body:not([data-view="practice"]) .feature-card,
body:not([data-view="practice"]) .team-card,
body:not([data-view="practice"]) .plan-card,
body:not([data-view="practice"]) .quick-link-card,
body:not([data-view="practice"]) .card-solid,
body:not([data-view="practice"]) .terms-article {
  padding: 20px !important;
}

body:not([data-view="practice"]) .trend-summary__item,
body:not([data-view="practice"]) .dashboard-plan-list .plan-item,
body:not([data-view="practice"]) .dashboard-activity-list .activity-item,
body:not([data-view="practice"]) .dashboard-tools-grid .quick-link-card {
  padding: 14px 16px !important;
  border-radius: var(--flat-radius-sm) !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border-soft) !important;
  box-shadow: none !important;
}

/* 可交互卡片 hover */
body:not([data-view="practice"]) .market-course-card,
body:not([data-view="practice"]) .course-card,
body:not([data-view="practice"]) .continue-course-card,
body:not([data-view="practice"]) .recent-course,
body:not([data-view="practice"]) .guide-series-card {
  cursor: pointer;
}

body:not([data-view="practice"]) .market-course-card:hover,
body:not([data-view="practice"]) .course-card:hover,
body:not([data-view="practice"]) .continue-course-card:hover,
body:not([data-view="practice"]) .recent-course:hover,
body:not([data-view="practice"]) .guide-series-card:hover {
  box-shadow: var(--flat-shadow-hover) !important;
  transform: translateY(-1px) !important;
  border-color: var(--flat-border) !important;
}

body:not([data-view="practice"]) :is(
  .market-course-card, .course li, .recent-course, .recent-course-card,
  .continue-course-card, .plan-card, .info-card, .membership-status-card,
  .cs-banner-compact, .market-toolbar, .market-notice-mini
) {
  border-top-width: 3px !important;
  border-top-style: solid !important;
  border-top-color: var(--card-accent, rgba(59, 130, 246, 0.54)) !important;
}

/* ===== 网格间距统一 ===== */
body:not([data-view="practice"]) .grid,
body:not([data-view="practice"]) .grid-2,
body:not([data-view="practice"]) .grid-3,
body:not([data-view="practice"]) .grid-4,
body:not([data-view="practice"]) .market-course-grid,
body:not([data-view="practice"]) .course-grid,
body:not([data-view="practice"]) .trend-summary,
body:not([data-view="practice"]) .dashboard-tools-grid,
body:not([data-view="practice"]) .dashboard-plan-list,
body:not([data-view="practice"]) .dashboard-activity-list,
body:not([data-view="practice"]) .course-lesson-list,
body:not([data-view="practice"]) .grid.feature-grid,
body:not([data-view="practice"]) .team-cards,
body:not([data-view="practice"]) .dashboard-page__content,
body:not([data-view="practice"]) .dashboard-insight-main,
body:not([data-view="practice"]) .dashboard-side-stack,
body:not([data-view="practice"]) .dashboard-secondary-grid,
body:not([data-view="practice"]) .dashboard-insight-grid,
body:not([data-view="practice"]) .knowledge .type ul {
  gap: 16px !important;
}

/* ===== 字号层级 ===== */
body:not([data-view="practice"]) .study-header-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

body:not([data-view="practice"]) .study-header-subtitle,
body:not([data-view="practice"]) .section-card-head p,
body:not([data-view="practice"]) .section-head p,
body:not([data-view="practice"]) .title p,
body:not([data-view="practice"]) .dashboard-panel__head p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--flat-muted) !important;
  margin: 0 !important;
}

body:not([data-view="practice"]) .section-card-head h3,
body:not([data-view="practice"]) .section-head h2,
body:not([data-view="practice"]) .title h2,
body:not([data-view="practice"]) .dashboard-panel__head h2,
body:not([data-view="practice"]) .course-title {
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

body:not([data-view="practice"]) .dashboard-hero__intro h1,
body:not([data-view="practice"]) .hero-copy h1,
body:not([data-view="practice"]) .promo-slide h1,
body:not([data-view="practice"]) .team-copy h2,
body:not([data-view="practice"]) .terms-shell h1 {
  font-size: 24px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

body:not([data-view="practice"]) .course-card h3,
body:not([data-view="practice"]) .course-card h4,
body:not([data-view="practice"]) .market-course-card h6,
body:not([data-view="practice"]) .feature-card h3,
body:not([data-view="practice"]) .team-card h3,
body:not([data-view="practice"]) .detail-card h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
  margin: 0 !important;
}

body:not([data-view="practice"]) .course-card p,
body:not([data-view="practice"]) .market-course-card p,
body:not([data-view="practice"]) .recent-course p,
body:not([data-view="practice"]) .continue-info,
body:not([data-view="practice"]) .feature-card p,
body:not([data-view="practice"]) .team-card p,
body:not([data-view="practice"]) .vip-feature p,
body:not([data-view="practice"]) .course-detail-desc,
body:not([data-view="practice"]) .course-subtitle,
body:not([data-view="practice"]) .terms-article p {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--flat-muted) !important;
  margin: 0 !important;
}

/* ===== 按钮：纯色扁平 ===== */
body:not([data-view="practice"]) .button,
body:not([data-view="practice"]) .register,
body:not([data-view="practice"]) .btns a,
body:not([data-view="practice"]) .btns button,
body:not([data-view="practice"]) .cs-btn,
body:not([data-view="practice"]) .continue-btn,
body:not([data-view="practice"]) .course-link,
body:not([data-view="practice"]) .course-series-card__link,
body:not([data-view="practice"]) .tool,
body:not([data-view="practice"]) .hero-icon-btn,
body:not([data-view="practice"]) .send-code,
body:not([data-view="practice"]) .wizard-next,
body:not([data-view="practice"]) .wizard-start,
body:not([data-view="practice"]) .login-submit,
body:not([data-view="practice"]) .upload-btn,
body:not([data-view="practice"]) .button.secondary,
body:not([data-view="practice"]) .button.primary,
body:not([data-view="practice"]) .button.ghost,
body:not([data-view="practice"]) .btns a.VIP {
  min-height: 40px !important;
  padding: 0 18px !important;
  border-radius: var(--flat-radius-sm) !important;
  border: 1px solid var(--flat-border) !important;
  background:
    linear-gradient(180deg, rgba(24, 31, 49, 0.98) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  color: var(--flat-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

body:not([data-view="practice"]) .button:hover,
body:not([data-view="practice"]) .register:hover,
body:not([data-view="practice"]) .btns a:hover,
body:not([data-view="practice"]) .btns button:hover,
body:not([data-view="practice"]) .cs-btn:hover,
body:not([data-view="practice"]) .continue-btn:hover,
body:not([data-view="practice"]) .course-link:hover,
body:not([data-view="practice"]) .course-series-card__link:hover,
body:not([data-view="practice"]) .tool:hover,
body:not([data-view="practice"]) .send-code:hover,
body:not([data-view="practice"]) .wizard-next:hover,
body:not([data-view="practice"]) .wizard-start:hover,
body:not([data-view="practice"]) .login-submit:hover,
body:not([data-view="practice"]) .upload-btn:hover {
  transform: none !important;
}

body:not([data-view="practice"]) .button.primary,
body:not([data-view="practice"]) .register,
body:not([data-view="practice"]) .btns a.VIP,
body:not([data-view="practice"]) .login-submit,
body:not([data-view="practice"]) .wizard-next,
body:not([data-view="practice"]) .wizard-start,
body:not([data-view="practice"]) .continue-btn {
  background: linear-gradient(135deg, var(--flat-primary) 0%, var(--flat-accent-cyan) 100%) !important;
  border-color: rgba(34, 211, 238, 0.30) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22) !important;
}

body:not([data-view="practice"]) .button.primary:hover,
body:not([data-view="practice"]) .register:hover,
body:not([data-view="practice"]) .btns a.VIP:hover,
body:not([data-view="practice"]) .login-submit:hover,
body:not([data-view="practice"]) .wizard-next:hover,
body:not([data-view="practice"]) .wizard-start:hover,
body:not([data-view="practice"]) .continue-btn:hover {
  background: linear-gradient(135deg, var(--flat-primary-hover) 0%, var(--flat-accent-purple) 100%) !important;
  border-color: rgba(167, 139, 250, 0.34) !important;
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.24), 0 0 0 1px rgba(167, 139, 250, 0.10) !important;
}

body:not([data-view="practice"]) .button.secondary,
body:not([data-view="practice"]) .button.ghost,
body:not([data-view="practice"]) .btns a:not(.VIP),
body:not([data-view="practice"]) .cs-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(59, 130, 246, 0.04) 100%) !important;
  border-color: rgba(96, 165, 250, 0.18) !important;
  color: var(--flat-text) !important;
}

body:not([data-view="practice"]) .button.secondary:hover,
body:not([data-view="practice"]) .button.ghost:hover,
body:not([data-view="practice"]) .btns a:not(.VIP):hover,
body:not([data-view="practice"]) .cs-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(34, 211, 238, 0.08) 100%) !important;
  border-color: rgba(34, 211, 238, 0.28) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .copy-action,
body:not([data-view="practice"]) [data-copy-text],
body:not([data-view="practice"]) [data-copy-link],
body:not([data-view="practice"]) [data-copy-value],
body:not([data-view="practice"]) [data-copy-invite-link],
body:not([data-view="practice"]) [data-copy-utility-text] {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(125, 211, 252, 0.42) !important;
  background: rgba(125, 211, 252, 0.16) !important;
  color: #e0f2fe !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .copy-action:hover,
body:not([data-view="practice"]) [data-copy-text]:hover,
body:not([data-view="practice"]) [data-copy-link]:hover,
body:not([data-view="practice"]) [data-copy-value]:hover,
body:not([data-view="practice"]) [data-copy-invite-link]:hover,
body:not([data-view="practice"]) [data-copy-utility-text]:hover {
  background: rgba(125, 211, 252, 0.24) !important;
  border-color: rgba(186, 230, 253, 0.72) !important;
  color: #f0fdff !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18) !important;
}

/* ===== 输入框 ===== */
body:not([data-view="practice"]) input,
body:not([data-view="practice"]) textarea,
body:not([data-view="practice"]) select,
body:not([data-view="practice"]) .search-box,
body:not([data-view="practice"]) .market-search,
body:not([data-view="practice"]) .mycourses-search {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: var(--flat-radius-sm) !important;
  border: 1px solid var(--flat-border) !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: var(--flat-text) !important;
}

body:not([data-view="practice"]) .search-box input,
body:not([data-view="practice"]) .market-search input,
body:not([data-view="practice"]) .mycourses-search input {
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) textarea {
  min-height: 120px !important;
  padding: 10px 14px !important;
  resize: vertical;
}

body:not([data-view="practice"]) input::placeholder,
body:not([data-view="practice"]) textarea::placeholder {
  color: var(--flat-muted-2) !important;
}

/* ===== Chip / Tag / Pill ===== */
body:not([data-view="practice"]) .chip,
body:not([data-view="practice"]) .status-pill,
body:not([data-view="practice"]) .lesson-chip {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: var(--flat-radius-xs) !important;
  border: 1px solid var(--flat-border) !important;
  background:
    linear-gradient(180deg, rgba(24, 31, 49, 0.98) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body:not([data-view="practice"]) .chip.on,
body:not([data-view="practice"]) .chip.active,
body:not([data-view="practice"]) .status-pill.on {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(167, 139, 250, 0.10) 100%) !important;
  border-color: var(--flat-primary) !important;
  color: #dbeafe !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.20) !important;
}

body:not([data-view="practice"]) .eyebrow,
body:not([data-view="practice"]) .tag-label,
body:not([data-view="practice"]) .course-level-pill,
body:not([data-view="practice"]) .badge-text.free,
body:not([data-view="practice"]) .promo-badge,
body:not([data-view="practice"]) .course-inline-stat,
body:not([data-view="practice"]) .course-directory-total,
body:not([data-view="practice"]) .dashboard-hero__meta span {
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: var(--flat-radius-xs) !important;
  border: 1px solid rgba(96, 165, 250, 0.22) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(167, 139, 250, 0.08) 100%) !important;
  color: #cfe3ff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ===== topbar：所有右侧页统一标题栏 ===== */
body:not([data-view="practice"]) .study-topbar,
body:not([data-view="practice"]) .mycourses-topbar {
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding: 0 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.10) !important;
}

body:not([data-view="practice"]) .market-search,
body:not([data-view="practice"]) .mycourses-search {
  width: 320px !important;
  min-width: 240px !important;
  max-width: 360px !important;
}

/* ===== 课程市场 ===== */
body:not([data-view="market"]) .market-course-grid,
body:not([data-view="market"]) #courseUI {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
}

body:not([data-view="market"]) .market-course-card {
  min-height: 240px !important;
  overflow: hidden !important;
}

body:not([data-view="market"]) .market-course-card .img {
  aspect-ratio: 726 / 414;
  background: var(--flat-surface-2) !important;
}

body:not([data-view="market"]) .market-card-info,
body:not([data-view="market"]) .market-course-card .info {
  padding: 14px 16px !important;
}

body:not([data-view="market"]) .market-course-card h6 {
  font-size: 14px !important;
  font-weight: 600 !important;
}

body[data-view="market"] .market-layout {
  gap: 18px !important;
}

body[data-view="market"] .market-sidebar {
  gap: 18px !important;
}

body[data-view="market"] .market-sidebar .section-card,
body[data-view="market"] .market-toolbar,
body[data-view="market"] .market-content .market-list-card,
body[data-view="market"] .market-notice-mini {
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
  box-shadow:
    0 16px 34px rgba(3, 7, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-view="market"] .market-sidebar .section-card {
  padding: 16px !important;
  border-radius: 16px !important;
}

body[data-view="market"] .market-sidebar .chip {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
}

body[data-view="market"] .market-sidebar .chip.on {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(167, 139, 250, 0.12) 100%) !important;
  border-color: rgba(96, 165, 250, 0.48) !important;
  color: #dbeafe !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18) !important;
}

body[data-view="market"] .market-toolbar {
  padding: 14px 16px !important;
  border-radius: 16px !important;
}

body[data-view="market"] .market-content .market-list-card {
  padding: 20px !important;
  border-radius: 18px !important;
}

body[data-view="market"] .market-course-card {
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
  box-shadow:
    0 14px 30px rgba(3, 7, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-view="market"] .market-course-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(96, 165, 250, 0.40) !important;
  box-shadow:
    0 20px 40px rgba(3, 7, 18, 0.22),
    0 0 0 1px rgba(96, 165, 250, 0.12) !important;
}

body[data-view="market"] .market-notice-mini {
  border-radius: 14px !important;
  padding: 12px 16px !important;
}

/* ===== 分页 ===== */
body:not([data-view="market"]) .market-pages,
body:not([data-view="market"]) .pages {
  margin-top: 16px !important;
  justify-content: center !important;
  gap: 6px !important;
  display: flex !important;
}

body:not([data-view="market"]) .market-pages a,
body:not([data-view="market"]) .market-pages span,
body:not([data-view="market"]) .pages a,
body:not([data-view="market"]) .pages span {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  border-radius: var(--flat-radius-xs) !important;
  border: 1px solid var(--flat-border) !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
  color: var(--flat-text) !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not([data-view="market"]) .market-pages .on,
body:not([data-view="market"]) .pages .on {
  background: var(--flat-primary) !important;
  border-color: var(--flat-primary) !important;
  color: #fff !important;
}

/* ===== Dashboard ===== */
body:not([data-view="dashboard"]) {
  background: var(--flat-bg) !important;
}

body:not([data-view="dashboard"]) .dashboard-page,
body:not([data-view="dashboard"]) .dashboard-page__content {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 16px !important;
}

body:not([data-view="dashboard"]) .dashboard-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
  gap: 16px !important;
  background: var(--flat-surface) !important;
}

body:not([data-view="dashboard"]) .dashboard-hero__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body:not([data-view="dashboard"]) .dashboard-hero__actions,
body:not([data-view="dashboard"]) .hero-actions,
body:not([data-view="dashboard"]) .cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body:not([data-view="dashboard"]) .dashboard-insight-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.85fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

body:not([data-view="dashboard"]) .dashboard-secondary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body:not([data-view="dashboard"]) .trend-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body:not([data-view="dashboard"]) .dashboard-tools-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body:not([data-view="dashboard"]) .col73 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
  gap: 16px !important;
}

body:not([data-view="dashboard"]) .membership-status-card {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
}

body:not([data-view="dashboard"]) .cs-banner-compact {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
}

body:not([data-view="dashboard"]) .cs-icon-wrapper,
body:not([data-view="practice"]) .feature-card .icon,
body:not([data-view="practice"]) .team-card .avatar,
body:not([data-view="practice"]) .notice-icon,
body:not([data-view="practice"]) .course-directory-icon,
body:not([data-view="practice"]) .user-avatar-wrapper,
body:not([data-view="practice"]) .study-avatar-chip {
  background: var(--flat-primary-soft) !important;
  color: var(--flat-primary) !important;
  border-radius: var(--flat-radius-sm) !important;
}

body:not([data-view="dashboard"]) .cs-text h3,
body:not([data-view="dashboard"]) .user-name {
  color: var(--flat-text-strong) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

body:not([data-view="dashboard"]) .cs-text p {
  font-size: 13px !important;
  color: var(--flat-muted) !important;
}

/* ===== 课程详情 ===== */
body:not([data-view="course-detail"]) .course-detail-page,
body:not([data-view="course-market-detail"]) .course-detail-page {
  display: grid !important;
  gap: 16px !important;
}

body:not([data-view="course-detail"]) .course-detail-hero-card {
  display: grid !important;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 20px !important;
  background: var(--flat-surface) !important;
}

body:not([data-view="course-detail"]) .course-detail-title {
  font-size: 20px !important;
  font-weight: 600 !important;
}

body:not([data-view="course-detail"]) .course-lesson-row {
  border-top: 1px solid var(--flat-border-soft) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body:not([data-view="course-detail"]) .course-lesson-row:first-child {
  border-top: 0 !important;
}

body:not([data-view="course-detail"]) .course-lesson-row:hover {
  background: var(--flat-surface-2) !important;
}

body:not([data-view="course-detail"]) .course-lesson-index {
  border-radius: var(--flat-radius-sm) !important;
}

body:not([data-view="course-detail"]) .course-detail-notice {
  border-radius: var(--flat-radius-sm) !important;
  background: var(--flat-primary-soft) !important;
  border: 1px solid var(--flat-primary-border) !important;
  color: var(--flat-primary) !important;
}

/* ===== 我的课程 ===== */

/* 统计卡片：6 个卡片分 3 列 2 行，扁平干净 */
body:not([data-view="my-courses"]) .grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

body:not([data-view="my-courses"]) .grid-3 .panel-card,
body:not([data-view="my-courses"]) .grid-3 .metric-card {
  padding: 18px 20px !important;
  min-height: auto !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

body:not([data-view="my-courses"]) .grid-3 .tag-label,
body:not([data-view="my-courses"]) .metric-card-label {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

body:not([data-view="my-courses"]) .grid-3 strong,
body:not([data-view="my-courses"]) .metric-card strong {
  display: block !important;
  margin-top: 4px !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

/* 筛选区 */
body:not([data-view="my-courses"]) .section-card:not(.vip-panel) {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 18px 20px !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
}

body:not([data-view="my-courses"]) .filter-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not([data-view="my-courses"]) .filter-row + .filter-row {
  margin-top: 12px !important;
}

body:not([data-view="my-courses"]) .filter-row > .tiny,
body:not([data-view="my-courses"]) .filter-row > span.muted {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--flat-muted) !important;
  flex-shrink: 0 !important;
}

body:not([data-view="my-courses"]) .chip-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body:not([data-view="my-courses"]) .chip,
body:not([data-view="my-courses"]) .chip-list .chip {
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: var(--flat-radius-xs) !important;
  border: 1px solid var(--flat-border) !important;
  background: var(--flat-surface) !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

body:not([data-view="my-courses"]) .chip.on,
body:not([data-view="my-courses"]) .chip-list .chip.on {
  background: var(--flat-primary-soft) !important;
  border-color: var(--flat-primary) !important;
  color: var(--flat-primary) !important;
}

/* 继续学习卡片 */
body:not([data-view="my-courses"]) .continue-course-card {
  display: grid !important;
  grid-template-columns: 140px minmax(0, 1fr) auto !important;
  gap: 20px !important;
  padding: 20px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}

body:not([data-view="my-courses"]) .continue-course-card:hover {
  box-shadow: var(--flat-shadow-hover) !important;
  transform: translateY(-1px) !important;
}

body:not([data-view="my-courses"]) .continue-cover {
  width: 140px !important;
  height: 80px !important;
  min-height: 80px !important;
  border-radius: var(--flat-radius-sm) !important;
  overflow: hidden !important;
  background: var(--flat-surface-2) !important;
  aspect-ratio: auto !important;
}

body:not([data-view="my-courses"]) .continue-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body:not([data-view="my-courses"]) .continue-info {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  min-width: 0 !important;
}

body:not([data-view="my-courses"]) .course-name {
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="my-courses"]) .lesson-info {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body:not([data-view="my-courses"]) .lesson-tag,
body:not([data-view="my-courses"]) .lesson-name,
body:not([data-view="my-courses"]) .lesson-practice-status {
  display: inline-flex !important;
  align-items: center !important;
}

body:not([data-view="my-courses"]) .lesson-tag {
  min-height: 22px !important;
  padding: 0 8px !important;
  border-radius: var(--flat-radius-xs) !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border) !important;
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body:not([data-view="my-courses"]) .lesson-practice-status {
  gap: 4px !important;
}

body:not([data-view="my-courses"]) .lesson-practice-status b {
  font-weight: 600 !important;
  color: var(--flat-text) !important;
}

/* 进度条 */
body:not([data-view="my-courses"]) .progress-container {
  display: grid !important;
  gap: 6px !important;
}

body:not([data-view="my-courses"]) .progress-details {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body:not([data-view="my-courses"]) .course-progress-label {
  color: var(--flat-muted) !important;
  font-size: 13px !important;
}

body:not([data-view="my-courses"]) .course-progress {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="my-courses"]) .course-progress b {
  color: var(--flat-primary) !important;
}

body:not([data-view="my-courses"]) .progress-bar-wrapper {
  height: 4px !important;
  overflow: hidden !important;
  border-radius: 2px !important;
  background: var(--flat-border) !important;
}

body:not([data-view="my-courses"]) .progress-bar-fill {
  height: 100% !important;
  border-radius: 2px !important;
  background: var(--flat-primary) !important;
}

body:not([data-view="my-courses"]) .continue-action {
  align-self: center !important;
  display: flex !important;
  justify-content: flex-end !important;
}

body:not([data-view="my-courses"]) .continue-btn {
  min-height: 38px !important;
  padding: 0 20px !important;
  border-radius: var(--flat-radius-sm) !important;
  background: var(--flat-primary) !important;
  border: 1px solid var(--flat-primary) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

body:not([data-view="my-courses"]) .continue-btn:hover {
  background: var(--flat-primary-hover) !important;
  border-color: var(--flat-primary-hover) !important;
}

body:not([data-view="my-courses"]) .view-course-link {
  color: var(--flat-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* 课程列表 */
body:not([data-view="my-courses"]) .course {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  gap: 16px !important;
}

body:not([data-view="my-courses"]) .course ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body:not([data-view="my-courses"]) .course li {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}

body:not([data-view="my-courses"]) .course li:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--flat-shadow-hover) !important;
}

body:not([data-view="my-courses"]) .course li .img {
  background: var(--flat-surface-2) !important;
}

body:not([data-view="my-courses"]) .course li .info {
  padding: 14px 16px !important;
}

body:not([data-view="my-courses"]) .course li .info h6 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="my-courses"]) .course li .info .desc {
  border-color: var(--flat-border-soft) !important;
  margin-bottom: 12px !important;
}

body:not([data-view="my-courses"]) .course li .info .desc label {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
}

body:not([data-view="my-courses"]) .course li .info .time button {
  width: 100% !important;
  line-height: 1 !important;
  border-radius: var(--flat-radius-sm) !important;
  font-size: 14px !important;
}

body:not([data-view="my-courses"]) .course li .info .time button.jx {
  background: var(--flat-primary) !important;
  border: 1px solid var(--flat-primary) !important;
}

body:not([data-view="my-courses"]) .recent-course,
body:not([data-view="my-courses"]) .recent-course-card {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body:not([data-view="my-courses"]) .recent-course-cover {
  background: var(--flat-surface-2) !important;
}

/* ===== 会员权益 / 合伙人招募 / 推广返利 共用组件 ===== */
body:not([data-view="practice"]) .study-breadcrumbs {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--flat-muted-2) !important;
}

body:not([data-view="practice"]) .study-breadcrumbs .divider {
  color: var(--flat-muted-2) !important;
}

body:not([data-view="practice"]) .study-avatar-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 12px 6px 6px !important;
  border-radius: var(--flat-radius-sm) !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .study-avatar-chip img {
  width: 36px !important;
  height: 36px !important;
}

body:not([data-view="practice"]) .study-avatar-chip strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) .study-avatar-chip span {
  font-size: 12px !important;
  color: var(--flat-muted) !important;
}

/* 横幅 panel-gradient：多色层次 */
body:not([data-view="practice"]) .panel-gradient {
  padding: 24px !important;
  display: grid !important;
  gap: 20px !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(34, 211, 238, 0.09) 42%, rgba(167, 139, 250, 0.10) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.24) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: 0 18px 34px rgba(3, 7, 18, 0.18) !important;
  color: var(--flat-text) !important;
}

body:not([data-view="practice"]) .panel-gradient .section-head h2,
body:not([data-view="practice"]) .panel-gradient h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) .panel-gradient p,
body:not([data-view="practice"]) .panel-gradient .section-head p {
  font-size: 13px !important;
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .panel-gradient .tag-label {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(34, 211, 238, 0.10) 100%) !important;
  color: #dbeafe !important;
  border: 1px solid rgba(34, 211, 238, 0.24) !important;
}

/* 横幅内的小卡片：白底 */
body:not([data-view="practice"]) .panel-gradient .grid-3 .panel-card {
  padding: 18px !important;
  border-radius: var(--flat-radius-sm) !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  color: var(--flat-text) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .panel-gradient .grid-3 .panel-card strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) .panel-gradient .grid-3 .panel-card p {
  color: var(--flat-muted) !important;
  font-size: 13px !important;
}

/* 横幅内 notice-strip */
body:not([data-view="practice"]) .panel-gradient .notice-strip {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  color: var(--flat-text) !important;
  border-radius: var(--flat-radius-sm) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body:not([data-view="practice"]) .panel-gradient .notice-strip strong {
  color: var(--flat-text-strong) !important;
  font-size: 14px !important;
}

body:not([data-view="practice"]) .panel-gradient .notice-strip span {
  color: var(--flat-muted) !important;
  font-size: 13px !important;
}

body:not([data-view="practice"]) .course-actions {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* plan-grid 布局 */
body:not([data-view="practice"]) .plan-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

body:not([data-view="practice"]) .plan-card {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .plan-card strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) .plan-card .price {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--flat-primary) !important;
  line-height: 1.2 !important;
}

body:not([data-view="practice"]) .plan-card .price small {
  font-size: 13px !important;
  color: var(--flat-muted) !important;
  font-weight: 400 !important;
}

body:not([data-view="practice"]) .plan-card ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 8px !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
}

body:not([data-view="practice"]) .plan-card ul li {
  position: relative !important;
  padding-left: 18px !important;
  line-height: 1.6 !important;
}

body:not([data-view="practice"]) .plan-card ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0.6em !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--flat-primary-soft) !important;
  border: 1px solid var(--flat-primary-border) !important;
  transform: translateY(-50%) !important;
}

body:not([data-view="practice"]) .plan-card.featured {
  border-color: var(--flat-primary) !important;
  box-shadow: none !important;
  position: relative !important;
}

body:not([data-view="practice"]) .plan-card.featured::before {
  content: "推荐" !important;
  position: absolute !important;
  top: -1px !important;
  right: 16px !important;
  background: var(--flat-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 10px !important;
  border-radius: 0 0 var(--flat-radius-xs) var(--flat-radius-xs) !important;
}

/* lesson-list（权益对比/合作步骤/规则） */
body:not([data-view="practice"]) .lesson-list {
  display: grid !important;
  gap: 10px !important;
}

body:not([data-view="practice"]) .lesson-item {
  padding: 14px 16px !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border-soft) !important;
  border-radius: var(--flat-radius-sm) !important;
}

body:not([data-view="practice"]) .lesson-item.is-open {
  border-color: var(--flat-primary-border) !important;
  background: var(--flat-primary-soft) !important;
}

body:not([data-view="practice"]) .lesson-topline {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

body:not([data-view="practice"]) .lesson-title-block strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) .lesson-title-block small {
  margin-top: 4px !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body:not([data-view="practice"]) .lesson-count {
  flex: none !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: var(--flat-radius-xs) !important;
  background: var(--flat-surface-2) !important;
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body:not([data-view="practice"]) .lesson-item.is-open .lesson-count {
  background: var(--flat-primary) !important;
  color: #fff !important;
}

/* info-grid / info-card（常见问题/说明卡片） */
body:not([data-view="practice"]) .info-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

body:not([data-view="practice"]) .info-card {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: var(--flat-radius) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .info-tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: var(--flat-radius-xs) !important;
  background: var(--flat-primary-soft) !important;
  color: var(--flat-primary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  width: fit-content !important;
}

body:not([data-view="practice"]) .info-card h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--flat-text-strong) !important;
}

body:not([data-view="practice"]) .info-card p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* 这三个页面顶部主区垂直间距统一 */
body[data-view="upgrade"] .main-wrapper,
body[data-view="partner-recruit"] .main-wrapper,
body[data-view="promotion-rebate"] .main-wrapper {
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
}

body[data-view="upgrade"] .main-wrapper > *,
body[data-view="partner-recruit"] .main-wrapper > *,
body[data-view="promotion-rebate"] .main-wrapper > * {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== 词汇积累页：彻底压缩顶部空间 ===== */

/* 整个 plan 区域缩小 */
.plan .planBox {
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.plan .planBox .planL {
  padding: 14px 16px !important;
  width: auto !important;
}

.plan .planBox .planL .planN {
  margin-top: 8px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.plan .planBox .planL .planN h2 {
  font-size: 22px !important;
}

.plan .planBox .planL .planN h2 b {
  font-size: 22px !important;
}

.plan .planBox .planL .planN h2 b strong {
  font-size: 22px !important;
}

.plan .planBox .planL .planN h2 b span {
  font-size: 13px !important;
}

.plan .planBox .planL .planN h2 em {
  font-size: 11px !important;
  margin-top: 2px !important;
}

.plan .planBox .planL .planN a {
  font-size: 13px !important;
  padding: 8px 12px !important;
  bottom: 0 !important;
  position: relative !important;
}

/* 日历区域大幅压缩 */
.plan .planBox .planR {
  padding: 14px 16px !important;
}

.plan .planBox .planR .calendar {
  margin-top: 8px !important;
  height: auto !important;
}

.plan .planBox .planR .calendar .days {
  padding: 0 4px 4px !important;
}

.plan .planBox .planR .calendar .days p em {
  font-size: 12px !important;
  line-height: 28px !important;
}

.plan .planBox .planR .calendar .days p label span {
  font-size: 12px !important;
  padding: 3px 0 !important;
  margin-top: 4px !important;
  min-height: 22px !important;
}

/* 隐藏年度视图 - 太占空间 */
.plan .planBox .planR .calendar .years,
.plan .planBox .planR .calendar .years .yearMain {
  display: none !important;
}

/* 学习计划区域压缩 */
.plan .stay {
  margin-top: 12px !important;
  padding: 14px 16px !important;
}

.plan .stay .bigT {
  margin-bottom: 8px !important;
}

.plan .stay .bigT h4 {
  font-size: 15px !important;
}

.plan .stay .bigT p {
  font-size: 12px !important;
  padding-top: 2px !important;
}

/* 词书大本营压缩 */
.plan .wordBox {
  margin-top: 12px !important;
  padding: 14px 16px !important;
}

.plan .wordBox h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
}

.plan .wordBox h2 span {
  font-size: 12px !important;
  padding-top: 2px !important;
}

.plan .wordBox .wordType {
  margin-top: 0 !important;
  padding: 0 !important;
}

.plan .wordBox .wordType .Wtype {
  display: flex !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}

.plan .wordBox .wordType .Wtype span {
  font-size: 12px !important;
  line-height: 28px !important;
  padding: 0 10px !important;
  margin-right: 0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.plan .wordBox .wordType .Wtype span.on {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
}

.plan .wordBox .wordType ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  list-style: none !important;
  align-items: stretch !important;
}

.plan .wordBox .wordType li {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  grid-template-areas:
    "cover content"
    "cover status"
    "cover action" !important;
  gap: 8px 12px !important;
  align-items: start !important;
  padding: 12px !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 18%, rgba(255, 255, 255, 0) 100%),
    var(--flat-surface) !important;
  cursor: pointer !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease !important;
  min-height: 136px !important;
}

.plan .wordBox .wordType li:hover {
  box-shadow: 0 16px 30px rgba(3, 7, 18, 0.16), 0 0 0 1px rgba(59, 130, 246, 0.12) !important;
  border-color: var(--flat-primary-border) !important;
  transform: translateY(-1px) !important;
}

.plan .wordBox .wordType li label {
  grid-area: cover !important;
  width: 52px !important;
  height: 52px !important;
  line-height: 1 !important;
  margin-right: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  display: block !important;
  background: var(--flat-surface-2) !important;
}

.plan .wordBox .wordType li label img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.plan .wordBox .wordType li .tp1-content {
  grid-area: content !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.plan .wordBox .wordType li .tp1-content b {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--flat-text-strong) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.plan .wordBox .wordType li .tp1-content span {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--flat-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

.plan .wordBox .wordType li .tp1-content span em {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #4b5d89 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.plan .wordBox .wordType li .tp1-status-row {
  grid-area: status !important;
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
}

.plan .wordBox .wordType li .tp1-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--flat-muted) !important;
}

.plan .wordBox .wordType li .tp1-status.tp1-status--active {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.24) !important;
}

.plan .wordBox .wordType li .tp1-status.tp1-status--available {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(59, 130, 246, 0.24) !important;
}

.plan .wordBox .wordType li .tp1-action {
  grid-area: action !important;
  width: 100% !important;
  min-height: 38px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(34,211,238,0.12) 100%) !important;
  color: #93c5fd !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease !important;
  border: 1px solid rgba(59,130,246,0.24) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.plan .wordBox .wordType li .tp1-action:hover {
  background: rgba(59,130,246,0.25) !important;
  transform: translateY(-1px) !important;
}

.plan .wordBox .wordType li .tp1-action i {
  font-size: 15px !important;
}

.plan .wordBox .wordType li .tp1-action.tp1-action--loading {
  cursor: default !important;
  color: var(--flat-muted) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  justify-content: center !important;
}

.plan .wordBox .wordType li .tp1-action.tp1-action--loading i {
  animation: vocab-spin 1s linear infinite !important;
}

.plan .wordBox .wordType li.is-active-plan {
  border-color: rgba(34, 197, 94, 0.32) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.10), 0 16px 28px rgba(34, 197, 94, 0.08) !important;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 211, 238, 0.06) 100%) !important;
}

.plan .wordBox .wordType li.is-active-plan .tp1-action {
  background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(16,185,129,0.12) 100%) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.24) !important;
}

.plan .wordBox .wordType li p {
  min-width: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.plan .wordBox .wordType li > i.ri-add-line {
  display: none !important;
}

.plan .wordBox .wordType li.tp1--loading {
  cursor: default !important;
  opacity: 0.78 !important;
}

.plan .wordBox .wordType li.tp1--loading:hover {
  box-shadow: none !important;
  border-color: var(--flat-border) !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .plan .planBox .planL,
  .plan .planBox .planR {
    width: 100% !important;
  }
  .plan .wordBox .wordType ul {
    grid-template-columns: 1fr !important;
  }
  .plan .wordBox .wordType li {
    min-height: 128px !important;
  }
}

/* ===== 知识库 ===== */
body:not([data-view="knowledge-base"]) .knowledge .type ul {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not([data-view="knowledge-base"]) .knowledge .type li {
  min-height: auto !important;
  padding: 20px !important;
  border-radius: var(--flat-radius) !important;
  border: 1px solid var(--flat-border) !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
  list-style: none !important;
}

/* ===== 链接色 ===== */
body:not([data-view="practice"]) .section-card-head a,
body:not([data-view="practice"]) .course-link,
body:not([data-view="practice"]) .upgrade-link {
  color: var(--flat-primary) !important;
  font-weight: 500 !important;
}

/* ===== 头部 sticky ===== */
body:not([data-view="practice"]) .terms-header,
body:not([data-view="practice"]) .site-header,
body:not([data-view="practice"]) .header {
  background: rgba(10, 14, 26, 0.92) !important;
  border-bottom: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
}

/* ===== 暗色模式 ===== */
body[data-theme="dark"]:not([data-view="practice"]) :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .quick-link-card, .category-card, .market-spotlight-item, .lesson-item,
  .course-card, .metric-card, .notice-strip, .dashboard-hero, .support-strip,
  .trial-banner, .detail-card, .membership-status-card, .cs-banner-compact,
  .market-notice, .vip-feature, .vip-quote, .vip-pay, .calendar, .progress,
  .progress2, .progress3, .hours, .time, .chat, .parmeBox, .terms-article,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .recent-course, .search-section, .explore-section,
  .search-result, .market-category-card, .market-filter-card, .market-list-card,
  .dashboard-panel
) {
  background: var(--flat-surface) !important;
  border-color: var(--flat-border) !important;
  color: var(--flat-text) !important;
}

body[data-theme="dark"]:not([data-view="practice"]) .trend-summary__item,
body[data-theme="dark"]:not([data-view="practice"]) .dashboard-plan-list .plan-item,
body[data-theme="dark"]:not([data-view="practice"]) .dashboard-activity-list .activity-item,
body[data-theme="dark"]:not([data-view="practice"]) .dashboard-tools-grid .quick-link-card {
  background: var(--flat-surface-2) !important;
  border-color: var(--flat-border-soft) !important;
}

body[data-theme="dark"]:not([data-view="practice"]) .study-sidebar,
body[data-theme="dark"]:not([data-view="practice"]) .sidebar-wrapper {
  background: var(--flat-surface) !important;
  border-right-color: var(--flat-border) !important;
}

body[data-theme="dark"]:not([data-view="practice"]) .main-wrapper,
body[data-theme="dark"]:not([data-view="practice"]) .study-main,
body[data-theme="dark"]:not([data-view="practice"]) .study-shell {
  background: var(--flat-bg) !important;
}

body[data-theme="dark"]:not([data-view="practice"]) .button,
body[data-theme="dark"]:not([data-view="practice"]) .btns a,
body[data-theme="dark"]:not([data-view="practice"]) .btns button,
body[data-theme="dark"]:not([data-view="practice"]) .cs-btn,
body[data-theme="dark"]:not([data-view="practice"]) .button.secondary,
body[data-theme="dark"]:not([data-view="practice"]) .button.ghost {
  background: var(--flat-surface) !important;
  border-color: var(--flat-border) !important;
  color: var(--flat-text) !important;
}

body[data-theme="dark"]:not([data-view="practice"]) .chip,
body[data-theme="dark"]:not([data-view="practice"]) .status-pill {
  background: var(--flat-surface) !important;
  border-color: var(--flat-border) !important;
  color: var(--flat-muted) !important;
}

body[data-theme="dark"]:not([data-view="practice"]) .terms-header,
body[data-theme="dark"]:not([data-view="practice"]) .site-header,
body[data-theme="dark"]:not([data-view="practice"]) .header {
  background: rgba(6, 9, 18, 0.92) !important;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
  body:not([data-view="practice"]) .study-shell {
    padding-left: 0 !important;
  }

  body:not([data-view="practice"]) .study-sidebar,
  body:not([data-view="practice"]) .sidebar-wrapper {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--flat-border) !important;
  }

  body:not([data-view="practice"]) .logo-wrapper {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body:not([data-view="practice"]) .sidebar {
    flex: 1 1 auto !important;
  }

  body:not([data-view="practice"]) .main-wrapper,
  body:not([data-view="practice"]) .study-main {
    padding: 20px !important;
  }

  body:not([data-view="practice"]) .dashboard-hero,
  body:not([data-view="practice"]) .dashboard-insight-grid,
  body:not([data-view="practice"]) .col73,
  body:not([data-view="practice"]) .course-detail-hero-card {
    grid-template-columns: 1fr !important;
  }

  body:not([data-view="practice"]) .market-search,
  body:not([data-view="practice"]) .mycourses-search {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  body:not([data-view="practice"]) .main-wrapper,
  body:not([data-view="practice"]) .study-main {
    padding: 14px !important;
  }

  body:not([data-view="practice"]) .grid-2,
  body:not([data-view="practice"]) .grid-3,
  body:not([data-view="practice"]) .grid-4,
  body:not([data-view="practice"]) .market-course-grid,
  body:not([data-view="practice"]) .knowledge .type ul,
  body:not([data-view="practice"]) .dashboard-secondary-grid,
  body:not([data-view="practice"]) .trend-summary,
  body:not([data-view="practice"]) .dashboard-tools-grid {
    grid-template-columns: 1fr !important;
  }

  body:not([data-view="practice"]) .study-topbar,
  body:not([data-view="practice"]) .mycourses-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body:not([data-view="practice"]) .market-search,
  body:not([data-view="practice"]) .mycourses-search {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body:not([data-view="practice"]) .continue-course-card {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 远程 CSS 硬编码颜色覆盖（market.css / study.css / knowledge.css 等）===== */

/* 课程市场：卡片列表白底覆盖 */
body:not([data-view="practice"]) .cardList li,
body:not([data-view="practice"]) .cardList0 li,
body:not([data-view="practice"]) .TypeList li,
body:not([data-view="practice"]) .market-course-card {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .TypeList li .add {
  background: var(--flat-surface-2) !important;
  border: 2px dashed var(--flat-border) !important;
}

body:not([data-view="practice"]) .TypeList li .img,
body:not([data-view="practice"]) .TypeList li .img .img-placeholder,
body:not([data-view="practice"]) .market-course-card .img {
  background: var(--flat-surface-2) !important;
}

body:not([data-view="practice"]) .cardList li b,
body:not([data-view="practice"]) .TypeList li .info h6 {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .cardList li span,
body:not([data-view="practice"]) .TypeList li .info span,
body:not([data-view="practice"]) .TypeList li .info .desc label {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .TypeList li .info .desc label.cj,
body:not([data-view="practice"]) .market-course-card .level-badge.cj {
  background: rgba(34, 197, 94, 0.10) !important;
  color: #22c55e !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

body:not([data-view="practice"]) .TypeList li .info .desc label.zj,
body:not([data-view="practice"]) .market-course-card .level-badge.zj {
  background: rgba(59, 130, 246, 0.10) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

body:not([data-view="practice"]) .TypeList li .info .desc label.gj,
body:not([data-view="practice"]) .market-course-card .level-badge.gj {
  background: rgba(167, 139, 250, 0.10) !important;
  color: #a78bfa !important;
  border-color: rgba(167, 139, 250, 0.25) !important;
}

body:not([data-view="practice"]) .TypeList li .info .time label,
body:not([data-view="practice"]) .TypeList li .info .time label.t,
body:not([data-view="practice"]) .TypeList li .info .time label.t b {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .TypeList li .info .time label.t b.free {
  color: #22c55e !important;
}

body:not([data-view="practice"]) .modern-tip-card {
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.20) !important;
}

body:not([data-view="practice"]) .modern-tip-card .tip-left span {
  color: #60a5fa !important;
}

body:not([data-view="practice"]) .modern-tip-card .tip-right .kefu-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

body:not([data-view="practice"]) .market-hero-section .modern-search p {
  background: var(--flat-surface) !important;
  border: 2px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .market-hero-section .modern-search input {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .courseTab p label,
body:not([data-view="practice"]) .courseTab span em {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .courseTab p label.on,
body:not([data-view="practice"]) .courseTab span em.on {
  background: var(--flat-primary) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .courseTab p label:hover,
body:not([data-view="practice"]) .courseTab span em:hover {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .fixedTab {
  background: var(--flat-surface) !important;
}

/* 词汇学习页：study.css 硬编码覆盖 */
body:not([data-view="practice"]) .plan .planBox .planL,
body:not([data-view="practice"]) .plan .planBox .planR {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .plan .planBox .planT .pl {
  background: linear-gradient(135deg, var(--flat-primary), var(--flat-accent-purple)) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .planBox .planT .pl0 {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .planBox .planT .pl0 i {
  color: var(--flat-accent-cyan) !important;
}

body:not([data-view="practice"]) .plan .planBox .planT p {
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .plan .planBox .planT p span {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .planBox .planT p span.on {
  background: var(--flat-primary) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .planBox .planT .Date {
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .plan .planBox .planT .Date span,
body:not([data-view="practice"]) .plan .planBox .planT .Date label:hover span {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .planBox .planL .planN h2,
body:not([data-view="practice"]) .plan .planBox .planL .planN h2 b {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .planBox .planL .planN h2 em {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .planBox .planL .planN h2 b span {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .planBox .planL .planN a {
  background: var(--flat-surface-2) !important;
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .planBox .planL .planN a i {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .planBox .planR .calendar .days p label,
body:not([data-view="practice"]) .plan .planBox .planR .calendar .days p label.wdrq {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .planBox .planR .calendar .days p label span {
  background: var(--flat-surface-2) !important;
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType {
  background: transparent !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType .Wtype span {
  background: var(--flat-surface-2) !important;
  color: var(--flat-muted) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType .Wtype span.on {
  background: var(--flat-primary) !important;
  color: #ffffff !important;
  border-color: var(--flat-primary) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li:hover {
  border-color: var(--flat-primary-border) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li p b {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li p span {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li > i.ri-add-line {
  display: none !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-content {
  grid-area: content !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-content b {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-content span {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--flat-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-content span em {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #4b5d89 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-status-row {
  grid-area: status !important;
  display: flex !important;
  align-items: center !important;
  min-height: 24px !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  background: rgba(148, 163, 184, 0.12) !important;
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-status.tp1-status--active {
  background: rgba(34, 197, 94, 0.14) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.24) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-status.tp1-status--available {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #bfdbfe !important;
  border: 1px solid rgba(59, 130, 246, 0.24) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-action {
  grid-area: action !important;
  width: 100% !important;
  min-height: 38px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(34,211,238,0.12) 100%) !important;
  color: #93c5fd !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease !important;
  border: 1px solid rgba(59,130,246,0.24) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-action:hover {
  background: rgba(59,130,246,0.25) !important;
  transform: translateY(-1px) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-action i {
  font-size: 15px !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-action.tp1-action--loading {
  cursor: default !important;
  color: var(--flat-muted) !important;
  background: rgba(148, 163, 184, 0.08) !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
  justify-content: center !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li .tp1-action.tp1-action--loading i {
  animation: vocab-spin 1s linear infinite !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li.is-active-plan {
  border-color: rgba(34, 197, 94, 0.32) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.10), 0 16px 28px rgba(34, 197, 94, 0.08) !important;
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 211, 238, 0.06) 100%) !important;
}

body:not([data-view="practice"]) .plan .wordBox .wordType li.is-active-plan .tp1-action {
  background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(16,185,129,0.12) 100%) !important;
  color: #86efac !important;
  border-color: rgba(34, 197, 94, 0.24) !important;
}

@media (max-width: 1024px) {
  body:not([data-view="practice"]) .study-shell {
    padding-left: 0 !important;
  }

  body:not([data-view="practice"]) .study-sidebar,
  body:not([data-view="practice"]) .sidebar-wrapper {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    flex-direction: column !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--flat-border) !important;
    padding: 16px 14px 14px !important;
  }

  body:not([data-view="practice"]) .sidebar {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  body:not([data-view="practice"]) .sidebar-wrapper .sidebar ul,
  body:not([data-view="practice"]) .sidebar ul {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    gap: 8px !important;
  }

  body:not([data-view="practice"]) .sidebar ul li .sidebar-item a {
    min-height: 40px !important;
    height: auto !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  body:not([data-view="practice"]) .userinfo {
    width: 100% !important;
    margin-top: 4px !important;
  }

  body:not([data-view="practice"]) .main-wrapper,
  body:not([data-view="practice"]) .study-main {
    padding: 20px !important;
  }

  body:not([data-view="practice"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper,
  body:not([data-view="practice"]) .container-fuild.study-shell > .sidebar-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  body:not([data-view="practice"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar ul,
  body:not([data-view="practice"]) .container-fuild.study-shell > .sidebar-wrapper .sidebar ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
    gap: 8px !important;
  }

  body:not([data-view="practice"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar ul li .sidebar-item a,
  body:not([data-view="practice"]) .container-fuild.study-shell > .sidebar-wrapper .sidebar ul li .sidebar-item a {
    min-height: 40px !important;
    height: auto !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  body:not([data-view="practice"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo,
  body:not([data-view="practice"]) .container-fuild.study-shell > .sidebar-wrapper .userinfo {
    width: 100% !important;
  }

  body:not([data-view="practice"]) .plan .wordBox .wordType ul {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body:not([data-view="practice"]) .main-wrapper,
  body:not([data-view="practice"]) .study-main {
    padding: 14px !important;
  }

  body:not([data-view="practice"]) .sidebar-wrapper .sidebar ul,
  body:not([data-view="practice"]) .sidebar ul {
    grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)) !important;
  }

  body:not([data-view="practice"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar ul,
  body:not([data-view="practice"]) .container-fuild.study-shell > .sidebar-wrapper .sidebar ul {
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
  }

  body:not([data-view="practice"]) .plan .wordBox .wordType ul {
    grid-template-columns: 1fr !important;
  }
}

body:not([data-view="practice"]) .settingPlan .content {
  background: var(--flat-surface) !important;
}

body:not([data-view="practice"]) .settingPlan .content h5 {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .settingPlan .content .name {
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .settingPlan .content .everyday p span,
body:not([data-view="practice"]) .settingPlan .content .cycle {
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .settingPlan .content .everyday p span.on {
  background: var(--flat-primary) !important;
  border-color: var(--flat-primary) !important;
}

/* 单词查询页：vocab-search.css 硬编码覆盖 */
body:not([data-view="practice"]) .search-input-wrapper,
body:not([data-view="practice"]) .vocab-card,
body:not([data-view="practice"]) .word-detail-card,
body:not([data-view="practice"]) .stat-card,
body:not([data-view="practice"]) .refresh-btn,
body:not([data-view="practice"]) .back-btn {
  background: var(--flat-surface) !important;
  border-color: var(--flat-border) !important;
}

body:not([data-view="practice"]) .vocab-card .card-word,
body:not([data-view="practice"]) .detail-word,
body:not([data-view="practice"]) .section-title,
body:not([data-view="practice"]) .stat-value {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .vocab-card .card-phonetic,
body:not([data-view="practice"]) .detail-phonetic,
body:not([data-view="practice"]) .vocab-card .card-trans,
body:not([data-view="practice"]) .stat-label,
body:not([data-view="practice"]) .search-tips {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .sentence-item,
body:not([data-view="practice"]) .phrase-item {
  background: var(--flat-surface-2) !important;
}

body:not([data-view="practice"]) .sentence-en,
body:not([data-view="practice"]) .phrase-en,
body:not([data-view="practice"]) .trans-cn {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .sentence-cn,
body:not([data-view="practice"]) .phrase-cn,
body:not([data-view="practice"]) .trans-en {
  color: var(--flat-muted) !important;
}

body[data-view="vocab-search"] .main-wrapper {
  display: grid !important;
  gap: 0 !important;
  align-content: start !important;
  margin: 0 !important;
  padding-top: 12px !important;
  padding-right: 0 !important;
}

body[data-view="vocab-search"] .mainBox {
  width: 100%;
}

body[data-view="vocab-search"] .mainBox .maxWidth {
  width: min(1080px, calc(100vw - 40px));
  margin: 0 auto !important;
  display: grid;
  gap: 16px;
  padding-bottom: 20px;
  position: relative;
}

body[data-view="vocab-search"] .search-section,
body[data-view="vocab-search"] .search-result,
body[data-view="vocab-search"] .explore-section {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-view="vocab-search"] .vocab-search-shell {
  display: grid !important;
  gap: 14px !important;
  position: relative !important;
}

body[data-view="vocab-search"] .vocab-search-shell::before,
body[data-view="vocab-search"] .vocab-search-shell::after {
  content: '';
  position: absolute;
  inset: auto auto auto auto;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

body[data-view="vocab-search"] .vocab-search-shell::before {
  width: 180px;
  height: 180px;
  right: -42px;
  top: -20px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.10) 0%, rgba(96, 165, 250, 0) 72%);
  filter: blur(2px);
}

body[data-view="vocab-search"] .vocab-search-shell::after {
  width: 220px;
  height: 220px;
  left: -68px;
  bottom: 108px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.07) 0%, rgba(34, 211, 238, 0) 72%);
}

body[data-view="vocab-search"] .vocab-search-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 20px !important;
  align-items: start !important;
  padding: 22px 22px 20px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.98) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.12) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

body[data-view="vocab-search"] .vocab-search-copy {
  display: grid !important;
  gap: 8px !important;
  max-width: 700px !important;
  align-content: start !important;
}

body[data-view="vocab-search"] .vocab-search-eyebrow {
  color: #60a5fa !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body[data-view="vocab-search"] .vocab-search-copy h1 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 28px !important;
  line-height: 1.16 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

body[data-view="vocab-search"] .vocab-search-copy p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
  max-width: 48ch !important;
}

body[data-view="vocab-search"] .vocab-search-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

body[data-view="vocab-search"] .vocab-search-chips span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(96, 165, 250, 0.12) !important;
  color: #cfe5ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

body[data-view="vocab-search"] .search-box {
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  align-self: start !important;
  padding-top: 2px !important;
}

body[data-view="vocab-search"] .search-input-wrapper {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 54px !important;
  padding: 0 12px 0 14px !important;
  border-radius: 16px !important;
  background: var(--flat-surface) !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body[data-view="vocab-search"] .search-input-wrapper input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 54px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

body[data-view="vocab-search"] .search-input-wrapper .search-icon {
  margin-left: 0 !important;
  color: var(--flat-muted) !important;
  font-size: 17px !important;
}

body[data-view="vocab-search"] .search-input-wrapper .search-btn {
  width: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--flat-primary) 0%, var(--flat-accent-cyan) 100%) !important;
  box-shadow: none !important;
}

body[data-view="vocab-search"] .search-result {
  display: grid !important;
  gap: 12px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  background: rgba(19, 24, 41, 0.94) !important;
  border: 1px solid rgba(59, 130, 246, 0.14) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.10) !important;
}

body[data-view="vocab-search"] .result-header,
body[data-view="vocab-search"] .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}

body[data-view="vocab-search"] .result-header h2,
body[data-view="vocab-search"] .section-header h2 {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

body[data-view="vocab-search"] .result-header {
  padding: 0 !important;
}

body[data-view="vocab-search"] .section-header__copy {
  display: grid !important;
  gap: 4px !important;
}

body[data-view="vocab-search"] .section-header__copy p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body[data-view="vocab-search"] .result-content {
  display: grid !important;
}

body[data-view="vocab-search"] .vocab-search-result-card {
  display: grid !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.98) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
}

body[data-view="vocab-search"] .vocab-search-result-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #60a5fa 0%, #22d3ee 100%);
}

body[data-view="vocab-search"] .vocab-search-result-card--empty {
  background: rgba(19, 24, 41, 0.88) !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__eyebrow {
  display: block !important;
  color: #60a5fa !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

body[data-view="vocab-search"] .vocab-search-result-card h3 {
  margin: 4px 0 0 !important;
  font-size: 26px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(59, 130, 246, 0.14) !important;
  color: #bfdbfe !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__meaning {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__note {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body[data-view="vocab-search"] .explore-section {
  display: grid !important;
  gap: 12px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  background: rgba(19, 24, 41, 0.90) !important;
  border: 1px solid rgba(59, 130, 246, 0.12) !important;
  box-shadow: 0 12px 24px rgba(2, 6, 23, 0.10) !important;
}

body[data-view="vocab-search"] .word-cards.vocab-hint-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

body[data-view="vocab-search"] .vocab-hint-item {
  display: grid !important;
  gap: 7px !important;
  text-align: left !important;
  width: 100% !important;
  min-height: 96px !important;
  padding: 12px 12px 13px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(59, 130, 246, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

body[data-view="vocab-search"] .vocab-hint-item::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.9), rgba(34, 211, 238, 0.8));
}

body[data-view="vocab-search"] .vocab-hint-item:hover {
  border-color: rgba(96, 165, 250, 0.38) !important;
  transform: translateY(-1px) !important;
}

body[data-view="vocab-search"] .vocab-hint-item__word {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

body[data-view="vocab-search"] .vocab-hint-item__meta {
  color: #bfdbfe !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-view="vocab-search"] .vocab-hint-item__hint {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

body[data-view="vocab-search"] .search-result[hidden],
body[data-view="vocab-search"] .explore-section[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-view="vocab-search"] .mainBox .maxWidth {
    width: min(100%, calc(100vw - 24px));
  }

  body[data-view="vocab-search"] .vocab-search-hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 18px !important;
  }

  body[data-view="vocab-search"] .vocab-search-copy h1 {
    font-size: 24px !important;
  }

  body[data-view="vocab-search"] .vocab-search-result-card h3 {
    font-size: 22px !important;
  }
}

@media (max-width: 768px) {
  body[data-view="vocab-search"] .vocab-search-shell {
    gap: 12px !important;
  }

  body[data-view="vocab-search"] .vocab-search-shell::before,
  body[data-view="vocab-search"] .vocab-search-shell::after {
    display: none !important;
  }

  body[data-view="vocab-search"] .vocab-search-copy p {
    max-width: none !important;
  }

  body[data-view="vocab-search"] .vocab-search-chips {
    display: none !important;
  }

  body[data-view="vocab-search"] .search-input-wrapper {
    min-height: 52px !important;
  }

  body[data-view="vocab-search"] .search-input-wrapper input {
    min-height: 52px !important;
  }

  body[data-view="vocab-search"] .search-input-wrapper .search-btn {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body[data-view="vocab-search"] .search-result,
  body[data-view="vocab-search"] .explore-section {
    padding: 16px !important;
  }
}

/* 学习资源页：knowledge.css 硬编码覆盖 */
body:not([data-view="practice"]) .knowledge .type li,
body:not([data-view="practice"]) .knowledgeList p,
body:not([data-view="practice"]) .knowledgeCard li,
body:not([data-view="practice"]) .knowledgeList .list li,
body:not([data-view="practice"]) .grammar {
  background: var(--flat-surface) !important;
  border: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .knowledge .type li label {
  background: var(--flat-surface-2) !important;
}

body:not([data-view="practice"]) .knowledge .type h4 {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .knowledge .type h4 b {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .knowledge .type li p small b,
body:not([data-view="practice"]) .knowledge .type li span {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .knowledgeView {
  background: var(--flat-surface) !important;
  border-top: 1px solid var(--flat-border) !important;
  box-shadow: none !important;
}

body:not([data-view="practice"]) .knowledgeView .detail,
body:not([data-view="practice"]) .knowledgeView .article-title,
body:not([data-view="practice"]) .knowledgeView h3 {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .knowledgeView .detail blockquote {
  background: var(--flat-surface-2) !important;
  color: #60a5fa !important;
  border-left-color: var(--flat-primary) !important;
}

body:not([data-view="practice"]) .knowledgeView .detail code {
  background: var(--flat-surface-2) !important;
  color: #a78bfa !important;
}

body[data-view="knowledge-base"] .knowledge .type ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--knowledge-card-width, 480px)), var(--knowledge-card-width, 480px))) !important;
  gap: 18px !important;
  align-items: stretch !important;
  justify-content: center !important;
  justify-items: stretch !important;
}

body[data-view="knowledge-base"] .knowledge .type li {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 328px !important;
  padding: 22px 22px 82px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  isolation: isolate !important;
}

body[data-view="knowledge-base"] .knowledge .type li::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 56%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body[data-view="knowledge-base"] .knowledge .type li label {
  position: relative !important;
  z-index: 1 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
}

body[data-view="knowledge-base"] .knowledge .type li h4 {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 14px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}

body[data-view="knowledge-base"] .knowledge .type li h4 b {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}

body[data-view="knowledge-base"] .knowledge .type li span {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 12px !important;
  min-width: 0 !important;
}

body[data-view="knowledge-base"] .knowledge .type li p {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 14px !important;
  min-width: 0 !important;
}

body[data-view="knowledge-base"] .knowledge .type li p small {
  flex: 1 1 calc(50% - 10px) !important;
  min-width: 160px !important;
  margin: 0 !important;
}

body[data-view="knowledge-base"] .knowledge .type li p small b {
  line-height: 1.5 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body[data-view="knowledge-base"] .knowledge .type li strong,
body[data-view="knowledge-base"] .knowledge .type li a {
  position: relative !important;
  z-index: 1 !important;
}

body[data-view="knowledge-base"] .knowledge .type li strong {
  margin-top: auto !important;
}

body[data-view="knowledge-base"] .knowledge .type li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body[data-view="knowledge-base"] .knowledge .type li .bgic {
  position: absolute !important;
  right: -12px !important;
  bottom: -24px !important;
  z-index: 0 !important;
  font-size: 148px !important;
  line-height: 1 !important;
  opacity: 0.12 !important;
  pointer-events: none !important;
}

body[data-view="knowledge-base"] .knowledge .type li .bgic i {
  font-size: inherit !important;
  line-height: 1 !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg1 {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border-color: rgba(59, 130, 246, 0.22) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg1 label {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #93c5fd !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg1 .bgic {
  color: rgba(96, 165, 250, 0.95) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg2 {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.16) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border-color: rgba(34, 197, 94, 0.22) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg2 label {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #86efac !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg2 .bgic {
  color: rgba(34, 197, 94, 0.95) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg3 {
  background: linear-gradient(180deg, rgba(167, 139, 250, 0.16) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border-color: rgba(167, 139, 250, 0.22) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg3 label {
  background: rgba(167, 139, 250, 0.16) !important;
  color: #c4b5fd !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg3 .bgic {
  color: rgba(167, 139, 250, 0.95) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg4 {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border-color: rgba(245, 158, 11, 0.22) !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg4 label {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fcd34d !important;
}

body[data-view="knowledge-base"] .knowledge .type li.deg4 .bgic {
  color: rgba(245, 158, 11, 0.95) !important;
}

@media (max-width: 768px) {
  body[data-view="vocab-search"] .search-result,
  body[data-view="vocab-search"] .explore-section,
  body[data-view="vocab-search"] .stats-section,
  body[data-view="vocab-search"] .copyright-notice {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body[data-view="knowledge-base"] .knowledge .type li {
    padding: 20px 20px 84px !important;
    min-height: 0 !important;
  }

  body[data-view="knowledge-base"] .knowledge .type li p small {
    flex-basis: 100% !important;
    min-width: 0 !important;
  }

  body[data-view="knowledge-base"] .knowledge .type li .bgic {
    font-size: 140px !important;
  }
}

body:not([data-view="practice"]) .knowledgeList p a {
  border-top: 1px solid var(--flat-border) !important;
}

body:not([data-view="practice"]) .knowledgeList p a span,
body:not([data-view="practice"]) .grammar a span {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .knowledgeList p a i,
body:not([data-view="practice"]) .grammar a i {
  color: var(--flat-muted) !important;
}

body:not([data-view="practice"]) .knowledgeList .list li .info b {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .knowledgeList .list li .info span,
body:not([data-view="practice"]) .knowledgeList .list li .info p {
  color: var(--flat-muted) !important;
}

/* ===== 页面 panel 间距统一 ===== */
body:not([data-view="practice"]) .main-wrapper,
body:not([data-view="practice"]) .study-main {
  display: grid !important;
  gap: 16px !important;
  align-content: start !important;
}

body:not([data-view="practice"]) .main-wrapper > *,
body:not([data-view="practice"]) .study-main > *,
body:not([data-view="practice"]) .mainBox > * {
  margin-bottom: 0 !important;
}

body:not([data-view="practice"]) .maxWidth > * + *,
body:not([data-view="practice"]) .page-wrap > * + * {
  margin-top: 16px !important;
}

body[data-view="my-courses"] .main-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  align-content: start !important;
}

body[data-view="my-courses"] .main-wrapper .study-topbar {
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
}

body[data-view="my-courses"] .main-wrapper .my-stats-row {
  gap: 14px !important;
}

body[data-view="my-courses"] .main-wrapper .my-stat-item {
  position: relative !important;
  overflow: hidden !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.98) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.18) !important;
  box-shadow:
    0 14px 30px rgba(3, 7, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-view="my-courses"] .main-wrapper .my-stat-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.85) 40%, rgba(167, 139, 250, 0.55) 100%) !important;
  pointer-events: none !important;
}

body[data-view="my-courses"] .main-wrapper .my-stat-item .stat-num {
  color: #ffffff !important;
  text-shadow: 0 10px 18px rgba(0, 0, 0, 0.18) !important;
}

body[data-view="my-courses"] .main-wrapper .my-filter-bar {
  padding: 14px 16px !important;
  gap: 14px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
  box-shadow:
    0 14px 30px rgba(3, 7, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-view="my-courses"] .main-wrapper .my-filter-group .chip {
  min-height: 32px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(59, 130, 246, 0.16) !important;
}

body[data-view="my-courses"] .main-wrapper .my-filter-group .chip.on {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(167, 139, 250, 0.12) 100%) !important;
  color: #dbeafe !important;
  border-color: rgba(96, 165, 250, 0.48) !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18) !important;
}

body[data-view="my-courses"] .main-wrapper .continue-course-card {
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border-color: rgba(59, 130, 246, 0.16) !important;
  box-shadow:
    0 16px 34px rgba(3, 7, 18, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-view="my-courses"] .main-wrapper .course li,
body[data-view="my-courses"] .main-wrapper .recent-course,
body[data-view="my-courses"] .main-wrapper .recent-course-card {
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.14) !important;
  box-shadow:
    0 14px 30px rgba(3, 7, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

body[data-view="my-courses"] .main-wrapper .course li:hover,
body[data-view="my-courses"] .main-wrapper .recent-course:hover,
body[data-view="my-courses"] .main-wrapper .recent-course-card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 20px 40px rgba(3, 7, 18, 0.22),
    0 0 0 1px rgba(96, 165, 250, 0.12) !important;
}

body:not([data-view="practice"]) .logo-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 10px 12px !important;
  min-height: 64px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(34, 211, 238, 0.08) 48%, rgba(19, 24, 41, 0.96) 100%) !important;
  box-shadow: 0 16px 30px rgba(3, 7, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  text-decoration: none !important;
  color: #ffffff !important;
  flex: 0 0 auto !important;
}

body:not([data-view="practice"]) .logo-wrapper img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain !important;
  display: block !important;
  flex: none !important;
  top: 0 !important;
}

body:not([data-view="practice"]) .logo-wordmark {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not([data-view="practice"]) .sidebar li.active .sidebar-item {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.30) 0%, rgba(34, 211, 238, 0.16) 52%, rgba(167, 139, 250, 0.14) 100%) !important;
  border-color: rgba(34, 211, 238, 0.44) !important;
  box-shadow: 0 14px 26px rgba(37, 99, 235, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

body:not([data-view="practice"]) .sidebar li.active .sidebar-item::after {
  width: 4px !important;
  background: linear-gradient(180deg, #60a5fa 0%, #22d3ee 100%) !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.6) !important;
}

body:not([data-view="practice"]) .study-utility-bar {
  position: fixed !important;
  top: 16px !important;
  right: 20px !important;
  z-index: 260 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: calc(100vw - 40px) !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(15, 20, 34, 0.96) 0%, rgba(19, 24, 41, 0.96) 52%, rgba(26, 33, 56, 0.98) 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.20) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(96, 165, 250, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body:not([data-view="practice"]) .study-utility-links {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

body:not([data-view="practice"]) .study-utility-link {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(59, 130, 246, 0.07) 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

body:not([data-view="practice"]) .study-utility-link i {
  font-size: 16px !important;
  line-height: 1 !important;
}

body:not([data-view="practice"]) .study-utility-link:hover,
body:not([data-view="practice"]) .study-utility-link.is-active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(34, 211, 238, 0.12) 100%) !important;
  border-color: rgba(34, 211, 238, 0.42) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18), 0 0 0 1px rgba(34, 211, 238, 0.08) !important;
  transform: translateY(-1px) !important;
}

body:not([data-view="practice"]) .study-utility-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px 0 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body:not([data-view="practice"]) .study-utility-brand img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
}

body:not([data-view="practice"]) .study-utility-brand span {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

body:not([data-view="practice"]) .study-utility-panel {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 320px !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(18, 24, 42, 0.98) 0%, rgba(13, 17, 30, 0.98) 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  display: grid !important;
  gap: 14px !important;
}

body:not([data-view="practice"]) .study-utility-panel[hidden] {
  display: none !important;
}

body:not([data-view="practice"]) .study-utility-panel__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body:not([data-view="practice"]) .study-utility-panel__eyebrow {
  display: block !important;
  color: var(--flat-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body:not([data-view="practice"]) .study-utility-panel__title {
  display: block !important;
  margin-top: 4px !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body:not([data-view="practice"]) .study-utility-panel__desc {
  margin: 6px 0 0 !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body:not([data-view="practice"]) .study-utility-panel__close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

body:not([data-view="practice"]) .study-utility-panel__body {
  display: grid !important;
  gap: 12px !important;
}

body:not([data-view="practice"]) .study-utility-qr {
  display: grid !important;
  gap: 10px !important;
  justify-items: center !important;
  text-align: center !important;
}

body:not([data-view="practice"]) .study-utility-qr img {
  width: 160px !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  background: #ffffff !important;
}

body:not([data-view="practice"]) .study-utility-qr strong {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body:not([data-view="practice"]) .study-utility-qr p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

body:not([data-view="practice"]) .study-utility-notices {
  display: grid !important;
  gap: 10px !important;
}

body:not([data-view="practice"]) .study-utility-notice {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

body:not([data-view="practice"]) .study-utility-notice strong {
  display: block !important;
  margin-bottom: 4px !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

body:not([data-view="practice"]) .study-utility-notice span {
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body:not([data-view="practice"]) .study-utility-cta {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

body:not([data-view="practice"]) .study-utility-cta .button {
  flex: 1 1 0 !important;
  justify-content: center !important;
}

body:not([data-view="practice"]) .study-utility-cta .button.secondary {
  background: rgba(255, 255, 255, 0.03) !important;
}

body:not([data-view="practice"]) .study-utility-panel .button {
  min-width: 0 !important;
}

body:not([data-view="practice"]) .dashboard-page-v2,
body[data-view="partner-recruit"] .main-wrapper,
body[data-view="promotion-rebate"] .main-wrapper {
  display: grid !important;
  gap: 28px !important;
}

body[data-view="dashboard"] .dashboard-hero-v2 {
  gap: 20px !important;
}

body[data-view="dashboard"] .dashboard-hero-v2__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

body[data-view="dashboard"] .dashboard-hero-v2__eyebrow,
body[data-view="partner-recruit"] .partner-hero-v2__eyebrow {
  margin: 0 0 8px !important;
  color: var(--flat-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-view="dashboard"] .dashboard-hero-v2__title {
  margin: 0 0 8px !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body[data-view="dashboard"] .dashboard-hero-v2__summary {
  max-width: 680px !important;
  color: var(--flat-muted) !important;
}

body[data-view="dashboard"] .dashboard-member-card {
  min-width: 280px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border-soft) !important;
  display: grid !important;
  gap: 12px !important;
}

body[data-view="dashboard"] .dashboard-member-card__avatar img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

body[data-view="dashboard"] .dashboard-member-card__info {
  display: grid !important;
  gap: 4px !important;
}

body[data-view="dashboard"] .dashboard-member-card__info strong {
  font-size: 18px !important;
}

body[data-view="dashboard"] .dashboard-member-card__info span,
body[data-view="dashboard"] .dashboard-member-card__info em {
  color: var(--flat-muted) !important;
  font-style: normal !important;
}

body[data-view="dashboard"] .dashboard-member-card__cta {
  justify-self: start !important;
}

body[data-view="dashboard"] .dashboard-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-view="dashboard"] .dashboard-next-actions,
body[data-view="dashboard"] .dashboard-study-cards,
body[data-view="dashboard"] .dashboard-course-grid,
body[data-view="partner-recruit"] .partner-summary-grid,
body[data-view="promotion-rebate"] .rebate-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-view="dashboard"] .dashboard-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.95fr) !important;
  gap: 28px !important;
}

body[data-view="dashboard"] .dashboard-main-grid__left,
body[data-view="dashboard"] .dashboard-main-grid__right {
  display: grid !important;
  gap: 28px !important;
}

body[data-view="dashboard"] .dashboard-metric-card,
body[data-view="dashboard"] .dashboard-action-card,
body[data-view="dashboard"] .dashboard-stat-card,
body[data-view="dashboard"] .partner-summary-card,
body[data-view="promotion-rebate"] .rebate-summary-card {
  padding: 18px !important;
  border-radius: 14px !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border-soft) !important;
  display: grid !important;
  gap: 8px !important;
}

body[data-view="dashboard"] .dashboard-study-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-view="dashboard"] .dashboard-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body[data-view="dashboard"] .dashboard-calendar-day {
  min-height: 58px !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border-soft) !important;
  display: grid !important;
  align-content: space-between !important;
}

body[data-view="dashboard"] .dashboard-calendar-day.is-studied {
  border-color: var(--flat-primary-border) !important;
  background: rgba(59, 130, 246, 0.12) !important;
}

body[data-view="dashboard"] .dashboard-calendar-day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important;
}

body[data-view="dashboard"] .dashboard-course-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-view="dashboard"] .dashboard-activity-list,
body[data-view="partner-recruit"] .partner-reward-list {
  display: grid !important;
  gap: 12px !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;
  align-items: stretch !important;
  gap: 20px !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__copy {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__content .partner-hero-v2__eyebrow {
  margin-bottom: 2px !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__content h2 {
  margin: 0 !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  color: var(--flat-text-strong) !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__content p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  line-height: 1.7 !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__stats div {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--flat-border-soft) !important;
  display: grid !important;
  gap: 6px !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__stats span {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__stats strong {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}

body[data-view="partner-recruit"] .partner-hero-v2__content .partner-referral-card {
  min-width: 0 !important;
}

body[data-view="partner-recruit"] .partner-referral-card {
  padding: 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16) 0%, rgba(19, 24, 41, 1) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.28) !important;
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
}

body[data-view="partner-recruit"] .partner-referral-card strong {
  font-size: 26px !important;
}

body[data-view="partner-recruit"] .partner-referral-link {
  display: grid !important;
  gap: 6px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--flat-border-soft) !important;
}

body[data-view="partner-recruit"] .partner-referral-link label {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-view="partner-recruit"] .partner-referral-link code {
  display: block !important;
  word-break: break-all !important;
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body[data-view="partner-recruit"] .partner-referral-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-view="partner-recruit"] .partner-layout-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

body[data-view="partner-recruit"] .partner-layout-v2__left,
body[data-view="partner-recruit"] .partner-layout-v2__right {
  display: grid !important;
  gap: 28px !important;
}

body[data-view="partner-recruit"] .partner-steps-v2,
body[data-view="promotion-rebate"] .partner-steps-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-view="partner-recruit"] .partner-table,
body[data-view="promotion-rebate"] .partner-table {
  display: grid !important;
  gap: 10px !important;
}

body[data-view="partner-recruit"] .partner-table-row,
body[data-view="promotion-rebate"] .partner-table-row {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border-soft) !important;
  display: grid !important;
  grid-template-columns: 1.2fr 0.9fr 0.8fr 1fr !important;
  gap: 12px !important;
  align-items: center !important;
}

body[data-view="partner-recruit"] .partner-table-row div,
body[data-view="promotion-rebate"] .partner-table-row div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

body[data-view="partner-recruit"] .partner-table-row div strong,
body[data-view="promotion-rebate"] .partner-table-row div strong {
  color: #ffffff !important;
  font-size: 14px !important;
}

body[data-view="partner-recruit"] .partner-table-row div span,
body[data-view="promotion-rebate"] .partner-table-row div span {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
}

body[data-view="partner-recruit"] .partner-status-pill,
body[data-view="promotion-rebate"] .partner-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(59, 130, 246, 0.14) !important;
  border: 1px solid var(--flat-primary-border) !important;
  color: var(--flat-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

@media (max-width: 1100px) {
  body:not([data-view="practice"]) .study-utility-bar {
    position: static !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }

  body:not([data-view="practice"]) .study-utility-panel {
    position: static !important;
    width: 100% !important;
  }

  body[data-view="dashboard"] .dashboard-main-grid,
  body[data-view="dashboard"] .dashboard-kpis,
  body[data-view="dashboard"] .dashboard-next-actions,
  body[data-view="dashboard"] .dashboard-course-grid,
  body[data-view="partner-recruit"] .partner-summary-grid,
  body[data-view="promotion-rebate"] .rebate-summary-grid,
  body[data-view="partner-recruit"] .partner-layout-v2,
  body[data-view="partner-recruit"] .partner-hero-v2__content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-view="partner-recruit"] .partner-hero-v2__stats {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body[data-view="dashboard"] .dashboard-hero-v2__header,
  body[data-view="partner-recruit"] .partner-hero-v2__content {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body[data-view="dashboard"] .dashboard-main-grid,
  body[data-view="dashboard"] .dashboard-kpis,
  body[data-view="dashboard"] .dashboard-next-actions,
  body[data-view="dashboard"] .dashboard-study-cards,
  body[data-view="dashboard"] .dashboard-course-grid,
  body[data-view="partner-recruit"] .partner-summary-grid,
  body[data-view="promotion-rebate"] .rebate-summary-grid,
  body[data-view="partner-recruit"] .partner-steps-v2,
  body[data-view="promotion-rebate"] .partner-steps-v2,
  body[data-view="partner-recruit"] .partner-layout-v2,
  body[data-view="partner-recruit"] .partner-hero-v2__stats,
  body[data-view="partner-recruit"] .partner-referral-actions {
    grid-template-columns: 1fr !important;
  }

  body[data-view="partner-recruit"] .partner-table-row,
  body[data-view="promotion-rebate"] .partner-table-row {
    grid-template-columns: 1fr !important;
  }
}

body:not([data-view="practice"]) .sidebar .sidebar-item a,
body:not([data-view="practice"]) .sidebar .sidebar-item a span,
body:not([data-view="practice"]) .sidebar .sidebar-item a i {
  color: #ffffff !important;
}

body:not([data-view="practice"]) .sidebar li.active .sidebar-item {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.36) 0%, rgba(35, 49, 93, 0.94) 100%) !important;
  border-color: rgba(96, 165, 250, 0.50) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

body:not([data-view="practice"]) .sidebar li.active .sidebar-item::after {
  width: 4px !important;
  background: #60a5fa !important;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.65) !important;
}

body[data-view="dashboard"] .dashboard-image-feature {
  display: grid !important;
  gap: 20px !important;
  padding: 24px !important;
}

body[data-view="dashboard"] .dashboard-image-feature__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body[data-view="dashboard"] .dashboard-image-feature__eyebrow {
  margin: 0 0 8px !important;
  color: var(--flat-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body[data-view="dashboard"] .dashboard-image-feature__title {
  margin: 0 !important;
  font-size: clamp(28px, 2.6vw, 36px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: var(--flat-text-strong) !important;
}

body[data-view="dashboard"] .dashboard-image-feature__summary {
  max-width: 760px !important;
  margin: 10px 0 0 !important;
  color: var(--flat-muted) !important;
  line-height: 1.75 !important;
}

body[data-view="dashboard"] .dashboard-image-feature__shuffle {
  flex: 0 0 auto !important;
}

body[data-view="dashboard"] .dashboard-image-feature__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body[data-view="dashboard"] .dashboard-image-feature__preview {
  position: relative !important;
  min-height: 520px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(19, 24, 41, 0.98) 0%, rgba(10, 14, 26, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.24) !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34) !important;
}

body[data-view="dashboard"] .dashboard-image-feature__preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body[data-view="dashboard"] .dashboard-image-feature__meta {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: grid !important;
  gap: 8px !important;
  padding: 24px !important;
  background: linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(10, 14, 26, 0.90) 100%) !important;
}

body[data-view="dashboard"] .dashboard-image-feature__meta span {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-view="dashboard"] .dashboard-image-feature__meta strong {
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}

body[data-view="dashboard"] .dashboard-image-feature__meta p {
  margin: 0 !important;
  color: rgba(226, 232, 240, 0.82) !important;
  line-height: 1.75 !important;
}

body[data-view="dashboard"] .dashboard-image-feature__thumbs {
  display: grid !important;
  gap: 12px !important;
  align-content: start !important;
}

body[data-view="dashboard"] .dashboard-image-feature__thumb {
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  display: grid !important;
  gap: 10px !important;
  text-align: left !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body[data-view="dashboard"] .dashboard-image-feature__thumb img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

body[data-view="dashboard"] .dashboard-image-feature__thumb span {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

body[data-view="dashboard"] .dashboard-image-feature__thumb:hover,
body[data-view="dashboard"] .dashboard-image-feature__thumb.is-active {
  transform: translateY(-2px) !important;
  background: rgba(59, 130, 246, 0.10) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16) !important;
}

body[data-view="partner-recruit"] .partner-hero-v3 {
  padding: 24px !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__copy {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__eyebrow {
  margin: 0 0 2px !important;
  color: var(--flat-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__content h2 {
  margin: 0 !important;
  font-size: clamp(28px, 2.6vw, 36px) !important;
  line-height: 1.15 !important;
  color: var(--flat-text-strong) !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__content p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  line-height: 1.75 !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__stats div {
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--flat-border-soft) !important;
  display: grid !important;
  gap: 6px !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__stats span {
  color: var(--flat-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body[data-view="partner-recruit"] .partner-hero-v3__stats strong {
  color: #ffffff !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}

body[data-view="partner-recruit"] .partner-summary-card {
  position: relative !important;
  display: grid !important;
  gap: 8px !important;
  padding: 18px 18px 54px !important;
  border-radius: 18px !important;
  background: var(--flat-surface-2) !important;
  border: 1px solid var(--flat-border-soft) !important;
  overflow: hidden !important;
}

body[data-view="partner-recruit"] .partner-summary-card strong {
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
}

body[data-view="partner-recruit"] .partner-summary-card p {
  margin: 0 !important;
  color: var(--flat-muted) !important;
  line-height: 1.6 !important;
}

body[data-view="partner-recruit"] .partner-summary-card__action {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(96, 165, 250, 0.34) !important;
  background: rgba(59, 130, 246, 0.12) !important;
  color: #93c5fd !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

body[data-view="partner-recruit"] .partner-summary-card__action:hover {
  background: rgba(59, 130, 246, 0.18) !important;
  border-color: rgba(96, 165, 250, 0.58) !important;
}

body[data-view="partner-recruit"] .partner-layout-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body[data-view="partner-recruit"] .partner-side-stack {
  display: grid !important;
  gap: 24px !important;
}

body[data-view="partner-recruit"] .partner-panel {
  scroll-margin-top: 120px !important;
}

body[data-view="partner-recruit"] .partner-panel .section-card-head {
  gap: 16px !important;
}

body[data-view="partner-recruit"] .partner-panel .section-card-head span {
  color: var(--flat-muted) !important;
}

body[data-view="partner-recruit"] .partner-reward-list {
  display: grid !important;
  gap: 12px !important;
}

@media (max-width: 1100px) {
  body[data-view="dashboard"] .dashboard-image-feature__body,
  body[data-view="partner-recruit"] .partner-hero-v3__content,
  body[data-view="partner-recruit"] .partner-layout-v3 {
    grid-template-columns: 1fr !important;
  }

  body[data-view="dashboard"] .dashboard-image-feature__preview {
    min-height: 380px !important;
  }

  body[data-view="dashboard"] .dashboard-image-feature__thumbs,
  body[data-view="partner-recruit"] .partner-side-stack {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  body[data-view="dashboard"] .dashboard-image-feature {
    padding: 18px !important;
  }

  body[data-view="dashboard"] .dashboard-image-feature__head {
    flex-direction: column !important;
  }

  body[data-view="dashboard"] .dashboard-image-feature__preview {
    min-height: 300px !important;
  }

  body[data-view="dashboard"] .dashboard-image-feature__meta {
    padding: 18px !important;
  }

  body[data-view="partner-recruit"] .partner-hero-v3__stats,
  body[data-view="partner-recruit"] .partner-summary-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 首页统计布局（浅色、轻量、可嵌入） ===== */
body[data-view="dashboard"] {
  --dashboard-page-bg: #eef4fb;
  --dashboard-surface: #ffffff;
  --dashboard-surface-soft: #f7fbff;
  --dashboard-surface-muted: #eef3fb;
  --dashboard-border: #d7e2ee;
  --dashboard-border-strong: #bfd0e3;
  --dashboard-text: #17304a;
  --dashboard-text-strong: #0f172a;
  --dashboard-muted: #627286;
  --dashboard-accent: #2f6feb;
  --dashboard-accent-strong: #1d4ed8;
  --dashboard-accent-soft: rgba(47, 111, 235, 0.10);
  --dashboard-success: #0f9d58;
  --dashboard-warning: #d97706;
  --dashboard-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --dashboard-radius-xl: 24px;
  --dashboard-radius-lg: 20px;
  --dashboard-radius-md: 16px;
  --dashboard-radius-sm: 12px;
  --dashboard-gap-xl: 24px;
  --dashboard-gap-lg: 20px;
  --dashboard-gap-md: 16px;
  --dashboard-gap-sm: 12px;
  background: var(--dashboard-page-bg) !important;
  color: var(--dashboard-text) !important;
}

body[data-view="dashboard"] .main-wrapper,
body[data-view="dashboard"] .study-main {
  background: transparent !important;
}

body[data-view="dashboard"] .mainBox.report {
  background: transparent !important;
  padding: 24px !important;
}

body[data-view="dashboard"] .dashboard-page {
  display: grid !important;
  gap: var(--dashboard-gap-xl) !important;
  color: var(--dashboard-text) !important;
}

body[data-view="dashboard"] .dashboard-page__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body[data-view="dashboard"] .dashboard-page__copy {
  display: grid !important;
  gap: 8px !important;
  align-content: start !important;
}

body[data-view="dashboard"] .dashboard-page__eyebrow,
body[data-view="dashboard"] .dashboard-toolbar__eyebrow,
body[data-view="dashboard"] .dashboard-panel__eyebrow,
body[data-view="dashboard"] .dashboard-stat-block__label {
  margin: 0 !important;
  color: var(--dashboard-accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[data-view="dashboard"] .dashboard-page__title {
  margin: 0 !important;
  color: var(--dashboard-text-strong) !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-page__summary,
body[data-view="dashboard"] .dashboard-toolbar__summary,
body[data-view="dashboard"] .dashboard-panel__summary,
body[data-view="dashboard"] .dashboard-stat-block__summary,
body[data-view="dashboard"] .dashboard-progress__hint,
body[data-view="dashboard"] .dashboard-checkin__summary span,
body[data-view="dashboard"] .dashboard-calendar__meta span {
  margin: 0 !important;
  color: var(--dashboard-muted) !important;
  line-height: 1.7 !important;
}

body[data-view="dashboard"] .dashboard-user-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px 10px 10px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--dashboard-border) !important;
  box-shadow: var(--dashboard-shadow) !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .dashboard-user-chip img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex: none !important;
}

body[data-view="dashboard"] .dashboard-user-chip strong {
  display: block !important;
  color: var(--dashboard-text-strong) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

body[data-view="dashboard"] .dashboard-user-chip span {
  display: block !important;
  color: var(--dashboard-muted) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

body[data-view="dashboard"] .dashboard-banner {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: var(--dashboard-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 251, 255, 0.96)) !important;
  border: 1px solid var(--dashboard-border) !important;
  box-shadow: var(--dashboard-shadow) !important;
}

body[data-view="dashboard"] .dashboard-banner__icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--dashboard-accent-soft) !important;
  color: var(--dashboard-accent) !important;
  flex: none !important;
  font-size: 20px !important;
}

body[data-view="dashboard"] .dashboard-banner__content {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

body[data-view="dashboard"] .dashboard-banner__content strong {
  color: var(--dashboard-text-strong) !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .dashboard-banner__content p {
  margin: 0 !important;
  color: var(--dashboard-muted) !important;
  line-height: 1.6 !important;
}

body[data-view="dashboard"] .dashboard-icon-button {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid var(--dashboard-border) !important;
  background: var(--dashboard-surface) !important;
  color: var(--dashboard-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease !important;
}

body[data-view="dashboard"] .dashboard-icon-button:hover {
  transform: translateY(-1px) !important;
  border-color: var(--dashboard-border-strong) !important;
  background: var(--dashboard-surface-soft) !important;
}

body[data-view="dashboard"] .dashboard-toolbar {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 20px !important;
  border-radius: var(--dashboard-radius-lg) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--dashboard-border) !important;
  box-shadow: var(--dashboard-shadow) !important;
}

body[data-view="dashboard"] .dashboard-toolbar__copy {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .dashboard-toolbar__title {
  margin: 0 !important;
  color: var(--dashboard-text-strong) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body[data-view="dashboard"] .dashboard-tab {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--dashboard-border) !important;
  background: var(--dashboard-surface) !important;
  color: var(--dashboard-text) !important;
  font-weight: 700 !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease !important;
}

body[data-view="dashboard"] .dashboard-tab:hover,
body[data-view="dashboard"] .dashboard-tab.is-active {
  transform: translateY(-1px) !important;
  border-color: rgba(47, 111, 235, 0.42) !important;
  background: rgba(47, 111, 235, 0.10) !important;
  color: var(--dashboard-accent-strong) !important;
}

body[data-view="dashboard"] .dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body[data-view="dashboard"] .dashboard-grid__left {
  display: grid !important;
  gap: 24px !important;
}

body[data-view="dashboard"] .dashboard-grid__right {
  display: grid !important;
  gap: 24px !important;
  align-self: start !important;
  position: sticky !important;
  top: 24px !important;
}

body[data-view="dashboard"] .dashboard-panel {
  display: grid !important;
  gap: 16px !important;
  padding: 20px !important;
  border-radius: var(--dashboard-radius-xl) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--dashboard-border) !important;
  box-shadow: var(--dashboard-shadow) !important;
}

body[data-view="dashboard"] .dashboard-panel__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body[data-view="dashboard"] .dashboard-panel__head--calendar {
  align-items: center !important;
}

body[data-view="dashboard"] .dashboard-panel__title {
  margin: 0 !important;
  color: var(--dashboard-text-strong) !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-panel__tag {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: var(--dashboard-accent-soft) !important;
  color: var(--dashboard-accent-strong) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

body[data-view="dashboard"] .dashboard-learning-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-view="dashboard"] .dashboard-stat-block {
  display: grid !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: var(--dashboard-radius-md) !important;
  background: var(--dashboard-surface-soft) !important;
  border: 1px solid var(--dashboard-border) !important;
}

body[data-view="dashboard"] .dashboard-stat-block__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-view="dashboard"] .dashboard-stat-block__head strong {
  display: block !important;
  margin-top: 6px !important;
  color: var(--dashboard-text-strong) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-stat-block__head i {
  color: var(--dashboard-accent) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

body[data-view="dashboard"] .dashboard-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-view="dashboard"] .dashboard-mini-metric {
  display: grid !important;
  gap: 6px !important;
  padding: 12px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--dashboard-border) !important;
}

body[data-view="dashboard"] .dashboard-mini-metric span {
  color: var(--dashboard-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .dashboard-mini-metric strong {
  color: var(--dashboard-text-strong) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

body[data-view="dashboard"] .dashboard-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-view="dashboard"] .dashboard-metric-card {
  display: grid !important;
  gap: 8px !important;
  padding: 16px !important;
  border-radius: var(--dashboard-radius-md) !important;
  background: var(--dashboard-surface-soft) !important;
  border: 1px solid var(--dashboard-border) !important;
}

body[data-view="dashboard"] .dashboard-metric-card span {
  color: var(--dashboard-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .dashboard-metric-card strong {
  color: var(--dashboard-text-strong) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-checkin__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

body[data-view="dashboard"] .dashboard-checkin__date {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: var(--dashboard-radius-md) !important;
  background: var(--dashboard-surface-soft) !important;
  border: 1px solid var(--dashboard-border) !important;
}

body[data-view="dashboard"] .dashboard-checkin__day {
  color: var(--dashboard-accent-strong) !important;
  font-size: 44px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

body[data-view="dashboard"] .dashboard-checkin__date-copy {
  display: grid !important;
  gap: 4px !important;
}

body[data-view="dashboard"] .dashboard-checkin__date-copy span {
  color: var(--dashboard-muted) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .dashboard-checkin__date-copy strong {
  color: var(--dashboard-text-strong) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

body[data-view="dashboard"] .dashboard-progress {
  display: grid !important;
  gap: 10px !important;
}

body[data-view="dashboard"] .dashboard-progress__label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-view="dashboard"] .dashboard-progress__label span {
  color: var(--dashboard-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-view="dashboard"] .dashboard-progress__label strong {
  color: var(--dashboard-text-strong) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

body[data-view="dashboard"] .dashboard-progress__track {
  position: relative !important;
  height: 12px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: #e9eff7 !important;
  border: 1px solid var(--dashboard-border) !important;
}

body[data-view="dashboard"] .dashboard-progress__track span {
  display: block !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--dashboard-accent) 0%, var(--dashboard-accent-strong) 100%) !important;
}

body[data-view="dashboard"] .dashboard-checkin__summary {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: var(--dashboard-radius-md) !important;
  background: var(--dashboard-surface-soft) !important;
  border: 1px solid var(--dashboard-border) !important;
}

body[data-view="dashboard"] .dashboard-checkin__summary span {
  color: var(--dashboard-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-view="dashboard"] .dashboard-checkin__summary strong {
  color: var(--dashboard-text-strong) !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-checkin__footer {
  display: grid !important;
  gap: 12px !important;
}

body[data-view="dashboard"] .dashboard-checkin__rule {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: var(--dashboard-accent-soft) !important;
  color: var(--dashboard-accent-strong) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-view="dashboard"] .dashboard-checkin__rule i {
  font-size: 16px !important;
}

body[data-view="dashboard"] .dashboard-button {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 700 !important;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

body[data-view="dashboard"] .dashboard-button:hover {
  transform: translateY(-1px) !important;
}

body[data-view="dashboard"] .dashboard-button--primary {
  background: linear-gradient(180deg, var(--dashboard-accent) 0%, var(--dashboard-accent-strong) 100%) !important;
  border-color: rgba(29, 78, 216, 0.38) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(47, 111, 235, 0.18) !important;
}

body[data-view="dashboard"] .dashboard-button--primary:hover {
  box-shadow: 0 16px 28px rgba(47, 111, 235, 0.24) !important;
}

body[data-view="dashboard"] .dashboard-calendar-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body[data-view="dashboard"] .dashboard-panel--calendar {
  gap: 14px !important;
}

body[data-view="dashboard"] .dashboard-calendar__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 2px !important;
}

body[data-view="dashboard"] .dashboard-calendar__meta span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--dashboard-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-view="dashboard"] .dashboard-calendar__weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-view="dashboard"] .dashboard-calendar__weekdays span {
  text-align: center !important;
  color: var(--dashboard-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

body[data-view="dashboard"] .dashboard-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-view="dashboard"] .dashboard-calendar-day {
  min-height: 84px !important;
  padding: 12px 10px !important;
  border-radius: var(--dashboard-radius-md) !important;
  background: var(--dashboard-surface-soft) !important;
  border: 1px solid var(--dashboard-border) !important;
  display: grid !important;
  align-content: space-between !important;
  gap: 8px !important;
}

body[data-view="dashboard"] .dashboard-calendar-day.is-outside {
  opacity: 0.45 !important;
}

body[data-view="dashboard"] .dashboard-calendar-day.is-active {
  background: rgba(47, 111, 235, 0.08) !important;
  border-color: rgba(47, 111, 235, 0.24) !important;
}

body[data-view="dashboard"] .dashboard-calendar-day.is-complete {
  background: rgba(15, 157, 88, 0.08) !important;
  border-color: rgba(15, 157, 88, 0.24) !important;
}

body[data-view="dashboard"] .dashboard-calendar-day.is-today {
  box-shadow: inset 0 0 0 2px rgba(47, 111, 235, 0.22) !important;
}

body[data-view="dashboard"] .dashboard-calendar-day__number {
  color: var(--dashboard-text-strong) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body[data-view="dashboard"] .dashboard-calendar-day__label {
  color: var(--dashboard-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

@media (max-width: 1100px) {
  body[data-view="dashboard"] .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-view="dashboard"] .dashboard-grid__right {
    position: static !important;
  }

  body[data-view="dashboard"] .dashboard-toolbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body[data-view="dashboard"] .dashboard-tabs {
    justify-content: flex-start !important;
  }
}

@media (max-width: 768px) {
  body[data-view="dashboard"] .mainBox.report {
    padding: 18px !important;
  }

  body[data-view="dashboard"] .dashboard-page {
    gap: 18px !important;
  }

  body[data-view="dashboard"] .dashboard-page__header,
  body[data-view="dashboard"] .dashboard-banner,
  body[data-view="dashboard"] .dashboard-toolbar,
  body[data-view="dashboard"] .dashboard-panel {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body[data-view="dashboard"] .dashboard-page__header {
    flex-direction: column !important;
  }

  body[data-view="dashboard"] .dashboard-learning-grid,
  body[data-view="dashboard"] .dashboard-metric-grid,
  body[data-view="dashboard"] .dashboard-mini-grid,
  body[data-view="dashboard"] .dashboard-calendar-grid,
  body[data-view="dashboard"] .dashboard-calendar__weekdays {
    grid-template-columns: 1fr !important;
  }

  body[data-view="dashboard"] .dashboard-calendar-day {
    min-height: 64px !important;
  }

  body[data-view="dashboard"] .dashboard-checkin__head,
  body[data-view="dashboard"] .dashboard-panel__head,
  body[data-view="dashboard"] .dashboard-checkin__date,
  body[data-view="dashboard"] .dashboard-checkin__summary {
    flex-direction: column !important;
  }

  body[data-view="dashboard"] .dashboard-tabs {
    width: 100% !important;
  }

  body[data-view="dashboard"] .dashboard-tab {
    flex: 1 1 calc(50% - 10px) !important;
  }

  body[data-view="dashboard"] .dashboard-button {
    width: 100% !important;
  }
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
  width: min(960px, calc(100vw - 36px)) !important;
  gap: 14px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-section {
  margin-bottom: 10px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  margin-top: 0 !important;
  padding: 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 20px !important;
  border-radius: 20px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy {
  gap: 10px !important;
  max-width: 620px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy h1 {
  font-size: 26px !important;
  line-height: 1.18 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
  justify-self: end !important;
  width: min(380px, 100%) !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper {
  min-height: 50px !important;
  padding: 0 10px 0 12px !important;
  border-radius: 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper input {
  min-height: 50px !important;
  font-size: 14px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper .search-btn {
  width: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result {
  border-radius: 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card {
  gap: 10px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(59, 130, 246, 0.14) !important;
  color: #bfdbfe !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card h3 {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__phonetic {
  color: var(--flat-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__meaning {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__note {
  color: var(--flat-muted) !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__badge,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__meta {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .word-cards.vocab-hint-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item {
  min-height: 86px !important;
  padding: 12px 12px 12px 14px !important;
  gap: 6px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__word {
  font-size: 15px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__hint {
  -webkit-line-clamp: 2 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__meta {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
  width: min(980px, calc(100vw - 32px)) !important;
  gap: 14px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 20px 20px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy {
  max-width: 680px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy h1 {
  font-size: 24px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
  width: min(100%, 420px) !important;
  justify-self: start !important;
  padding-top: 0 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper {
  min-height: 50px !important;
  border-radius: 14px !important;
  padding: 0 10px 0 12px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper input {
  min-height: 50px !important;
  font-size: 14px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper .search-btn {
  width: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card h3 {
  font-size: 22px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__meaning {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__note {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .word-cards.vocab-hint-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 8px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item {
  min-height: 80px !important;
  padding: 11px 12px 12px 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__word {
  font-size: 14px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__hint {
  font-size: 11px !important;
}

/* Hard final override so the compact single-column layout wins last */
body[data-view="vocab-search"] .vocab-search-shell::before,
body[data-view="vocab-search"] .vocab-search-shell::after {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
  width: min(860px, calc(100vw - 24px)) !important;
  gap: 12px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
  width: min(100%, 380px) !important;
  justify-self: start !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper {
  min-height: 50px !important;
  border-radius: 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper input {
  min-height: 50px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .word-cards.vocab-hint-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item {
  min-height: 72px !important;
  padding: 10px 12px 11px 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__word {
  font-size: 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__hint {
  font-size: 11px !important;
  -webkit-line-clamp: 1 !important;
}

/* Final vocab-search minimal layout */
body[data-view="vocab-search"] .vocab-search-shell {
  position: relative !important;
  width: min(920px, calc(100vw - 24px)) !important;
  gap: 14px !important;
}

body[data-view="vocab-search"] .vocab-search-copy,
body[data-view="vocab-search"] .vocab-search-eyebrow,
body[data-view="vocab-search"] .vocab-search-copy h1,
body[data-view="vocab-search"] .vocab-search-copy p,
body[data-view="vocab-search"] .explore-section {
  display: none !important;
}

body[data-view="vocab-search"] .vocab-search-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.95fr) !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 260px !important;
  padding: 22px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(19, 24, 41, 0.94) 0%, rgba(14, 18, 31, 0.98) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.16) !important;
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.10) !important;
  overflow: hidden !important;
}

body[data-view="vocab-search"] .vocab-search-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 216px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(59, 130, 246, 0.14) !important;
  background: linear-gradient(180deg, rgba(26, 33, 56, 0.96) 0%, rgba(19, 24, 41, 0.96) 100%) !important;
  overflow: hidden !important;
}

body[data-view="vocab-search"] .vocab-search-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

body[data-view="vocab-search"] .search-box {
  width: min(100%, 440px) !important;
  justify-self: start !important;
  padding-top: 0 !important;
}

body[data-view="vocab-search"] .search-input-wrapper {
  min-height: 56px !important;
  border-radius: 18px !important;
}

body[data-view="vocab-search"] .search-input-wrapper input {
  min-height: 56px !important;
  font-size: 14px !important;
}

body[data-view="vocab-search"] .search-result {
  margin-top: 0 !important;
  padding: 18px !important;
  border-radius: 20px !important;
}

body[data-view="vocab-search"] .vocab-search-result-card__badge,
body[data-view="vocab-search"] .vocab-search-result-card__meta,
body[data-view="vocab-search"] .vocab-search-result-card__note {
  display: none !important;
}

body[data-view="vocab-search"] .search-result[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  body[data-view="vocab-search"] .vocab-search-shell {
    width: min(100%, calc(100vw - 24px)) !important;
  }

  body[data-view="vocab-search"] .vocab-search-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  body[data-view="vocab-search"] .vocab-search-visual {
    min-height: 180px !important;
  }

  body[data-view="vocab-search"] .search-box {
    width: 100% !important;
  }
}

/* Final vocab-search tight layout override */
body[data-view="vocab-search"] .vocab-search-shell::before,
body[data-view="vocab-search"] .vocab-search-shell::after {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
  width: min(860px, calc(100vw - 24px)) !important;
  gap: 12px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy h1 {
  font-size: 23px !important;
  line-height: 1.18 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy p {
  max-width: 46ch !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
  width: min(100%, 380px) !important;
  justify-self: start !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper {
  min-height: 50px !important;
  border-radius: 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper input {
  min-height: 50px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card h3 {
  font-size: 22px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__meaning {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .word-cards.vocab-hint-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item {
  min-height: 72px !important;
  padding: 10px 12px 11px 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__word {
  font-size: 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__hint {
  font-size: 11px !important;
  -webkit-line-clamp: 1 !important;
}

/* Final vocab-search polish: tighter single-column layout */
body[data-view="vocab-search"] .vocab-search-shell::before,
body[data-view="vocab-search"] .vocab-search-shell::after {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
  width: min(860px, calc(100vw - 24px)) !important;
  gap: 12px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy h1 {
  font-size: 23px !important;
  line-height: 1.18 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy p {
  max-width: 46ch !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
  width: min(100%, 380px) !important;
  justify-self: start !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper {
  min-height: 50px !important;
  border-radius: 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper input {
  min-height: 50px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card h3 {
  font-size: 21px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__meaning {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .word-cards.vocab-hint-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item {
  min-height: 72px !important;
  padding: 10px 12px 11px 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__word {
  font-size: 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__hint {
  font-size: 11px !important;
  -webkit-line-clamp: 1 !important;
}

/* Final vocab-search compact layout */
body[data-view="vocab-search"] .vocab-search-shell::before,
body[data-view="vocab-search"] .vocab-search-shell::after {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell {
  width: min(860px, calc(100vw - 24px)) !important;
  gap: 12px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-section,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  border-radius: 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 18px 18px 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy {
  gap: 8px !important;
  max-width: 660px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy h1 {
  font-size: 23px !important;
  line-height: 1.18 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-copy p {
  max-width: 46ch !important;
  font-size: 14px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-box {
  width: min(100%, 380px) !important;
  justify-self: start !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper {
  min-height: 50px !important;
  border-radius: 16px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-input-wrapper input {
  min-height: 50px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .search-result,
body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .explore-section {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card {
  padding: 16px 18px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card h3 {
  font-size: 22px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__meaning {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-search-result-card__note {
  display: none !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .word-cards.vocab-hint-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item {
  min-height: 72px !important;
  padding: 10px 12px 11px 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__word {
  font-size: 13px !important;
}

body[data-view="vocab-search"] .mainBox .maxWidth.vocab-search-shell .vocab-hint-item__hint {
  font-size: 11px !important;
  -webkit-line-clamp: 1 !important;
}

/* Vocab search: keep the page to one wide, focused search field. */
body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell {
  width: min(100%, 920px) !important;
}

body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell > .word-lookup-panel {
  width: min(100%, 760px) !important;
  gap: 0 !important;
}

body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell .word-lookup-panel__badge {
  display: none !important;
}

body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell .word-lookup-box {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell .word-lookup-input {
  width: 100% !important;
  min-height: 64px !important;
}

body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell .word-lookup-input input {
  min-height: 64px !important;
}

@media (max-width: 768px) {
  body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell > .word-lookup-panel {
    width: 100% !important;
  }

  body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell .word-lookup-input,
  body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell .word-lookup-input input {
    min-height: 58px !important;
  }
}

/* Dashboard home: quiet, flat and focused on the next study action. */
body[data-view="dashboard"] {
  --home-bg: #f3f5f7;
  --home-surface: #ffffff;
  --home-surface-soft: #f7f9fb;
  --home-border: #e1e6eb;
  --home-border-strong: #cfd6dd;
  --home-text: #172033;
  --home-muted: #6b7585;
  --home-blue: #2f67d8;
  --home-cyan: #1687a7;
  --home-green: #168565;
  --home-amber: #a76916;
  background: var(--home-bg) !important;
  color: var(--home-text) !important;
}

body[data-view="dashboard"] .container-fuild.study-shell {
  background: var(--home-bg) !important;
  color: var(--home-text) !important;
}

body[data-view="dashboard"] .main-wrapper.dashboard-shell {
  padding: 0 !important;
  background: var(--home-bg) !important;
  color: var(--home-text) !important;
}

body[data-view="dashboard"] .main-wrapper.dashboard-shell::after {
  display: none !important;
}

body[data-view="dashboard"] .mainBox.report.dashboard-page-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body[data-view="dashboard"] [data-dashboard-root] {
  width: 100% !important;
}

body[data-view="dashboard"] .home-page,
body[data-view="dashboard"] .home-page * {
  box-sizing: border-box !important;
  letter-spacing: 0 !important;
}

body[data-view="dashboard"] .home-page {
  display: grid !important;
  gap: 24px !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  padding: 32px 36px 52px !important;
  color: var(--home-text) !important;
}

body[data-view="dashboard"] .home-error {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 24px !important;
  border: 1px solid var(--home-border) !important;
  border-radius: 8px !important;
  background: var(--home-surface) !important;
}

body[data-view="dashboard"] .home-error__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 6px !important;
  background: #e8efff !important;
  color: var(--home-blue) !important;
  font-size: 22px !important;
}

body[data-view="dashboard"] .home-error h1,
body[data-view="dashboard"] .home-error p {
  margin: 0 !important;
}

body[data-view="dashboard"] .home-error h1 {
  color: var(--home-text) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .home-error p {
  margin-top: 4px !important;
  color: var(--home-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body[data-view="dashboard"] .home-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-header__copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-header__date,
body[data-view="dashboard"] .home-section__eyebrow {
  color: var(--home-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

body[data-view="dashboard"] .home-header h1 {
  margin: 0 !important;
  color: var(--home-text) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

body[data-view="dashboard"] .home-header p {
  margin: 0 !important;
  color: var(--home-muted) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body[data-view="dashboard"] .home-periods {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  border: 1px solid var(--home-border) !important;
  border-radius: 7px !important;
  background: #e9edf1 !important;
  flex: none !important;
}

body[data-view="dashboard"] .home-period-tab {
  min-width: 52px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #586273 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 0.16s ease, color 0.16s ease !important;
}

body[data-view="dashboard"] .home-period-tab:hover {
  color: var(--home-text) !important;
}

body[data-view="dashboard"] .home-period-tab.is-active {
  background: var(--home-surface) !important;
  color: var(--home-blue) !important;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.08) !important;
}

body[data-view="dashboard"] .home-focus {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) minmax(150px, 190px) auto !important;
  align-items: center !important;
  gap: 18px !important;
  min-width: 0 !important;
  padding: 22px 24px !important;
  border: 1px solid #252f3d !important;
  border-radius: 8px !important;
  background: #202936 !important;
  color: #ffffff !important;
}

body[data-view="dashboard"] .home-focus__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 6px !important;
  background: #2d9b78 !important;
  color: #ffffff !important;
  font-size: 25px !important;
  line-height: 1 !important;
  flex: none !important;
}

body[data-view="dashboard"] .home-focus__copy {
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-focus__copy > span,
body[data-view="dashboard"] .home-focus__progress > span {
  display: block !important;
  color: #aeb8c7 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

body[data-view="dashboard"] .home-focus__copy h2 {
  margin: 4px 0 3px !important;
  overflow: hidden !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="dashboard"] .home-focus__copy p {
  margin: 0 !important;
  color: #c3cbd5 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

body[data-view="dashboard"] .home-focus__progress {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 7px 10px !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-focus__progress strong {
  color: #ffffff !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

body[data-view="dashboard"] .home-progress-track {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 6px !important;
  overflow: hidden !important;
  border-radius: 3px !important;
  background: #3a4554 !important;
}

body[data-view="dashboard"] .home-progress-track > span {
  display: block !important;
  width: 0;
  height: 100% !important;
  border-radius: inherit !important;
  background: #44b78b !important;
}

body[data-view="dashboard"] .home-primary-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #202936 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 0.16s ease, border-color 0.16s ease !important;
}

body[data-view="dashboard"] .home-primary-action:hover {
  border-color: #d7f4e7 !important;
  background: #d7f4e7 !important;
}

body[data-view="dashboard"] .home-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid var(--home-border) !important;
  border-radius: 8px !important;
  background: var(--home-surface) !important;
}

body[data-view="dashboard"] .home-metric {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 18px !important;
  border-right: 1px solid var(--home-border) !important;
  background: transparent !important;
}

body[data-view="dashboard"] .home-metric:last-child {
  border-right: 0 !important;
}

body[data-view="dashboard"] .home-metric__icon,
body[data-view="dashboard"] .home-task__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex: none !important;
}

body[data-view="dashboard"] .home-metric__icon--blue {
  background: #e8efff !important;
  color: var(--home-blue) !important;
}

body[data-view="dashboard"] .home-metric__icon--cyan {
  background: #e5f4f7 !important;
  color: var(--home-cyan) !important;
}

body[data-view="dashboard"] .home-metric__icon--green,
body[data-view="dashboard"] .home-task__icon--green {
  background: #e6f4ef !important;
  color: var(--home-green) !important;
}

body[data-view="dashboard"] .home-metric__icon--amber,
body[data-view="dashboard"] .home-task__icon--amber {
  background: #f7efe1 !important;
  color: var(--home-amber) !important;
}

body[data-view="dashboard"] .home-metric > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-metric div > span {
  color: var(--home-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .home-metric strong {
  overflow-wrap: anywhere !important;
  color: var(--home-text) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body[data-view="dashboard"] .home-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

body[data-view="dashboard"] .home-section {
  min-width: 0 !important;
  padding: 22px !important;
  border: 1px solid var(--home-border) !important;
  border-radius: 8px !important;
  background: var(--home-surface) !important;
  box-shadow: none !important;
}

body[data-view="dashboard"] .home-section__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
  margin-bottom: 16px !important;
}

body[data-view="dashboard"] .home-section__head--inline {
  align-items: center !important;
}

body[data-view="dashboard"] .home-section__head h2 {
  margin: 3px 0 0 !important;
  color: var(--home-text) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

body[data-view="dashboard"] .home-task-list {
  display: grid !important;
}

body[data-view="dashboard"] .home-task {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 13px !important;
  min-height: 66px !important;
  padding: 11px 0 !important;
  border-bottom: 1px solid var(--home-border) !important;
  color: var(--home-text) !important;
}

body[data-view="dashboard"] .home-task:hover .home-task__copy strong,
body[data-view="dashboard"] .home-task:hover > i {
  color: var(--home-blue) !important;
}

body[data-view="dashboard"] .home-task__copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-task__copy strong {
  color: var(--home-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .home-task__copy small {
  overflow: hidden !important;
  color: var(--home-muted) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-view="dashboard"] .home-task > i {
  color: #939cab !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

body[data-view="dashboard"] .home-mastery {
  display: grid !important;
  gap: 8px !important;
  padding-top: 17px !important;
}

body[data-view="dashboard"] .home-mastery__label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: var(--home-muted) !important;
  font-size: 12px !important;
}

body[data-view="dashboard"] .home-mastery__label strong {
  color: var(--home-text) !important;
  font-size: 13px !important;
}

body[data-view="dashboard"] .home-progress-track--light,
body[data-view="dashboard"] .home-progress-track--checkin {
  grid-column: auto !important;
  height: 7px !important;
  background: #e7ebef !important;
}

body[data-view="dashboard"] .home-progress-track--light > span {
  background: var(--home-blue) !important;
}

body[data-view="dashboard"] .home-checkin {
  display: grid !important;
  align-content: start !important;
}

body[data-view="dashboard"] .home-icon-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--home-border) !important;
  border-radius: 6px !important;
  background: var(--home-surface) !important;
  color: #566173 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease !important;
}

body[data-view="dashboard"] .home-icon-button:hover {
  border-color: var(--home-border-strong) !important;
  background: var(--home-surface-soft) !important;
  color: var(--home-blue) !important;
}

body[data-view="dashboard"] .home-checkin__value {
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  margin: 4px 0 12px !important;
}

body[data-view="dashboard"] .home-checkin__value strong {
  color: var(--home-text) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-view="dashboard"] .home-checkin__value span {
  color: var(--home-muted) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}

body[data-view="dashboard"] .home-progress-track--checkin > span {
  background: var(--home-green) !important;
}

body[data-view="dashboard"] .home-checkin > p {
  margin: 10px 0 18px !important;
  color: var(--home-muted) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

body[data-view="dashboard"] .home-checkin__stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: auto 0 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--home-border) !important;
}

body[data-view="dashboard"] .home-checkin__stats > div {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  padding-right: 14px !important;
}

body[data-view="dashboard"] .home-checkin__stats > div + div {
  padding: 0 0 0 14px !important;
  border-left: 1px solid var(--home-border) !important;
}

body[data-view="dashboard"] .home-checkin__stats dt {
  color: var(--home-muted) !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

body[data-view="dashboard"] .home-checkin__stats dd {
  margin: 0 !important;
  color: var(--home-text) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body[data-view="dashboard"] .home-calendar {
  padding-bottom: 24px !important;
}

body[data-view="dashboard"] .home-calendar__actions,
body[data-view="dashboard"] .home-calendar__nav {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body[data-view="dashboard"] .home-calendar__actions > span {
  color: var(--home-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

body[data-view="dashboard"] .home-calendar__viewport {
  min-width: 0 !important;
}

body[data-view="dashboard"] .home-calendar__weekdays,
body[data-view="dashboard"] .home-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

body[data-view="dashboard"] .home-calendar__weekdays {
  margin-bottom: 7px !important;
}

body[data-view="dashboard"] .home-calendar__weekdays span {
  padding: 5px 0 !important;
  color: #8a94a3 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
}

body[data-view="dashboard"] .home-calendar-day {
  display: grid !important;
  align-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 9px !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  background: var(--home-surface-soft) !important;
}

body[data-view="dashboard"] .home-calendar-day.is-outside {
  background: transparent !important;
}

body[data-view="dashboard"] .home-calendar-day.is-studied {
  border-color: #cfe9df !important;
  background: #eff8f4 !important;
}

body[data-view="dashboard"] .home-calendar-day.is-complete {
  border-color: #9fd4bf !important;
  background: #e6f4ef !important;
}

body[data-view="dashboard"] .home-calendar-day.is-today {
  border-color: var(--home-blue) !important;
  background: #edf3ff !important;
}

body[data-view="dashboard"] .home-calendar-day__number {
  color: var(--home-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body[data-view="dashboard"] .home-calendar-day__label {
  min-height: 14px !important;
  overflow: hidden !important;
  color: var(--home-green) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1120px) {
  body[data-view="dashboard"] .home-page {
    padding: 28px 24px 44px !important;
  }

  body[data-view="dashboard"] .home-focus {
    grid-template-columns: auto minmax(200px, 1fr) auto !important;
  }

  body[data-view="dashboard"] .home-focus__progress {
    display: none !important;
  }

  body[data-view="dashboard"] .home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-view="dashboard"] .home-metric:nth-child(2) {
    border-right: 0 !important;
  }

  body[data-view="dashboard"] .home-metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--home-border) !important;
  }
}

@media (max-width: 900px) {
  body[data-view="dashboard"] .home-header {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body[data-view="dashboard"] .home-periods {
    width: 100% !important;
  }

  body[data-view="dashboard"] .home-period-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 8px !important;
  }

  body[data-view="dashboard"] .home-main-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body[data-view="dashboard"] .home-page {
    gap: 16px !important;
    padding: 22px 14px 34px !important;
  }

  body[data-view="dashboard"] .home-header {
    gap: 16px !important;
  }

  body[data-view="dashboard"] .home-header h1 {
    font-size: 28px !important;
  }

  body[data-view="dashboard"] .home-error {
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 18px 16px !important;
  }

  body[data-view="dashboard"] .home-error .home-primary-action {
    grid-column: 1 / -1 !important;
  }

  body[data-view="dashboard"] .home-period-tab {
    min-height: 32px !important;
    font-size: 12px !important;
  }

  body[data-view="dashboard"] .home-focus {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  body[data-view="dashboard"] .home-focus__copy h2 {
    white-space: normal !important;
  }

  body[data-view="dashboard"] .home-primary-action {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  body[data-view="dashboard"] .home-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-view="dashboard"] .home-metric,
  body[data-view="dashboard"] .home-metric:nth-child(2) {
    min-height: 82px !important;
    padding: 13px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--home-border) !important;
  }

  body[data-view="dashboard"] .home-metric:nth-child(odd) {
    border-right: 1px solid var(--home-border) !important;
  }

  body[data-view="dashboard"] .home-metric:last-child {
    border-right: 0 !important;
    border-bottom: 0 !important;
  }

  body[data-view="dashboard"] .home-metric__icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  body[data-view="dashboard"] .home-metric {
    gap: 10px !important;
  }

  body[data-view="dashboard"] .home-metric strong {
    font-size: 18px !important;
  }

  body[data-view="dashboard"] .home-section {
    padding: 18px 16px !important;
  }

  body[data-view="dashboard"] .home-calendar__actions {
    align-items: flex-end !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  body[data-view="dashboard"] .home-calendar__actions > span {
    white-space: normal !important;
    text-align: right !important;
  }

  body[data-view="dashboard"] .home-calendar__weekdays,
  body[data-view="dashboard"] .home-calendar-grid {
    grid-template-columns: repeat(7, minmax(36px, 1fr)) !important;
    gap: 4px !important;
  }

  body[data-view="dashboard"] .home-calendar__viewport {
    overflow-x: auto !important;
    padding-bottom: 2px !important;
  }

  body[data-view="dashboard"] .home-calendar-day {
    min-height: 52px !important;
    padding: 7px 5px !important;
  }

  body[data-view="dashboard"] .home-calendar-day__number {
    font-size: 12px !important;
  }

  body[data-view="dashboard"] .home-calendar-day__label {
    font-size: 9px !important;
  }
}

/* Utility panels: message feed, support hours, and feedback form. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-panel {
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: min(680px, calc(100dvh - 82px)) !important;
  padding: 18px !important;
  gap: 16px !important;
  overflow: hidden !important;
  border-color: rgba(0, 126, 222, 0.22) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(31, 54, 68, 0.16), 0 2px 8px rgba(0, 126, 222, 0.08) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-panel[data-utility-key="feedback"] {
  width: min(430px, calc(100vw - 24px)) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel :is(.study-utility-panel__eyebrow, .study-utility-panel__desc)[hidden] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel .study-utility-panel__head {
  align-items: center !important;
  min-height: 36px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid rgba(0, 126, 222, 0.14) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel .study-utility-panel__title {
  margin: 0 !important;
  color: #20323a !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel .study-utility-panel__close {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #d9e5eb !important;
  border-radius: 7px !important;
  background: #f7fafb !important;
  color: #50636d !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel .study-utility-panel__close i {
  color: inherit !important;
  font-size: 19px !important;
  line-height: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel .study-utility-panel__close:hover {
  border-color: rgba(0, 126, 222, 0.36) !important;
  background: rgba(0, 126, 222, 0.07) !important;
  color: #007EDE !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel .study-utility-panel__body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-message-list {
  display: grid !important;
  gap: 10px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-message {
  display: grid !important;
  gap: 8px !important;
  padding: 14px !important;
  border: 1px solid #dce8ee !important;
  border-left: 3px solid #007EDE !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f3f9fd 100%) !important;
  box-shadow: 0 6px 16px rgba(31, 71, 92, 0.07) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-message__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-message__head strong {
  min-width: 0 !important;
  color: #20323a !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-message__head time {
  flex: 0 0 auto !important;
  color: #71818a !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-message p {
  margin: 0 !important;
  color: #52646d !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-state {
  display: grid !important;
  place-items: center !important;
  gap: 9px !important;
  min-height: 156px !important;
  padding: 24px 16px !important;
  border: 1px dashed #cbdce5 !important;
  border-radius: 7px !important;
  background: #f8fbfc !important;
  text-align: center !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-state > i {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(0, 126, 222, 0.09) !important;
  color: #007EDE !important;
  font-size: 21px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-state--loading > i {
  animation: market-loading-spin 1s linear infinite !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-state > strong {
  color: #43545d !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  overflow-wrap: anywhere !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-state .button {
  min-height: 34px !important;
  padding: 0 14px !important;
  gap: 6px !important;
  color: #007EDE !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support {
  display: grid !important;
  gap: 14px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support__hours {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  padding: 14px !important;
  border: 1px solid #d8e7ee !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #f8fcfe 0%, #eef7fc 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support__hours > i {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 7px !important;
  background: rgba(0, 126, 222, 0.10) !important;
  color: #007EDE !important;
  font-size: 20px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support__hours span {
  color: #687983 !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support__hours strong {
  color: #243941 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support > .button,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid #007EDE !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #007EDE 0%, #0068b8 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(0, 126, 222, 0.22) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-support > .button:hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__submit:hover:not(:disabled) {
  border-color: #0064af !important;
  background: linear-gradient(135deg, #006fca 0%, #005b9f 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(0, 126, 222, 0.28) !important;
  transform: translateY(-1px) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback {
  display: grid !important;
  gap: 14px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field {
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field > span,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__head > span {
  color: #30444d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field > span em {
  color: #d04444 !important;
  font-style: normal !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field > :is(input, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid #cfdee5 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  color: #24363e !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: inset 0 1px 2px rgba(31, 54, 68, 0.04) !important;
  outline: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field > input {
  min-height: 42px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field > textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-field > :is(input, textarea):focus {
  border-color: #007EDE !important;
  box-shadow: 0 0 0 3px rgba(0, 126, 222, 0.12) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload {
  display: grid !important;
  gap: 8px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__head small {
  color: #71818a !important;
  font-size: 11px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__input {
  position: fixed !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__button {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 1px 10px !important;
  width: 100% !important;
  min-height: 58px !important;
  padding: 9px 12px !important;
  border: 1px dashed rgba(0, 126, 222, 0.40) !important;
  border-radius: 7px !important;
  background: rgba(0, 126, 222, 0.045) !important;
  color: #30444d !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__button:hover {
  border-color: #007EDE !important;
  background: rgba(0, 126, 222, 0.08) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__button > i {
  grid-row: 1 / 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  color: #007EDE !important;
  font-size: 21px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__button > span {
  color: #30444d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-upload__button > small {
  color: #71818a !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-preview-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-preview-list[hidden] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-preview {
  position: relative !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #d2e1e8 !important;
  border-radius: 6px !important;
  background: #f2f7f9 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-preview button {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 50% !important;
  background: rgba(27, 43, 51, 0.82) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(21, 39, 48, 0.22) !important;
  cursor: pointer !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-preview button i {
  color: inherit !important;
  font-size: 15px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__status {
  padding: 9px 11px !important;
  border: 1px solid #d5e4ea !important;
  border-radius: 7px !important;
  background: #f5f9fb !important;
  color: #52656e !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__status[hidden] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__status[data-state="error"] {
  border-color: #f0c7c7 !important;
  background: #fff6f6 !important;
  color: #b63e3e !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__status[data-state="success"] {
  border-color: #bfe3cf !important;
  background: #f2fbf6 !important;
  color: #247447 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-feedback__submit:disabled {
  opacity: 0.68 !important;
  cursor: progress !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel :is(button, a, input, textarea):focus-visible {
  outline: 3px solid rgba(0, 126, 222, 0.26) !important;
  outline-offset: 2px !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-panel,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-panel[data-utility-key="feedback"] {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 8px !important;
    width: min(430px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 72px) !important;
    padding: 14px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-utility-message__head {
    display: grid !important;
    gap: 3px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-utility-message__head time {
    white-space: normal !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-utility-preview-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Account and service menu: a compact, flat workspace popover. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal {
  width: 304px !important;
  max-width: calc(100vw - 24px) !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e7d8ac !important;
  border-radius: 8px !important;
  background: #fffdf7 !important;
  box-shadow: 0 12px 28px rgba(77, 60, 20, 0.14) !important;
  color: #403a2d !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 70px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee4c9 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__profile {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 10px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 1px solid #e5d5a8 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: #fff7db !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__profile > div {
  display: grid !important;
  min-width: 0 !important;
  gap: 3px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__profile span {
  color: #8b774b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__profile b {
  overflow: hidden !important;
  color: #29271f !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__close {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  border: 1px solid #e6dcc1 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #8b8069 !important;
  cursor: pointer !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__close:hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__close:focus-visible {
  border-color: #b9d9e8 !important;
  background: #edf7fb !important;
  color: #087bb4 !important;
  outline: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__section-label {
  padding: 11px 14px 5px !important;
  color: #9a8658 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  padding: 0 10px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links--services {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  padding-bottom: 14px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 12px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 8px !important;
  gap: 6px !important;
  border: 1px solid #eee7d5 !important;
  border-radius: 6px !important;
  background: #fffefa !important;
  color: #4b463a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) > i {
  color: #1686bd !important;
  font-size: 16px !important;
  text-align: center !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) > span {
  overflow: hidden !important;
  color: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) > em {
  color: #b2a78e !important;
  font-size: 14px !important;
  font-style: normal !important;
  text-align: right !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button):hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button):focus-visible {
  border-color: #b9d9e8 !important;
  background: #f2fafc !important;
  color: #096f9e !important;
  outline: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account {
  width: min(380px, calc(100vw - 268px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #e7d8ac !important;
  border-radius: 8px !important;
  background: #fffdf7 !important;
  box-shadow: 0 12px 28px rgba(77, 60, 20, 0.14) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-panel__head {
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee4c9 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-panel__title {
  margin: 0 !important;
  color: #29271f !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-panel__body {
  padding: 14px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-links a {
  min-height: 40px !important;
  border-color: #eee7d5 !important;
  border-radius: 6px !important;
  background: #fffefa !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .account-menu--portal {
    width: min(300px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-utility-panel--account {
    width: auto !important;
  }
}

/* Final account-menu placement: the shared bottom-left entry owns account and service actions. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo[data-account-menu-host] {
  position: relative !important;
  z-index: 1200 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo[data-account-menu-host] .userbox {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 1210 !important;
  display: grid !important;
  width: 238px !important;
  max-width: min(238px, calc(100vw - 244px)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: visible !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo[data-account-menu-host] .userbox[hidden] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal {
  position: fixed !important;
  z-index: 2000 !important;
  display: grid !important;
  width: 238px !important;
  max-width: min(238px, calc(100vw - 24px)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: visible !important;
  border: 1px solid #e2cf8c !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, #fffef7 0%, #fff5cf 100%) !important;
  box-shadow: 0 18px 40px rgba(57, 42, 12, 0.20) !important;
  pointer-events: auto !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal[hidden] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account {
  position: fixed !important;
  left: 244px !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  z-index: 1250 !important;
  width: min(380px, calc(100vw - 268px)) !important;
  max-height: min(680px, calc(100dvh - 40px)) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo[data-account-menu-host] .userbox {
    position: fixed !important;
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    width: min(238px, calc(100vw - 20px)) !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .account-menu--portal {
    width: min(300px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-utility-panel--account {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 20px) !important;
  }
}

/* Refined account menu: keep the shared entry light, readable, and flat. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal {
  width: 332px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 0 16px 15px !important;
  border: 1px solid #eadfbd !important;
  border-radius: 10px !important;
  background: #fffdf8 !important;
  box-shadow: 0 10px 24px rgba(51, 75, 86, 0.14) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__title {
  min-height: 66px !important;
  margin: 0 -16px 0 !important;
  padding: 13px 16px 11px !important;
  border-bottom: 1px solid #f0e8d4 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__avatar {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 0 1px #c6dfea !important;
  background: #eef8fb !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__profile span {
  color: #7b8c92 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__profile b {
  color: #263b43 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__close {
  border: 0 !important;
  background: transparent !important;
  color: #8d9ba0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__section-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 0 6px !important;
  color: #84959a !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__section-label::after {
  content: "" !important;
  height: 1px !important;
  flex: 1 1 auto !important;
  background: #eee8d8 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links--services {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 12px !important;
  padding: 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) {
  grid-template-columns: 21px minmax(0, 1fr) 12px !important;
  min-height: 40px !important;
  padding: 0 2px !important;
  gap: 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #f1ecdf !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #3d5057 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button):nth-last-child(-n + 2) {
  border-bottom-color: transparent !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links--services > :last-child {
  grid-column: 1 / -1 !important;
  max-width: calc(50% - 6px) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) > i {
  color: #1686bd !important;
  font-size: 16px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button) > em {
  color: #9aabb0 !important;
  font-size: 14px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button):hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links :is(a, button):focus-visible {
  border-bottom-color: #b8dce9 !important;
  border-radius: 4px !important;
  background: #eff8fb !important;
  color: #076f9f !important;
  outline: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .account-menu__links--services {
  padding-bottom: 0 !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .account-menu--portal {
    width: min(332px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    padding-inline: 14px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .account-menu--portal .account-menu__title {
    margin-inline: -14px !important;
    padding-inline: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-utility-state--loading > i {
    animation: none !important;
  }
}

/* ===== 可见图标与分页最终覆盖 =====
   Remix Icon 仍然是主图标源；这些轻量符号兜底保证首屏截图、慢网和字体交换期间
   也不会出现空白图标框。 */
html body[data-view]:not([data-view="practice"]) :is(
  .home-focus__icon > i,
  .home-metric__icon > i,
  .home-task__icon > i,
  .home-icon-button > i,
  .guide-category-icon > i,
  .guide-series-action > i,
  .course-count > i,
  .market-pages i,
  .pages i,
  .profile-pager i,
  .reading-pager i,
  .invite-pager i
) {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1em !important;
  min-height: 1em !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .home-focus__icon,
  .home-metric__icon,
  .home-task__icon,
  .home-icon-button,
  .guide-category-icon,
  .guide-series-action
) {
  border-style: solid !important;
  box-shadow: 0 7px 16px rgba(36, 104, 151, 0.12) !important;
}

html body[data-view="dashboard"] .home-focus__icon {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid #b7d9ec !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #eff9ff 0%, #dcefff 100%) !important;
  color: #007ede !important;
  font-size: 25px !important;
}

html body[data-view="dashboard"] :is(.home-metric__icon, .home-task__icon) {
  border-width: 1px !important;
  border-radius: 11px !important;
  font-size: 18px !important;
}

html body[data-view="dashboard"] .home-metric__icon--blue {
  border-color: #b8d9f0 !important;
  background: linear-gradient(145deg, #f1f9ff 0%, #e0f0ff 100%) !important;
  color: #007ede !important;
}

html body[data-view="dashboard"] .home-metric__icon--cyan {
  border-color: #b7dfe9 !important;
  background: linear-gradient(145deg, #effcff 0%, #def4fb 100%) !important;
  color: #0075b7 !important;
}

html body[data-view="dashboard"] :is(.home-metric__icon--green, .home-task__icon--green) {
  border-color: #b8dfd4 !important;
  background: linear-gradient(145deg, #f1fffb 0%, #e0f7f1 100%) !important;
  color: #16816d !important;
}

html body[data-view="dashboard"] :is(.home-metric__icon--amber, .home-task__icon--amber) {
  border-color: #ead49c !important;
  background: linear-gradient(145deg, #fffdf1 0%, #fff1c9 100%) !important;
  color: #a46a00 !important;
}

html body[data-view="dashboard"] .home-icon-button {
  border-color: #b7d9ec !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #ffffff 0%, #eaf6ff 100%) !important;
  color: #007ede !important;
}

html body[data-view="guide"] #seriesBox .guide-category-icon {
  border-width: 1.5px !important;
}

/* The shared service menu keeps the actual Remix glyphs; page-wide fallback
   symbols should not flatten its distinct actions into the same mark. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .ri-customer-service-2-line::before {
  content: "\ec0c" !important;
  font-family: remixicon !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .ri-star-fill::before {
  content: "\f186" !important;
  font-family: remixicon !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .ri-chat-quote-line::before {
  content: "\eb6b" !important;
  font-family: remixicon !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .ri-chat-3-line::before {
  content: "\eb51" !important;
  font-family: remixicon !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal .ri-information-line::before {
  content: "\ee59" !important;
  font-family: remixicon !important;
}

/* All pager variants share one readable control language. */
html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-numbers, .invite-pager__numbers) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-numbers > button, .invite-pager__numbers > button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #b8d5e6 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #ffffff 0%, #edf8ff 100%) !important;
  color: #174d70 !important;
  box-shadow: 0 4px 10px rgba(36, 104, 151, 0.08) !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) > :is(.pager-control, a.pager-control, button.pager-control) {
  min-width: 34px !important;
  width: auto !important;
  gap: 6px !important;
  padding-inline: 11px !important;
  border: 1px solid #a9cee4 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #ffffff 0%, #e8f5fe 100%) !important;
  color: #075d91 !important;
  box-shadow: 0 5px 12px rgba(36, 104, 151, 0.10) !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-numbers > button.is-active, .invite-pager__numbers > button.is-active) {
  border-color: #007ede !important;
  background: linear-gradient(135deg, #007ede 0%, #4faaf0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(0, 126, 222, 0.22) !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) > :is(.on, .active, .is-active, [aria-current="page"]) {
  border-color: #007ede !important;
  background: linear-gradient(135deg, #007ede 0%, #4faaf0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(0, 126, 222, 0.22) !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-control, a.pager-control, button.pager-control):disabled,
html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-control[aria-disabled="true"], a.pager-control[aria-disabled="true"]) {
  border-color: #d4e1e9 !important;
  background: #f4f8fa !important;
  color: #9aaeba !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-control i, .pager-control .pager-label) {
  color: inherit !important;
}

html body[data-view]:not([data-view="practice"]) :is(
  .market-pages, .pages, .pager, .pagination, .profile-pager,
  .reading-pager, .mistake-pager, .invite-pager
) :is(.pager-control i) {
  font-size: 17px !important;
}

/* The lookup page is intentionally quieter than the rest of the workspace. */
html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox {
  box-sizing: border-box !important;
  min-height: calc(100dvh - 64px) !important;
  padding: 24px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  justify-items: center !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox::before {
  display: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-shell {
  width: min(100%, 760px) !important;
  margin: 0 auto !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-panel {
  display: grid !important;
  gap: 16px !important;
  width: 100% !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-box {
  width: min(100%, 680px) !important;
  margin: 0 auto !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] #vocabSearchForm {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 7px 8px 7px 14px !important;
  border: 1px solid #b8d5e6 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 10px 24px rgba(36, 104, 151, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] #vocabSearchForm::before {
  display: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] #vocabSearchForm .word-lookup-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #e8f5fe !important;
  color: #007ede !important;
  font-size: 18px !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] #searchInput {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #20384c !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] #searchBtn {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #007ede !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #007ede 0%, #4faaf0 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 14px rgba(0, 126, 222, 0.20) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] #searchBtn:hover {
  background: linear-gradient(135deg, #0069bb 0%, #298fd9 100%) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view="vocab-search"]
  .container-fuild.study-shell > .main-wrapper > .mainBox {
    min-height: calc(100dvh - 110px) !important;
    padding: 20px 12px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"] #vocabSearchForm {
    min-height: 54px !important;
    height: 54px !important;
    padding-left: 10px !important;
    border-radius: 12px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"] #searchBtn {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }

  html body[data-view]:not([data-view="practice"]) :is(
    .market-pages, .pages, .pager, .pagination, .profile-pager,
    .reading-pager, .mistake-pager, .invite-pager
  ) .pager-label {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body[data-view="dashboard"] .container-fuild.study-shell {
    display: block !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow: visible !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid #283149 !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wordmark {
    display: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar ul {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    flex: none !important;
    gap: 4px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar li {
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar li .sidebar-item,
  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar li .sidebar-item a {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar-menu-icon {
    width: 17px !important;
    height: 17px !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar-item i {
    font-size: 12px !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo {
    display: block !important;
    position: relative !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg img {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg p {
    display: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-utility-bar {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #283149 !important;
    border-radius: 0 !important;
    background: #121827 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-utility-bar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-utility-bar .study-utility-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: max-content !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-utility-bar .study-utility-link {
    flex: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
  }

  body[data-view="dashboard"] .container-fuild.study-shell > .study-utility-bar .study-utility-brand {
    display: none !important;
  }

  body[data-view="dashboard"] .main-wrapper.dashboard-shell {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* 2026-07-19: keep the authenticated shell interactive during workspace navigation. */
html body.app-shell-navigation-enabled[data-requires-auth="true"]:not([data-view="practice"]).app-loading-overlay-open {
  overflow: hidden !important;
}

html body.app-shell-navigation-enabled[data-requires-auth="true"]:not([data-view="practice"])
.study-shell > .main-wrapper {
  isolation: isolate;
}

html body.app-shell-navigation-enabled[data-requires-auth="true"]:not([data-view="practice"])
.study-shell > .main-wrapper > .app-loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 900 !important;
  min-width: 0 !important;
  min-height: 100% !important;
  border-radius: 0 !important;
}

html body.app-shell-navigation-enabled[data-requires-auth="true"]:not([data-view="practice"])
.study-shell > .main-wrapper.app-workspace-navigation-pending::after {
  content: "";
  position: sticky;
  z-index: 850;
  top: -24px;
  display: block;
  width: 100%;
  height: 3px;
  margin-top: -3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--brand-accent) 48%, transparent 100%);
  background-size: 46% 100%;
  background-repeat: no-repeat;
  animation: app-shell-navigation-progress 1s ease-in-out infinite;
}

html body.app-shell-navigation-enabled[data-requires-auth="true"]:not([data-view="practice"])
.study-shell > .main-wrapper.app-workspace-navigation-pending {
  cursor: progress;
}

@keyframes app-shell-navigation-progress {
  from { background-position: -90% 0; }
  to { background-position: 190% 0; }
}

@media (max-width: 700px) {
  html body.app-shell-navigation-enabled[data-requires-auth="true"]:not([data-view="practice"])
  .study-shell > .main-wrapper > .app-loading-overlay {
    position: absolute !important;
    min-height: 100dvh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.app-shell-navigation-enabled .app-workspace-navigation-pending::after {
    animation: none !important;
    background-position: center !important;
  }
}

/* The shared responsive overrides are injected after this stylesheet. Keep the
   dashboard navigation contract more specific so it remains a single toolbar. */
@media (max-width: 700px) {
  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper {
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: none !important;
    gap: 4px !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li,
  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li .sidebar-item {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li .sidebar-item a {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
    white-space: nowrap !important;
  }

  html body[data-view="dashboard"] .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Authenticated workspace: match the light, quiet visual system used by Home. */
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) {
  --flat-bg: #f3f5f7;
  --flat-surface: #ffffff;
  --flat-surface-2: #f7f9fb;
  --flat-text: #3d4758;
  --flat-text-strong: #172033;
  --flat-muted: #6b7585;
  --flat-muted-2: #8993a1;
  --flat-border: #e1e6eb;
  --flat-border-soft: #edf0f3;
  --flat-border-strong: #cfd6dd;
  --flat-primary: #2f67d8;
  --flat-primary-hover: #2558bd;
  --flat-primary-soft: #edf3ff;
  --flat-primary-border: #cbd9f6;
  --flat-success: #168565;
  --flat-warning: #a76916;
  --flat-danger: #c53e48;
  --flat-radius: 8px;
  --flat-radius-sm: 6px;
  --flat-radius-xs: 5px;
  --flat-shadow: none;
  --flat-shadow-hover: none;
  --bodyBg: #f3f5f7;
  --bodyT: #3d4758;
  --mainBox: #ffffff;
  --asideText: #6b7585;
  --asideItemBg: #edf3ff;
  --asideItemB: #cbd9f6;
  --bordere8e9eb: #e1e6eb;
  --bgf9f9f9: #f7f9fb;
  --bgwhite: #ffffff;
  --maincolor: #2f67d8;
  --bordere4e9f1: #e1e6eb;
  --borderf2f6f9: #edf0f3;
  --color2d3a4b: #172033;
  --color65748b: #3d4758;
  --color9ba9bb: #6b7585;
  --color475568: #3d4758;
  --color6b798f: #6b7585;
  --color66758c: #6b7585;
  --color94a3b8: #8993a1;
  --color94a3b7: #8993a1;
  --color64748b: #6b7585;
  --color7c899c: #6b7585;
  --color242323: #172033;
  --color213c89: #2f67d8;
  --colorf9fafc: #f7f9fb;
  --bgf8fafc: #f7f9fb;
  --f1f5f9: #edf0f3;
  --planBg: #ffffff;
  --bgeff6ff: #edf3ff;
  --bgf0f4fa: #f3f6fb;
  --bg224fd50d: #edf3ff;
  --bordere4effe: #d9e3f8;
  --bordere1edfd: #cbd9f6;
  --borderf8: 1px solid #edf0f3;
  --border8: 1px solid #e1e6eb;
  --borderf0: 1px solid #edf0f3;
  --btn000: #2f67d8;
  --btnshine: rgba(255, 255, 255, 0.18);
  --e2e8f0: #e1e6eb;
  --bodyGrayT: #6b7585;
  --locationBack: #f7f9fb;
  --Knowledgebg: #edf3ff;
  --Knowledgecolor: #2f67d8;
  --Knowledgeico1: #f1ecff;
  --Knowledgeico2: #e6f4ef;
  --Knowledgeico3: #edf3ff;
  --Knowledgeico4: #f7efe1;
  color: var(--flat-text) !important;
  color-scheme: light !important;
  background: var(--flat-bg) !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]),
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .main-wrapper,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-main,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .mainBox,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .maxWidth,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .page-wrap {
  color: var(--flat-text) !important;
  background: var(--flat-bg) !important;
  background-image: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .main-wrapper {
  padding: 28px 24px 44px !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--flat-text-strong) !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(p, label, small, .muted, .tiny) {
  color: var(--flat-muted) !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .main-wrapper :is(.study-breadcrumbs, .study-breadcrumbs a, .study-breadcrumbs .divider) {
  color: var(--flat-muted) !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .quick-link-card, .category-card, .market-spotlight-item, .lesson-item,
  .course-card, .metric-card, .notice-strip, .support-strip, .trial-banner,
  .detail-card, .membership-status-card, .market-notice, .vip-feature,
  .vip-quote, .vip-pay, .calendar, .progress, .progress2, .progress3,
  .hours, .time, .chat, .parmeBox, .market-course-card,
  .course-directory-card, .continue-course-card, .guide-series-card,
  .recent-course, .recent-course-card, .search-section, .explore-section,
  .search-result, .market-category-card, .market-filter-card,
  .market-list-card, .market-toolbar, .market-notice-mini, .my-stat-item,
  .my-filter-bar, .series-hero, .series-overview-card, .series-tip,
  .mistake-hero, .mistake-course-card, .mistake-lesson-card, .secondBox,
  .profile-hero, .profile-panel, .profile-stat, .profile-field,
  .tier-card, .benefit-table, .benefit-row, .commitment-card,
  .recharge-panel, .payment-panel, .partner-hero, .partner-plan-card,
  .partner-card, .partner-summary-card, .partner-entry, .partner-qa-card,
  .rebate-hero, .rebate-summary-card, .partner-table-row
) {
  border: 1px solid var(--flat-border) !important;
  border-radius: 8px !important;
  background: var(--flat-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .market-course-card, .course-card, .recent-course, .recent-course-card,
  .continue-course-card, .guide-series-card, .tier-card, .partner-card,
  .partner-summary-card, .rebate-summary-card, .profile-panel
):hover {
  border-color: var(--flat-border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  input, textarea, select, .search-box, .market-search, .mycourses-search,
  .word-lookup-input
) {
  border: 1px solid var(--flat-border) !important;
  border-radius: 6px !important;
  background: var(--flat-surface) !important;
  color: var(--flat-text-strong) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) input::placeholder,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) textarea::placeholder {
  color: var(--flat-muted-2) !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  .button, button, .chip, .status-pill, .category-btn, .Wtype span,
  .source_tab em, .second_tab em, .groupBox span, .lesson-tabs button,
  .recharge-tab, .profile-action, .partner-action
) {
  border-radius: 6px !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  .chip.on, .chip.active, .status-pill.on, .category-btn.on, .Wtype span.on,
  .source_tab em.on, .second_tab em.on, .groupBox span.on, .lesson-tabs button.on,
  .recharge-tab.is-active
) {
  border-color: var(--flat-primary-border) !important;
  background: var(--flat-primary-soft) !important;
  background-image: none !important;
  color: var(--flat-primary) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  .button.primary, .register, .btns a.VIP, .continue-btn, .word-lookup-btn,
  .profile-action--primary, .partner-action--primary, .payment-submit
) {
  border-color: var(--flat-primary) !important;
  background: var(--flat-primary) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(
  .button.primary, .register, .btns a.VIP, .continue-btn, .word-lookup-btn,
  .profile-action--primary, .partner-action--primary, .payment-submit
):hover {
  border-color: var(--flat-primary-hover) !important;
  background: var(--flat-primary-hover) !important;
  transform: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(.market-pages, .pages) :is(a, span) {
  border: 1px solid var(--flat-border) !important;
  border-radius: 5px !important;
  background: var(--flat-surface) !important;
  color: var(--flat-muted) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) :is(.market-pages, .pages) .on {
  border-color: var(--flat-primary) !important;
  background: var(--flat-primary) !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-topbar,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .guide_title,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .profile-page-head {
  border-color: var(--flat-border) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-sidebar .userinfo,
html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-sidebar .UserImg {
  border-color: #313a52 !important;
  background: #171d2d !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-sidebar .UserImg :is(b, i, p) {
  color: #ffffff !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-utility-bar {
  border-color: #283149 !important;
  background: #171d2d !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .study-utility-bar :is(.study-utility-link, .study-utility-brand) {
  color: #ffffff !important;
}

html body[data-view="market"] :is(.market-layout, .market-sidebar, .market-content),
html body[data-view="my-courses"] :is(.course, .mycourses-page),
html body[data-view="guide"] .guide,
html body[data-view="mistake-book"] :is(.report, .mistakeList),
html body[data-view="vocab"] :is(.plan, .wordBox),
html body[data-view="knowledge-base"] .knowledge {
  background: transparent !important;
  background-image: none !important;
}

html body[data-view="market"] :is(.market-sidebar .section-card, .market-toolbar, .market-content .market-list-card, .market-notice-mini, .market-course-card),
html body[data-view="my-courses"] :is(.course li, .recent-course, .recent-course-card, .continue-course-card, .my-stat-item, .my-filter-bar) {
  border: 1px solid var(--flat-border) !important;
  border-radius: 8px !important;
  background: var(--flat-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-view="my-courses"] .main-wrapper .my-stat-item .stat-num {
  color: var(--flat-text-strong) !important;
  text-shadow: none !important;
}

html body[data-view="my-courses"] .main-wrapper .my-stat-item .stat-label {
  color: var(--flat-muted) !important;
  text-shadow: none !important;
}

html body[data-view="market"] .market-toolbar-left > span {
  color: var(--flat-muted) !important;
}

html body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper {
  padding: 0 !important;
}

html body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox {
  min-height: 100% !important;
  padding: clamp(72px, 16vh, 132px) 24px 32px !important;
  background: var(--flat-bg) !important;
  background-image: none !important;
}

html body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox::before,
html body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox::after {
  display: none !important;
}

html body[data-view="vocab-search"] .word-lookup-box {
  padding: 8px !important;
  border: 1px solid var(--flat-border) !important;
  border-radius: 8px !important;
  background: var(--flat-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-view="vocab-search"] .word-lookup-input {
  min-height: 60px !important;
  border-radius: 6px !important;
  background: var(--flat-surface) !important;
}

html body[data-view="vocab-search"] .word-lookup-input input {
  min-height: 60px !important;
  color: var(--flat-text-strong) !important;
}

html body[data-view="vocab-search"] .word-lookup-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 6px !important;
}

html body[data-view="profile"] :is(.profile-hero, .profile-panel, .profile-stat, .profile-field, .profile-table-row),
html body[data-view="upgrade"] :is(.recharge-panel, .tier-card, .benefit-table, .benefit-row, .commitment-card, .payment-panel),
html body[data-view="partner-recruit"] :is(.partner-hero, .partner-plan-card, .partner-card, .partner-summary-card, .partner-entry, .partner-qa-card, .partner-table-row),
html body[data-view="promotion-rebate"] :is(.rebate-hero, .rebate-summary-card, .partner-table-row) {
  border-color: var(--flat-border) !important;
  border-radius: 8px !important;
  background: var(--flat-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-view="vocab"] :is(.planL, .planR, .stay, .wordBox, .wordType li, .Wtype),
html body[data-view="knowledge-base"] .knowledge .type li,
html body[data-view="guide"] .Type li,
html body[data-view="course-series"] :is(.course-series-hero, .course-series-section, .course-series-hero__visual, .course-series-metric, .course-series-card),
html body[data-view="profile"] :is(.profile-stat-card, .profile-order-item, .profile-identity-line, .profile-empty, .profile-copy-row),
html body[data-view="upgrade"] :is(.cycle-card, .recharge-summary, .recharge-modal__dialog),
html body[data-view="partner-recruit"] :is(.partner-withdraw-panel, .partner-referral-panel),
html body[data-view="promotion-rebate"] :is(.rebate-toolbar, .partner-table) {
  border-color: var(--flat-border) !important;
  border-radius: 8px !important;
  background: var(--flat-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-view="vocab"] .wordType li {
  border-radius: 8px !important;
  transform: none !important;
}

html body[data-view="vocab"] .main-wrapper :is(.planL, .planR, .stay, .wordBox, .Wtype) {
  border-radius: 8px !important;
}

html body[data-view="vocab"] .planN :is(h2, b, strong) {
  color: var(--flat-text-strong) !important;
}

html body[data-view="vocab"] .planN :is(em, span) {
  color: var(--flat-muted) !important;
}

html body[data-view="vocab"] .planN a {
  color: var(--flat-primary) !important;
}

html body[data-view="knowledge-base"] .knowledge .type ul {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

html body[data-view="knowledge-base"] .knowledge .type li[class] {
  min-height: 0 !important;
  padding: 20px !important;
  border: 1px solid var(--flat-border) !important;
  background: var(--flat-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-view="knowledge-base"] .knowledge .type li::before,
html body[data-view="knowledge-base"] .knowledge .type li .bgic {
  display: none !important;
}

html body[data-view="knowledge-base"] .knowledge .type li p small {
  border: 1px solid var(--flat-border-soft) !important;
  border-radius: 6px !important;
  background: var(--flat-surface-2) !important;
  color: var(--flat-text) !important;
}

html body[data-view="profile"] .profile-hero::before {
  display: none !important;
}

html body[data-view="profile"] .profile-hero__summary,
html body[data-view="profile"] .profile-panel__head p {
  display: none !important;
}

html body[data-view="profile"] .profile-avatar-shell {
  width: 96px !important;
}

html body[data-view="profile"] .profile-avatar {
  width: 84px !important;
  height: 84px !important;
  box-shadow: none !important;
}

html body[data-view="guide"] .Type li {
  overflow: hidden !important;
}

html body[data-view="course-series"] .course-series-hero__visual,
html body:is([data-view="course-detail"], [data-view="course-market-detail"]) .course-cover--detail {
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body:is([data-view="course-detail"], [data-view="course-market-detail"]) .course-detail-title {
  color: var(--flat-text-strong) !important;
  font-size: 26px !important;
  line-height: 1.3 !important;
}

html body:is([data-view="course-detail"], [data-view="course-market-detail"]) .course-detail-notice {
  border: 1px solid var(--flat-border) !important;
  border-radius: 6px !important;
  background: var(--flat-surface-2) !important;
  color: var(--flat-text) !important;
  box-shadow: none !important;
}

html body[data-view="mistake-book"] .mainBox.report .maxWidth {
  width: 100% !important;
  max-width: 1180px !important;
}

html body[data-view="mistake-book"] :is(.mistake-stat, .mistake-pages a, .course-card) {
  border-radius: 6px !important;
  box-shadow: none !important;
}

html body[data-view="profile"] :is(.profile-action, .profile-pill, .profile-avatar-action, .profile-copy-button),
html body[data-view="upgrade"] :is(.recharge-state-pill, .tier-tag, .cycle-card, .payment-channel),
html body[data-view="partner-recruit"] :is(.partner-chip, .partner-state-pill),
html body[data-view="promotion-rebate"] .rebate-pill {
  border-radius: 6px !important;
  box-shadow: none !important;
}

html body[data-view="profile"] :is(.profile-action, .profile-pill, .profile-avatar-action, .profile-copy-button) {
  border-color: var(--flat-border) !important;
  background: var(--flat-surface-2) !important;
  background-image: none !important;
  color: var(--flat-text) !important;
}

html body[data-view="profile"] .profile-action--primary {
  border-color: var(--flat-primary) !important;
  background: var(--flat-primary) !important;
  color: #ffffff !important;
}

html body[data-view="profile"] .profile-action--danger {
  border-color: #efd1d4 !important;
  background: #fff3f4 !important;
  color: var(--flat-danger) !important;
}

html body[data-view="upgrade"] .recharge-tabs {
  border: 1px solid var(--flat-border) !important;
  border-radius: 7px !important;
  background: #e9edf1 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-view="upgrade"] .recharge-tab {
  color: var(--flat-muted) !important;
}

html body[data-view="upgrade"] .recharge-tab.is-active {
  border-color: transparent !important;
  background: var(--flat-surface) !important;
  color: var(--flat-primary) !important;
}

html body[data-view="partner-recruit"] :is(.partner-chip, .partner-state-pill, .partner-status-label, .partner-limit-tag) {
  border-color: var(--flat-primary-border) !important;
  border-radius: 6px !important;
  background: var(--flat-primary-soft) !important;
  background-image: none !important;
  color: var(--flat-primary) !important;
  box-shadow: none !important;
}

html body[data-view="partner-recruit"] .partner-plan-price span {
  color: var(--flat-muted) !important;
}

html body[data-view="promotion-rebate"] .rebate-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body[data-view="promotion-rebate"] .rebate-hero {
  display: none !important;
}

html body[data-view="promotion-rebate"] .partner-table-row {
  grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr 0.9fr !important;
}

html body[data-view="upgrade"] .recharge-modal__dialog {
  border-radius: 8px !important;
}

html body:is([data-view="course-detail"], [data-view="course-market-detail"]) .course-lesson-row :is(h3, h4, .course-lesson-title) {
  color: var(--flat-text-strong) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell {
    display: block !important;
    min-height: 100vh !important;
    height: auto !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper {
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .logo-wordmark {
    display: none !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: none !important;
    gap: 4px !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li,
  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li .sidebar-item {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li .sidebar-item a {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
    white-space: nowrap !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-sidebar.sidebar-wrapper .userinfo {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-utility-bar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #283149 !important;
    border-radius: 0 !important;
    background: #121827 !important;
    box-shadow: none !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-utility-bar .study-utility-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: max-content !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-utility-bar .study-utility-link {
    flex: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .container-fuild.study-shell > .study-utility-bar .study-utility-brand {
    display: none !important;
  }

  html body[data-requires-auth="true"]:not([data-view="practice"]):not([data-view="dashboard"]) .main-wrapper {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 14px 32px !important;
    overflow: visible !important;
  }

  html body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper {
    padding: 0 !important;
  }

  html body[data-view="vocab-search"] .container-fuild.study-shell > .main-wrapper > .mainBox {
    min-height: calc(100vh - 110px) !important;
    padding: 52px 14px 24px !important;
  }

  html body[data-view="knowledge-base"] .knowledge .type ul,
  html body[data-view="promotion-rebate"] .rebate-summary-grid {
    grid-template-columns: 1fr !important;
  }

  html body[data-view="promotion-rebate"] .partner-table-row {
    grid-template-columns: 1fr !important;
  }

  html body[data-view="my-courses"] .main-wrapper .mycourses-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 0 16px !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-view="my-courses"] .main-wrapper .mycourses-topbar .study-header-title {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  html body[data-view="my-courses"] .main-wrapper .mycourses-topbar .mycourses-search {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
  }

  html body[data-view="my-courses"] .main-wrapper .mycourses-topbar .button {
    width: auto !important;
    min-width: 88px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
  }

  html body[data-view="my-courses"] .main-wrapper .course,
  html body[data-view="my-courses"] .main-wrapper .course > ul {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body[data-view="my-courses"] .main-wrapper .course > ul {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-18: final light shell and contrast-safe states. Keep this block last. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  --flat-bg: #f3f5f7;
  --flat-surface: #ffffff;
  --flat-surface-2: #f7f9fb;
  --flat-text: #3d4758;
  --flat-text-strong: #172033;
  --flat-muted: #596576;
  --flat-muted-2: #667085;
  --flat-border: #dfe5ec;
  --flat-border-soft: #e9edf2;
  --flat-border-strong: #bdc7d3;
  --flat-primary: #2f67d8;
  --flat-primary-hover: #2558bd;
  --flat-primary-soft: #edf3ff;
  --flat-primary-border: #cbd9f6;
  color: var(--flat-text) !important;
  color-scheme: light !important;
  background: var(--flat-bg) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper {
  border-right: 1px solid #d7dee7 !important;
  background: #eef2f6 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper {
  border: 1px solid #d7dee7 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #172033 !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .logo-wordmark,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a :is(i, span) {
  color: #253142 !important;
}

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

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar .sidebar-menu-icon {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.72 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active):hover .sidebar-item,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a:hover {
  border-color: #d5dee8 !important;
  background: #dde7f0 !important;
  color: #253142 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active .sidebar-item,
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: #2f67d8 !important;
  background: #2f67d8 !important;
  background-image: none !important;
  color: #ffffff !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.active .sidebar-item a :is(i, span) {
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active .sidebar-menu-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

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

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo {
  border: 1px solid #d7dee7 !important;
  border-radius: 8px !important;
  background: #f7f9fb !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg {
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #253142 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg:hover {
  background: #e7edf3 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg :is(b, p) {
  color: #253142 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg i {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar {
  border: 0 !important;
  border-bottom: 1px solid #dfe5ec !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #253142 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand) {
  border: 1px solid #dfe5ec !important;
  border-radius: 6px !important;
  background: #f7f9fb !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar .study-utility-link:hover {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar .study-utility-link.is-active {
  border-color: #aebfe7 !important;
  background: #dce8fb !important;
  color: #1e4e9d !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-utility-panel {
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #3d4758 !important;
  box-shadow: 0 16px 36px rgba(23, 32, 51, 0.12) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-utility-panel :is(.study-utility-panel__title, strong, b) {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-utility-panel :is(.study-utility-panel__desc, p, small, span) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-utility-panel .study-utility-panel__eyebrow {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-utility-panel .study-utility-panel__close {
  border: 1px solid #dfca85 !important;
  border-radius: 6px !important;
  background: #fff1bd !important;
  color: #5d4c29 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper a:not(.button):not(.recharge-action):not(.profile-action):not(.partner-action):not(.home-primary-action):not(.continue-btn):not(:is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager) a) {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(.button, .btns a, .course-link, .course-series-card__link, .tool, .cs-btn):not(.primary) {
  border: 1px solid #d1d9e2 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(.button, .btns a, .course-link, .course-series-card__link, .tool, .cs-btn):not(.primary):hover {
  border-color: #b9c7dc !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(input, textarea)::placeholder {
  color: #667085 !important;
  opacity: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(button, a, input, textarea, select):focus-visible {
  outline: 3px solid rgba(47, 103, 216, 0.28) !important;
  outline-offset: 2px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(button, input, textarea, select)[disabled],
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(.button, .market-pages a, .pages a):is(.is-disabled, .disabled) {
  border-color: #dfe4ea !important;
  background: #eff2f5 !important;
  background-image: none !important;
  color: #737f91 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Light-surface text left behind by legacy dark page modules. */
html body[data-view="vocab"] :is(.planT .Date span, .wordType li p b, .tp1-content b, .settingPlan .content h5),
html body[data-view="my-courses"] :is(.course-name, .lesson-info),
html body[data-view="guide"] .series-name,
html body:is([data-view="course-detail"], [data-view="course-market-detail"]) :is(.lesson-name, .course-directory-title, .course-detail-desc) {
  color: #172033 !important;
}

html body[data-view="my-courses"] :is(.progress-details, .course-progress-label),
html body[data-view="guide"] .course-count,
html body:is([data-view="course-detail"], [data-view="course-market-detail"]) :is(.lesson-practice-status, .course-meta-line, .course-directory-total),
html body[data-view="market"] :is(.market-notice-mini, .market-toolbar-left, .guide-loading) {
  color: #596576 !important;
}

html body[data-view="vocab-search"] :is(.word-lookup-box, .word-lookup-input) {
  border-color: #d7dee7 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-view="vocab-search"] .word-lookup-input input {
  color: #172033 !important;
}

html body[data-view="vocab-search"] .word-lookup-icon {
  color: #2f67d8 !important;
}

/* Profile and partner components still carrying dark-theme text. */
html body[data-requires-auth="true"][data-view="profile"] :is(.profile-hero__eyebrow, .profile-panel__eyebrow, .profile-link, .profile-stat-card__label, .profile-password-panel__head span) {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-hero__title, .profile-panel__title, .profile-stat-card strong, .profile-identity-line strong, .profile-security-row strong, .profile-order-item__main strong, .profile-invite-item__main strong, .profile-password-panel__head strong, .profile-empty--large strong) {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-stat-card, .profile-field, .profile-identity-line, .profile-security-row, .profile-order-item, .profile-invite-item, .profile-empty, .profile-password-panel) {
  border-color: #e2cf8c !important;
  background: #fff8df !important;
  background-image: none !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-field span, .profile-identity-line span, .profile-security-row span, .profile-order-item span, .profile-invite-item span, .profile-order-item small, .profile-invite-item small, .profile-stat-card p, .profile-empty, .profile-password-note) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-segmented {
  border-color: #dfe5ec !important;
  background: #f1f4f7 !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-segmented__item {
  color: #475568 !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-segmented__item.is-active {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-badge--member, .profile-pill, .profile-status-pill--pending, .profile-status-pill--registered) {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-badge--partner {
  border-color: #ead6ae !important;
  background: #fbf3e5 !important;
  color: #7b4d0b !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-badge--success, .profile-status-pill--completed, .profile-status-pill--settled, .profile-status-pill--converted, .profile-status-pill--paid) {
  border-color: #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-badge--muted, .profile-status-pill, .profile-status-pill--not_joined) {
  border-color: #dfe5ec !important;
  background: #f1f4f7 !important;
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-status-pill--failed, .profile-status-pill--cancelled, .profile-status-pill--rejected) {
  border-color: #efc7cb !important;
  background: #fff0f1 !important;
  color: #a52f39 !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-action--secondary, .profile-modal__close, .profile-copy-button) {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-modal {
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #3d4758 !important;
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.18) !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-modal :is(.profile-modal__title, strong, b) {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-modal :is(.profile-modal__subtitle, .profile-modal-note, p, small, label) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] :is(.partner-tone-card, .partner-entry, .partner-withdraw-account) {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  background-image: none !important;
  color: #334155 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] :is(.partner-summary-card strong, .partner-entry strong, .partner-entry code) {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] :is(.partner-summary-card__action, .partner-withdraw-account__status) {
  border-color: #cbd9f6 !important;
  background: #ffffff !important;
  color: #1f4f9c !important;
}

/* Upgrade page: distinct tier accents, selected states and readable payment UI. */
html body[data-requires-auth="true"][data-view="upgrade"] {
  --recharge-free: #147a5a;
  --recharge-member: #2f67d8;
  --recharge-partner: #8a5a12;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-panel, .tier-card, .cycle-card, .recharge-summary, .benefit-table, .benefit-row, .commitment-card) {
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-panel {
  border: 1px solid #dfe5ec !important;
  background: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-panel::before, .tier-card::before) {
  display: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-kicker, .recharge-section-title span, .recharge-help, .recharge-summary__meta, .tier-note) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-state-pill--member, .tier-tag--recommend) {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-state-pill--partner, .tier-tag--discount, .tier-tag--limit) {
  border-color: #ead6ae !important;
  background: #fbf3e5 !important;
  color: #7b4d0b !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-tabs {
  border: 1px solid #dfe5ec !important;
  background: #f1f4f7 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-tab {
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #475568 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-tab:hover {
  border-color: #d3dbe5 !important;
  background: #ffffff !important;
  color: #253142 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-tab.is-active[data-tier-tab="member"] {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-tab.is-active[data-tier-tab="partner"] {
  border-color: #8a5a12 !important;
  background: #8a5a12 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card {
  border: 1px solid #dfe5ec !important;
  background: #ffffff !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card:hover {
  border-color: #bdc7d3 !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card.is-active.tier-card--member {
  border: 2px solid #2f67d8 !important;
  background: #f7f9ff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card.is-active.tier-card--partner {
  border: 2px solid #8a5a12 !important;
  background: #fdfaf4 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.tier-card__title strong, .tier-price strong, .tier-cycles__head strong, .cycle-card strong) {
  color: #352a16 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.tier-card__title span, .tier-price small, .tier-cycles__head span, .cycle-card span, .tier-list li) {
  color: #75643d !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card {
  border: 1px solid #e0ca83 !important;
  background: #fffdf4 !important;
  color: #4a3c20 !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card:hover {
  border-color: #d1b45e !important;
  background: #fff0b2 !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card.is-active {
  border: 2px solid #bd8312 !important;
  background: #f2ce67 !important;
  color: #3d2c0c !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card em,
html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card.is-active :is(strong, span, em) {
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.tier-mark--yes, .benefit-value__mark--yes) {
  border-color: #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.tier-mark--no, .benefit-value__mark--no) {
  border-color: #efc7cb !important;
  background: #fff0f1 !important;
  color: #a52f39 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-action {
  border-radius: 6px !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-action--member, .recharge-action--partner) {
  border-color: #2558bd !important;
  background: #2558bd !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-action--member, .recharge-action--partner):hover {
  border-color: #1d489d !important;
  background: #1d489d !important;
  filter: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-action--ghost {
  border-color: #d1d9e2 !important;
  background: #ffffff !important;
  color: #334155 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-summary {
  border: 1px solid #e0ca83 !important;
  background: #fff5ce !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-summary__eyebrow {
  border: 1px solid #d9bc60 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-switch {
  padding: 4px !important;
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #f1f4f7 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-pill {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #475568 !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-pill:hover {
  border-color: #d3dbe5 !important;
  background: #ffffff !important;
  color: #253142 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-pill.is-active[data-payment-channel="wechat"] {
  border-color: #147a5a !important;
  background: #147a5a !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-pill.is-active[data-payment-channel="alipay"] {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-table {
  border: 1px solid #dfe5ec !important;
  background: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row {
  border: 0 !important;
  border-bottom: 1px solid #e9edf2 !important;
  background: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row--head {
  background: #f1f4f7 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > div {
  border-color: #e9edf2 !important;
  color: #3d4758 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .commitment-card {
  border: 1px solid #dfe5ec !important;
  background: #f7f9fb !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .commitment-card--free svg { color: #147a5a !important; }
html body[data-requires-auth="true"][data-view="upgrade"] .commitment-card--speed svg { color: #2f67d8 !important; }
html body[data-requires-auth="true"][data-view="upgrade"] .commitment-card--research svg { color: #6b4fb3 !important; }
html body[data-requires-auth="true"][data-view="upgrade"] .commitment-card--price svg { color: #8a5a12 !important; }

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal-shell {
  background: rgba(23, 32, 51, 0.54) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal {
  border: 1px solid #dfe5ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #3d4758 !important;
  box-shadow: 0 24px 60px rgba(23, 32, 51, 0.18) !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal :is(.recharge-modal__head strong, .recharge-modal__order strong, .recharge-modal__qrbox strong) {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal :is(.recharge-modal__head p, .recharge-modal__order span, .recharge-modal__qrbox p) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-modal__eyebrow, .recharge-modal__steps span.is-active) {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal__close {
  border: 1px solid #dfe5ec !important;
  border-radius: 6px !important;
  background: #f1f4f7 !important;
  color: #334155 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal__steps span,
html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-modal__order > div, .recharge-modal__benefit, .recharge-modal__qrbox) {
  border-color: #dfe5ec !important;
  border-radius: 6px !important;
  background: #f7f9fb !important;
  color: #3d4758 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal__qrcode {
  border-color: #aebfe7 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal__success {
  border-color: #bfe4d5 !important;
  border-radius: 6px !important;
  background: #e9f7f1 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-modal__success strong {
  color: #147a5a !important;
}

@media (max-width: 680px) {
  html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-grid, .tier-cycles__grid, .commitment-grid) {
    grid-template-columns: 1fr !important;
  }

  html body[data-requires-auth="true"][data-view="upgrade"] :is(.payment-channel-switch, .recharge-summary__actions) {
    width: 100% !important;
  }

  html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-pill,
  html body[data-requires-auth="true"][data-view="upgrade"] .recharge-summary__actions .recharge-action {
    flex: 1 1 0 !important;
  }
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell {
    display: block !important;
    min-height: 100vh !important;
    height: auto !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #d7dee7 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper {
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .logo-wordmark {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul {
    display: flex !important;
    flex: none !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li .sidebar-item {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > ul > li .sidebar-item a {
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
    white-space: nowrap !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar-menu-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg {
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg img {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg p,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userbox {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar .study-utility-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: max-content !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar .study-utility-link {
    flex: none !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar .study-utility-brand {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .main-wrapper {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 14px 32px !important;
    overflow: visible !important;
  }
}

/* 2026-07-18: layered light workspace, refined surfaces and grouped navigation. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  --workspace-shadow: 0 1px 2px rgba(32, 48, 71, 0.05), 0 8px 24px rgba(32, 48, 71, 0.045);
  --workspace-shadow-hover: 0 2px 5px rgba(32, 48, 71, 0.07), 0 12px 30px rgba(32, 48, 71, 0.065);
  --workspace-border: #d7e0e9;
  --workspace-border-strong: #bcc9d6;
  background:
    linear-gradient(90deg, rgba(47, 103, 216, 0.075) 0%, rgba(47, 103, 216, 0.018) 14%, transparent 29%, transparent 72%, rgba(22, 133, 101, 0.018) 86%, rgba(22, 133, 101, 0.07) 100%),
    linear-gradient(180deg, #f8fafc 0%, #f3f5f7 42%, #f5f7f9 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell {
  background:
    linear-gradient(90deg, rgba(47, 103, 216, 0.055) 0%, transparent 19%, transparent 81%, rgba(22, 133, 101, 0.05) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(243, 245, 247, 0.72) 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > :is(.main-wrapper, .study-main) {
  background:
    linear-gradient(90deg, rgba(47, 103, 216, 0.035) 0%, transparent 16%, transparent 84%, rgba(22, 133, 101, 0.032) 100%),
    linear-gradient(180deg, #f8fafc 0%, #f3f5f7 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper {
  border-right-color: #cfd9e3 !important;
  background: linear-gradient(180deg, #f4f7fa 0%, #edf2f6 52%, #e9eff4 100%) !important;
  box-shadow: 8px 0 28px rgba(35, 52, 75, 0.055) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper {
  border-color: #cfdae5 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%) !important;
  box-shadow: 0 1px 2px rgba(32, 48, 71, 0.05), 0 8px 18px rgba(32, 48, 71, 0.04) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group {
  position: relative !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #cbd6e1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  width: 34px !important;
  height: 1px !important;
  background: linear-gradient(90deg, #2f67d8 0%, #168565 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a:hover {
  border-color: #c8d4e0 !important;
  background: linear-gradient(90deg, #e2eaf3 0%, #e9eff5 100%) !important;
  box-shadow: inset 3px 0 0 rgba(47, 103, 216, 0.45) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active .sidebar-item,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active .sidebar-item a {
  background: linear-gradient(105deg, #2f67d8 0%, #356fdc 70%, #2d7aa8 100%) !important;
  box-shadow: 0 5px 14px rgba(47, 103, 216, 0.2) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .userinfo {
  border-color: #cdd8e3 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8fb 100%) !important;
  box-shadow: 0 1px 2px rgba(32, 48, 71, 0.05), 0 8px 20px rgba(32, 48, 71, 0.045) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar {
  border-bottom-color: #d6dfe8 !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 253, 0.98) 100%) !important;
  box-shadow: 0 2px 12px rgba(32, 48, 71, 0.045) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand) {
  border-color: #d6dfe8 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%) !important;
  box-shadow: 0 1px 2px rgba(32, 48, 71, 0.04) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(h1, h2, h3) {
  color: #152238 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(.study-breadcrumbs, .study-breadcrumbs a, .study-breadcrumbs .divider) {
  color: #657184 !important;
  font-weight: 600 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(.study-topbar, .guide_title, .profile-page-head) {
  border-bottom: 1px solid #d5dee7 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .course-series-card, .recent-course, .recent-course-card,
  .my-stat-item, .my-filter-bar, .market-filter-card, .market-list-card,
  .mistake-course-card, .mistake-lesson-card, .profile-hero, .profile-panel,
  .profile-stat-card, .profile-order-item, .partner-hero, .partner-plan-card,
  .partner-card, .partner-summary-card, .partner-entry, .partner-withdraw-panel,
  .recharge-panel, .tier-card, .recharge-summary, .benefit-table, .commitment-card
) {
  border-color: var(--workspace-border) !important;
  background-image: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .course-series-card, .recent-course, .recent-course-card,
  .market-filter-card, .market-list-card, .mistake-course-card, .mistake-lesson-card,
  .profile-panel, .profile-order-item, .partner-card, .partner-summary-card, .tier-card
):hover {
  border-color: var(--workspace-border-strong) !important;
  box-shadow: var(--workspace-shadow-hover) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(input, textarea, select, .search-box, .market-search, .mycourses-search, .word-lookup-input) {
  border-color: #cfd9e4 !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: inset 0 1px 2px rgba(32, 48, 71, 0.035) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper :is(input, textarea, select, .search-box, .market-search, .mycourses-search, .word-lookup-input):focus-within {
  border-color: #9db4dc !important;
  box-shadow: 0 0 0 3px rgba(47, 103, 216, 0.11), inset 0 1px 2px rgba(32, 48, 71, 0.03) !important;
}

/* Home focus panel: replace the remaining dark banner with a light priority surface. */
html body[data-requires-auth="true"][data-view="dashboard"] .home-focus {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #cbd8e5 !important;
  background: linear-gradient(115deg, #ffffff 0%, #f7faff 58%, #f1faf6 100%) !important;
  color: #172033 !important;
  box-shadow: 0 2px 5px rgba(32, 48, 71, 0.06), 0 14px 34px rgba(39, 71, 111, 0.075) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #2f67d8 0%, #168565 100%) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__icon {
  border: 1px solid #bfe4d5 !important;
  background: linear-gradient(145deg, #e9f7f1 0%, #def2e9 100%) !important;
  color: #147a5a !important;
  box-shadow: 0 6px 16px rgba(20, 122, 90, 0.12) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__copy > span,
html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__progress > span {
  color: #4f6381 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__copy h2 {
  color: #172033 !important;
  font-size: 21px !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__copy p {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__progress strong {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-progress-track {
  border: 1px solid #d8e1ea !important;
  background: #e8edf2 !important;
  box-shadow: inset 0 1px 2px rgba(32, 48, 71, 0.06) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-progress-track > span {
  background: linear-gradient(90deg, #2f67d8 0%, #168565 100%) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-primary-action {
  border-color: #2f67d8 !important;
  background: linear-gradient(105deg, #2f67d8 0%, #2558bd 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(47, 103, 216, 0.18) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-primary-action:hover {
  border-color: #1d489d !important;
  background: linear-gradient(105deg, #2558bd 0%, #1d489d 100%) !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] :is(.home-metrics, .home-section) {
  border-color: #d5dfe8 !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-metric {
  border-right-color: #dce4eb !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-periods {
  border-color: #d4dde6 !important;
  background: linear-gradient(180deg, #eef2f6 0%, #e8edf2 100%) !important;
  box-shadow: inset 0 1px 2px rgba(32, 48, 71, 0.04) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper {
    background: linear-gradient(90deg, #f4f7fa 0%, #edf2f6 100%) !important;
    box-shadow: 0 2px 12px rgba(35, 52, 75, 0.055) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group {
    margin: 0 0 0 8px !important;
    padding: 0 0 0 9px !important;
    border-top: 0 !important;
    border-left: 1px solid #c5d1dc !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
    top: 6px !important;
    bottom: 6px !important;
    left: -1px !important;
    width: 1px !important;
    height: auto !important;
    background: linear-gradient(180deg, #2f67d8 0%, #168565 100%) !important;
  }

  html body[data-requires-auth="true"][data-view="dashboard"] .home-focus {
    padding-left: 18px !important;
  }
}

/* 2026-07-18: unified market filters and page-specific surface depth. */
html body[data-requires-auth="true"][data-view="market"] .market-sidebar {
  display: block !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-sidebar .market-filter-panel {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid #ccd7e2 !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ffffff 0%, #f9fbfd 100%) !important;
  box-shadow: 0 2px 5px rgba(32, 48, 71, 0.055), 0 12px 30px rgba(32, 48, 71, 0.06) !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-section {
  display: grid !important;
  grid-template-columns: 104px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 18px !important;
  min-width: 0 !important;
  padding: 16px 20px !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-section + .market-filter-section {
  border-top: 1px solid #dde5ec !important;
  background: linear-gradient(90deg, rgba(47, 103, 216, 0.025) 0%, transparent 45%, rgba(22, 133, 101, 0.02) 100%) !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .section-card-head {
  margin: 0 !important;
  padding: 7px 0 0 !important;
  border: 0 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .section-card-head h3 {
  margin: 0 !important;
  color: #172033 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
  min-width: 0 !important;
  padding: 0 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .filter-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .filter-row > .tiny {
  flex: none !important;
  color: #657184 !important;
  font-weight: 700 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip {
  border-color: #d3dce6 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fa 100%) !important;
  color: #3d4758 !important;
  box-shadow: 0 1px 2px rgba(32, 48, 71, 0.035) !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip:hover {
  border-color: #aebfe0 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip.on {
  border-color: #2f67d8 !important;
  background: linear-gradient(105deg, #2f67d8 0%, #2558bd 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(47, 103, 216, 0.16) !important;
}

html body[data-requires-auth="true"]:is(
  [data-view="my-courses"], [data-view="guide"], [data-view="mistake-book"],
  [data-view="vocab"], [data-view="knowledge-base"], [data-view="course-series"],
  [data-view="course-detail"], [data-view="course-market-detail"],
  [data-view="promotion-rebate"], [data-view="vocab-search"]
) .main-wrapper :is(
  .my-stat-item, .my-filter-bar, .course > ul > li,
  .Type li, .mistake-stat, .mistake-summary-strip, .course-card,
  .planL, .planR, .wordBox, .wordType li,
  .knowledge .type li,
  .course-series-hero, .course-series-section, .course-series-metric, .course-series-card,
  .course-detail-hero-card, .course-directory-card,
  .rebate-toolbar, .partner-table, .rebate-summary-card,
  .word-lookup-box
) {
  border: 1px solid var(--workspace-border) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  background-image: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"]:is(
  [data-view="my-courses"], [data-view="guide"], [data-view="mistake-book"],
  [data-view="vocab"], [data-view="knowledge-base"], [data-view="course-series"],
  [data-view="course-detail"], [data-view="course-market-detail"],
  [data-view="promotion-rebate"]
) .main-wrapper :is(
  .course > ul > li, .Type li, .course-card, .wordType li,
  .knowledge .type li, .course-series-card, .course-directory-card, .rebate-summary-card
):hover {
  border-color: var(--workspace-border-strong) !important;
  box-shadow: var(--workspace-shadow-hover) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .container-fuild.study-shell > .study-utility-bar {
    border: 0 !important;
    border-bottom: 1px solid #d6dfe8 !important;
    background: linear-gradient(90deg, #ffffff 0%, #f8fbfd 100%) !important;
    background-image: linear-gradient(90deg, #ffffff 0%, #f8fbfd 100%) !important;
    color: #253142 !important;
    box-shadow: 0 2px 12px rgba(32, 48, 71, 0.045) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .container-fuild.study-shell > .study-utility-bar .study-utility-link {
    border-color: #d6dfe8 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%) !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%) !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(32, 48, 71, 0.04) !important;
  }

  html body[data-requires-auth="true"][data-view="market"] .market-filter-section {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 15px 14px !important;
  }

  html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .section-card-head {
    padding-top: 0 !important;
  }

  html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
}

/* Surface ownership: emphasize primary panels without nesting shadows. */
html body[data-requires-auth="true"]:is(
  [data-view="dashboard"], [data-view="market"], [data-view="mistake-book"],
  [data-view="vocab"], [data-view="partner-recruit"]
) .main-wrapper :is(
  .home-error, .market-toolbar, .market-notice-mini,
  .secondBox, .mistakeList > ul > li,
  .stay, .partner-withdraw-form-card, .partner-withdraw-card
) {
  border: 1px solid var(--workspace-border) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  background-image: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-list-card,
html body[data-requires-auth="true"][data-view="course-series"] .course-series-section,
html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-withdraw-panel {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-panel {
  box-shadow: 0 1px 2px rgba(32, 48, 71, 0.035) !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(.profile-stat-card, .profile-order-item),
html body[data-requires-auth="true"][data-view="mistake-book"] :is(.mistake-stat, .course-card),
html body[data-requires-auth="true"][data-view="vocab"] .wordType li {
  box-shadow: none !important;
}

/* 2026-07-18: final contrast, search, payment and workspace corrections. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  background:
    linear-gradient(112deg, rgba(47, 103, 216, 0.11) 0%, rgba(47, 103, 216, 0.035) 18%, transparent 36%),
    linear-gradient(248deg, rgba(22, 133, 101, 0.10) 0%, rgba(22, 133, 101, 0.03) 17%, transparent 35%),
    linear-gradient(180deg, #f9fbfd 0%, #f2f5f8 52%, #f7faf9 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > :is(.main-wrapper, .study-main) {
  background:
    linear-gradient(108deg, rgba(47, 103, 216, 0.085) 0%, transparent 28%),
    linear-gradient(252deg, rgba(22, 133, 101, 0.075) 0%, transparent 27%),
    linear-gradient(180deg, rgba(250, 252, 254, 0.98) 0%, rgba(241, 245, 248, 0.98) 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .main-wrapper > .mainBox,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .main-wrapper > .mainBox > .maxWidth {
  background: transparent !important;
  background-image: none !important;
}

html body[data-requires-auth="true"][data-view="market"] .main-wrapper .market-search {
  padding: 0 !important;
}

html body[data-requires-auth="true"][data-view="market"] .main-wrapper .market-search > input,
html body[data-requires-auth="true"][data-view="market"] .main-wrapper .market-search > input:focus,
html body[data-requires-auth="true"][data-view="market"] .main-wrapper .market-search > input:focus-within {
  padding: 0 38px 0 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox {
  min-height: 100vh !important;
  padding: clamp(76px, 14vh, 132px) 24px 32px !important;
  background:
    linear-gradient(118deg, rgba(47, 103, 216, 0.12) 0%, rgba(47, 103, 216, 0.025) 30%, transparent 48%),
    linear-gradient(242deg, rgba(22, 133, 101, 0.10) 0%, rgba(22, 133, 101, 0.02) 28%, transparent 46%),
    linear-gradient(180deg, #f9fbfd 0%, #eef3f7 100%) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox::before,
html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox::after {
  display: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-shell,
html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-panel {
  width: min(100%, 700px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-box {
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 48px !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 7px 8px 7px 18px !important;
  overflow: hidden !important;
  border: 1px solid #c7d5e2 !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: 0 2px 5px rgba(32, 48, 71, 0.06), 0 14px 34px rgba(32, 48, 71, 0.08) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input:focus-within {
  border-color: #7f9fce !important;
  box-shadow: 0 0 0 3px rgba(47, 103, 216, 0.12), 0 14px 34px rgba(32, 48, 71, 0.08) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-icon {
  color: #2f67d8 !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input > input,
html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input > input:focus {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #172033 !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input > input::placeholder {
  color: #657184 !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-btn {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  border: 1px solid #2f67d8 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #356fdc 0%, #2558bd 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 14px rgba(47, 103, 216, 0.2) !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .planT .pl {
  border: 1px solid #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .planT .pl0,
html body[data-requires-auth="true"][data-view="vocab"] .study-plan-head strong,
html body[data-requires-auth="true"][data-view="vocab"] .tp1-content b {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .planT .pl0 i {
  color: #2f67d8 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .study-plan-card {
  border-color: #cbd9f6 !important;
  background: linear-gradient(145deg, #ffffff 0%, #f3f7ff 100%) !important;
  box-shadow: 0 8px 22px rgba(32, 48, 71, 0.07) !important;
}

html body[data-requires-auth="true"][data-view="vocab"] :is(.study-plan-head span, .study-plan-meta, .study-plan-progress small, .tp1-content > span) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .Wtype span {
  border-color: #d7e0e9 !important;
  background: #f7f9fb !important;
  color: #475568 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .tp1-status--active {
  border-color: #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="vocab"] :is(.tp1-status--available, .tp1-action) {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .is-active-plan .tp1-action {
  border-color: #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-switch[hidden],
html body[data-requires-auth="true"][data-view="upgrade"] .recharge-help[hidden] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-table {
  overflow: hidden !important;
  border-color: #cfd9e4 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--label {
  background: #f6f8fa !important;
  color: #253142 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--free {
  background: #f2faf6 !important;
  border-left: 1px solid #d0e8dc !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--member {
  background: #f2f6ff !important;
  border-left: 1px solid #d2ddf4 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--partner {
  background: #fff8ea !important;
  border-left: 1px solid #ead9b5 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row--head > .benefit-col--free {
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row--head > .benefit-col--member {
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row--head > .benefit-col--partner {
  color: #7a4b0b !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-value {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  color: #334155 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-value__mark {
  display: inline-grid !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  place-items: center !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-value--included .benefit-value__mark {
  background: #dff3e9 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-value--limited .benefit-value__mark {
  background: #fff0cf !important;
  color: #82500a !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-value--exclusive .benefit-value__mark {
  background: #ffe69a !important;
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(.benefit-value--unavailable, .benefit-value--neutral) .benefit-value__mark {
  background: #f2e7e9 !important;
  color: #934052 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-price-value {
  color: #172033 !important;
  font-weight: 800 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-rebate-tag {
  border-color: #dfc38e !important;
  background: #fbf3e5 !important;
  color: #7a4b0b !important;
  font-weight: 700 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-plan-price strong {
  color: #7a4b0b !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-plan-price span,
html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-summary-card strong {
  color: #172033 !important;
}

@media (max-width: 860px) {
  html body[data-requires-auth="true"][data-view="upgrade"] .benefit-table {
    overflow-x: auto !important;
  }

  html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row,
  html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row--head {
    display: grid !important;
    grid-template-columns: 150px repeat(3, minmax(180px, 1fr)) !important;
    min-width: 690px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"]
  .container-fuild.study-shell > .main-wrapper > .mainBox {
    min-height: calc(100vh - 92px) !important;
    padding: 34px 14px 24px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input {
    grid-template-columns: auto minmax(0, 1fr) 44px !important;
    min-height: 58px !important;
    padding: 6px 7px 6px 14px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }
}

/* Search inputs must outrank the legacy authenticated-form selector. */
html body[data-requires-auth="true"][data-view="market"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .market-search {
  padding: 0 !important;
}

html body[data-requires-auth="true"][data-view="market"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .market-search > input,
html body[data-requires-auth="true"][data-view="market"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .market-search > input:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input {
  border: 1px solid #c7d5e2 !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  background-image: linear-gradient(145deg, #ffffff 0%, #fbfcfd 100%) !important;
  box-shadow: 0 2px 5px rgba(32, 48, 71, 0.06), 0 14px 34px rgba(32, 48, 71, 0.08) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input:focus-within {
  border-color: #7f9fce !important;
  box-shadow: 0 0 0 3px rgba(47, 103, 216, 0.12), 0 14px 34px rgba(32, 48, 71, 0.08) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input > input,
html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input > input:focus {
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2026-07-18: final page-specific contrast and layout corrections. */
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT .pl {
  border: 1px solid #bfe4d5 !important;
  background: linear-gradient(135deg, #e9f7f1 0%, #def2e9 100%) !important;
  color: #147a5a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT .pl0,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN :is(h2, b, strong) {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT .pl0 i {
  color: #2f67d8 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN h2 em,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN h2 b span {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN a,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN a i,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT .Date span {
  color: #334155 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planL .planN a,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT .Date,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT p {
  border-color: #d7e0e9 !important;
  background: #f7f9fb !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT p span {
  color: #475568 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planT p span.on {
  background: #2f67d8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planR .calendar .days p :is(em, label, label span) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .planBox .planR .calendar .days p label span {
  background: #f7f9fb !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .stay {
  border: 1px solid #cbd9f6 !important;
  border-left: 4px solid #2f67d8 !important;
  background: linear-gradient(110deg, #ffffff 0%, #f1f6ff 100%) !important;
  box-shadow: 0 8px 22px rgba(32, 48, 71, 0.07) !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .stay > i {
  color: #2f67d8 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .stay > div > strong {
  color: #172033 !important;
  font-weight: 800 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .stay > div > span {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .stay #planList .study-plan-card {
  border-color: #cbd9f6 !important;
  background: linear-gradient(145deg, #ffffff 0%, #f3f7ff 100%) !important;
  box-shadow: 0 8px 22px rgba(32, 48, 71, 0.07) !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .stay #planList .study-plan-head strong {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .stay #planList :is(.study-plan-head span, .study-plan-meta, .study-plan-progress small) {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType .Wtype span {
  border-color: #d7e0e9 !important;
  background: #f7f9fb !important;
  color: #475568 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType .Wtype span.on {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li {
  border-color: #d4dee8 !important;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 0 4px 14px rgba(32, 48, 71, 0.055) !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li:hover {
  border-color: #9eb5dd !important;
  box-shadow: 0 10px 24px rgba(32, 48, 71, 0.09) !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-content b {
  color: #172033 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-content span {
  color: #596576 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-content span em {
  background: #7c8999 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-status.tp1-status--active {
  border-color: #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-status.tp1-status--available,
html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-action {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li .tp1-action:hover {
  border-color: #9eb5dd !important;
  background: #dfe9fb !important;
  color: #173f80 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.plan .wordBox .wordType li.is-active-plan .tp1-action {
  border-color: #bfe4d5 !important;
  background: #e9f7f1 !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"]
main.main-wrapper > .study-topbar {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 0 14px !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"]
main.main-wrapper > .study-topbar .study-header-title {
  margin: 0 !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell,
html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper {
  min-height: 100vh !important;
  background:
    linear-gradient(112deg, rgba(47, 103, 216, 0.13) 0%, rgba(47, 103, 216, 0.035) 28%, transparent 50%),
    linear-gradient(248deg, rgba(22, 133, 101, 0.11) 0%, rgba(22, 133, 101, 0.025) 26%, transparent 48%),
    linear-gradient(180deg, #f9fbfd 0%, #eef3f7 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox {
  width: 100% !important;
  min-height: 100vh !important;
  background: transparent !important;
  background-image: none !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input {
  border: 1px solid #bfd0e1 !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 253, 0.96) 100%) !important;
  box-shadow: 0 18px 44px rgba(32, 48, 71, 0.10), inset 0 1px 0 #ffffff !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input:focus-within {
  border-color: #7899cd !important;
  box-shadow: 0 0 0 4px rgba(47, 103, 216, 0.10), 0 20px 48px rgba(32, 48, 71, 0.12) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-icon {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: #edf4ff !important;
  color: #2f67d8 !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-btn {
  border-radius: 50% !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-meta {
  gap: 8px !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-level-pill,
html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat {
  min-height: 34px !important;
  border: 1px solid #d3deea !important;
  border-radius: 8px !important;
  background: #f7f9fb !important;
  color: #475568 !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-level-pill {
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat {
  padding: 0 11px !important;
  font-weight: 700 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat strong {
  color: #172033 !important;
  font-weight: 850 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat em {
  color: #526174 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat--purple i {
  background: #eee9fb !important;
  color: #6847a8 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat--green i {
  background: #e5f5ed !important;
  color: #147a5a !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat--teal i {
  background: #e8f0fb !important;
  color: #1f5d9f !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-detail-desc {
  color: #475568 !important;
  font-weight: 600 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-directory-head,
html body[data-requires-auth="true"] [data-course-market-detail-page] .course-lesson-row {
  border-color: #d8e1ea !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-lesson-name {
  color: #253142 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-lesson-desc,
html body[data-requires-auth="true"] [data-course-market-detail-page] .course-lesson-meta,
html body[data-requires-auth="true"] [data-course-market-detail-page] .course-directory-title > div > span {
  color: #596576 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-directory-total {
  border-color: #cbd9f6 !important;
  background: #edf3ff !important;
  color: #1f4f9c !important;
}

@media (max-width: 1180px) {
  html body[data-requires-auth="true"][data-view="upgrade"] .recharge-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view="vocab-search"]
  .container-fuild.study-shell > .main-wrapper,
  html body[data-requires-auth="true"][data-view="vocab-search"]
  .container-fuild.study-shell > .main-wrapper > .mainBox {
    min-height: calc(100dvh - 110px) !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
  .container-fuild.study-shell > .main-wrapper .word-lookup-input {
    border-radius: 19px !important;
  }
}

html body[data-view] .app-loading-overlay {
  background:
    linear-gradient(112deg, rgba(218, 167, 35, 0.20) 0%, transparent 38%),
    linear-gradient(180deg, rgba(255, 249, 221, 0.82) 0%, rgba(255, 241, 184, 0.92) 100%) !important;
}

html body[data-view] :is(.app-loading-overlay__panel, .profile-empty--loading, .rebate-empty--loading) {
  border-color: #dec678 !important;
  background: rgba(255, 253, 244, 0.96) !important;
  color: #3d321b !important;
  box-shadow: 0 20px 44px rgba(112, 78, 11, 0.14) !important;
}

html body[data-view] :is(.app-loading-overlay__desc, .profile-empty--loading span, .rebate-empty--loading span) {
  color: #75643d !important;
}

html body[data-view] :is(.app-loading-overlay__spinner, .profile-empty__spinner, .rebate-empty__spinner) {
  border-color: #eadba8 !important;
  border-top-color: #a96f0c !important;
  border-right-color: #d5a11f !important;
}

html body .toast-item {
  border: 1px solid #d1b45e !important;
  background: #5d3a05 !important;
  color: #fffdf4 !important;
  box-shadow: 0 16px 34px rgba(83, 52, 5, 0.24) !important;
}

/* 2026-07-18: site-wide warm pale-yellow theme. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  --flat-bg: #fff8d8;
  --flat-surface: #fffdf4;
  --flat-surface-2: #fff6d2;
  --flat-text: #4a3c20;
  --flat-text-strong: #352a16;
  --flat-muted: #75643d;
  --flat-muted-2: #8c7849;
  --flat-border: #e5d39a;
  --flat-border-soft: #efe3ba;
  --flat-primary: #a96f0c;
  --flat-primary-hover: #875406;
  --flat-primary-soft: rgba(211, 161, 34, 0.17);
  --flat-primary-border: rgba(169, 111, 12, 0.42);
  --flat-accent-cyan: #c89218;
  --flat-accent-sky: #d8aa35;
  --flat-accent-teal: #b98518;
  --flat-accent-green: #987016;
  --flat-accent-amber: #bd7c0b;
  --flat-accent-rose: #b87922;
  --flat-accent-purple: #a8751a;
  --flat-accent-indigo: #966710;
  --flat-success: #2f7a4d;
  --flat-warning: #a96f0c;
  --flat-danger: #b7433f;
  --workspace-shadow: 0 2px 5px rgba(112, 78, 11, 0.055), 0 12px 28px rgba(112, 78, 11, 0.075);
  --workspace-shadow-hover: 0 3px 7px rgba(112, 78, 11, 0.075), 0 16px 34px rgba(112, 78, 11, 0.10);
  --workspace-border: #e5d39a;
  --workspace-border-strong: #d1b45e;
  --bodyBg: #fff8d8;
  --bodyT: #4a3c20;
  --mainBox: #fffdf4;
  --asideText: #6e5c35;
  --asideItemBg: #f5d875;
  --asideItemB: #c99720;
  --bordere8e9eb: #e5d39a;
  --bgf9f9f9: #fff6d2;
  --focus: 0 0 0 3px rgba(211, 161, 34, 0.20);
  --bgwhite: #fffdf4;
  --maincolor: #a96f0c;
  --bordere4e9f1: #e5d39a;
  --borderf2f6f9: #efe3ba;
  --color2d3a4b: #352a16;
  --color65748b: #665633;
  --color9ba9bb: #8c7849;
  --color475568: #665633;
  --color6b798f: #75643d;
  --color66758c: #75643d;
  --color94a3b8: #8c7849;
  --color94a3b7: #8c7849;
  --color64748b: #75643d;
  --color7c899c: #806d43;
  --color242323: #352a16;
  --color213c89: #8d5d09;
  --colorf9fafc: #fff9e4;
  --bgf8fafc: #fff8df;
  --f1f5f9: #f6e8b8;
  --planBg: #fffdf4;
  --bgeff6ff: #fff2bd;
  --bgf0f4fa: #fff6d2;
  --bg224fd50d: rgba(211, 161, 34, 0.13);
  --bordere4effe: #e5cf86;
  --bordere1edfd: #dcc275;
  --borderf8: 1px solid #efe3ba;
  --border8: 1px solid #e5d39a;
  --borderf0: 1px solid #efe3ba;
  --btn000: #9b6409;
  --btnshine: rgba(255, 255, 255, 0.28);
  --e2e8f0: #e5d39a;
  --bodyGrayT: #806d43;
  --locationBack: rgba(255, 244, 190, 0.72);
  --Knowledgebg: #fff1b7;
  --Knowledgecolor: #8d5d09;
  --Knowledgeico1: #fff0ba;
  --Knowledgeico2: #ffefb0;
  --Knowledgeico3: #fff5cd;
  --Knowledgeico4: #ffe9a0;
  color: #4a3c20 !important;
  color-scheme: light !important;
  background:
    linear-gradient(110deg, rgba(218, 167, 35, 0.18) 0%, rgba(218, 167, 35, 0.04) 25%, transparent 43%),
    linear-gradient(250deg, rgba(244, 203, 76, 0.22) 0%, rgba(244, 203, 76, 0.05) 24%, transparent 42%),
    linear-gradient(180deg, #fffce9 0%, #fff5ca 52%, #fff9dd 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])::selection,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) *::selection {
  background: rgba(239, 199, 77, 0.72) !important;
  color: #3d2a08 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])::-webkit-scrollbar-track {
  background: #fff4c8 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])::-webkit-scrollbar-thumb {
  border-color: #fff4c8 !important;
  background: linear-gradient(180deg, #e7bd4f 0%, #bd8312 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > :is(.main-wrapper, .study-main) {
  background:
    linear-gradient(108deg, rgba(218, 167, 35, 0.15) 0%, transparent 31%),
    linear-gradient(252deg, rgba(246, 210, 104, 0.20) 0%, transparent 30%),
    linear-gradient(180deg, rgba(255, 252, 233, 0.98) 0%, rgba(255, 245, 202, 0.98) 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper > :is(.mainBox, .mainBox > .maxWidth) {
  background: transparent !important;
  background-image: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper {
  border-right-color: #dfc879 !important;
  background: linear-gradient(180deg, #fff8d5 0%, #fff0b8 54%, #f9e8a1 100%) !important;
  box-shadow: 8px 0 28px rgba(112, 78, 11, 0.09) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .logo-wrapper,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo {
  border-color: #e2cf8c !important;
  background: linear-gradient(145deg, #fffef6 0%, #fff6d6 100%) !important;
  color: #3d321b !important;
  box-shadow: 0 2px 5px rgba(112, 78, 11, 0.06), 0 10px 22px rgba(112, 78, 11, 0.07) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group {
  border-color: #d9be67 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
  background: linear-gradient(90deg, #c68d15 0%, #e0b43f 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a {
  color: #5d4c29 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a:hover {
  border-color: #d8bb5c !important;
  background: linear-gradient(90deg, #fff2bc 0%, #f7dfa0 100%) !important;
  color: #3f3014 !important;
  box-shadow: inset 3px 0 0 #bd8312 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active .sidebar-item,
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: #c28b16 !important;
  background: linear-gradient(105deg, #f2ce67 0%, #e6b83f 70%, #d8a52b 100%) !important;
  color: #35270f !important;
  box-shadow: 0 6px 16px rgba(145, 96, 8, 0.18) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active :is(.sidebar-menu-icon, span, i) {
  color: #35270f !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar {
  border-bottom-color: #e5d39a !important;
  background: linear-gradient(90deg, rgba(255, 254, 247, 0.98) 0%, rgba(255, 247, 216, 0.98) 100%) !important;
  color: #4a3c20 !important;
  box-shadow: 0 2px 12px rgba(112, 78, 11, 0.07) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand) {
  border-color: #e5d39a !important;
  background: linear-gradient(180deg, #fffef7 0%, #fff4cb 100%) !important;
  color: #4f4022 !important;
  box-shadow: 0 1px 3px rgba(112, 78, 11, 0.07) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand):hover {
  border-color: #d1b45e !important;
  background: #ffeaa6 !important;
  color: #3f3014 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper {
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #352a16 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.muted, .muted-2, .tiny, .study-breadcrumbs, .study-breadcrumbs a, .study-breadcrumbs .divider) {
  color: #75643d !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.study-topbar, .guide_title, .profile-page-head) {
  border-bottom-color: #e5d39a !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .course-series-card, .recent-course, .recent-course-card,
  .my-stat-item, .my-filter-bar, .market-filter-card, .market-list-card,
  .mistake-course-card, .mistake-lesson-card, .mistake-stat, .mistake-summary-strip,
  .profile-hero, .profile-panel, .profile-stat-card, .profile-order-item,
  .partner-hero, .partner-plan-card, .partner-card, .partner-summary-card,
  .partner-entry, .partner-withdraw-panel, .partner-withdraw-card, .partner-withdraw-form-card,
  .recharge-panel, .tier-card, .recharge-summary, .benefit-table, .commitment-card,
  .course-series-hero, .course-series-section, .course-series-metric,
  .course-detail-hero-card, .rebate-toolbar, .partner-table, .rebate-summary-card,
  .home-focus, .home-metrics, .home-section, .market-toolbar, .market-notice-mini,
  .planL, .planR, .stay, .wordBox, .wordType li, .knowledge .type li,
  .Type li, .course > ul > li, .course-card, .word-lookup-box
) {
  border-color: #e5d39a !important;
  background: linear-gradient(145deg, #fffef7 0%, #fff8df 100%) !important;
  background-image: linear-gradient(145deg, #fffef7 0%, #fff8df 100%) !important;
  color: #4a3c20 !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .card, .card-solid, .panel-card, .section-card, .market-course-card,
  .guide-series-card, .course-series-card, .mistake-course-card, .mistake-lesson-card,
  .profile-panel, .partner-card, .tier-card, .Type li, .course > ul > li,
  .wordType li, .knowledge .type li
):hover {
  border-color: #d1b45e !important;
  box-shadow: var(--workspace-shadow-hover) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(input, textarea, select, .search-box, .market-search, .mycourses-search, .word-lookup-input) {
  border-color: #dfca85 !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8df 100%) !important;
  background-image: linear-gradient(180deg, #fffef8 0%, #fff8df 100%) !important;
  color: #3d321b !important;
  box-shadow: inset 0 1px 2px rgba(112, 78, 11, 0.055) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(input, textarea, select)::placeholder {
  color: #99865a !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(input, textarea, select, .search-box, .market-search, .mycourses-search, .word-lookup-input):focus-within {
  border-color: #bd8312 !important;
  box-shadow: 0 0 0 3px rgba(211, 161, 34, 0.20), inset 0 1px 2px rgba(112, 78, 11, 0.045) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .button.primary, button.primary, .home-primary-action, .profile-action--primary,
  .partner-actions .button.primary, .partner-entry .button.primary,
  .recharge-action--member, .recharge-action--partner, .recharge-action--wide,
  .word-lookup-btn, .market-filter-panel .chip.on, .Wtype span.on
) {
  border-color: #875406 !important;
  background: linear-gradient(105deg, #a96f0c 0%, #875406 100%) !important;
  background-image: linear-gradient(105deg, #a96f0c 0%, #875406 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(135, 84, 6, 0.18) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .recharge-tab.is-active, .tier-cycle.is-active, .payment-channel-pill.is-active,
  .profile-segmented__item.is-active, button[aria-pressed="true"]
) {
  border-color: #c18a16 !important;
  background: #f2ce67 !important;
  background-image: none !important;
  color: #3d2c0c !important;
  box-shadow: 0 4px 10px rgba(145, 96, 8, 0.13) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus {
  border-color: #dcc578 !important;
  background: linear-gradient(115deg, #fffef7 0%, #fff7d5 58%, #ffefb2 100%) !important;
  color: #352a16 !important;
  box-shadow: 0 2px 6px rgba(112, 78, 11, 0.07), 0 14px 32px rgba(112, 78, 11, 0.09) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus::before {
  background: linear-gradient(180deg, #bd8312 0%, #e0b43f 100%) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus__icon {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #8d5d09 !important;
  box-shadow: 0 6px 16px rgba(141, 93, 9, 0.12) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] :is(
  .home-focus__copy > span, .home-focus__progress > span, .home-focus__copy p
) {
  color: #75643d !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-progress-track {
  border-color: #e0cb89 !important;
  background: #f6e8b8 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-progress-track > span {
  background: linear-gradient(90deg, #bd8312 0%, #e0b43f 100%) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-periods {
  border-color: #e2ce8c !important;
  background: #fff1bd !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-sidebar .market-filter-panel {
  border-color: #e0ca83 !important;
  background: linear-gradient(145deg, #fffef7 0%, #fff5ce 100%) !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-section {
  border-color: #eadcae !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip {
  border-color: #e2cf8c !important;
  background: linear-gradient(180deg, #fffef7 0%, #fff2c1 100%) !important;
  color: #5d4c29 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip:hover {
  border-color: #d1b45e !important;
  background: #ffeaa6 !important;
  color: #3f3014 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-search > input,
html body[data-requires-auth="true"][data-view="market"] .market-search > input:focus {
  background: transparent !important;
  background-image: none !important;
  color: #3d321b !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .planBox .planT .pl,
html body[data-requires-auth="true"][data-view="vocab"] .plan .stay #planList .study-plan-card,
html body[data-requires-auth="true"][data-view="vocab"] .plan .wordBox .wordType li {
  border-color: #e0ca83 !important;
  background: linear-gradient(145deg, #fffef7 0%, #fff4c8 100%) !important;
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .planBox .planT .pl {
  color: #7f550a !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .wordBox .wordType .Wtype span,
html body[data-requires-auth="true"][data-view="vocab"] .plan .wordBox .wordType li :is(.tp1-status--available, .tp1-action) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #7f550a !important;
}

html body[data-requires-auth="true"][data-view="vocab"] .plan .wordBox .wordType li .tp1-status--active,
html body[data-requires-auth="true"][data-view="vocab"] .plan .wordBox .wordType li.is-active-plan .tp1-action {
  border-color: #d4b450 !important;
  background: #ffe69a !important;
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell,
html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper,
html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox {
  background:
    linear-gradient(112deg, rgba(218, 167, 35, 0.20) 0%, rgba(218, 167, 35, 0.04) 30%, transparent 49%),
    linear-gradient(248deg, rgba(246, 210, 104, 0.24) 0%, rgba(246, 210, 104, 0.05) 28%, transparent 47%),
    linear-gradient(180deg, #fffce9 0%, #fff3c2 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input,
html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-input {
  border-color: #d9bc60 !important;
  background: linear-gradient(145deg, #fffef8 0%, #fff4c8 100%) !important;
  background-image: linear-gradient(145deg, #fffef8 0%, #fff4c8 100%) !important;
  box-shadow: 0 18px 44px rgba(112, 78, 11, 0.12), inset 0 1px 0 #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-input:focus-within {
  border-color: #bd8312 !important;
  box-shadow: 0 0 0 4px rgba(211, 161, 34, 0.18), 0 20px 48px rgba(112, 78, 11, 0.13) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"] .word-lookup-icon {
  background: #fff0b2 !important;
  color: #8d5d09 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] {
  --recharge-free: #c49a2e;
  --recharge-member: #b7790b;
  --recharge-member-2: #d5a11f;
  --recharge-partner: #8f5b07;
  --recharge-partner-2: #c18712;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(
  .recharge-panel, .recharge-summary, .benefit-table, .recharge-modal,
  .recharge-modal__order, .recharge-modal__steps, .commitment-card
) {
  border-color: #e0ca83 !important;
  background: linear-gradient(145deg, #fffef7 0%, #fff5ce 100%) !important;
  background-image: linear-gradient(145deg, #fffef7 0%, #fff5ce 100%) !important;
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-panel::before {
  background: linear-gradient(90deg, rgba(236, 196, 77, 0.18) 0%, rgba(255, 236, 163, 0.22) 48%, rgba(214, 166, 43, 0.18) 100%) !important;
  opacity: 1 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-tabs,
html body[data-requires-auth="true"][data-view="upgrade"] .payment-channel-switch {
  border-color: #dfc879 !important;
  background: #fff1bd !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-state-pill--member,
html body[data-requires-auth="true"][data-view="upgrade"] :is(.tier-tag--recommend, .tier-tag--discount) {
  border-color: #d9bc60 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-state-pill--partner,
html body[data-requires-auth="true"][data-view="upgrade"] .tier-tag--limit {
  border-color: #cfaa3f !important;
  background: #ffe596 !important;
  color: #634005 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card--member {
  border-color: #d9bc60 !important;
  background: linear-gradient(145deg, #fffef7 0%, #fff4c8 100%) !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card--partner {
  border-color: #cfaa3f !important;
  background: linear-gradient(145deg, #fff9df 0%, #ffeeb0 100%) !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card.is-active {
  border-color: #a96f0c !important;
  box-shadow: 0 0 0 2px rgba(169, 111, 12, 0.10), 0 12px 28px rgba(112, 78, 11, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--label {
  background: #fffdf4 !important;
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--free {
  border-left-color: #eadba8 !important;
  background: #fffbe9 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--member {
  border-left-color: #e0ca83 !important;
  background: #fff5ce !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--partner {
  border-left-color: #d5b651 !important;
  background: #ffecaa !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row--head > :is(.benefit-col--free, .benefit-col--member, .benefit-col--partner),
html body[data-requires-auth="true"][data-view="upgrade"] .benefit-value,
html body[data-requires-auth="true"][data-view="upgrade"] .benefit-price-value {
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] :is(
  .partner-chip, .partner-status-pill, .partner-status-label, .partner-limit-tag, .partner-rebate-tag
) {
  border-color: #d9bc60 !important;
  background: #fff0b2 !important;
  color: #704706 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-plan-price strong,
html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-summary-card strong {
  color: #704706 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] :is(.course-level-pill, .course-inline-stat, .course-directory-total),
html body[data-requires-auth="true"][data-view="course-series"] :is(.course-series-tag, .course-series-pill) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #684205 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] :is(.course-inline-stat strong, .course-detail-desc, .course-lesson-name) {
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] :is(
  .course-inline-stat em, .course-lesson-desc, .course-lesson-meta, .course-directory-title > div > span
) {
  color: #75643d !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] :is(
  .mistake-pager a, .mistake-pager span, .mistake-filter button, .mistake-summary-strip
) {
  border-color: #e0ca83 !important;
  background: #fff8df !important;
  color: #5d4c29 !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] :is(.mistake-pager .on, .mistake-filter button.on) {
  border-color: #a96f0c !important;
  background: #f2ce67 !important;
  color: #3d2c0c !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(
  .profile-badge, .profile-pill, .profile-status-pill, .profile-segmented,
  .profile-field input, .profile-password-panel, .profile-identity-line,
  .profile-security-row, .profile-order-item, .profile-invite-item, .profile-empty
) {
  border-color: #e2cf8c !important;
  background: #fff8df !important;
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-modal-mask {
  background: rgba(83, 58, 10, 0.34) !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-modal {
  border-color: #d9bc60 !important;
  background: #fffdf4 !important;
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"] :is(.api-loading-overlay, .page-loading-overlay, .loading-overlay) {
  background: rgba(255, 249, 221, 0.88) !important;
  color: #5d4c29 !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .container-fuild.study-shell > .study-sidebar.sidebar-wrapper {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .container-fuild.study-shell > .study-sidebar.sidebar-wrapper > .sidebar {
    grid-column: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .container-fuild.study-shell > .study-sidebar.sidebar-wrapper > .userinfo {
    grid-column: 2 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper {
    border-bottom-color: #dfc879 !important;
    background: linear-gradient(90deg, #fff8d5 0%, #f9e8a1 100%) !important;
    box-shadow: 0 2px 12px rgba(112, 78, 11, 0.09) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
    background: linear-gradient(180deg, #c68d15 0%, #e0b43f 100%) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar {
    border-bottom-color: #e5d39a !important;
    background: linear-gradient(90deg, #fffef7 0%, #fff4cb 100%) !important;
  }
}

/* Final warm-theme corrections for legacy high-specificity page rules. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell > :is(.main-wrapper, .study-main) {
  background:
    linear-gradient(108deg, rgba(218, 167, 35, 0.15) 0%, transparent 31%),
    linear-gradient(252deg, rgba(246, 210, 104, 0.20) 0%, transparent 30%),
    linear-gradient(180deg, rgba(255, 252, 233, 0.98) 0%, rgba(255, 245, 202, 0.98) 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .main-wrapper a:not(:is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager) a) {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] :is(
  .home-metric__icon, .home-task__icon, .home-icon-button, .dashboard-icon-button
) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #875406 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-period-tab.is-active {
  border-color: #bd8312 !important;
  background: #f2ce67 !important;
  color: #3d2c0c !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(.level-badge, .market-course-card .badge) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(.pages, .pager, .pagination) a {
  border-color: #dfca85 !important;
  background: #fffdf4 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(.pages, .pager, .pagination) a.on {
  border-color: #875406 !important;
  background: #a96f0c !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .wordBox .wordType .Wtype span.on,
html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .planBox .planT p span.on {
  border-color: #875406 !important;
  background: #a96f0c !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan :is(.planBox .planT .pl0 i, .stay > i) {
  color: #875406 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .wordBox .wordType li :is(.tp1-status--available, .tp1-action) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card {
  border-color: #e0ca83 !important;
  background: #fffdf4 !important;
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card.is-active {
  border-color: #bd8312 !important;
  background: #f2ce67 !important;
  color: #3d2c0c !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .cycle-card :is(strong, span, em),
html body[data-requires-auth="true"][data-view="upgrade"] .recharge-help a {
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] .partner-hero__eyebrow {
  border-color: #d9bc60 !important;
  background: #fff0b2 !important;
  color: #704706 !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] .course-card .course-visual {
  background: linear-gradient(135deg, #f2ce67 0%, #d8a52b 100%) !important;
  color: #3d2c0c !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] .course-practice-link {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"] .knowledge .type li :is(.bgic, p small i) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #875406 !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"] .knowledge .type li a {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(
  .profile-hero__eyebrow, .profile-panel__eyebrow, .profile-stat-card__label,
  .profile-link
) {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="profile"] :is(
  .profile-action--secondary, .profile-copy-button
) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="guide"] :is(
  .guide_title label, .guide_title label i, .TypeTitle label, .TypeTitle a,
  .series-meta, .Type li .play-overlay
) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="guide"] .guide_title .groupBox span.on {
  border-color: #bd8312 !important;
  background: #f2ce67 !important;
  color: #3d2c0c !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-lesson-index {
  border-color: #875406 !important;
  background: #a96f0c !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-lesson-level-pill {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) {
  --flat-bg: #fff8d8;
  --flat-surface: #fffdf4;
  --flat-surface-2: #fff6d2;
  --flat-text: #4a3c20;
  --flat-text-strong: #352a16;
  --flat-muted: #75643d;
  --flat-border: #e5d39a;
  --flat-primary: #a96f0c;
  color: #4a3c20 !important;
  color-scheme: light !important;
  background: linear-gradient(112deg, rgba(218, 167, 35, 0.18) 0%, transparent 36%), linear-gradient(248deg, rgba(246, 210, 104, 0.22) 0%, transparent 34%), linear-gradient(180deg, #fffce9 0%, #fff2bd 100%) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(
  .site-header, .section, .section-band, .site-footer, main
) {
  border-color: #e2cf8c !important;
  background: transparent !important;
  color: #4a3c20 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .site-header {
  background: rgba(255, 249, 221, 0.94) !important;
  box-shadow: 0 2px 12px rgba(112, 78, 11, 0.07) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(
  .card, .card-solid, .feature-card, .stat
) {
  border-color: #e2cf8c !important;
  background: linear-gradient(145deg, #fffef7 0%, #fff6d2 100%) !important;
  color: #4a3c20 !important;
  box-shadow: 0 12px 28px rgba(112, 78, 11, 0.09) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(h1, h2, h3, strong, .brand, .nav a) {
  color: #352a16 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(p, .section-title p, .copyright) {
  color: #75643d !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(.eyebrow, .nav a.on) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .button.secondary {
  border-color: #dfc879 !important;
  background: #fff8df !important;
  color: #684205 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .button.primary {
  border-color: #875406 !important;
  background: linear-gradient(105deg, #a96f0c 0%, #875406 100%) !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"]
.container-fuild.study-shell > .main-wrapper .knowledge .type li label {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #875406 !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"]
.container-fuild.study-shell > .main-wrapper .knowledge .type li a {
  color: #754b07 !important;
}

html body[data-requires-auth="true"][data-view="vocab"]
.container-fuild.study-shell > .main-wrapper .plan .planBox .planR .calendar .days p label span {
  background: #fff8df !important;
  color: #6e5c35 !important;
}

html body[data-requires-auth="true"][data-view="guide"]
.container-fuild.study-shell > .main-wrapper :is(
  .guide_title label, .guide_title label i, .TypeTitle a, .Type li .play-overlay, .series-meta
) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #754b07 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card .icon {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #875406 !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(
  .market-loading-icon, .market-empty i, .market-skeleton i
) {
  color: #a96f0c !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(
  .market-loading span, .market-empty span, .market-skeleton span
) {
  color: #75643d !important;
}

html body[data-requires-auth="true"][data-view="guide"] .guide_title .groupBox span {
  color: #6e5c35 !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] :is(
  .ri-delete-bin-line, .ri-robot-2-line, .icon-a-DarkTheme
) {
  color: #007ede !important;
}

html body[data-requires-auth="true"][data-view="course-detail"] :is(
  .course-badge, .course-level-pill, .course-inline-stat,
  .course-series-hero .eyebrow
) {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="course-detail"] :is(
  .course-badge, .course-level-pill, .course-inline-stat
) :is(i, strong, em) {
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="course-series"] .course-series-hero .eyebrow {
  border: 1px solid #dfc879 !important;
  background: #fff0b2 !important;
  color: #684205 !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-search > svg {
  color: #8c7849 !important;
  stroke: currentColor !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(
  .commitment-card--speed, .commitment-card--research
) svg {
  color: #875406 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) :is(
  .study-shell,
  .study-sidebar.sidebar-wrapper,
  .study-sidebar.sidebar-wrapper .sidebar,
  .study-sidebar.sidebar-wrapper .sidebar li,
  .study-sidebar.sidebar-wrapper .sidebar-item,
  .study-sidebar.sidebar-wrapper .logo-wordmark,
  .study-sidebar.sidebar-wrapper .sidebar-item a i,
  .study-sidebar.sidebar-wrapper .userinfo,
  .study-sidebar.sidebar-wrapper .UserImg,
  .study-sidebar.sidebar-wrapper .UserImg b,
  .study-sidebar.sidebar-wrapper .UserImg i
) {
  color: #4a3c20 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-sidebar.sidebar-wrapper .UserImg img {
  border-color: #dfc879 !important;
  background: #fff0b2 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper .button.secondary {
  border-color: #dfc879 !important;
  background: #fff8df !important;
  color: #684205 !important;
  box-shadow: 0 5px 12px rgba(112, 78, 11, 0.08) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .menu-toggle {
  border-color: #d9bc60 !important;
  background: #fff0b2 !important;
  color: #684205 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .site-footer {
  border-color: #dec678 !important;
  background: linear-gradient(180deg, #fff8df 0%, #ffedaa 100%) !important;
  color: #4a3c20 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .site-footer .copyright {
  border-color: #dfc879 !important;
  color: #75643d !important;
}

/* 2026-07-18: lighter content workspace with restrained per-page accents. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  --page-accent: #397c72;
  --page-accent-2: #c36b55;
  --page-accent-soft: #e7f3f0;
  --page-accent-border: #b8d6cf;
  --page-wash-a: rgba(57, 124, 114, 0.09);
  --page-wash-b: rgba(195, 107, 85, 0.055);
  --flat-bg: #faf9f5;
  --flat-surface: #fffefa;
  --flat-surface-2: #f6f4ef;
  --flat-text: #454139;
  --flat-text-strong: #332f28;
  --flat-muted: #716b60;
  --flat-muted-2: #8a8377;
  --flat-border: #e5e0d7;
  --flat-border-soft: #efebe4;
  --flat-primary: var(--page-accent);
  --flat-primary-hover: var(--page-accent);
  --flat-primary-soft: var(--page-accent-soft);
  --flat-primary-border: var(--page-accent-border);
  --workspace-shadow: 0 2px 5px rgba(65, 58, 47, 0.035), 0 10px 24px rgba(65, 58, 47, 0.055);
  --workspace-shadow-hover: 0 3px 7px rgba(65, 58, 47, 0.045), 0 14px 30px rgba(65, 58, 47, 0.075);
  --workspace-border: #e5e0d7;
  --workspace-border-strong: var(--page-accent-border);
  --mainBox: #fffefa;
  --bgwhite: #fffefa;
  --bgf9f9f9: #f6f4ef;
  --bgf8fafc: #f7f6f2;
  --bordere8e9eb: #e5e0d7;
  --bordere4e9f1: #e5e0d7;
  --borderf2f6f9: #efebe4;
  --maincolor: var(--page-accent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--page-accent) 18%, transparent);
  background: #faf9f5 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"]:not([data-view="practice"]) {
  --page-accent: #4679a5;
  --page-accent-2: #3d7c5b;
  --page-accent-soft: #eaf3f8;
  --page-accent-border: #bed1df;
  --page-wash-a: rgba(70, 121, 165, 0.10);
  --page-wash-b: rgba(61, 124, 91, 0.05);
}

html body[data-requires-auth="true"][data-view="my-courses"]:not([data-view="practice"]) {
  --page-accent: #347c72;
  --page-accent-2: #4a7898;
  --page-accent-soft: #eaf5f2;
  --page-accent-border: #b9d6cf;
  --page-wash-a: rgba(52, 124, 114, 0.10);
  --page-wash-b: rgba(74, 120, 152, 0.05);
}

html body[data-requires-auth="true"][data-view="market"]:not([data-view="practice"]) {
  --page-accent: #4c6fa8;
  --page-accent-2: #3c877b;
  --page-accent-soft: #eef3fa;
  --page-accent-border: #c5d0e0;
  --page-wash-a: rgba(76, 111, 168, 0.095);
  --page-wash-b: rgba(60, 135, 123, 0.05);
}

html body[data-requires-auth="true"][data-view="guide"]:not([data-view="practice"]) {
  --page-accent: #b96853;
  --page-accent-2: #527d49;
  --page-accent-soft: #faeee9;
  --page-accent-border: #dfc4bc;
  --page-wash-a: rgba(185, 104, 83, 0.09);
  --page-wash-b: rgba(82, 125, 73, 0.05);
}

html body[data-requires-auth="true"][data-view="course-series"]:not([data-view="practice"]) {
  --page-accent: #71629a;
  --page-accent-2: #43868f;
  --page-accent-soft: #f1eef8;
  --page-accent-border: #d0c9df;
  --page-wash-a: rgba(113, 98, 154, 0.085);
  --page-wash-b: rgba(67, 134, 143, 0.05);
}

html body[data-requires-auth="true"][data-view="course-detail"]:not([data-view="practice"]),
html body[data-requires-auth="true"][data-view="course-market-detail"]:not([data-view="practice"]) {
  --page-accent: #626f98;
  --page-accent-2: #4e8a7c;
  --page-accent-soft: #eef0f7;
  --page-accent-border: #c9cede;
  --page-wash-a: rgba(98, 111, 152, 0.09);
  --page-wash-b: rgba(78, 138, 124, 0.05);
}

html body[data-requires-auth="true"][data-view="mistake-book"]:not([data-view="practice"]) {
  --page-accent: #a95049;
  --page-accent-2: #b9883f;
  --page-accent-soft: #faecea;
  --page-accent-border: #e2c1bd;
  --page-wash-a: rgba(169, 80, 73, 0.095);
  --page-wash-b: rgba(185, 136, 63, 0.05);
}

html body[data-requires-auth="true"][data-view="vocab"]:not([data-view="practice"]) {
  --page-accent: #437c5a;
  --page-accent-2: #4c819c;
  --page-accent-soft: #e9f3ed;
  --page-accent-border: #bed5c6;
  --page-wash-a: rgba(67, 124, 90, 0.095);
  --page-wash-b: rgba(76, 129, 156, 0.05);
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"]) {
  --page-accent: #477d9c;
  --page-accent-2: #b86b57;
  --page-accent-soft: #e9f2f7;
  --page-accent-border: #bed2de;
  --page-wash-a: rgba(71, 125, 156, 0.10);
  --page-wash-b: rgba(184, 107, 87, 0.05);
}

html body[data-requires-auth="true"][data-view="invite-leaderboard"]:not([data-view="practice"]) {
  --page-accent: #5a7095;
  --page-accent-2: #3f8778;
  --page-accent-soft: #edf0f6;
  --page-accent-border: #c6cedd;
  --page-wash-a: rgba(90, 112, 149, 0.09);
  --page-wash-b: rgba(63, 135, 120, 0.05);
}

html body[data-requires-auth="true"][data-view="upgrade"]:not([data-view="practice"]) {
  --page-accent: #976316;
  --page-accent-2: #4f8278;
  --page-accent-soft: #f8f0dc;
  --page-accent-border: #ddc99d;
  --page-wash-a: rgba(151, 99, 22, 0.09);
  --page-wash-b: rgba(79, 130, 120, 0.05);
}

html body[data-requires-auth="true"][data-view="partner-recruit"]:not([data-view="practice"]) {
  --page-accent: #2f7d68;
  --page-accent-2: #aa6348;
  --page-accent-soft: #eaf5f0;
  --page-accent-border: #b8d5cb;
  --page-wash-a: rgba(47, 125, 104, 0.095);
  --page-wash-b: rgba(170, 99, 72, 0.05);
}

html body[data-requires-auth="true"][data-view="promotion-rebate"]:not([data-view="practice"]) {
  --page-accent: #367c6c;
  --page-accent-2: #b76954;
  --page-accent-soft: #e8f3ef;
  --page-accent-border: #bcd5cd;
  --page-wash-a: rgba(54, 124, 108, 0.10);
  --page-wash-b: rgba(183, 105, 84, 0.05);
}

html body[data-requires-auth="true"][data-view="profile"]:not([data-view="practice"]) {
  --page-accent: #557b9e;
  --page-accent-2: #bf6f5b;
  --page-accent-soft: #ebf1f7;
  --page-accent-border: #c2d0de;
  --page-wash-a: rgba(85, 123, 158, 0.095);
  --page-wash-b: rgba(191, 111, 91, 0.05);
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell,
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:
    linear-gradient(118deg, var(--page-wash-a) 0%, transparent 24%),
    linear-gradient(242deg, var(--page-wash-b) 0%, transparent 22%),
    linear-gradient(180deg, #fffefa 0%, #f8f7f3 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper {
  background: linear-gradient(180deg, #fff8d5 0%, #fff0b8 54%, #f9e8a1 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar {
  border-bottom-color: #e6e0d7 !important;
  background: rgba(255, 254, 250, 0.97) !important;
  box-shadow: 0 2px 10px rgba(65, 58, 47, 0.045) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand) {
  border-color: #e5e0d7 !important;
  background: #fffefa !important;
  color: #454139 !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand):hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-link.is-active {
  border-color: var(--page-accent-border) !important;
  background: var(--page-accent-soft) !important;
  color: var(--page-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .course-series-card, .recent-course, .recent-course-card,
  .my-stat-item, .my-filter-bar, .market-filter-card, .market-list-card,
  .mistake-course-card, .mistake-lesson-card, .mistake-stat, .mistake-summary-strip,
  .profile-hero, .profile-panel, .profile-stat-card, .profile-order-item,
  .partner-hero, .partner-plan-card, .partner-card, .partner-summary-card,
  .partner-entry, .partner-withdraw-panel, .partner-withdraw-card, .partner-withdraw-form-card,
  .recharge-panel, .tier-card, .recharge-summary, .benefit-table, .commitment-card,
  .course-series-hero, .course-series-section, .course-series-metric,
  .course-detail-hero-card, .rebate-toolbar, .partner-table, .rebate-summary-card,
  .home-focus, .home-metrics, .home-section, .market-toolbar, .market-notice-mini,
  .planL, .planR, .stay, .wordBox, .wordType li, .knowledge .type li,
  .Type li, .course > ul > li, .course-card, .word-lookup-box
) {
  border-color: #e5e0d7 !important;
  background: #fffefa !important;
  background-image: none !important;
  color: #454139 !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  input, textarea, select, .search-box, .market-search, .mycourses-search,
  .word-lookup-input, .chip, .profile-segmented, .recharge-tabs,
  .payment-channel-switch, .cycle-card
) {
  border-color: #e3ded5 !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #454139 !important;
  box-shadow: inset 0 1px 2px rgba(65, 58, 47, 0.035) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  input, textarea, select, .search-box, .market-search, .mycourses-search,
  .word-lookup-input
):focus-within {
  border-color: var(--page-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--page-accent) 16%, transparent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .button.primary, button.primary, .home-primary-action, .profile-action--primary,
  .partner-actions .button.primary, .partner-entry .button.primary,
  .recharge-action--member, .recharge-action--partner, .recharge-action--wide,
  .word-lookup-btn, .market-filter-panel .chip.on, .Wtype span.on
) {
  border-color: var(--page-accent) !important;
  background: var(--page-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px color-mix(in srgb, var(--page-accent) 20%, transparent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .recharge-tab.is-active, .tier-cycle.is-active, .payment-channel-pill.is-active,
  .profile-segmented__item.is-active, button[aria-pressed="true"],
  .market-filter-panel .chip.on, .guide_title .groupBox span.on
) {
  border-color: var(--page-accent-border) !important;
  background: var(--page-accent-soft) !important;
  background-image: none !important;
  color: var(--page-accent) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .eyebrow, .course-badge, .course-level-pill, .course-inline-stat,
  .profile-hero__eyebrow, .profile-panel__eyebrow, .partner-hero__eyebrow,
  .recharge-state-pill, .tier-tag, .series-meta, .course-series-tag,
  .course-series-pill, .market-notice-mini i
) {
  border-color: var(--page-accent-border) !important;
  background: var(--page-accent-soft) !important;
  color: var(--page-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .home-focus, .market-filter-panel, .guide_title, .course-series-hero,
  .course-detail-hero-card, .mistake-summary-strip, .planL,
  .word-lookup-box, .recharge-panel, .partner-hero, .rebate-toolbar,
  .profile-hero
) {
  border-top: 3px solid var(--page-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .home-focus__icon, .home-metric__icon, .home-task__icon,
  .word-lookup-icon, .course-directory-icon, .profile-stat-card__icon
) {
  border-color: var(--page-accent-border) !important;
  background: var(--page-accent-soft) !important;
  color: var(--page-accent) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.study-topbar, .guide_title, .profile-page-head) {
  border-bottom-color: color-mix(in srgb, var(--page-accent) 24%, #e5e0d7) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-focus::before,
html body[data-requires-auth="true"][data-view="dashboard"] .home-progress-track > span {
  background: var(--page-accent) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-progress-track,
html body[data-requires-auth="true"][data-view="dashboard"] .home-periods {
  border-color: var(--page-accent-border) !important;
  background: var(--page-accent-soft) !important;
}

html body[data-requires-auth="true"][data-view="market"] .market-sidebar .market-filter-panel,
html body[data-requires-auth="true"][data-view="market"] .market-filter-panel .chip,
html body[data-requires-auth="true"][data-view="vocab-search"] :is(.word-lookup-input, .word-lookup-box),
html body[data-requires-auth="true"][data-view="upgrade"] :is(.recharge-panel, .tier-card),
html body[data-requires-auth="true"][data-view="partner-recruit"] :is(.partner-hero, .partner-card) {
  background: #fffefa !important;
  background-image: none !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"] .knowledge .type li:nth-child(4n + 1) {
  border-top: 3px solid #5a7095 !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"] .knowledge .type li:nth-child(4n + 2) {
  border-top: 3px solid #3f8778 !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"] .knowledge .type li:nth-child(4n + 3) {
  border-top: 3px solid #b56c55 !important;
}

html body[data-requires-auth="true"][data-view="knowledge-base"] .knowledge .type li:nth-child(4n) {
  border-top: 3px solid #8a7349 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-metric__icon--blue {
  border-color: #bfd1df !important;
  background: #eaf3f8 !important;
  color: #4679a5 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] .home-metric__icon--cyan {
  border-color: #b8d8d3 !important;
  background: #e8f5f3 !important;
  color: #347f78 !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] :is(.home-metric__icon--green, .home-task__icon--green) {
  border-color: #bfd8c8 !important;
  background: #eaf5ee !important;
  color: #3d7c5b !important;
}

html body[data-requires-auth="true"][data-view="dashboard"] :is(.home-metric__icon--amber, .home-task__icon--amber) {
  border-color: #e5cfaa !important;
  background: #fff4e2 !important;
  color: #a96e20 !important;
}

html body[data-requires-auth="true"][data-view="my-courses"] :is(
  .progress-bar-fill, .continue-btn
) {
  border-color: #347c72 !important;
  background: #347c72 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="my-courses"] .lesson-tag {
  border-color: #b9d6cf !important;
  background: #eaf5f2 !important;
  color: #347c72 !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(
  .market-pages .on, .market-filter-panel .chip.on
) {
  border-color: #4c6fa8 !important;
  background: #4c6fa8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(.level-badge, .market-course-card .badge) {
  border-color: #c5d0e0 !important;
  background: #eef3fa !important;
  color: #4c6fa8 !important;
}

html body[data-requires-auth="true"][data-view="guide"] :is(
  .guide_title .groupBox span.on, .series-meta, .Type li .play-overlay, .TypeTitle a
) {
  border-color: #dfc4bc !important;
  background: #faeee9 !important;
  color: #a95140 !important;
}

html body[data-requires-auth="true"][data-view="course-series"] :is(
  .course-series-hero .eyebrow, .course-series-tag, .course-series-pill
) {
  border-color: #d0c9df !important;
  background: #f1eef8 !important;
  color: #66558f !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat--purple i,
html body[data-requires-auth="true"][data-view="course-detail"] .course-inline-stat--purple i {
  color: #775d96 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat--green i,
html body[data-requires-auth="true"][data-view="course-detail"] .course-inline-stat--green i {
  color: #3a7b62 !important;
}

html body[data-requires-auth="true"] [data-course-market-detail-page] .course-inline-stat--teal i,
html body[data-requires-auth="true"][data-view="course-detail"] .course-inline-stat--teal i {
  color: #347b83 !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] :is(
  .mistake-pager .on, .mistake-filter button.on, .course-practice-link
) {
  border-color: #a95049 !important;
  background: #a95049 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab"] :is(
  .tp1-status--active, .wordType li.is-active-plan .tp1-action,
  .Wtype span.on, .planT p span.on
) {
  border-color: #437c5a !important;
  background: #437c5a !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card--member {
  border-top: 3px solid #486fa8 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-card--partner {
  border-top: 3px solid #7d5b8e !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] :is(
  .recharge-state-pill--member, .tier-tag--recommend
) {
  border-color: #c4d0e2 !important;
  background: #eef3fa !important;
  color: #486fa8 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .tier-tag--discount,
html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--partner {
  border-color: #d1c5d8 !important;
  background: #f4eff7 !important;
  color: #6f507f !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .benefit-row > .benefit-col--member {
  border-color: #c4d0e2 !important;
  background: #eef3fa !important;
  color: #486fa8 !important;
}

html body[data-requires-auth="true"][data-view="partner-recruit"] :is(
  .partner-rebate-tag, .partner-hero__eyebrow, .partner-plan-price strong
) {
  border-color: #b8d5cb !important;
  background: #eaf5f0 !important;
  color: #2f7d68 !important;
}

html body[data-requires-auth="true"][data-view="promotion-rebate"] .rebate-summary-card:nth-child(3n + 1) {
  border-top: 3px solid #367c6c !important;
}

html body[data-requires-auth="true"][data-view="promotion-rebate"] .rebate-summary-card:nth-child(3n + 2) {
  border-top: 3px solid #557b9e !important;
}

html body[data-requires-auth="true"][data-view="promotion-rebate"] .rebate-summary-card:nth-child(3n) {
  border-top: 3px solid #b76954 !important;
}

html body[data-requires-auth="true"][data-view="profile"] .profile-badge--member {
  border-color: #c2d0de !important;
  background: #ebf1f7 !important;
  color: #557b9e !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) {
  background:
    linear-gradient(135deg, rgba(47, 143, 131, 0.055) 0%, transparent 32%),
    linear-gradient(225deg, rgba(63, 130, 184, 0.05) 0%, transparent 30%),
    linear-gradient(180deg, #fffefb 0%, #fffaf2 100%) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(
  .card, .card-solid, .feature-card, .stat, .section-card, .panel-card
) {
  border-color: #e9e1d2 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(85, 68, 43, 0.075) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card.blue {
  border-top: 3px solid #3f82b8 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card.yellow {
  border-top: 3px solid #c96b58 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card.green {
  border-top: 3px solid #2f8f83 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card.blue .icon {
  border-color: #bfd7e8 !important;
  background: #edf6fd !important;
  color: #3f82b8 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card.yellow .icon {
  border-color: #e4c6bf !important;
  background: #fff0ec !important;
  color: #b95c49 !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) .feature-card.green .icon {
  border-color: #bcd9d3 !important;
  background: #eaf7f4 !important;
  color: #2f8f83 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell {
  background:
    linear-gradient(118deg, var(--page-wash-a) 0%, transparent 24%),
    linear-gradient(242deg, var(--page-wash-b) 0%, transparent 22%),
    linear-gradient(180deg, #fffefa 0%, #f8f7f3 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-box > .word-lookup-input {
  border-color: #bed2de !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 26px rgba(71, 125, 156, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .word-lookup-box > .word-lookup-input:focus-within {
  border-color: #477d9c !important;
  box-shadow: 0 0 0 3px rgba(71, 125, 156, 0.14), 0 12px 28px rgba(71, 125, 156, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="market"] :is(
  .market-loading-icon, .market-empty i, .market-skeleton i
) {
  color: #4c6fa8 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"] .recharge-panel::before {
  background: linear-gradient(90deg, rgba(72, 111, 168, 0.065) 0%, transparent 48%, rgba(125, 91, 142, 0.06) 100%) !important;
  opacity: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > :is(.main-wrapper, .study-main),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > :is(.main-wrapper, .study-main) {
  background:
    linear-gradient(118deg, rgba(222, 174, 37, 0.15) 0%, rgba(222, 174, 37, 0.035) 27%, transparent 44%),
    linear-gradient(242deg, rgba(246, 210, 104, 0.16) 0%, rgba(246, 210, 104, 0.04) 25%, transparent 42%),
    linear-gradient(180deg, #fffdf6 0%, #fff8df 58%, #fffbed 100%) !important;
  background-attachment: fixed !important;
}

/* 2026-07-19: monochrome whale brand accents. */
:root {
  --brand-accent: #007EDE;
  --brand-accent-strong: #007EDE;
  --brand-accent-soft: #e8f2f5;
  --brand-accent-border: #b7d1db;
  --brand-accent-wash: rgba(0, 126, 222, 0.07);
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  --page-accent: var(--brand-accent);
  --page-accent-2: var(--brand-accent);
  --page-accent-soft: var(--brand-accent-soft);
  --page-accent-border: var(--brand-accent-border);
  --page-wash-a: rgba(0, 126, 222, 0.065);
  --page-wash-b: rgba(0, 126, 222, 0.04);
  --flat-primary: var(--brand-accent);
  --flat-primary-hover: var(--brand-accent-strong);
  --flat-primary-soft: var(--brand-accent-soft);
  --flat-primary-border: var(--brand-accent-border);
  --maincolor: var(--brand-accent);
  --focus: 0 0 0 3px rgba(0, 126, 222, 0.15);
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.container-fuild.study-shell, .container-fuild.study-shell > .main-wrapper, .container-fuild.study-shell > .study-main) {
  background:
    linear-gradient(118deg, rgba(0, 126, 222, 0.065) 0%, transparent 25%),
    linear-gradient(242deg, rgba(224, 179, 51, 0.105) 0%, transparent 23%),
    linear-gradient(180deg, #fffdf6 0%, #fff8df 58%, #fffbed 100%) !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])::selection,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) *::selection {
  background: rgba(0, 126, 222, 0.24) !important;
  color: #0a3548 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])::-webkit-scrollbar-thumb {
  border-color: #fff4c8 !important;
  background: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .logo-wordmark {
  color: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
  background: linear-gradient(90deg, var(--brand-accent) 0%, rgba(0, 126, 222, 0.28) 100%) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) .sidebar-item a:hover {
  border-color: var(--brand-accent-border) !important;
  background: rgba(232, 242, 245, 0.72) !important;
  color: var(--brand-accent-strong) !important;
  box-shadow: inset 3px 0 0 var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active .sidebar-item,
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(--brand-accent) !important;
  background: var(--brand-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(0, 126, 222, 0.20) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active :is(.sidebar-menu-icon, span, i) {
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar :is(.study-utility-link, .study-utility-brand):hover,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-link.is-active {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  color: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper a:not(.button):not(:is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager) a) {
  color: var(--brand-accent-strong) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  input, textarea, select, .search-box, .market-search, .mycourses-search,
  .word-lookup-input
):focus,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  input, textarea, select, .search-box, .market-search, .mycourses-search,
  .word-lookup-input
):focus-within {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 126, 222, 0.15) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .button.primary, button.primary, .home-primary-action, .profile-action--primary,
  .partner-actions .button.primary, .partner-entry .button.primary,
  .recharge-action--member, .recharge-action--partner, .recharge-action--wide,
  .word-lookup-btn, .continue-btn, .market-pages .on, .pages .on,
  .mistake-pager .on, .mistake-filter button.on, .course-practice-link,
  .Wtype span.on, .planT p span.on
) {
  border-color: var(--brand-accent) !important;
  background: var(--brand-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px rgba(0, 126, 222, 0.20) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .button.secondary, .profile-action--secondary, .profile-copy-button,
  .chip.on, .chip.active, .category-btn.on, .recharge-tab.is-active,
  .tier-cycle.is-active, .profile-segmented__item.is-active,
  button[aria-pressed="true"], .guide_title .groupBox span.on
) {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  background-image: none !important;
  color: var(--brand-accent) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .eyebrow, .course-badge, .course-level-pill, .course-inline-stat,
  .profile-hero__eyebrow, .profile-panel__eyebrow, .partner-hero__eyebrow,
  .recharge-state-pill, .tier-tag, .series-meta, .course-series-tag,
  .course-series-pill, .market-notice-mini i, .lesson-tag, .level-badge,
  .market-course-card .badge, .profile-badge--member, .partner-rebate-tag,
  .tp1-status--available, .tp1-action
) {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  color: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .home-focus, .market-filter-panel, .guide_title, .course-series-hero,
  .course-detail-hero-card, .mistake-summary-strip, .planL,
  .word-lookup-box, .recharge-panel, .partner-hero, .rebate-toolbar,
  .profile-hero, .knowledge .type li, .tier-card, .commitment-card,
  .rebate-summary-card, .feature-card
) {
  border-top-color: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .home-focus__icon, .home-metric__icon, .home-task__icon,
  .word-lookup-icon, .course-directory-icon, .profile-stat-card__icon,
  .knowledge .type li .bgic, .knowledge .type li p small i
) {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  color: var(--brand-accent) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .course-inline-stat--purple i, .course-inline-stat--green i,
  .course-inline-stat--teal i, .planBox .planT .pl0 i, .stay > i,
  .market-loading-icon, .market-empty i, .market-skeleton i
) {
  color: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .home-progress-track > span, .progress-bar-fill, .dashboard-hero-bar-line i,
  .course-progress-fill
) {
  background: var(--brand-accent) !important;
  background-image: none !important;
}

html body[data-view] :is(
  .app-loading-overlay__spinner, .profile-empty__spinner, .rebate-empty__spinner
) {
  border-color: var(--brand-accent-border) !important;
  border-top-color: var(--brand-accent) !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] :is(
  .mistake-hero__copy h1, .mistake-hero--compact .mistake-stat-body strong
) {
  color: #332f28 !important;
}

html body[data-requires-auth="true"][data-view="mistake-book"] :is(
  .mistake-hero--compact .dashboard-hero-stat,
  .pages.mistake-pages a
) {
  border-color: var(--brand-accent-border) !important;
  background: #fffefa !important;
  color: #454139 !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]
.main-wrapper .payment-channel-switch .payment-channel-pill.is-active[data-payment-channel="wechat"] {
  border-color: #147a5a !important;
  background: #147a5a !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]
.main-wrapper .payment-channel-switch .payment-channel-pill.is-active[data-payment-channel="alipay"] {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .recharge-panel
.payment-channel-switch > button.payment-channel-pill.is-active[data-payment-channel="wechat"][aria-pressed="true"] {
  border-color: #147a5a !important;
  background: #147a5a !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper .recharge-panel
.payment-channel-switch > button.payment-channel-pill.is-active[data-payment-channel="alipay"][aria-pressed="true"] {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper .word-lookup-input {
  border-color: var(--brand-accent-border) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 26px rgba(0, 126, 222, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper .word-lookup-input:focus-within {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 126, 222, 0.14), 0 12px 28px rgba(0, 126, 222, 0.10) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) {
  --flat-primary: var(--brand-accent);
  --maincolor: var(--brand-accent);
  background:
    linear-gradient(135deg, rgba(0, 126, 222, 0.06) 0%, transparent 34%),
    linear-gradient(225deg, rgba(224, 179, 51, 0.10) 0%, transparent 32%),
    linear-gradient(180deg, #fffefb 0%, #fff8e8 100%) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(
  .feature-card.blue, .feature-card.yellow, .feature-card.green
) {
  border-top-color: var(--brand-accent) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(
  .feature-card.blue .icon, .feature-card.yellow .icon, .feature-card.green .icon,
  .eyebrow, .nav a.on
) {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  color: var(--brand-accent) !important;
}

html body:not([data-view]):not(.login-page):not(.terms-page) :is(
  .button.primary, .button.secondary
) {
  border-color: var(--brand-accent) !important;
  background: var(--brand-accent) !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]:not([data-view="practice"])
.study-shell > .main-wrapper .recharge-panel
.payment-channel-switch > button.payment-channel-pill.is-active[data-payment-channel="wechat"][aria-pressed="true"] {
  border-color: #147a5a !important;
  background: #147a5a !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="upgrade"]:not([data-view="practice"])
.study-shell > .main-wrapper .recharge-panel
.payment-channel-switch > button.payment-channel-pill.is-active[data-payment-channel="alipay"][aria-pressed="true"] {
  border-color: #2f67d8 !important;
  background: #2f67d8 !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell
.word-lookup-box > .word-lookup-input {
  border-color: var(--brand-accent-border) !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 10px 26px rgba(0, 126, 222, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth.word-lookup-shell
.word-lookup-box > .word-lookup-input:focus-within {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 126, 222, 0.14), 0 12px 28px rgba(0, 126, 222, 0.10) !important;
}

html body[data-requires-auth="true"][data-view="dashboard"]:not([data-view="practice"])
.study-shell > .main-wrapper .home-periods .home-period-tab.is-active {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  background-image: none !important;
  color: var(--brand-accent) !important;
  box-shadow: none !important;
}

/* 2026-07-19: top-owned brand navigation and shared branded loading states. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell {
  min-height: 100dvh !important;
  padding-top: 64px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 7px 20px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid #e2cf8c !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #fff8d5 0%, #fffdf3 42%, #fff8df 100%) !important;
  box-shadow: 0 4px 14px rgba(84, 61, 16, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-brand--primary {
  order: -1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 152px !important;
  min-height: 48px !important;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--brand-accent) !important;
  box-shadow: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-brand--primary:hover {
  border-color: transparent !important;
  background: rgba(0, 126, 222, 0.07) !important;
  color: var(--brand-accent-strong) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-brand--primary img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  flex: 0 0 46px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  filter: saturate(1.38) hue-rotate(8deg) brightness(1.24) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-brand--primary span {
  color: var(--brand-accent) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-links {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper {
  position: fixed !important;
  top: 64px !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: calc(100dvh - 64px) !important;
  padding-top: 14px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg p {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg p > b {
  width: 100% !important;
}

html body .app-loading-brand {
  position: relative !important;
  isolation: isolate !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  overflow: hidden !important;
  border: 1px solid var(--brand-accent-border) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #fffdf3 0%, #fff2bf 100%) !important;
  box-shadow: 0 10px 24px rgba(0, 126, 222, 0.12) !important;
}

html body .app-loading-brand[hidden] {
  display: none !important;
}

html body .app-loading-brand::after {
  content: "" !important;
  position: absolute !important;
  inset: -45% -80% !important;
  z-index: -1 !important;
  background: linear-gradient(110deg, transparent 38%, rgba(0, 126, 222, 0.12) 50%, transparent 62%) !important;
  transform: translateX(-45%);
  animation: app-loading-brand-sheen 1.8s ease-in-out infinite !important;
}

html body .app-loading-brand img {
  display: block !important;
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  animation: app-loading-brand-breathe 1.35s ease-in-out infinite !important;
}

html body[data-view] :is(
  .guide-loading, .market-course-loading, .market-loading, .market-skeleton,
  .vocab-chapter-loading, .profile-empty--loading, .rebate-empty--loading,
  .practice-empty--loading
).app-loading-state--branded {
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
}

html body[data-view] .app-loading-overlay__panel > .app-loading-brand {
  margin-bottom: 2px !important;
}

html body[data-view] .app-loading-overlay__spinner,
html body[data-view] :is(.practice-loading__dot, .practice-empty__spinner) {
  border-color: var(--brand-accent-border) !important;
  border-top-color: var(--brand-accent) !important;
  border-right-color: var(--brand-accent) !important;
}

html body[data-view="practice"] .practice-loading.app-loading-state--branded {
  flex-direction: column !important;
  gap: 12px !important;
}

html body[data-view="practice"] .practice-loading > .app-loading-brand {
  margin-bottom: 4px !important;
}

html body[data-view] .tp1--loading > label > .app-loading-brand {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  border-radius: 12px !important;
}

html body[data-view] .tp1--loading > label > .app-loading-brand img {
  width: 40px !important;
  height: 40px !important;
}

html body[data-view] .tp1--loading > label > .app-loading-brand + .ri-loader-4-line {
  display: none !important;
}

html body[data-view="market"] :is(.market-spotlight-item--loading, .category-card--loading) {
  border-color: var(--brand-accent-border) !important;
  background: linear-gradient(145deg, #fffefa 0%, #fff6d8 100%) !important;
  color: #454139 !important;
}

html body[data-view="market"] :is(.market-spotlight-item--loading, .category-card--loading) > .app-loading-brand {
  width: 44px !important;
  height: 44px !important;
  flex-basis: 44px !important;
  border-radius: 12px !important;
}

html body[data-view="market"] :is(.market-spotlight-item--loading, .category-card--loading) > .app-loading-brand img {
  width: 38px !important;
  height: 38px !important;
}

html body[data-view="market"] .market-course-card--empty,
html body[data-view="course-series"] .course-series-empty {
  border-color: #e5e0d7 !important;
  background: #fffefa !important;
  background-image: none !important;
  color: #454139 !important;
  box-shadow: var(--workspace-shadow) !important;
}

html body[data-view="market"] .market-course-empty > i,
html body[data-view="course-series"] .course-series-empty__content > i {
  border-color: var(--brand-accent-border) !important;
  background: var(--brand-accent-soft) !important;
  color: var(--brand-accent) !important;
}

html body[data-view="market"] .market-course-empty span,
html body[data-view="course-series"] .course-series-empty__content span {
  color: #716b60 !important;
}

html body[data-view] :is(button, a)[aria-busy="true"] {
  cursor: progress !important;
}

html body[data-view] :is(button, a)[aria-busy="true"] .ri-loader-4-line {
  display: inline-block !important;
  animation: market-loading-spin 1s linear infinite !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) .study-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar {
    position: sticky !important;
    inset: 0 auto auto !important;
    order: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 5px 10px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-brand--primary {
    display: inline-flex !important;
    min-width: 48px !important;
    width: 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    flex: 0 0 48px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-brand--primary img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    flex-basis: 44px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-brand--primary span {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-links {
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-links::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper {
    position: relative !important;
    top: auto !important;
    order: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 10px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar {
    grid-column: 1 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo {
    grid-column: 2 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > :is(.main-wrapper, .study-main) {
    order: 2 !important;
  }
}

/* Flat account entry: keep the sidebar footer quiet and action-focused. */
@media (min-width: 1101px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo {
    width: calc(100% - 28px) !important;
    margin: 0 14px 14px !important;
    padding: 5px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 126, 222, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 7px 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #2f3b3f !important;
    box-shadow: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg:hover {
    background: rgba(0, 126, 222, 0.08) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg::after {
    content: "\2192" !important;
    display: block !important;
    color: rgba(0, 126, 222, 0.68) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    transition: transform 160ms ease !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg:hover::after {
    transform: translateX(2px) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg > img {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 126, 222, 0.18) !important;
    border-radius: 50% !important;
    background: #fffdf4 !important;
    box-shadow: none !important;
    object-fit: cover !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg > p {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo > .UserImg > p > b {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    color: #2f3b3f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Final authenticated workspace backdrop. Keep this centralized so page-level
   legacy themes cannot replace the right-hand workspace with a flat wash. */
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) {
  --workspace-edge-yellow: rgba(224, 179, 51, 0.13);
  --workspace-edge-yellow-soft: rgba(248, 224, 145, 0.09);
  --workspace-edge-blue: rgba(0, 126, 222, 0.05);
  min-height: calc(100dvh - 64px) !important;
  background-color: #fffdf7 !important;
  background-image:
    linear-gradient(90deg, var(--workspace-edge-yellow) 0%, var(--workspace-edge-yellow-soft) 10%, transparent 27%, transparent 74%, rgba(0, 126, 222, 0.018) 88%, var(--workspace-edge-blue) 100%),
    linear-gradient(180deg, rgba(255, 243, 194, 0.46) 0%, rgba(255, 249, 225, 0.18) 18%, transparent 40%, transparent 72%, rgba(247, 219, 123, 0.12) 100%),
    linear-gradient(132deg, transparent 0%, transparent 58%, rgba(0, 126, 222, 0.022) 76%, transparent 94%),
    linear-gradient(180deg, #fffdf8 0%, #fffaf0 50%, #fffdf7 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper > .mainBox,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.container-fuild.study-shell > .main-wrapper > .mainBox > .maxWidth {
  background-color: transparent !important;
  background-image: none !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) {
    min-height: 100dvh !important;
    background-attachment: scroll !important;
  }
}

/* Keep the lookup field centered in the usable workspace. Older theme blocks
   used 100vh plus a large top inset, which pushed this page below center. */
html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox {
  box-sizing: border-box !important;
  height: calc(100dvh - 64px) !important;
  min-height: calc(100dvh - 64px) !important;
  padding: clamp(24px, 4vh, 40px) 24px !important;
  align-content: center !important;
}

html body[data-requires-auth="true"][data-view="vocab-search"]
.container-fuild.study-shell > .main-wrapper > .mainBox:has(#searchResult:not([hidden])) {
  align-content: start !important;
  padding-top: clamp(28px, 4vh, 40px) !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view="vocab-search"]:not([data-view="practice"])
  .container-fuild.study-shell > .main-wrapper.main-wrapper {
    box-sizing: border-box !important;
    height: calc(100dvh - 110px) !important;
    min-height: calc(100dvh - 110px) !important;
    max-height: calc(100dvh - 110px) !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"]
  .container-fuild.study-shell > .main-wrapper > .mainBox {
    box-sizing: border-box !important;
    height: calc(100dvh - 110px) !important;
    min-height: calc(100dvh - 110px) !important;
    padding: 20px 12px 24px !important;
  }

  html body[data-requires-auth="true"][data-view="vocab-search"]
  .container-fuild.study-shell > .main-wrapper > .mainBox:has(#searchResult:not([hidden])) {
    padding-top: 20px !important;
  }
}

/* Unified pagination. This final layer supersedes legacy page-level pager
   colors while preserving every existing link/button based DOM structure. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager) {
  --pager-brand: #007ede;
  --pager-brand-hover: #0069bc;
  --pager-brand-soft: #e8f5fb;
  --pager-surface: #ffffff;
  --pager-border: #8bb9d8;
  --pager-text: #102a43;
  --pager-disabled-bg: #edf2f5;
  --pager-disabled-border: #bdcbd4;
  --pager-disabled-text: #536575;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 18px 0 6px !important;
  padding: 2px 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)[hidden],
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)[style*="display: none"] {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(a, button, span),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager__numbers > button {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid var(--pager-border) !important;
  border-radius: 6px !important;
  background: var(--pager-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--pager-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(a, button),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager__numbers > button {
  cursor: pointer !important;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(a, button):has(i) {
  border-color: var(--pager-border) !important;
  background: var(--pager-brand-soft) !important;
  color: var(--pager-brand-hover) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(a, button) i {
  color: inherit !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager__numbers {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager > button > span {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> a > span {
  display: inline !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(.on, .active, .is-active, [aria-current="page"]),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager__numbers > :is(.is-active, [aria-current="page"]) {
  border-color: var(--pager-brand) !important;
  background: var(--pager-brand) !important;
  background-image: none !important;
  color: #ffffff !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(a[aria-disabled="true"], button:disabled, .disabled, .is-disabled),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager__numbers > button:disabled {
  border-color: var(--pager-disabled-border) !important;
  background: var(--pager-disabled-bg) !important;
  background-image: none !important;
  color: var(--pager-disabled-text) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
  > :is(a, button):not(.on):not(.active):not(.is-active):not([aria-current="page"]):not([aria-disabled="true"]):not(:disabled):hover,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper.main-wrapper .invite-pager__numbers > button:not(.is-active):not([aria-current="page"]):not(:disabled):hover {
    border-color: var(--pager-brand) !important;
    background: var(--pager-brand-soft) !important;
    color: var(--pager-brand-hover) !important;
  }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
> :is(a, button):focus-visible,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper.main-wrapper .invite-pager__numbers > button:focus-visible {
  outline: 3px solid rgba(11, 95, 138, 0.34) !important;
  outline-offset: 2px !important;
}

@media (max-width: 640px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager) {
    gap: 5px !important;
    margin-top: 14px !important;
    padding-inline: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper.main-wrapper :is(.market-pages, .pages, .pager, .pagination, .profile-pager, .reading-pager, .mistake-pager, .invite-pager)
  > :is(a, button, span),
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper.main-wrapper .invite-pager__numbers > button {
    min-width: 32px !important;
    height: 32px !important;
    padding-inline: 8px !important;
    font-size: 12px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper.main-wrapper .invite-pager__numbers {
    gap: 5px !important;
  }
}

/* Final utility-panel overrides must stay after legacy theme rules. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-panel .study-utility-panel__close {
  border-color: #d9e5eb !important;
  background: #f7fafb !important;
  color: #50636d !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-panel .study-utility-panel__close:hover {
  border-color: rgba(0, 126, 222, 0.36) !important;
  background: rgba(0, 126, 222, 0.07) !important;
  color: #007EDE !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel :is(.study-utility-support > .button, .study-utility-feedback__submit) :is(i, span) {
  color: #ffffff !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-panel,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-utility-bar .study-utility-panel[data-utility-key="feedback"] {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Website information uses self-explanatory link icons and closes by clicking
   outside the panel, so its header does not need a second close affordance. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account[data-utility-key="site"] .study-utility-panel__close {
  display: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account[data-utility-key="site"] .study-utility-panel__head > div {
  width: 100% !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-links .study-utility-site-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  font-size: 16px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-links .study-utility-site-icon > i {
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--agreement {
  border-color: #c9dfef !important;
  background: #edf7fc !important;
  color: #167fb4 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--privacy {
  border-color: #c9e4d6 !important;
  background: #eff9f4 !important;
  color: #2c8062 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--children {
  border-color: #dfd3ee !important;
  background: #f7f2fb !important;
  color: #7655a0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--help {
  border-color: #c9dfef !important;
  background: #edf7fc !important;
  color: #167fb4 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--about {
  border-color: #cadce8 !important;
  background: #f0f6fa !important;
  color: #456f87 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--privacy .ri-lock-fill::before {
  content: "\eecd" !important;
  font-family: remixicon !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--children .ri-group-fill::before {
  content: "\ede2" !important;
  font-family: remixicon !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-utility-panel--account .study-utility-site-icon--about .ri-information-line::before {
  content: "\ee59" !important;
  font-family: remixicon !important;
}

/* ===== Workspace interaction and surface detail layer =====
   This layer deliberately leaves layout ownership to each page. It only adds
   tactile states, quieter edge depth, and restrained page-specific accents. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"]) {
  --detail-blue: #007ede;
  --detail-blue-soft: rgba(0, 126, 222, 0.08);
  --detail-teal: #21877e;
  --detail-teal-soft: rgba(33, 135, 126, 0.08);
  --detail-coral: #c76f59;
  --detail-coral-soft: rgba(199, 111, 89, 0.08);
  --detail-green: #478461;
  --detail-green-soft: rgba(71, 132, 97, 0.08);
  --detail-violet: #7969a7;
  --detail-violet-soft: rgba(121, 105, 167, 0.08);
  --detail-gold: #b78119;
  --detail-gold-soft: rgba(183, 129, 25, 0.09);
  --detail-surface: rgba(255, 254, 249, 0.94);
  --detail-surface-hover: rgba(255, 255, 253, 0.98);
  --detail-border: rgba(126, 106, 63, 0.20);
  --detail-border-soft: rgba(126, 106, 63, 0.12);
  --detail-focus: rgba(0, 126, 222, 0.23);
  --detail-shadow: 0 1px 2px rgba(63, 52, 29, 0.04), 0 8px 22px rgba(80, 62, 25, 0.055);
  --detail-shadow-hover: 0 3px 8px rgba(49, 61, 65, 0.07), 0 14px 30px rgba(70, 63, 42, 0.09);
  --detail-accent: var(--detail-blue);
  --detail-accent-soft: var(--detail-blue-soft);
  --detail-accent-alt: var(--detail-teal);
}

html body[data-requires-auth="true"][data-view]:is(
  [data-view="reading"], [data-view="reading-detail"], [data-view="vocab-search"]
) {
  --detail-accent: var(--detail-teal);
  --detail-accent-soft: var(--detail-teal-soft);
  --detail-accent-alt: var(--detail-violet);
}

html body[data-requires-auth="true"][data-view]:is(
  [data-view="mistake-book"], [data-view="promotion-rebate"], [data-view="invite-records"]
) {
  --detail-accent: var(--detail-coral);
  --detail-accent-soft: var(--detail-coral-soft);
  --detail-accent-alt: var(--detail-blue);
}

html body[data-requires-auth="true"][data-view]:is(
  [data-view="vocab"], [data-view="knowledge-base"], [data-view="my-courses"]
) {
  --detail-accent: var(--detail-green);
  --detail-accent-soft: var(--detail-green-soft);
  --detail-accent-alt: var(--detail-blue);
}

html body[data-requires-auth="true"][data-view]:is(
  [data-view="upgrade"], [data-view="partner-recruit"], [data-view="profile"]
) {
  --detail-accent: var(--detail-gold);
  --detail-accent-soft: var(--detail-gold-soft);
  --detail-accent-alt: var(--detail-violet);
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .card, .card-solid, .panel-card, .section-card, .plan-card, .info-card,
  .market-course-card, .course-directory-card, .continue-course-card,
  .guide-series-card, .course-series-card, .recent-course, .recent-course-card,
  .my-stat-item, .my-filter-bar, .market-filter-card, .market-list-card,
  .mistake-course-card, .mistake-lesson-card, .profile-hero, .profile-panel,
  .profile-stat-card, .profile-order-item, .partner-hero, .partner-plan-card,
  .partner-card, .partner-summary-card, .partner-entry, .partner-withdraw-panel,
  .recharge-panel, .tier-card, .recharge-summary, .benefit-table, .commitment-card,
  .reading-card, .reading-detail-card, .reading-toolbar, .reading-filter-panel,
  .course-detail-hero-card, .course-series-hero, .course-series-section,
  .word-lookup-box, .rebate-toolbar, .partner-table-shell
) {
  border-color: var(--detail-border) !important;
  background-color: var(--detail-surface) !important;
  background-image:
    linear-gradient(90deg, var(--detail-accent-soft), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 253, 246, 0.15)) !important;
  box-shadow: var(--detail-shadow) !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.75, 0.25, 1) !important;
}

/* Only actionable modules lift. Static sections retain their established plane. */
@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper :is(
    a.market-course-card, a.guide-series-card, a.course-series-card,
    .market-course-card[onclick], .guide-series-card[onclick], .course-series-card[onclick],
    .recent-course[onclick], .recent-course-card[onclick], .course-directory-card[onclick],
    .course > ul > li, .knowledge .type li,
    .reading-card, .profile-order-item[role="button"]
  ):hover {
    border-color: color-mix(in srgb, var(--detail-accent) 42%, #d8c993) !important;
    background-color: var(--detail-surface-hover) !important;
    box-shadow: var(--detail-shadow-hover), 0 0 0 1px var(--detail-accent-soft) !important;
    transform: translateY(-2px) !important;
  }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper :is(
    a.market-course-card, a.guide-series-card, a.course-series-card,
    .market-course-card[onclick], .guide-series-card[onclick], .course-series-card[onclick],
    .recent-course[onclick], .recent-course-card[onclick], .course-directory-card[onclick],
    .course > ul > li, .knowledge .type li, .reading-card
  ):active {
  transform: translateY(0) scale(0.995) !important;
  box-shadow: 0 2px 8px rgba(63, 52, 29, 0.08) !important;
  transition-duration: 70ms !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.section-card-head, .partner-section__head, .course-directory-head, .reading-section-head, .profile-panel__head) {
  position: relative !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.section-card-head, .partner-section__head, .course-directory-head, .reading-section-head, .profile-panel__head)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 42px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--detail-accent), var(--detail-accent-alt)) !important;
  opacity: 0.72 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .button, button.primary, .home-primary-action, .profile-action, .partner-action,
  .recharge-action, .continue-btn, .course-practice-link, .word-lookup-btn,
  .reading-scope-button, .copy-action, .send-code, .tier-action
) {
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 170ms ease,
    transform 120ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper :is(
    .button, button.primary, .home-primary-action, .profile-action, .partner-action,
    .recharge-action, .continue-btn, .course-practice-link, .word-lookup-btn,
    .reading-scope-button, .copy-action, .send-code, .tier-action
  ):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 7px 18px color-mix(in srgb, var(--detail-accent) 20%, transparent) !important;
    transform: translateY(-1px) !important;
  }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .button, button.primary, .home-primary-action, .profile-action, .partner-action,
  .recharge-action, .continue-btn, .course-practice-link, .word-lookup-btn,
  .reading-scope-button, .copy-action, .send-code, .tier-action
):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: inset 0 2px 5px rgba(37, 41, 39, 0.13), 0 2px 6px rgba(37, 41, 39, 0.08) !important;
  transition-duration: 60ms !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .chip, .category-btn, .filter-row button, .groupBox span, .Wtype span,
  .source_tab em, .second_tab em, .lesson-tabs button, .home-period-tab,
  .recharge-tab, .cycle-card, .payment-channel-pill, .profile-segmented__item,
  .reading-button-group button, .reading-scope-button
) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 120ms ease !important;
}

@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper :is(
    .chip, .category-btn, .filter-row button, .groupBox span, .Wtype span,
    .source_tab em, .second_tab em, .lesson-tabs button, .home-period-tab,
    .recharge-tab, .cycle-card, .payment-channel-pill, .profile-segmented__item,
    .reading-button-group button, .reading-scope-button
  ):not(.on):not(.active):not(.is-active):not([aria-pressed="true"]):hover {
    border-color: color-mix(in srgb, var(--detail-accent) 40%, #d9cfad) !important;
    background-color: var(--detail-accent-soft) !important;
    color: color-mix(in srgb, var(--detail-accent) 76%, #313c3d) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 3px 9px var(--detail-accent-soft) !important;
  }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .chip.on, .chip.active, .category-btn.on, .category-btn.active,
  .groupBox span.on, .Wtype span.on, .source_tab em.on, .second_tab em.on,
  .lesson-tabs button.on, .home-period-tab.is-active, .recharge-tab.is-active,
  .cycle-card.is-active, .payment-channel-pill.is-active,
  .profile-segmented__item.is-active, button[aria-pressed="true"]
) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 4px 12px color-mix(in srgb, var(--detail-accent) 18%, transparent) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(input, textarea, select, .search-box, .market-search, .mycourses-search, .word-lookup-input) {
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 180ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(input, textarea, select):hover:not(:disabled),
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.search-box, .market-search, .mycourses-search, .word-lookup-input):hover {
  border-color: color-mix(in srgb, var(--detail-accent) 28%, #d9cda8) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(input, textarea, select):focus,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.search-box, .market-search, .mycourses-search, .word-lookup-input):focus-within {
  border-color: var(--detail-accent) !important;
  background-color: #fffefa !important;
  box-shadow: 0 0 0 3px var(--detail-accent-soft), 0 7px 18px rgba(63, 70, 64, 0.07) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.profile-modal-mask, .recharge-modal-mask, .service-mask, .bg.on) {
  backdrop-filter: blur(3px) saturate(0.94) !important;
  -webkit-backdrop-filter: blur(3px) saturate(0.94) !important;
  animation: detail-overlay-in 180ms ease both !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.profile-modal, .recharge-modal, .service-dialog, .settingPlan.on .content, .study-utility-panel:not([hidden])) {
  animation: detail-panel-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.app-loading-overlay, .api-loading-overlay, .page-loading-overlay, .loading-overlay) {
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.app-loading-overlay__panel {
  border: 1px solid color-mix(in srgb, var(--detail-accent) 28%, #e1d4aa) !important;
  background:
    linear-gradient(135deg, var(--detail-accent-soft), transparent 42%),
    rgba(255, 254, 249, 0.97) !important;
  box-shadow: 0 16px 38px rgba(66, 56, 32, 0.14), 0 0 22px var(--detail-accent-soft) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.market-loading-icon, .reading-loading i, .ri-loader-4-line) {
  filter: drop-shadow(0 0 5px var(--detail-accent-soft)) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.status-pill, .badge, .tier-tag, .partner-chip, .partner-status-pill, .course-level-pill) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(.partner-table-row, .invite-record-row, .profile-order-item, .benefit-row, .course-lesson-row) {
  transition: background-color 150ms ease, border-color 150ms ease !important;
}

@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  :is(.course-lesson-row):hover {
    background-color: var(--detail-accent-soft) !important;
  }
}

@keyframes detail-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes detail-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper .is-detail-pending {
  opacity: 0 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper .is-detail-pending.is-detail-visible {
  animation: detail-reveal-in 340ms cubic-bezier(0.2, 0.72, 0.24, 1) var(--detail-reveal-delay, 0ms) both !important;
}

@keyframes detail-reveal-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(
  .sidebar-item a, .UserImg, .account-menu__links a, .account-menu__links button,
  .market-pages a, .market-pages button, .pages a, .pages button,
  .pager a, .pager button, .pagination a, .pagination button,
  .profile-pager button, .reading-pager button, .mistake-pager button,
  .invite-pager button, .home-icon-button, .dashboard-icon-button
) {
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 110ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
:is(
  .sidebar-item a, .UserImg, .account-menu__links a, .account-menu__links button,
  .market-pages a, .market-pages button, .pages a, .pages button,
  .pager a, .pager button, .pagination a, .pagination button,
  .profile-pager button, .reading-pager button, .mistake-pager button,
  .invite-pager button, .home-icon-button, .dashboard-icon-button
):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: inset 0 2px 4px rgba(48, 48, 39, 0.13) !important;
  transition-duration: 60ms !important;
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .main-wrapper .is-detail-pending.is-detail-visible {
    animation-duration: 180ms !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 {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ===== Navigation and control refinement =====
   Keep the shell geometry unchanged. The link owns the menu surface while its
   wrapper only provides positioning, avoiding the old stacked hover layers. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item {
  position: relative !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: 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 {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 10px 0 8px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  color: #584a2b !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  transform: none !important;
  transition:
    color 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 160ms ease,
    transform 90ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px auto 8px 0 !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #007ede !important;
  opacity: 0 !important;
  transform: scaleY(0.45) !important;
  transition: opacity 150ms ease, transform 170ms cubic-bezier(0.2, 0.75, 0.25, 1) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a::after {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: 8px !important;
  z-index: -1 !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(112, 88, 32, 0.12) !important;
  border-radius: 7px !important;
  background: rgba(255, 253, 240, 0.55) !important;
  transition: border-color 150ms ease, background-color 150ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a .sidebar-menu-icon {
  box-sizing: border-box !important;
  display: block !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  margin: 0 !important;
  justify-self: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: brightness(0) saturate(100%) invert(28%) sepia(12%) saturate(1020%) hue-rotate(6deg) brightness(91%) contrast(90%) !important;
  opacity: 0.88 !important;
  transition: border-color 150ms ease, background-color 150ms ease, filter 150ms ease, opacity 150ms ease !important;
}

@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) > .sidebar-item > a:hover {
    border-color: rgba(0, 126, 222, 0.22) !important;
    background: rgba(255, 255, 252, 0.43) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 4px 11px rgba(87, 70, 26, 0.07) !important;
    color: #006ebf !important;
    transform: none !important;
  }

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

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) > .sidebar-item > a:hover .sidebar-menu-icon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(89%) saturate(1705%) hue-rotate(177deg) brightness(89%) contrast(102%) !important;
    opacity: 1 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li:not(.active) > .sidebar-item > a:hover::after {
    border-color: rgba(0, 126, 222, 0.18) !important;
    background: rgba(231, 246, 253, 0.80) !important;
  }
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active > .sidebar-item,
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li.active > .sidebar-item::before {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !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: #007ede !important;
  background: linear-gradient(180deg, #138be3 0%, #007ede 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px rgba(0, 126, 222, 0.18) !important;
  color: #ffffff !important;
  font-weight: 800 !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::before {
  background: #ffffff !important;
  opacity: 0.86 !important;
  transform: scaleY(1) !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 .sidebar-menu-icon {
  filter: brightness(0) invert(1) !important;
  opacity: 1 !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::after {
  border-color: rgba(255, 255, 255, 0.27) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a:active {
  transform: translateY(1px) scale(0.992) !important;
  box-shadow: inset 0 2px 5px rgba(63, 50, 19, 0.16) !important;
  transition-duration: 55ms !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a:focus-visible {
  outline: 3px solid rgba(0, 126, 222, 0.24) !important;
  outline-offset: 2px !important;
  border-color: rgba(0, 126, 222, 0.54) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group {
  position: relative !important;
  margin-top: 4px !important;
  padding-top: 5px !important;
  border-top: 1px solid rgba(131, 100, 29, 0.18) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  left: 0 !important;
  width: 32px !important;
  height: 1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 126, 222, 0.68) !important;
  opacity: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo {
  padding-top: 10px !important;
  border-top: 1px solid rgba(131, 100, 29, 0.16) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 16px !important;
  gap: 8px !important;
  min-height: 54px !important;
  padding: 7px 9px !important;
  overflow: hidden !important;
  border: 1px solid rgba(120, 92, 27, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(255, 253, 239, 0.42) !important;
  color: #433a27 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 160ms ease, transform 90ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg::after {
  content: "\ea6e" !important;
  grid-column: 3 !important;
  display: grid !important;
  place-items: center !important;
  color: #698089 !important;
  font-family: remixicon !important;
  font-size: 18px !important;
  transition: color 150ms ease, transform 170ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg img {
  width: 34px !important;
  height: 34px !important;
  border: 2px solid rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 0 0 1px rgba(0, 126, 222, 0.25) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg p {
  grid-column: 2 !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
}

@media (hover: hover) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg:hover {
    border-color: rgba(0, 126, 222, 0.28) !important;
    background: rgba(255, 255, 252, 0.62) !important;
    color: #006ebf !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 5px 13px rgba(78, 66, 32, 0.08) !important;
  }
}

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: rgba(0, 126, 222, 0.42) !important;
  background: rgba(232, 246, 252, 0.78) !important;
  color: #006ebf !important;
  box-shadow: inset 3px 0 0 #007ede, 0 6px 15px rgba(0, 126, 222, 0.10) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg[aria-expanded="true"]::after {
  color: #007ede !important;
  transform: rotate(-90deg) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg:active {
  transform: translateY(1px) scale(0.992) !important;
  box-shadow: inset 0 2px 5px rgba(63, 50, 19, 0.14) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg:focus-visible {
  outline: 3px solid rgba(0, 126, 222, 0.24) !important;
  outline-offset: 2px !important;
  border-color: rgba(0, 126, 222, 0.52) !important;
}

/* Full keyboard and pressed feedback for page-specific controls omitted by the
   historical shared button list. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .market-filter-panel .chip, .market-toolbar-right .chip, .guide-series-action,
  .course-back-link, .course-series-back, .course-series-empty a,
  .category-btn, .tp1-action, .vocab-records__close,
  .mistake-course-option, .second_tab em, .reading-back-link,
  .reading-favorite-button, .reading-audio-button, .reading-popover-close,
  .recharge-tab, .cycle-card, .payment-channel-pill, .recharge-modal__close,
  .partner-summary-card__action, .profile-copy-button, .profile-modal__close,
  .profile-avatar-action, .profile-segmented__item
) {
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 160ms ease, transform 90ms ease !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  .market-filter-panel .chip, .market-toolbar-right .chip, .guide-series-action,
  .course-back-link, .course-series-back, .course-series-empty a,
  .category-btn, .tp1-action, .vocab-records__close,
  .mistake-course-option, .second_tab em, .reading-back-link,
  .reading-favorite-button, .reading-audio-button, .reading-popover-close,
  .recharge-tab, .cycle-card, .payment-channel-pill, .recharge-modal__close,
  .partner-summary-card__action, .profile-action, .profile-copy-button,
  .profile-modal__close, .profile-avatar-action, .profile-segmented__item
):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.985) !important;
  box-shadow: inset 0 2px 5px rgba(41, 51, 49, 0.14) !important;
  transition-duration: 55ms !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(
  a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--detail-focus) !important;
  outline-offset: 2px !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(button, .button, .profile-action, .recharge-action, .partner-action)[aria-busy="true"],
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(button, .button, .profile-action, .recharge-action, .partner-action):disabled {
  filter: saturate(0.58) !important;
  opacity: 0.64 !important;
  box-shadow: none !important;
  transform: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(button, .button, .profile-action, .recharge-action, .partner-action)[aria-busy="true"] {
  cursor: progress !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(button, .button, .profile-action, .recharge-action, .partner-action):disabled:not([aria-busy="true"]) {
  cursor: not-allowed !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.tier-card, .benefit-row, .partner-table-row, .invite-record-row, .my-stat-item) {
  transform: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.main-wrapper :is(.partner-table-row, .invite-record-row):nth-child(even) {
  background-color: rgba(255, 249, 228, 0.48) !important;
}

html body[data-requires-auth="true"][data-view="reading-detail"] .reading-popover:not([hidden]) {
  animation: detail-popover-in 150ms cubic-bezier(0.2, 0.75, 0.25, 1) both !important;
}

html body[data-requires-auth="true"][data-view="reading-detail"] .reading-word:is(:focus, .is-selected, [aria-current="true"]) {
  background-color: var(--detail-accent-soft) !important;
  box-shadow: inset 0 -2px 0 var(--detail-accent) !important;
}

@keyframes detail-popover-in {
  from { opacity: 0; transform: translateY(4px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper > .sidebar {
    grid-column: 1 !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper > .sidebar::-webkit-scrollbar {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group {
    display: flex !important;
    flex: none !important;
    align-items: center !important;
    width: auto !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group::before {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper > .userinfo {
    grid-column: 2 !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg {
    display: grid !important;
    grid-template-columns: 34px !important;
    place-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
    border-radius: 8px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg p,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg::after {
    display: none !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a {
    height: 38px !important;
    min-height: 38px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding-inline: 7px 10px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a .sidebar-menu-icon {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a::after {
    top: 6px !important;
    width: 26px !important;
    height: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .sidebar li > .sidebar-item > a,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper .userinfo .UserImg,
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .reading-popover:not([hidden]) {
    transform: none !important;
    animation: none !important;
  }
}

/* ===== Authenticated shell pattern language =====
   Mirror the login page's ruled grid, angled planes, and corner-line details.
   Geometry stays with the existing shell and all decoration ignores input. */
html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar {
  isolation: isolate !important;
  border-bottom-color: rgba(0, 126, 222, 0.16) !important;
  background-color: #fff9dd !important;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 58px, rgba(0, 126, 222, 0.035) 58px 59px),
    linear-gradient(115deg, rgba(0, 126, 222, 0.055) 0 13%, transparent 13.1% 100%),
    linear-gradient(245deg, rgba(201, 107, 88, 0.035) 0 9%, transparent 9.1% 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.76),
    0 4px 14px rgba(82, 66, 30, 0.065) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 10px !important;
  right: 22px !important;
  width: 92px !important;
  height: 34px !important;
  pointer-events: none !important;
  border-top: 1px solid rgba(0, 126, 222, 0.24) !important;
  border-right: 1px solid rgba(0, 126, 222, 0.24) !important;
  box-shadow:
    6px -6px 0 -5px rgba(201, 107, 88, 0.32),
    12px -12px 0 -11px rgba(0, 126, 222, 0.22) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: min(34vw, 440px) !important;
  height: 3px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, #007ede 0%, #c96b58 48%, #e4b63f 100%) !important;
  opacity: 0.58 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar > * {
  position: relative !important;
  z-index: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-utility-bar .study-utility-brand--primary {
  background: transparent !important;
  background-image: none !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper {
  isolation: isolate !important;
  border-right-color: rgba(0, 126, 222, 0.14) !important;
  background-color: #fff1b7 !important;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 54px, rgba(0, 126, 222, 0.032) 54px 55px),
    repeating-linear-gradient(180deg, transparent 0 96px, rgba(113, 87, 28, 0.032) 96px 97px),
    linear-gradient(155deg, rgba(255, 255, 255, 0.27) 0 18%, transparent 18.1% 100%) !important;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.62),
    7px 0 20px rgba(84, 67, 26, 0.06) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: 12px !important;
  bottom: 18px !important;
  width: 68px !important;
  height: 68px !important;
  pointer-events: none !important;
  border-right: 1px solid rgba(0, 126, 222, 0.19) !important;
  border-bottom: 1px solid rgba(0, 126, 222, 0.19) !important;
  box-shadow:
    6px 6px 0 -5px rgba(201, 107, 88, 0.25),
    12px 12px 0 -11px rgba(230, 181, 55, 0.35) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper > * {
  position: relative !important;
  z-index: 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group {
  border-top-color: transparent !important;
  border-image: linear-gradient(90deg, rgba(0, 126, 222, 0.42), rgba(173, 132, 34, 0.24), transparent 92%) 1 !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.study-shell > .study-sidebar.sidebar-wrapper .sidebar > .sidebar-group + .sidebar-group::before {
  display: none !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) {
  --workspace-pattern-primary: color-mix(in srgb, var(--detail-accent, #007ede) 7%, transparent);
  --workspace-pattern-secondary: color-mix(in srgb, var(--detail-accent-alt, #21877e) 5%, transparent);
  background-color: #fffaf0 !important;
  background-image:
    linear-gradient(115deg, var(--workspace-pattern-primary) 0 14%, transparent 14.1% 100%),
    linear-gradient(245deg, var(--workspace-pattern-secondary) 0 11%, transparent 11.1% 100%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(0, 126, 222, 0.027) 79px 80px),
    repeating-linear-gradient(180deg, transparent 0 79px, rgba(0, 126, 222, 0.027) 79px 80px) !important;
  background-repeat: no-repeat, no-repeat, repeat, repeat !important;
  background-size: cover, cover, auto, auto !important;
  background-attachment: fixed !important;
  box-shadow:
    inset 4px 0 0 rgba(0, 126, 222, 0.06),
    inset -3px 0 0 rgba(201, 107, 88, 0.045),
    inset 0 3px 0 rgba(230, 181, 55, 0.06) !important;
}

html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
.account-menu--portal:not([hidden]) {
  animation: account-menu-enter 170ms cubic-bezier(0.2, 0.78, 0.24, 1) both !important;
}

@keyframes account-menu-enter {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .container-fuild.study-shell > .study-utility-bar {
    border-bottom-color: rgba(0, 126, 222, 0.14) !important;
    background-color: #fff9dd !important;
    background-image:
      repeating-linear-gradient(135deg, transparent 0 46px, rgba(0, 126, 222, 0.03) 46px 47px),
      linear-gradient(115deg, rgba(0, 126, 222, 0.045) 0 18%, transparent 18.1% 100%) !important;
    box-shadow: 0 3px 11px rgba(82, 66, 28, 0.06) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .container-fuild.study-shell > .study-utility-bar::before {
    right: 10px !important;
    width: 52px !important;
    opacity: 0.58 !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper {
    background-image:
      repeating-linear-gradient(135deg, transparent 0 46px, rgba(0, 126, 222, 0.028) 46px 47px),
      linear-gradient(155deg, rgba(255, 255, 255, 0.2) 0 16%, transparent 16.1% 100%) !important;
    box-shadow: 0 4px 12px rgba(77, 62, 28, 0.06) !important;
  }

  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .study-shell > .study-sidebar.sidebar-wrapper::before {
    display: none !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-attachment: scroll !important;
    background-size: cover, cover, auto, auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-requires-auth="true"][data-view]:not([data-view="practice"])
  .account-menu--portal:not([hidden]) {
    animation: none !important;
  }
}