:root {
  --rpx: calc(min(100vw, 430px) / 750);
  --web-nav-height: 44px;
  --web-tabbar-height: 58px;
  --web-bg: #f5f7fa;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; color: #111827; background: var(--web-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { border: 0; background: transparent; padding: 0; }
img, video, canvas { max-width: 100%; }
.web-app { min-height: 100vh; display: block; background: var(--web-bg); }
.web-phone { position: relative; width: 100%; min-height: 100vh; background: var(--web-bg); overflow: hidden; box-shadow: none; }
.web-nav-bar { position: sticky; top: 0; z-index: 80; height: calc(var(--web-nav-height) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; background: #4A90E2; color: #fff; }
.web-nav-bar h1 { margin: 0; min-width: 0; text-align: center; font-size: 17px; line-height: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-back-btn, .web-admin-link { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; text-decoration: none; border-radius: 999px; font-size: 28px; line-height: 1; cursor: pointer; }
.web-admin-link { justify-self: end; font-size: 14px; font-weight: 700; }
.web-back-btn:active, .web-admin-link:active { background: rgba(255, 255, 255, .14); }
.web-page { width: 100%; min-height: calc(100vh - var(--web-nav-height) - env(safe-area-inset-top)); background: var(--web-bg); overflow-x: hidden; padding-bottom: calc(var(--web-tabbar-height) + env(safe-area-inset-bottom)); }
.web-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 1000; max-width: min(88vw, 420px); padding: 10px 14px; border-radius: 8px; color: #fff; background: rgba(17,24,39,.92); text-align: center; }
.web-loading { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: rgba(255,255,255,.55); color: #2563eb; font-weight: 700; }
.web-refresh-btn {
  position: fixed;
  right: 14px;
  bottom: calc(var(--web-tabbar-height) + env(safe-area-inset-bottom) + 14px);
  min-width: 48px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  z-index: 950;
  border-radius: 999px;
  background: rgba(74, 144, 226, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.web-refresh-btn:active {
  transform: scale(0.96);
}
.web-loading[hidden], .web-toast[hidden], .web-modal-host[hidden] { display: none; }
.web-modal-host { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.42); }
.web-modal-card { width: min(84vw, 320px); overflow: hidden; border-radius: 12px; background: #fff; color: #111827; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.web-modal-title { padding: 22px 20px 8px; text-align: center; font-size: 18px; font-weight: 700; }
.web-modal-content { padding: 4px 22px 20px; color: #4b5563; text-align: center; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.web-modal-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #eef0f3; }
.web-modal-actions.single { grid-template-columns: 1fr; }
.web-modal-actions button { min-height: 48px; border-right: 1px solid #eef0f3; background: #fff; color: #4b5563; cursor: pointer; }
.web-modal-actions button:last-child { border-right: 0; color: #4A90E2; font-weight: 600; }
.web-action-list { display: grid; border-top: 1px solid #eef0f3; }
.web-action-list button { min-height: 48px; background: #fff; border-bottom: 1px solid #eef0f3; color: #111827; cursor: pointer; }
.web-action-list button:last-child { border-bottom: 0; }
.web-ad-placeholder { display: none; }
.web-empty { padding: 28px; text-align: center; color: #667085; background: #fff; border-radius: 8px; }
.web-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; width: 100%; transform: none; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--web-tabbar-height) + env(safe-area-inset-bottom)); padding: 4px 4px env(safe-area-inset-bottom); background: rgba(255,255,255,.98); border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -10px 24px rgba(15, 23, 42, .08); }
.web-tabbar a { min-width: 0; display: flex; align-items: center; justify-content: center; color: #999; text-decoration: none; text-align: center; font-size: 11px; line-height: 1.2; padding: 6px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-tabbar a.active { color: #4A90E2; font-weight: 600; }
.web-page .wx-view { display: block; min-width: 0; }
.web-page .wx-text { display: inline; white-space: pre-wrap; }
.web-page .wx-image { display: inline-block; vertical-align: top; object-fit: cover; }
.web-page .wx-image.mode-widthFix { width: 100%; height: auto; object-fit: contain; }
.web-page .wx-image.mode-aspectFit { object-fit: contain; }
.web-page .wx-image.mode-aspectFill { object-fit: cover; }
.web-page .wx-scroll-view { display: block; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.web-page .wx-scroll-view::-webkit-scrollbar { display: none; }
.web-page .wx-scroll-x { overflow-x: auto; overflow-y: hidden; white-space: nowrap; cursor: grab; }
.web-page .wx-scroll-x.dragging { cursor: grabbing; user-select: none; }
.web-page .wx-scroll-y { overflow-y: auto; overflow-x: hidden; }
.web-page .wx-button { display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.web-page .wx-input, .web-page .wx-textarea { border: 0; outline: 0; background: transparent; min-width: 0; }
.web-page .wx-textarea { resize: vertical; }
.web-page .wx-swiper { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; }
.web-page .wx-swiper::-webkit-scrollbar { display: none; }
.web-page .wx-swiper.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.web-page .wx-swiper-item { flex: 0 0 100%; scroll-snap-align: start; }
.web-page {
  background-color: #F5F7FA;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

.container {
  min-height: 100vh;
  padding: calc(20 * var(--rpx));
  box-sizing: border-box;
}

.card {
  background: #FFFFFF;
  border-radius: calc(16 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.08);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(88 * var(--rpx));
  border-radius: calc(44 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  font-weight: 500;
  transition: all 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}

.btn-success {
  background: linear-gradient(135deg, #52C41A 0%, #389E0D 100%);
  color: #FFFFFF;
}

.btn-warning {
  background: linear-gradient(135deg, #FAAD14 0%, #D48806 100%);
  color: #FFFFFF;
}

.btn-danger {
  background: linear-gradient(135deg, #FF4D4F 0%, #CF1322 100%);
  color: #FFFFFF;
}

.btn-outline {
  background: transparent;
  border: calc(2 * var(--rpx)) solid #4A90E2;
  color: #4A90E2;
}

.btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.text-primary {
  color: #4A90E2;
}

.text-success {
  color: #52C41A;
}

.text-warning {
  color: #FAAD14;
}

.text-danger {
  color: #FF4D4F;
}

.text-muted {
  color: #999999;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.mt-10 {
  margin-top: calc(10 * var(--rpx));
}

.mt-20 {
  margin-top: calc(20 * var(--rpx));
}

.mt-30 {
  margin-top: calc(30 * var(--rpx));
}

.mb-10 {
  margin-bottom: calc(10 * var(--rpx));
}

.mb-20 {
  margin-bottom: calc(20 * var(--rpx));
}

.mb-30 {
  margin-bottom: calc(30 * var(--rpx));
}

.ml-10 {
  margin-left: calc(10 * var(--rpx));
}

.mr-10 {
  margin-right: calc(10 * var(--rpx));
}

.p-20 {
  padding: calc(20 * var(--rpx));
}

.p-30 {
  padding: calc(30 * var(--rpx));
}

.font-bold {
  font-weight: bold;
}

.font-size-24 {
  font-size: calc(24 * var(--rpx));
}

.font-size-28 {
  font-size: calc(28 * var(--rpx));
}

.font-size-32 {
  font-size: calc(32 * var(--rpx));
}

.font-size-36 {
  font-size: calc(36 * var(--rpx));
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(100 * var(--rpx)) 0;
  color: #999999;
}

.empty-state image {
  width: calc(200 * var(--rpx));
  height: calc(200 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(40 * var(--rpx));
}

.tag {
  display: inline-block;
  padding: calc(4 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}

.tag-primary {
  background: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
}

.tag-success {
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
}

.tag-warning {
  background: rgba(250, 173, 20, 0.1);
  color: #FAAD14;
}

.tag-danger {
  background: rgba(255, 77, 79, 0.1);
  color: #FF4D4F;
}

/* pages/index/index */

.web-route-pages-index-index .header{
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 50%, #764ba2 100%);
  border-radius: 0 0 calc(40 * var(--rpx)) calc(40 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx)) calc(40 * var(--rpx));
  margin: -calc(20 * var(--rpx)) -calc(20 * var(--rpx)) calc(30 * var(--rpx)) -calc(20 * var(--rpx));
  color: #FFFFFF;
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(74, 144, 226, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}.web-route-pages-index-index .header-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-index-index .message-icon{
  position: relative;
  padding: calc(10 * var(--rpx));
}.web-route-pages-index-index .icon-text{
  font-size: calc(44 * var(--rpx));
}.web-route-pages-index-index .message-badge{
  position: absolute;
  top: 0;
  right: 0;
  background: #ff4757;
  color: #fff;
  font-size: calc(20 * var(--rpx));
  min-width: calc(32 * var(--rpx));
  height: calc(32 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(6 * var(--rpx));
}.web-route-pages-index-index .header::before{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
  animation: pulse 4s infinite alternate;
}.web-route-pages-index-index .header::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(2 * var(--rpx));
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  animation: slide 6s infinite linear;
}.web-route-pages-index-index .welcome{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-index-index .greeting{
  font-size: calc(32 * var(--rpx));
  opacity: 0.9;
}.web-route-pages-index-index .nickname{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  margin-left: calc(10 * var(--rpx));
}.web-route-pages-index-index .stats{
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(calc(10 * var(--rpx)));
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
  border: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.web-route-pages-index-index .stats:hover{
  transform: translateY(-calc(2 * var(--rpx)));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.15);
}.web-route-pages-index-index .stat-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  transition: all 0.3s ease;
}.web-route-pages-index-index .stat-item:hover{
  transform: scale(1.05);
}.web-route-pages-index-index .stat-value{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  margin-bottom: calc(8 * var(--rpx));
  text-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}.web-route-pages-index-index .stat-label{
  font-size: calc(24 * var(--rpx));
  opacity: 0.9;
  text-shadow: 0 calc(1 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}.web-route-pages-index-index .stat-divider{
  width: calc(2 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  margin: 0 calc(40 * var(--rpx));
  position: relative;
  z-index: 1;
}.web-route-pages-index-index .stat-item::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
  transition: all 0.3s ease;
}.web-route-pages-index-index .stat-item:hover::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}.web-route-pages-index-index .category-section{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-index-index .category-scroll{
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}.web-route-pages-index-index .category-scroll::-webkit-scrollbar{
  display: none;
}.web-route-pages-index-index .category-tabs{
  display: inline-flex;
  min-width: max-content;
  padding: 0 calc(10 * var(--rpx));
}.web-route-pages-index-index .category-tab{
  display: inline-block;
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  border-radius: calc(30 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #666666;
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
}.web-route-pages-index-index .category-tab::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.1) 50%, transparent 100%);
  transition: left 0.5s ease;
}.web-route-pages-index-index .category-tab:hover::before{
  left: 100%;
}.web-route-pages-index-index .category-tab.active{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(74, 144, 226, 0.4);
  border-color: #4A90E2;
  transform: translateY(-calc(2 * var(--rpx)));
}.web-route-pages-index-index .category-tab:hover{
  transform: translateY(-calc(2 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, 0.1);
  border-color: #4A90E2;
}.web-route-pages-index-index .category-tab:active{
  transform: scale(0.96) translateY(-calc(2 * var(--rpx)));
}.web-route-pages-index-index .exam-category-section{
  margin-bottom: calc(28 * var(--rpx));
  padding: calc(22 * var(--rpx));
  border-radius: calc(28 * var(--rpx));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 255, 0.98) 100%);
  border: calc(1 * var(--rpx)) solid rgba(74, 144, 226, 0.1);
  box-shadow: 0 calc(8 * var(--rpx)) calc(28 * var(--rpx)) rgba(74, 144, 226, 0.08);
  position: relative;
  overflow: hidden;
}.web-route-pages-index-index .exam-category-section::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(180 * var(--rpx));
  height: calc(180 * var(--rpx));
  background: radial-gradient(circle, rgba(102, 126, 234, 0.12) 0%, rgba(102, 126, 234, 0) 72%);
  transform: translate(35%, -35%);
  pointer-events: none;
}.web-route-pages-index-index .exam-category-header{
  display: flex;
  gap: calc(18 * var(--rpx));
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin-bottom: calc(18 * var(--rpx));
  position: relative;
  z-index: 1;
}.web-route-pages-index-index .exam-category-meta{
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
  min-width: 0;
  flex: 1;
}.web-route-pages-index-index .exam-category-actions{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--rpx));
}.web-route-pages-index-index .exam-category-title{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #425466;
  letter-spacing: calc(1 * var(--rpx));
  display: inline-flex;
  align-items: center;
}.web-route-pages-index-index .exam-category-title::before{
  content: '';
  display: inline-block;
  width: calc(10 * var(--rpx));
  height: calc(28 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  background: linear-gradient(180deg, #4A90E2 0%, #7B61FF 100%);
  box-shadow: 0 calc(4 * var(--rpx)) calc(14 * var(--rpx)) rgba(74, 144, 226, 0.28);
}.web-route-pages-index-index .exam-category-tip{
  font-size: calc(24 * var(--rpx));
  line-height: 1.6;
  color: #7a8698;
}.web-route-pages-index-index .exam-category-count{
  flex-shrink: 0;
  padding: calc(10 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: rgba(74, 144, 226, 0.08);
  border: calc(1 * var(--rpx)) solid rgba(74, 144, 226, 0.14);
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
  color: #4A90E2;
  box-shadow: inset 0 calc(1 * var(--rpx)) 0 rgba(255, 255, 255, 0.65);
}.web-route-pages-index-index .exam-category-swipe-hint{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: rgba(123, 97, 255, 0.06);
  border: calc(1 * var(--rpx)) dashed rgba(123, 97, 255, 0.18);
  color: #7b61ff;
  font-size: calc(22 * var(--rpx));
  line-height: 1;
  letter-spacing: calc(1 * var(--rpx));
}.web-route-pages-index-index .exam-category-scroll{
  position: relative;
  z-index: 1;
  margin: 0 calc(-6 * var(--rpx));
  padding: calc(4 * var(--rpx)) calc(6 * var(--rpx)) calc(8 * var(--rpx));
}.web-route-pages-index-index .exam-category-tabs{
  gap: calc(14 * var(--rpx));
  padding: 0 calc(8 * var(--rpx)) 0 calc(4 * var(--rpx));
}.web-route-pages-index-index .exam-category-tab{
  margin-right: 0;
  margin-bottom: 0;
  padding: calc(16 * var(--rpx)) calc(30 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(74, 144, 226, 0.12);
  box-shadow: 0 calc(6 * var(--rpx)) calc(18 * var(--rpx)) rgba(31, 45, 61, 0.06);
  color: #5b6574;
  font-weight: 500;
}.web-route-pages-index-index .exam-category-tab:hover{
  transform: translateY(-calc(1 * var(--rpx)));
  box-shadow: 0 calc(8 * var(--rpx)) calc(20 * var(--rpx)) rgba(74, 144, 226, 0.12);
  border-color: rgba(74, 144, 226, 0.22);
}.web-route-pages-index-index .exam-category-tab.active{
  background: linear-gradient(135deg, #4A90E2 0%, #667EEA 55%, #7B61FF 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 calc(10 * var(--rpx)) calc(24 * var(--rpx)) rgba(90, 110, 235, 0.28);
}.web-route-pages-index-index .exam-category-tab.active::before{
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
}.web-route-pages-index-index .section-title{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-index-index .title{
  display: block;
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-index-index .subtitle{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #999999;
}.web-route-pages-index-index .exam-cards{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-index-index .exam-card{
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(calc(10 * var(--rpx)));
}.web-route-pages-index-index .exam-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(6 * var(--rpx));
  height: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 50%, #764ba2 100%);
  border-radius: calc(6 * var(--rpx)) 0 0 calc(6 * var(--rpx));
  z-index: 1;
}.web-route-pages-index-index .exam-card::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  background: radial-gradient(circle, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0) 70%);
  border-radius: 50%;
  transform: translate(50%, -50%);
  z-index: 0;
}.web-route-pages-index-index .exam-card:hover{
  transform: translateY(-calc(6 * var(--rpx))) scale(1.02);
  box-shadow: 0 calc(12 * var(--rpx)) calc(40 * var(--rpx)) rgba(74, 144, 226, 0.25);
  border-color: #4A90E2;
}.web-route-pages-index-index .exam-card:active{
  transform: translateY(-calc(2 * var(--rpx))) scale(0.98);
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.15);
}.web-route-pages-index-index .card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-index-index .exam-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
  flex: 1;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-index-index .exam-status{
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  font-weight: 500;
}.web-route-pages-index-index .exam-status.active{
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
}.web-route-pages-index-index .exam-status.inactive{
  background: rgba(153, 153, 153, 0.1);
  color: #999999;
}.web-route-pages-index-index .card-body{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-index-index .exam-info{
  display: flex;
  align-items: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-index-index .info-item{
  display: flex;
  align-items: center;
  margin-right: calc(30 * var(--rpx));
}.web-route-pages-index-index .info-icon{
  font-size: calc(28 * var(--rpx));
  margin-right: calc(6 * var(--rpx));
}.web-route-pages-index-index .info-text{
  font-size: calc(26 * var(--rpx));
  color: #666666;
}.web-route-pages-index-index .exam-desc{
  font-size: calc(26 * var(--rpx));
  color: #999999;
  line-height: 1.6;
}.web-route-pages-index-index .exam-category{
  margin-top: calc(16 * var(--rpx));
}.web-route-pages-index-index .category-tag{
  display: inline-block;
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  background: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
  font-size: calc(22 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-index-index .card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-index-index .pass-info{
  display: flex;
  align-items: center;
}.web-route-pages-index-index .pass-label{
  font-size: calc(26 * var(--rpx));
  color: #999999;
}.web-route-pages-index-index .pass-score{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #FAAD14;
  margin-left: calc(8 * var(--rpx));
}.web-route-pages-index-index .arrow{
  font-size: calc(32 * var(--rpx));
  color: #4A90E2;
  font-weight: bold;
}.web-route-pages-index-index .loading{
  text-align: center;
  padding: calc(60 * var(--rpx)) 0;
  color: #999999;
}.web-route-pages-index-index .empty-state{
  text-align: center;
  padding: calc(60 * var(--rpx)) 0;
  color: #999999;
}@keyframes pulse{
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}@keyframes slide{
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}@keyframes fadeIn{
  from {
    opacity: 0;
    transform: translateY(calc(20 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.web-route-pages-index-index .fade-in{
  animation: fadeIn 0.6s ease-out;
}.web-route-pages-index-index .pulse{
  animation: pulse 2s infinite;
}.web-route-pages-index-index .feature-section{
  margin: 0 calc(20 * var(--rpx)) calc(30 * var(--rpx));
}.web-route-pages-index-index .feature-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(24 * var(--rpx));
  padding: calc(36 * var(--rpx)) calc(24 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-index-index .feature-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(8 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-index-index .feature-item:active{
  background: rgba(74, 144, 226, 0.08);
  transform: scale(0.95);
}.web-route-pages-index-index .feature-icon-wrap{
  width: calc(96 * var(--rpx));
  height: calc(96 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
  transition: all 0.3s ease;
}.web-route-pages-index-index .feature-item:active .feature-icon-wrap{
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.2) 0%, rgba(102, 126, 234, 0.2) 100%);
  transform: scale(1.05);
}.web-route-pages-index-index .feature-icon{
  font-size: calc(44 * var(--rpx));
}.web-route-pages-index-index .feature-name{
  font-size: calc(24 * var(--rpx));
  color: #333333;
  text-align: center;
  font-weight: 500;
}.web-route-pages-index-index .popup-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-index-index .popup-container{
  position: relative;
  width: 80%;
  max-width: calc(600 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(24 * var(--rpx));
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--rpx)) calc(60 * var(--rpx)) rgba(0, 0, 0, 0.3);
  animation: popupShow 0.3s ease-out;
}@keyframes popupShow{
  from {
    opacity: 0;
    transform: scale(0.8) translateY(calc(50 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}.web-route-pages-index-index .popup-close{
  position: absolute;
  top: calc(20 * var(--rpx));
  right: calc(20 * var(--rpx));
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.3s ease;
}.web-route-pages-index-index .popup-close:active{
  background: rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}.web-route-pages-index-index .close-icon{
  font-size: calc(28 * var(--rpx));
  color: #666666;
  font-weight: bold;
}.web-route-pages-index-index .popup-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--rpx));
}.web-route-pages-index-index .popup-image{
  width: 100%;
  max-height: calc(400 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-index-index .popup-title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
  text-align: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-index-index .popup-text{
  font-size: calc(28 * var(--rpx));
  color: #666666;
  text-align: center;
  line-height: 1.6;
}.web-route-pages-index-index .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(16 * var(--rpx));
}



/* pages/exam/exam */

.web-route-pages-exam-exam .exam-info{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .info-title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .info-desc{
  font-size: calc(28 * var(--rpx));
  color: #666666;
  line-height: 1.6;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-exam-exam .info-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .grid-item{
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
}.web-route-pages-exam-exam .grid-item::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(4 * var(--rpx));
  height: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  border-radius: calc(4 * var(--rpx)) 0 0 calc(4 * var(--rpx));
}.web-route-pages-exam-exam .grid-item:hover{
  transform: translateY(-calc(4 * var(--rpx))) scale(1.02);
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(74, 144, 226, 0.2);
  border-color: #4A90E2;
}.web-route-pages-exam-exam .grid-icon{
  font-size: calc(36 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .grid-content{
  display: flex;
  flex-direction: column;
}.web-route-pages-exam-exam .grid-label{
  font-size: calc(24 * var(--rpx));
  color: #999999;
  margin-bottom: calc(4 * var(--rpx));
}.web-route-pages-exam-exam .grid-value{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-exam-exam .taken-tip{
  margin-top: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: rgba(250, 173, 20, 0.1);
  border-radius: calc(12 * var(--rpx));
  text-align: center;
  color: #FAAD14;
  font-size: calc(26 * var(--rpx));
}.web-route-pages-exam-exam .rules{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .rules-title{
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .rules-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .rule-item{
  display: flex;
  align-items: flex-start;
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.6;
}.web-route-pages-exam-exam .rule-dot{
  font-size: calc(32 * var(--rpx));
  color: #4A90E2;
  margin-right: calc(12 * var(--rpx));
  line-height: 1;
}.web-route-pages-exam-exam .action-area{
  padding: calc(40 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-exam-exam .btn{
  width: 100%;
  height: calc(96 * var(--rpx));
  border-radius: calc(48 * var(--rpx));
  font-size: calc(34 * var(--rpx));
  font-weight: bold;
  border: none;
}.web-route-pages-exam-exam .exam-files{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .files-title{
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .files-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .file-item{
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
}.web-route-pages-exam-exam .file-item::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(4 * var(--rpx));
  height: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  border-radius: calc(4 * var(--rpx)) 0 0 calc(4 * var(--rpx));
}.web-route-pages-exam-exam .file-item:hover{
  transform: translateY(-calc(4 * var(--rpx))) scale(1.02);
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(74, 144, 226, 0.2);
  border-color: #4A90E2;
}.web-route-pages-exam-exam .file-item:active{
  background: #E9ECEF;
  transform: translateY(-calc(2 * var(--rpx))) scale(0.98);
}.web-route-pages-exam-exam .file-icon{
  font-size: calc(48 * var(--rpx));
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .file-info{
  flex: 1;
  display: flex;
  flex-direction: column;
}.web-route-pages-exam-exam .file-name{
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  color: #333333;
  margin-bottom: calc(4 * var(--rpx));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-exam-exam .file-meta{
  font-size: calc(22 * var(--rpx));
  color: #999999;
}.web-route-pages-exam-exam .file-download{
  font-size: calc(36 * var(--rpx));
  color: #4A90E2;
  margin-left: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .history-section,
.web-route-pages-exam-exam .leaderboard-section{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .section-head-actions{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-exam-exam .section-copy{
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}.web-route-pages-exam-exam .section-title{
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-exam-exam .section-subtitle{
  font-size: calc(24 * var(--rpx));
  color: #999999;
  line-height: 1.6;
}.web-route-pages-exam-exam .section-badge{
  flex-shrink: 0;
  background: rgba(74, 144, 226, 0.12);
  color: #4A90E2;
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
}.web-route-pages-exam-exam .section-toggle-btn{
  border: none;
  background: rgba(51, 51, 51, 0.08);
  color: #333333;
  font-size: calc(22 * var(--rpx));
  font-weight: 600;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
}.web-route-pages-exam-exam .history-native-details{
  border: calc(2 * var(--rpx)) solid rgba(74, 144, 226, 0.08);
  border-radius: calc(20 * var(--rpx));
  background: rgba(248, 250, 252, 0.92);
  overflow: hidden;
}.web-route-pages-exam-exam .history-native-summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
  cursor: pointer;
}.web-route-pages-exam-exam .history-native-summary::-webkit-details-marker{
  display: none;
}.web-route-pages-exam-exam .history-native-summary-main{
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--rpx));
}.web-route-pages-exam-exam .history-native-summary-title{
  font-size: calc(24 * var(--rpx));
  font-weight: 700;
  color: #1F2937;
}.web-route-pages-exam-exam .history-native-summary-hint{
  font-size: calc(20 * var(--rpx));
  color: #6B7280;
}.web-route-pages-exam-exam .history-native-summary-icon{
  font-size: calc(28 * var(--rpx));
  color: #4A90E2;
  font-weight: 700;
}.web-route-pages-exam-exam .history-native-details .exam-history-list{
  padding: 0 calc(18 * var(--rpx)) calc(18 * var(--rpx));
}.web-route-pages-exam-exam .link-btn{
  flex-shrink: 0;
  border: none;
  background: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
  padding: calc(10 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
}.web-route-pages-exam-exam .inner-loading,
.web-route-pages-exam-exam .section-empty{
  padding: calc(28 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  background: #F8F9FA;
  text-align: center;
}.web-route-pages-exam-exam .empty-title{
  display: block;
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #333333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-exam-exam .empty-desc{
  display: block;
  font-size: calc(24 * var(--rpx));
  color: #999999;
  line-height: 1.6;
}.web-route-pages-exam-exam .exam-history-list{
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--rpx));
}.web-route-pages-exam-exam .history-card{
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  border-radius: calc(18 * var(--rpx));
  padding: calc(24 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #EAECEF;
}.web-route-pages-exam-exam .history-card.pass{
  border-left: calc(8 * var(--rpx)) solid #52C41A;
}.web-route-pages-exam-exam .history-card.fail{
  border-left: calc(8 * var(--rpx)) solid #FF4D4F;
}.web-route-pages-exam-exam .history-card-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .history-card-main{
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}.web-route-pages-exam-exam .history-date{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-exam-exam .history-score{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-exam-exam .history-state{
  flex-shrink: 0;
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
}.web-route-pages-exam-exam .history-state.pass{
  background: rgba(82, 196, 26, 0.12);
  color: #52C41A;
}.web-route-pages-exam-exam .history-state.fail{
  background: rgba(255, 77, 79, 0.12);
  color: #FF4D4F;
}.web-route-pages-exam-exam .history-metrics{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(14 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .history-metric{
  background: #FFFFFF;
  border-radius: calc(14 * var(--rpx));
  padding: calc(16 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--rpx));
}.web-route-pages-exam-exam .metric-label{
  font-size: calc(22 * var(--rpx));
  color: #999999;
}.web-route-pages-exam-exam .metric-value{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-exam-exam .metric-value.wrong{
  color: #FF4D4F;
}.web-route-pages-exam-exam .history-note{
  font-size: calc(24 * var(--rpx));
  color: #666666;
  line-height: 1.6;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .history-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
}.web-route-pages-exam-exam .history-btn{
  border: none;
  border-radius: calc(999 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(28 * var(--rpx));
  font-size: calc(26 * var(--rpx));
  font-weight: bold;
}.web-route-pages-exam-exam .history-btn.primary{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}.web-route-pages-exam-exam .history-latest{
  font-size: calc(22 * var(--rpx));
  color: #4A90E2;
  font-weight: bold;
}.web-route-pages-exam-exam .mini-top-three{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(14 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-exam-exam .mini-rank-card{
  position: relative;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  color: #FFFFFF;
  border-radius: calc(18 * var(--rpx));
  padding: calc(24 * var(--rpx)) calc(16 * var(--rpx));
  text-align: center;
  min-height: calc(170 * var(--rpx));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(10 * var(--rpx));
}.web-route-pages-exam-exam .mini-rank-card.first{
  transform: translateY(-calc(8 * var(--rpx)));
}.web-route-pages-exam-exam .mini-rank-badge{
  font-size: calc(34 * var(--rpx));
  font-weight: bold;
  color: #FFD700;
}.web-route-pages-exam-exam .mini-rank-name{
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
  line-height: 1.4;
}.web-route-pages-exam-exam .mini-rank-score{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
}.web-route-pages-exam-exam .mini-rank-me{
  position: absolute;
  top: calc(12 * var(--rpx));
  right: calc(12 * var(--rpx));
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  background: rgba(255, 255, 255, 0.18);
  padding: calc(4 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
}.web-route-pages-exam-exam .mini-rank-list{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
}.web-route-pages-exam-exam .mini-rank-row{
  display: flex;
  align-items: center;
  gap: calc(14 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(14 * var(--rpx));
  padding: calc(18 * var(--rpx)) calc(20 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.06);
}.web-route-pages-exam-exam .mini-rank-row.current-user{
  border: calc(2 * var(--rpx)) solid #4A90E2;
  background: rgba(74, 144, 226, 0.05);
}.web-route-pages-exam-exam .mini-rank-index{
  width: calc(44 * var(--rpx));
  text-align: center;
  font-size: calc(26 * var(--rpx));
  font-weight: bold;
  color: #666666;
}.web-route-pages-exam-exam .mini-rank-user{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
  min-width: 0;
}.web-route-pages-exam-exam .mini-rank-user-name{
  font-size: calc(26 * var(--rpx));
  font-weight: 600;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-exam-exam .mini-rank-user-time{
  font-size: calc(22 * var(--rpx));
  color: #999999;
}.web-route-pages-exam-exam .mini-rank-row-score{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
}.web-route-pages-exam-exam .mini-row-me{
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  color: #FF6B6B;
}.web-route-pages-exam-exam .wrongbook-entry{
  position: relative;
}.web-route-pages-exam-exam .wrongbook-count-badge{
  position: absolute;
  top: calc(-6 * var(--rpx));
  right: calc(18 * var(--rpx));
  min-width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  padding: 0 calc(10 * var(--rpx));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(999 * var(--rpx));
  background: #FF4D4F;
  color: #FFFFFF;
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(255, 77, 79, 0.24);
}.web-route-pages-exam-exam .action-secondary-btn{
  margin-top: calc(16 * var(--rpx));
}


/* pages/question/question */

.web-route-pages-question-question .timer-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  padding: calc(24 * var(--rpx)) calc(30 * var(--rpx));
  margin: -calc(20 * var(--rpx)) -calc(20 * var(--rpx)) calc(20 * var(--rpx)) -calc(20 * var(--rpx));
  color: #FFFFFF;
}.web-route-pages-question-question .timer-info{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}.web-route-pages-question-question .timer-icon{
  font-size: calc(32 * var(--rpx));
}.web-route-pages-question-question .timer-text{
  font-size: calc(26 * var(--rpx));
}.web-route-pages-question-question .timer-value{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  font-family: 'Courier New', monospace;
}.web-route-pages-question-question .timer-value.warning{
  color: #FF4D4F;
  animation: pulse 1s infinite;
}@keyframes pulse{
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}.web-route-pages-question-question .progress{
  background: rgba(255, 255, 255, 0.2);
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-question-question .progress-text{
  font-size: calc(26 * var(--rpx));
  font-weight: 500;
}.web-route-pages-question-question .question-card{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin-bottom: calc(15 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-question-question .question-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-question-question .question-type-tag{
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  font-weight: 500;
}.web-route-pages-question-question .question-type-tag.single{
  background: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
}.web-route-pages-question-question .question-type-tag.multiple{
  background: rgba(250, 173, 20, 0.1);
  color: #FAAD14;
}.web-route-pages-question-question .question-type-tag.judge{
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
}.web-route-pages-question-question .question-score{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-question-question .question-content{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-question-question .question-text{
  font-size: calc(28 * var(--rpx));
  color: #333333;
  line-height: 1.8;
  font-weight: 500;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-question-question .question-image{
  width: 100%;
  border-radius: calc(8 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-question-question .options-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-question-question .option-item{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx));
  background: #F8F9FA;
  border-radius: calc(16 * var(--rpx));
  border: calc(2 * var(--rpx)) solid transparent;
  transition: all 0.3s;
  position: relative;
}.web-route-pages-question-question .option-item.selected{
  background: rgba(74, 144, 226, 0.05);
  border-color: #4A90E2;
}.web-route-pages-question-question .option-item.correct{
  background: rgba(82, 196, 26, 0.05);
  border-color: #52C41A;
}.web-route-pages-question-question .option-item.wrong{
  background: rgba(255, 77, 79, 0.05);
  border-color: #FF4D4F;
}.web-route-pages-question-question .option-item.long-pressed{
  opacity: 0.5;
  transform: scale(0.98);
}.web-route-pages-question-question .option-label{
  width: calc(50 * var(--rpx));
  height: calc(50 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E8;
  border-radius: 50%;
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #666666;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-question-question .option-item.selected .option-label{
  background: #4A90E2;
  color: #FFFFFF;
}.web-route-pages-question-question .option-item.correct .option-label{
  background: #52C41A;
  color: #FFFFFF;
}.web-route-pages-question-question .option-item.wrong .option-label{
  background: #FF4D4F;
  color: #FFFFFF;
}.web-route-pages-question-question .option-value{
  flex: 1;
  font-size: calc(28 * var(--rpx));
  color: #333333;
  line-height: 1.6;
}.web-route-pages-question-question .option-formula-image{
  flex: 1;
  width: 100%;
  max-width: calc(420 * var(--rpx));
  display: block;
}.web-route-pages-question-question .option-icon{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-question-question .option-icon.correct{
  background: #52C41A;
  color: #FFFFFF;
}.web-route-pages-question-question .option-icon.wrong{
  background: #FF4D4F;
  color: #FFFFFF;
}.web-route-pages-question-question .analysis-box{
  margin-top: calc(30 * var(--rpx));
  padding: calc(24 * var(--rpx));
  background: rgba(250, 173, 20, 0.05);
  border-radius: calc(16 * var(--rpx));
  border-left: calc(4 * var(--rpx)) solid #FAAD14;
}.web-route-pages-question-question .analysis-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #FAAD14;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-question-question .analysis-content{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.6;
}.web-route-pages-question-question .question-nav{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-question-question .nav-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: calc(16 * var(--rpx));
}.web-route-pages-question-question .nav-item{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F9FA;
  border-radius: calc(12 * var(--rpx));
  font-size: calc(26 * var(--rpx));
  color: #666666;
  font-weight: 500;
  transition: all 0.3s;
}.web-route-pages-question-question .nav-item.current{
  background: #4A90E2;
  color: #FFFFFF;
  transform: scale(1.1);
}.web-route-pages-question-question .nav-item.answered{
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
  border: calc(2 * var(--rpx)) solid #52C41A;
}.web-route-pages-question-question .action-bar{
  display: flex;
  gap: calc(20 * var(--rpx));
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-question-question .nav-btn{
  flex: 1;
  height: calc(88 * var(--rpx));
  border-radius: calc(44 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border: none;
  background: #F8F9FA;
  color: #666666;
}.web-route-pages-question-question .nav-btn.prev.disabled{
  opacity: 0.4;
  pointer-events: none;
}.web-route-pages-question-question .nav-btn.next{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}.web-route-pages-question-question .nav-btn.submit{
  background: linear-gradient(135deg, #52C41A 0%, #389E0D 100%);
  color: #FFFFFF;
}.web-route-pages-question-question .exam-files-section{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-question-question .section-title{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-question-question .section-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-question-question .section-text{
  font-size: calc(26 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-question-question .files-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-question-question .files-list .file-item{
  margin-bottom: 0;
}.web-route-pages-question-question .file-item-action{
  width: calc(80 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A90E2;
  border-radius: calc(30 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #FFFFFF;
  margin-left: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-question-question .file-item.selected{
  background: rgba(74, 144, 226, 0.1);
  border: calc(2 * var(--rpx)) solid #4A90E2;
}.web-route-pages-question-question .pdf-preview{
  margin-top: calc(20 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-question-question .pdf-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}.web-route-pages-question-question .pdf-preview-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-question-question .pdf-preview-close{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-question-question .file-preview{
  margin-top: calc(20 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-question-question .file-preview-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}.web-route-pages-question-question .file-preview-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-question-question .file-preview-close{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-question-question .file-preview-content{
  padding: calc(30 * var(--rpx));
  background: #F8F9FA;
}.web-route-pages-question-question .image-preview-container{
  position: relative;
  height: calc(1200 * var(--rpx));
  background: #000000;
  border-radius: calc(12 * var(--rpx));
  overflow: hidden;
  margin: 0 -calc(20 * var(--rpx));
  border-radius: 0;
}.web-route-pages-question-question .image-swiper{
  height: 100%;
}.web-route-pages-question-question .image-swiper swiper-item{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}.web-route-pages-question-question .preview-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}.web-route-pages-question-question .image-indicator{
  position: absolute;
  bottom: calc(30 * var(--rpx));
  right: calc(30 * var(--rpx));
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: calc(28 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(30 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.3);
  z-index: 20;
}.web-route-pages-question-question .image-nav-buttons{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  pointer-events: none;
}.web-route-pages-question-question .image-nav-buttons .nav-btn.prev{
  position: absolute;
  top: 50%;
  left: calc(30 * var(--rpx));
  transform: translateY(-50%);
}.web-route-pages-question-question .image-nav-buttons .nav-btn.next{
  position: absolute;
  top: 50%;
  right: calc(30 * var(--rpx));
  transform: translateY(-50%);
}.web-route-pages-question-question .image-nav-buttons .nav-btn{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  color: #FFFFFF;
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}.web-route-pages-question-question .image-nav-buttons .nav-btn:active{
  background: rgba(0, 0, 0, 0.9);
  transform: scale(0.9);
}.web-route-pages-question-question .zoom-controls{
  position: absolute;
  bottom: calc(30 * var(--rpx));
  left: calc(30 * var(--rpx));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  background: rgba(0, 0, 0, 0.7);
  padding: calc(12 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(40 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.3);
  z-index: 20;
}.web-route-pages-question-question .zoom-btn{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s;
}.web-route-pages-question-question .zoom-btn:active{
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.9);
}.web-route-pages-question-question .zoom-btn.reset{
  font-size: calc(24 * var(--rpx));
  background: rgba(255, 77, 79, 0.3);
}.web-route-pages-question-question .zoom-info{
  min-width: calc(100 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: calc(30 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #FFFFFF;
  font-weight: 500;
}.web-route-pages-question-question .preview-tip{
  position: absolute;
  top: calc(30 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: calc(24 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(30 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 80%;
  line-height: 1.5;
}.web-route-pages-question-question .question-floating-window{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20 * var(--rpx));
}.web-route-pages-question-question .question-floating-window .question-card{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin: 0;
  box-shadow: 0 calc(8 * var(--rpx)) calc(40 * var(--rpx)) rgba(0, 0, 0, 0.3);
  max-height: 80vh;
  overflow-y: auto;
  width: 100%;
  max-width: calc(600 * var(--rpx));
}.web-route-pages-question-question .question-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-question-question .question-close{
  font-size: calc(40 * var(--rpx));
  color: #999999;
  cursor: pointer;
  padding: 0 calc(10 * var(--rpx));
}.web-route-pages-question-question .question-toggle-btn{
  position: fixed;
  bottom: calc(30 * var(--rpx));
  right: calc(30 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  border-radius: calc(50 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(74, 144, 226, 0.5);
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
}.web-route-pages-question-question .question-toggle-btn:active{
  transform: scale(0.95);
}.web-route-pages-question-question .pdf-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(16 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-question-question .pdf-info-icon{
  font-size: calc(100 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-question-question .pdf-info-name{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(10 * var(--rpx));
  text-align: center;
}.web-route-pages-question-question .pdf-info-size{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-question-question .pdf-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--rpx));
}.web-route-pages-question-question .pdf-action-btn{
  width: 100%;
  height: calc(88 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A90E2;
  color: #FFFFFF;
  font-size: calc(32 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  border: none;
}.web-route-pages-question-question .pdf-action-btn.primary{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}.web-route-pages-question-question .pdf-tip{
  font-size: calc(24 * var(--rpx));
  color: #999999;
  text-align: center;
  line-height: 1.6;
}.web-route-pages-question-question .file-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(16 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-question-question .file-info-icon{
  font-size: calc(100 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-question-question .file-info-name{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(10 * var(--rpx));
  text-align: center;
}.web-route-pages-question-question .file-info-size{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-question-question .file-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--rpx));
}.web-route-pages-question-question .file-action-btn{
  width: 100%;
  height: calc(88 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A90E2;
  color: #FFFFFF;
  font-size: calc(32 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  border: none;
}.web-route-pages-question-question .file-action-btn.primary{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}.web-route-pages-question-question .file-tip{
  font-size: calc(24 * var(--rpx));
  color: #999999;
  text-align: center;
  line-height: 1.6;
}.web-route-pages-question-question .material-content{
  background: #f8f9fa;
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin: calc(20 * var(--rpx)) 0;
  border-left: calc(4 * var(--rpx)) solid #3498db;
}.web-route-pages-question-question .material-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #3498db;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-question-question .material-text{
  font-size: calc(26 * var(--rpx));
  color: #333333;
  line-height: 1.6;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-question-question .material-image{
  width: 100%;
  border-radius: calc(8 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
}.web-route-pages-question-question .sub-questions{
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-question-question .sub-question{
  background: #f0f2f5;
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-question-question .sub-question-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-question-question .sub-question-number{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3498db;
  color: white;
  border-radius: 50%;
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-question-question .sub-question-type{
  font-size: calc(24 * var(--rpx));
  font-weight: 500;
  color: #3498db;
}.web-route-pages-question-question .sub-question-content{
  font-size: calc(26 * var(--rpx));
  color: #333333;
  line-height: 1.6;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-question-question .file-download-btn{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  background: rgba(255, 255, 255, 0.2);
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  cursor: pointer;
  transition: all 0.3s;
}.web-route-pages-question-question .file-download-btn:active{
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.3);
}.web-route-pages-question-question .file-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-question-question .file-text{
  font-size: calc(24 * var(--rpx));
  font-weight: 500;
}.web-route-pages-question-question .file-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}.web-route-pages-question-question .file-modal.active{
  opacity: 1;
  visibility: visible;
}.web-route-pages-question-question .file-modal-content{
  width: calc(600 * var(--rpx));
  max-height: calc(800 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  overflow: hidden;
  transform: scale(0.9);
  transition: all 0.3s;
}.web-route-pages-question-question .file-modal.active .file-modal-content{
  transform: scale(1);
}.web-route-pages-question-question .file-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(30 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #E8E8E8;
}.web-route-pages-question-question .file-modal-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-question-question .file-modal-close{
  font-size: calc(48 * var(--rpx));
  color: #999999;
  cursor: pointer;
  line-height: 1;
}.web-route-pages-question-question .file-list{
  max-height: calc(600 * var(--rpx));
  padding: calc(20 * var(--rpx));
}.web-route-pages-question-question .file-item{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx));
  background: #F8F9FA;
  border-radius: calc(12 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
  cursor: pointer;
  transition: all 0.3s;
}.web-route-pages-question-question .file-item:active{
  transform: scale(0.98);
  background: #E8E8E8;
}.web-route-pages-question-question .file-item-icon{
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E8;
  border-radius: calc(12 * var(--rpx));
  font-size: calc(40 * var(--rpx));
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-question-question .file-item-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}.web-route-pages-question-question .file-item-name{
  font-size: calc(28 * var(--rpx));
  color: #333333;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-question-question .file-item-size{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-question-question .file-item-download{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4A90E2;
  border-radius: 50%;
  font-size: calc(32 * var(--rpx));
  margin-left: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-question-question .canvas-container{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-question-question .preview-canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background: transparent;
}.web-route-pages-question-question .brush-tools{
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 0 0 0 calc(10 * var(--rpx));
  padding: calc(8 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.3);
  z-index: 100;
}.web-route-pages-question-question .brush-tools-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(6 * var(--rpx));
  padding-bottom: calc(4 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
}.web-route-pages-question-question .brush-tools-title{
  color: #FFFFFF;
  font-size: calc(14 * var(--rpx));
  font-weight: bold;
}.web-route-pages-question-question .brush-tools-close{
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 1;
  width: calc(24 * var(--rpx));
  height: calc(24 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.2s;
}.web-route-pages-question-question .brush-tools-close:active{
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0.9);
}.web-route-pages-question-question .brush-tool-section{
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-question-question .brush-tool-section:last-child{
  margin-bottom: 0;
}.web-route-pages-question-question .brush-tool-title{
  color: #FFFFFF;
  font-size: calc(12 * var(--rpx));
  font-weight: 500;
  margin-bottom: calc(4 * var(--rpx));
  text-align: center;
}.web-route-pages-question-question .color-picker{
  display: flex;
  gap: calc(6 * var(--rpx));
  justify-content: center;
}.web-route-pages-question-question .color-item{
  width: calc(20 * var(--rpx));
  height: calc(20 * var(--rpx));
  border-radius: 50%;
  cursor: pointer;
  border: calc(1 * var(--rpx)) solid transparent;
  transition: all 0.2s;
}.web-route-pages-question-question .color-item.active{
  border-color: #FFFFFF;
  transform: scale(1.2);
}.web-route-pages-question-question .size-picker{
  display: flex;
  gap: calc(6 * var(--rpx));
  justify-content: center;
}.web-route-pages-question-question .size-item{
  width: calc(32 * var(--rpx));
  height: calc(32 * var(--rpx));
  border-radius: calc(6 * var(--rpx));
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s;
}.web-route-pages-question-question .size-item.active{
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}.web-route-pages-question-question .brush-btn{
  width: 100%;
  height: calc(32 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 77, 79, 0.3);
  border-radius: calc(16 * var(--rpx));
  color: #FFFFFF;
  font-size: calc(12 * var(--rpx));
  cursor: pointer;
  transition: all 0.2s;
}.web-route-pages-question-question .brush-btn:active{
  background: rgba(255, 77, 79, 0.5);
  transform: scale(0.95);
}
.web-route-pages-question-question .timer-bar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #FFFFFF;
  z-index: 100;
}
.web-route-pages-question-question .draft-btn{
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
  background: #FFFFFF;
  border: none;
  border-radius: calc(24 * var(--rpx));
  color: #4A90E2;
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.2);

  position: fixed !important;
  right: 20px !important;
  top: 100px !important;
  z-index: 999999 !important;
}
.web-route-pages-question-question .draft-btn:active{
  transform: scale(0.95);
  background: #F0F8FF;
}
.web-route-pages-question-question .draft-icon{
  font-size: calc(32 * var(--rpx));
  line-height: 1;
}
.web-route-pages-question-question .draft-label{
  font-size: calc(28 * var(--rpx));
  line-height: 1;
  font-weight: 500;
}
.web-route-pages-question-question .draft-icon{
  font-size: calc(32 * var(--rpx));
  line-height: 1;
}
.web-route-pages-question-question .draft-label{
  font-size: calc(28 * var(--rpx));
  line-height: 1;
  font-weight: 500;
}
.web-route-pages-question-question .transparent-draft-layer{
  position: fixed !important;
  top: calc(var(--web-nav-height) + env(safe-area-inset-top)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(1px) !important;
}
.web-route-pages-question-question .draft-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
}
.web-route-pages-question-question .draft-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}
.web-route-pages-question-question .draft-close-btn{
  width: calc(64 * var(--rpx));
  height: calc(64 * var(--rpx));
  border-radius: 50%;
  border: none;
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
  font-size: calc(48 * var(--rpx));
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.web-route-pages-question-question .draft-close-btn:active{
  transform: scale(0.9);
  background: rgba(255, 77, 79, 0.2);
}
.web-route-pages-question-question .draft-canvas-wrapper{
  flex: 1;
  width: 100%;
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.web-route-pages-question-question .draft-canvas{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  touch-action: none;
  z-index: 1;
}
.web-route-pages-question-question .draft-controls{
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 calc(-4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(20 * var(--rpx));
  position: relative;
  z-index: 2;
}
.web-route-pages-question-question .draft-btn-clear{
  padding: calc(12 * var(--rpx)) calc(28 * var(--rpx));
  background: rgba(255, 77, 79, 0.1);
  border: none;
  border-radius: calc(24 * var(--rpx));
  color: #ff4d4f;
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.web-route-pages-question-question .draft-btn-clear:active{
  transform: scale(0.95);
  background: rgba(255, 77, 79, 0.2);
}
.web-route-pages-question-question .draft-brush-colors{
  display: flex;
  gap: calc(12 * var(--rpx));
  align-items: center;
}
.web-route-pages-question-question .draft-color-btn{
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  border-radius: 50%;
  border: calc(4 * var(--rpx)) solid transparent;
  cursor: pointer;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
.web-route-pages-question-question .draft-color-btn.active{
  border-color: #333333;
  transform: scale(1.15);
}
.web-route-pages-question-question .draft-brush-sizes{
  display: flex;
  gap: calc(12 * var(--rpx));
  align-items: center;
}
.web-route-pages-question-question .draft-size-btn{
  padding: calc(10 * var(--rpx)) calc(24 * var(--rpx));
  background: rgba(102, 126, 234, 0.1);
  border: none;
  border-radius: calc(20 * var(--rpx));
  color: #667eea;
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}
.web-route-pages-question-question .draft-size-btn.active{
  background: #667eea;
  color: #FFFFFF;
  transform: scale(1.05);
}
.web-route-pages-question-question .draft-size-btn:active{
  transform: scale(0.95);
}
.web-route-pages-question-question .whiteboard-container{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.web-route-pages-question-question .whiteboard-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  background: rgba(0, 0, 0, 0.8);
  border-bottom: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
}
.web-route-pages-question-question .whiteboard-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
}
.web-route-pages-question-question .whiteboard-close{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
  cursor: pointer;
  line-height: 1;
}
.web-route-pages-question-question .whiteboard-canvas{
  flex: 1;
  background: #FFFFFF;
  margin: calc(20 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}
.web-route-pages-question-question .whiteboard-controls{
  padding: calc(20 * var(--rpx));
  background: rgba(0, 0, 0, 0.8);
  border-top: calc(1 * var(--rpx)) solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--rpx));
  justify-content: center;
  align-items: center;
}
.web-route-pages-question-question .whiteboard-controls .brush-tool-section{
  margin-bottom: 0;
}
.web-route-pages-question-question .zoom-btn.brush{
  background: rgba(255, 215, 0, 0.3);
}
.web-route-pages-question-question .zoom-btn.whiteboard{
  background: rgba(144, 238, 144, 0.3);
}

/* pages/result/result */

.web-route-pages-result-result .result-header{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0 0 calc(40 * var(--rpx)) calc(40 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
  margin: -calc(20 * var(--rpx)) -calc(20 * var(--rpx)) calc(30 * var(--rpx)) -calc(20 * var(--rpx));
  text-align: center;
  color: #FFFFFF;
}.web-route-pages-result-result .score-circle{
  width: calc(240 * var(--rpx));
  height: calc(240 * var(--rpx));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 auto calc(30 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: calc(8 * var(--rpx)) solid rgba(255, 255, 255, 0.3);
}.web-route-pages-result-result .score-circle.pass{
  border-color: rgba(82, 196, 26, 0.5);
  box-shadow: 0 0 calc(40 * var(--rpx)) rgba(82, 196, 26, 0.3);
}.web-route-pages-result-result .score-circle.fail{
  border-color: rgba(255, 77, 79, 0.5);
}.web-route-pages-result-result .score-value{
  font-size: calc(80 * var(--rpx));
  font-weight: bold;
  line-height: 1;
}.web-route-pages-result-result .score-total{
  font-size: calc(32 * var(--rpx));
  opacity: 0.8;
}.web-route-pages-result-result .score-label{
  font-size: calc(24 * var(--rpx));
  opacity: 0.9;
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-result-result .result-status{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--rpx));
}.web-route-pages-result-result .status-icon{
  font-size: calc(64 * var(--rpx));
}.web-route-pages-result-result .status-text{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
}.web-route-pages-result-result .stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-result-result .stat-card{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-result-result .stat-icon{
  font-size: calc(48 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-result-result .stat-content{
  display: flex;
  flex-direction: column;
  align-items: center;
}.web-route-pages-result-result .stat-value{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(4 * var(--rpx));
}.web-route-pages-result-result .stat-label{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-result-result .action-buttons{
  display: flex;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-result-result .btn{
  flex: 1;
  height: calc(88 * var(--rpx));
  border-radius: calc(44 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border: none;
}.web-route-pages-result-result .btn-primary{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}.web-route-pages-result-result .btn-outline{
  background: transparent;
  border: calc(2 * var(--rpx)) solid #4A90E2;
  color: #4A90E2;
}.web-route-pages-result-result .tip-box{
  background: rgba(250, 173, 20, 0.1);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
}.web-route-pages-result-result .tip-icon{
  font-size: calc(32 * var(--rpx));
}.web-route-pages-result-result .tip-text{
  flex: 1;
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.6;
}

/* pages/leaderboard/leaderboard */

.web-route-pages-leaderboard-leaderboard .exam-selector{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .selector-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-leaderboard-leaderboard .selector-text{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-leaderboard-leaderboard .selector-arrow{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-leaderboard-leaderboard .top-three{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(40 * var(--rpx));
  padding: calc(40 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .rank-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}.web-route-pages-leaderboard-leaderboard .rank-item.first{
  z-index: 2;
}.web-route-pages-leaderboard-leaderboard .rank-item.first .rank-avatar{
  width: calc(120 * var(--rpx));
  height: calc(120 * var(--rpx));
  border: calc(6 * var(--rpx)) solid #FFD700;
}.web-route-pages-leaderboard-leaderboard .rank-item.second{
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .rank-item.second .rank-avatar{
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  border: calc(4 * var(--rpx)) solid #C0C0C0;
}.web-route-pages-leaderboard-leaderboard .rank-item.third{
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .rank-item.third .rank-avatar{
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  border: calc(4 * var(--rpx)) solid #CD7F32;
}.web-route-pages-leaderboard-leaderboard .rank-badge{
  width: calc(50 * var(--rpx));
  height: calc(50 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
  margin-bottom: calc(12 * var(--rpx));
  position: absolute;
  top: -calc(20 * var(--rpx));
  right: -calc(10 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .rank-item.first .rank-badge{
  background: #FFD700;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(255, 215, 0, 0.4);
}.web-route-pages-leaderboard-leaderboard .rank-item.second .rank-badge{
  background: #C0C0C0;
}.web-route-pages-leaderboard-leaderboard .rank-item.third .rank-badge{
  background: #CD7F32;
}.web-route-pages-leaderboard-leaderboard .rank-avatar{
  border-radius: 50%;
  background: #F8F9FA;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .rank-avatar.default-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0E0E0;
}.web-route-pages-leaderboard-leaderboard .avatar-text{
  font-size: calc(48 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .rank-name{
  font-size: calc(24 * var(--rpx));
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: calc(8 * var(--rpx));
  max-width: calc(120 * var(--rpx));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-leaderboard-leaderboard .rank-score{
  font-size: calc(28 * var(--rpx));
  color: #FFD700;
  font-weight: bold;
}.web-route-pages-leaderboard-leaderboard .leaderboard-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-leaderboard-leaderboard .list-item{
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}.web-route-pages-leaderboard-leaderboard .list-item.current-user{
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(53, 122, 189, 0.1) 100%);
  border: calc(2 * var(--rpx)) solid #4A90E2;
}.web-route-pages-leaderboard-leaderboard .item-rank{
  width: calc(50 * var(--rpx));
  height: calc(50 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F9FA;
  border-radius: 50%;
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #666666;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-leaderboard-leaderboard .item-avatar{
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  border-radius: 50%;
  background: #F8F9FA;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-leaderboard-leaderboard .item-avatar.default-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0E0E0;
}.web-route-pages-leaderboard-leaderboard .item-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--rpx));
  min-width: 0;
}.web-route-pages-leaderboard-leaderboard .item-name{
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-leaderboard-leaderboard .item-time{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-leaderboard-leaderboard .item-score{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  margin-left: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-leaderboard-leaderboard .me-badge{
  background: #FF6B6B;
  color: #FFFFFF;
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  padding: calc(4 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  margin-left: calc(10 * var(--rpx));
  animation: pulse 2s infinite;
}.web-route-pages-leaderboard-leaderboard .rank-item .me-badge{
  position: absolute;
  top: -calc(10 * var(--rpx));
  right: -calc(20 * var(--rpx));
  background: #FF6B6B;
  color: #FFFFFF;
  font-size: calc(20 * var(--rpx));
  font-weight: bold;
  padding: calc(4 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  animation: pulse 2s infinite;
}@keyframes pulse{
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}@keyframes fadeIn{
  from {
    opacity: 0;
    transform: translateY(calc(20 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@keyframes slideIn{
  from {
    opacity: 0;
    transform: translateX(-calc(20 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}@keyframes bounceIn{
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}.web-route-pages-leaderboard-leaderboard .top-three{
  animation: fadeIn 0.8s ease-out;
}.web-route-pages-leaderboard-leaderboard .rank-item.first{
  animation: bounceIn 0.6s ease-out 0.1s both;
}.web-route-pages-leaderboard-leaderboard .rank-item.second{
  animation: bounceIn 0.6s ease-out 0.2s both;
}.web-route-pages-leaderboard-leaderboard .rank-item.third{
  animation: bounceIn 0.6s ease-out 0.3s both;
}.web-route-pages-leaderboard-leaderboard .leaderboard-list{
  animation: fadeIn 0.8s ease-out 0.4s both;
}.web-route-pages-leaderboard-leaderboard .list-item{
  animation: slideIn 0.5s ease-out;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.web-route-pages-leaderboard-leaderboard .list-item:nth-child(1){
  animation-delay: 0.5s;
}.web-route-pages-leaderboard-leaderboard .list-item:nth-child(2){
  animation-delay: 0.6s;
}.web-route-pages-leaderboard-leaderboard .list-item:nth-child(3){
  animation-delay: 0.7s;
}.web-route-pages-leaderboard-leaderboard .list-item:nth-child(4){
  animation-delay: 0.8s;
}.web-route-pages-leaderboard-leaderboard .list-item:nth-child(5){
  animation-delay: 0.9s;
}.web-route-pages-leaderboard-leaderboard .list-item:hover{
  transform: translateX(calc(10 * var(--rpx))) scale(1.02);
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(74, 144, 226, 0.3);
}.web-route-pages-leaderboard-leaderboard .list-item.current-user{
  animation: pulse 2s infinite;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.web-route-pages-leaderboard-leaderboard .selector-box{
  animation: fadeIn 0.6s ease-out;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.web-route-pages-leaderboard-leaderboard .selector-box:hover{
  transform: translateY(-calc(4 * var(--rpx)));
  box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.12);
}


/* pages/my/my */

.web-route-pages-my-my .user-header{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0 0 calc(40 * var(--rpx)) calc(40 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
  margin: -calc(20 * var(--rpx)) -calc(20 * var(--rpx)) calc(30 * var(--rpx)) -calc(20 * var(--rpx));
  display: flex;
  align-items: center;
  gap: calc(24 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
}.web-route-pages-my-my .user-header::before{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
  animation: pulse 3s infinite;
}.web-route-pages-my-my .user-avatar{
  width: calc(120 * var(--rpx));
  height: calc(120 * var(--rpx));
  border-radius: 50%;
  background: #FFFFFF;
  border: calc(4 * var(--rpx)) solid rgba(255, 255, 255, 0.3);
}.web-route-pages-my-my .user-avatar.default-avatar{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E0E0E0;
  border: calc(4 * var(--rpx)) solid rgba(255, 255, 255, 0.3);
}.web-route-pages-my-my .avatar-text{
  font-size: calc(60 * var(--rpx));
}.web-route-pages-my-my .user-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}.web-route-pages-my-my .user-name{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
}.web-route-pages-my-my .user-id{
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.8);
}.web-route-pages-my-my .user-id.guest{
  color: #FFD700;
  font-size: calc(22 * var(--rpx));
}.web-route-pages-my-my .login-btn{
  background: #07c160;
  color: #fff;
  font-size: calc(28 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx));
  border-radius: calc(32 * var(--rpx));
  border: none;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-my-my .login-btn::after{
  border: none;
}.web-route-pages-my-my .stats-section{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-my-my .stat-card{
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
}.web-route-pages-my-my .stat-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, #4A90E2 0%, #667eea 100%);
  border-radius: calc(4 * var(--rpx)) calc(4 * var(--rpx)) 0 0;
}.web-route-pages-my-my .stat-card:hover{
  transform: translateY(-calc(4 * var(--rpx))) scale(1.05);
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(74, 144, 226, 0.2);
  border-color: #4A90E2;
}.web-route-pages-my-my .stat-value{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-my-my .stat-label{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-my-my .menu-section{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-my-my .menu-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(30 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #F0F0F0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}.web-route-pages-my-my .menu-item::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.1) 50%, transparent 100%);
  transition: left 0.5s ease;
}.web-route-pages-my-my .menu-item:hover::before{
  left: 100%;
}.web-route-pages-my-my .menu-item:last-child{
  border-bottom: none;
}.web-route-pages-my-my .menu-item:hover{
  background: #F8F9FA;
  transform: translateX(calc(8 * var(--rpx)));
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.05);
}.web-route-pages-my-my .menu-item:active{
  background: #E9ECEF;
  transform: translateX(calc(4 * var(--rpx))) scale(0.98);
}.web-route-pages-my-my .menu-left{
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  position: relative;
}.web-route-pages-my-my .badge{
  background: #ff4757;
  color: #fff;
  font-size: calc(22 * var(--rpx));
  min-width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  border-radius: calc(18 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(10 * var(--rpx));
  margin-left: calc(10 * var(--rpx));
}.web-route-pages-my-my .menu-icon{
  font-size: calc(36 * var(--rpx));
}.web-route-pages-my-my .menu-text{
  font-size: calc(30 * var(--rpx));
  color: #333333;
}.web-route-pages-my-my .menu-arrow{
  font-size: calc(28 * var(--rpx));
  color: #999999;
}.web-route-pages-my-my .version-info{
  text-align: center;
  padding: calc(40 * var(--rpx)) 0;
  color: #CCCCCC;
  font-size: calc(24 * var(--rpx));
}.web-route-pages-my-my .auth-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}.web-route-pages-my-my .auth-modal-content{
  background: #FFFFFF;
  border-radius: calc(24 * var(--rpx));
  width: 80%;
  max-width: calc(600 * var(--rpx));
  overflow: hidden;
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.2);
}.web-route-pages-my-my .auth-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(30 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}.web-route-pages-my-my .auth-modal-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #FFFFFF;
}.web-route-pages-my-my .auth-close-btn{
  font-size: calc(36 * var(--rpx));
  color: #FFFFFF;
  padding: 0 calc(10 * var(--rpx));
}.web-route-pages-my-my .auth-modal-body{
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
}.web-route-pages-my-my .auth-desc{
  font-size: calc(28 * var(--rpx));
  color: #666666;
  margin-bottom: calc(30 * var(--rpx));
  display: block;
  text-align: center;
}.web-route-pages-my-my .auth-input{
  width: 100%;
  height: calc(80 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #E0E0E0;
  border-radius: calc(12 * var(--rpx));
  padding: 0 calc(20 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  margin-bottom: calc(40 * var(--rpx));
  box-sizing: border-box;
}.web-route-pages-my-my .auth-input:focus{
  border-color: #667eea;
  outline: none;
}.web-route-pages-my-my .auth-btn-group{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-my-my .auth-btn{
  flex: 1;
  height: calc(80 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}.web-route-pages-my-my .auth-btn.cancel{
  background: #F0F0F0;
  color: #666666;
}.web-route-pages-my-my .auth-btn.confirm{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #FFFFFF;
}.web-route-pages-my-my .auth-btn::after{
  border: none;
}.web-route-pages-my-my .popup-editor-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-my-my .popup-editor-content{
  width: 90%;
  max-width: calc(700 * var(--rpx));
  max-height: 85%;
  background: #FFFFFF;
  border-radius: calc(24 * var(--rpx));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popupShow 0.3s ease-out;
}@keyframes popupShow{
  from {
    opacity: 0;
    transform: scale(0.8) translateY(calc(50 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}.web-route-pages-my-my .popup-editor-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(30 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-my-my .popup-editor-title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-my-my .popup-editor-close{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  color: #666666;
}.web-route-pages-my-my .popup-editor-body{
  flex: 1;
  padding: calc(30 * var(--rpx));
  max-height: calc(800 * var(--rpx));
}.web-route-pages-my-my .editor-item{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-my-my .editor-label{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: #333333;
  font-weight: 500;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-my-my .editor-input{
  width: 100%;
  height: calc(80 * var(--rpx));
  padding: 0 calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #e0e0e0;
  border-radius: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #333333;
  box-sizing: border-box;
}.web-route-pages-my-my .editor-textarea{
  width: 100%;
  height: calc(200 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #e0e0e0;
  border-radius: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #333333;
  box-sizing: border-box;
}.web-route-pages-my-my .image-selector{
  width: 100%;
  height: calc(300 * var(--rpx));
  border: calc(2 * var(--rpx)) dashed #cccccc;
  border-radius: calc(12 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(20 * var(--rpx));
  overflow: hidden;
}.web-route-pages-my-my .selected-image{
  width: 100%;
  height: 100%;
}.web-route-pages-my-my .image-placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999999;
}.web-route-pages-my-my .placeholder-icon{
  font-size: calc(60 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-my-my .placeholder-text{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-my-my .limit-selector{
  display: flex;
  gap: calc(16 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-my-my .limit-option{
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #e0e0e0;
  border-radius: calc(32 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #666666;
  background: #f9f9f9;
  transition: all 0.3s ease;
}.web-route-pages-my-my .limit-option.active{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #FFFFFF;
  border-color: #667eea;
}.web-route-pages-my-my .popup-editor-actions{
  display: flex;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx)) calc(40 * var(--rpx));
  gap: calc(20 * var(--rpx));
  border-top: calc(2 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-my-my .editor-action-btn{
  flex: 1;
  height: calc(88 * var(--rpx));
  border-radius: calc(44 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}.web-route-pages-my-my .editor-action-btn.preview-btn{
  background: #f0f0f0;
  color: #666666;
}.web-route-pages-my-my .editor-action-btn.save-btn{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #FFFFFF;
}.web-route-pages-my-my .editor-action-btn::after{
  border: none;
}


/* pages/history/history */

.web-route-pages-history-history .record-list{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-history-history .record-card{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}.web-route-pages-history-history .record-card:active{
  transform: translateY(-calc(2 * var(--rpx)));
  box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.12);
}.web-route-pages-history-history .card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-history-history .exam-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
  flex: 1;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-history-history .exam-status{
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  font-weight: 500;
}.web-route-pages-history-history .exam-status.pass{
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
}.web-route-pages-history-history .exam-status.fail{
  background: rgba(255, 77, 79, 0.1);
  color: #FF4D4F;
}.web-route-pages-history-history .card-body{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-history-history .score-section{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.05) 0%, rgba(53, 122, 189, 0.05) 100%);
  border-radius: calc(16 * var(--rpx));
}.web-route-pages-history-history .score-info{
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--rpx));
}.web-route-pages-history-history .score-label{
  font-size: calc(26 * var(--rpx));
  color: #999999;
}.web-route-pages-history-history .score-value{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  line-height: 1;
}.web-route-pages-history-history .score-value.pass{
  color: #52C41A;
}.web-route-pages-history-history .score-value.fail{
  color: #FF4D4F;
}.web-route-pages-history-history .score-total{
  font-size: calc(28 * var(--rpx));
  color: #999999;
}.web-route-pages-history-history .score-rate{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}.web-route-pages-history-history .rate-value{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
}.web-route-pages-history-history .rate-label{
  font-size: calc(22 * var(--rpx));
  color: #999999;
}.web-route-pages-history-history .info-row{
  display: flex;
  align-items: center;
  gap: calc(40 * var(--rpx));
}.web-route-pages-history-history .info-item{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
}.web-route-pages-history-history .info-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-history-history .info-text{
  font-size: calc(26 * var(--rpx));
  color: #666666;
}.web-route-pages-history-history .card-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-history-history .footer-text{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-history-history .footer-arrow{
  font-size: calc(28 * var(--rpx));
  color: #4A90E2;
  font-weight: bold;
}

/* pages/analysis/analysis */

.web-route-pages-analysis-analysis .question-list{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .question-item{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
  border-left: calc(6 * var(--rpx)) solid transparent;
}.web-route-pages-analysis-analysis .question-item.correct{
  border-left-color: #52C41A;
}.web-route-pages-analysis-analysis .question-item.wrong{
  border-left-color: #FF4D4F;
}.web-route-pages-analysis-analysis .question-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .question-number{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F9FA;
  border-radius: 50%;
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #666666;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .question-item.correct .question-number{
  background: rgba(82, 196, 26, 0.1);
  color: #52C41A;
}.web-route-pages-analysis-analysis .question-item.wrong .question-number{
  background: rgba(255, 77, 79, 0.1);
  color: #FF4D4F;
}.web-route-pages-analysis-analysis .question-status{
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .status-icon{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
}.web-route-pages-analysis-analysis .question-item.correct .status-icon{
  color: #52C41A;
}.web-route-pages-analysis-analysis .question-item.wrong .status-icon{
  color: #FF4D4F;
}.web-route-pages-analysis-analysis .status-text{
  font-size: calc(26 * var(--rpx));
  font-weight: 500;
}.web-route-pages-analysis-analysis .question-item.correct .status-text{
  color: #52C41A;
}.web-route-pages-analysis-analysis .question-item.wrong .status-text{
  color: #FF4D4F;
}.web-route-pages-analysis-analysis .question-score{
  font-size: calc(24 * var(--rpx));
  color: #999999;
  background: #F8F9FA;
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .question-content{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .question-text{
  font-size: calc(28 * var(--rpx));
  color: #333333;
  line-height: 1.8;
  font-weight: 500;
}.web-route-pages-analysis-analysis .question-image{
  width: 100%;
  border-radius: calc(8 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .options-list{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-analysis-analysis .option-item{
  display: flex;
  align-items: center;
  padding: calc(20 * var(--rpx));
  background: #F8F9FA;
  border-radius: calc(12 * var(--rpx));
  border: calc(2 * var(--rpx)) solid transparent;
  position: relative;
}.web-route-pages-analysis-analysis .option-item.correct-answer{
  background: rgba(82, 196, 26, 0.05);
  border-color: #52C41A;
}.web-route-pages-analysis-analysis .option-item.wrong-answer{
  background: rgba(255, 77, 79, 0.05);
  border-color: #FF4D4F;
}.web-route-pages-analysis-analysis .option-item.user-answer{
  background: rgba(24, 144, 255, 0.05);
  border-color: #1890FF;
}.web-route-pages-analysis-analysis .option-label{
  width: calc(44 * var(--rpx));
  height: calc(44 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E8E8E8;
  border-radius: 50%;
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #666666;
  margin-right: calc(16 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-analysis-analysis .option-item.correct-answer .option-label{
  background: #52C41A;
  color: #FFFFFF;
}.web-route-pages-analysis-analysis .option-item.wrong-answer .option-label{
  background: #FF4D4F;
  color: #FFFFFF;
}.web-route-pages-analysis-analysis .option-value{
  flex: 1;
  font-size: calc(26 * var(--rpx));
  color: #333333;
  line-height: 1.6;
}.web-route-pages-analysis-analysis .option-formula-image{
  flex: 1;
  width: 100%;
  max-width: calc(420 * var(--rpx));
  display: block;
}.web-route-pages-analysis-analysis .option-badge{
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  font-weight: 500;
  margin-left: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .option-badge.correct{
  background: #52C41A;
  color: #FFFFFF;
}.web-route-pages-analysis-analysis .option-badge.wrong{
  background: #FF4D4F;
  color: #FFFFFF;
}.web-route-pages-analysis-analysis .option-badge.user{
  background: #1890FF;
  color: #FFFFFF;
}.web-route-pages-analysis-analysis .analysis-section{
  background: rgba(250, 173, 20, 0.05);
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  border-left: calc(4 * var(--rpx)) solid #FAAD14;
}.web-route-pages-analysis-analysis .analysis-header{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .analysis-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-analysis-analysis .analysis-title{
  font-size: calc(26 * var(--rpx));
  font-weight: bold;
  color: #FAAD14;
}.web-route-pages-analysis-analysis .analysis-content{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.8;
}.web-route-pages-analysis-analysis .summary-card{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  color: #FFFFFF;
}.web-route-pages-analysis-analysis .summary-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  margin-bottom: calc(20 * var(--rpx));
  text-align: center;
}.web-route-pages-analysis-analysis .summary-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .summary-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--rpx));
}.web-route-pages-analysis-analysis .summary-label{
  font-size: calc(24 * var(--rpx));
  opacity: 0.9;
}.web-route-pages-analysis-analysis .summary-value{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
}.web-route-pages-analysis-analysis .summary-value.correct{
  color: #52C41A;
}.web-route-pages-analysis-analysis .summary-value.wrong{
  color: #FF4D4F;
}.web-route-pages-analysis-analysis .material-content{
  background: #f8f9fa;
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin: calc(20 * var(--rpx)) 0;
  border-left: calc(4 * var(--rpx)) solid #3498db;
  position: sticky;
  top: calc(88 * var(--rpx));
  z-index: 100;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.1);
}.web-route-pages-analysis-analysis .material-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #3498db;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .material-text{
  font-size: calc(26 * var(--rpx));
  color: #333333;
  line-height: 1.6;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-analysis-analysis .material-image{
  width: 100%;
  border-radius: calc(8 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-questions{
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-question{
  background: #f0f2f5;
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-question-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-question-number{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3498db;
  color: white;
  border-radius: 50%;
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-question-type{
  font-size: calc(24 * var(--rpx));
  font-weight: 500;
  color: #3498db;
}.web-route-pages-analysis-analysis .sub-question-content{
  font-size: calc(26 * var(--rpx));
  color: #333333;
  line-height: 1.6;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-question.correct{
  border: calc(2 * var(--rpx)) solid rgba(82, 196, 26, 0.18);
}.web-route-pages-analysis-analysis .sub-question.wrong{
  border: calc(2 * var(--rpx)) solid rgba(255, 77, 79, 0.18);
}.web-route-pages-analysis-analysis .sub-question-status{
  margin-left: auto;
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  padding: calc(4 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
}.web-route-pages-analysis-analysis .sub-question-status.correct{
  background: rgba(82, 196, 26, 0.12);
  color: #52C41A;
}.web-route-pages-analysis-analysis .sub-question-status.wrong{
  background: rgba(255, 77, 79, 0.12);
  color: #FF4D4F;
}.web-route-pages-analysis-analysis .analysis-actions{
  margin-top: calc(16 * var(--rpx));
  display: flex;
  justify-content: flex-end;
}.web-route-pages-analysis-analysis .wrongbook-btn,
.web-route-pages-analysis-analysis .summary-btn{
  border: none;
  border-radius: calc(999 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(26 * var(--rpx));
  background: linear-gradient(135deg, #FF9F43 0%, #FF7A00 100%);
  color: #FFFFFF;
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
}.web-route-pages-analysis-analysis .summary-actions{
  margin-top: calc(20 * var(--rpx));
  display: flex;
  justify-content: center;
}

/* pages/idiom/idiom */

.web-route-pages-idiom-idiom .container{
  background: #F5F7FA;
  min-height: 100vh;
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-idiom-idiom .header{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx)) calc(40 * var(--rpx));
  margin: -calc(20 * var(--rpx)) -calc(20 * var(--rpx)) calc(30 * var(--rpx)) -calc(20 * var(--rpx));
  color: #FFFFFF;
  border-radius: 0 0 calc(40 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-idiom-idiom .header .title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
}.web-route-pages-idiom-idiom .idiom-detail{
  padding: 0 calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .idiom-card{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
  text-align: center;
}.web-route-pages-idiom-idiom .idiom-word{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  margin-bottom: calc(20 * var(--rpx));
  display: block;
}.web-route-pages-idiom-idiom .idiom-pronunciation{
  font-size: calc(28 * var(--rpx));
  color: #999999;
  margin-bottom: calc(30 * var(--rpx));
  display: block;
}.web-route-pages-idiom-idiom .idiom-meaning{
  font-size: calc(28 * var(--rpx));
  color: #333333;
  line-height: 1.6;
  margin-bottom: calc(20 * var(--rpx));
  text-align: left;
}.web-route-pages-idiom-idiom .idiom-example{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.5;
  text-align: left;
  background: #F8F9FA;
  padding: calc(20 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-idiom-idiom .navigation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .nav-btn{
  flex: 1;
  padding: calc(16 * var(--rpx));
  margin: 0 calc(10 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  font-size: calc(28 * var(--rpx));
}.web-route-pages-idiom-idiom .nav-btn:disabled{
  opacity: 0.5;
}.web-route-pages-idiom-idiom .progress{
  font-size: calc(28 * var(--rpx));
  color: #666666;
  font-weight: 500;
}.web-route-pages-idiom-idiom .memorize-section{
  padding: 0 calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .section-title{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-idiom-idiom .section-title .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
  display: block;
}.web-route-pages-idiom-idiom .progress-bar{
  width: 100%;
  height: calc(16 * var(--rpx));
  background: #E8E8E8;
  border-radius: calc(8 * var(--rpx));
  overflow: hidden;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-idiom-idiom .progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #4A90E2 0%, #357ABD 100%);
  border-radius: calc(8 * var(--rpx));
  transition: width 0.3s;
}.web-route-pages-idiom-idiom .progress-text{
  font-size: calc(24 * var(--rpx));
  color: #666666;
  text-align: right;
}.web-route-pages-idiom-idiom .daily-progress-text{
  font-size: calc(24 * var(--rpx));
  color: #4A90E2;
  font-weight: 500;
  text-align: right;
  margin-top: calc(8 * var(--rpx));
}.web-route-pages-idiom-idiom .action-buttons{
  padding: 0 calc(20 * var(--rpx));
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .action-btn{
  flex: 1;
  min-width: calc(180 * var(--rpx));
  padding: calc(16 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  font-weight: 500;
  margin: calc(5 * var(--rpx));
}.web-route-pages-idiom-idiom .action-btn.primary{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
}.web-route-pages-idiom-idiom .action-btn.secondary{
  background: #FFFFFF;
  color: #4A90E2;
  border: calc(2 * var(--rpx)) solid #4A90E2;
}.web-route-pages-idiom-idiom .recent-section{
  padding: 0 calc(20 * var(--rpx));
}.web-route-pages-idiom-idiom .recent-list{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-idiom-idiom .recent-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(20 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-idiom-idiom .recent-item:last-child{
  border-bottom: none;
}.web-route-pages-idiom-idiom .recent-word{
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  color: #333333;
}.web-route-pages-idiom-idiom .recent-date{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-idiom-idiom .rankings-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}.web-route-pages-idiom-idiom .rankings-content{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}.web-route-pages-idiom-idiom .rankings-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-idiom-idiom .rankings-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-idiom-idiom .close-btn{
  font-size: calc(32 * var(--rpx));
  color: #999999;
  cursor: pointer;
}.web-route-pages-idiom-idiom .ranking-section{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .ranking-section .section-title{
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  color: #333333;
  margin-bottom: calc(15 * var(--rpx));
  display: block;
}.web-route-pages-idiom-idiom .ranking-list{
  background: #F8F9FA;
  border-radius: calc(10 * var(--rpx));
  padding: calc(10 * var(--rpx));
}.web-route-pages-idiom-idiom .ranking-item{
  display: flex;
  align-items: center;
  padding: calc(15 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
  background: #FFFFFF;
  border-radius: calc(8 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.05);
}.web-route-pages-idiom-idiom .ranking-item:last-child{
  margin-bottom: 0;
}.web-route-pages-idiom-idiom .rank{
  width: calc(50 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  text-align: center;
}.web-route-pages-idiom-idiom .nickname{
  flex: 1;
  font-size: calc(26 * var(--rpx));
  color: #333333;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-idiom-idiom .score{
  font-size: calc(26 * var(--rpx));
  font-weight: 500;
  color: #4A90E2;
}.web-route-pages-idiom-idiom .empty-ranking{
  text-align: center;
  padding: calc(30 * var(--rpx));
  color: #999999;
  font-size: calc(24 * var(--rpx));
}.web-route-pages-idiom-idiom .memorized-section{
  padding: 0 calc(20 * var(--rpx));
  margin-top: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .memorized-section .section-title{
  display: flex;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-idiom-idiom .memorized-section .section-title .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-idiom-idiom .memorized-section .section-title .subtitle{
  font-size: calc(24 * var(--rpx));
  color: #4A90E2;
  margin-left: calc(10 * var(--rpx));
}.web-route-pages-idiom-idiom .memorized-list{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-idiom-idiom .memorized-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(20 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-idiom-idiom .memorized-item:last-child{
  border-bottom: none;
}.web-route-pages-idiom-idiom .memorized-info{
  display: flex;
  flex-direction: column;
  flex: 1;
}.web-route-pages-idiom-idiom .memorized-word{
  font-size: calc(30 * var(--rpx));
  font-weight: 500;
  color: #333333;
}.web-route-pages-idiom-idiom .memorized-pronunciation{
  font-size: calc(22 * var(--rpx));
  color: #666666;
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-idiom-idiom .memorized-date{
  font-size: calc(22 * var(--rpx));
  color: #999999;
}.web-route-pages-idiom-idiom .empty-memorized{
  text-align: center;
  padding: calc(40 * var(--rpx));
  color: #999999;
  font-size: calc(26 * var(--rpx));
}.web-route-pages-idiom-idiom .memorized-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}.web-route-pages-idiom-idiom .memorized-modal-content{
  background: #FFFFFF;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  width: 85%;
  max-height: 70vh;
  overflow-y: auto;
}.web-route-pages-idiom-idiom .memorized-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-idiom-idiom .memorized-modal-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
}.web-route-pages-idiom-idiom .memorized-modal-body{
  display: flex;
  flex-direction: column;
}.web-route-pages-idiom-idiom .detail-word{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  text-align: center;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-idiom-idiom .detail-pronunciation{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-idiom-idiom .detail-meaning{
  font-size: calc(28 * var(--rpx));
  color: #333333;
  line-height: 1.6;
  margin-bottom: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #F8F9FA;
  border-radius: calc(10 * var(--rpx));
}.web-route-pages-idiom-idiom .detail-example{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.5;
  margin-bottom: calc(20 * var(--rpx));
  padding: calc(15 * var(--rpx));
  background: #FFF8E1;
  border-radius: calc(10 * var(--rpx));
  border-left: calc(4 * var(--rpx)) solid #FFC107;
}.web-route-pages-idiom-idiom .detail-date{
  font-size: calc(24 * var(--rpx));
  color: #999999;
  text-align: right;
  margin-top: calc(10 * var(--rpx));
}.web-route-pages-idiom-idiom .empty-state{
  background: #f5f5f5;
  border-radius: calc(20 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(20 * var(--rpx));
  margin: calc(20 * var(--rpx)) 0;
  text-align: center;
}.web-route-pages-idiom-idiom .empty-text{
  font-size: calc(32 * var(--rpx));
  color: #666666;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-idiom-idiom .empty-subtext{
  font-size: calc(28 * var(--rpx));
  color: #999999;
}

/* pages/forum/forum */

.web-route-pages-forum-forum{
  background: #fafafa;
}.web-route-pages-forum-forum .container{
  padding: calc(16 * var(--rpx));
  min-height: 100vh;
}.web-route-pages-forum-forum .publish-btn{
  background: #07c160;
  color: white;
  padding: calc(20 * var(--rpx)) calc(32 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--rpx));
}.web-route-pages-forum-forum .publish-btn-text{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-forum-forum .post-list{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .post-item{
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.06);
}.web-route-pages-forum-forum .post-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .avatar{
  width: calc(56 * var(--rpx));
  height: calc(56 * var(--rpx));
  border-radius: 50%;
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .user-info{
  flex: 1;
}.web-route-pages-forum-forum .user-info-top{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
}.web-route-pages-forum-forum .nickname{
  font-size: calc(26 * var(--rpx));
  font-weight: 500;
  color: #333;
}.web-route-pages-forum-forum .pinned-tag{
  font-size: calc(18 * var(--rpx));
  color: #fff;
  background: #ff4d4f;
  padding: calc(2 * var(--rpx)) calc(8 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
}.web-route-pages-forum-forum .post-time{
  font-size: calc(20 * var(--rpx));
  color: #999;
  margin-top: calc(2 * var(--rpx));
}.web-route-pages-forum-forum .post-content{
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .content-text{
  font-size: calc(28 * var(--rpx));
  line-height: 1.5;
  color: #333;
  white-space: pre-wrap;
  word-break: break-all;
}.web-route-pages-forum-forum .image-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(4 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .image-item{
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: calc(8 * var(--rpx));
  background: #f5f5f5;
}.web-route-pages-forum-forum .post-image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}.web-route-pages-forum-forum .file-list{
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .file-item{
  display: flex;
  align-items: center;
  padding: calc(12 * var(--rpx));
  background: #f8f8f8;
  border-radius: calc(8 * var(--rpx));
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-forum-forum .file-icon{
  font-size: calc(28 * var(--rpx));
  margin-right: calc(10 * var(--rpx));
}.web-route-pages-forum-forum .file-name{
  flex: 1;
  font-size: calc(24 * var(--rpx));
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-forum-forum .download-btn{
  background: linear-gradient(135deg, #74b9ff 0%, #a29bfe 100%);
  color: #fff;
  border: none;
  border-radius: calc(20 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  margin-left: calc(10 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(116, 185, 255, 0.25);
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
}.web-route-pages-forum-forum .download-btn::after{
  border: none;
}.web-route-pages-forum-forum .download-btn:active{
  transform: scale(0.95);
  box-shadow: 0 calc(2 * var(--rpx)) calc(6 * var(--rpx)) rgba(116, 185, 255, 0.15);
}.web-route-pages-forum-forum .post-footer{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(12 * var(--rpx));
  padding-top: calc(12 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #f5f5f5;
  gap: calc(24 * var(--rpx));
}.web-route-pages-forum-forum .post-action{
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
  padding: calc(6 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
}.web-route-pages-forum-forum .action-icon{
  font-size: calc(24 * var(--rpx));
}.web-route-pages-forum-forum .action-text{
  font-size: calc(22 * var(--rpx));
  color: #999;
}.web-route-pages-forum-forum .like-action.liked .action-text{
  color: #ff4d4f;
}.web-route-pages-forum-forum .share-action{
  margin: 0;
  padding: calc(6 * var(--rpx)) calc(12 * var(--rpx));
  line-height: inherit;
  background: transparent;
}.web-route-pages-forum-forum .share-action::after{
  border: none;
}.web-route-pages-forum-forum .modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
  backdrop-filter: blur(calc(4 * var(--rpx)));
}.web-route-pages-forum-forum .modal-content{
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border-radius: calc(32 * var(--rpx)) calc(32 * var(--rpx)) 0 0;
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 -calc(8 * var(--rpx)) calc(40 * var(--rpx)) rgba(0, 0, 0, 0.15);
}.web-route-pages-forum-forum .modal-top-bar{
  width: calc(60 * var(--rpx));
  height: calc(6 * var(--rpx));
  background: #e0e0e0;
  border-radius: calc(3 * var(--rpx));
  margin: calc(16 * var(--rpx)) auto calc(8 * var(--rpx));
}.web-route-pages-forum-forum .modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(20 * var(--rpx)) calc(32 * var(--rpx));
}.web-route-pages-forum-forum .header-left{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .modal-icon{
  font-size: calc(36 * var(--rpx));
}.web-route-pages-forum-forum .modal-title{
  font-size: calc(34 * var(--rpx));
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: calc(1 * var(--rpx));
}.web-route-pages-forum-forum .close-btn{
  width: calc(56 * var(--rpx));
  height: calc(56 * var(--rpx));
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}.web-route-pages-forum-forum .close-btn:active{
  background: #e8e8e8;
  transform: scale(0.95);
}.web-route-pages-forum-forum .close-icon{
  font-size: calc(28 * var(--rpx));
  color: #666;
  font-weight: 300;
}.web-route-pages-forum-forum .modal-body{
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx)) calc(24 * var(--rpx));
  max-height: 58vh;
  overflow-y: auto;
}.web-route-pages-forum-forum .input-section{
  position: relative;
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-forum-forum .content-input{
  width: 100%;
  min-height: calc(160 * var(--rpx));
  padding: calc(20 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #f0f0f0;
  border-radius: calc(16 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #333;
  background: #fff;
  box-sizing: border-box;
  line-height: 1.6;
  transition: border-color 0.3s;
}.web-route-pages-forum-forum .content-input:focus{
  border-color: #667eea;
}.web-route-pages-forum-forum .char-count{
  position: absolute;
  bottom: calc(16 * var(--rpx));
  right: calc(20 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  color: #999;
}.web-route-pages-forum-forum .upload-section{
  margin-bottom: calc(24 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  padding: calc(20 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #f5f5f5;
}.web-route-pages-forum-forum .section-header{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-forum-forum .section-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-forum-forum .section-title{
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  color: #333;
  flex: 1;
}.web-route-pages-forum-forum .section-desc{
  font-size: calc(24 * var(--rpx));
  color: #999;
  background: #f5f5f5;
  padding: calc(4 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .image-preview{
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rpx));
}.web-route-pages-forum-forum .preview-item{
  position: relative;
  width: calc(140 * var(--rpx));
  height: calc(140 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-forum-forum .preview-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}.web-route-pages-forum-forum .delete-image{
  position: absolute;
  top: calc(8 * var(--rpx));
  right: calc(8 * var(--rpx));
  width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}.web-route-pages-forum-forum .delete-image:active{
  transform: scale(0.9);
  background: rgba(255, 77, 79, 0.9);
}.web-route-pages-forum-forum .delete-icon{
  font-size: calc(20 * var(--rpx));
  color: #fff;
  font-weight: 300;
}.web-route-pages-forum-forum .upload-btn{
  width: calc(140 * var(--rpx));
  height: calc(140 * var(--rpx));
  border: calc(2 * var(--rpx)) dashed #d0d0d0;
  border-radius: calc(12 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  transition: all 0.3s;
}.web-route-pages-forum-forum .upload-btn:active{
  border-color: #667eea;
  background: #f0f3ff;
}.web-route-pages-forum-forum .upload-icon{
  font-size: calc(48 * var(--rpx));
  color: #999;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-forum-forum .upload-text{
  font-size: calc(24 * var(--rpx));
  color: #999;
}.web-route-pages-forum-forum .file-list{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .file-item{
  display: flex;
  align-items: center;
  background: #f8f9fa;
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .file-icon{
  font-size: calc(32 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-forum-forum .file-name{
  flex: 1;
  font-size: calc(26 * var(--rpx));
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-forum-forum .delete-file{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  background: #ff4d4f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}.web-route-pages-forum-forum .delete-file:active{
  transform: scale(0.9);
}.web-route-pages-forum-forum .add-file-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(12 * var(--rpx));
  border: calc(2 * var(--rpx)) dashed #e0e0e0;
  margin-bottom: calc(24 * var(--rpx));
  transition: all 0.3s;
}.web-route-pages-forum-forum .add-file-btn:active{
  border-color: #667eea;
  background: #f0f3ff;
}.web-route-pages-forum-forum .add-file-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-forum-forum .add-file-text{
  font-size: calc(26 * var(--rpx));
  color: #666;
}.web-route-pages-forum-forum .ad-section{
  margin: calc(24 * var(--rpx)) 0;
  padding: calc(16 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-forum-forum .modal-footer{
  display: flex;
  gap: calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(32 * var(--rpx)) calc(48 * var(--rpx));
  background: #fff;
  border-top: calc(1 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-forum-forum .cancel-btn{
  flex: 1;
  height: calc(88 * var(--rpx));
  line-height: calc(88 * var(--rpx));
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: calc(44 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  transition: all 0.2s;
}.web-route-pages-forum-forum .cancel-btn::after{
  border: none;
}.web-route-pages-forum-forum .cancel-btn:active{
  background: #e8e8e8;
  transform: scale(0.98);
}.web-route-pages-forum-forum .confirm-btn{
  flex: 2;
  height: calc(88 * var(--rpx));
  line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: calc(44 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}.web-route-pages-forum-forum .confirm-btn::after{
  border: none;
}.web-route-pages-forum-forum .confirm-btn[disabled]{
  background: linear-gradient(135deg, #ccc 0%, #ddd 100%);
  box-shadow: none;
  opacity: 0.6;
}.web-route-pages-forum-forum .confirm-btn:active{
  transform: scale(0.98);
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(102, 126, 234, 0.3);
}.web-route-pages-forum-forum .btn-icon{
  font-size: calc(32 * var(--rpx));
}.web-route-pages-forum-forum .btn-text{
  font-size: calc(30 * var(--rpx));
}.web-route-pages-forum-forum .empty{
  text-align: center;
  padding: calc(80 * var(--rpx)) calc(40 * var(--rpx));
  color: #999;
}.web-route-pages-forum-forum .empty-text{
  font-size: calc(26 * var(--rpx));
}


/* pages/politics/politics */

.web-route-pages-politics-politics .container{
  background: #F5F7FA;
  min-height: 100vh;
  padding: calc(20 * var(--rpx));
}.web-route-pages-politics-politics .header{
  margin-bottom: calc(30 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}.web-route-pages-politics-politics .header-left{
  flex: 1;
}.web-route-pages-politics-politics .title{
  display: block;
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-politics-politics .subtitle{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #999999;
}.web-route-pages-politics-politics .header-right{
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-politics-politics .favorites-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(255, 165, 0, 0.3);
}.web-route-pages-politics-politics .favorites-icon{
  font-size: calc(40 * var(--rpx));
  color: #fff;
  margin-bottom: calc(4 * var(--rpx));
}.web-route-pages-politics-politics .favorites-text{
  font-size: calc(22 * var(--rpx));
  color: #fff;
  font-weight: bold;
}.web-route-pages-politics-politics .category-section{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-politics-politics .category-scroll{
  width: 100%;
  white-space: nowrap;
}.web-route-pages-politics-politics .category-tabs{
  display: inline-flex;
  padding: 0 calc(10 * var(--rpx));
}.web-route-pages-politics-politics .category-tab{
  display: inline-block;
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  border-radius: calc(30 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #666666;
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
}.web-route-pages-politics-politics .category-tab::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(74, 144, 226, 0.1) 50%, transparent 100%);
  transition: left 0.5s ease;
}.web-route-pages-politics-politics .category-tab:hover::before{
  left: 100%;
}.web-route-pages-politics-politics .category-tab.active{
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: #FFFFFF;
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(74, 144, 226, 0.4);
  border-color: #4A90E2;
  transform: translateY(-calc(2 * var(--rpx)));
}.web-route-pages-politics-politics .category-tab:hover{
  transform: translateY(-calc(2 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, 0.1);
  border-color: #4A90E2;
}.web-route-pages-politics-politics .category-tab:active{
  transform: scale(0.96) translateY(-calc(2 * var(--rpx)));
}.web-route-pages-politics-politics .news-list{
  flex: 1;
}.web-route-pages-politics-politics .loading{
  text-align: center;
  padding: calc(60 * var(--rpx)) 0;
  color: #999999;
}.web-route-pages-politics-politics .empty-state{
  text-align: center;
  padding: calc(60 * var(--rpx)) 0;
  color: #999999;
}.web-route-pages-politics-politics .news-cards{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-politics-politics .news-card{
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(calc(10 * var(--rpx)));
}.web-route-pages-politics-politics .news-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(6 * var(--rpx));
  height: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 50%, #764ba2 100%);
  border-radius: calc(6 * var(--rpx)) 0 0 calc(6 * var(--rpx));
  z-index: 1;
}.web-route-pages-politics-politics .news-card::after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  background: radial-gradient(circle, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0) 70%);
  border-radius: 50%;
  transform: translate(50%, -50%);
  z-index: 0;
}.web-route-pages-politics-politics .news-card:hover{
  transform: translateY(-calc(6 * var(--rpx))) scale(1.02);
  box-shadow: 0 calc(12 * var(--rpx)) calc(40 * var(--rpx)) rgba(74, 144, 226, 0.25);
  border-color: #4A90E2;
}.web-route-pages-politics-politics .news-card:active{
  transform: translateY(-calc(2 * var(--rpx))) scale(0.98);
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.15);
}.web-route-pages-politics-politics .card-header{
  margin-bottom: calc(20 * var(--rpx));
  position: relative;
  z-index: 2;
}.web-route-pages-politics-politics .news-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  display: block;
}.web-route-pages-politics-politics .card-body{
  margin-bottom: calc(20 * var(--rpx));
  position: relative;
  z-index: 2;
}.web-route-pages-politics-politics .news-content{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  line-height: 1.6;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}.web-route-pages-politics-politics .card-footer{
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #F0F0F0;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}.web-route-pages-politics-politics .news-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}.web-route-pages-politics-politics .favorite-btn{
  width: calc(64 * var(--rpx));
  height: calc(64 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F7FA;
  border-radius: 50%;
  margin-left: calc(20 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-politics-politics .favorite-btn:active{
  transform: scale(0.9);
}.web-route-pages-politics-politics .favorite-btn.favorited{
  background: #FFD700;
}.web-route-pages-politics-politics .favorite-icon{
  font-size: calc(36 * var(--rpx));
  color: #999;
  transition: all 0.3s ease;
}.web-route-pages-politics-politics .favorite-btn.favorited .favorite-icon{
  color: #fff;
}.web-route-pages-politics-politics .news-source{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}.web-route-pages-politics-politics .news-time{
  font-size: calc(24 * var(--rpx));
  color: #999999;
}@keyframes pulse{
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}@keyframes fadeIn{
  from {
    opacity: 0;
    transform: translateY(calc(20 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.web-route-pages-politics-politics .fade-in{
  animation: fadeIn 0.6s ease-out;
}.web-route-pages-politics-politics .pulse{
  animation: pulse 2s infinite;
}.web-route-pages-politics-politics .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}

/* pages/politics/detail/detail */

.web-route-pages-politics-detail-detail .container{
  background: #F5F7FA;
  min-height: 100vh;
  padding: calc(20 * var(--rpx));
}.web-route-pages-politics-detail-detail .news-detail{
  background: #FFFFFF;
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.08);
  border: calc(1 * var(--rpx)) solid #E0E0E0;
}.web-route-pages-politics-detail-detail .loading{
  text-align: center;
  padding: calc(60 * var(--rpx)) 0;
  color: #999999;
}.web-route-pages-politics-detail-detail .empty-state{
  text-align: center;
  padding: calc(60 * var(--rpx)) 0;
  color: #999999;
}.web-route-pages-politics-detail-detail .news-content{
  position: relative;
}.web-route-pages-politics-detail-detail .news-title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333333;
  line-height: 1.4;
  margin-bottom: calc(30 * var(--rpx));
  display: block;
}.web-route-pages-politics-detail-detail .news-meta{
  display: flex;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-politics-detail-detail .news-source{
  font-size: calc(26 * var(--rpx));
  color: #4A90E2;
  margin-right: calc(30 * var(--rpx));
}.web-route-pages-politics-detail-detail .news-time{
  font-size: calc(26 * var(--rpx));
  color: #999999;
}.web-route-pages-politics-detail-detail .news-body{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-politics-detail-detail .news-text{
  font-size: calc(28 * var(--rpx));
  color: #333333;
  line-height: 1.8;
  display: block;
}.web-route-pages-politics-detail-detail .news-link{
  margin-bottom: calc(30 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #F5F7FA;
  border-radius: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #E0E0E0;
}.web-route-pages-politics-detail-detail .link-label{
  font-size: calc(26 * var(--rpx));
  color: #666666;
  margin-right: calc(10 * var(--rpx));
}.web-route-pages-politics-detail-detail .link-url{
  font-size: calc(24 * var(--rpx));
  color: #4A90E2;
  word-break: break-all;
  display: block;
  margin-top: calc(10 * var(--rpx));
}.web-route-pages-politics-detail-detail .news-actions{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: calc(30 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-politics-detail-detail .action-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(20 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-politics-detail-detail .action-item:hover{
  background: rgba(74, 144, 226, 0.1);
  transform: translateY(-calc(2 * var(--rpx)));
}.web-route-pages-politics-detail-detail .action-icon{
  font-size: calc(40 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-politics-detail-detail .action-text{
  font-size: calc(24 * var(--rpx));
  color: #666666;
}.web-route-pages-politics-detail-detail .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}

/* pages/politics/favorites/favorites */

.web-route-pages-politics-favorites-favorites .container{
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .header{
  text-align: center;
  padding: calc(40 * var(--rpx)) calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .title{
  display: block;
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #ffffff;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .subtitle{
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.8);
}.web-route-pages-politics-favorites-favorites .favorites-list{
  padding: 0 calc(10 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .favorite-item{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(16 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-politics-favorites-favorites .item-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .item-title{
  flex: 1;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333;
  line-height: 1.5;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .item-actions{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .delete-btn{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff6b6b;
  border-radius: 50%;
}.web-route-pages-politics-favorites-favorites .delete-icon{
  color: #fff;
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
}.web-route-pages-politics-favorites-favorites .item-content{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .item-text{
  font-size: calc(28 * var(--rpx));
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}.web-route-pages-politics-favorites-favorites .item-footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #eee;
}.web-route-pages-politics-favorites-favorites .item-source{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
  font-weight: 500;
}.web-route-pages-politics-favorites-favorites .item-time{
  font-size: calc(24 * var(--rpx));
  color: #999;
}.web-route-pages-politics-favorites-favorites .empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(200 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .empty-icon{
  font-size: calc(120 * var(--rpx));
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .empty-text{
  font-size: calc(36 * var(--rpx));
  color: #fff;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .empty-tip{
  font-size: calc(28 * var(--rpx));
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-bottom: calc(40 * var(--rpx));
}.web-route-pages-politics-favorites-favorites .go-browse-btn{
  background: #fff;
  padding: calc(24 * var(--rpx)) calc(60 * var(--rpx));
  border-radius: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.2);
}.web-route-pages-politics-favorites-favorites .go-browse-btn text{
  font-size: calc(32 * var(--rpx));
  color: #667eea;
  font-weight: bold;
}


/* pages/ai-exam/index */

.web-route-pages-ai-exam-index .container{
  padding: calc(20 * var(--rpx));
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 30%, #0f3460 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}.web-route-pages-ai-exam-index .container::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(400 * var(--rpx));
  background: linear-gradient(180deg, #de2910 0%, #c41e3a 40%, #9e1b32 100%);
  z-index: 0;
  border-radius: 0 0 calc(40 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-ai-exam-index .container::after{
  content: '';
  position: absolute;
  top: calc(380 * var(--rpx));
  left: -50%;
  width: 200%;
  height: calc(80 * var(--rpx));
  background: repeating-linear-gradient(
    90deg,
    #de2910 calc(0 * var(--rpx)),
    #ff4757 calc(30 * var(--rpx)),
    #de2910 calc(60 * var(--rpx)),
    #c41e3a calc(90 * var(--rpx)),
    #de2910 calc(120 * var(--rpx))
  );
  opacity: 0.9;
  animation: wave 2.5s ease-in-out infinite;
  z-index: 0;
  border-radius: 50%;
}@keyframes wave{
  0%, 100% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) scaleY(0.85);
  }
}.web-route-pages-ai-exam-index .header{
  text-align: center;
  margin: calc(60 * var(--rpx)) 0 calc(50 * var(--rpx)) 0;
  position: relative;
  z-index: 1;
}.web-route-pages-ai-exam-index .title{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  color: #ffd700;
  display: block;
  margin-bottom: calc(15 * var(--rpx));
  text-shadow: calc(3 * var(--rpx)) calc(3 * var(--rpx)) calc(6 * var(--rpx)) rgba(0, 0, 0, 0.5);
  position: relative;
}.web-route-pages-ai-exam-index .title::before, .web-route-pages-ai-exam-index .title::after{
  content: '★';
  color: #ffd700;
  font-size: calc(32 * var(--rpx));
  margin: 0 calc(20 * var(--rpx));
}.web-route-pages-ai-exam-index .subtitle{
  font-size: calc(26 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
  text-shadow: calc(1 * var(--rpx)) calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-ai-exam-index .exam-list-entry{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(255, 215, 0, 0.3);
  position: relative;
  z-index: 1;
}.web-route-pages-ai-exam-index .exam-list-entry:active{
  transform: scale(0.98);
  box-shadow: 0 calc(3 * var(--rpx)) calc(10 * var(--rpx)) rgba(255, 215, 0, 0.2);
}.web-route-pages-ai-exam-index .entry-content{
  display: flex;
  align-items: center;
}.web-route-pages-ai-exam-index .entry-icon{
  font-size: calc(48 * var(--rpx));
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-index .entry-text{
  display: flex;
  flex-direction: column;
}.web-route-pages-ai-exam-index .entry-title{
  font-size: calc(32 * var(--rpx));
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-ai-exam-index .entry-desc{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-index .entry-arrow{
  font-size: calc(36 * var(--rpx));
  color: #1a1a2e;
  font-weight: bold;
}.web-route-pages-ai-exam-index .module-list{
  margin-bottom: calc(40 * var(--rpx));
  position: relative;
  z-index: 1;
}.web-route-pages-ai-exam-index .module-item{
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(222, 41, 16, 0.25);
  transition: all 0.3s ease;
  border: calc(2 * var(--rpx)) solid rgba(222, 41, 16, 0.1);
}.web-route-pages-ai-exam-index .module-item:active{
  transform: scale(0.98);
  box-shadow: 0 calc(3 * var(--rpx)) calc(10 * var(--rpx)) rgba(222, 41, 16, 0.2);
}.web-route-pages-ai-exam-index .module-icon{
  margin-right: calc(25 * var(--rpx));
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  background: linear-gradient(135deg, #de2910 0%, #ff4757 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(222, 41, 16, 0.4);
}.web-route-pages-ai-exam-index .icon{
  font-size: calc(40 * var(--rpx));
}.web-route-pages-ai-exam-index .module-content{
  flex: 1;
}.web-route-pages-ai-exam-index .module-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #de2910;
  display: block;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-index .module-desc{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-index .arrow{
  font-size: calc(36 * var(--rpx));
  color: #de2910;
  font-weight: bold;
}.web-route-pages-ai-exam-index .feature-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.95);
  padding: calc(30 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(222, 41, 16, 0.25);
  position: relative;
  z-index: 1;
  border: calc(2 * var(--rpx)) solid rgba(222, 41, 16, 0.1);
}.web-route-pages-ai-exam-index .feature-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-index .feature-icon{
  font-size: calc(44 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-index .feature-text{
  font-size: calc(24 * var(--rpx));
  color: #333;
  font-weight: 500;
}.web-route-pages-ai-exam-index .ranking-section{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(16 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-top: calc(40 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(222, 41, 16, 0.25);
  position: relative;
  z-index: 1;
  border: calc(2 * var(--rpx)) solid rgba(222, 41, 16, 0.1);
}.web-route-pages-ai-exam-index .section-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #de2910;
  margin-bottom: calc(25 * var(--rpx));
  text-align: center;
  position: relative;
  padding-bottom: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-index .section-title::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(60 * var(--rpx));
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, #de2910, #ffd700);
  border-radius: calc(2 * var(--rpx));
}.web-route-pages-ai-exam-index .personal-card{
  background: linear-gradient(135deg, #fff9f0 0%, #fff5e6 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(25 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(222, 41, 16, 0.15);
}.web-route-pages-ai-exam-index .personal-title{
  font-size: calc(26 * var(--rpx));
  font-weight: bold;
  color: #de2910;
  margin-bottom: calc(20 * var(--rpx));
  text-align: center;
}.web-route-pages-ai-exam-index .personal-info{
  display: flex;
  justify-content: space-around;
}.web-route-pages-ai-exam-index .info-item{
  text-align: center;
}.web-route-pages-ai-exam-index .info-label{
  font-size: calc(24 * var(--rpx));
  color: #666;
  display: block;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-index .info-value{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #de2910;
}.web-route-pages-ai-exam-index .ranking-list{
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-index .ranking-item{
  display: flex;
  align-items: center;
  padding: calc(20 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid rgba(222, 41, 16, 0.1);
}.web-route-pages-ai-exam-index .ranking-item:last-child{
  border-bottom: none;
}.web-route-pages-ai-exam-index .rank-number{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #666;
  text-align: center;
  line-height: calc(60 * var(--rpx));
  background: #f0f0f0;
  border-radius: 50%;
}.web-route-pages-ai-exam-index .rank-number.top{
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #8b0000;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(255, 215, 0, 0.5);
}.web-route-pages-ai-exam-index .user-info{
  flex: 1;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-index .user-name{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: calc(5 * var(--rpx));
}.web-route-pages-ai-exam-index .user-score{
  font-size: calc(22 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-index .empty{
  text-align: center;
  padding: calc(40 * var(--rpx)) 0;
  color: #999;
  font-size: calc(24 * var(--rpx));
}.web-route-pages-ai-exam-index .flag-decoration{
  position: absolute;
  width: calc(50 * var(--rpx));
  height: calc(70 * var(--rpx));
  background: linear-gradient(180deg, #de2910 0%, #c41e3a 100%);
  z-index: 2;
  animation: flagWave 2s ease-in-out infinite;
  box-shadow: calc(2 * var(--rpx)) calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-ai-exam-index .flag-decoration::before{
  content: '★';
  color: #ffd700;
  font-size: calc(20 * var(--rpx));
  position: absolute;
  top: calc(10 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
}@keyframes flagWave{
  0%, 100% {
    transform: skewY(0deg);
  }
  25% {
    transform: skewY(8deg);
  }
  75% {
    transform: skewY(-8deg);
  }
}.web-route-pages-ai-exam-index .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(16 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
  position: relative;
  z-index: 1;
}


/* pages/ai-exam/settings */

.web-route-pages-ai-exam-settings .container{
  padding: calc(20 * var(--rpx));
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}.web-route-pages-ai-exam-settings .container::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(300 * var(--rpx));
  background: linear-gradient(180deg, #de2910 0%, #c41e3a 50%, #9e1b32 100%);
  z-index: 0;
  border-radius: 0 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
}.web-route-pages-ai-exam-settings .container::after{
  content: '';
  position: absolute;
  top: calc(280 * var(--rpx));
  left: -50%;
  width: 200%;
  height: calc(60 * var(--rpx));
  background: repeating-linear-gradient(
    90deg,
    #de2910 calc(0 * var(--rpx)),
    #ff6b6b calc(25 * var(--rpx)),
    #de2910 calc(50 * var(--rpx)),
    #c41e3a calc(75 * var(--rpx)),
    #de2910 calc(100 * var(--rpx))
  );
  opacity: 0.8;
  animation: wave 3s ease-in-out infinite;
  z-index: 0;
  border-radius: 50%;
}@keyframes wave{
  0%, 100% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(-25%) scaleY(0.8);
  }
}.web-route-pages-ai-exam-settings .header{
  margin: calc(30 * var(--rpx)) 0;
  position: relative;
  z-index: 1;
  text-align: center;
}.web-route-pages-ai-exam-settings .title{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #ffd700;
  text-shadow: calc(2 * var(--rpx)) calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.5);
  position: relative;
  display: inline-block;
}.web-route-pages-ai-exam-settings .title::before, .web-route-pages-ai-exam-settings .title::after{
  content: '★';
  color: #ffd700;
  font-size: calc(24 * var(--rpx));
  margin: 0 calc(15 * var(--rpx));
}.web-route-pages-ai-exam-settings .form{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(222, 41, 16, 0.3);
  position: relative;
  z-index: 1;
  margin-top: calc(40 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(222, 41, 16, 0.2);
}.web-route-pages-ai-exam-settings .form-item{
  margin-bottom: calc(40 * var(--rpx));
}.web-route-pages-ai-exam-settings .label{
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #de2910;
  display: block;
  margin-bottom: calc(20 * var(--rpx));
  padding-left: calc(20 * var(--rpx));
  border-left: calc(6 * var(--rpx)) solid #de2910;
}.web-route-pages-ai-exam-settings .options{
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-settings .option-item{
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #e0e0e0;
  border-radius: calc(30 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #666;
  background: #f8f8f8;
  transition: all 0.3s ease;
}.web-route-pages-ai-exam-settings .option-item.active{
  border-color: #de2910;
  background: linear-gradient(135deg, #de2910 0%, #ff4757 100%);
  color: #fff;
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(222, 41, 16, 0.4);
  transform: scale(1.05);
}.web-route-pages-ai-exam-settings .exam-list-entry{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  padding: calc(24 * var(--rpx)) calc(30 * var(--rpx));
  margin: calc(40 * var(--rpx)) 0;
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(255, 215, 0, 0.3);
  position: relative;
  z-index: 1;
}.web-route-pages-ai-exam-settings .exam-list-entry:active{
  transform: scale(0.98);
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(255, 215, 0, 0.2);
}.web-route-pages-ai-exam-settings .entry-content{
  display: flex;
  align-items: center;
}.web-route-pages-ai-exam-settings .entry-icon{
  font-size: calc(40 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-ai-exam-settings .entry-text{
  display: flex;
  flex-direction: column;
}.web-route-pages-ai-exam-settings .entry-title{
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: calc(4 * var(--rpx));
}.web-route-pages-ai-exam-settings .entry-desc{
  font-size: calc(22 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-settings .entry-arrow{
  font-size: calc(32 * var(--rpx));
  color: #1a1a2e;
  font-weight: bold;
}.web-route-pages-ai-exam-settings .btn-container{
  margin-top: calc(40 * var(--rpx));
  display: flex;
  gap: calc(20 * var(--rpx));
  position: relative;
  z-index: 1;
}.web-route-pages-ai-exam-settings .start-btn{
  flex: 1;
  height: calc(90 * var(--rpx));
  background: linear-gradient(135deg, #de2910 0%, #ff4757 50%, #de2910 100%);
  color: #fff;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border-radius: calc(45 * var(--rpx));
  line-height: calc(90 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(222, 41, 16, 0.5);
  position: relative;
  overflow: hidden;
}.web-route-pages-ai-exam-settings .start-btn::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shine 2s infinite;
}@keyframes shine{
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}.web-route-pages-ai-exam-settings .wrong-btn{
  flex: 1;
  height: calc(90 * var(--rpx));
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  color: #8b0000;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border-radius: calc(45 * var(--rpx));
  line-height: calc(90 * var(--rpx));
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(255, 215, 0, 0.5);
}.web-route-pages-ai-exam-settings .start-btn::after, .web-route-pages-ai-exam-settings .wrong-btn::after{
  border: none;
}.web-route-pages-ai-exam-settings .flag-decoration{
  position: absolute;
  width: calc(40 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: #de2910;
  top: calc(20 * var(--rpx));
  animation: flagWave 2s ease-in-out infinite;
}.web-route-pages-ai-exam-settings .flag-decoration::before{
  content: '★';
  color: #ffd700;
  font-size: calc(16 * var(--rpx));
  position: absolute;
  top: calc(8 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
}@keyframes flagWave{
  0%, 100% {
    transform: skewY(0deg);
  }
  25% {
    transform: skewY(5deg);
  }
  75% {
    transform: skewY(-5deg);
  }
}.web-route-pages-ai-exam-settings .usage-count-card{
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-ai-exam-settings .usage-count-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-settings .usage-count-title{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-ai-exam-settings .usage-count-text{
  font-size: calc(36 * var(--rpx));
  font-weight: 700;
  color: #667eea;
}.web-route-pages-ai-exam-settings .usage-count-bar{
  width: 100%;
  height: calc(16 * var(--rpx));
  background: #e0e0e0;
  border-radius: calc(8 * var(--rpx));
  overflow: hidden;
}.web-route-pages-ai-exam-settings .usage-count-fill{
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(8 * var(--rpx));
  transition: width 0.3s ease;
}.web-route-pages-ai-exam-settings .usage-count-tip{
  margin-top: calc(16 * var(--rpx));
  text-align: center;
}.web-route-pages-ai-exam-settings .tip-text{
  font-size: calc(24 * var(--rpx));
  color: #ff6b6b;
}.web-route-pages-ai-exam-settings .usage-count-hint{
  margin-top: calc(16 * var(--rpx));
  text-align: center;
}.web-route-pages-ai-exam-settings .hint-text{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
}.web-route-pages-ai-exam-settings .reward-ad-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(28 * var(--rpx));
  margin: 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(79, 172, 254, 0.4);
}.web-route-pages-ai-exam-settings .reward-ad-icon{
  font-size: calc(36 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-ai-exam-settings .reward-ad-text{
  color: #fff;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
}.web-route-pages-ai-exam-settings .start-btn.disabled{
  background: #ccc;
  box-shadow: none;
}.web-route-pages-ai-exam-settings .start-btn.disabled::before{
  display: none;
}.web-route-pages-ai-exam-settings .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(16 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
}


/* pages/ai-exam/answer */

.web-route-pages-ai-exam-answer .container{
  padding: calc(20 * var(--rpx));
  background-color: #F5F7FA;
  min-height: 100vh;
}.web-route-pages-ai-exam-answer .header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-ai-exam-answer .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-ai-exam-answer .progress{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-answer .loading{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
}.web-route-pages-ai-exam-answer .loading-text{
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}.web-route-pages-ai-exam-answer .countdown{
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
  font-weight: bold;
}.web-route-pages-ai-exam-answer .loading-spinner{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  border: calc(6 * var(--rpx)) solid #E5E5E5;
  border-top: calc(6 * var(--rpx)) solid #4A90E2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.web-route-pages-ai-exam-answer .question-container{
  background-color: #fff;
  border-radius: calc(12 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
  min-height: 60vh;
}.web-route-pages-ai-exam-answer .material{
  margin-bottom: calc(30 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background-color: #F8F9FA;
  border-radius: calc(8 * var(--rpx));
  position: sticky;
  top: calc(88 * var(--rpx));
  z-index: 10;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.1);
}.web-route-pages-ai-exam-answer .material-title{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(10 * var(--rpx));
  display: block;
}.web-route-pages-ai-exam-answer .material-content{
  font-size: calc(22 * var(--rpx));
  color: #666;
  line-height: 1.5;
}.web-route-pages-ai-exam-answer .chart-container{
  margin-top: calc(20 * var(--rpx));
  display: flex;
  justify-content: center;
}.web-route-pages-ai-exam-answer .chart-image{
  max-width: 100%;
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-answer .question-content{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-ai-exam-answer .question-text{
  font-size: calc(28 * var(--rpx));
  color: #333;
  line-height: 1.6;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-ai-exam-answer .options{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-answer .option-item{
  display: flex;
  align-items: center;
  padding: calc(25 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #E5E5E5;
  border-radius: calc(8 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-ai-exam-answer .option-item.selected{
  border-color: #4A90E2 !important;
  background-color: #F0F8FF !important;
}.web-route-pages-ai-exam-answer .option-letter{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  line-height: calc(40 * var(--rpx));
  text-align: center;
  border-radius: 50%;
  background-color: #F0F0F0;
  margin-right: calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
}.web-route-pages-ai-exam-answer .option-item.selected .option-letter{
  background-color: #4A90E2 !important;
  color: #fff !important;
}.web-route-pages-ai-exam-answer .option-item.correct{
  border-color: #52c41a;
  background-color: #f6ffed;
}.web-route-pages-ai-exam-answer .option-item.correct .option-letter{
  background-color: #52c41a;
  color: #fff;
}.web-route-pages-ai-exam-answer .option-item.correct .option-text{
  color: #52c41a;
}.web-route-pages-ai-exam-answer .option-text{
  flex: 1;
  font-size: calc(24 * var(--rpx));
  color: #333;
}.web-route-pages-ai-exam-answer .answer-input{
  width: 100%;
  min-height: calc(300 * var(--rpx));
  padding: calc(20 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #E5E5E5;
  border-radius: calc(8 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  line-height: 1.5;
  resize: none;
}.web-route-pages-ai-exam-answer .word-count{
  display: block;
  text-align: right;
  font-size: calc(20 * var(--rpx));
  color: #999;
  margin-top: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-answer .footer{
  display: flex;
  justify-content: space-between;
  margin-top: calc(30 * var(--rpx));
}.web-route-pages-ai-exam-answer .btn{
  flex: 1;
  height: calc(80 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  line-height: calc(80 * var(--rpx));
}.web-route-pages-ai-exam-answer .prev-btn{
  background-color: #F0F0F0;
  color: #666;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-answer .next-btn, .web-route-pages-ai-exam-answer .submit-btn{
  background-color: #4A90E2;
  color: #fff;
}.web-route-pages-ai-exam-answer .btn::after{
  border: none;
}.web-route-pages-ai-exam-answer .question-container{
  position: relative;
  overflow: visible;
}.web-route-pages-ai-exam-answer .draw-canvas{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - calc(200 * var(--rpx))) !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}.web-route-pages-ai-exam-answer .pen-cursor{
  cursor: crosshair;
}.web-route-pages-ai-exam-answer .eraser-cursor{
  cursor: cell;
}.web-route-pages-ai-exam-answer .pen-toolbar{
  position: fixed;
  bottom: calc(180 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  background: rgba(255, 255, 255, 0.98);
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.15);
  z-index: 10000;
  flex-wrap: wrap;
  max-width: 90vw;
}.web-route-pages-ai-exam-answer .pen-tool-btn{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  font-size: calc(28 * var(--rpx));
  transition: all 0.2s ease;
}.web-route-pages-ai-exam-answer .pen-tool-btn.active{
  background: #4A90E2;
  color: #fff;
}.web-route-pages-ai-exam-answer .pen-tool-btn.clear-btn{
  background: #ff4d4f;
  color: #fff;
}.web-route-pages-ai-exam-answer .pen-tool-btn.close-btn{
  background: #666;
  color: #fff;
}.web-route-pages-ai-exam-answer .color-picker{
  display: flex;
  gap: calc(12 * var(--rpx));
  align-items: center;
  margin-left: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-answer .color-item{
  width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  border-radius: 50%;
  border: calc(3 * var(--rpx)) solid transparent;
  transition: all 0.2s ease;
}.web-route-pages-ai-exam-answer .color-item.active{
  border-color: #333;
  transform: scale(1.15);
}.web-route-pages-ai-exam-answer .size-picker{
  display: flex;
  gap: calc(12 * var(--rpx));
  align-items: center;
  margin-left: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-answer .size-item{
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
  transition: all 0.2s ease;
}.web-route-pages-ai-exam-answer .size-item.active{
  background: #e0e0e0;
}.web-route-pages-ai-exam-answer .size-dot{
  border-radius: 50%;
  background: #333;
}.web-route-pages-ai-exam-answer .pen-toggle-btn{
  position: fixed;
  right: calc(30 * var(--rpx));
  bottom: calc(200 * var(--rpx));
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(102, 126, 234, 0.4);
  z-index: 10000;
  font-size: calc(32 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-ai-exam-answer .pen-toggle-btn.active{
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(238, 90, 82, 0.4);
}

/* pages/ai-exam/result */

.web-route-pages-ai-exam-result .container{
  padding: calc(20 * var(--rpx));
  background-color: #F5F7FA;
  min-height: 100vh;
}.web-route-pages-ai-exam-result .header{
  margin: calc(30 * var(--rpx)) 0;
  text-align: center;
}.web-route-pages-ai-exam-result .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-ai-exam-result .result-card{
  background-color: #fff;
  border-radius: calc(12 * var(--rpx));
  padding: calc(40 * var(--rpx));
  text-align: center;
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-ai-exam-result .score{
  font-size: calc(80 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  display: block;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-result .score-label{
  font-size: calc(28 * var(--rpx));
  color: #666;
  margin-bottom: calc(30 * var(--rpx));
  display: block;
}.web-route-pages-ai-exam-result .stats{
  display: flex;
  justify-content: space-around;
  padding-top: calc(20 * var(--rpx));
  border-top: calc(2 * var(--rpx)) solid #E5E5E5;
}.web-route-pages-ai-exam-result .stat-item{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-result .analysis-section{
  background-color: #fff;
  border-radius: calc(12 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-ai-exam-result .section-title{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
  display: block;
}.web-route-pages-ai-exam-result .question-analysis{
  margin-bottom: calc(40 * var(--rpx));
  padding-bottom: calc(40 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid #E5E5E5;
}.web-route-pages-ai-exam-result .question-analysis:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}.web-route-pages-ai-exam-result .question-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-result .question-number{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-ai-exam-result .question-result{
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  padding: calc(5 * var(--rpx)) calc(15 * var(--rpx));
  border-radius: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-result .question-result.correct{
  background-color: #E8F5E8;
  color: #4CAF50;
}.web-route-pages-ai-exam-result .question-result.wrong{
  background-color: #FFEBEE;
  color: #F44336;
}.web-route-pages-ai-exam-result .question-text{
  font-size: calc(24 * var(--rpx));
  color: #333;
  line-height: 1.5;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-result .options{
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-result .option-item{
  display: flex;
  align-items: center;
  padding: calc(15 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #E5E5E5;
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-result .option-item.selected{
  border-color: #4A90E2;
  background-color: #F0F8FF;
}.web-route-pages-ai-exam-result .option-item.correct{
  border-color: #4CAF50;
  background-color: #E8F5E8;
}.web-route-pages-ai-exam-result .option-letter{
  width: calc(36 * var(--rpx));
  height: calc(36 * var(--rpx));
  line-height: calc(36 * var(--rpx));
  text-align: center;
  border-radius: 50%;
  background-color: #F0F0F0;
  margin-right: calc(15 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
}.web-route-pages-ai-exam-result .option-item.correct .option-letter{
  background-color: #4CAF50;
  color: #fff;
}.web-route-pages-ai-exam-result .option-text{
  flex: 1;
  font-size: calc(22 * var(--rpx));
  color: #333;
}.web-route-pages-ai-exam-result .explanation{
  font-size: calc(22 * var(--rpx));
  color: #666;
  line-height: 1.5;
  margin-top: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-result .answer-card{
  background-color: #F8F9FA;
  padding: calc(20 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-result .answer-label{
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-result .answer-content{
  font-size: calc(22 * var(--rpx));
  color: #666;
  line-height: 1.5;
}.web-route-pages-ai-exam-result .ai-analysis{
  background-color: #E3F2FD;
  padding: calc(20 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-result .analysis-label{
  font-size: calc(22 * var(--rpx));
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-result .analysis-content{
  font-size: calc(22 * var(--rpx));
  color: #666;
  line-height: 1.5;
}.web-route-pages-ai-exam-result .btn-container{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-result .btn{
  flex: 1;
  height: calc(80 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  line-height: calc(80 * var(--rpx));
}.web-route-pages-ai-exam-result .retry-btn{
  background-color: #4A90E2;
  color: #fff;
}.web-route-pages-ai-exam-result .home-btn{
  background-color: #F0F0F0;
  color: #666;
}.web-route-pages-ai-exam-result .wrong-btn{
  background-color: #FF9800;
  color: #fff;
}.web-route-pages-ai-exam-result .btn::after{
  border: none;
}.web-route-pages-ai-exam-result .loading{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--rpx)) 0;
}.web-route-pages-ai-exam-result .loading-text{
  font-size: calc(28 * var(--rpx));
  color: #666;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-result .loading-spinner{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  border: calc(4 * var(--rpx)) solid rgba(74, 144, 226, 0.3);
  border-top: calc(4 * var(--rpx)) solid #4A90E2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: calc(20 * var(--rpx)) auto;
}.web-route-pages-ai-exam-result .countdown{
  font-size: calc(28 * var(--rpx));
  color: #4A90E2;
  margin: calc(10 * var(--rpx)) 0;
  text-align: center;
  font-weight: 500;
}@keyframes spin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* pages/ai-exam/wrong-questions */

.web-route-pages-ai-exam-wrong-questions .container{
  min-height: 100vh;
  background-color: #f5f5f5;
}.web-route-pages-ai-exam-wrong-questions .header{
  background-color: #4a90e2;
  color: white;
  padding: calc(20 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: center;
}.web-route-pages-ai-exam-wrong-questions .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  flex: 1;
  text-align: center;
}.web-route-pages-ai-exam-wrong-questions .practice-btn{
  background-color: #4CAF50;
  color: white;
  border-radius: calc(20 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .content{
  padding: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .empty-state{
  text-align: center;
  padding: calc(100 * var(--rpx)) 0;
  color: #999;
}.web-route-pages-ai-exam-wrong-questions .empty-text{
  font-size: calc(32 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  display: block;
}.web-route-pages-ai-exam-wrong-questions .empty-subtext{
  font-size: calc(24 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .wrong-questions-list{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .question-item{
  background-color: white;
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-ai-exam-wrong-questions .question-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .question-number{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-ai-exam-wrong-questions .question-type{
  font-size: calc(24 * var(--rpx));
  color: #666;
  background-color: #f0f0f0;
  padding: calc(5 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .wrong-meta-tags{
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-ai-exam-wrong-questions .practice-state.ok{
  background: rgba(82, 196, 26, 0.12);
  color: #52C41A;
}.web-route-pages-ai-exam-wrong-questions .practice-state.hold{
  background: rgba(250, 173, 20, 0.12);
  color: #FAAD14;
}.web-route-pages-ai-exam-wrong-questions .question-content{
  font-size: calc(28 * var(--rpx));
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
  line-height: calc(40 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .options{
  margin-bottom: calc(20 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .option-item{
  display: flex;
  align-items: flex-start;
  padding: calc(15 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background-color: #f9f9f9;
}.web-route-pages-ai-exam-wrong-questions .option-item.selected{
  background-color: #ffe6e6;
  border: calc(1 * var(--rpx)) solid #ff6b6b;
}.web-route-pages-ai-exam-wrong-questions .option-item.correct{
  background-color: #e6ffe6;
  border: calc(1 * var(--rpx)) solid #6bff6b;
}.web-route-pages-ai-exam-wrong-questions .option-label{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  margin-right: calc(10 * var(--rpx));
  color: #333;
}.web-route-pages-ai-exam-wrong-questions .option-content{
  font-size: calc(24 * var(--rpx));
  color: #333;
  flex: 1;
  line-height: calc(32 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .answer-info{
  display: flex;
  justify-content: space-between;
  margin-bottom: calc(15 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .your-answer{
  color: #ff6b6b;
}.web-route-pages-ai-exam-wrong-questions .correct-answer{
  color: #6bff6b;
}.web-route-pages-ai-exam-wrong-questions .explanation{
  margin-bottom: calc(20 * var(--rpx));
  padding: calc(15 * var(--rpx));
  background-color: #f0f8ff;
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .explanation-title{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: calc(5 * var(--rpx));
  display: block;
}.web-route-pages-ai-exam-wrong-questions .explanation-content{
  font-size: calc(24 * var(--rpx));
  color: #333;
  line-height: calc(32 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .action{
  display: flex;
  justify-content: flex-end;
}.web-route-pages-ai-exam-wrong-questions .delete-btn{
  background-color: #ff6b6b;
  color: white;
  border-radius: calc(20 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions .delete-btn:hover{
  background-color: #ff4757;
}

/* pages/ai-exam/wrong-questions-practice */

.web-route-pages-ai-exam-wrong-questions-practice .container{
  min-height: 100vh;
  background-color: #f5f5f5;
}.web-route-pages-ai-exam-wrong-questions-practice .header{
  background-color: #4a90e2;
  color: white;
  padding: calc(20 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: center;
}.web-route-pages-ai-exam-wrong-questions-practice .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  flex: 1;
  text-align: center;
}.web-route-pages-ai-exam-wrong-questions-practice .progress{
  font-size: calc(24 * var(--rpx));
  background-color: rgba(255, 255, 255, 0.3);
  padding: calc(5 * var(--rpx)) calc(15 * var(--rpx));
  border-radius: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .content{
  padding: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .question-item{
  background-color: white;
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-ai-exam-wrong-questions-practice .question-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .question-number{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-ai-exam-wrong-questions-practice .question-type{
  font-size: calc(24 * var(--rpx));
  color: #666;
  background-color: #f0f0f0;
  padding: calc(5 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .question-content{
  font-size: calc(28 * var(--rpx));
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
  line-height: calc(40 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .options{
  margin-bottom: calc(20 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .option-item{
  display: flex;
  align-items: flex-start;
  padding: calc(15 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background-color: #f9f9f9;
  cursor: pointer;
  transition: all 0.3s ease;
}.web-route-pages-ai-exam-wrong-questions-practice .option-item:hover{
  background-color: #f0f0f0;
}.web-route-pages-ai-exam-wrong-questions-practice .option-item.selected{
  background-color: #f0f8ff;
  border: calc(1 * var(--rpx)) solid #4a90e2;
}.web-route-pages-ai-exam-wrong-questions-practice .option-label{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  margin-right: calc(10 * var(--rpx));
  color: #333;
}.web-route-pages-ai-exam-wrong-questions-practice .option-content{
  font-size: calc(24 * var(--rpx));
  color: #333;
  flex: 1;
  line-height: calc(32 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .answer-info{
  margin-top: calc(20 * var(--rpx));
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #e0e0e0;
}.web-route-pages-ai-exam-wrong-questions-practice .your-answer{
  font-size: calc(24 * var(--rpx));
  color: #ff6b6b;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .previous-answer{
  font-size: calc(24 * var(--rpx));
  color: #ff9800;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .correct-answer{
  font-size: calc(24 * var(--rpx));
  color: #4caf50;
  margin-bottom: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .explanation{
  padding: calc(15 * var(--rpx));
  background-color: #f0f8ff;
  border-radius: calc(8 * var(--rpx));
  margin-top: calc(15 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .explanation-title{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #4a90e2;
  margin-bottom: calc(5 * var(--rpx));
  display: block;
}.web-route-pages-ai-exam-wrong-questions-practice .explanation-content{
  font-size: calc(24 * var(--rpx));
  color: #333;
  line-height: calc(32 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .btn-container{
  padding: calc(20 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .submit-btn, .web-route-pages-ai-exam-wrong-questions-practice .next-btn, .web-route-pages-ai-exam-wrong-questions-practice .finish-btn{
  width: 100%;
  height: calc(80 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  line-height: calc(80 * var(--rpx));
}.web-route-pages-ai-exam-wrong-questions-practice .submit-btn{
  background-color: #4a90e2;
  color: white;
}.web-route-pages-ai-exam-wrong-questions-practice .next-btn{
  background-color: #4caf50;
  color: white;
}.web-route-pages-ai-exam-wrong-questions-practice .finish-btn{
  background-color: #ff9800;
  color: white;
}.web-route-pages-ai-exam-wrong-questions-practice .btn::after{
  border: none;
}

/* pages/ai-exam/exam-list */

.web-route-pages-ai-exam-exam-list .container{
  min-height: 100vh;
  background: #f5f7fa;
}.web-route-pages-ai-exam-exam-list .header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(24 * var(--rpx)) calc(32 * var(--rpx));
  background: #fff;
  border-bottom: calc(1 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-ai-exam-exam-list .back-btn{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-ai-exam-exam-list .back-icon{
  font-size: calc(36 * var(--rpx));
  color: #333;
}.web-route-pages-ai-exam-exam-list .title{
  font-size: calc(34 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-ai-exam-exam-list .new-btn{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07c160;
  border-radius: 50%;
}.web-route-pages-ai-exam-exam-list .new-icon{
  font-size: calc(36 * var(--rpx));
  color: #fff;
}.web-route-pages-ai-exam-exam-list .tab-bar{
  display: flex;
  background: #fff;
  padding: 0 calc(32 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-ai-exam-exam-list .tab-item{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(28 * var(--rpx)) 0;
  position: relative;
}.web-route-pages-ai-exam-exam-list .tab-text{
  font-size: calc(28 * var(--rpx));
  color: #666;
}.web-route-pages-ai-exam-exam-list .tab-item.active .tab-text{
  color: #07c160;
  font-weight: 500;
}.web-route-pages-ai-exam-exam-list .tab-item.active::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(48 * var(--rpx));
  height: calc(4 * var(--rpx));
  background: #07c160;
  border-radius: calc(2 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .tab-badge{
  font-size: calc(20 * var(--rpx));
  color: #fff;
  background: #ff4d4f;
  padding: calc(2 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  margin-left: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .exam-list{
  height: calc(100vh - calc(200 * var(--rpx)));
  padding: calc(24 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .task-list{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .task-card{
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  padding: calc(28 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.06);
}.web-route-pages-ai-exam-exam-list .task-card.pending{
  border-left: calc(6 * var(--rpx)) solid #faad14;
}.web-route-pages-ai-exam-exam-list .task-card.completed{
  border-left: calc(6 * var(--rpx)) solid #07c160;
}.web-route-pages-ai-exam-exam-list .task-card.submitted{
  border-left: calc(6 * var(--rpx)) solid #1890ff;
}.web-route-pages-ai-exam-exam-list .task-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .task-type{
  font-size: calc(32 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-ai-exam-exam-list .task-status{
  font-size: calc(24 * var(--rpx));
  color: #faad14;
  background: #fff7e6;
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .task-status.ready{
  color: #07c160;
  background: #f6ffed;
}.web-route-pages-ai-exam-exam-list .task-score{
  font-size: calc(36 * var(--rpx));
  font-weight: 700;
  color: #1890ff;
}.web-route-pages-ai-exam-exam-list .task-info{
  display: flex;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .info-item{
  font-size: calc(24 * var(--rpx));
  color: #666;
  background: #f5f5f5;
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .task-time{
  font-size: calc(22 * var(--rpx));
  color: #999;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .progress-bar{
  height: calc(8 * var(--rpx));
  background: #f0f0f0;
  border-radius: calc(4 * var(--rpx));
  overflow: hidden;
}.web-route-pages-ai-exam-exam-list .progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #07c160, #52c41a);
  border-radius: calc(4 * var(--rpx));
  transition: width 0.3s ease;
}.web-route-pages-ai-exam-exam-list .task-actions{
  display: flex;
  gap: calc(16 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .action-btn{
  flex: 1;
  padding: calc(20 * var(--rpx)) 0;
  font-size: calc(28 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  border: none;
  text-align: center;
}.web-route-pages-ai-exam-exam-list .action-btn::after{
  border: none;
}.web-route-pages-ai-exam-exam-list .action-btn.primary{
  background: #07c160;
  color: #fff;
}.web-route-pages-ai-exam-exam-list .action-btn.delete{
  background: #f5f5f5;
  color: #666;
}.web-route-pages-ai-exam-exam-list .empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(120 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .empty-icon{
  font-size: calc(80 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .empty-text{
  font-size: calc(28 * var(--rpx));
  color: #999;
  margin-bottom: calc(40 * var(--rpx));
}.web-route-pages-ai-exam-exam-list .empty-btn{
  background: #07c160;
  color: #fff;
  padding: calc(24 * var(--rpx)) calc(48 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  border: none;
}.web-route-pages-ai-exam-exam-list .empty-btn::after{
  border: none;
}.web-route-pages-ai-exam-exam-list .ad-section{
  margin: calc(20 * var(--rpx)) calc(30 * var(--rpx)) calc(40 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}


/* pages/message/message */

.web-route-pages-message-message .container{
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-message-message .header{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: center;
}.web-route-pages-message-message .title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #fff;
}.web-route-pages-message-message .header-actions{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-message-message .action-btn{
  font-size: calc(26 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(30 * var(--rpx));
}.web-route-pages-message-message .action-btn.clear{
  background: rgba(255, 255, 255, 0.1);
}.web-route-pages-message-message .unread-tip{
  background: #fff3cd;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  text-align: center;
}.web-route-pages-message-message .tip-text{
  font-size: calc(28 * var(--rpx));
  color: #856404;
}.web-route-pages-message-message .message-list{
  padding: calc(20 * var(--rpx));
}.web-route-pages-message-message .message-item{
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
}.web-route-pages-message-message .message-item.unread{
  background: #f0f7ff;
  border-left: calc(6 * var(--rpx)) solid #4A90E2;
}.web-route-pages-message-message .message-content{
  flex: 1;
}.web-route-pages-message-message .message-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-message-message .message-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-message-message .unread-dot{
  width: calc(16 * var(--rpx));
  height: calc(16 * var(--rpx));
  background: #ff4757;
  border-radius: 50%;
  margin-left: calc(12 * var(--rpx));
}.web-route-pages-message-message .message-desc{
  font-size: calc(28 * var(--rpx));
  color: #666;
  line-height: 1.5;
  display: block;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-message-message .message-time{
  font-size: calc(24 * var(--rpx));
  color: #999;
}.web-route-pages-message-message .message-actions{
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-message-message .delete-btn{
  font-size: calc(24 * var(--rpx));
  color: #ff4757;
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-message-message .empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(200 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-message-message .empty-icon{
  font-size: calc(120 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-message-message .empty-text{
  font-size: calc(32 * var(--rpx));
  color: #999;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-message-message .empty-subtext{
  font-size: calc(26 * var(--rpx));
  color: #bbb;
}


/* pages/math-practice/math-practice */

.web-route-pages-math-practice-math-practice .container{
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-math-practice-math-practice .type-section{
  padding: calc(30 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-math-practice-math-practice .section-header{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-math-practice-math-practice .section-title{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-math-practice-math-practice .section-desc{
  font-size: calc(26 * var(--rpx));
  color: #999;
}.web-route-pages-math-practice-math-practice .usage-count{
  display: inline-block;
  margin-top: calc(12 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #FF6B6B;
  font-weight: 500;
  background: rgba(255, 107, 107, 0.08);
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
}.web-route-pages-math-practice-math-practice .count-select{
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-math-practice-math-practice .count-label{
  font-size: calc(28 * var(--rpx));
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-math-practice-math-practice .count-options{
  display: flex;
  gap: calc(16 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-math-practice-math-practice .count-option{
  flex: 1;
  min-width: calc(120 * var(--rpx));
  height: calc(72 * var(--rpx));
  line-height: calc(72 * var(--rpx));
  text-align: center;
  background: #fff;
  border: calc(2 * var(--rpx)) solid #E0E0E0;
  border-radius: calc(16 * var(--rpx));
  font-size: calc(26 * var(--rpx));
  color: #666;
  transition: all 0.3s ease;
}.web-route-pages-math-practice-math-practice .count-option.active{
  border-color: #4A90E2;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(102, 126, 234, 0.08) 100%);
  color: #4A90E2;
  font-weight: bold;
  transform: scale(1.05);
}.web-route-pages-math-practice-math-practice .count-option:active{
  transform: scale(0.96);
}.web-route-pages-math-practice-math-practice .type-scroll{
  height: calc(100vh - calc(320 * var(--rpx)));
}.web-route-pages-math-practice-math-practice .type-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(20 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
}.web-route-pages-math-practice-math-practice .type-item{
  background: #fff;
  border-radius: calc(20 * var(--rpx));
  padding: calc(28 * var(--rpx)) calc(16 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.06);
  border: calc(2 * var(--rpx)) solid transparent;
  transition: all 0.3s ease;
}.web-route-pages-math-practice-math-practice .type-item.active{
  border-color: #4A90E2;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(102, 126, 234, 0.08) 100%);
  transform: scale(1.02);
}.web-route-pages-math-practice-math-practice .type-item:active{
  transform: scale(0.96);
}.web-route-pages-math-practice-math-practice .type-icon{
  font-size: calc(44 * var(--rpx));
}.web-route-pages-math-practice-math-practice .type-name{
  font-size: calc(24 * var(--rpx));
  color: #333;
  text-align: center;
  font-weight: 500;
  line-height: 1.3;
}.web-route-pages-math-practice-math-practice .start-btn{
  margin: calc(20 * var(--rpx)) 0;
  width: 90%;
  height: calc(76 * var(--rpx));
  line-height: calc(76 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  border-radius: calc(38 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
}.web-route-pages-math-practice-math-practice .start-btn::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}.web-route-pages-math-practice-math-practice .start-btn:active::after{
  left: 100%;
}.web-route-pages-math-practice-math-practice .start-btn[disabled]{
  background: linear-gradient(135deg, #ccc 0%, #ddd 100%);
  box-shadow: none;
  opacity: 0.7;
}.web-route-pages-math-practice-math-practice .start-btn[disabled]{
  background: #ccc;
  box-shadow: none;
}.web-route-pages-math-practice-math-practice .practice-section{
  padding: calc(20 * var(--rpx));
}.web-route-pages-math-practice-math-practice .practice-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
  padding: 0 calc(8 * var(--rpx));
  flex-wrap: wrap;
  gap: calc(12 * var(--rpx));
}.web-route-pages-math-practice-math-practice .back-btn{
  font-size: calc(28 * var(--rpx));
  color: #4A90E2;
  font-weight: 500;
}.web-route-pages-math-practice-math-practice .timer-wrap{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
  padding: calc(10 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(255, 152, 0, 0.25);
}.web-route-pages-math-practice-math-practice .timer-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-math-practice-math-practice .timer-text{
  font-size: calc(28 * var(--rpx));
  color: #FF9800;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}.web-route-pages-math-practice-math-practice .stats-info{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}.web-route-pages-math-practice-math-practice .stat-text{
  font-size: calc(26 * var(--rpx));
  color: #666;
  font-weight: 500;
}.web-route-pages-math-practice-math-practice .stat-text.correct{
  color: #52C41A;
}.web-route-pages-math-practice-math-practice .stat-text.wrong{
  color: #ff4757;
}.web-route-pages-math-practice-math-practice .stat-divider{
  color: #ddd;
  font-size: calc(24 * var(--rpx));
}.web-route-pages-math-practice-math-practice .question-card{
  background: #fff;
  border-radius: calc(28 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.08);
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-math-practice-math-practice .type-tag{
  display: inline-block;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
  color: #4A90E2;
  font-size: calc(24 * var(--rpx));
  padding: calc(8 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  margin-bottom: calc(36 * var(--rpx));
  font-weight: 500;
}.web-route-pages-math-practice-math-practice .question-display{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-math-practice-math-practice .question-text{
  font-size: calc(56 * var(--rpx));
  font-weight: bold;
  color: #333;
  letter-spacing: calc(4 * var(--rpx));
}.web-route-pages-math-practice-math-practice .equals{
  font-size: calc(56 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-math-practice-math-practice .answer-input{
  min-width: calc(180 * var(--rpx));
  height: calc(88 * var(--rpx));
  line-height: calc(88 * var(--rpx));
  text-align: center;
  font-size: calc(52 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  border-bottom: calc(4 * var(--rpx)) solid #4A90E2;
  background: rgba(74, 144, 226, 0.05);
  border-radius: calc(12 * var(--rpx));
  padding: 0 calc(20 * var(--rpx));
}.web-route-pages-math-practice-math-practice .answer-input.correct{
  border-color: #52C41A;
  color: #52C41A;
  background: rgba(82, 196, 26, 0.05);
}.web-route-pages-math-practice-math-practice .answer-input.wrong{
  border-color: #ff4757;
  color: #ff4757;
  background: rgba(255, 71, 87, 0.05);
}.web-route-pages-math-practice-math-practice .keyboard-toggle{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(16 * var(--rpx));
  margin-left: calc(16 * var(--rpx));
  min-width: calc(100 * var(--rpx));
}.web-route-pages-math-practice-math-practice .keyboard-toggle-icon{
  font-size: calc(36 * var(--rpx));
  margin-bottom: calc(4 * var(--rpx));
}.web-route-pages-math-practice-math-practice .keyboard-toggle-text{
  font-size: calc(20 * var(--rpx));
  color: #fff;
  font-weight: 500;
}.web-route-pages-math-practice-math-practice .math-keypad-panel{
  margin: 0 calc(20 * var(--rpx)) calc(24 * var(--rpx));
  padding: calc(24 * var(--rpx));
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%);
  border-radius: calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(74, 144, 226, 0.1);
  box-shadow: 0 calc(12 * var(--rpx)) calc(36 * var(--rpx)) rgba(74, 144, 226, 0.14);
}.web-route-pages-math-practice-math-practice .math-keypad-head{
  display: grid;
  gap: calc(18 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-title-wrap{
  display: grid;
  gap: calc(8 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-title{
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
  color: #1F2A3D;
}.web-route-pages-math-practice-math-practice .math-keypad-tip{
  font-size: calc(22 * var(--rpx));
  color: #8c8c8c;
  line-height: 1.5;
}.web-route-pages-math-practice-math-practice .math-keypad-preview{
  padding: calc(18 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: calc(18 * var(--rpx));
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(102, 126, 234, 0.12));
  border: calc(2 * var(--rpx)) solid rgba(74, 144, 226, 0.08);
}.web-route-pages-math-practice-math-practice .math-keypad-preview-label{
  font-size: calc(20 * var(--rpx));
  color: #6B7280;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-preview-value{
  min-height: calc(36 * var(--rpx));
  font-size: calc(34 * var(--rpx));
  font-weight: 700;
  color: #1F2A3D;
  letter-spacing: calc(2 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(14 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-nine-grid{
  margin-bottom: calc(14 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-bottom-row{
  margin-bottom: calc(14 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-btn{
  height: calc(92 * var(--rpx));
  border: 0;
  border-radius: calc(18 * var(--rpx));
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF4FF 100%);
  color: #1F2A3D;
  font-size: calc(34 * var(--rpx));
  font-weight: 700;
  box-shadow: inset 0 0 0 calc(2 * var(--rpx)) rgba(74, 144, 226, 0.1), 0 calc(6 * var(--rpx)) calc(16 * var(--rpx)) rgba(74, 144, 226, 0.08);
}.web-route-pages-math-practice-math-practice .math-keypad-btn.is-action{
  color: #4A90E2;
  background: linear-gradient(180deg, #F3F8FF 0%, #E8F1FF 100%);
}.web-route-pages-math-practice-math-practice .math-keypad-btn.is-zero{
  font-size: calc(38 * var(--rpx));
}.web-route-pages-math-practice-math-practice .math-keypad-btn.is-secondary{
  flex: 1;
  font-size: calc(28 * var(--rpx));
  background: linear-gradient(180deg, #FFF7ED 0%, #FFE7CC 100%);
  color: #FA8C16;
  box-shadow: none;
}.web-route-pages-math-practice-math-practice .math-keypad-btn.is-primary{
  flex: 1.3;
  font-size: calc(28 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 100%);
  color: #fff;
  box-shadow: none;
}.web-route-pages-math-practice-math-practice .math-keypad-footer{
  display: flex;
  gap: calc(14 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
}.web-route-pages-math-practice-math-practice .result-area{
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-math-practice-math-practice .result-banner{
  border-radius: calc(20 * var(--rpx));
  padding: calc(28 * var(--rpx)) calc(40 * var(--rpx));
  text-align: center;
}.web-route-pages-math-practice-math-practice .result-banner.correct{
  background: rgba(82, 196, 26, 0.08);
  border: calc(2 * var(--rpx)) solid rgba(82, 196, 26, 0.3);
}.web-route-pages-math-practice-math-practice .result-banner.wrong{
  background: rgba(255, 71, 87, 0.08);
  border: calc(2 * var(--rpx)) solid rgba(255, 71, 87, 0.3);
}.web-route-pages-math-practice-math-practice .result-icon{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  display: block;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-math-practice-math-practice .result-banner.correct .result-icon{
  color: #52C41A;
}.web-route-pages-math-practice-math-practice .result-banner.wrong .result-icon{
  color: #ff4757;
}.web-route-pages-math-practice-math-practice .correct-answer{
  font-size: calc(28 * var(--rpx));
  color: #ff4757;
  font-weight: 500;
}.web-route-pages-math-practice-math-practice .action-area{
  padding: 0 calc(20 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-math-practice-math-practice .submit-btn{
  width: 100%;
  height: calc(96 * var(--rpx));
  line-height: calc(96 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 100%);
  color: #fff;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border-radius: calc(48 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74, 144, 226, 0.35);
}.web-route-pages-math-practice-math-practice .submit-btn[disabled]{
  background: #ccc;
  box-shadow: none;
}.web-route-pages-math-practice-math-practice .next-btn{
  width: 100%;
  height: calc(96 * var(--rpx));
  line-height: calc(96 * var(--rpx));
  color: #fff;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border-radius: calc(48 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(0, 0, 0, 0.15);
}.web-route-pages-math-practice-math-practice .next-btn.correct-btn{
  background: linear-gradient(135deg, #52C41A 0%, #73d13d 100%);
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(82, 196, 26, 0.35);
}.web-route-pages-math-practice-math-practice .next-btn.wrong-btn{
  background: linear-gradient(135deg, #FF7875 0%, #ff4757 100%);
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(255, 71, 87, 0.35);
}.web-route-pages-math-practice-math-practice .progress-bar{
  height: calc(8 * var(--rpx));
  background: #E8E8E8;
  border-radius: calc(4 * var(--rpx));
  overflow: hidden;
}.web-route-pages-math-practice-math-practice .progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #4A90E2 0%, #667eea 50%, #764ba2 100%);
  border-radius: calc(4 * var(--rpx));
  transition: width 0.4s ease;
}.web-route-pages-math-practice-math-practice .result-section{
  padding: calc(60 * var(--rpx)) calc(20 * var(--rpx));
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-math-practice-math-practice .result-card{
  width: 100%;
  background: #fff;
  border-radius: calc(32 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
  box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0, 0, 0, 0.1);
  text-align: center;
}.web-route-pages-math-practice-math-practice .result-header{
  margin-bottom: calc(48 * var(--rpx));
}.web-route-pages-math-practice-math-practice .result-title{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-math-practice-math-practice .result-subtitle{
  font-size: calc(28 * var(--rpx));
  color: #999;
}.web-route-pages-math-practice-math-practice .stats-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24 * var(--rpx));
  margin-bottom: calc(40 * var(--rpx));
}.web-route-pages-math-practice-math-practice .stat-card{
  background: linear-gradient(135deg, #F8F9FA 0%, #F0F2F5 100%);
  border-radius: calc(20 * var(--rpx));
  padding: calc(32 * var(--rpx)) calc(24 * var(--rpx));
}.web-route-pages-math-practice-math-practice .stat-value{
  display: block;
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-math-practice-math-practice .stat-label{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-math-practice-math-practice .encouragement-card{
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(102, 126, 234, 0.08) 100%);
  border-radius: calc(20 * var(--rpx));
  padding: calc(32 * var(--rpx));
  margin-bottom: calc(48 * var(--rpx));
  border-left: calc(8 * var(--rpx)) solid #4A90E2;
}.web-route-pages-math-practice-math-practice .encouragement-text{
  font-size: calc(28 * var(--rpx));
  color: #333;
  line-height: 1.6;
  font-weight: 500;
}.web-route-pages-math-practice-math-practice .wrong-review-card{
  margin-bottom: calc(40 * var(--rpx));
  padding: calc(32 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
  border: calc(2 * var(--rpx)) solid rgba(74, 144, 226, 0.1);
  box-shadow: 0 calc(10 * var(--rpx)) calc(30 * var(--rpx)) rgba(31, 42, 61, 0.08);
  text-align: left;
}.web-route-pages-math-practice-math-practice .wrong-review-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-math-practice-math-practice .wrong-review-head-main{
  min-width: 0;
}.web-route-pages-math-practice-math-practice .wrong-review-title{
  display: block;
  margin-bottom: calc(8 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
  color: #1F2A3D;
}.web-route-pages-math-practice-math-practice .wrong-review-subtitle{
  display: block;
  font-size: calc(22 * var(--rpx));
  color: #7B8794;
  line-height: 1.5;
}.web-route-pages-math-practice-math-practice .wrong-review-badge{
  flex-shrink: 0;
  min-width: calc(100 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: linear-gradient(135deg, #FF7875 0%, #FF4D4F 100%);
  color: #fff;
  font-size: calc(22 * var(--rpx));
  font-weight: 700;
  text-align: center;
}.web-route-pages-math-practice-math-practice .wrong-review-list{
  display: grid;
  gap: calc(18 * var(--rpx));
}.web-route-pages-math-practice-math-practice .wrong-review-item{
  padding: calc(24 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  background: linear-gradient(180deg, rgba(255, 77, 79, 0.05) 0%, rgba(255, 244, 244, 0.9) 100%);
  border: calc(2 * var(--rpx)) solid rgba(255, 77, 79, 0.16);
  box-shadow: inset 0 0 0 calc(1 * var(--rpx)) rgba(255,255,255,0.7);
}.web-route-pages-math-practice-math-practice .wrong-review-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--rpx));
  margin-bottom: calc(14 * var(--rpx));
}.web-route-pages-math-practice-math-practice .wrong-review-index{
  font-size: calc(26 * var(--rpx));
  font-weight: 700;
  color: #FF4D4F;
}.web-route-pages-math-practice-math-practice .wrong-review-status{
  padding: calc(8 * var(--rpx)) calc(14 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: rgba(255, 77, 79, 0.12);
  color: #FF4D4F;
  font-size: calc(20 * var(--rpx));
  font-weight: 600;
}.web-route-pages-math-practice-math-practice .wrong-review-question{
  display: block;
  margin-bottom: calc(16 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #333;
  line-height: 1.6;
}.web-route-pages-math-practice-math-practice .wrong-review-answer-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
}.web-route-pages-math-practice-math-practice .wrong-review-answer-card.mine{
  background: rgba(255, 77, 79, 0.08);
}.web-route-pages-math-practice-math-practice .wrong-review-answer-card.correct{
  background: rgba(82, 196, 26, 0.08);
}.web-route-pages-math-practice-math-practice .wrong-review-answer-label{
  font-size: calc(22 * var(--rpx));
  color: #6B7280;
  font-weight: 600;
}.web-route-pages-math-practice-math-practice .wrong-review-answer-value{
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
}.web-route-pages-math-practice-math-practice .wrong-review-answer-card.mine .wrong-review-answer-value{
  color: #FF4D4F;
}.web-route-pages-math-practice-math-practice .wrong-review-answer-card.correct .wrong-review-answer-value{
  color: #52C41A;
}.web-route-pages-math-practice-math-practice .wrong-review-empty{
  margin-bottom: calc(40 * var(--rpx));
  padding: calc(32 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  background: linear-gradient(180deg, rgba(82, 196, 26, 0.08) 0%, rgba(240, 255, 244, 0.95) 100%);
  border: calc(2 * var(--rpx)) solid rgba(82, 196, 26, 0.2);
  text-align: center;
}.web-route-pages-math-practice-math-practice .wrong-review-empty-title{
  display: block;
  color: #389E0D;
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-math-practice-math-practice .wrong-review-empty-desc{
  display: block;
  color: #5E8C61;
  font-size: calc(23 * var(--rpx));
  line-height: 1.6;
}.web-route-pages-math-practice-math-practice .result-actions{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-math-practice-math-practice .again-btn{
  width: 100%;
  height: calc(96 * var(--rpx));
  line-height: calc(96 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 100%);
  color: #fff;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  border-radius: calc(48 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74, 144, 226, 0.35);
}.web-route-pages-math-practice-math-practice .back-btn-plain{
  width: 100%;
  height: calc(96 * var(--rpx));
  line-height: calc(96 * var(--rpx));
  background: #F5F7FA;
  color: #4A90E2;
  font-size: calc(28 * var(--rpx));
  font-weight: 500;
  border-radius: calc(48 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #E8E8E8;
}

/* pages/data-analysis/data-analysis */

.web-route-pages-data-analysis-data-analysis .container{
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .header-stats{
  padding: calc(24 * var(--rpx)) calc(20 * var(--rpx));
  text-align: center;
}.web-route-pages-data-analysis-data-analysis .usage-text{
  font-size: calc(26 * var(--rpx));
  color: #FF6B6B;
  font-weight: 500;
  background: rgba(255,107,107,0.08);
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  display: inline-block;
}.web-route-pages-data-analysis-data-analysis .main-section{
  padding: 0 calc(20 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .card-section{
  background: #fff;
  border-radius: calc(24 * var(--rpx));
  padding: calc(28 * var(--rpx)) calc(24 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.06);
}.web-route-pages-data-analysis-data-analysis .section-title-bar{
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
  margin-bottom: calc(22 * var(--rpx));
  padding-bottom: calc(16 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-data-analysis-data-analysis .title-icon{ font-size: calc(32 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .title-text{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-data-analysis-data-analysis .formula-list{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .formula-item{
  background: linear-gradient(135deg, #F8F9FA, #FFF);
  border-radius: calc(16 * var(--rpx));
  overflow: hidden;
  border: calc(2 * var(--rpx)) solid #E8E8E8;
  transition: all 0.3s;
}.web-route-pages-data-analysis-data-analysis .formula-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(22 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .formula-name{
  font-size: calc(27 * var(--rpx));
  color: #333;
  font-weight: 600;
}.web-route-pages-data-analysis-data-analysis .expand-arrow{
  font-size: calc(22 * var(--rpx));
  color: #999;
}.web-route-pages-data-analysis-data-analysis .formula-body{
  padding: 0 calc(20 * var(--rpx)) calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid #F0F0F0;
}.web-route-pages-data-analysis-data-analysis .formula-content{
  font-size: calc(25 * var(--rpx));
  color: #555;
  line-height: 1.7;
  display: block;
  margin-top: calc(12 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .tips-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(14 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .tip-card{
  background: linear-gradient(135deg, rgba(74,144,226,0.06), rgba(102,126,234,0.06));
  border-radius: calc(16 * var(--rpx));
  padding: calc(22 * var(--rpx)) calc(18 * var(--rpx));
  border: calc(2 * var(--rpx)) solid transparent;
  transition: all 0.3s;
}.web-route-pages-data-analysis-data-analysis .tip-card:active{
  transform: scale(0.96);
  border-color: #4A90E2;
}.web-route-pages-data-analysis-data-analysis .tip-name{
  font-size: calc(26 * var(--rpx));
  color: #4A90E2;
  font-weight: 600;
  display: block;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .tip-brief{
  font-size: calc(22 * var(--rpx));
  color: #888;
  display: block;
}.web-route-pages-data-analysis-data-analysis .type-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(14 * var(--rpx));
  margin-bottom: calc(22 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .type-item{
  background: #fff;
  border: calc(2 * var(--rpx)) solid #E8E8E8;
  border-radius: calc(16 * var(--rpx));
  padding: calc(20 * var(--rpx)) calc(12 * var(--rpx));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--rpx));
  transition: all 0.3s;
}.web-route-pages-data-analysis-data-analysis .type-item.active{
  border-color: #4A90E2;
  background: linear-gradient(135deg, rgba(74,144,226,0.08), rgba(102,126,234,0.08));
  transform: scale(1.02);
}.web-route-pages-data-analysis-data-analysis .type-icon{ font-size: calc(36 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .type-name{
  font-size: calc(22 * var(--rpx));
  color: #333;
  text-align: center;
  font-weight: 500;
  line-height: 1.3;
}.web-route-pages-data-analysis-data-analysis .count-select-row{
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(22 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-data-analysis-data-analysis .count-label{
  font-size: calc(26 * var(--rpx));
  color: #333;
  font-weight: 500;
}.web-route-pages-data-analysis-data-analysis .count-options{
  display: flex;
  gap: calc(12 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .count-opt{
  padding: calc(10 * var(--rpx)) calc(24 * var(--rpx));
  background: #F5F5F5;
  border: calc(2 * var(--rpx)) solid #E0E0E0;
  border-radius: calc(12 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #666;
  transition: all 0.3s;
}.web-route-pages-data-analysis-data-analysis .count-opt.active{
  border-color: #4A90E2;
  color: #4A90E2;
  background: rgba(74,144,226,0.08);
  font-weight: 600;
}.web-route-pages-data-analysis-data-analysis .start-btn{
  width: 100%;
  height: calc(88 * var(--rpx));
  line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff;
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  border-radius: calc(44 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74,144,226,0.35);
}.web-route-pages-data-analysis-data-analysis .start-btn[disabled]{
  background: #ccc;
  box-shadow: none;
}.web-route-pages-data-analysis-data-analysis .practice-section{
  padding: calc(20 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .practice-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
  padding: 0 calc(8 * var(--rpx));
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .back-btn{
  font-size: calc(28 * var(--rpx));
  color: #4A90E2;
  font-weight: 500;
}.web-route-pages-data-analysis-data-analysis .timer-wrap{
  display: flex;
  align-items: center;
  gap: calc(6 * var(--rpx));
  background: linear-gradient(135deg, rgba(255,193,7,0.1), rgba(255,152,0,0.1));
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(255,152,0,0.25);
}.web-route-pages-data-analysis-data-analysis .timer-icon{ font-size: calc(26 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .timer-text{
  font-size: calc(26 * var(--rpx));
  color: #FF9800;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}.web-route-pages-data-analysis-data-analysis .stats-info{
  display: flex;
  align-items: center;
  gap: calc(10 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .stat-text{
  font-size: calc(24 * var(--rpx));
  color: #666;
  font-weight: 500;
}.web-route-pages-data-analysis-data-analysis .stat-text.correct{ color: #52C41A; }.web-route-pages-data-analysis-data-analysis .stat-text.wrong{ color: #ff4757; }.web-route-pages-data-analysis-data-analysis .stat-divider{ color: #ddd; font-size: calc(22 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .question-card{
  background: #fff;
  border-radius: calc(24 * var(--rpx));
  padding: calc(48 * var(--rpx)) calc(32 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0,0,0,0.08);
  text-align: center;
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .type-tag{
  display: inline-block;
  background: linear-gradient(135deg, rgba(74,144,226,0.1), rgba(102,126,234,0.1));
  color: #4A90E2;
  font-size: calc(23 * var(--rpx));
  padding: calc(8 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: calc(18 * var(--rpx));
  margin-bottom: calc(28 * var(--rpx));
  font-weight: 500;
}.web-route-pages-data-analysis-data-analysis .question-desc{
  font-size: calc(25 * var(--rpx));
  color: #888;
  display: block;
  margin-bottom: calc(20 * var(--rpx));
  line-height: 1.5;
  text-align: left;
}.web-route-pages-data-analysis-data-analysis .question-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-data-analysis-data-analysis .question-text{
  font-size: calc(42 * var(--rpx));
  font-weight: bold;
  color: #333;
  letter-spacing: calc(2 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .answer-input{
  min-width: calc(160 * var(--rpx));
  height: calc(76 * var(--rpx));
  line-height: calc(76 * var(--rpx));
  text-align: center;
  font-size: calc(44 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  border-bottom: calc(4 * var(--rpx)) solid #4A90E2;
  background: rgba(74,144,226,0.05);
  border-radius: calc(10 * var(--rpx));
  padding: 0 calc(16 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .answer-input.correct{ border-color: #52C41A; color: #52C41A; background: rgba(82,196,26,0.05); }.web-route-pages-data-analysis-data-analysis .answer-input.wrong{ border-color: #ff4757; color: #ff4757; background: rgba(255,71,87,0.05); }.web-route-pages-data-analysis-data-analysis .compare-btns{
  display: flex;
  gap: calc(24 * var(--rpx));
  justify-content: center;
  margin-top: calc(32 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .cmp-btn{
  flex: 1;
  max-width: calc(200 * var(--rpx));
  height: calc(88 * var(--rpx));
  line-height: calc(84 * var(--rpx));
  text-align: center;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%);
  border: calc(3 * var(--rpx)) solid #E0E0E0;
  border-radius: calc(20 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  color: #555;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}.web-route-pages-data-analysis-data-analysis .cmp-btn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(74, 144, 226, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}.web-route-pages-data-analysis-data-analysis .cmp-btn:active{
  transform: scale(0.95);
  border-color: #4A90E2;
  color: #4A90E2;
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(74, 144, 226, 0.25);
}.web-route-pages-data-analysis-data-analysis .cmp-btn:active::before{
  width: calc(240 * var(--rpx));
  height: calc(240 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .cmp-btn.ok{
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.12) 0%, rgba(115, 209, 61, 0.08) 100%);
  border-color: #52C41A;
  color: #389E0D;
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(82, 196, 26, 0.2);
  animation: btnPop 0.35s ease-out;
}.web-route-pages-data-analysis-data-analysis .cmp-btn.err{
  background: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(255, 120, 117, 0.08) 100%);
  border-color: #FF4757;
  color: #CF1322;
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(255, 71, 87, 0.15);
  animation: btnShake 0.4s ease-out;
}.web-route-pages-data-analysis-data-analysis .cmp-btn.right{
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.18) 0%, rgba(115, 209, 61, 0.12) 100%);
  border-color: #52C41A;
  color: #237804;
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(82, 196, 26, 0.3), 0 0 0 calc(3 * var(--rpx)) rgba(82, 196, 26, 0.15);
  animation: btnGlow 1.5s ease-in-out infinite alternate;
}@keyframes btnPop{
  0% { transform: scale(0.9); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}@keyframes btnShake{
  0% { transform: translateX(0); }
  20% { transform: translateX(-calc(8 * var(--rpx))); }
  40% { transform: translateX(calc(8 * var(--rpx))); }
  60% { transform: translateX(-calc(5 * var(--rpx))); }
  80% { transform: translateX(calc(5 * var(--rpx))); }
  100% { transform: translateX(0); }
}@keyframes btnGlow{
  from { box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(82, 196, 26, 0.3), 0 0 0 calc(3 * var(--rpx)) rgba(82, 196, 26, 0.15); }
  to { box-shadow: 0 calc(6 * var(--rpx)) calc(28 * var(--rpx)) rgba(82, 196, 26, 0.45), 0 0 0 calc(5 * var(--rpx)) rgba(82, 196, 26, 0.22); }
}.web-route-pages-data-analysis-data-analysis .result-area{ margin-bottom: calc(20 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .result-banner{
  border-radius: calc(18 * var(--rpx));
  padding: calc(24 * var(--rpx)) calc(36 * var(--rpx));
  text-align: center;
}.web-route-pages-data-analysis-data-analysis .result-banner.correct{ background: rgba(82,196,26,0.08); border: calc(2 * var(--rpx)) solid rgba(82,196,26,0.3); }.web-route-pages-data-analysis-data-analysis .result-banner.wrong{ background: rgba(255,71,87,0.08); border: calc(2 * var(--rpx)) solid rgba(255,71,87,0.3); }.web-route-pages-data-analysis-data-analysis .result-icon{ font-size: calc(30 * var(--rpx)); font-weight: bold; display: block; margin-bottom: calc(6 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .result-banner.correct .result-icon{ color: #52C41A; }.web-route-pages-data-analysis-data-analysis .result-banner.wrong .result-icon{ color: #ff4757; }.web-route-pages-data-analysis-data-analysis .correct-ans{ font-size: calc(26 * var(--rpx)); color: #ff4757; font-weight: 500; }.web-route-pages-data-analysis-data-analysis .action-area{ padding: 0 calc(16 * var(--rpx)); margin-bottom: calc(20 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .submit-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold;
  border-radius: calc(44 * var(--rpx)); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74,144,226,0.35);
}.web-route-pages-data-analysis-data-analysis .submit-btn[disabled]{ background: #ccc; box-shadow: none; }.web-route-pages-data-analysis-data-analysis .next-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold;
  border-radius: calc(44 * var(--rpx)); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(0,0,0,0.15);
}.web-route-pages-data-analysis-data-analysis .next-btn.ok{ background: linear-gradient(135deg, #52C41A, #73d13d); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(82,196,26,0.35); }.web-route-pages-data-analysis-data-analysis .next-btn.err{ background: linear-gradient(135deg, #FF7875, #ff4757); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(255,71,87,0.35); }.web-route-pages-data-analysis-data-analysis .progress-bar{ height: calc(8 * var(--rpx)); background: #E8E8E8; border-radius: calc(4 * var(--rpx)); overflow: hidden; }.web-route-pages-data-analysis-data-analysis .progress-fill{
  height: 100%; background: linear-gradient(90deg, #4A90E2, #667eea, #764ba2);
  border-radius: calc(4 * var(--rpx)); transition: width 0.4s ease;
}.web-route-pages-data-analysis-data-analysis .result-.web-page{
  padding: calc(60 * var(--rpx)) calc(20 * var(--rpx));
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-data-analysis-data-analysis .result-card{
  width: 100%; background: #fff; border-radius: calc(28 * var(--rpx));
  padding: calc(50 * var(--rpx)) calc(36 * var(--rpx)); box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0,0,0,0.1); text-align: center;
}.web-route-pages-data-analysis-data-analysis .res-header{ margin-bottom: calc(40 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .res-title{ font-size: calc(44 * var(--rpx)); font-weight: bold; color: #333; display: block; margin-bottom: calc(10 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .res-sub{ font-size: calc(26 * var(--rpx)); color: #999; }.web-route-pages-data-analysis-data-analysis .res-stats{
  display: grid; grid-template-columns: repeat(2,1fr); gap: calc(18 * var(--rpx)); margin-bottom: calc(34 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .res-stat{
  background: linear-gradient(135deg,#F8F9FA,#F0F2F5); border-radius: calc(18 * var(--rpx)); padding: calc(26 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .rv{ display: block; font-size: calc(36 * var(--rpx)); font-weight: bold; color: #4A90E2; margin-bottom: calc(6 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .rl{ font-size: calc(22 * var(--rpx)); color: #666; }.web-route-pages-data-analysis-data-analysis .encourage-box{
  background: linear-gradient(135deg, rgba(74,144,226,0.08), rgba(102,126,234,0.08));
  border-radius: calc(18 * var(--rpx)); padding: calc(26 * var(--rpx)); margin-bottom: calc(38 * var(--rpx));
  border-left: calc(8 * var(--rpx)) solid #4A90E2;
}.web-route-pages-data-analysis-data-analysis .encourage-txt{ font-size: calc(26 * var(--rpx)); color: #333; line-height: 1.6; font-weight: 500; }.web-route-pages-data-analysis-data-analysis .res-actions{ display: flex; flex-direction: column; gap: calc(16 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .again-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold; border-radius: calc(44 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74,144,226,0.35);
}.web-route-pages-data-analysis-data-analysis .exit-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  background: #F5F7FA; color: #4A90E2; font-size: calc(26 * var(--rpx)); font-weight: 500;
  border-radius: calc(44 * var(--rpx)); border: calc(2 * var(--rpx)) solid #E8E8E8;
}.web-route-pages-data-analysis-data-analysis .mask{
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}.web-route-pages-data-analysis-data-analysis .modal{
  width: 85%; max-width: calc(600 * var(--rpx)); background: #fff; border-radius: calc(24 * var(--rpx));
  overflow: hidden;
}.web-route-pages-data-analysis-data-analysis .modal-header{
  padding: calc(30 * var(--rpx)) calc(28 * var(--rpx)); background: linear-gradient(135deg, #4A90E2, #667eea);
}.web-route-pages-data-analysis-data-analysis .modal-title{ font-size: calc(30 * var(--rpx)); font-weight: bold; color: #fff; }.web-route-pages-data-analysis-data-analysis .modal-body{ padding: calc(30 * var(--rpx)) calc(28 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .modal-content{ font-size: calc(26 * var(--rpx)); color: #555; line-height: 1.8; display: block; }.web-route-pages-data-analysis-data-analysis .modal-footer{ padding: calc(20 * var(--rpx)) calc(28 * var(--rpx)) calc(28 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .modal-close{
  width: 100%; height: calc(80 * var(--rpx)); line-height: calc(80 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff; font-size: calc(28 * var(--rpx)); font-weight: bold; border-radius: calc(40 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .tool-grid{
  display: grid; grid-template-columns: repeat(3,1fr); gap: calc(14 * var(--rpx));
}.web-route-pages-data-analysis-data-analysis .tool-item{
  background: #fff; border-radius: calc(16 * var(--rpx)); padding: calc(18 * var(--rpx)) calc(10 * var(--rpx));
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.05);
  transition: all 0.25s; position: relative;
}.web-route-pages-data-analysis-data-analysis .tool-item.active{ background: linear-gradient(135deg, rgba(74,144,226,0.1), rgba(102,126,234,0.1)); border: calc(2 * var(--rpx)) solid #4A90E2; }.web-route-pages-data-analysis-data-analysis .tool-icon{ font-size: calc(36 * var(--rpx)); margin-bottom: calc(6 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .tool-name{ font-size: calc(23 * var(--rpx)); color: #333; font-weight: 500; text-align: center; }.web-route-pages-data-analysis-data-analysis .tool-tag{ font-size: calc(18 * var(--rpx)); color: #999; margin-top: calc(4 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .tool-section{ min-height: 100vh; background: #F5F7FA; padding-bottom: calc(40 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .tool-header{ display: flex; align-items: center; padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)); gap: calc(16 * var(--rpx)); background: #fff; box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.06); }.web-route-pages-data-analysis-data-analysis .tool-title-text{ font-size: calc(32 * var(--rpx)); font-weight: bold; color: #333; }.web-route-pages-data-analysis-data-analysis .material-loading{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(80 * var(--rpx)) calc(40 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .loading-spinner{ width: calc(60 * var(--rpx)); height: calc(60 * var(--rpx)); border: calc(4 * var(--rpx)) solid #E8E8E8; border-top-color: #4A90E2; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: calc(20 * var(--rpx)); }@keyframes spin{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }.web-route-pages-data-analysis-data-analysis .loading-text{ font-size: calc(28 * var(--rpx)); color: #666; }.web-route-pages-data-analysis-data-analysis .material-card{ margin: calc(20 * var(--rpx)) calc(20 * var(--rpx)); background: #fff; border-radius: calc(20 * var(--rpx)); padding: calc(30 * var(--rpx)); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.08); }.web-route-pages-data-analysis-data-analysis .material-type-tag{ display: inline-block; background: linear-gradient(135deg,#4A90E2,#667eea); color: #fff; font-size: calc(24 * var(--rpx)); padding: calc(8 * var(--rpx)) calc(20 * var(--rpx)); border-radius: calc(12 * var(--rpx)); margin-bottom: calc(20 * var(--rpx)); font-weight: 500; }.web-route-pages-data-analysis-data-analysis .material-line{ font-size: calc(27 * var(--rpx)); color: #444; line-height: 2; display: block; white-space: pre-wrap; word-break: break-all; }.web-route-pages-data-analysis-data-analysis .refresh-material{ margin: calc(20 * var(--rpx)) calc(20 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .refresh-btn{ width: 100%; height: calc(72 * var(--rpx)); line-height: calc(72 * var(--rpx)); background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-size: calc(26 * var(--rpx)); font-weight: 500; border-radius: calc(36 * var(--rpx)); box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(102, 126, 234, 0.3); }.web-route-pages-data-analysis-data-analysis .find-question{ margin: calc(20 * var(--rpx)) calc(20 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .find-q-card{ background: #fff; border-radius: calc(18 * var(--rpx)); padding: calc(28 * var(--rpx)); box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0,0,0,0.06); }.web-route-pages-data-analysis-data-analysis .find-q-text{ font-size: calc(29 * var(--rpx)); color: #333; line-height: 1.6; display: block; margin-bottom: calc(20 * var(--rpx)); font-weight: 500; }.web-route-pages-data-analysis-data-analysis .find-input{ width: 100%; height: calc(80 * var(--rpx)); border: calc(3 * var(--rpx)) solid #E0E0E0; border-radius: calc(16 * var(--rpx)); padding: 0 calc(24 * var(--rpx)); font-size: calc(30 * var(--rpx)); box-sizing: border-box; transition: all 0.3s; }.web-route-pages-data-analysis-data-analysis .find-input.ok{ border-color: #52C41A; color: #52C41A; background: rgba(82,196,26,0.04); }.web-route-pages-data-analysis-data-analysis .find-input.err{ border-color: #FF4757; color: #FF4757; background: rgba(255,71,87,0.04); }.web-route-pages-data-analysis-data-analysis .find-result{ text-align: center; margin-top: calc(20 * var(--rpx)); font-size: calc(28 * var(--rpx)); font-weight: 600; }.web-route-pages-data-analysis-data-analysis .find-result .ok{ color: #52C41A; }.web-route-pages-data-analysis-data-analysis .find-result .err{ color: #FF4757; }.web-route-pages-data-analysis-data-analysis .tool-next-btn{ width: calc(100% - calc(40 * var(--rpx))); margin: calc(20 * var(--rpx)) auto 0; height: calc(80 * var(--rpx)); line-height: calc(80 * var(--rpx)); background: linear-gradient(135deg, #52C41A, #73d13d); color: #fff; font-size: calc(28 * var(--rpx)); font-weight: bold; border-radius: calc(40 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .demo-intro{ margin: calc(20 * var(--rpx)) calc(24 * var(--rpx)); font-size: calc(26 * var(--rpx)); color: #666; line-height: 1.6; background: #FFFBE6; padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)); border-radius: calc(14 * var(--rpx)); border-left: calc(6 * var(--rpx)) solid #FAAD14; }.web-route-pages-data-analysis-data-analysis .demo-input-area{ margin: calc(16 * var(--rpx)) calc(24 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .demo-input-row{ display: flex; align-items: center; margin-bottom: calc(16 * var(--rpx)); background: #fff; border-radius: calc(14 * var(--rpx)); padding: calc(16 * var(--rpx)) calc(20 * var(--rpx)); box-shadow: 0 calc(2 * var(--rpx)) calc(6 * var(--rpx)) rgba(0,0,0,0.04); }.web-route-pages-data-analysis-data-analysis .demo-label{ font-size: calc(26 * var(--rpx)); color: #555; width: calc(180 * var(--rpx)); font-weight: 500; flex-shrink: 0; }.web-route-pages-data-analysis-data-analysis .demo-field{ flex: 1; height: calc(64 * var(--rpx)); border: calc(2 * var(--rpx)) solid #E0E0E0; border-radius: calc(12 * var(--rpx)); padding: 0 calc(16 * var(--rpx)); font-size: calc(28 * var(--rpx)); box-sizing: border-box; }.web-route-pages-data-analysis-data-analysis .demo-result{ margin: calc(24 * var(--rpx)) calc(24 * var(--rpx)); background: #fff; border-radius: calc(18 * var(--rpx)); padding: calc(28 * var(--rpx)); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.07); }.web-route-pages-data-analysis-data-analysis .demo-step{ display: flex; align-items: flex-start; margin-bottom: calc(18 * var(--rpx)); padding-bottom: calc(18 * var(--rpx)); border-bottom: calc(1 * var(--rpx)) dashed #EEE; }.web-route-pages-data-analysis-data-analysis .step-num{ font-size: calc(24 * var(--rpx)); color: #4A90E2; font-weight: bold; background: rgba(74,144,226,0.1); padding: calc(4 * var(--rpx)) calc(14 * var(--rpx)); border-radius: calc(8 * var(--rpx)); margin-right: calc(16 * var(--rpx)); flex-shrink: 0; }.web-route-pages-data-analysis-data-analysis .step-content{ font-size: calc(27 * var(--rpx)); color: #444; line-height: 1.65; flex: 1; }.web-route-pages-data-analysis-data-analysis .demo-final-answer{ display: flex; align-items: center; justify-content: center; margin-top: calc(20 * var(--rpx)); padding: calc(24 * var(--rpx)); background: linear-gradient(135deg, rgba(82,196,26,0.08), rgba(115,209,61,0.06)); border-radius: calc(14 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .final-label{ font-size: calc(28 * var(--rpx)); color: #666; font-weight: 500; }.web-route-pages-data-analysis-data-analysis .final-value{ font-size: calc(36 * var(--rpx)); color: #52C41A; font-weight: bold; margin-left: calc(12 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .ref-table-wrap{ margin: calc(20 * var(--rpx)) calc(16 * var(--rpx)); background: #fff; border-radius: calc(18 * var(--rpx)); overflow: hidden; box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.07); }.web-route-pages-data-analysis-data-analysis .ref-row{ display: flex; border-bottom: calc(1 * var(--rpx)) solid #F0F0F0; }.web-route-pages-data-analysis-data-analysis .ref-row:last-child{ border-bottom: none; }.web-route-pages-data-analysis-data-analysis .ref-head{ background: linear-gradient(135deg, #4A90E2, #667eea); }.web-route-pages-data-analysis-data-analysis .ref-cell{ flex: 1; text-align: center; padding: calc(18 * var(--rpx)) calc(8 * var(--rpx)); font-size: calc(25 * var(--rpx)); color: #444; border-right: calc(1 * var(--rpx)) solid #F0F0F0; }.web-route-pages-data-analysis-data-analysis .ref-cell:last-child{ border-right: none; }.web-route-pages-data-analysis-data-analysis .ref-cell.head{ color: #fff; font-weight: bold; font-size: calc(24 * var(--rpx)); }.web-route-pages-data-analysis-data-analysis .ref-cell:nth-child(odd){ background: #FAFCFF; }.web-route-pages-data-analysis-data-analysis .ref-head .ref-cell:nth-child(odd){ background: transparent; }.web-route-pages-data-analysis-data-analysis .ref-extra{ margin: calc(20 * var(--rpx)) calc(24 * var(--rpx)); padding: calc(24 * var(--rpx)); background: #FFFBE6; border-radius: calc(14 * var(--rpx)); border-left: calc(6 * var(--rpx)) solid #FAAD14; }.web-route-pages-data-analysis-data-analysis .ref-extra-txt{ font-size: calc(25 * var(--rpx)); color: #666; line-height: 1.75; }

/* pages/graphic-reasoning/index */

.web-route-pages-graphic-reasoning-index .container{
  min-height: 100vh;
  background: #f5f7fa;
  padding: calc(24 * var(--rpx));
  box-sizing: border-box;
}.web-route-pages-graphic-reasoning-index .hero{
  background: linear-gradient(135deg, #4a90e2, #667eea);
  border-radius: calc(20 * var(--rpx));
  padding: calc(28 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .hero-title{
  display: block;
  color: #fff;
  font-size: calc(34 * var(--rpx));
  font-weight: 700;
}.web-route-pages-graphic-reasoning-index .hero-sub{
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(24 * var(--rpx));
  margin-top: calc(8 * var(--rpx));
  line-height: 1.5;
}.web-route-pages-graphic-reasoning-index .tab-scroll{
  white-space: nowrap;
  margin-bottom: calc(18 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .tabs{
  display: inline-flex;
  gap: calc(12 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .tab{
  padding: calc(12 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  background: #fff;
  color: #666;
  font-size: calc(24 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #e8e8e8;
}.web-route-pages-graphic-reasoning-index .tab.active{
  background: #4a90e2;
  color: #fff;
  border-color: #4a90e2;
}.web-route-pages-graphic-reasoning-index .panel{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .block, .web-route-pages-graphic-reasoning-index .card, .web-route-pages-graphic-reasoning-index .solid-card, .web-route-pages-graphic-reasoning-index .step{
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  padding: calc(20 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .block-title, .web-route-pages-graphic-reasoning-index .sample-title, .web-route-pages-graphic-reasoning-index .solid-name{
  display: block;
  color: #333;
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .line, .web-route-pages-graphic-reasoning-index .card-text, .web-route-pages-graphic-reasoning-index .sample-line, .web-route-pages-graphic-reasoning-index .step-text, .web-route-pages-graphic-reasoning-index .solid-intro, .web-route-pages-graphic-reasoning-index .observe-line, .web-route-pages-graphic-reasoning-index .net-note{
  display: block;
  color: #555;
  font-size: calc(24 * var(--rpx));
  line-height: 1.7;
}.web-route-pages-graphic-reasoning-index .switch-row{
  margin-top: calc(14 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .label{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-graphic-reasoning-index .btn-group{
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .mini-btn{
  padding: calc(10 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  background: #f0f4ff;
  border: calc(1 * var(--rpx)) solid #d9e5ff;
  color: #4a6fb3;
  font-size: calc(23 * var(--rpx));
  white-space: nowrap;
}.web-route-pages-graphic-reasoning-index .mini-btn.on{
  background: #4a90e2;
  border-color: #4a90e2;
  color: #fff;
}.web-route-pages-graphic-reasoning-index .mini-btn-sm{
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
  background: #f5f7fa;
  border: calc(1 * var(--rpx)) solid #e2e8f0;
  color: #64748b;
  font-size: calc(20 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .mini-btn-sm.on{
  background: #4a90e2;
  border-color: #4a90e2;
  color: #fff;
}.web-route-pages-graphic-reasoning-index .action-group{
  display: flex;
  gap: calc(12 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .net-cell.highlight{
  background: #fff5f5;
  border-color: #ef4444;
  box-shadow: 0 0 calc(12 * var(--rpx)) rgba(239, 68, 68, 0.3);
  transform: scale(1.05);
  z-index: 5;
}.web-route-pages-graphic-reasoning-index .card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .mode-switch{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .btn-group-scroll{
  margin-top: calc(10 * var(--rpx));
  width: 100%;
}.web-route-pages-graphic-reasoning-index .mini-scroll{
  width: 100%;
  display: flex;
  white-space: nowrap;
  gap: calc(12 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .mini-scroll .mini-btn{
  display: inline-block;
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .net-picker-btn{
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--rpx));
  min-width: calc(280 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .net-picker-title{
  font-size: calc(23 * var(--rpx));
  font-weight: 700;
  line-height: 1.4;
}.web-route-pages-graphic-reasoning-index .net-picker-status{
  padding: calc(2 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  font-size: calc(18 * var(--rpx));
  line-height: 1.4;
}.web-route-pages-graphic-reasoning-index .net-picker-status.ok{
  background: rgba(22, 101, 52, 0.12);
  color: #166534;
}.web-route-pages-graphic-reasoning-index .net-picker-status.warn{
  background: rgba(180, 83, 9, 0.14);
  color: #b45309;
}.web-route-pages-graphic-reasoning-index .net-picker-pairs{
  font-size: calc(18 * var(--rpx));
  line-height: 1.4;
  color: inherit;
  opacity: 0.85;
}.web-route-pages-graphic-reasoning-index .net-canvas-container{
  display: flex;
  justify-content: center;
  padding: calc(30 * var(--rpx)) 0;
  background: #f8fafc;
  border-radius: calc(12 * var(--rpx));
  border: calc(2 * var(--rpx)) dashed #cbd5e1;
}.web-route-pages-graphic-reasoning-index .net-canvas{
  position: relative;
}.web-route-pages-graphic-reasoning-index .net-cell{
  position: absolute;
  width: calc(76 * var(--rpx));
  height: calc(76 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
  background: #fff;
  border: calc(2 * var(--rpx)) solid #4a90e2;
  border-radius: calc(4 * var(--rpx));
  color: #4a90e2;
  transition: all 0.3s ease;
}.web-route-pages-graphic-reasoning-index .face-1{ border-color: #ffd700; color: #b8860b; }.web-route-pages-graphic-reasoning-index .face-2{ border-color: #ffd700; color: #b8860b; }.web-route-pages-graphic-reasoning-index .face-3{ border-color: #1e90ff; color: #00008b; }.web-route-pages-graphic-reasoning-index .face-4{ border-color: #1e90ff; color: #00008b; }.web-route-pages-graphic-reasoning-index .face-5{ border-color: #32cd32; color: #008000; }.web-route-pages-graphic-reasoning-index .face-6{ border-color: #32cd32; color: #008000; }.web-route-pages-graphic-reasoning-index .tip-box{
  margin-top: calc(16 * var(--rpx));
  padding: calc(12 * var(--rpx));
  background: #fffbeb;
  border-radius: calc(8 * var(--rpx));
  border-left: calc(4 * var(--rpx)) solid #f59e0b;
}.web-route-pages-graphic-reasoning-index .pair-tag{
  display: inline-block;
  padding: calc(4 * var(--rpx)) calc(12 * var(--rpx));
  background: #e2e8f0;
  color: #475569;
  font-size: calc(18 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
  margin-right: calc(8 * var(--rpx));
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .pair-list{
  margin-top: calc(10 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .pair-list text{
  font-size: calc(22 * var(--rpx));
  color: #334155;
  font-family: monospace;
}.web-route-pages-graphic-reasoning-index .auto-pair-box{
  margin-top: calc(16 * var(--rpx));
  padding: calc(16 * var(--rpx));
  background: #f8fbff;
  border: calc(1 * var(--rpx)) solid #dbeafe;
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .auto-pair-status{
  display: block;
  margin-top: calc(10 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  line-height: 1.6;
}.web-route-pages-graphic-reasoning-index .auto-pair-status.ok{
  color: #166534;
}.web-route-pages-graphic-reasoning-index .auto-pair-status.warn{
  color: #b45309;
}.web-route-pages-graphic-reasoning-index .observe-box{
  margin-top: calc(14 * var(--rpx));
  padding: calc(16 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  background: #f8fbff;
  border-left: calc(6 * var(--rpx)) solid #4a90e2;
}.web-route-pages-graphic-reasoning-index .observe-title{
  display: block;
  color: #333;
  font-size: calc(25 * var(--rpx));
  font-weight: 600;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .solid-stage{
  display: flex;
  justify-content: center;
  margin-top: calc(18 * var(--rpx));
  perspective: calc(1200 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .player-row{
  display: flex;
  gap: calc(12 * var(--rpx));
  margin-top: calc(16 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .player-btn{
  flex: 1;
  height: calc(68 * var(--rpx));
  line-height: calc(68 * var(--rpx));
  text-align: center;
  border-radius: calc(14 * var(--rpx));
  background: #eef4ff;
  color: #3567a9;
  font-size: calc(24 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #dbe7ff;
}.web-route-pages-graphic-reasoning-index .player-btn.main{
  background: #4a90e2;
  border-color: #4a90e2;
  color: #fff;
  font-weight: 600;
}.web-route-pages-graphic-reasoning-index .player-btn.main.playing{
  box-shadow: 0 0 0 calc(8 * var(--rpx)) rgba(74, 144, 226, 0.08);
}.web-route-pages-graphic-reasoning-index .solid-figure{
  position: relative;
  width: calc(260 * var(--rpx));
  height: calc(220 * var(--rpx));
  transition: transform 0.45s ease, filter 0.45s ease;
  animation: floatSolid 2.2s ease-in-out infinite;
  transform-style: preserve-3d;
}.web-route-pages-graphic-reasoning-index .face{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(4 * var(--rpx)) solid rgba(255, 255, 255, 0.8);
  color: #2f5f9c;
  font-size: calc(24 * var(--rpx));
  font-weight: 700;
  box-sizing: border-box;
  transition: all 0.45s ease;
  box-shadow: inset 0 0 calc(40 * var(--rpx)) rgba(0, 0, 0, 0.1);
  backface-visibility: visible;
}.web-route-pages-graphic-reasoning-index .face::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: calc(2 * var(--rpx)) solid rgba(0, 0, 0, 0.1);
}.web-route-pages-graphic-reasoning-index .tone-a{
  background: linear-gradient(135deg, #ffd700, #ffa500);
  border-color: #b8860b;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-graphic-reasoning-index .tone-b{
  background: linear-gradient(135deg, #1e90ff, #0000ff);
  border-color: #00008b;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-graphic-reasoning-index .tone-c{
  background: linear-gradient(135deg, #32cd32, #008000);
  border-color: #006400;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-graphic-reasoning-index .tone-d{
  background: linear-gradient(135deg, #ff69b4, #ff1493);
  border-color: #c71585;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-graphic-reasoning-index .tone-e{
  background: linear-gradient(135deg, #9370db, #8a2be2);
  border-color: #4b0082;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-graphic-reasoning-index .tone-f{
  background: linear-gradient(135deg, #ff4500, #ff0000);
  border-color: #8b0000;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.3);
}.web-route-pages-graphic-reasoning-index .cube-front .face, .web-route-pages-graphic-reasoning-index .cube-left .face, .web-route-pages-graphic-reasoning-index .cube-top .face{
  width: calc(110 * var(--rpx));
  height: calc(110 * var(--rpx));
  left: calc(70 * var(--rpx));
  top: calc(50 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .cube-front .face-front, .web-route-pages-graphic-reasoning-index .cube-left .face-front, .web-route-pages-graphic-reasoning-index .cube-top .face-front{
  transform: translateZ(calc(55 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cube-front .face-back, .web-route-pages-graphic-reasoning-index .cube-left .face-back, .web-route-pages-graphic-reasoning-index .cube-top .face-back{
  transform: rotateY(180deg) translateZ(calc(55 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cube-front .face-top, .web-route-pages-graphic-reasoning-index .cube-left .face-top, .web-route-pages-graphic-reasoning-index .cube-top .face-top{
  transform: rotateX(90deg) translateZ(calc(55 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cube-front .face-bottom, .web-route-pages-graphic-reasoning-index .cube-left .face-bottom, .web-route-pages-graphic-reasoning-index .cube-top .face-bottom{
  transform: rotateX(-90deg) translateZ(calc(55 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cube-front .face-left, .web-route-pages-graphic-reasoning-index .cube-left .face-left, .web-route-pages-graphic-reasoning-index .cube-top .face-left{
  transform: rotateY(-90deg) translateZ(calc(55 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cube-front .face-right, .web-route-pages-graphic-reasoning-index .cube-left .face-right, .web-route-pages-graphic-reasoning-index .cube-top .face-right{
  transform: rotateY(90deg) translateZ(calc(55 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face, .web-route-pages-graphic-reasoning-index .cuboid-right .face, .web-route-pages-graphic-reasoning-index .cuboid-top .face{
  left: calc(55 * var(--rpx));
  top: calc(50 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face-front, .web-route-pages-graphic-reasoning-index .cuboid-right .face-front, .web-route-pages-graphic-reasoning-index .cuboid-top .face-front{
  width: calc(150 * var(--rpx));
  height: calc(100 * var(--rpx));
  transform: translateZ(calc(40 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face-back, .web-route-pages-graphic-reasoning-index .cuboid-right .face-back, .web-route-pages-graphic-reasoning-index .cuboid-top .face-back{
  width: calc(150 * var(--rpx));
  height: calc(100 * var(--rpx));
  transform: rotateY(180deg) translateZ(calc(40 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face-top, .web-route-pages-graphic-reasoning-index .cuboid-right .face-top, .web-route-pages-graphic-reasoning-index .cuboid-top .face-top{
  width: calc(150 * var(--rpx));
  height: calc(80 * var(--rpx));
  transform: rotateX(90deg) translateZ(calc(50 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face-bottom, .web-route-pages-graphic-reasoning-index .cuboid-right .face-bottom, .web-route-pages-graphic-reasoning-index .cuboid-top .face-bottom{
  width: calc(150 * var(--rpx));
  height: calc(80 * var(--rpx));
  transform: rotateX(-90deg) translateZ(calc(50 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face-left, .web-route-pages-graphic-reasoning-index .cuboid-right .face-left, .web-route-pages-graphic-reasoning-index .cuboid-top .face-left{
  width: calc(80 * var(--rpx));
  height: calc(100 * var(--rpx));
  transform: rotateY(-90deg) translateZ(calc(75 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-front .face-right, .web-route-pages-graphic-reasoning-index .cuboid-right .face-right, .web-route-pages-graphic-reasoning-index .cuboid-top .face-right{
  width: calc(80 * var(--rpx));
  height: calc(100 * var(--rpx));
  transform: rotateY(90deg) translateZ(calc(75 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cylinder-front .face, .web-route-pages-graphic-reasoning-index .cylinder-top .face{
  left: calc(80 * var(--rpx));
  top: calc(50 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .cylinder-front .face-top{
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  border-radius: 50%;
  transform: rotateX(90deg) translateZ(calc(60 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cylinder-front .face-bottom{
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  border-radius: 50%;
  transform: rotateX(-90deg) translateZ(calc(60 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cylinder-front .face-front{
  width: calc(100 * var(--rpx));
  height: calc(120 * var(--rpx));
  background: linear-gradient(90deg, #93c5fd, #60a5fa, #93c5fd);
  border-radius: 0;
  transform: translateZ(calc(50 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cone-front .face, .web-route-pages-graphic-reasoning-index .cone-top .face{
  left: calc(80 * var(--rpx));
  top: calc(50 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .cone-front .face-bottom{
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  border-radius: 50%;
  transform: rotateX(-90deg) translateZ(0);
}.web-route-pages-graphic-reasoning-index .cone-front .face-front{
  width: 0;
  height: 0;
  background: transparent;
  border-left: calc(50 * var(--rpx)) solid transparent;
  border-right: calc(50 * var(--rpx)) solid transparent;
  border-bottom: calc(100 * var(--rpx)) solid #93c5fd;
  transform: rotateX(15deg) translateZ(calc(20 * var(--rpx)));
  box-shadow: none;
  border-top: none;
}.web-route-pages-graphic-reasoning-index .sphere-front .face{
  width: calc(120 * var(--rpx));
  height: calc(120 * var(--rpx));
  border-radius: 50%;
  left: calc(70 * var(--rpx));
  top: calc(50 * var(--rpx));
  background: radial-gradient(circle at 30% 30%, #dbeafe, #93c5fd, #4a90e2);
}.web-route-pages-graphic-reasoning-index .shape.ellipse{
  width: calc(90 * var(--rpx));
  height: calc(50 * var(--rpx));
  background: #93c5fd;
  border: calc(3 * var(--rpx)) solid #4a90e2;
  border-radius: 50%;
}.web-route-pages-graphic-reasoning-index .cube-left{
  transform: scale(1) rotate(-6deg) translateX(-calc(8 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cube-top{
  transform: scale(1.02) translateY(-calc(10 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-right{
  transform: rotate(-4deg) translateX(calc(6 * var(--rpx)));
}.web-route-pages-graphic-reasoning-index .cuboid-top{
  transform: translateY(-calc(8 * var(--rpx))) scale(1.02);
}.web-route-pages-graphic-reasoning-index .cut-line{
  position: absolute;
  left: calc(74 * var(--rpx));
  top: calc(104 * var(--rpx));
  width: calc(128 * var(--rpx));
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, #ef4444, #f97316);
  transform: rotate(-24deg);
  border-radius: calc(999 * var(--rpx));
  box-shadow: 0 0 calc(10 * var(--rpx)) rgba(239, 68, 68, 0.35);
  animation: pulseCut 1.6s ease-in-out infinite;
}.web-route-pages-graphic-reasoning-index .face-text{
  font-size: calc(22 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .drag-tip, .web-route-pages-graphic-reasoning-index .cut-focus{
  display: block;
  font-size: calc(23 * var(--rpx));
  color: #5f6b7a;
  line-height: 1.7;
  margin-top: calc(12 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .no-section-tip{
  padding: calc(20 * var(--rpx));
  background: #fdf2f2;
  border-radius: calc(10 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  color: #9b4d4d;
  text-align: center;
}.web-route-pages-graphic-reasoning-index .legend-row{
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--rpx));
  margin-top: calc(14 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .legend-chip{
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(999 * var(--rpx));
  font-size: calc(22 * var(--rpx));
  font-weight: 600;
  border: calc(2 * var(--rpx)) solid transparent;
}.web-route-pages-graphic-reasoning-index .cut-control-box, .web-route-pages-graphic-reasoning-index .fold-demo-card{
  margin-top: calc(16 * var(--rpx));
  background: #fff;
  border-radius: calc(14 * var(--rpx));
  padding: calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #edf2f7;
}.web-route-pages-graphic-reasoning-index .section-box, .web-route-pages-graphic-reasoning-index .net-visual-card{
  margin-top: calc(16 * var(--rpx));
  background: #fff;
  border-radius: calc(14 * var(--rpx));
  padding: calc(18 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #edf2f7;
}.web-route-pages-graphic-reasoning-index .section-list{
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .section-item{
  width: calc(50% - calc(8 * var(--rpx)));
  background: #f8fbff;
  border-radius: calc(12 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(12 * var(--rpx));
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}.web-route-pages-graphic-reasoning-index .section-item.active{
  background: #eef6ff;
  box-shadow: 0 calc(10 * var(--rpx)) calc(24 * var(--rpx)) rgba(74, 144, 226, 0.12);
  border: calc(1 * var(--rpx)) solid #cfe1ff;
}.web-route-pages-graphic-reasoning-index .section-item:active{
  transform: scale(0.98);
}.web-route-pages-graphic-reasoning-index .section-item:nth-child(odd){
  animation: fadeSlideIn 0.45s ease;
}.web-route-pages-graphic-reasoning-index .section-item:nth-child(even){
  animation: fadeSlideIn 0.6s ease;
}.web-route-pages-graphic-reasoning-index .shape-wrap{
  height: calc(110 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-graphic-reasoning-index .shape.square{
  width: calc(72 * var(--rpx));
  height: calc(72 * var(--rpx));
  background: #93c5fd;
  border: calc(3 * var(--rpx)) solid #4a90e2;
}.web-route-pages-graphic-reasoning-index .shape.rect{
  width: calc(96 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: #93c5fd;
  border: calc(3 * var(--rpx)) solid #4a90e2;
}.web-route-pages-graphic-reasoning-index .shape.quad{
  width: calc(84 * var(--rpx));
  height: calc(62 * var(--rpx));
  background: #93c5fd;
  border: calc(3 * var(--rpx)) solid #4a90e2;
  transform: rotate(-15deg);
}.web-route-pages-graphic-reasoning-index .shape.parallelogram{
  width: calc(90 * var(--rpx));
  height: calc(58 * var(--rpx));
  background: #93c5fd;
  border: calc(3 * var(--rpx)) solid #4a90e2;
  transform: skewX(-24deg);
}.web-route-pages-graphic-reasoning-index .shape.triangle{
  width: 0;
  height: 0;
  border-left: calc(40 * var(--rpx)) solid transparent;
  border-right: calc(40 * var(--rpx)) solid transparent;
  border-bottom: calc(76 * var(--rpx)) solid #60a5fa;
}.web-route-pages-graphic-reasoning-index .shape-hexagon{
  width: calc(86 * var(--rpx));
  height: calc(74 * var(--rpx));
  position: relative;
}.web-route-pages-graphic-reasoning-index .hex-mid{
  position: absolute;
  top: calc(18 * var(--rpx));
  left: 0;
  width: calc(86 * var(--rpx));
  height: calc(38 * var(--rpx));
  background: #93c5fd;
  border-left: calc(3 * var(--rpx)) solid #4a90e2;
  border-right: calc(3 * var(--rpx)) solid #4a90e2;
  box-sizing: border-box;
}.web-route-pages-graphic-reasoning-index .hex-top{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: calc(43 * var(--rpx)) solid transparent;
  border-right: calc(43 * var(--rpx)) solid transparent;
  border-bottom: calc(18 * var(--rpx)) solid #93c5fd;
}.web-route-pages-graphic-reasoning-index .hex-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: calc(43 * var(--rpx)) solid transparent;
  border-right: calc(43 * var(--rpx)) solid transparent;
  border-top: calc(18 * var(--rpx)) solid #93c5fd;
}.web-route-pages-graphic-reasoning-index .section-name{
  display: block;
  color: #333;
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
}.web-route-pages-graphic-reasoning-index .section-tip, .web-route-pages-graphic-reasoning-index .net-tip{
  display: block;
  color: #666;
  font-size: calc(22 * var(--rpx));
  line-height: 1.6;
  margin-top: calc(6 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .net-canvas{
  position: relative;
  margin: calc(18 * var(--rpx)) auto calc(8 * var(--rpx));
  background: linear-gradient(180deg, #f8fbff, #eef5ff);
  border-radius: calc(16 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .net-cell{
  position: absolute;
  width: calc(84 * var(--rpx));
  height: calc(84 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  background: #93c5fd;
  border: calc(3 * var(--rpx)) solid #4a90e2;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(22 * var(--rpx));
  font-weight: 600;
  box-sizing: border-box;
  animation: popIn 0.4s ease;
}.web-route-pages-graphic-reasoning-index .fold-stage{
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(420 * var(--rpx));
  padding: calc(40 * var(--rpx)) 0;
  perspective: calc(1500 * var(--rpx));
  background: radial-gradient(circle, #ffffff 0%, #f1f5f9 100%);
  border-radius: calc(20 * var(--rpx));
  margin: calc(20 * var(--rpx)) 0;
}.web-route-pages-graphic-reasoning-index .fold-judgment-box{
  margin-top: calc(20 * var(--rpx));
  padding: calc(16 * var(--rpx));
  background: #f0f7ff;
  border-radius: calc(12 * var(--rpx));
  border-left: calc(6 * var(--rpx)) solid #4a90e2;
}.web-route-pages-graphic-reasoning-index .fold-step-box{
  margin-top: calc(16 * var(--rpx));
  padding: calc(16 * var(--rpx));
  background: #f8fbff;
  border-radius: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #dbeafe;
}.web-route-pages-graphic-reasoning-index .fold-step-current{
  display: block;
  font-size: calc(23 * var(--rpx));
  color: #1e3a8a;
  line-height: 1.7;
}.web-route-pages-graphic-reasoning-index .fold-step-list{
  margin-top: calc(12 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .fold-step-item{
  padding: calc(12 * var(--rpx)) calc(14 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  background: #fff;
  color: #475569;
  font-size: calc(22 * var(--rpx));
  line-height: 1.6;
  border: calc(1 * var(--rpx)) solid #e2e8f0;
}.web-route-pages-graphic-reasoning-index .fold-step-item.active{
  background: #eef6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 calc(8 * var(--rpx)) calc(20 * var(--rpx)) rgba(59, 130, 246, 0.08);
}.web-route-pages-graphic-reasoning-index .fold-step-item.done{
  background: #f8fafc;
  color: #334155;
}.web-route-pages-graphic-reasoning-index .judgment-row{
  display: flex;
  gap: calc(20 * var(--rpx));
  margin-top: calc(10 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .judgment-item{
  flex: 1;
}.web-route-pages-graphic-reasoning-index .pair-title{
  display: block;
  font-size: calc(24 * var(--rpx));
  font-weight: 700;
  color: #333;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-graphic-reasoning-index .pair-content{
  display: block;
  font-size: calc(22 * var(--rpx));
  color: #555;
  line-height: 1.6;
}.web-route-pages-graphic-reasoning-index .fold-demo{
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotateX(-20deg) rotateY(-20deg);
}.web-route-pages-graphic-reasoning-index .fold-face{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -calc(41 * var(--rpx));
  margin-top: -calc(41 * var(--rpx));
  width: calc(82 * var(--rpx));
  height: calc(82 * var(--rpx));
  border-radius: calc(4 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(135deg, #4a90e2, #2c5e9e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(32 * var(--rpx));
  font-weight: 700;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 calc(15 * var(--rpx)) rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transform-origin: center center;
}.web-route-pages-graphic-reasoning-index .fold-face.root{
  background: linear-gradient(135deg, #ff6b6b, #ee5253);
}.web-route-pages-graphic-reasoning-index .fold-demo.is-complete{ animation: cubeSpin 6s linear infinite; }@keyframes cubeSpin{
  0% { transform: rotateX(-30deg) rotateY(0deg); }
  100% { transform: rotateX(-30deg) rotateY(360deg); }
}@keyframes floatSolid{
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-calc(6 * var(--rpx)));
  }
  100% {
    transform: translateY(0);
  }
}@keyframes pulseCut{
  0% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.65;
  }
}@keyframes fadeSlideIn{
  from {
    opacity: 0;
    transform: translateY(calc(10 * var(--rpx)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}@keyframes popIn{
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* pages/logic-fill/logic-fill */

.web-route-pages-logic-fill-logic-fill .container{
  min-height: 100vh;
  background: #F5F7FA;
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .header-stats{ padding: calc(24 * var(--rpx)) calc(20 * var(--rpx)); display: flex; align-items: center; justify-content: space-between; }.web-route-pages-logic-fill-logic-fill .usage-text{
  font-size: calc(26 * var(--rpx)); color: #FF6B6B; font-weight: 500;
  background: rgba(255,107,107,0.08); padding: calc(8 * var(--rpx)) calc(20 * var(--rpx)); border-radius: calc(16 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .my-learned-btn{
  font-size: calc(24 * var(--rpx)); color: #4A90E2; padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  background: rgba(74,144,226,0.08); border-radius: calc(12 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .card-section{ margin: calc(20 * var(--rpx)); background: #fff; border-radius: calc(20 * var(--rpx)); padding: calc(28 * var(--rpx)); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.06); }.web-route-pages-logic-fill-logic-fill .section-title-bar{ display: flex; align-items: center; margin-bottom: calc(24 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .title-icon{ font-size: calc(32 * var(--rpx)); margin-right: calc(10 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .title-text{ font-size: calc(30 * var(--rpx)); font-weight: bold; color: #333; flex: 1; }.web-route-pages-logic-fill-logic-fill .section-count{ font-size: calc(22 * var(--rpx)); color: #999; }.web-route-pages-logic-fill-logic-fill .refresh-btn{
  font-size: calc(22 * var(--rpx)); color: #4A90E2; padding: calc(4 * var(--rpx)) calc(14 * var(--rpx));
  border-radius: calc(10 * var(--rpx)); border: calc(1 * var(--rpx)) solid #4A90E2;
}.web-route-pages-logic-fill-logic-fill .refresh-btn.loading{ color: #FAAD14; border-color: #FAAD14; }.web-route-pages-logic-fill-logic-fill .search-row{ margin-bottom: calc(16 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .search-input{
  width: 100%; height: calc(72 * var(--rpx)); border: calc(2 * var(--rpx)) solid #E8E8E8; border-radius: calc(14 * var(--rpx));
  padding: 0 calc(24 * var(--rpx)); font-size: calc(27 * var(--rpx)); color: #333; box-sizing: border-box; background: #FAFAFA;
}.web-route-pages-logic-fill-logic-fill .search-input:focus{ border-color: #4A90E2; background: #fff; }.web-route-pages-logic-fill-logic-fill .idiom-list{ max-height: calc(600 * var(--rpx)); overflow-y: auto; }.web-route-pages-logic-fill-logic-fill .idiom-item{
  border: calc(2 * var(--rpx)) solid #F0F0F0; border-radius: calc(14 * var(--rpx)); margin-bottom: calc(12 * var(--rpx));
  overflow: hidden; transition: all 0.3s;
}.web-route-pages-logic-fill-logic-fill .idiom-item.expanded{ border-color: #4A90E2; box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(74,144,226,0.1); }.web-route-pages-logic-fill-logic-fill .idiom-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(22 * var(--rpx)) calc(24 * var(--rpx)); background: linear-gradient(135deg, #FAFCFF, #F5F7FA);
}.web-route-pages-logic-fill-logic-fill .idiom-words{ display: flex; align-items: center; gap: calc(12 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .word-a{ font-size: calc(28 * var(--rpx)); font-weight: bold; color: #4A90E2; }.web-route-pages-logic-fill-logic-fill .word-b{ font-size: calc(28 * var(--rpx)); font-weight: bold; color: #667eea; }.web-route-pages-logic-fill-logic-fill .vs-tag{
  font-size: calc(20 * var(--rpx)); color: #999; background: #F0F0F0; padding: calc(2 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(8 * var(--rpx)); font-weight: 500;
}.web-route-pages-logic-fill-logic-fill .expand-arrow{ font-size: calc(22 * var(--rpx)); color: #999; }.web-route-pages-logic-fill-logic-fill .idiom-body{ padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)); background: #fff; }.web-route-pages-logic-fill-logic-fill .diff-block{ margin-bottom: calc(14 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .diff-label{ font-size: calc(25 * var(--rpx)); font-weight: bold; color: #4A90E2; display: block; margin-bottom: calc(4 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .diff-meaning{ font-size: calc(25 * var(--rpx)); color: #555; line-height: 1.65; display: block; }.web-route-pages-logic-fill-logic-fill .diff-distinct{ background: #FFFBE6; padding: calc(16 * var(--rpx)) calc(18 * var(--rpx)); border-radius: calc(10 * var(--rpx)); margin-bottom: calc(14 * var(--rpx)); border-left: calc(5 * var(--rpx)) solid #FAAD14; }.web-route-pages-logic-fill-logic-fill .distinct-label{ font-size: calc(24 * var(--rpx)); font-weight: bold; color: #D48806; }.web-route-pages-logic-fill-logic-fill .distinct-content{ font-size: calc(25 * var(--rpx)); color: #666; line-height: 1.65; }.web-route-pages-logic-fill-logic-fill .example-block{ background: #F0F7FF; padding: calc(16 * var(--rpx)) calc(18 * var(--rpx)); border-radius: calc(10 * var(--rpx)); border-left: calc(5 * var(--rpx)) solid #4A90E2; }.web-route-pages-logic-fill-logic-fill .example-label{ font-size: calc(24 * var(--rpx)); font-weight: bold; color: #4A90E2; }.web-route-pages-logic-fill-logic-fill .example-sentence{ font-size: calc(25 * var(--rpx)); color: #444; line-height: 1.7; display: block; margin-top: calc(4 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .ai-intro{ margin-bottom: calc(20 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .ai-desc{ font-size: calc(25 * var(--rpx)); color: #888; line-height: 1.6; display: block; }.web-route-pages-logic-fill-logic-fill .ai-options{ margin-bottom: calc(20 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .ai-opt-row{ display: flex; align-items: center; margin-bottom: calc(14 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .opt-label{ font-size: calc(26 * var(--rpx)); color: #555; width: calc(140 * var(--rpx)); flex-shrink: 0; font-weight: 500; }.web-route-pages-logic-fill-logic-fill .opt-btns{ display: flex; gap: calc(12 * var(--rpx)); flex: 1; }.web-route-pages-logic-fill-logic-fill .opt-btn{
  flex: 1; height: calc(64 * var(--rpx)); line-height: calc(64 * var(--rpx)); text-align: center;
  background: #F5F7FA; border: calc(2 * var(--rpx)) solid #E8E8E8; border-radius: calc(12 * var(--rpx));
  font-size: calc(26 * var(--rpx)); color: #666; transition: all 0.25s;
}.web-route-pages-logic-fill-logic-fill .opt-btn.active{ background: linear-gradient(135deg, #4A90E2, #667eea); color: #fff; border-color: transparent; }.web-route-pages-logic-fill-logic-fill .opt-btn.easy.active{ background: linear-gradient(135deg, #52C41A, #73d13d); }.web-route-pages-logic-fill-logic-fill .opt-btn.mid.active{ background: linear-gradient(135deg, #FAAD14, #FFC53D); color: #fff; }.web-route-pages-logic-fill-logic-fill .opt-btn.hard.active{ background: linear-gradient(135deg, #FF4757, #FF7875); }.web-route-pages-logic-fill-logic-fill .ai-start{ margin-top: calc(10 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .start-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold;
  border-radius: calc(44 * var(--rpx)); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74,144,226,0.35);
}.web-route-pages-logic-fill-logic-fill .start-btn[disabled]{ opacity: 0.6; }.web-route-pages-logic-fill-logic-fill .start-btn.disabled{ background: #ccc; box-shadow: none; }.web-route-pages-logic-fill-logic-fill .usage-count-card{
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-logic-fill-logic-fill .usage-count-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .usage-count-title{
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-logic-fill-logic-fill .usage-count-text{
  font-size: calc(32 * var(--rpx));
  font-weight: 700;
  color: #4A90E2;
}.web-route-pages-logic-fill-logic-fill .usage-count-bar{
  width: 100%;
  height: calc(12 * var(--rpx));
  background: #e0e0e0;
  border-radius: calc(6 * var(--rpx));
  overflow: hidden;
}.web-route-pages-logic-fill-logic-fill .usage-count-fill{
  height: 100%;
  background: linear-gradient(135deg, #4A90E2 0%, #667eea 100%);
  border-radius: calc(6 * var(--rpx));
  transition: width 0.3s ease;
}.web-route-pages-logic-fill-logic-fill .usage-count-tip{
  margin-top: calc(12 * var(--rpx));
  text-align: center;
}.web-route-pages-logic-fill-logic-fill .tip-text{
  font-size: calc(24 * var(--rpx));
  color: #ff6b6b;
}.web-route-pages-logic-fill-logic-fill .usage-count-hint{
  margin-top: calc(12 * var(--rpx));
  text-align: center;
}.web-route-pages-logic-fill-logic-fill .hint-text{
  font-size: calc(24 * var(--rpx));
  color: #4A90E2;
}.web-route-pages-logic-fill-logic-fill .reward-ad-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: calc(44 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(79, 172, 254, 0.4);
}.web-route-pages-logic-fill-logic-fill .reward-ad-icon{
  font-size: calc(32 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .reward-ad-text{
  color: #fff;
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
}.web-route-pages-logic-fill-logic-fill .freq-tabs{ display: flex; gap: calc(12 * var(--rpx)); margin-bottom: calc(20 * var(--rpx)); flex-wrap: wrap; }.web-route-pages-logic-fill-logic-fill .freq-tab{
  padding: calc(10 * var(--rpx)) calc(22 * var(--rpx)); background: #F5F7FA; border-radius: calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx)); color: #666; transition: all 0.25s; border: calc(2 * var(--rpx)) solid transparent;
}.web-route-pages-logic-fill-logic-fill .freq-tab.active{ background: linear-gradient(135deg, rgba(74,144,226,0.1), rgba(102,126,234,0.08)); color: #4A90E2; border-color: #4A90E2; font-weight: 600; }.web-route-pages-logic-fill-logic-fill .freq-word-list{ max-height: calc(500 * var(--rpx)); overflow-y: auto; }.web-route-pages-logic-fill-logic-fill .freq-word-item{
  padding: calc(18 * var(--rpx)) calc(16 * var(--rpx)); border-bottom: calc(1 * var(--rpx)) solid #F5F5F5;
}.web-route-pages-logic-fill-logic-fill .freq-word-item:last-child{ border-bottom: none; }.web-route-pages-logic-fill-logic-fill .freq-word{ font-size: calc(28 * var(--rpx)); font-weight: bold; color: #333; display: block; margin-bottom: calc(4 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .freq-meaning{ font-size: calc(24 * var(--rpx)); color: #777; display: block; line-height: 1.5; }.web-route-pages-logic-fill-logic-fill .freq-example{ font-size: calc(23 * var(--rpx)); color: #4A90E2; display: block; margin-top: calc(4 * var(--rpx)); font-style: italic; }.web-route-pages-logic-fill-logic-fill .mark-learned-row{ margin-top: calc(16 * var(--rpx)); text-align: right; }.web-route-pages-logic-fill-logic-fill .learned-chip{
  display: inline-flex; align-items: center; gap: calc(8 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(22 * var(--rpx)); border-radius: calc(24 * var(--rpx));
  background: rgba(74,144,226,0.08); border: calc(2 * var(--rpx)) solid #4A90E2;
  transition: all 0.25s;
}.web-route-pages-logic-fill-logic-fill .learned-chip.is-learned{
  background: rgba(82,196,26,0.08); border-color: #52C41A;
}.web-route-pages-logic-fill-logic-fill .chip-icon{ font-size: calc(24 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .chip-text{ font-size: calc(24 * var(--rpx)); color: #4A90E2; font-weight: 500; }.web-route-pages-logic-fill-logic-fill .learned-chip.is-learned .chip-text{ color: #52C41A; }.web-route-pages-logic-fill-logic-fill .freq-learned-btn{
  display: inline-block; margin-top: calc(8 * var(--rpx));
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx)); border-radius: calc(12 * var(--rpx));
  background: rgba(74,144,226,0.06); border: calc(1 * var(--rpx)) solid #4A90E2;
  font-size: calc(22 * var(--rpx)); color: #4A90E2; transition: all 0.25s;
}.web-route-pages-logic-fill-logic-fill .freq-learned-btn.is-learned{
  background: rgba(82,196,26,0.06); border-color: #52C41A; color: #52C41A;
}.web-route-pages-logic-fill-logic-fill .modal-mask{
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 100;
  display: flex; align-items: center; justify-content: center;
}.web-route-pages-logic-fill-logic-fill .modal-content{
  width: 85%; max-width: calc(600 * var(--rpx)); background: #fff;
  border-radius: calc(24 * var(--rpx)); overflow: hidden;
  box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0,0,0,0.2);
}.web-route-pages-logic-fill-logic-fill .modal-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(28 * var(--rpx)) calc(32 * var(--rpx)); background: linear-gradient(135deg, #4A90E2, #667eea);
}.web-route-pages-logic-fill-logic-fill .modal-title{ font-size: calc(30 * var(--rpx)); font-weight: bold; color: #fff; }.web-route-pages-logic-fill-logic-fill .modal-close{ font-size: calc(36 * var(--rpx)); color: #fff; opacity: 0.8; }.web-route-pages-logic-fill-logic-fill .modal-body{ height: calc(500 * var(--rpx)); padding: calc(24 * var(--rpx)) calc(32 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .learned-section{ margin-bottom: calc(28 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .learned-section-title{
  font-size: calc(26 * var(--rpx)); font-weight: bold; color: #4A90E2;
  display: block; margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .learned-item{
  display: flex; flex-wrap: wrap;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .learned-word{
  font-size: calc(24 * var(--rpx)); color: #444; padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  background: #F0F6FF; border-radius: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #C8D8F8; margin: calc(4 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .empty-tip{ text-align: center; padding: calc(60 * var(--rpx)) 0; color: #999; font-size: calc(26 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .modal-footer{ padding: calc(20 * var(--rpx)) calc(32 * var(--rpx)); border-top: calc(1 * var(--rpx)) solid #F5F5F5; }.web-route-pages-logic-fill-logic-fill .clear-learned-btn{
  width: 100%; height: calc(72 * var(--rpx)); line-height: calc(72 * var(--rpx));
  background: #FF4757; color: #fff; font-size: calc(26 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .practice-section{ min-height: 100vh; background: #F5F7FA; }.web-route-pages-logic-fill-logic-fill .practice-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)); background: #fff; box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.06);
}.web-route-pages-logic-fill-logic-fill .back-btn{ font-size: calc(28 * var(--rpx)); color: #4A90E2; font-weight: 500; }.web-route-pages-logic-fill-logic-fill .timer-wrap{ display: flex; align-items: center; }.web-route-pages-logic-fill-logic-fill .timer-icon{ font-size: calc(26 * var(--rpx)); margin-right: calc(4 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .timer-text{ font-size: calc(26 * var(--rpx)); color: #FF6B6B; font-weight: 600; font-family: monospace; }.web-route-pages-logic-fill-logic-fill .stats-info{ display: flex; align-items: center; }.web-route-pages-logic-fill-logic-fill .stat-text{ font-size: calc(24 * var(--rpx)); color: #666; }.web-route-pages-logic-fill-logic-fill .stat-divider{ margin: 0 calc(10 * var(--rpx)); color: #DDD; }.web-route-pages-logic-fill-logic-fill .stat-text.correct{ color: #52C41A; font-weight: 600; }.web-route-pages-logic-fill-logic-fill .question-card{ margin: calc(20 * var(--rpx)); background: #fff; border-radius: calc(20 * var(--rpx)); padding: calc(28 * var(--rpx)); box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.07); }.web-route-pages-logic-fill-logic-fill .type-tag{ display: inline-block; background: linear-gradient(135deg,#4A90E2,#667eea); color: #fff; font-size: calc(22 * var(--rpx)); padding: calc(6 * var(--rpx)) calc(18 * var(--rpx)); border-radius: calc(10 * var(--rpx)); margin-bottom: calc(18 * var(--rpx)); font-weight: 500; }.web-route-pages-logic-fill-logic-fill .question-text.fill-blank{ font-size: calc(29 * var(--rpx)); color: #333; line-height: 1.85; font-weight: 500; display: block; }.web-route-pages-logic-fill-logic-fill .options-list{ margin-top: calc(24 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .option-item{
  display: flex; align-items: center; padding: calc(22 * var(--rpx)) calc(24 * var(--rpx)); margin-bottom: calc(14 * var(--rpx));
  border: calc(3 * var(--rpx)) solid #E8E8E8; border-radius: calc(16 * var(--rpx)); transition: all 0.3s;
}.web-route-pages-logic-fill-logic-fill .option-item.selected{ border-color: #4A90E2; background: rgba(74,144,226,0.05); }.web-route-pages-logic-fill-logic-fill .option-item.correct-opt{ border-color: #52C41A; background: rgba(82,196,26,0.06); }.web-route-pages-logic-fill-logic-fill .option-item.wrong-opt{ border-color: #FF4757; background: rgba(255,71,87,0.06); }.web-route-pages-logic-fill-logic-fill .option-label{
  width: calc(52 * var(--rpx)); height: calc(52 * var(--rpx)); line-height: calc(52 * var(--rpx)); text-align: center;
  background: #F5F7FA; border-radius: calc(12 * var(--rpx)); font-size: calc(26 * var(--rpx)); font-weight: bold;
  color: #666; margin-right: calc(18 * var(--rpx)); flex-shrink: 0;
}.web-route-pages-logic-fill-logic-fill .option-item.selected .option-label{ background: #4A90E2; color: #fff; }.web-route-pages-logic-fill-logic-fill .option-item.correct-opt .option-label{ background: #52C41A; color: #fff; }.web-route-pages-logic-fill-logic-fill .option-item.wrong-opt .option-label{ background: #FF4757; color: #fff; }.web-route-pages-logic-fill-logic-fill .option-text{ font-size: calc(28 * var(--rpx)); color: #444; flex: 1; line-height: 1.5; }.web-route-pages-logic-fill-logic-fill .result-area{ margin: calc(20 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .result-banner{ border-radius: calc(16 * var(--rpx)); padding: calc(22 * var(--rpx)) calc(32 * var(--rpx)); text-align: center; }.web-route-pages-logic-fill-logic-fill .result-banner.correct{ background: rgba(82,196,26,0.08); border: calc(2 * var(--rpx)) solid rgba(82,196,26,0.3); color: #52C41A; font-size: calc(29 * var(--rpx)); font-weight: bold; }.web-route-pages-logic-fill-logic-fill .result-banner.wrong{ background: rgba(255,71,87,0.08); border: calc(2 * var(--rpx)) solid rgba(255,71,87,0.3); color: #ff4757; font-size: calc(29 * var(--rpx)); font-weight: bold; }.web-route-pages-logic-fill-logic-fill .explanation-area{ margin-top: calc(16 * var(--rpx)); background: #FFFBE6; border-radius: calc(14 * var(--rpx)); padding: calc(20 * var(--rpx)) calc(24 * var(--rpx)); border-left: calc(6 * var(--rpx)) solid #FAAD14; }.web-route-pages-logic-fill-logic-fill .exp-label{ font-size: calc(25 * var(--rpx)); font-weight: bold; color: #D48806; display: block; margin-bottom: calc(6 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .exp-content{ font-size: calc(26 * var(--rpx)); color: #555; line-height: 1.7; display: block; }.web-route-pages-logic-fill-logic-fill .action-area{ padding: 0 calc(20 * var(--rpx)); margin-bottom: calc(20 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .submit-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold; border-radius: calc(44 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74,144,226,0.35);
}.web-route-pages-logic-fill-logic-fill .submit-btn[disabled]{ background: #ccc; box-shadow: none; }.web-route-pages-logic-fill-logic-fill .next-btn{
  width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx));
  color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold; border-radius: calc(44 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(0,0,0,0.15);
}.web-route-pages-logic-fill-logic-fill .next-btn.ok{ background: linear-gradient(135deg, #52C41A, #73d13d); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(82,196,26,0.35); }.web-route-pages-logic-fill-logic-fill .next-btn.err{ background: linear-gradient(135deg, #FF7875, #ff4757); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(255,71,87,0.35); }.web-route-pages-logic-fill-logic-fill .progress-bar{ height: calc(8 * var(--rpx)); background: #E8E8E8; border-radius: calc(4 * var(--rpx)); overflow: hidden; position: fixed; bottom: 0; left: 0; right: 0; }.web-route-pages-logic-fill-logic-fill .progress-fill{ height: 100%; background: linear-gradient(90deg, #4A90E2, #667eea, #764ba2); border-radius: calc(4 * var(--rpx)); transition: width 0.4s ease; }.web-route-pages-logic-fill-logic-fill .result-.web-page{ padding: calc(60 * var(--rpx)) calc(20 * var(--rpx)); min-height: 100vh; display: flex; align-items: center; justify-content: center; }.web-route-pages-logic-fill-logic-fill .result-card{ width: 100%; background: #fff; border-radius: calc(28 * var(--rpx)); padding: calc(50 * var(--rpx)) calc(36 * var(--rpx)); box-shadow: 0 calc(12 * var(--rpx)) calc(48 * var(--rpx)) rgba(0,0,0,0.1); text-align: center; }.web-route-pages-logic-fill-logic-fill .res-header{ margin-bottom: calc(40 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .res-title{ font-size: calc(44 * var(--rpx)); font-weight: bold; color: #333; display: block; margin-bottom: calc(10 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .res-sub{ font-size: calc(26 * var(--rpx)); color: #999; }.web-route-pages-logic-fill-logic-fill .res-stats{ display: grid; grid-template-columns: repeat(2,1fr); gap: calc(18 * var(--rpx)); margin-bottom: calc(34 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .res-stat{ background: linear-gradient(135deg,#F8F9FA,#F0F2F5); border-radius: calc(18 * var(--rpx)); padding: calc(26 * var(--rpx)) calc(20 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .rv{ display: block; font-size: calc(36 * var(--rpx)); font-weight: bold; color: #4A90E2; margin-bottom: calc(6 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .rl{ font-size: calc(22 * var(--rpx)); color: #666; }.web-route-pages-logic-fill-logic-fill .encourage-box{ background: linear-gradient(135deg, rgba(74,144,226,0.08), rgba(102,126,234,0.08)); border-radius: calc(18 * var(--rpx)); padding: calc(26 * var(--rpx)); margin-bottom: calc(38 * var(--rpx)); border-left: calc(8 * var(--rpx)) solid #4A90E2; }.web-route-pages-logic-fill-logic-fill .encourage-txt{ font-size: calc(26 * var(--rpx)); color: #333; line-height: 1.6; font-weight: 500; }.web-route-pages-logic-fill-logic-fill .res-actions{ display: flex; flex-direction: column; gap: calc(16 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .again-btn{ width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx)); background: linear-gradient(135deg, #4A90E2, #667eea); color: #fff; font-size: calc(30 * var(--rpx)); font-weight: bold; border-radius: calc(44 * var(--rpx)); box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(74,144,226,0.35); }.web-route-pages-logic-fill-logic-fill .exit-btn{ width: 100%; height: calc(88 * var(--rpx)); line-height: calc(88 * var(--rpx)); background: #F5F7FA; color: #4A90E2; font-size: calc(26 * var(--rpx)); font-weight: 500; border-radius: calc(44 * var(--rpx)); border: calc(2 * var(--rpx)) solid #E8E8E8; }.web-route-pages-logic-fill-logic-fill .exam-review{ margin-bottom: calc(28 * var(--rpx)); max-height: calc(620 * var(--rpx)); overflow-y: auto; text-align: left; }.web-route-pages-logic-fill-logic-fill .review-item{ border-radius: calc(14 * var(--rpx)); border: calc(2 * var(--rpx)) solid #E8E8E8; padding: calc(16 * var(--rpx)); margin-bottom: calc(14 * var(--rpx)); background: #FAFAFA; }.web-route-pages-logic-fill-logic-fill .review-item.is-correct{ border-color: rgba(82,196,26,0.45); background: rgba(82,196,26,0.08); }.web-route-pages-logic-fill-logic-fill .review-item.is-wrong{ border-color: rgba(255,71,87,0.45); background: rgba(255,71,87,0.08); }.web-route-pages-logic-fill-logic-fill .review-title{ display: block; font-size: calc(26 * var(--rpx)); font-weight: 700; color: #333; margin-bottom: calc(8 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .review-content{ display: block; font-size: calc(24 * var(--rpx)); color: #444; line-height: 1.6; margin-bottom: calc(8 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .review-line{ display: block; font-size: calc(23 * var(--rpx)); color: #555; line-height: 1.5; }.web-route-pages-logic-fill-logic-fill .review-exp{ display: block; font-size: calc(23 * var(--rpx)); color: #666; line-height: 1.6; margin-top: calc(6 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .loading-mask{
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); z-index: 200;
  display: flex; align-items: center; justify-content: center;
}.web-route-pages-logic-fill-logic-fill .loading-box{
  background: #fff; border-radius: calc(24 * var(--rpx)); padding: calc(50 * var(--rpx)) calc(40 * var(--rpx));
  text-align: center; width: 80%; max-width: calc(520 * var(--rpx));
}.web-route-pages-logic-fill-logic-fill .loading-spinner{
  width: calc(60 * var(--rpx)); height: calc(60 * var(--rpx)); border: calc(5 * var(--rpx)) solid #E8E8E8;
  border-top-color: #4A90E2; border-radius: 50%;
  animation: spin 0.8s linear infinite; margin: 0 auto calc(24 * var(--rpx));
}@keyframes spin{ to { transform: rotate(360deg); } }.web-route-pages-logic-fill-logic-fill .loading-text{ font-size: calc(29 * var(--rpx)); color: #333; font-weight: 500; display: block; margin-bottom: calc(8 * var(--rpx)); }.web-route-pages-logic-fill-logic-fill .loading-sub{ font-size: calc(24 * var(--rpx)); color: #999; }


/* pages/logic-fill/vocab/index */

.web-route-pages-logic-fill-vocab-index .container{
  min-height: 100vh;
  background: #F5F7FA;
}.web-route-pages-logic-fill-vocab-index .top-tabs{
  display: flex;
  gap: calc(16 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}.web-route-pages-logic-fill-vocab-index .tab-item{
  flex: 1;
  text-align: center;
  padding: calc(16 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  background: #F2F4F8;
  color: #666;
  font-size: calc(26 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .tab-item.active{
  background: linear-gradient(135deg, #4A90E2, #667eea);
  color: #fff;
  font-weight: 600;
}.web-route-pages-logic-fill-vocab-index .body-scroll{
  height: calc(100vh - calc(108 * var(--rpx)));
}.web-route-pages-logic-fill-vocab-index .card-section{
  margin: calc(20 * var(--rpx));
  background: #fff;
  border-radius: calc(20 * var(--rpx));
  padding: calc(28 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.06);
}.web-route-pages-logic-fill-vocab-index .section-title-bar{
  display: flex;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .title-text{
  flex: 1;
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-logic-fill-vocab-index .section-count{
  font-size: calc(22 * var(--rpx));
  color: #999;
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .refresh-btn{
  font-size: calc(22 * var(--rpx));
  color: #4A90E2;
  padding: calc(4 * var(--rpx)) calc(14 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #4A90E2;
}.web-route-pages-logic-fill-vocab-index .refresh-btn.loading{
  color: #FAAD14;
  border-color: #FAAD14;
}.web-route-pages-logic-fill-vocab-index .search-row{
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .search-input{
  width: 100%;
  height: calc(72 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #E8E8E8;
  border-radius: calc(14 * var(--rpx));
  padding: 0 calc(24 * var(--rpx));
  font-size: calc(27 * var(--rpx));
  color: #333;
  box-sizing: border-box;
  background: #FAFAFA;
}.web-route-pages-logic-fill-vocab-index .idiom-list{
  max-height: calc(980 * var(--rpx));
  overflow-y: auto;
}.web-route-pages-logic-fill-vocab-index .idiom-item{
  border: calc(2 * var(--rpx)) solid #F0F0F0;
  border-radius: calc(14 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
  overflow: hidden;
}.web-route-pages-logic-fill-vocab-index .idiom-item.expanded{
  border-color: #4A90E2;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(74, 144, 226, 0.1);
}.web-route-pages-logic-fill-vocab-index .idiom-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(22 * var(--rpx)) calc(24 * var(--rpx));
  background: linear-gradient(135deg, #FAFCFF, #F5F7FA);
}.web-route-pages-logic-fill-vocab-index .idiom-words{
  display: flex;
  align-items: center;
  gap: calc(12 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .word-a, .web-route-pages-logic-fill-vocab-index .word-b{
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
}.web-route-pages-logic-fill-vocab-index .word-a{
  color: #4A90E2;
}.web-route-pages-logic-fill-vocab-index .word-b{
  color: #667eea;
}.web-route-pages-logic-fill-vocab-index .vs-tag{
  font-size: calc(20 * var(--rpx));
  color: #999;
  background: #F0F0F0;
  padding: calc(2 * var(--rpx)) calc(12 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .expand-arrow{
  font-size: calc(22 * var(--rpx));
  color: #999;
}.web-route-pages-logic-fill-vocab-index .idiom-body{
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .diff-block{
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .diff-label{
  display: block;
  font-size: calc(25 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .diff-meaning{
  display: block;
  font-size: calc(25 * var(--rpx));
  color: #555;
  line-height: 1.65;
}.web-route-pages-logic-fill-vocab-index .diff-distinct{
  background: #FFFBE6;
  padding: calc(16 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  margin-bottom: calc(14 * var(--rpx));
  border-left: calc(5 * var(--rpx)) solid #FAAD14;
}.web-route-pages-logic-fill-vocab-index .distinct-label{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #D48806;
}.web-route-pages-logic-fill-vocab-index .distinct-content{
  font-size: calc(25 * var(--rpx));
  color: #666;
  line-height: 1.65;
}.web-route-pages-logic-fill-vocab-index .example-block{
  background: #F0F7FF;
  padding: calc(16 * var(--rpx)) calc(18 * var(--rpx));
  border-radius: calc(10 * var(--rpx));
  border-left: calc(5 * var(--rpx)) solid #4A90E2;
}.web-route-pages-logic-fill-vocab-index .example-label{
  font-size: calc(24 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
}.web-route-pages-logic-fill-vocab-index .example-sentence{
  display: block;
  font-size: calc(25 * var(--rpx));
  color: #444;
  line-height: 1.7;
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .mark-learned-row{
  margin-top: calc(16 * var(--rpx));
  text-align: right;
}.web-route-pages-logic-fill-vocab-index .learned-chip{
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--rpx));
  padding: calc(10 * var(--rpx)) calc(22 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
  background: rgba(74, 144, 226, 0.08);
  border: calc(2 * var(--rpx)) solid #4A90E2;
}.web-route-pages-logic-fill-vocab-index .learned-chip.is-learned{
  background: rgba(82, 196, 26, 0.08);
  border-color: #52C41A;
}.web-route-pages-logic-fill-vocab-index .chip-icon{
  font-size: calc(24 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .chip-text{
  font-size: calc(24 * var(--rpx));
  color: #4A90E2;
  font-weight: 500;
}.web-route-pages-logic-fill-vocab-index .learned-chip.is-learned .chip-text{
  color: #52C41A;
}.web-route-pages-logic-fill-vocab-index .freq-tabs{
  display: flex;
  gap: calc(12 * var(--rpx));
  margin-bottom: calc(18 * var(--rpx));
  flex-wrap: wrap;
}.web-route-pages-logic-fill-vocab-index .freq-tab{
  padding: calc(10 * var(--rpx)) calc(22 * var(--rpx));
  background: #F5F7FA;
  border-radius: calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: #666;
  border: calc(2 * var(--rpx)) solid transparent;
}.web-route-pages-logic-fill-vocab-index .freq-tab.active{
  background: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
  border-color: #4A90E2;
  font-weight: 600;
}.web-route-pages-logic-fill-vocab-index .freq-word-item{
  padding: calc(16 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid #F5F5F5;
}.web-route-pages-logic-fill-vocab-index .freq-word-item:last-child{
  border-bottom: none;
}.web-route-pages-logic-fill-vocab-index .freq-word{
  display: block;
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-logic-fill-vocab-index .freq-meaning{
  display: block;
  font-size: calc(24 * var(--rpx));
  color: #777;
  line-height: 1.5;
}.web-route-pages-logic-fill-vocab-index .freq-example{
  display: block;
  margin-top: calc(4 * var(--rpx));
  font-size: calc(23 * var(--rpx));
  color: #4A90E2;
}.web-route-pages-logic-fill-vocab-index .freq-learned-btn{
  display: inline-block;
  margin-top: calc(8 * var(--rpx));
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  background: rgba(74, 144, 226, 0.06);
  border: calc(1 * var(--rpx)) solid #4A90E2;
  font-size: calc(22 * var(--rpx));
  color: #4A90E2;
}.web-route-pages-logic-fill-vocab-index .freq-learned-btn.is-learned{
  background: rgba(82, 196, 26, 0.06);
  border-color: #52C41A;
  color: #52C41A;
}.web-route-pages-logic-fill-vocab-index .learned-section{
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .learned-section-title{
  font-size: calc(26 * var(--rpx));
  font-weight: bold;
  color: #4A90E2;
  display: block;
  margin-bottom: calc(14 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .learned-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F0F6FF;
  border-radius: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid #C8D8F8;
  padding: calc(12 * var(--rpx)) calc(16 * var(--rpx));
  margin: calc(6 * var(--rpx)) 0;
}.web-route-pages-logic-fill-vocab-index .learned-word{
  font-size: calc(24 * var(--rpx));
  color: #444;
}.web-route-pages-logic-fill-vocab-index .detail-wrap{
  background: #FAFCFF;
  border-radius: calc(12 * var(--rpx));
  padding: calc(16 * var(--rpx));
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-logic-fill-vocab-index .empty-tip{
  text-align: center;
  color: #999;
  font-size: calc(26 * var(--rpx));
  padding: calc(40 * var(--rpx)) 0;
}.web-route-pages-logic-fill-vocab-index .clear-learned-btn{
  width: 100%;
  height: calc(72 * var(--rpx));
  line-height: calc(72 * var(--rpx));
  background: #FF4757;
  color: #fff;
  font-size: calc(26 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}


/* pages/common-sense/common-sense */

.web-route-pages-common-sense-common-sense .container{
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-common-sense-common-sense .header{
  background: rgba(255, 255, 255, 0.95);
  padding: calc(30 * var(--rpx));
  border-radius: 0 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-common-sense-common-sense .header-title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-common-sense-common-sense .title-icon{
  font-size: calc(48 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .title-text{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-common-sense-common-sense .stats-bar{
  display: flex;
  justify-content: space-between;
  padding: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  gap: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .stat-item{
  flex: 1;
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, 0.06);
  position: relative;
  transition: all 0.3s;
}.web-route-pages-common-sense-common-sense .stat-item:active{
  transform: scale(0.98);
}.web-route-pages-common-sense-common-sense .stat-memorized{
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}.web-route-pages-common-sense-common-sense .stat-today{
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}.web-route-pages-common-sense-common-sense .stat-streak{
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}.web-route-pages-common-sense-common-sense .stat-icon-bg{
  width: calc(72 * var(--rpx));
  height: calc(72 * var(--rpx));
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(16 * var(--rpx));
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-common-sense-common-sense .stat-icon{
  font-size: calc(36 * var(--rpx));
}.web-route-pages-common-sense-common-sense .stat-info{
  flex: 1;
  display: flex;
  flex-direction: column;
}.web-route-pages-common-sense-common-sense .stat-value{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #2c3e50;
  line-height: 1.2;
}.web-route-pages-common-sense-common-sense .stat-label{
  font-size: calc(22 * var(--rpx));
  color: #5a6c7d;
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-common-sense-common-sense .stat-arrow{
  font-size: calc(28 * var(--rpx));
  color: rgba(44, 62, 80, 0.5);
  margin-left: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .category-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .category-scroll{
  white-space: nowrap;
}.web-route-pages-common-sense-common-sense .category-tabs{
  display: flex;
  padding: calc(10 * var(--rpx)) 0;
}.web-route-pages-common-sense-common-sense .category-tab{
  display: inline-block;
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx));
  margin-right: calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.9);
  border-radius: calc(32 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #666;
  transition: all 0.3s;
}.web-route-pages-common-sense-common-sense .category-tab.active{
  background: #667eea;
  color: #fff;
}.web-route-pages-common-sense-common-sense .mode-section{
  margin: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .study-guide{
  margin: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(20 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(25 * var(--rpx)) rgba(102, 126, 234, 0.3);
}.web-route-pages-common-sense-common-sense .guide-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
}.web-route-pages-common-sense-common-sense .guide-icon{
  font-size: calc(40 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .guide-title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #fff;
}.web-route-pages-common-sense-common-sense .guide-steps{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .guide-step{
  display: flex;
  align-items: center;
  padding: calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.15);
  border-radius: calc(16 * var(--rpx));
  backdrop-filter: blur(calc(10 * var(--rpx)));
}.web-route-pages-common-sense-common-sense .step-number{
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #667eea;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .step-content{
  flex: 1;
}.web-route-pages-common-sense-common-sense .step-name{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #fff;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-common-sense-common-sense .step-desc{
  display: block;
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.85);
}.web-route-pages-common-sense-common-sense .step-arrow{
  font-size: calc(32 * var(--rpx));
  color: rgba(255, 255, 255, 0.7);
  margin-left: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .guide-footer{
  margin-top: calc(24 * var(--rpx));
  padding-top: calc(20 * var(--rpx));
  border-top: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.2);
}.web-route-pages-common-sense-common-sense .guide-hint{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .mode-recommended{
  position: relative;
  border: calc(3 * var(--rpx)) solid #667eea;
}.web-route-pages-common-sense-common-sense .mode-badge{
  position: absolute;
  top: -calc(12 * var(--rpx));
  right: -calc(12 * var(--rpx));
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: #fff;
  font-size: calc(20 * var(--rpx));
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  font-weight: bold;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(238, 90, 111, 0.4);
}.web-route-pages-common-sense-common-sense .section-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-common-sense-common-sense .section-title .title{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-common-sense-common-sense .clear-btn{
  font-size: calc(26 * var(--rpx));
  color: #999;
}.web-route-pages-common-sense-common-sense .mode-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .mode-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
  border-radius: calc(16 * var(--rpx));
  transition: transform 0.3s;
}.web-route-pages-common-sense-common-sense .mode-item:active{
  transform: scale(0.98);
}.web-route-pages-common-sense-common-sense .mode-icon{
  font-size: calc(60 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .mode-name{
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .mode-desc{
  font-size: calc(22 * var(--rpx));
  color: #999;
  text-align: center;
}.web-route-pages-common-sense-common-sense .study-section{
  margin: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .progress-bar{
  position: relative;
  height: calc(16 * var(--rpx));
  background: rgba(255, 255, 255, 0.3);
  border-radius: calc(8 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  overflow: hidden;
}.web-route-pages-common-sense-common-sense .progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: calc(8 * var(--rpx));
  transition: width 0.3s;
}.web-route-pages-common-sense-common-sense .progress-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(20 * var(--rpx));
  color: #fff;
  font-weight: bold;
}.web-route-pages-common-sense-common-sense .content-card{
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-common-sense-common-sense .card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-common-sense-common-sense .category-tag{
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  background: #e3f2fd;
  color: #1976d2;
  font-size: calc(24 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .difficulty-tag{
  padding: calc(8 * var(--rpx)) calc(20 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .difficulty-tag.easy{
  background: #e8f5e9;
  color: #388e3c;
}.web-route-pages-common-sense-common-sense .difficulty-tag.medium{
  background: #fff3e0;
  color: #f57c00;
}.web-route-pages-common-sense-common-sense .difficulty-tag.hard{
  background: #ffebee;
  color: #d32f2f;
}.web-route-pages-common-sense-common-sense .question-number{
  font-size: calc(26 * var(--rpx));
  color: #999;
}.web-route-pages-common-sense-common-sense .card-body{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-common-sense-common-sense .content-title{
  display: block;
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .content-text{
  display: block;
  font-size: calc(30 * var(--rpx));
  color: #555;
  line-height: 1.8;
}.web-route-pages-common-sense-common-sense .key-points{
  margin-top: calc(24 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .key-points-title{
  display: block;
  font-size: calc(28 * var(--rpx));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .key-point{
  display: flex;
  align-items: flex-start;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .point-marker{
  color: #667eea;
  margin-right: calc(12 * var(--rpx));
  font-size: calc(28 * var(--rpx));
}.web-route-pages-common-sense-common-sense .point-text{
  font-size: calc(28 * var(--rpx));
  color: #555;
  line-height: 1.6;
  flex: 1;
}.web-route-pages-common-sense-common-sense .fill-content{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: calc(32 * var(--rpx));
  line-height: 2;
  color: #333;
  margin: calc(30 * var(--rpx)) 0;
}.web-route-pages-common-sense-common-sense .fill-text{
  margin: 0 calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .fill-blank{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(120 * var(--rpx));
  height: calc(64 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #ddd;
  border-radius: calc(8 * var(--rpx));
  margin: 0 calc(8 * var(--rpx));
  background: #fff;
}.web-route-pages-common-sense-common-sense .fill-blank.filled{
  border-color: #667eea;
  background: #f3f4ff;
}.web-route-pages-common-sense-common-sense .fill-blank.correct{
  border-color: #4caf50;
  background: #e8f5e9;
}.web-route-pages-common-sense-common-sense .fill-blank.wrong{
  border-color: #f44336;
  background: #ffebee;
}.web-route-pages-common-sense-common-sense .fill-input{
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: calc(28 * var(--rpx));
  color: #333;
}.web-route-pages-common-sense-common-sense .hint-section{
  margin-top: calc(20 * var(--rpx));
  padding: calc(16 * var(--rpx));
  background: #fff8e1;
  border-radius: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .hint-text{
  font-size: calc(26 * var(--rpx));
  color: #f57c00;
}.web-route-pages-common-sense-common-sense .question-text{
  display: block;
  font-size: calc(32 * var(--rpx));
  color: #333;
  line-height: 1.6;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-common-sense-common-sense .options-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .option-item{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(12 * var(--rpx));
  border: calc(2 * var(--rpx)) solid transparent;
  transition: all 0.3s;
}.web-route-pages-common-sense-common-sense .option-item.selected{
  border-color: #667eea;
  background: #f3f4ff;
}.web-route-pages-common-sense-common-sense .option-item.correct{
  border-color: #4caf50;
  background: #e8f5e9;
}.web-route-pages-common-sense-common-sense .option-item.wrong{
  border-color: #f44336;
  background: #ffebee;
}.web-route-pages-common-sense-common-sense .option-label{
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  border-radius: 50%;
  font-size: calc(24 * var(--rpx));
  color: #666;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-common-sense-common-sense .option-item.selected .option-label{
  background: #667eea;
  color: #fff;
}.web-route-pages-common-sense-common-sense .option-item.correct .option-label{
  background: #4caf50;
  color: #fff;
}.web-route-pages-common-sense-common-sense .option-item.wrong .option-label{
  background: #f44336;
  color: #fff;
}.web-route-pages-common-sense-common-sense .option-text{
  font-size: calc(30 * var(--rpx));
  color: #333;
  flex: 1;
}.web-route-pages-common-sense-common-sense .answer-section{
  margin-top: calc(30 * var(--rpx));
  padding: calc(24 * var(--rpx));
  background: #e3f2fd;
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .answer-text{
  display: block;
  font-size: calc(30 * var(--rpx));
  color: #1976d2;
  font-weight: bold;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .explanation-text{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: #555;
  line-height: 1.6;
}.web-route-pages-common-sense-common-sense .card-footer{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .memorized-tip{
  display: flex;
  align-items: center;
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
  margin: calc(20 * var(--rpx)) 0;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: calc(16 * var(--rpx));
  border-left: calc(6 * var(--rpx)) solid #ff9800;
}.web-route-pages-common-sense-common-sense .tip-icon{
  font-size: calc(32 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .tip-text{
  font-size: calc(26 * var(--rpx));
  color: #e65100;
  flex: 1;
}.web-route-pages-common-sense-common-sense .card-footer button{
  flex: 1;
  height: calc(80 * var(--rpx));
  line-height: calc(80 * var(--rpx));
  border-radius: calc(40 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  border: none;
}.web-route-pages-common-sense-common-sense .btn-memorized{
  background: #e8f5e9;
  color: #388e3c;
}.web-route-pages-common-sense-common-sense .btn-next{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}.web-route-pages-common-sense-common-sense .btn-hint{
  background: #fff8e1;
  color: #f57c00;
}.web-route-pages-common-sense-common-sense .btn-submit{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}.web-route-pages-common-sense-common-sense .btn-submit[disabled]{
  background: #ccc;
  color: #fff;
}.web-route-pages-common-sense-common-sense .btn-prev{
  background: #f5f5f5;
  color: #666;
}.web-route-pages-common-sense-common-sense .btn-prev[disabled]{
  background: #eee;
  color: #999;
}.web-route-pages-common-sense-common-sense .exit-section{
  text-align: center;
  margin-top: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .exit-btn{
  font-size: calc(28 * var(--rpx));
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}.web-route-pages-common-sense-common-sense .ai-update-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  text-align: center;
}.web-route-pages-common-sense-common-sense .btn-ai-update{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(50 * var(--rpx));
  border: none;
  color: #fff;
  font-size: calc(32 * var(--rpx));
}.web-route-pages-common-sense-common-sense .btn-ai-update::after{
  border: none;
}.web-route-pages-common-sense-common-sense .btn-ai-update.disabled{
  background: #ccc;
}.web-route-pages-common-sense-common-sense .usage-count-card{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin: calc(20 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-common-sense-common-sense .usage-count-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .usage-count-title{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-common-sense-common-sense .usage-count-text{
  font-size: calc(36 * var(--rpx));
  font-weight: 700;
  color: #667eea;
}.web-route-pages-common-sense-common-sense .usage-count-bar{
  width: 100%;
  height: calc(12 * var(--rpx));
  background: #e0e0e0;
  border-radius: calc(6 * var(--rpx));
  overflow: hidden;
}.web-route-pages-common-sense-common-sense .usage-count-fill{
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(6 * var(--rpx));
  transition: width 0.3s ease;
}.web-route-pages-common-sense-common-sense .usage-count-tip{
  margin-top: calc(16 * var(--rpx));
  text-align: center;
}.web-route-pages-common-sense-common-sense .tip-text{
  font-size: calc(24 * var(--rpx));
  color: #ff6b6b;
}.web-route-pages-common-sense-common-sense .usage-count-hint{
  margin-top: calc(16 * var(--rpx));
  text-align: center;
}.web-route-pages-common-sense-common-sense .hint-text{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
}.web-route-pages-common-sense-common-sense .reward-ad-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(28 * var(--rpx));
  margin: 0 calc(30 * var(--rpx)) calc(20 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(79, 172, 254, 0.4);
}.web-route-pages-common-sense-common-sense .reward-ad-icon{
  font-size: calc(36 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .reward-ad-text{
  color: #fff;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
}.web-route-pages-common-sense-common-sense .ai-icon{
  font-size: calc(40 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .update-tip{
  display: block;
  margin-top: calc(16 * var(--rpx));
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.7);
}.web-route-pages-common-sense-common-sense .review-section{
  margin: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .review-card{
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(15 * var(--rpx)) rgba(255, 154, 158, 0.3);
}.web-route-pages-common-sense-common-sense .review-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
  padding-bottom: calc(20 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.3);
}.web-route-pages-common-sense-common-sense .review-icon{
  font-size: calc(48 * var(--rpx));
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .review-info{
  flex: 1;
}.web-route-pages-common-sense-common-sense .review-title{
  display: block;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #fff;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .review-desc{
  display: block;
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
}.web-route-pages-common-sense-common-sense .review-arrow{
  font-size: calc(36 * var(--rpx));
  color: #fff;
}.web-route-pages-common-sense-common-sense .review-stats{
  display: flex;
  justify-content: space-around;
}.web-route-pages-common-sense-common-sense .review-stat{
  display: flex;
  flex-direction: column;
  align-items: center;
}.web-route-pages-common-sense-common-sense .review-value{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #fff;
}.web-route-pages-common-sense-common-sense .review-label{
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
  margin-top: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .history-section{
  margin: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .history-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .history-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(20 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-common-sense-common-sense .history-title{
  font-size: calc(28 * var(--rpx));
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-common-sense-common-sense .history-time{
  font-size: calc(24 * var(--rpx));
  color: #999;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-common-sense-common-sense .modal-mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}.web-route-pages-common-sense-common-sense .modal-content{
  position: relative;
  width: 80%;
  background: #fff;
  border-radius: calc(20 * var(--rpx));
  padding: calc(40 * var(--rpx));
  z-index: 1001;
}.web-route-pages-common-sense-common-sense .modal-header{
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-common-sense-common-sense .modal-icon{
  font-size: calc(80 * var(--rpx));
  display: block;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .modal-title{
  font-size: calc(40 * var(--rpx));
  font-weight: bold;
  color: #333;
}.web-route-pages-common-sense-common-sense .result-stats{
  display: flex;
  justify-content: space-around;
  padding: calc(30 * var(--rpx)) 0;
}.web-route-pages-common-sense-common-sense .result-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}.web-route-pages-common-sense-common-sense .result-value{
  font-size: calc(48 * var(--rpx));
  font-weight: bold;
  color: #667eea;
}.web-route-pages-common-sense-common-sense .result-label{
  font-size: calc(24 * var(--rpx));
  color: #666;
  margin-top: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .modal-footer{
  margin-top: calc(30 * var(--rpx));
}.web-route-pages-common-sense-common-sense .btn-confirm{
  width: 100%;
  height: calc(88 * var(--rpx));
  line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: calc(44 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  border: none;
}.web-route-pages-common-sense-common-sense .btn-confirm::after{
  border: none;
}.web-route-pages-common-sense-common-sense .memorized-section{
  margin: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-common-sense-common-sense .memorized-card{
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(25 * var(--rpx)) rgba(168, 237, 234, 0.4);
  position: relative;
  overflow: hidden;
}.web-route-pages-common-sense-common-sense .memorized-card::before{
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: calc(200 * var(--rpx));
  height: calc(200 * var(--rpx));
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}.web-route-pages-common-sense-common-sense .memorized-header{
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}.web-route-pages-common-sense-common-sense .memorized-icon{
  font-size: calc(56 * var(--rpx));
  margin-right: calc(24 * var(--rpx));
  background: rgba(255, 255, 255, 0.9);
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(4 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-common-sense-common-sense .memorized-info{
  flex: 1;
}.web-route-pages-common-sense-common-sense .memorized-title{
  display: block;
  font-size: calc(34 * var(--rpx));
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-common-sense-common-sense .memorized-desc{
  display: block;
  font-size: calc(24 * var(--rpx));
  color: #5a6c7d;
}.web-route-pages-common-sense-common-sense .memorized-arrow{
  font-size: calc(40 * var(--rpx));
  color: #2c3e50;
  background: rgba(255, 255, 255, 0.6);
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}.web-route-pages-common-sense-common-sense .collection-modal{
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}.web-route-pages-common-sense-common-sense .modal-subtitle{
  font-size: calc(26 * var(--rpx));
  color: #999;
  margin-top: calc(10 * var(--rpx));
  display: block;
}.web-route-pages-common-sense-common-sense .collection-list{
  max-height: calc(400 * var(--rpx));
}.web-route-pages-common-sense-common-sense .collection-item{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx)) calc(20 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: calc(16 * var(--rpx));
  border-left: calc(6 * var(--rpx)) solid #667eea;
  box-shadow: 0 calc(2 * var(--rpx)) calc(10 * var(--rpx)) rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}.web-route-pages-common-sense-common-sense .collection-item:active{
  transform: translateX(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(15 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-common-sense-common-sense .collection-main{
  flex: 1;
}.web-route-pages-common-sense-common-sense .collection-title{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: bold;
  color: #333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-common-sense-common-sense .collection-category{
  display: inline-block;
  font-size: calc(22 * var(--rpx));
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: calc(4 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .collection-time{
  font-size: calc(22 * var(--rpx));
  color: #999;
  margin-left: calc(20 * var(--rpx));
}.web-route-pages-common-sense-common-sense .empty-collection{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-common-sense-common-sense .empty-icon{
  font-size: calc(100 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  opacity: 0.6;
}.web-route-pages-common-sense-common-sense .empty-text{
  font-size: calc(32 * var(--rpx));
  color: #666;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-common-sense-common-sense .empty-tip{
  font-size: calc(24 * var(--rpx));
  color: #999;
  text-align: center;
  line-height: 1.6;
}.web-route-pages-common-sense-common-sense .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}


/* pages/quantity-relation/quantity-relation */

.web-route-pages-quantity-relation-quantity-relation .container{
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: calc(20 * var(--rpx));
  box-sizing: border-box;
}.web-route-pages-quantity-relation-quantity-relation .header-stats{
  display: flex;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .stat-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}.web-route-pages-quantity-relation-quantity-relation .stat-icon{
  font-size: calc(40 * var(--rpx));
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .stat-label{
  font-size: calc(24 * var(--rpx));
  color: #666;
  margin-bottom: calc(4 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .stat-value{
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #667eea;
}.web-route-pages-quantity-relation-quantity-relation .tab-bar{
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(16 * var(--rpx));
  padding: calc(10 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .tab-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(16 * var(--rpx)) calc(10 * var(--rpx));
  border-radius: calc(12 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-quantity-relation-quantity-relation .tab-item.active{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}.web-route-pages-quantity-relation-quantity-relation .tab-item.active .tab-icon, .web-route-pages-quantity-relation-quantity-relation .tab-item.active .tab-text{
  color: #fff;
}.web-route-pages-quantity-relation-quantity-relation .tab-icon{
  font-size: calc(36 * var(--rpx));
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tab-text{
  font-size: calc(24 * var(--rpx));
  color: #666;
}.web-route-pages-quantity-relation-quantity-relation .tab-content{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  min-height: calc(600 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .content-title{
  font-size: calc(36 * var(--rpx));
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .strategy-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .strategy-item{
  background: #f8f9fa;
  border-radius: calc(16 * var(--rpx));
  overflow: hidden;
  border: calc(2 * var(--rpx)) solid #e9ecef;
}.web-route-pages-quantity-relation-quantity-relation .strategy-header{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx));
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}.web-route-pages-quantity-relation-quantity-relation .strategy-icon{
  font-size: calc(40 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .strategy-title{
  flex: 1;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-quantity-relation-quantity-relation .expand-icon{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
}.web-route-pages-quantity-relation-quantity-relation .strategy-content{
  padding: calc(24 * var(--rpx));
  background: #fff;
}.web-route-pages-quantity-relation-quantity-relation .strategy-text{
  font-size: calc(28 * var(--rpx));
  color: #555;
  line-height: 1.8;
  white-space: pre-wrap;
}.web-route-pages-quantity-relation-quantity-relation .strategy-title-wrap{
  flex: 1;
  display: flex;
  flex-direction: column;
}.web-route-pages-quantity-relation-quantity-relation .strategy-summary{
  font-size: calc(24 * var(--rpx));
  color: #888;
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .formula-card{
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .formula-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #1976d2;
  font-weight: 600;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .formula-text{
  display: block;
  font-size: calc(32 * var(--rpx));
  color: #333;
  font-weight: bold;
  text-align: center;
}.web-route-pages-quantity-relation-quantity-relation .steps-card{
  background: #f8f9fa;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .steps-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #667eea;
  font-weight: 600;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .step-row{
  display: flex;
  align-items: flex-start;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .step-badge{
  width: calc(40 * var(--rpx));
  height: calc(40 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(24 * var(--rpx));
  color: #fff;
  margin-right: calc(16 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-quantity-relation-quantity-relation .step-text{
  flex: 1;
  font-size: calc(28 * var(--rpx));
  color: #555;
  line-height: 1.6;
}.web-route-pages-quantity-relation-quantity-relation .example-card{
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .example-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #f57c00;
  font-weight: 600;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .example-title{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: #333;
  font-weight: 600;
  margin-bottom: calc(16 * var(--rpx));
  line-height: 1.5;
}.web-route-pages-quantity-relation-quantity-relation .example-solution{
  background: rgba(255,255,255,0.8);
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .solution-line{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #555;
  line-height: 1.8;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .example-answer{
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.8);
  border-radius: calc(12 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .answer-label{
  font-size: calc(28 * var(--rpx));
  color: #333;
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .answer-value{
  font-size: calc(32 * var(--rpx));
  color: #4caf50;
  font-weight: bold;
  margin-left: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tips-card{
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tips-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #388e3c;
  font-weight: 600;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tip-item{
  display: flex;
  align-items: flex-start;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tip-dot{
  font-size: calc(28 * var(--rpx));
  color: #4caf50;
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tip-text{
  flex: 1;
  font-size: calc(26 * var(--rpx));
  color: #555;
  line-height: 1.5;
}.web-route-pages-quantity-relation-quantity-relation .rhyme-card{
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .rhyme-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #c2185b;
  font-weight: 600;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .rhyme-text{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: #333;
  line-height: 1.8;
  white-space: pre-line;
}.web-route-pages-quantity-relation-quantity-relation .steps-container{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .step-item{
  display: flex;
  align-items: flex-start;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .step-number{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(32 * var(--rpx));
  font-weight: bold;
  color: #fff;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-quantity-relation-quantity-relation .step-info{
  flex: 1;
}.web-route-pages-quantity-relation-quantity-relation .step-title{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .step-desc{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #666;
  line-height: 1.6;
}.web-route-pages-quantity-relation-quantity-relation .tips-card{
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #ffeaa7;
}.web-route-pages-quantity-relation-quantity-relation .tips-title{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #856404;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tips-list{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .tip-item{
  font-size: calc(26 * var(--rpx));
  color: #856404;
  line-height: 1.6;
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-item{
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  overflow: hidden;
  border: calc(2 * var(--rpx)) solid #e9ecef;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.05);
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-header{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-type{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #fff;
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-body{
  padding: calc(20 * var(--rpx)) calc(24 * var(--rpx));
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-keyword{
  font-size: calc(26 * var(--rpx));
  color: #333;
  font-weight: 500;
}.web-route-pages-quantity-relation-quantity-relation .quick-ref-tip{
  font-size: calc(24 * var(--rpx));
  color: #666;
  line-height: 1.5;
}.web-route-pages-quantity-relation-quantity-relation .generate-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .generate-btn{
  width: calc(300 * var(--rpx));
  height: calc(300 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 calc(16 * var(--rpx)) calc(48 * var(--rpx)) rgba(102, 126, 234, 0.4);
  margin-bottom: calc(30 * var(--rpx));
  animation: pulse 2s infinite;
}.web-route-pages-quantity-relation-quantity-relation .generate-btn.disabled{
  background: #ccc;
  animation: none;
  box-shadow: none;
}@keyframes pulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}.web-route-pages-quantity-relation-quantity-relation .generate-icon{
  font-size: calc(80 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .generate-text{
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .generate-tip{
  font-size: calc(26 * var(--rpx));
  color: #666;
  text-align: center;
}.web-route-pages-quantity-relation-quantity-relation .usage-count-card{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin: 0 calc(20 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}.web-route-pages-quantity-relation-quantity-relation .usage-count-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .usage-count-title{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-quantity-relation-quantity-relation .usage-count-text{
  font-size: calc(36 * var(--rpx));
  font-weight: 700;
  color: #667eea;
}.web-route-pages-quantity-relation-quantity-relation .usage-count-bar{
  width: 100%;
  height: calc(12 * var(--rpx));
  background: #e0e0e0;
  border-radius: calc(6 * var(--rpx));
  overflow: hidden;
}.web-route-pages-quantity-relation-quantity-relation .usage-count-fill{
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(6 * var(--rpx));
  transition: width 0.3s ease;
}.web-route-pages-quantity-relation-quantity-relation .usage-count-tip{
  margin-top: calc(16 * var(--rpx));
  text-align: center;
}.web-route-pages-quantity-relation-quantity-relation .tip-text{
  font-size: calc(24 * var(--rpx));
  color: #ff6b6b;
}.web-route-pages-quantity-relation-quantity-relation .usage-count-hint{
  margin-top: calc(16 * var(--rpx));
  text-align: center;
}.web-route-pages-quantity-relation-quantity-relation .hint-text{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
}.web-route-pages-quantity-relation-quantity-relation .reward-ad-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(28 * var(--rpx));
  margin: 0 calc(20 * var(--rpx)) calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(79, 172, 254, 0.4);
}.web-route-pages-quantity-relation-quantity-relation .reward-ad-icon{
  font-size: calc(36 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .reward-ad-text{
  color: #fff;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .loading-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(100 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .loading-spinner{
  width: calc(80 * var(--rpx));
  height: calc(80 * var(--rpx));
  border: calc(6 * var(--rpx)) solid #e9ecef;
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: calc(30 * var(--rpx));
}@keyframes spin{
  to { transform: rotate(360deg); }
}.web-route-pages-quantity-relation-quantity-relation .loading-text{
  font-size: calc(28 * var(--rpx));
  color: #666;
}.web-route-pages-quantity-relation-quantity-relation .question-section{
  padding: calc(20 * var(--rpx)) 0;
}.web-route-pages-quantity-relation-quantity-relation .question-card{
  background: #f8f9fa;
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .question-text{
  display: block;
  font-size: calc(30 * var(--rpx));
  color: #333;
  line-height: 1.8;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .options-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .option-item{
  display: flex;
  align-items: center;
  background: #fff;
  border: calc(2 * var(--rpx)) solid #e9ecef;
  border-radius: calc(12 * var(--rpx));
  padding: calc(24 * var(--rpx));
  transition: all 0.3s ease;
}.web-route-pages-quantity-relation-quantity-relation .option-item.selected{
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .option-item.correct{
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .option-item.wrong{
  border-color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .option-key{
  width: calc(56 * var(--rpx));
  height: calc(56 * var(--rpx));
  background: #e9ecef;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #333;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-quantity-relation-quantity-relation .option-item.selected .option-key{
  background: #667eea;
  color: #fff;
}.web-route-pages-quantity-relation-quantity-relation .option-item.correct .option-key{
  background: #28a745;
  color: #fff;
}.web-route-pages-quantity-relation-quantity-relation .option-item.wrong .option-key{
  background: #dc3545;
  color: #fff;
}.web-route-pages-quantity-relation-quantity-relation .option-text{
  flex: 1;
  font-size: calc(28 * var(--rpx));
  color: #333;
  line-height: 1.6;
}.web-route-pages-quantity-relation-quantity-relation .submit-btn{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(30 * var(--rpx));
  text-align: center;
  margin-top: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .submit-btn text{
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .result-section{
  margin-top: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .result-status{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(30 * var(--rpx));
  border-radius: calc(16 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .result-status.correct{
  background: rgba(40, 167, 69, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .result-status.wrong{
  background: rgba(220, 53, 69, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .result-icon{
  font-size: calc(48 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .result-text{
  font-size: calc(36 * var(--rpx));
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .result-status.correct .result-text{
  color: #28a745;
}.web-route-pages-quantity-relation-quantity-relation .result-status.wrong .result-text{
  color: #dc3545;
}.web-route-pages-quantity-relation-quantity-relation .explanation-card{
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0, 0, 0, 0.05);
}.web-route-pages-quantity-relation-quantity-relation .explanation-title{
  display: block;
  font-size: calc(32 * var(--rpx));
  font-weight: 700;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
  text-align: center;
}.web-route-pages-quantity-relation-quantity-relation .explanation-content{
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .section-header{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(10 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  margin: calc(8 * var(--rpx)) 0;
}.web-route-pages-quantity-relation-quantity-relation .section-header.steps{
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}.web-route-pages-quantity-relation-quantity-relation .section-header.answer{
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}.web-route-pages-quantity-relation-quantity-relation .section-header.analysis{
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}.web-route-pages-quantity-relation-quantity-relation .section-header.calculation{
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}.web-route-pages-quantity-relation-quantity-relation .section-header.conclusion{
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}.web-route-pages-quantity-relation-quantity-relation .section-header.tip{
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
}.web-route-pages-quantity-relation-quantity-relation .section-text{
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
  color: #fff;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-quantity-relation-quantity-relation .explanation-line{
  font-size: calc(28 * var(--rpx));
  color: #444;
  line-height: 1.7;
  padding-left: calc(20 * var(--rpx));
  border-left: calc(3 * var(--rpx)) solid #e0e0e0;
}.web-route-pages-quantity-relation-quantity-relation .next-btn{
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(30 * var(--rpx));
  text-align: center;
}.web-route-pages-quantity-relation-quantity-relation .next-btn .btn-text{
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .rank-header-card{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  border-radius: calc(32 * var(--rpx));
  padding: calc(50 * var(--rpx)) calc(40 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--rpx)) calc(50 * var(--rpx)) rgba(102, 126, 234, 0.4);
}.web-route-pages-quantity-relation-quantity-relation .rank-header-card::before{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%);
  animation: headerGlow 4s ease-in-out infinite;
}@keyframes headerGlow{
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}.web-route-pages-quantity-relation-quantity-relation .rank-header-title{
  display: block;
  font-size: calc(48 * var(--rpx));
  color: #fff;
  font-weight: 800;
  margin-bottom: calc(16 * var(--rpx));
  text-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}.web-route-pages-quantity-relation-quantity-relation .rank-header-subtitle{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: rgba(255,255,255,0.9);
  position: relative;
  z-index: 1;
  letter-spacing: calc(4 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .podium-section{
  position: relative;
  margin-bottom: calc(40 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(20 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  border-radius: calc(32 * var(--rpx));
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--rpx)) calc(60 * var(--rpx)) rgba(0,0,0,0.5), inset 0 calc(1 * var(--rpx)) 0 rgba(255,255,255,0.1);
}.web-route-pages-quantity-relation-quantity-relation .podium-stars{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}.web-route-pages-quantity-relation-quantity-relation .star{
  position: absolute;
  color: #fff;
  font-size: calc(20 * var(--rpx));
  animation: twinkle 2s ease-in-out infinite;
}.web-route-pages-quantity-relation-quantity-relation .star.s1{ top: 10%; left: 10%; animation-delay: 0s; }.web-route-pages-quantity-relation-quantity-relation .star.s2{ top: 20%; right: 15%; animation-delay: 0.5s; }.web-route-pages-quantity-relation-quantity-relation .star.s3{ top: 40%; left: 5%; animation-delay: 1s; }.web-route-pages-quantity-relation-quantity-relation .star.s4{ top: 60%; right: 10%; animation-delay: 1.5s; }.web-route-pages-quantity-relation-quantity-relation .star.s5{ top: 80%; left: 20%; animation-delay: 0.3s; }@keyframes twinkle{
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}.web-route-pages-quantity-relation-quantity-relation .podium-glow{
  position: absolute;
  top: -calc(150 * var(--rpx));
  left: 50%;
  transform: translateX(-50%);
  width: calc(600 * var(--rpx));
  height: calc(600 * var(--rpx));
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, rgba(255,140,0,0.2) 30%, transparent 70%);
  pointer-events: none;
}.web-route-pages-quantity-relation-quantity-relation .podium-rays{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: calc(300 * var(--rpx));
  background: conic-gradient(from 180deg at 50% 100%, 
    transparent 0deg, rgba(255,215,0,0.1) 20deg, transparent 40deg,
    transparent 60deg, rgba(255,215,0,0.1) 80deg, transparent 100deg,
    transparent 120deg, rgba(255,215,0,0.1) 140deg, transparent 160deg,
    transparent 180deg);
  pointer-events: none;
}.web-route-pages-quantity-relation-quantity-relation .podium-container{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(16 * var(--rpx));
  position: relative;
  z-index: 1;
}.web-route-pages-quantity-relation-quantity-relation .podium-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  max-width: calc(220 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .podium-item.first{
  order: 2;
  z-index: 3;
  transform: translateY(-calc(30 * var(--rpx)));
}.web-route-pages-quantity-relation-quantity-relation .podium-item.second{
  order: 1;
  z-index: 2;
}.web-route-pages-quantity-relation-quantity-relation .podium-item.third{
  order: 3;
  z-index: 1;
}.web-route-pages-quantity-relation-quantity-relation .sparkles{
  position: absolute;
  top: -calc(20 * var(--rpx));
  pointer-events: none;
}.web-route-pages-quantity-relation-quantity-relation .sparkle{
  font-size: calc(24 * var(--rpx));
  animation: sparkle 1.5s ease-in-out infinite;
}.web-route-pages-quantity-relation-quantity-relation .sparkle.sp1{ position: absolute; left: -calc(30 * var(--rpx)); top: 0; animation-delay: 0s; }.web-route-pages-quantity-relation-quantity-relation .sparkle.sp2{ position: absolute; right: -calc(30 * var(--rpx)); top: calc(10 * var(--rpx)); animation-delay: 0.5s; }.web-route-pages-quantity-relation-quantity-relation .sparkle.sp3{ position: absolute; left: 0; top: -calc(20 * var(--rpx)); animation-delay: 1s; }@keyframes sparkle{
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}.web-route-pages-quantity-relation-quantity-relation .crown-container{
  position: absolute;
  top: -calc(50 * var(--rpx));
  z-index: 15;
}.web-route-pages-quantity-relation-quantity-relation .crown-icon{
  font-size: calc(64 * var(--rpx));
  animation: float 2s ease-in-out infinite;
  filter: drop-shadow(0 calc(4 * var(--rpx)) calc(8 * var(--rpx)) rgba(255,215,0,0.6));
}.web-route-pages-quantity-relation-quantity-relation .crown-glow{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100 * var(--rpx));
  height: calc(100 * var(--rpx));
  background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, transparent 70%);
  pointer-events: none;
}@keyframes float{
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-calc(15 * var(--rpx))) rotate(5deg); }
}.web-route-pages-quantity-relation-quantity-relation .rank-badge{
  position: absolute;
  top: -calc(10 * var(--rpx));
  width: calc(50 * var(--rpx));
  height: calc(50 * var(--rpx));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 calc(6 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.4);
  overflow: hidden;
}.web-route-pages-quantity-relation-quantity-relation .rank-badge.gold{
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 30%, #ffd700 60%, #ffed4e 100%);
  border: calc(3 * var(--rpx)) solid #fff;
  box-shadow: 0 0 calc(20 * var(--rpx)) rgba(255,215,0,0.6);
}.web-route-pages-quantity-relation-quantity-relation .rank-badge.silver{
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 30%, #c0c0c0 60%, #e8e8e8 100%);
  border: calc(3 * var(--rpx)) solid #fff;
  box-shadow: 0 0 calc(15 * var(--rpx)) rgba(192,192,192,0.5);
}.web-route-pages-quantity-relation-quantity-relation .rank-badge.bronze{
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 30%, #cd7f32 60%, #daa520 100%);
  border: calc(3 * var(--rpx)) solid #fff;
  box-shadow: 0 0 calc(15 * var(--rpx)) rgba(205,127,50,0.5);
}.web-route-pages-quantity-relation-quantity-relation .badge-num{
  font-size: calc(26 * var(--rpx));
  font-weight: 800;
  color: #333;
  text-shadow: 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(255,255,255,0.5);
}.web-route-pages-quantity-relation-quantity-relation .badge-shine{
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: badgeShine 2s infinite;
}@keyframes badgeShine{
  0% { left: -100%; }
  100% { left: 100%; }
}.web-route-pages-quantity-relation-quantity-relation .podium-avatar-wrap{
  width: calc(140 * var(--rpx));
  height: calc(140 * var(--rpx));
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2a4a 0%, #1a1a3e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .podium-avatar-wrap.gold-border{
  width: calc(180 * var(--rpx));
  height: calc(180 * var(--rpx));
  border: calc(8 * var(--rpx)) solid transparent;
  background: linear-gradient(135deg, #2a2a4a, #1a1a3e) padding-box,
              linear-gradient(135deg, #ffd700, #ffed4e, #ffd700) border-box;
  box-shadow: 0 0 calc(40 * var(--rpx)) rgba(255, 215, 0, 0.8), inset 0 0 calc(30 * var(--rpx)) rgba(255, 215, 0, 0.2);
}.web-route-pages-quantity-relation-quantity-relation .podium-avatar-wrap.silver-border{
  border: calc(6 * var(--rpx)) solid transparent;
  background: linear-gradient(135deg, #2a2a4a, #1a1a3e) padding-box,
              linear-gradient(135deg, #c0c0c0, #e8e8e8, #c0c0c0) border-box;
  box-shadow: 0 0 calc(25 * var(--rpx)) rgba(192, 192, 192, 0.6);
}.web-route-pages-quantity-relation-quantity-relation .podium-avatar-wrap.bronze-border{
  border: calc(6 * var(--rpx)) solid transparent;
  background: linear-gradient(135deg, #2a2a4a, #1a1a3e) padding-box,
              linear-gradient(135deg, #cd7f32, #daa520, #cd7f32) border-box;
  box-shadow: 0 0 calc(25 * var(--rpx)) rgba(205, 127, 50, 0.6);
}.web-route-pages-quantity-relation-quantity-relation .podium-avatar{
  width: 100%;
  height: 100%;
}.web-route-pages-quantity-relation-quantity-relation .podium-avatar-default{
  font-size: calc(56 * var(--rpx));
  color: #667eea;
  font-weight: bold;
}.web-route-pages-quantity-relation-quantity-relation .avatar-ring{
  position: absolute;
  top: -calc(10 * var(--rpx));
  left: -calc(10 * var(--rpx));
  right: -calc(10 * var(--rpx));
  bottom: -calc(10 * var(--rpx));
  border-radius: 50%;
  border: calc(2 * var(--rpx)) dashed rgba(255,255,255,0.3);
  animation: rotate 10s linear infinite;
}.web-route-pages-quantity-relation-quantity-relation .avatar-ring.gold-ring{
  border-color: rgba(255,215,0,0.5);
  animation-duration: 8s;
}.web-route-pages-quantity-relation-quantity-relation .avatar-ring.silver-ring{
  border-color: rgba(192,192,192,0.4);
}.web-route-pages-quantity-relation-quantity-relation .avatar-ring.bronze-ring{
  border-color: rgba(205,127,50,0.4);
}@keyframes rotate{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}.web-route-pages-quantity-relation-quantity-relation .avatar-particles{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}.web-route-pages-quantity-relation-quantity-relation .particle{
  position: absolute;
  font-size: calc(16 * var(--rpx));
  color: #ffd700;
  animation: particleFloat 2s ease-in-out infinite;
}.web-route-pages-quantity-relation-quantity-relation .particle.p1{ top: -calc(10 * var(--rpx)); left: 20%; animation-delay: 0s; }.web-route-pages-quantity-relation-quantity-relation .particle.p2{ top: 50%; right: -calc(10 * var(--rpx)); animation-delay: 0.7s; }.web-route-pages-quantity-relation-quantity-relation .particle.p3{ bottom: -calc(5 * var(--rpx)); left: 50%; animation-delay: 1.4s; }@keyframes particleFloat{
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
  50% { opacity: 1; transform: translateY(-calc(20 * var(--rpx))) scale(1); }
}.web-route-pages-quantity-relation-quantity-relation .winner-glow{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(250 * var(--rpx));
  height: calc(250 * var(--rpx));
  background: radial-gradient(circle, rgba(255,215,0,0.5) 0%, rgba(255,140,0,0.2) 40%, transparent 70%);
  pointer-events: none;
}.web-route-pages-quantity-relation-quantity-relation .podium-name{
  font-size: calc(28 * var(--rpx));
  color: #fff;
  font-weight: 700;
  margin-bottom: calc(12 * var(--rpx));
  max-width: calc(180 * var(--rpx));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.5);
  letter-spacing: calc(1 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .podium-score{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
  padding: calc(12 * var(--rpx)) calc(24 * var(--rpx));
  background: rgba(0,0,0,0.3);
  border-radius: calc(30 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(255,255,255,0.1);
}.web-route-pages-quantity-relation-quantity-relation .score-value{
  font-size: calc(44 * var(--rpx));
  color: #ffd700;
  font-weight: 800;
  text-shadow: 0 0 calc(20 * var(--rpx)) rgba(255,215,0,0.8), 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0,0,0,0.3);
}.web-route-pages-quantity-relation-quantity-relation .score-label{
  font-size: calc(20 * var(--rpx));
  color: rgba(255,255,255,0.6);
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .podium-base{
  width: 100%;
  border-radius: calc(16 * var(--rpx)) calc(16 * var(--rpx)) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  padding-top: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .base-top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(8 * var(--rpx));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}.web-route-pages-quantity-relation-quantity-relation .gold-base{
  height: calc(120 * var(--rpx));
  background: linear-gradient(180deg, #ffd700 0%, #ffed4e 20%, #ffd700 50%, #ffcc00 100%);
  box-shadow: 0 -calc(15 * var(--rpx)) calc(40 * var(--rpx)) rgba(255,215,0,0.5), inset 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(255,255,255,0.5);
}.web-route-pages-quantity-relation-quantity-relation .silver-base{
  height: calc(85 * var(--rpx));
  background: linear-gradient(180deg, #c0c0c0 0%, #e8e8e8 20%, #c0c0c0 50%, #a0a0a0 100%);
  box-shadow: 0 -calc(12 * var(--rpx)) calc(30 * var(--rpx)) rgba(192,192,192,0.4), inset 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(255,255,255,0.5);
}.web-route-pages-quantity-relation-quantity-relation .bronze-base{
  height: calc(65 * var(--rpx));
  background: linear-gradient(180deg, #cd7f32 0%, #daa520 20%, #cd7f32 50%, #b87333 100%);
  box-shadow: 0 -calc(10 * var(--rpx)) calc(25 * var(--rpx)) rgba(205,127,50,0.4), inset 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(255,255,255,0.3);
}.web-route-pages-quantity-relation-quantity-relation .base-rank{
  font-size: calc(56 * var(--rpx));
  font-weight: 800;
  color: rgba(0,0,0,0.25);
  text-shadow: 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(255,255,255,0.3);
}.web-route-pages-quantity-relation-quantity-relation .base-shine{
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shine 2s infinite;
}@keyframes shine{
  0% { left: -100%; }
  100% { left: 100%; }
}.web-route-pages-quantity-relation-quantity-relation .base-decoration{
  position: absolute;
  bottom: calc(8 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .deco-star{
  font-size: calc(24 * var(--rpx));
  color: rgba(0,0,0,0.2);
}.web-route-pages-quantity-relation-quantity-relation .rank-list-card{
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 50%, #f0f0f0 100%);
  border-radius: calc(32 * var(--rpx));
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(20 * var(--rpx)) calc(60 * var(--rpx)) rgba(0,0,0,0.12), 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0,0,0,0.08);
  border: calc(2 * var(--rpx)) solid rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}.web-route-pages-quantity-relation-quantity-relation .rank-list-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, transparent, #667eea, #764ba2, #667eea, transparent);
}.web-route-pages-quantity-relation-quantity-relation .rank-list-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
  padding-bottom: calc(24 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid rgba(102, 126, 234, 0.15);
}.web-route-pages-quantity-relation-quantity-relation .rank-list-title{
  font-size: calc(36 * var(--rpx));
  color: #333;
  font-weight: 800;
  display: flex;
  align-items: center;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0,0,0,0.05);
}.web-route-pages-quantity-relation-quantity-relation .rank-list-count{
  font-size: calc(24 * var(--rpx));
  color: #fff;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: calc(10 * var(--rpx)) calc(24 * var(--rpx));
  border-radius: calc(30 * var(--rpx));
  font-weight: 700;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(102, 126, 234, 0.3);
}.web-route-pages-quantity-relation-quantity-relation .rank-list{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .rank-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(28 * var(--rpx)) calc(24 * var(--rpx));
  background: linear-gradient(145deg, #ffffff 0%, #fafafa 100%);
  border-radius: calc(20 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  box-shadow: 0 calc(2 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.04);
}.web-route-pages-quantity-relation-quantity-relation .rank-item:active{
  transform: scale(0.98);
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.08);
}.web-route-pages-quantity-relation-quantity-relation .rank-item.top-rank{
  background: linear-gradient(135deg, #fff9e6 0%, #fff5d6 50%, #ffeebb 100%);
  border: calc(2 * var(--rpx)) solid #ffd700;
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(255, 215, 0, 0.25), inset 0 calc(1 * var(--rpx)) 0 rgba(255,255,255,0.8);
}.web-route-pages-quantity-relation-quantity-relation .rank-left{
  display: flex;
  align-items: center;
}.web-route-pages-quantity-relation-quantity-relation .rank-num-wrap{
  width: calc(60 * var(--rpx));
  height: calc(60 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(24 * var(--rpx));
  box-shadow: inset 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0,0,0,0.08), 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(255,255,255,0.8);
}.web-route-pages-quantity-relation-quantity-relation .rank-num-wrap.top-1{
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  box-shadow: 0 calc(6 * var(--rpx)) calc(16 * var(--rpx)) rgba(255, 215, 0, 0.5), inset 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(255,255,255,0.5);
}.web-route-pages-quantity-relation-quantity-relation .rank-num-wrap.top-2{
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
  box-shadow: 0 calc(6 * var(--rpx)) calc(16 * var(--rpx)) rgba(192, 192, 192, 0.5), inset 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(255,255,255,0.5);
}.web-route-pages-quantity-relation-quantity-relation .rank-num-wrap.top-3{
  background: linear-gradient(135deg, #cd7f32 0%, #daa520 50%, #cd7f32 100%);
  box-shadow: 0 calc(6 * var(--rpx)) calc(16 * var(--rpx)) rgba(205, 127, 50, 0.5), inset 0 calc(1 * var(--rpx)) calc(2 * var(--rpx)) rgba(255,255,255,0.3);
}.web-route-pages-quantity-relation-quantity-relation .rank-num{
  font-size: calc(28 * var(--rpx));
  color: #666;
  font-weight: 800;
}.web-route-pages-quantity-relation-quantity-relation .rank-num-wrap.top-1 .rank-num, .web-route-pages-quantity-relation-quantity-relation .rank-num-wrap.top-2 .rank-num, .web-route-pages-quantity-relation-quantity-relation .rank-num-wrap.top-3 .rank-num{
  color: #333;
  font-weight: 900;
}.web-route-pages-quantity-relation-quantity-relation .user-info{
  display: flex;
  align-items: center;
}.web-route-pages-quantity-relation-quantity-relation .user-avatar-small{
  width: calc(72 * var(--rpx));
  height: calc(72 * var(--rpx));
  border-radius: 50%;
  margin-right: calc(20 * var(--rpx));
  border: calc(4 * var(--rpx)) solid #fff;
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(0,0,0,0.15);
}.web-route-pages-quantity-relation-quantity-relation .user-avatar-small-placeholder{
  width: calc(72 * var(--rpx));
  height: calc(72 * var(--rpx));
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(32 * var(--rpx));
  color: #fff;
  margin-right: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(102, 126, 234, 0.4);
}.web-route-pages-quantity-relation-quantity-relation .user-name{
  font-size: calc(30 * var(--rpx));
  color: #333;
  font-weight: 700;
  max-width: calc(200 * var(--rpx));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.web-route-pages-quantity-relation-quantity-relation .rank-right{
  display: flex;
  gap: calc(40 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .stat-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(90 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .stat-value{
  font-size: calc(36 * var(--rpx));
  color: #667eea;
  font-weight: 900;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(102, 126, 234, 0.2);
}.web-route-pages-quantity-relation-quantity-relation .stat-label{
  font-size: calc(20 * var(--rpx));
  color: #999;
  margin-top: calc(6 * var(--rpx));
  font-weight: 500;
}.web-route-pages-quantity-relation-quantity-relation .my-rank-card{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 40%, #f093fb 100%);
  border-radius: calc(32 * var(--rpx));
  padding: calc(50 * var(--rpx)) calc(40 * var(--rpx));
  margin-top: calc(30 * var(--rpx));
  position: relative;
  overflow: hidden;
  box-shadow: 0 calc(20 * var(--rpx)) calc(60 * var(--rpx)) rgba(102, 126, 234, 0.5);
}.web-route-pages-quantity-relation-quantity-relation .my-rank-card::before{
  content: '';
  position: absolute;
  top: -100%;
  right: -100%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 50%);
  animation: cardGlow 6s ease-in-out infinite;
}.web-route-pages-quantity-relation-quantity-relation .my-rank-card::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(4 * var(--rpx));
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}@keyframes cardGlow{
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}.web-route-pages-quantity-relation-quantity-relation .my-rank-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(40 * var(--rpx));
  padding-bottom: calc(24 * var(--rpx));
  border-bottom: calc(2 * var(--rpx)) solid rgba(255,255,255,0.25);
  position: relative;
  z-index: 1;
}.web-route-pages-quantity-relation-quantity-relation .my-rank-title{
  font-size: calc(36 * var(--rpx));
  color: #fff;
  font-weight: 800;
  text-shadow: 0 calc(4 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.3);
  letter-spacing: calc(2 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .my-rank-badge{
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.15) 100%);
  border-radius: calc(40 * var(--rpx));
  padding: calc(14 * var(--rpx)) calc(32 * var(--rpx));
  border: calc(2 * var(--rpx)) solid rgba(255,255,255,0.4);
  backdrop-filter: blur(calc(10 * var(--rpx)));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0,0,0,0.2);
}.web-route-pages-quantity-relation-quantity-relation .my-rank-badge text{
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 800;
  text-shadow: 0 calc(2 * var(--rpx)) calc(4 * var(--rpx)) rgba(0,0,0,0.2);
}.web-route-pages-quantity-relation-quantity-relation .my-rank-stats{
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 1;
}.web-route-pages-quantity-relation-quantity-relation .my-stat-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}.web-route-pages-quantity-relation-quantity-relation .my-stat-value{
  font-size: calc(64 * var(--rpx));
  color: #fff;
  font-weight: 900;
  margin-bottom: calc(12 * var(--rpx));
  text-shadow: 0 0 calc(30 * var(--rpx)) rgba(255,255,255,0.5), 0 calc(4 * var(--rpx)) calc(8 * var(--rpx)) rgba(0,0,0,0.3);
}.web-route-pages-quantity-relation-quantity-relation .my-stat-label{
  font-size: calc(26 * var(--rpx));
  color: rgba(255,255,255,0.95);
  font-weight: 600;
  letter-spacing: calc(2 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .my-stat-divider{
  width: calc(2 * var(--rpx));
  height: calc(100 * var(--rpx));
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5), transparent);
}.web-route-pages-quantity-relation-quantity-relation .empty-rank{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(80 * var(--rpx)) calc(40 * var(--rpx));
  background: #fff;
  border-radius: calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.08);
}.web-route-pages-quantity-relation-quantity-relation .empty-icon-wrap{
  width: calc(160 * var(--rpx));
  height: calc(160 * var(--rpx));
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .empty-icon{
  font-size: calc(80 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .empty-text{
  font-size: calc(32 * var(--rpx));
  color: #333;
  font-weight: 600;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .empty-tip{
  font-size: calc(26 * var(--rpx));
  color: #888;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .empty-btn{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(24 * var(--rpx)) calc(60 * var(--rpx));
}.web-route-pages-quantity-relation-quantity-relation .empty-btn text{
  font-size: calc(30 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-quantity-relation-quantity-relation .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(16 * var(--rpx));
}


/* pages/daily-schedule/daily-schedule */

.web-route-pages-daily-schedule-daily-schedule .container{
  min-height: 100vh;
  background: linear-gradient(180deg, #f5f7fa 0%, #e8ecf1 100%);
  padding-bottom: calc(40 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx)) calc(20 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}.web-route-pages-daily-schedule-daily-schedule .back-btn{
  font-size: calc(36 * var(--rpx));
  color: #fff;
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .header-title{
  font-size: calc(36 * var(--rpx));
  color: #fff;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .header-right{
  width: calc(80 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .date-card{
  margin: calc(30 * var(--rpx));
  background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx));
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(102, 126, 234, 0.15);
}.web-route-pages-daily-schedule-daily-schedule .date-text{
  font-size: calc(32 * var(--rpx));
  color: #333;
  font-weight: 700;
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .week-text{
  font-size: calc(26 * var(--rpx));
  color: #667eea;
  margin-top: calc(8 * var(--rpx));
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .study-time{
  text-align: right;
}.web-route-pages-daily-schedule-daily-schedule .time-label{
  font-size: calc(24 * var(--rpx));
  color: #999;
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .time-value{
  font-size: calc(40 * var(--rpx));
  color: #667eea;
  font-weight: 800;
  display: block;
  margin-top: calc(8 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .progress-card{
  margin: 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
  background: #fff;
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.06);
}.web-route-pages-daily-schedule-daily-schedule .progress-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .progress-title{
  font-size: calc(30 * var(--rpx));
  color: #333;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .progress-text{
  font-size: calc(28 * var(--rpx));
  color: #667eea;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .progress-bar{
  height: calc(16 * var(--rpx));
  background: #f0f0f0;
  border-radius: calc(8 * var(--rpx));
  overflow: hidden;
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(8 * var(--rpx));
  transition: width 0.5s ease;
}.web-route-pages-daily-schedule-daily-schedule .encouragement{
  font-size: calc(26 * var(--rpx));
  color: #666;
  text-align: center;
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .weekly-card{
  margin: 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
  background: #fff;
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.06);
}.web-route-pages-daily-schedule-daily-schedule .section-title{
  font-size: calc(30 * var(--rpx));
  color: #333;
  font-weight: 700;
  margin-bottom: calc(30 * var(--rpx));
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .weekly-stats{
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: calc(200 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .stat-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}.web-route-pages-daily-schedule-daily-schedule .stat-item.today .stat-day{
  color: #667eea;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .stat-item.today .stat-bar{
  background: rgba(102, 126, 234, 0.2);
}.web-route-pages-daily-schedule-daily-schedule .stat-bar{
  width: calc(40 * var(--rpx));
  height: calc(120 * var(--rpx));
  background: #f0f0f0;
  border-radius: calc(20 * var(--rpx));
  position: relative;
  overflow: hidden;
}.web-route-pages-daily-schedule-daily-schedule .stat-fill{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(20 * var(--rpx));
  transition: height 0.5s ease;
}.web-route-pages-daily-schedule-daily-schedule .stat-day{
  font-size: calc(24 * var(--rpx));
  color: #666;
  margin-top: calc(16 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .stat-date{
  font-size: calc(20 * var(--rpx));
  color: #999;
  margin-top: calc(4 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .tasks-section{
  margin: 0 calc(30 * var(--rpx));
  background: #fff;
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.06);
}.web-route-pages-daily-schedule-daily-schedule .reminder-card{
  margin: 0 calc(30 * var(--rpx)) calc(30 * var(--rpx));
  background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(40 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0,0,0,0.06);
  border: calc(2 * var(--rpx)) solid rgba(255, 193, 7, 0.3);
}.web-route-pages-daily-schedule-daily-schedule .reminder-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .reminder-title{
  font-size: calc(30 * var(--rpx));
  color: #333;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .reminder-switch{
  transform: scale(0.9);
}.web-route-pages-daily-schedule-daily-schedule .reminder-content{
  padding-top: calc(20 * var(--rpx));
  border-top: calc(1 * var(--rpx)) solid rgba(0,0,0,0.05);
}.web-route-pages-daily-schedule-daily-schedule .time-picker{
  display: flex;
  align-items: center;
  margin-bottom: calc(24 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .picker-label{
  font-size: calc(28 * var(--rpx));
  color: #666;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .picker-value{
  font-size: calc(32 * var(--rpx));
  color: #667eea;
  font-weight: 700;
  padding: calc(16 * var(--rpx)) calc(40 * var(--rpx));
  background: rgba(102, 126, 234, 0.1);
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .subscribe-btn{
  width: 100%;
  height: calc(88 * var(--rpx));
  line-height: calc(88 * var(--rpx));
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
  border-radius: calc(44 * var(--rpx));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .btn-icon{
  font-size: calc(32 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .btn-text{
  font-size: calc(30 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-daily-schedule-daily-schedule .subscribe-tip{
  font-size: calc(24 * var(--rpx));
  color: #999;
  text-align: center;
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .section-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .section-actions{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .action-btn{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  background: rgba(102, 126, 234, 0.1);
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .action-btn.add{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}.web-route-pages-daily-schedule-daily-schedule .task-list{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .task-item{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx));
  background: #f8f9ff;
  border-radius: calc(16 * var(--rpx));
  border: calc(2 * var(--rpx)) solid transparent;
  transition: all 0.3s;
}.web-route-pages-daily-schedule-daily-schedule .task-item.completed{
  background: #f0f9f0;
  border-color: #52c41a;
}.web-route-pages-daily-schedule-daily-schedule .task-item.completed .task-name{
  text-decoration: line-through;
  color: #999;
}.web-route-pages-daily-schedule-daily-schedule .task-checkbox{
  width: calc(48 * var(--rpx));
  height: calc(48 * var(--rpx));
  border: calc(3 * var(--rpx)) solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(20 * var(--rpx));
  flex-shrink: 0;
}.web-route-pages-daily-schedule-daily-schedule .task-item.completed .task-checkbox{
  background: #52c41a;
  border-color: #52c41a;
}.web-route-pages-daily-schedule-daily-schedule .check-icon{
  font-size: calc(28 * var(--rpx));
  color: #fff;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .task-content{
  flex: 1;
  display: flex;
  align-items: center;
}.web-route-pages-daily-schedule-daily-schedule .task-icon{
  font-size: calc(40 * var(--rpx));
  margin-right: calc(16 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .task-info{
  flex: 1;
}.web-route-pages-daily-schedule-daily-schedule .task-name{
  font-size: calc(28 * var(--rpx));
  color: #333;
  font-weight: 600;
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .task-duration{
  font-size: calc(24 * var(--rpx));
  color: #999;
  margin-top: calc(4 * var(--rpx));
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .task-actions{
  display: flex;
  align-items: center;
  gap: calc(16 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .go-btn{
  font-size: calc(24 * var(--rpx));
  color: #667eea;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  background: rgba(102, 126, 234, 0.1);
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .delete-btn{
  font-size: calc(32 * var(--rpx));
  padding: calc(8 * var(--rpx));
  opacity: 0.6;
}.web-route-pages-daily-schedule-daily-schedule .empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(80 * var(--rpx)) calc(40 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .empty-icon{
  font-size: calc(80 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .empty-text{
  font-size: calc(28 * var(--rpx));
  color: #999;
}.web-route-pages-daily-schedule-daily-schedule .modal-mask{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100;
}.web-route-pages-daily-schedule-daily-schedule .modal-content{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  background: #fff;
  border-radius: calc(24 * var(--rpx));
  z-index: 101;
  overflow: hidden;
}.web-route-pages-daily-schedule-daily-schedule .modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(30 * var(--rpx));
  border-bottom: calc(1 * var(--rpx)) solid #f0f0f0;
}.web-route-pages-daily-schedule-daily-schedule .modal-title{
  font-size: calc(32 * var(--rpx));
  color: #333;
  font-weight: 700;
}.web-route-pages-daily-schedule-daily-schedule .modal-close{
  font-size: calc(40 * var(--rpx));
  color: #999;
  padding: 0 calc(10 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .modal-body{
  padding: calc(40 * var(--rpx)) calc(30 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .input-group{
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .input-label{
  font-size: calc(28 * var(--rpx));
  color: #333;
  font-weight: 600;
  margin-bottom: calc(16 * var(--rpx));
  display: block;
}.web-route-pages-daily-schedule-daily-schedule .task-input{
  width: 100%;
  height: calc(80 * var(--rpx));
  border: calc(2 * var(--rpx)) solid #e0e0e0;
  border-radius: calc(12 * var(--rpx));
  padding: 0 calc(24 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  box-sizing: border-box;
}.web-route-pages-daily-schedule-daily-schedule .duration-options{
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .duration-item{
  padding: calc(16 * var(--rpx)) calc(32 * var(--rpx));
  background: #f5f5f5;
  border-radius: calc(32 * var(--rpx));
  font-size: calc(26 * var(--rpx));
  color: #666;
  border: calc(2 * var(--rpx)) solid transparent;
}.web-route-pages-daily-schedule-daily-schedule .duration-item.active{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-color: #667eea;
}.web-route-pages-daily-schedule-daily-schedule .modal-footer{
  display: flex;
  padding: calc(20 * var(--rpx)) calc(30 * var(--rpx)) calc(40 * var(--rpx));
  gap: calc(20 * var(--rpx));
}.web-route-pages-daily-schedule-daily-schedule .btn-cancel, .web-route-pages-daily-schedule-daily-schedule .btn-confirm{
  flex: 1;
  height: calc(80 * var(--rpx));
  line-height: calc(80 * var(--rpx));
  border-radius: calc(40 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
}.web-route-pages-daily-schedule-daily-schedule .btn-cancel{
  background: #f5f5f5;
  color: #666;
}.web-route-pages-daily-schedule-daily-schedule .btn-confirm{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}.web-route-pages-daily-schedule-daily-schedule .ad-section{
  margin: calc(30 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: #fff;
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.08);
}


/* pages/interview/interview */

.web-route-pages-interview-interview .container{
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .home-section{
  padding: calc(20 * var(--rpx)) 0;
}.web-route-pages-interview-interview .header-card{
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.2);
}.web-route-pages-interview-interview .header-title{
  display: block;
  font-size: calc(48 * var(--rpx));
  font-weight: 800;
  color: #fff;
  margin-bottom: calc(16 * var(--rpx));
  text-shadow: 0 calc(4 * var(--rpx)) calc(8 * var(--rpx)) rgba(0, 0, 0, 0.2);
}.web-route-pages-interview-interview .header-subtitle{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
}.web-route-pages-interview-interview .feature-grid{
  display: flex;
  flex-wrap: wrap;
  gap: calc(20 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-interview-interview .feature-item{
  flex: 1;
  min-width: calc(140 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  text-align: center;
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .feature-icon{
  display: block;
  font-size: calc(48 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .feature-text{
  display: block;
  font-size: calc(24 * var(--rpx));
  color: #333;
  font-weight: 500;
}.web-route-pages-interview-interview .start-card{
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(50 * var(--rpx)) calc(40 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.2);
}.web-route-pages-interview-interview .start-title{
  display: block;
  font-size: calc(40 * var(--rpx));
  font-weight: 700;
  color: #fff;
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .start-desc{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-interview-interview .start-btn{
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(50 * var(--rpx));
  padding: calc(24 * var(--rpx));
  text-align: center;
  border: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.5);
}.web-route-pages-interview-interview .start-btn-text{
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .tip-card{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .tip-title{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .tip-item{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #666;
  line-height: 1.8;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-interview-interview .settings-section{
  padding: calc(20 * var(--rpx)) 0;
}.web-route-pages-interview-interview .settings-header{
  display: flex;
  align-items: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-interview-interview .back-btn{
  font-size: calc(30 * var(--rpx));
  color: #fff;
  padding: calc(10 * var(--rpx)) calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(10 * var(--rpx));
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .settings-title{
  font-size: calc(36 * var(--rpx));
  font-weight: 700;
  color: #fff;
}.web-route-pages-interview-interview .settings-card{
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .settings-label{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .count-options{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .count-option{
  flex: 1;
  background: #f0f0f0;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  text-align: center;
  font-size: calc(28 * var(--rpx));
  color: #666;
  transition: all 0.3s;
}.web-route-pages-interview-interview .count-option.active{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .difficulty-options{
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .difficulty-option{
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx)) calc(30 * var(--rpx));
  transition: all 0.3s;
}.web-route-pages-interview-interview .difficulty-option.active{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}.web-route-pages-interview-interview .difficulty-name{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-interview-interview .difficulty-option.active .difficulty-name{
  color: #fff;
}.web-route-pages-interview-interview .difficulty-desc{
  font-size: calc(24 * var(--rpx));
  color: #999;
}.web-route-pages-interview-interview .difficulty-option.active .difficulty-desc{
  color: rgba(255, 255, 255, 0.8);
}.web-route-pages-interview-interview .start-exam-btn{
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(30 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(245, 87, 108, 0.4);
}.web-route-pages-interview-interview .start-exam-btn.disabled{
  background: #ccc;
  box-shadow: none;
}.web-route-pages-interview-interview .usage-count-card{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .usage-count-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .usage-count-text{
  font-size: calc(32 * var(--rpx));
  font-weight: 600;
  color: #667eea;
}.web-route-pages-interview-interview .usage-count-bar{
  width: 100%;
  height: calc(12 * var(--rpx));
  background: #e0e0e0;
  border-radius: calc(6 * var(--rpx));
  overflow: hidden;
}.web-route-pages-interview-interview .usage-count-fill{
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(6 * var(--rpx));
  transition: width 0.3s;
}.web-route-pages-interview-interview .usage-count-tip{
  margin-top: calc(16 * var(--rpx));
  padding: calc(16 * var(--rpx));
  background: #fff3cd;
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .usage-count-tip .tip-text{
  font-size: calc(26 * var(--rpx));
  color: #856404;
}.web-route-pages-interview-interview .usage-count-hint{
  margin-top: calc(16 * var(--rpx));
  padding: calc(16 * var(--rpx));
  background: #e3f2fd;
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .usage-count-hint .hint-text{
  font-size: calc(26 * var(--rpx));
  color: #1565c0;
}.web-route-pages-interview-interview .reward-ad-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(28 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(79, 172, 254, 0.4);
}.web-route-pages-interview-interview .reward-ad-icon{
  font-size: calc(36 * var(--rpx));
  margin-right: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .reward-ad-text{
  font-size: calc(30 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .exam-section{
  padding: calc(20 * var(--rpx)) 0;
}.web-route-pages-interview-interview .video-container{
  position: relative;
  width: 100%;
  height: calc(400 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  overflow: hidden;
  margin-bottom: calc(20 * var(--rpx));
  background: #000;
}.web-route-pages-interview-interview .exam-video{
  width: 100%;
  height: 100%;
}.web-route-pages-interview-interview .video-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}.web-route-pages-interview-interview .video-tip{
  font-size: calc(28 * var(--rpx));
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: calc(20 * var(--rpx)) calc(40 * var(--rpx));
  border-radius: calc(50 * var(--rpx));
}.web-route-pages-interview-interview .video-error{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2c3e50 0%, #4a5568 100%);
}.web-route-pages-interview-interview .error-icon{
  font-size: calc(60 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .error-text{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #fff;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-interview-interview .error-hint{
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.7);
}.web-route-pages-interview-interview .question-bubble{
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: all 0.3s;
}.web-route-pages-interview-interview .question-bubble.hide{
  transform: translateY(-calc(20 * var(--rpx)));
  opacity: 0.9;
}.web-route-pages-interview-interview .bubble-header{
  display: flex;
  align-items: center;
  padding: calc(24 * var(--rpx)) calc(30 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}.web-route-pages-interview-interview .bubble-title{
  font-size: calc(28 * var(--rpx));
  font-weight: 600;
  color: #fff;
  margin-right: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .bubble-type{
  font-size: calc(24 * var(--rpx));
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.2);
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
  margin-right: auto;
}.web-route-pages-interview-interview .bubble-toggle{
  font-size: calc(24 * var(--rpx));
  color: #fff;
  padding: calc(8 * var(--rpx)) calc(16 * var(--rpx));
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(10 * var(--rpx));
}.web-route-pages-interview-interview .bubble-content{
  padding: calc(30 * var(--rpx));
}.web-route-pages-interview-interview .bubble-question{
  font-size: calc(30 * var(--rpx));
  color: #333;
  line-height: 1.8;
  font-weight: 500;
}.web-route-pages-interview-interview .answer-area{
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .answer-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .answer-title{
  font-size: calc(30 * var(--rpx));
  font-weight: 600;
  color: #333;
}.web-route-pages-interview-interview .answer-progress{
  font-size: calc(26 * var(--rpx));
  color: #667eea;
  font-weight: 600;
}.web-route-pages-interview-interview .answer-textarea{
  width: 100%;
  min-height: calc(300 * var(--rpx));
  background: #f8f9fa;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #333;
  line-height: 1.8;
  box-sizing: border-box;
}.web-route-pages-interview-interview .start-answer-section{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(20 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .start-answer-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--rpx));
  height: calc(200 * var(--rpx));
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border-radius: 50%;
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(17, 153, 142, 0.4);
  transition: all 0.3s;
}.web-route-pages-interview-interview .start-answer-btn:active{
  transform: scale(0.95);
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(17, 153, 142, 0.3);
}.web-route-pages-interview-interview .start-answer-icon{
  font-size: calc(72 * var(--rpx));
  margin-bottom: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .start-answer-text{
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .start-answer-tip{
  margin-top: calc(30 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  color: #666;
}.web-route-pages-interview-interview .quick-voice-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: calc(30 * var(--rpx)) 0;
  padding: calc(40 * var(--rpx));
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(20 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(102, 126, 234, 0.4);
  transition: all 0.3s;
}.web-route-pages-interview-interview .quick-voice-btn:active{
  transform: scale(0.98);
  box-shadow: 0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(102, 126, 234, 0.3);
}.web-route-pages-interview-interview .quick-voice-icon{
  font-size: calc(60 * var(--rpx));
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .quick-voice-text{
  font-size: calc(28 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .voice-tip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(24 * var(--rpx));
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: calc(12 * var(--rpx));
}.web-route-pages-interview-interview .tip-icon{
  font-size: calc(28 * var(--rpx));
}.web-route-pages-interview-interview .tip-text{
  font-size: calc(26 * var(--rpx));
  color: #1976d2;
  font-weight: 500;
}.web-route-pages-interview-interview .submit-btn{
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(30 * var(--rpx));
  font-size: calc(32 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .submit-btn.disabled{
  background: #ccc;
}.web-route-pages-interview-interview .progress-bar{
  height: calc(8 * var(--rpx));
  background: rgba(255, 255, 255, 0.3);
  border-radius: calc(4 * var(--rpx));
  overflow: hidden;
}.web-route-pages-interview-interview .progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(4 * var(--rpx));
  transition: width 0.3s;
}.web-route-pages-interview-interview .result-section{
  padding: calc(20 * var(--rpx)) 0;
}.web-route-pages-interview-interview .result-header{
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
}.web-route-pages-interview-interview .result-title{
  font-size: calc(40 * var(--rpx));
  font-weight: 700;
  color: #fff;
}.web-route-pages-interview-interview .score-card{
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%);
  border-radius: calc(24 * var(--rpx));
  padding: calc(50 * var(--rpx));
  text-align: center;
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(8 * var(--rpx)) calc(32 * var(--rpx)) rgba(0, 0, 0, 0.2);
}.web-route-pages-interview-interview .score-label{
  display: block;
  font-size: calc(30 * var(--rpx));
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .score-value{
  font-size: calc(100 * var(--rpx));
  font-weight: 800;
  color: #fff;
}.web-route-pages-interview-interview .score-max{
  font-size: calc(40 * var(--rpx));
  color: rgba(255, 255, 255, 0.8);
}.web-route-pages-interview-interview .feedback-card{
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .feedback-title{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .feedback-content{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: #555;
  line-height: 1.8;
}.web-route-pages-interview-interview .analysis-card{
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(20 * var(--rpx));
  padding: calc(30 * var(--rpx));
  margin-bottom: calc(30 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}.web-route-pages-interview-interview .analysis-title{
  display: block;
  font-size: calc(30 * var(--rpx));
  font-weight: 700;
  color: #333;
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .analysis-list{
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .analysis-item{
  background: #f8f9fa;
  border-radius: calc(16 * var(--rpx));
  padding: calc(24 * var(--rpx));
}.web-route-pages-interview-interview .analysis-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .analysis-question{
  font-size: calc(26 * var(--rpx));
  font-weight: 600;
  color: #667eea;
}.web-route-pages-interview-interview .analysis-score{
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
  padding: calc(6 * var(--rpx)) calc(16 * var(--rpx));
  border-radius: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .analysis-score.high{
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}.web-route-pages-interview-interview .analysis-score.medium{
  background: rgba(250, 173, 20, 0.1);
  color: #faad14;
}.web-route-pages-interview-interview .analysis-score.low{
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}.web-route-pages-interview-interview .analysis-question-text{
  display: block;
  font-size: calc(28 * var(--rpx));
  color: #333;
  margin-bottom: calc(12 * var(--rpx));
  line-height: 1.6;
}.web-route-pages-interview-interview .analysis-answer{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #666;
  margin-bottom: calc(12 * var(--rpx));
  line-height: 1.6;
}.web-route-pages-interview-interview .analysis-feedback{
  display: block;
  font-size: calc(26 * var(--rpx));
  color: #667eea;
  line-height: 1.6;
}.web-route-pages-interview-interview .result-actions{
  display: flex;
  gap: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .restart-btn{
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: calc(50 * var(--rpx));
  padding: calc(30 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  color: #fff;
  font-weight: 600;
}.web-route-pages-interview-interview .home-btn{
  flex: 1;
  background: rgba(255, 255, 255, 0.2);
  border-radius: calc(50 * var(--rpx));
  padding: calc(30 * var(--rpx));
  font-size: calc(30 * var(--rpx));
  color: #fff;
  font-weight: 600;
  border: calc(2 * var(--rpx)) solid rgba(255, 255, 255, 0.5);
}.web-route-pages-interview-interview .score-value.excellent{
  color: #52c41a;
}.web-route-pages-interview-interview .score-value.good{
  color: #faad14;
}.web-route-pages-interview-interview .score-value.normal{
  color: #ff4d4f;
}.web-route-pages-interview-interview .answer-section{
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .section-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  font-weight: 600;
  color: #667eea;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-interview-interview .detail-scores-row{
  display: flex;
  justify-content: space-between;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
  border-radius: calc(12 * var(--rpx));
  padding: calc(16 * var(--rpx)) calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .score-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}.web-route-pages-interview-interview .score-name{
  font-size: calc(22 * var(--rpx));
  color: #888;
  margin-bottom: calc(6 * var(--rpx));
}.web-route-pages-interview-interview .score-num{
  font-size: calc(28 * var(--rpx));
  font-weight: 700;
  color: #667eea;
}.web-route-pages-interview-interview .pros-cons-section{
  display: flex;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
}.web-route-pages-interview-interview .pros-box, .web-route-pages-interview-interview .cons-box{
  flex: 1;
  border-radius: calc(12 * var(--rpx));
  padding: calc(16 * var(--rpx));
}.web-route-pages-interview-interview .pros-box{
  background: rgba(82, 196, 26, 0.08);
}.web-route-pages-interview-interview .cons-box{
  background: rgba(250, 173, 20, 0.08);
}.web-route-pages-interview-interview .pros-label, .web-route-pages-interview-interview .cons-label{
  display: block;
  font-size: calc(24 * var(--rpx));
  font-weight: 600;
  margin-bottom: calc(8 * var(--rpx));
}.web-route-pages-interview-interview .pros-label{ color: #52c41a; }.web-route-pages-interview-interview .cons-label{ color: #faad14; }.web-route-pages-interview-interview .pros-text, .web-route-pages-interview-interview .cons-text{
  display: block;
  font-size: calc(24 * var(--rpx));
  line-height: 1.6;
  color: #555;
}.web-route-pages-interview-interview .reference-section{
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  margin-bottom: calc(20 * var(--rpx));
  border-left: calc(6 * var(--rpx)) solid #2196f3;
}.web-route-pages-interview-interview .reference-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  font-weight: 700;
  color: #1565c0;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-interview-interview .reference-text{
  display: block;
  font-size: calc(26 * var(--rpx));
  line-height: 1.7;
  color: #333;
}.web-route-pages-interview-interview .reference-text.reference-loading{
  color: #666;
  font-style: italic;
  opacity: 0.9;
}.web-route-pages-interview-interview .suggestion-section{
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: calc(12 * var(--rpx));
  padding: calc(20 * var(--rpx));
  border-left: calc(6 * var(--rpx)) solid #ff9800;
}.web-route-pages-interview-interview .suggestion-label{
  display: block;
  font-size: calc(26 * var(--rpx));
  font-weight: 700;
  color: #e65100;
  margin-bottom: calc(10 * var(--rpx));
}.web-route-pages-interview-interview .suggestion-text{
  display: block;
  font-size: calc(26 * var(--rpx));
  line-height: 1.7;
  color: #333;
}.web-route-pages-interview-interview .ad-section{
  margin: calc(30 * var(--rpx)) calc(20 * var(--rpx));
  padding: calc(20 * var(--rpx));
  background: rgba(255, 255, 255, 0.95);
  border-radius: calc(16 * var(--rpx));
  box-shadow: 0 calc(4 * var(--rpx)) calc(16 * var(--rpx)) rgba(0, 0, 0, 0.1);
}


@media (max-width: 430px) {
  :root { --rpx: calc(100vw / 750); }
  .web-app { display: block; background: var(--web-bg); }
  .web-phone { width: 100vw; min-height: 100vh; box-shadow: none; }
  .web-tabbar { width: 100vw; }

/* === 黄色主题覆盖 (added by fix) === */
.web-nav-bar { 
  background: linear-gradient(135deg, #FFD700, #F4A460) !important; 
  color: #5C4033 !important; 
}
.web-nav-bar h1 { color: #5C4033 !important; }
.web-back-btn, .web-admin-link { color: #5C4033 !important; }
.web-tabbar a.active { color: #DAA520 !important; font-weight: 600 !important; }
.web-loading { color: #DAA520 !important; }
.web-modal-actions button:last-child, .web-modal-actions button:only-child { color: #DAA520 !important; font-weight: 600 !important; }


}


@media (min-width: 960px) {
  .web-app{
    padding: 0;
  }
  .web-phone{
    width: 100%;
    min-height: 100vh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
  }
  .web-nav-bar{
    border-radius: 0;
  }
  .web-page{
    min-height: calc(100vh - var(--web-nav-height) - env(safe-area-inset-top));
  }
  .web-tabbar{
    width: 100%;
    bottom: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .08);
  }
  .web-route-pages-index-index .container{
    padding-left: calc(26 * var(--rpx));
    padding-right: calc(26 * var(--rpx));
    padding-bottom: calc(32 * var(--rpx));
  }
  .web-route-pages-index-index .exam-category-section{
    padding: calc(24 * var(--rpx));
  }
  .web-route-pages-index-index .exam-category-header{
    align-items: flex-start;
  }
  .web-route-pages-index-index .exam-category-meta{
    max-width: 66%;
  }
  .web-route-pages-index-index .exam-category-tip{
    max-width: 100%;
  }
  .web-route-pages-index-index .exam-category-actions{
    min-width: max-content;
  }
  .web-route-pages-index-index .exam-category-scroll{
    padding-bottom: calc(10 * var(--rpx));
  }
}


@media (min-width: 1280px) {
  .web-phone{
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
  .web-nav-bar{
    border-radius: 0;
  }
  .web-tabbar{
    width: 100%;
    bottom: 0;
    border-radius: 0;
  }
  .web-page{
    min-height: calc(100vh - var(--web-nav-height) - env(safe-area-inset-top));
  }
  .web-route-pages-index-index .container{
    max-width: 100%;
    padding: 24px 28px 40px;
  }
  .web-route-pages-index-index .feature-section,
  .web-route-pages-index-index .exam-list,
  .web-route-pages-index-index .ad-section{
    margin-left: 0;
    margin-right: 0;
  }
  .web-route-pages-index-index .feature-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    padding: 28px 24px;
  }
  .web-route-pages-index-index .feature-item{
    padding: 18px 10px;
  }
  .web-route-pages-index-index .feature-icon-wrap{
    width: 78px;
    height: 78px;
    border-radius: 22px;
  }
  .web-route-pages-index-index .feature-name{
    font-size: 15px;
  }
  .web-route-pages-index-index .exam-category-section{
    margin-bottom: 24px;
  }
  .web-route-pages-index-index .exam-cards{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
  }
  .web-route-pages-index-index .exam-card{
    height: 100%;
    padding: 26px;
  }
  .web-route-pages-index-index .exam-info{
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .web-route-pages-index-index .info-item{
    margin-right: 0;
  }
  .web-route-pages-index-index .exam-desc{
    min-height: 52px;
  }
}


/* logic-fill entry button polish */
.web-route-pages-logic-fill-logic-fill .header-actions{
  display:flex;
  align-items:center;
  gap:calc(10 * var(--rpx));
  flex-wrap:wrap;
  justify-content:flex-end;
}
.web-route-pages-logic-fill-logic-fill .header-actions .my-learned-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:calc(52 * var(--rpx));
  padding:calc(8 * var(--rpx)) calc(18 * var(--rpx));
  border:calc(1 * var(--rpx)) solid rgba(74,144,226,.16);
  box-shadow:0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(74,144,226,.08);
}
.web-route-pages-logic-fill-logic-fill .center-entry-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(18 * var(--rpx));
  margin-top:calc(18 * var(--rpx));
}
.web-route-pages-logic-fill-logic-fill .center-entry-card{
  min-height:calc(116 * var(--rpx));
  border-radius:calc(22 * var(--rpx));
  padding:calc(22 * var(--rpx)) calc(24 * var(--rpx));
  display:flex;
  align-items:center;
  gap:calc(16 * var(--rpx));
  box-sizing:border-box;
  border:calc(1 * var(--rpx)) solid rgba(255,255,255,.75);
  box-shadow:0 calc(10 * var(--rpx)) calc(26 * var(--rpx)) rgba(40,86,160,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.web-route-pages-logic-fill-logic-fill .center-entry-card:active{
  transform:translateY(calc(2 * var(--rpx))) scale(.99);
  box-shadow:0 calc(6 * var(--rpx)) calc(18 * var(--rpx)) rgba(40,86,160,.10);
}
.web-route-pages-logic-fill-logic-fill .center-entry-card.vocab{
  background:linear-gradient(135deg,#eef6ff 0%,#f7fbff 100%);
  color:#2878d8;
}
.web-route-pages-logic-fill-logic-fill .center-entry-card.wrong{
  background:linear-gradient(135deg,#fff6ed 0%,#fffaf4 100%);
  color:#e07b18;
}
.web-route-pages-logic-fill-logic-fill .entry-icon{
  width:calc(58 * var(--rpx));
  height:calc(58 * var(--rpx));
  border-radius:calc(18 * var(--rpx));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(34 * var(--rpx));
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 0 0 calc(1 * var(--rpx)) rgba(255,255,255,.55);
  flex-shrink:0;
}
.web-route-pages-logic-fill-logic-fill .entry-copy{
  display:flex;
  flex-direction:column;
  gap:calc(6 * var(--rpx));
  min-width:0;
  flex:1;
}
.web-route-pages-logic-fill-logic-fill .entry-title{
  font-size:calc(28 * var(--rpx));
  font-weight:700;
  color:#22324a;
}
.web-route-pages-logic-fill-logic-fill .entry-desc{
  font-size:calc(22 * var(--rpx));
  color:#7d8998;
}
.web-route-pages-logic-fill-logic-fill .entry-arrow{
  font-size:calc(38 * var(--rpx));
  line-height:1;
  opacity:.45;
}
.web-route-pages-logic-fill-logic-fill .res-actions .wrongbook-entry-btn{
  width:auto;
  min-width:calc(210 * var(--rpx));
  height:calc(76 * var(--rpx));
  line-height:calc(76 * var(--rpx));
  padding:0 calc(28 * var(--rpx));
  border-radius:calc(38 * var(--rpx));
  background:linear-gradient(135deg,#fff3df,#ffe8c2);
  color:#b65d00;
  box-shadow:0 calc(8 * var(--rpx)) calc(20 * var(--rpx)) rgba(224,123,24,.15);
}
@media (max-width: 520px){
  .web-route-pages-logic-fill-logic-fill .header-stats{
    align-items:flex-start;
    gap:calc(12 * var(--rpx));
  }
  .web-route-pages-logic-fill-logic-fill .center-entry-grid{
    grid-template-columns:1fr;
  }
}


/* wrongbook center upgrade */
.web-route-pages-ai-exam-wrong-questions .wrongbook-center{background:#f4f7fb;min-height:100vh;padding-bottom:calc(40 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .wb-hero{margin:calc(22 * var(--rpx));padding:calc(30 * var(--rpx));border-radius:calc(28 * var(--rpx));background:linear-gradient(135deg,#3f8fe8,#6c63ff);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:calc(18 * var(--rpx));box-shadow:0 calc(12 * var(--rpx)) calc(32 * var(--rpx)) rgba(63,143,232,.26);}
.web-route-pages-ai-exam-wrong-questions .wb-kicker,.web-route-pages-ai-exam-wrong-questions .wb-title,.web-route-pages-ai-exam-wrong-questions .wb-subtitle{display:block;}
.web-route-pages-ai-exam-wrong-questions .wb-kicker{font-size:calc(22 * var(--rpx));opacity:.8;}
.web-route-pages-ai-exam-wrong-questions .wb-title{font-size:calc(42 * var(--rpx));font-weight:800;margin:calc(6 * var(--rpx)) 0;}
.web-route-pages-ai-exam-wrong-questions .wb-subtitle{font-size:calc(24 * var(--rpx));opacity:.88;}
.web-route-pages-ai-exam-wrong-questions .wb-primary,.web-route-pages-ai-exam-wrong-questions .save-btn{background:linear-gradient(135deg,#ffcc66,#ff9f43);color:#fff;border-radius:calc(999 * var(--rpx));font-weight:700;padding:calc(14 * var(--rpx)) calc(26 * var(--rpx));box-shadow:0 calc(8 * var(--rpx)) calc(18 * var(--rpx)) rgba(255,159,67,.24);}
.web-route-pages-ai-exam-wrong-questions .wb-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(14 * var(--rpx));margin:0 calc(22 * var(--rpx)) calc(18 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .wb-stat{background:#fff;border-radius:calc(20 * var(--rpx));padding:calc(20 * var(--rpx));box-shadow:0 calc(6 * var(--rpx)) calc(18 * var(--rpx)) rgba(30,55,90,.06);}
.web-route-pages-ai-exam-wrong-questions .stat-num{display:block;font-size:calc(34 * var(--rpx));font-weight:800;color:#2667d8;}
.web-route-pages-ai-exam-wrong-questions .stat-label{display:block;font-size:calc(22 * var(--rpx));color:#7c8798;margin-top:calc(4 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .wb-tabs{white-space:nowrap;margin:0 calc(22 * var(--rpx)) calc(18 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .wb-tab{display:inline-flex;margin-right:calc(12 * var(--rpx));padding:calc(14 * var(--rpx)) calc(22 * var(--rpx));border-radius:calc(999 * var(--rpx));background:#fff;color:#6b7280;font-size:calc(24 * var(--rpx));box-shadow:0 calc(4 * var(--rpx)) calc(12 * var(--rpx)) rgba(30,55,90,.05);}
.web-route-pages-ai-exam-wrong-questions .wb-tab.active{background:#2f80ed;color:#fff;font-weight:700;}
.web-route-pages-ai-exam-wrong-questions .wb-tools,.web-route-pages-ai-exam-wrong-questions .panel-actions,.web-route-pages-ai-exam-wrong-questions .draft-toolbar{display:flex;gap:calc(14 * var(--rpx));flex-wrap:wrap;margin:0 calc(22 * var(--rpx)) calc(18 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .tool-btn,.web-route-pages-ai-exam-wrong-questions .ghost-btn,.web-route-pages-ai-exam-wrong-questions .note-btn{border-radius:calc(18 * var(--rpx));padding:calc(14 * var(--rpx)) calc(22 * var(--rpx));background:#fff;color:#2f80ed;border:calc(1 * var(--rpx)) solid rgba(47,128,237,.18);font-size:calc(24 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .tool-btn.add{background:#eaf3ff;color:#236ed3;}
.web-route-pages-ai-exam-wrong-questions .tool-btn.draft{background:#fff7e8;color:#c76a00;}
.web-route-pages-ai-exam-wrong-questions .ghost-btn.active{background:#111827;color:#fff;}
.web-route-pages-ai-exam-wrong-questions .wb-panel{margin:0 calc(22 * var(--rpx)) calc(20 * var(--rpx));background:#fff;border-radius:calc(24 * var(--rpx));padding:calc(24 * var(--rpx));box-shadow:0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(30,55,90,.07);}
.web-route-pages-ai-exam-wrong-questions .panel-title{display:block;font-size:calc(30 * var(--rpx));font-weight:800;color:#1f2937;margin-bottom:calc(16 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .form-row{margin-bottom:calc(16 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .form-label{display:block;color:#6b7280;font-size:calc(24 * var(--rpx));margin-bottom:calc(10 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .mini-tabs{display:flex;flex-wrap:wrap;gap:calc(10 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .mini-tab{padding:calc(10 * var(--rpx)) calc(16 * var(--rpx));border-radius:calc(999 * var(--rpx));background:#f3f6fb;color:#667085;font-size:calc(23 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .mini-tab.active{background:#e8f1ff;color:#236ed3;font-weight:700;}
.web-route-pages-ai-exam-wrong-questions .wb-textarea{width:100%;min-height:calc(170 * var(--rpx));box-sizing:border-box;border:calc(1 * var(--rpx)) solid #e5eaf2;border-radius:calc(18 * var(--rpx));padding:calc(18 * var(--rpx));background:#f9fbfe;color:#1f2937;font-size:calc(25 * var(--rpx));margin-bottom:calc(14 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .wb-textarea.small{min-height:calc(110 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .upload-preview,.web-route-pages-ai-exam-wrong-questions .wrong-images{display:flex;gap:calc(12 * var(--rpx));flex-wrap:wrap;margin-bottom:calc(14 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .preview-img{width:calc(132 * var(--rpx));height:calc(132 * var(--rpx));border-radius:calc(16 * var(--rpx));object-fit:cover;}
.web-route-pages-ai-exam-wrong-questions .wrong-canvas{width:100%;height:calc(360 * var(--rpx));display:block;background:#fff;border:calc(2 * var(--rpx)) dashed #d7deea;border-radius:calc(18 * var(--rpx));touch-action:none;}
.web-route-pages-ai-exam-wrong-questions .wrong-questions-list{padding:0 calc(22 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .question-item{border-radius:calc(24 * var(--rpx));box-shadow:0 calc(8 * var(--rpx)) calc(24 * var(--rpx)) rgba(30,55,90,.07);border:calc(1 * var(--rpx)) solid rgba(229,234,242,.8);}
.web-route-pages-ai-exam-wrong-questions .time-line{display:block;font-size:calc(21 * var(--rpx));color:#9aa4b2;margin-top:calc(6 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .wrong-img,.web-route-pages-ai-exam-wrong-questions .note-image{max-width:100%;border-radius:calc(18 * var(--rpx));border:calc(1 * var(--rpx)) solid #edf0f5;background:#fff;}
.web-route-pages-ai-exam-wrong-questions .note-box{background:#fffbeb;border-left:calc(6 * var(--rpx)) solid #f59e0b;border-radius:calc(16 * var(--rpx));padding:calc(18 * var(--rpx));margin-bottom:calc(18 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .note-title{display:block;font-weight:800;color:#92400e;font-size:calc(24 * var(--rpx));margin-bottom:calc(8 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .note-content{display:block;color:#5f4718;font-size:calc(24 * var(--rpx));line-height:1.7;}
.web-route-pages-ai-exam-wrong-questions .note-modal{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:calc(24 * var(--rpx));box-sizing:border-box;}
.web-route-pages-ai-exam-wrong-questions .note-card{width:100%;max-height:92vh;overflow:auto;background:#fff;border-radius:calc(26 * var(--rpx));padding:calc(24 * var(--rpx));box-shadow:0 calc(20 * var(--rpx)) calc(60 * var(--rpx)) rgba(15,23,42,.22);}
.web-route-pages-ai-exam-wrong-questions .note-head{display:flex;align-items:center;justify-content:space-between;}
.web-route-pages-ai-exam-wrong-questions .close-btn{width:calc(56 * var(--rpx));height:calc(56 * var(--rpx));border-radius:50%;background:#f3f4f6;color:#475569;font-size:calc(34 * var(--rpx));line-height:calc(56 * var(--rpx));padding:0;}
@media (max-width: 520px){.web-route-pages-ai-exam-wrong-questions .wb-stat-grid{grid-template-columns:repeat(2,1fr)}.web-route-pages-ai-exam-wrong-questions .wb-hero{align-items:flex-start;flex-direction:column}.web-route-pages-ai-exam-wrong-questions .answer-info{flex-direction:column;gap:calc(8 * var(--rpx));}}

.web-route-pages-ai-exam-wrong-questions .wb-input{
  display:block;
  line-height:calc(44 * var(--rpx));
  height:auto;
  outline:none;
  user-select:text;
  -webkit-user-select:text;
  pointer-events:auto;
  position:relative;
  z-index:2;
}
.web-route-pages-ai-exam-wrong-questions input.wb-textarea{
  white-space:nowrap;
}

.web-route-pages-ai-exam-wrong-questions .structured-upload{display:block;margin-bottom:calc(16 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .field-title{display:block;font-size:calc(23 * var(--rpx));font-weight:800;color:#344054;margin:calc(16 * var(--rpx)) 0 calc(8 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .option-edit-row{display:flex;align-items:center;gap:calc(10 * var(--rpx));margin-bottom:calc(10 * var(--rpx));}
.web-route-pages-ai-exam-wrong-questions .option-edit-label{width:calc(48 * var(--rpx));height:calc(48 * var(--rpx));border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eef4ff;color:#2563eb;font-weight:900;}
.web-route-pages-ai-exam-wrong-questions .option-input{flex:1;margin-bottom:0;}
.web-route-pages-ai-exam-wrong-questions .answer-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(14 * var(--rpx));}
@media (max-width: 520px){.web-route-pages-ai-exam-wrong-questions .answer-edit-grid{grid-template-columns:1fr;}}


/* exam-data-analysis-split-v1 */
.web-route-pages-question-question .data-group-card{padding:calc(18 * var(--rpx));overflow:hidden}
.web-route-pages-question-question .data-group-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 6px 16px;border-bottom:1px solid #e8eef7}
.web-route-pages-question-question .data-group-title{font-size:calc(30 * var(--rpx));font-weight:800;color:#172033}
.web-route-pages-question-question .data-group-subtitle{font-size:calc(22 * var(--rpx));color:#8190a8;margin-top:4px}
.web-route-pages-question-question .material-toggle-btn{width:auto;min-width:104px;height:38px;padding:0 16px;border:0;border-radius:20px;background:linear-gradient(135deg,#4a90e2,#667eea);color:#fff;font-size:14px;font-weight:700;box-shadow:0 5px 14px rgba(74,144,226,.24)}
.web-route-pages-question-question .data-analysis-workspace{display:grid;grid-template-columns:minmax(340px,44%) minmax(0,1fr);gap:16px;height:calc(100vh - 250px);min-height:560px;padding-top:16px}
.web-route-pages-question-question .data-analysis-workspace.material-collapsed{grid-template-columns:minmax(0,1fr)}
.web-route-pages-question-question .data-material-panel,.web-route-pages-question-question .data-questions-panel{min-width:0;border:1px solid #e7edf6;border-radius:14px;background:#fbfcff;overflow:hidden}
.web-route-pages-question-question .data-material-panel{overflow-y:auto;padding:18px;scrollbar-width:thin}
.web-route-pages-question-question .data-panel-heading{position:sticky;top:-18px;z-index:2;display:flex;justify-content:space-between;align-items:center;margin:-18px -18px 16px;padding:14px 18px;background:rgba(247,250,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #e7edf6;color:#3478d4;font-size:17px;font-weight:800}
.web-route-pages-question-question .data-panel-tip{font-size:12px;font-weight:500;color:#98a4b7}
.web-route-pages-question-question .data-material-text{white-space:pre-wrap;font-size:16px;line-height:1.95;color:#273247}
.web-route-pages-question-question .data-material-image{display:block;width:100%;height:auto;margin:14px auto;border-radius:10px;background:#fff;box-shadow:0 2px 12px rgba(32,52,83,.08)}
.web-route-pages-question-question .data-questions-panel{display:flex;flex-direction:column;background:#fff}
.web-route-pages-question-question .data-question-tabs{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid #edf1f7;overflow-x:auto;flex-shrink:0}
.web-route-pages-question-question .data-question-tab{padding:8px 14px;border-radius:18px;background:#f3f6fa;color:#748197;font-size:13px;white-space:nowrap;cursor:pointer}
.web-route-pages-question-question .data-question-tab.active{background:#eaf3ff;color:#2878df;font-weight:800;box-shadow:inset 0 0 0 1px #8fc0ff}
.web-route-pages-question-question .data-question-tab.answered:after{content:'✓';margin-left:5px;color:#16a36a}
.web-route-pages-question-question .data-question-scroll{flex:1;overflow-y:auto;padding:14px;scroll-behavior:smooth;scrollbar-width:thin}
.web-route-pages-question-question .data-group-question{padding:18px;margin-bottom:14px;border:1px solid #e9edf3;border-radius:14px;background:#fff;box-shadow:0 3px 12px rgba(32,52,83,.05)}
.web-route-pages-question-question .data-group-question.current{border-color:#7eb5fa;box-shadow:0 5px 18px rgba(58,132,229,.13)}
.web-route-pages-question-question .data-sub-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.web-route-pages-question-question .data-sub-number{font-size:18px;font-weight:900;color:#1e293b}
.web-route-pages-question-question .data-sub-type{padding:3px 9px;border-radius:10px;background:#eef5ff;color:#3b82d0;font-size:12px}
.web-route-pages-question-question .data-sub-text{font-size:17px;line-height:1.75;color:#202b3d;margin-bottom:14px;white-space:pre-wrap}
.web-route-pages-question-question .data-sub-options .option-item{padding:14px 16px;margin-bottom:8px}
@media(max-width:899px){
 .web-route-pages-question-question .data-analysis-workspace{display:flex;flex-direction:column;height:auto;min-height:0}
 .web-route-pages-question-question .data-material-panel{max-height:46vh;flex:none}
 .web-route-pages-question-question .data-questions-panel{height:62vh;min-height:480px}
 .web-route-pages-question-question .data-group-toolbar{position:sticky;top:0;z-index:5;background:#fff}
 .web-route-pages-question-question .data-group-title{font-size:18px}
 .web-route-pages-question-question .data-group-subtitle{font-size:12px}
}


/* exam-data-material-scroll-stable-v1 */
.web-route-pages-question-question .data-material-panel,
.web-route-pages-question-question .data-question-scroll{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.web-route-pages-question-question .data-material-panel{
  position: relative;
  contain: layout paint;
}


/* exam-draft-clear-tracing-paper-v1 */
.web-route-pages-question-question .transparent-draft-layer{
  background: rgba(255,255,255,0.015) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto !important;
}
.web-route-pages-question-question .transparent-draft-layer::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent !important;
}
.web-route-pages-question-question .draft-header{
  min-height: 42px !important;
  padding: 8px 16px !important;
  background: rgba(255,255,255,0.42) !important;
  box-shadow: 0 2px 10px rgba(20,35,70,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.web-route-pages-question-question .draft-title{
  color: rgba(20,28,42,0.92) !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.75) !important;
}
.web-route-pages-question-question .draft-close-btn{
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,77,79,0.14) !important;
  box-shadow: 0 2px 8px rgba(255,77,79,0.12) !important;
}
.web-route-pages-question-question .draft-canvas-wrapper{
  background: transparent !important;
  isolation: isolate;
}
.web-route-pages-question-question .draft-canvas{
  background: transparent !important;
  opacity: 1 !important;
}
.web-route-pages-question-question .draft-controls{
  padding: 8px 16px !important;
  background: rgba(255,255,255,0.38) !important;
  box-shadow: 0 -2px 10px rgba(20,35,70,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.web-route-pages-question-question .draft-btn-clear,
.web-route-pages-question-question .draft-size-btn{
  background: rgba(255,255,255,0.58) !important;
  box-shadow: 0 2px 10px rgba(31,45,75,0.08) !important;
}
.web-route-pages-question-question .draft-btn-clear{
  color: #ff3b30 !important;
}
.web-route-pages-question-question .draft-size-btn.active{
  background: rgba(73,113,232,0.82) !important;
  color: #fff !important;
}


/* exam-category-hierarchy-v1 */
.web-route-pages-index-index .exam-category-row-title{font-size:13px;color:#64748b;margin:10px 0 8px;font-weight:700}
.web-route-pages-index-index .main-category-tabs .exam-category-tab{border-radius:999px}
.web-route-pages-index-index .sub-category-tabs .exam-category-tab{background:#f8fafc;border-style:dashed}
.web-route-pages-index-index .sub-category-tabs .exam-category-tab.active{background:#eaf2ff;border-color:#4a90e2;border-style:solid}
.web-route-pages-index-index .exam-sub-category-block{margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}

/* shenlun-real-exam-v1 */
.web-route-pages-question-question .shenlun-page{padding:14px;background:#f4f7fb;min-height:calc(100vh - 100px)}.web-route-pages-question-question .shenlun-topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:14px 18px;margin-bottom:12px}.web-route-pages-question-question .shenlun-title{font-weight:800;font-size:20px;display:block}.web-route-pages-question-question .shenlun-tip{font-size:13px;color:#64748b}.web-route-pages-question-question .shenlun-actions{display:flex;gap:8px}.web-route-pages-question-question .shenlun-secondary{font-size:13px;color:#2366ba;background:#edf5ff;border:1px solid #b8d6fc;border-radius:8px;padding:7px 10px}.web-route-pages-question-question .shenlun-workspace{display:grid;grid-template-columns:minmax(320px,42%) 1fr;gap:14px;margin:14px 0}.web-route-pages-question-question .shenlun-material,.web-route-pages-question-question .shenlun-answer{background:#fff;border:1px solid #e4eaf3;border-radius:12px;min-width:0}.web-route-pages-question-question .shenlun-material{max-height:74vh;overflow:auto}.web-route-pages-question-question .shenlun-panel-head{position:sticky;top:0;background:#f7faff;padding:13px 16px;font-weight:800;color:#2366ba;border-bottom:1px solid #e8eef8}.web-route-pages-question-question .shenlun-material-text{white-space:pre-wrap;line-height:2;padding:18px;font-size:16px}.web-route-pages-question-question .shenlun-material-image{max-width:calc(100% - 36px);margin:0 18px 16px}.web-route-pages-question-question .shenlun-answer{padding:18px}.web-route-pages-question-question .shenlun-question{font-size:18px;font-weight:650;line-height:1.8;white-space:pre-wrap}.web-route-pages-question-question .shenlun-number{color:#2366ba;margin-right:8px}.web-route-pages-question-question .shenlun-count{margin:12px 0;color:#64748b}.web-route-pages-question-question .shenlun-count text{font-weight:800;color:#e2562a}.web-route-pages-question-question .shenlun-input{box-sizing:border-box;width:100%;min-height:135px;padding:12px;border:1px solid #a9c9f5;border-radius:8px;font-size:16px;line-height:1.7}.web-route-pages-question-question .shenlun-card{display:grid;grid-template-columns:repeat(20,minmax(26px,1fr));border-top:1px solid #b9c6d8;border-left:1px solid #b9c6d8;margin-top:16px;max-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;}.web-route-pages-question-question .shenlun-cell{height:31px;line-height:31px;text-align:center;border-right:1px solid #b9c6d8;border-bottom:1px solid #b9c6d8;font-family:SimSun,serif;font-size:16px}.web-route-pages-question-question .shenlun-cell.good{background:#e9f9eb;border-color:#67b96d}.web-route-pages-question-question .shenlun-cell.bad{background:#fff0ef;border-color:#f08a82;text-decoration:underline;color:#c9382c}.web-route-pages-question-question .shenlun-cell.missing{background:#fff8d9;border-color:#d8b449}.web-route-pages-question-question .shenlun-submit{display:block;width:min(560px,100%);margin:20px auto;background:linear-gradient(90deg,#2168c5,#4d95ef);color:#fff;border:0;border-radius:12px;padding:15px;font-weight:800;font-size:18px}.web-route-pages-question-question .shenlun-feedback{margin-top:16px;padding:14px;border-radius:10px;background:#f7fbff;border:1px solid #b9d8ff;line-height:1.8}.web-route-pages-question-question .feedback-score{font-size:18px;font-weight:800;color:#1763bb}.web-route-pages-question-question .feedback-line text{font-weight:800;color:#29924c}.web-route-pages-question-question .feedback-line.bad text{color:#d54d43}.web-route-pages-question-question .feedback-model{margin-top:8px;padding-top:8px;border-top:1px dashed #bad0e7;white-space:pre-wrap}.web-route-pages-question-question .shenlun-summary{padding:15px;background:#fff8e6;border-radius:10px;color:#7a4c00;font-weight:700}.web-route-pages-question-question .shenlun-photo-ok{padding:10px 14px;background:#eaf8ef;color:#268144;border-radius:8px}@media(max-width:760px){.web-route-pages-question-question .shenlun-workspace{grid-template-columns:1fr}.web-route-pages-question-question .shenlun-material{max-height:42vh}.web-route-pages-question-question .shenlun-topbar{align-items:flex-start;flex-direction:column}.web-route-pages-question-question .shenlun-card{grid-template-columns:repeat(10,minmax(26px,1fr))}}

/* codex-question-media-stable-v2 */
.web-route-pages-question-question .question-image{display:block;width:auto;max-width:min(100%,720px);max-height:280px;height:auto;object-fit:contain;margin:12px auto 16px;background:#fff}
.web-route-pages-question-question .question-content .question-image + .question-image{display:none !important}
.web-route-pages-question-question .material-image,.web-route-pages-question-question .data-material-image{display:block;width:auto;max-width:min(100%,760px);max-height:360px;height:auto;object-fit:contain;margin:12px auto;background:#fff}
.web-route-pages-question-question .option-formula-image,.web-route-pages-question-question .option-value .option-formula-image{display:block;flex:0 1 auto;width:auto!important;max-width:min(100%,220px);max-height:72px;height:auto;object-fit:contain;margin:2px 0}
.web-route-pages-question-question .option-value{min-width:0}


/* codex-common-sense-mobile-v1 */
.web-route-pages-common-sense-common-sense .container{background:#f5f7fb;min-height:100vh;padding:12px 10px calc(84px + env(safe-area-inset-bottom));color:#182334}
.web-route-pages-common-sense-common-sense .header{background:#0f172a;color:#fff;border-radius:8px;padding:18px 16px;margin:0 0 12px;box-shadow:none}
.web-route-pages-common-sense-common-sense .header-title{justify-content:flex-start;margin-bottom:12px}
.web-route-pages-common-sense-common-sense .title-icon{font-size:28px;margin-right:8px}
.web-route-pages-common-sense-common-sense .title-text{font-size:24px;color:#fff;line-height:1.15}
.web-route-pages-common-sense-common-sense .header::before{content:'COMMON SENSE';display:block;color:#7dd3fc;font-size:11px;letter-spacing:0;margin-bottom:8px;font-weight:700}
.web-route-pages-common-sense-common-sense .stats-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin-top:14px}
.web-route-pages-common-sense-common-sense .stat-item{min-width:0;display:block;padding:10px 8px;border-radius:8px;background:rgba(255,255,255,.1);box-shadow:none;text-align:center}
.web-route-pages-common-sense-common-sense .stat-icon-bg,.web-route-pages-common-sense-common-sense .stat-arrow{display:none}
.web-route-pages-common-sense-common-sense .stat-info{display:flex;flex-direction:column;gap:2px}
.web-route-pages-common-sense-common-sense .stat-value{font-size:20px;color:#fff;line-height:1.1}
.web-route-pages-common-sense-common-sense .stat-label{font-size:12px;color:#cbd5e1;white-space:nowrap;margin:0}
.web-route-pages-common-sense-common-sense .category-section{position:sticky;top:0;z-index:5;margin:0 -10px 10px;padding:8px 10px;background:rgba(245,247,251,.96);backdrop-filter:blur(8px)}
.web-route-pages-common-sense-common-sense .category-tabs{gap:8px;padding:0;display:flex;overflow-x:auto;scrollbar-width:none}
.web-route-pages-common-sense-common-sense .category-tab{flex:0 0 auto;margin:0;padding:9px 14px;border-radius:8px;background:#fff;border:1px solid #dbe3ee;color:#334155;font-size:14px;box-shadow:none}
.web-route-pages-common-sense-common-sense .category-tab.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.web-route-pages-common-sense-common-sense .study-guide,.web-route-pages-common-sense-common-sense .mode-section,.web-route-pages-common-sense-common-sense .review-section,.web-route-pages-common-sense-common-sense .memorized-section,.web-route-pages-common-sense-common-sense .usage-count-card,.web-route-pages-common-sense-common-sense .history-section{margin:10px 0;padding:14px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:none}
.web-route-pages-common-sense-common-sense .guide-header{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}
.web-route-pages-common-sense-common-sense .guide-icon{font-size:22px;margin-right:8px}
.web-route-pages-common-sense-common-sense .guide-title,.web-route-pages-common-sense-common-sense .section-title .title{font-size:18px;color:#172033}
.web-route-pages-common-sense-common-sense .section-title{margin-bottom:12px;align-items:flex-end}
.web-route-pages-common-sense-common-sense .section-title .subtitle{font-size:12px;color:#64748b}
.web-route-pages-common-sense-common-sense .guide-steps{gap:8px}
.web-route-pages-common-sense-common-sense .guide-step{padding:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;backdrop-filter:none}
.web-route-pages-common-sense-common-sense .step-number{width:28px;height:28px;border-radius:8px;background:#dbeafe;color:#1d4ed8;font-size:15px;margin-right:10px}
.web-route-pages-common-sense-common-sense .step-name{font-size:15px;color:#172033;margin-bottom:2px}
.web-route-pages-common-sense-common-sense .step-desc{font-size:12px;color:#64748b}
.web-route-pages-common-sense-common-sense .step-arrow{display:none}
.web-route-pages-common-sense-common-sense .guide-footer{display:none}
.web-route-pages-common-sense-common-sense .mode-grid{display:grid;grid-template-columns:1fr;gap:10px}
.web-route-pages-common-sense-common-sense .mode-item{display:grid;grid-template-columns:38px 1fr;align-items:center;text-align:left;padding:12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:none;position:relative}
.web-route-pages-common-sense-common-sense .mode-recommended{border-color:#1d4ed8;background:#eff6ff}
.web-route-pages-common-sense-common-sense .mode-badge{top:8px;right:8px;border-radius:6px;padding:3px 7px;background:#1d4ed8;font-size:11px;box-shadow:none}
.web-route-pages-common-sense-common-sense .mode-icon{grid-row:1 / span 2;font-size:24px;margin:0}
.web-route-pages-common-sense-common-sense .mode-name{font-size:16px;margin:0 0 3px;color:#172033}
.web-route-pages-common-sense-common-sense .mode-desc{font-size:12px;color:#64748b;line-height:1.35}
.web-route-pages-common-sense-common-sense .review-card,.web-route-pages-common-sense-common-sense .memorized-card{border-radius:8px;border:1px solid #e2e8f0;box-shadow:none;background:#f8fafc}
.web-route-pages-common-sense-common-sense .study-section{margin:0}
.web-route-pages-common-sense-common-sense .progress-bar{height:8px;margin:0 0 10px;background:#dbe3ee;border-radius:8px}
.web-route-pages-common-sense-common-sense .progress-text{top:18px;color:#475569;font-size:12px;font-weight:600}
.web-route-pages-common-sense-common-sense .content-card{padding:16px;border-radius:8px;border:1px solid #e2e8f0;box-shadow:none;margin-bottom:12px;background:#fff}
.web-route-pages-common-sense-common-sense .card-header{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #e2e8f0;gap:8px;flex-wrap:wrap}
.web-route-pages-common-sense-common-sense .content-title{font-size:21px;line-height:1.3;margin-bottom:12px;color:#111827}
.web-route-pages-common-sense-common-sense .content-text,.web-route-pages-common-sense-common-sense .question-text{font-size:16px;line-height:1.7;color:#1f2937}
.web-route-pages-common-sense-common-sense .key-points{padding:12px;border-radius:8px;background:#f8fafc;margin-top:14px}
.web-route-pages-common-sense-common-sense .point-text{font-size:14px;line-height:1.55}
.web-route-pages-common-sense-common-sense .fill-content{display:block;font-size:17px;line-height:1.8;margin:14px 0}
.web-route-pages-common-sense-common-sense .fill-blank{display:flex;width:100%;height:46px;margin:10px 0;border-radius:8px}
.web-route-pages-common-sense-common-sense .option-item{padding:13px;border-radius:8px;align-items:flex-start;background:#fff;border-color:#e2e8f0}
.web-route-pages-common-sense-common-sense .option-label{width:30px;height:30px;font-size:14px;margin-right:10px}
.web-route-pages-common-sense-common-sense .option-text{font-size:15px;line-height:1.45;min-width:0}
.web-route-pages-common-sense-common-sense .memorized-tip{padding:10px 12px;border-radius:8px;margin:12px 0;background:#fff7ed;border-left:3px solid #f97316}
.web-route-pages-common-sense-common-sense .tip-icon{display:none}
.web-route-pages-common-sense-common-sense .tip-text{font-size:12px;color:#9a3412;line-height:1.45}
.web-route-pages-common-sense-common-sense .card-footer{position:sticky;bottom:calc(52px + env(safe-area-inset-bottom));z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0;background:linear-gradient(to top,#f5f7fb 70%,rgba(245,247,251,0))}
.web-route-pages-common-sense-common-sense .card-footer button{height:44px;line-height:44px;border-radius:8px;font-size:15px;font-weight:700}
.web-route-pages-common-sense-common-sense .ai-update-section{margin:10px 0 14px;text-align:left}
.web-route-pages-common-sense-common-sense .btn-ai-update{height:46px;border-radius:8px;font-size:16px;background:#15803d}
.web-route-pages-common-sense-common-sense .update-tip{display:block;margin-top:6px;color:#64748b;font-size:12px;text-align:center}
.web-route-pages-common-sense-common-sense .modal-content{width:calc(100vw - 28px);max-width:420px;border-radius:8px;max-height:78vh;overflow:auto}
@media (min-width:700px){.web-route-pages-common-sense-common-sense .container{max-width:520px;margin:0 auto}.web-route-pages-common-sense-common-sense .mode-grid{grid-template-columns:1fr 1fr}}



/* codex-quantity-relation-mobile-v1 */
.web-route-pages-quantity-relation-quantity-relation .container{background:#f5f7fb;min-height:100vh;padding:12px 10px calc(86px + env(safe-area-inset-bottom));color:#172033;overflow-x:hidden}
.web-route-pages-quantity-relation-quantity-relation .header-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 12px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .stat-item{min-width:0;padding:10px 8px;border-right:1px solid #e2e8f0;text-align:left;background:#fff}
.web-route-pages-quantity-relation-quantity-relation .stat-item:last-child{border-right:0}
.web-route-pages-quantity-relation-quantity-relation .stat-icon{display:none}
.web-route-pages-quantity-relation-quantity-relation .stat-label{display:block;font-size:12px;color:#64748b;margin-bottom:4px;white-space:nowrap}
.web-route-pages-quantity-relation-quantity-relation .stat-value{font-size:20px;line-height:1.1;color:#0f172a;font-weight:800}
.web-route-pages-quantity-relation-quantity-relation .tab-bar{position:sticky;top:0;z-index:5;display:flex;gap:8px;margin:0 -10px 10px;padding:8px 10px;background:rgba(245,247,251,.96);border:0;box-shadow:none;overflow-x:auto;scrollbar-width:none}
.web-route-pages-quantity-relation-quantity-relation .tab-item{flex:0 0 auto;min-width:auto;padding:9px 13px;border-radius:8px;background:#fff;border:1px solid #dbe3ee;color:#334155;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .tab-item.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.web-route-pages-quantity-relation-quantity-relation .tab-icon{display:none}
.web-route-pages-quantity-relation-quantity-relation .tab-text{font-size:14px;white-space:nowrap}
.web-route-pages-quantity-relation-quantity-relation .tab-content,.web-route-pages-quantity-relation-quantity-relation .question-section,.web-route-pages-quantity-relation-quantity-relation .result-section,.web-route-pages-quantity-relation-quantity-relation .generate-section,.web-route-pages-quantity-relation-quantity-relation .usage-count-card,.web-route-pages-quantity-relation-quantity-relation .rank-header-card{margin:10px 0;padding:14px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .content-title{font-size:18px;color:#111827;margin-bottom:12px}
.web-route-pages-quantity-relation-quantity-relation .strategy-list{display:grid;gap:10px}
.web-route-pages-quantity-relation-quantity-relation .strategy-item,.web-route-pages-quantity-relation-quantity-relation .formula-card,.web-route-pages-quantity-relation-quantity-relation .steps-card,.web-route-pages-quantity-relation-quantity-relation .example-card,.web-route-pages-quantity-relation-quantity-relation .tips-card,.web-route-pages-quantity-relation-quantity-relation .rhyme-card,.web-route-pages-quantity-relation-quantity-relation .quick-ref-item,.web-route-pages-quantity-relation-quantity-relation .question-card,.web-route-pages-quantity-relation-quantity-relation .explanation-card{border-radius:8px;border:1px solid #e2e8f0;box-shadow:none;background:#fff;padding:13px;margin-bottom:10px;max-width:100%;overflow:hidden}
.web-route-pages-quantity-relation-quantity-relation .strategy-header{align-items:flex-start;gap:10px}
.web-route-pages-quantity-relation-quantity-relation .strategy-icon{font-size:20px;line-height:1.2;flex:0 0 auto}
.web-route-pages-quantity-relation-quantity-relation .strategy-title,.web-route-pages-quantity-relation-quantity-relation .example-title{font-size:16px;line-height:1.35;color:#111827}
.web-route-pages-quantity-relation-quantity-relation .strategy-summary,.web-route-pages-quantity-relation-quantity-relation .strategy-text,.web-route-pages-quantity-relation-quantity-relation .step-text,.web-route-pages-quantity-relation-quantity-relation .example-solution,.web-route-pages-quantity-relation-quantity-relation .tip-text,.web-route-pages-quantity-relation-quantity-relation .quick-ref-body,.web-route-pages-quantity-relation-quantity-relation .section-text,.web-route-pages-quantity-relation-quantity-relation .explanation-content{font-size:14px;line-height:1.6;color:#334155;word-break:break-word}
.web-route-pages-quantity-relation-quantity-relation .formula-text{font-size:15px;line-height:1.55;color:#0f172a;word-break:break-word;overflow-x:auto}
.web-route-pages-quantity-relation-quantity-relation .step-row,.web-route-pages-quantity-relation-quantity-relation .step-item{display:flex;align-items:flex-start;gap:10px}
.web-route-pages-quantity-relation-quantity-relation .step-badge,.web-route-pages-quantity-relation-quantity-relation .step-number{width:28px;height:28px;min-width:28px;border-radius:8px;font-size:14px;line-height:28px}
.web-route-pages-quantity-relation-quantity-relation .generate-btn,.web-route-pages-quantity-relation-quantity-relation .submit-btn,.web-route-pages-quantity-relation-quantity-relation .next-btn{width:100%;height:46px;line-height:46px;border-radius:8px;font-size:16px;font-weight:800;background:#1d4ed8;color:#fff;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .question-text{font-size:17px;line-height:1.65;color:#111827;margin-bottom:14px;word-break:break-word}
.web-route-pages-quantity-relation-quantity-relation .options-list{display:grid;gap:10px}
.web-route-pages-quantity-relation-quantity-relation .option-item{display:flex;align-items:flex-start;padding:13px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;min-height:48px}
.web-route-pages-quantity-relation-quantity-relation .option-key{width:30px;height:30px;min-width:30px;border-radius:8px;font-size:14px;line-height:30px;margin-right:10px}
.web-route-pages-quantity-relation-quantity-relation .option-text{font-size:15px;line-height:1.45;min-width:0;word-break:break-word}
.web-route-pages-quantity-relation-quantity-relation .result-status{padding:12px;border-radius:8px;margin-bottom:10px}
.web-route-pages-quantity-relation-quantity-relation .section-header{font-size:14px;border-radius:8px;padding:8px 10px;margin:10px 0 8px}
.web-route-pages-quantity-relation-quantity-relation .generate-tip,.web-route-pages-quantity-relation-quantity-relation .usage-count-tip,.web-route-pages-quantity-relation-quantity-relation .usage-count-hint{font-size:12px;color:#64748b;text-align:center;margin-top:6px}
.web-route-pages-quantity-relation-quantity-relation .rank-header-card::before,.web-route-pages-quantity-relation-quantity-relation .podium-stars,.web-route-pages-quantity-relation-quantity-relation .podium-glow,.web-route-pages-quantity-relation-quantity-relation .podium-rays{display:none}
@media (min-width:700px){.web-route-pages-quantity-relation-quantity-relation .container{max-width:560px;margin:0 auto}}



/* codex-quantity-hero-overflow-v1 */
.web-route-pages-quantity-relation-quantity-relation,
.web-route-pages-quantity-relation-quantity-relation *{box-sizing:border-box}
.web-route-pages-quantity-relation-quantity-relation .container,
.web-route-pages-quantity-relation-quantity-relation .container>*{max-width:100%;overflow-x:hidden}
.web-route-pages-quantity-relation-quantity-relation .container>div:first-child{position:relative;overflow:hidden;border-radius:8px}
.web-route-pages-quantity-relation-quantity-relation .container>div:first-child button,
.web-route-pages-quantity-relation-quantity-relation .container>div:first-child .button,
.web-route-pages-quantity-relation-quantity-relation .container>div:first-child [role="button"]{
  position:static!important;
  right:auto!important;
  left:auto!important;
  transform:none!important;
  max-width:100%;
  min-width:0;
  white-space:nowrap;
}
.web-route-pages-quantity-relation-quantity-relation .container>div:first-child button:not(:first-child),
.web-route-pages-quantity-relation-quantity-relation .container>div:first-child .button:not(:first-child){
  margin-top:10px;
}
.web-route-pages-quantity-relation-quantity-relation .container img,
.web-route-pages-quantity-relation-quantity-relation .container canvas,
.web-route-pages-quantity-relation-quantity-relation .container table{max-width:100%}



/* codex-quantity-qrb-mobile-v1 */
.web-route-pages-quantity-relation-quantity-relation .qrb-root{background:#f4f7fb;color:#0f172a;overflow-x:hidden}
.web-route-pages-quantity-relation-quantity-relation .qrb-shell{width:100%;max-width:100%;padding:12px 11px calc(82px + env(safe-area-inset-bottom));overflow-x:hidden}
.web-route-pages-quantity-relation-quantity-relation .qrb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;width:100%;padding:18px;border-radius:8px;background:linear-gradient(135deg,#1d7be8 0%,#2f8be8 100%);box-shadow:none;overflow:hidden}
.web-route-pages-quantity-relation-quantity-relation .qrb-head>div{min-width:0;flex:1 1 auto}
.web-route-pages-quantity-relation-quantity-relation .qrb-head p{margin:0 0 6px;font-size:12px;color:#dbeafe}
.web-route-pages-quantity-relation-quantity-relation .qrb-head h1{margin:0 0 6px;font-size:26px;line-height:1.1;color:#fff;letter-spacing:0}
.web-route-pages-quantity-relation-quantity-relation .qrb-head span{display:block;max-width:210px;font-size:12px;line-height:1.55;color:#eaf3ff;word-break:break-word}
.web-route-pages-quantity-relation-quantity-relation .qrb-head-action{flex:0 0 auto;margin:0;min-width:76px;height:36px;padding:0 12px;border:0;border-radius:7px;background:#fff;color:#1764ca;font-size:14px;font-weight:800;white-space:nowrap;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .qrb-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:14px 0 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .qrb-progress>div{min-width:0;padding:12px 10px;border-right:1px solid #e2e8f0}
.web-route-pages-quantity-relation-quantity-relation .qrb-progress>div:last-child{border-right:0}
.web-route-pages-quantity-relation-quantity-relation .qrb-progress span{display:block;font-size:12px;color:#64748b;margin:0 0 5px;white-space:nowrap}
.web-route-pages-quantity-relation-quantity-relation .qrb-progress strong{font-size:20px;line-height:1;color:#0f172a}
.web-route-pages-quantity-relation-quantity-relation .qrb-categories{margin:0 0 12px;overflow:hidden}
.web-route-pages-quantity-relation-quantity-relation .qrb-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:15px;font-weight:800;color:#0f172a}
.web-route-pages-quantity-relation-quantity-relation .qrb-section-title span{font-size:12px;font-weight:500;color:#64748b;white-space:nowrap}
.web-route-pages-quantity-relation-quantity-relation .qrb-chip-strip{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;width:100%;padding:0;margin:0}
.web-route-pages-quantity-relation-quantity-relation .qrb-chip{flex:0 0 auto;height:30px;padding:0 13px;border-radius:7px;border:1px solid #dbe3ee;background:#fff;color:#334155;font-size:14px;line-height:28px;white-space:nowrap;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .qrb-chip.on{border-color:#1d73e8;background:#eff6ff;color:#1d4ed8;font-weight:800}
.web-route-pages-quantity-relation-quantity-relation .qrb-workspace{display:grid;gap:12px;margin:0;overflow:hidden}
.web-route-pages-quantity-relation-quantity-relation .qrb-history,.web-route-pages-quantity-relation-quantity-relation .qrb-paper{width:100%;border:1px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:none;overflow:hidden}
.web-route-pages-quantity-relation-quantity-relation .qrb-history{padding:14px}
.web-route-pages-quantity-relation-quantity-relation .qrb-queue-empty{padding:24px 6px;color:#64748b;font-size:13px;line-height:1.6;text-align:left}
.web-route-pages-quantity-relation-quantity-relation .qrb-paper-wrap{min-width:0;width:100%}
.web-route-pages-quantity-relation-quantity-relation .qrb-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;padding:20px 18px;text-align:center}
.web-route-pages-quantity-relation-quantity-relation .qrb-welcome-icon{width:52px;height:52px;border-radius:8px;background:#eaf2ff;color:#1d73e8;font-size:28px;font-weight:900;line-height:52px;margin-bottom:16px}
.web-route-pages-quantity-relation-quantity-relation .qrb-welcome h2{margin:0 0 12px;font-size:20px;line-height:1.3;color:#0f172a;letter-spacing:0}
.web-route-pages-quantity-relation-quantity-relation .qrb-welcome p{margin:0 0 20px;font-size:13px;line-height:1.55;color:#64748b}
.web-route-pages-quantity-relation-quantity-relation .qrb-button{height:42px;padding:0 20px;border:0;border-radius:7px;font-size:16px;font-weight:800;line-height:42px;box-shadow:none}
.web-route-pages-quantity-relation-quantity-relation .qrb-button-primary{background:#1d73e8;color:#fff}
@media (max-width:360px){.web-route-pages-quantity-relation-quantity-relation .qrb-head{align-items:flex-start;flex-direction:column}.web-route-pages-quantity-relation-quantity-relation .qrb-head span{max-width:100%}.web-route-pages-quantity-relation-quantity-relation .qrb-head-action{width:100%}}
@media (min-width:700px){.web-route-pages-quantity-relation-quantity-relation .qrb-shell{max-width:560px;margin:0 auto}}



/* codex-quantity-qrb-root-mobile-v1 */
.qrb-root{background:#f4f7fb;color:#0f172a;overflow-x:hidden}
.qrb-root .qrb-shell{width:100%;max-width:100%;padding:12px 11px calc(82px + env(safe-area-inset-bottom));overflow-x:hidden}
.qrb-root .qrb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;width:100%;padding:18px;border-radius:8px;background:linear-gradient(135deg,#1d7be8 0%,#2f8be8 100%);box-shadow:none;overflow:hidden}
.qrb-root .qrb-head>div{min-width:0;flex:1 1 auto}
.qrb-root .qrb-head p{margin:0 0 6px;font-size:12px;color:#dbeafe}
.qrb-root .qrb-head h1{margin:0 0 6px;font-size:26px;line-height:1.1;color:#fff;letter-spacing:0}
.qrb-root .qrb-head span{display:block;max-width:210px;font-size:12px;line-height:1.55;color:#eaf3ff;word-break:break-word}
.qrb-root .qrb-head-action{flex:0 0 auto;margin:0;min-width:76px;height:36px;padding:0 12px;border:0;border-radius:7px;background:#fff;color:#1764ca;font-size:14px;font-weight:800;white-space:nowrap;box-shadow:none}
.qrb-root .qrb-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;margin:14px 0 12px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;box-shadow:none}
.qrb-root .qrb-progress>div{min-width:0;padding:12px 10px;border-right:1px solid #e2e8f0}
.qrb-root .qrb-progress>div:last-child{border-right:0}
.qrb-root .qrb-progress span{display:block;font-size:12px;color:#64748b;margin:0 0 5px;white-space:nowrap}
.qrb-root .qrb-progress strong{font-size:20px;line-height:1;color:#0f172a}
.qrb-root .qrb-categories{margin:0 0 12px;overflow:visible}
.qrb-root .qrb-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-size:15px;font-weight:800;color:#0f172a}
.qrb-root .qrb-section-title span{font-size:12px;font-weight:500;color:#64748b;white-space:nowrap}
.qrb-root .qrb-chip-strip{display:flex!important;flex-wrap:wrap!important;gap:8px;overflow:visible!important;width:100%;padding:0;margin:0}
.qrb-root .qrb-chip{flex:0 0 auto;height:30px;padding:0 13px;border-radius:7px;border:1px solid #dbe3ee;background:#fff;color:#334155;font-size:14px;line-height:28px;white-space:nowrap;box-shadow:none}
.qrb-root .qrb-chip.on{border-color:#1d73e8;background:#eff6ff;color:#1d4ed8;font-weight:800}
.qrb-root .qrb-workspace{display:grid;gap:12px;margin:0;overflow:hidden}
.qrb-root .qrb-history,.qrb-root .qrb-paper{width:100%;border:1px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:none;overflow:hidden}
.qrb-root .qrb-history{padding:14px}
.qrb-root .qrb-queue-empty{padding:24px 6px;color:#64748b;font-size:13px;line-height:1.6;text-align:left}
.qrb-root .qrb-paper-wrap{min-width:0;width:100%}
.qrb-root .qrb-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;padding:20px 18px;text-align:center}
.qrb-root .qrb-welcome-icon{width:52px;height:52px;border-radius:8px;background:#eaf2ff;color:#1d73e8;font-size:28px;font-weight:900;line-height:52px;margin-bottom:16px}
.qrb-root .qrb-welcome h2{margin:0 0 12px;font-size:20px;line-height:1.3;color:#0f172a;letter-spacing:0}
.qrb-root .qrb-welcome p{margin:0 0 20px;font-size:13px;line-height:1.55;color:#64748b}
.qrb-root .qrb-button{height:42px;padding:0 20px;border:0;border-radius:7px;font-size:16px;font-weight:800;line-height:42px;box-shadow:none}
.qrb-root .qrb-button-primary{background:#1d73e8;color:#fff}
@media (max-width:360px){.qrb-root .qrb-head{align-items:flex-start;flex-direction:column}.qrb-root .qrb-head span{max-width:100%}.qrb-root .qrb-head-action{width:100%}}
@media (min-width:700px){.qrb-root .qrb-shell{max-width:560px;margin:0 auto}}



/* codex-quantity-qrb-single-column-v1 */
.qrb-root .qrb-workspace{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:stretch!important}
.qrb-root .qrb-history,.qrb-root .qrb-paper-wrap,.qrb-root .qrb-paper{width:100%!important;max-width:100%!important;min-width:0!important}
.qrb-root .qrb-paper-wrap{grid-column:auto!important}
.qrb-root .qrb-welcome{min-height:230px!important}
.qrb-root .qrb-welcome h2{max-width:100%;word-break:break-word}