.Result_container__GPeAy {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-color, #1a1a1a);
  color: var(--main-color, #ffffff);
}

.Result_main__mwBA5 {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.Result_header__VSFO4 {
  text-align: center;
  margin-bottom: 3rem;
  width: 100%;
}

.Result_title__B0QhW {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0 1rem 0;
  color: var(--main-color, #ffffff);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.Result_subtitle__9LnUA {
  font-size: 1.2rem;
  color: var(--sub-color, #888888);
  margin: 0;
  line-height: 1.6;
}

.Result_content__E4aLM {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 800px;
}

.Result_loading__kWNgE {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-size: 1.2rem;
  color: var(--sub-color, #888888);
}

.Result_mainResultCard__p4DQx {
  background: var(--sub-color, #2a2a2a);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--sub-alt-color, #3a3a3a);
  position: relative;
  width: 100%;
  max-width: 600px;
}

.Result_performanceBadge__jzi__ {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-color, #1a1a1a);
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  border: 2px solid var(--sub-alt-color, #3a3a3a);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.Result_mainStats__Dn_j7 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 2rem 0;
  gap: 2rem;
}

.Result_wpmDisplay__pozti {
  text-align: center;
}

.Result_wpmDisplay__pozti h1 {
  font-size: 4rem;
  font-weight: bold;
  margin: 0;
  color: var(--main-color, #ffffff);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.Result_wpmDisplay__pozti span {
  font-size: 1.2rem;
  color: var(--sub-color, #888888);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.Result_accuracyDisplay__LT2kC {
  text-align: center;
  position: relative;
}

.Result_accuracyDisplay__LT2kC h2 {
  font-size: 3rem;
  font-weight: bold;
  margin: 0;
  color: var(--main-color, #ffffff);
}

.Result_accuracyDisplay__LT2kC span {
  font-size: 1rem;
  color: var(--sub-color, #888888);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.Result_grade__OS24U {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--accent-color, #4CAF50);
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.Result_performanceMessage__3A7BX {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 10px;
  border-left: 4px solid var(--accent-color, #4CAF50);
}

.Result_performanceMessage__3A7BX p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--main-color, #ffffff);
}

.Result_detailsCard__qqJK6 {
  background: var(--sub-color, #2a2a2a);
  border-radius: 15px;
  padding: 2rem;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
}

.Result_cardHeader__yQ6Ud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.Result_cardHeader__yQ6Ud h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--main-color, #ffffff);
}

.Result_toggleButton__VNp1K {
  background: none;
  border: none;
  color: var(--main-color, #ffffff);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.Result_toggleButton__VNp1K:hover {
  background: var(--sub-alt-color, #3a3a3a);
}

.Result_basicStats__iJVcy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.Result_statItem__x5lxa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 8px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
}

.Result_statItem__x5lxa svg {
  color: var(--accent-color, #4CAF50);
  font-size: 1.1rem;
}

.Result_statItem__x5lxa span {
  font-size: 0.9rem;
  color: var(--main-color, #ffffff);
}

.Result_detailedStats__PUemz {
  border-top: 1px solid var(--sub-alt-color, #3a3a3a);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

.Result_characterBreakdown__RHnDc h4,
.Result_performanceMetrics__zjVdy h4 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  color: var(--main-color, #ffffff);
}

.Result_characterGrid__LQLZZ {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 1rem;
}

.Result_charStat__dVYw4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 8px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
}

.Result_charStat__dVYw4 svg {
  font-size: 1rem;
}

.Result_charStat__dVYw4 .Result_correct__tgSYv {
  color: #4CAF50;
}

.Result_charStat__dVYw4 .Result_incorrect__MbD7o {
  color: #f44336;
}

.Result_charStat__dVYw4 .Result_extra__vTY4i {
  color: #ff9800;
}

.Result_charStat__dVYw4 .Result_missed__U5AFZ {
  color: #9c27b0;
}

.Result_charStat__dVYw4 span {
  font-size: 0.9rem;
  color: var(--main-color, #ffffff);
}

.Result_totalChars__8iL4l {
  text-align: center;
  padding: 1rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 8px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
  margin-top: 1rem;
}

.Result_totalChars__8iL4l span {
  font-weight: bold;
  color: var(--main-color, #ffffff);
}

.Result_metricsGrid__l9AAf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.Result_metric__to79W {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 8px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
}

.Result_metricLabel__BaqwS {
  font-size: 0.8rem;
  color: var(--sub-color, #888888);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.Result_metricValue__nTLd5 {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--main-color, #ffffff);
}

.Result_actionButtons__787ef {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 600px;
}

.Result_actionButtons__787ef button {
  min-width: 120px;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.Result_submitSection__o50Jd {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 600px;
}

.Result_submitSection__o50Jd button {
  min-width: 150px;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.1rem;
}

.Result_improvementTips__L22Aw {
  background: var(--sub-color, #2a2a2a);
  border-radius: 15px;
  padding: 2rem;
  width: 100%;
  max-width: 600px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
}

.Result_improvementTips__L22Aw h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.3rem;
  color: var(--main-color, #ffffff);
  text-align: center;
}

.Result_tipsGrid__hO131 {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.Result_tip__nF3jO {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 8px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
  transition: transform 0.3s ease;
}

.Result_tip__nF3jO:hover {
  transform: translateX(5px);
}

.Result_tip__nF3jO svg {
  color: var(--accent-color, #4CAF50);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.Result_tip__nF3jO span {
  font-size: 0.95rem;
  color: var(--main-color, #ffffff);
  line-height: 1.4;
}

/* 按钮样式 */
.Result_primary__Ds5F5 {
  background: var(--accent-color, #4CAF50);
  color: white;
  border: 2px solid var(--accent-color, #4CAF50);
}

.Result_primary__Ds5F5:hover {
  background: #45a049;
  border-color: #45a049;
  transform: translateY(-2px);
}

.Result_secondary__Tn2MX {
  background: var(--sub-alt-color, #3a3a3a);
  color: var(--main-color, #ffffff);
  border: 2px solid var(--sub-alt-color, #3a3a3a);
}

.Result_secondary__Tn2MX:hover {
  background: var(--sub-color, #2a2a2a);
  border-color: var(--main-color, #ffffff);
  transform: translateY(-2px);
}

.Result_outline__stzzu {
  background: transparent;
  color: var(--main-color, #ffffff);
  border: 2px solid var(--main-color, #ffffff);
}

.Result_outline__stzzu:hover {
  background: var(--main-color, #ffffff);
  color: var(--bg-color, #1a1a1a);
  transform: translateY(-2px);
}

.Result_success__3CkPN {
  background: #4CAF50;
  color: white;
  border: 2px solid #4CAF50;
}

.Result_success__3CkPN:hover {
  background: #45a049;
  border-color: #45a049;
  transform: translateY(-2px);
}

/* 动画样式 */
.Result_fadeIn__jpq78 {
  animation: Result_fadeIn__jpq78 0.6s ease-in-out;
}

.Result_slideUp__Karie {
  animation: Result_slideUp__Karie 0.6s ease-out;
}

.Result_expand__VS92f {
  animation: Result_expand__VS92f 0.4s ease-out;
}

@keyframes Result_fadeIn__jpq78 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes Result_slideUp__Karie {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes Result_expand__VS92f {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* 独立结果页面样式 */
.Result_backButton___3Hjz {
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: 10;
}

.Result_resultMeta__75ws_ {
  margin-top: 2rem;
  padding: 1rem;
  background: var(--bg-color, #1a1a1a);
  border-radius: 10px;
  border: 1px solid var(--sub-alt-color, #3a3a3a);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.Result_userInfo__KCd1s,
.Result_dateInfo___qVDV {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--sub-color, #888888);
}

.Result_userInfo__KCd1s span,
.Result_dateInfo___qVDV span {
  color: var(--main-color, #ffffff);
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .Result_main__mwBA5 {
    padding: 1.5rem 1rem;
  }

  .Result_header__VSFO4 {
    margin-bottom: 2rem;
  }

  .Result_title__B0QhW {
    font-size: 2rem;
  }

  .Result_subtitle__9LnUA {
    font-size: 1.1rem;
  }

  .Result_content__E4aLM {
    gap: 1.5rem;
  }

  .Result_mainResultCard__p4DQx {
    padding: 2rem 1.5rem;
  }

  .Result_mainStats__Dn_j7 {
    flex-direction: column;
    gap: 1.5rem;
  }

  .Result_wpmDisplay__pozti h1 {
    font-size: 3rem;
  }

  .Result_accuracyDisplay__LT2kC h2 {
    font-size: 2.5rem;
  }

  .Result_basicStats__iJVcy {
    grid-template-columns: 1fr;
  }

  .Result_characterGrid__LQLZZ {
    grid-template-columns: 1fr;
  }

  .Result_metricsGrid__l9AAf {
    grid-template-columns: 1fr;
  }

  .Result_actionButtons__787ef {
    flex-direction: column;
    align-items: center;
  }

  .Result_actionButtons__787ef button {
    width: 100%;
    max-width: 300px;
  }

  .Result_submitSection__o50Jd button {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .Result_main__mwBA5 {
    padding: 1rem 0.5rem;
  }

  .Result_title__B0QhW {
    font-size: 1.8rem;
  }

  .Result_subtitle__9LnUA {
    font-size: 1rem;
  }

  .Result_mainResultCard__p4DQx {
    padding: 1.5rem 1rem;
  }

  .Result_performanceBadge__jzi__ {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
  }

  .Result_wpmDisplay__pozti h2 {
    font-size: 2.5rem;
  }

  .Result_accuracyDisplay__LT2kC h3 {
    font-size: 2rem;
  }

  .Result_detailsCard__qqJK6,
  .Result_improvementTips__L22Aw {
    padding: 1.5rem 1rem;
  }
}
.Timer_timer__viBwW {
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.Timer_progressBarWrapper__NERca {
  width: 100%;
  height: 0.5rem;
  background: var(--sub-color);
  border-radius: 0.25rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.Timer_progressBar___2Mf_ {
  height: 100%;
  border-radius: 0.25rem;
  transition: width 0.3s ease, background 0.3s ease;
  background: linear-gradient(90deg, var(--accent-color), var(--positive-color));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.Timer_timerText__PezXW {
  display: block;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  height: 2.5rem;
  line-height: 2.5rem;
  min-width: 4rem;
  transition: all 0.2s ease;
  color: var(--text-color);
  font-family: 'Roboto Mono', monospace;
}

.Timer_danger__OzWfQ {
  color: var(--negative-color);
  font-size: 1.75rem;
  animation: Timer_pulse__2KCT8 0.6s infinite alternate;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

@keyframes Timer_pulse__2KCT8 {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  100% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .Timer_timer__viBwW {
    padding: 0 1rem;
    margin-bottom: 0.75rem;
  }
  
  .Timer_timerText__PezXW {
    font-size: 1.1rem;
    height: 2.2rem;
    line-height: 2.2rem;
  }
  
  .Timer_danger__OzWfQ {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .Timer_timer__viBwW {
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  .Timer_timerText__PezXW {
    font-size: 1rem;
    height: 2rem;
    line-height: 2rem;
  }
  
  .Timer_danger__OzWfQ {
    font-size: 1.25rem;
  }
}

.Caret_caret___Pro6 {
  position: absolute;
  width: 0.125rem;
  height: 1.6rem;
  border-radius: 0.0625rem;
  background-color: var(--accent-color);
  top: 0.125rem;
  z-index: 10;
  pointer-events: none;
  animation: Caret_blink__q01ha 1.2s infinite;
  transition: all 0.1s ease-out;
}

@keyframes Caret_blink__q01ha {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.4;
  }
}

/* 平滑光标动画 */
.Caret_caret___Pro6.Caret_smooth__Pop_z {
  transition: transform 0.15s ease-out, opacity 0.1s ease;
}

/* 不同光标样式 */
.Caret_caret___Pro6.Caret_default__KncN_ {
  width: 0.125rem;
  background-color: var(--accent-color);
}

.Caret_caret___Pro6.Caret_block__WQJPV {
  width: 0.75rem;
  opacity: 0.8;
  background-color: var(--accent-color);
}

.Caret_caret___Pro6.Caret_underline__kZOk9 {
  width: 0.75rem;
  height: 0.125rem;
  top: 1.4rem;
  background-color: var(--accent-color);
}

.Caret_caret___Pro6.Caret_outline__251SR {
  width: 0.75rem;
  height: 1.6rem;
  background-color: transparent;
  border: 0.125rem solid var(--accent-color);
}

/* 响应式调整 */
@media (max-width: 600px) {
  .Caret_caret___Pro6 {
    height: 1.4rem;
    top: 0.1rem;
  }
  
  .Caret_caret___Pro6.Caret_underline__kZOk9 {
    top: 1.2rem;
  }
  
  .Caret_caret___Pro6.Caret_outline__251SR {
    height: 1.4rem;
  }
}

.Letter_letter__WRI6M {
  display: inline-block;
  font-size: inherit;
  line-height: 1.6;
  position: relative;
  transition: all 0.1s ease;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: -moz-fit-content;
  min-width: fit-content;
  font-family: inherit;
  letter-spacing: 0;
  width: auto;
  border-radius: 1px;
}

.Letter_waiting__yrnhF {
  color: var(--passive-color);
  opacity: 0.7;
}

.Letter_active__ly7Ut {
  color: var(--active-color);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--active-color);
          text-decoration-color: var(--active-color);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.125rem;
  background: var(--sub-color);
  border-radius: 1px;
  padding: 0.0625rem 0.125rem;
  margin: -0.0625rem -0.125rem;
}

.Letter_correct__Kt_F8 {
  color: var(--positive-color);
  opacity: 0.9;
}

.Letter_incorrect__6bjcx {
  color: var(--negative-color);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--negative-color);
          text-decoration-color: var(--negative-color);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.125rem;
  opacity: 0.8;
}

/* 平滑的字符动画 */
.Letter_active__ly7Ut, .Letter_correct__Kt_F8, .Letter_incorrect__6bjcx {
  animation: Letter_charAppear__z74kP 0.15s ease-out;
}

@keyframes Letter_charAppear__z74kP {
  0% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 错误字符的额外动画 */
.Letter_incorrect__6bjcx {
  animation: Letter_charAppear__z74kP 0.15s ease-out, Letter_shake__EliVU 0.3s ease-in-out;
}

@keyframes Letter_shake__EliVU {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

/* 响应式调整 */
@media (max-width: 600px) {
  .Letter_active__ly7Ut {
    padding: 0.05rem 0.1rem;
    margin: -0.05rem -0.1rem;
  }
}

.Word_word__4BXW_ {
  display: inline-block;
  align-items: center;
  margin: 0;
  margin-right: 0.7rem; /* 增加单词间距，更像Monkeytype */
  padding: 0.1rem 0.2rem; /* 增加单词内边距 */
  font-size: inherit;
  line-height: 1.5; /* 增加行高 */
  white-space: nowrap;
  position: relative;
  transition: all 0.1s ease;
  flex-shrink: 0;
  min-width: 0;
  max-width: none;
  overflow: visible;
  font-family: 'Roboto Mono', 'Courier New', 'Consolas', 'Noto Sans', 'Arial Unicode MS', monospace;
  letter-spacing: 0.02em; /* 增加字符间距 */
  box-sizing: border-box;
  border-radius: 3px; /* 稍微增加圆角 */
  word-break: keep-all;
  -ms-hyphens: none;
      hyphens: none;
}

.Word_word__4BXW_:hover {
  background: var(--sub-alt-color);
  color: var(--text-color) !important;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.Word_passive__A3xos {
  color: var(--passive-color);
  opacity: 0.7;
}

.Word_active__J6_cH {
  color: var(--active-color);
  position: relative;
  background: var(--sub-color);
  border-radius: 2px;
  padding: 0.125rem 0.25rem;
  margin: -0.125rem -0.25rem;
}

.Word_done__Gmwz9 {
  color: var(--positive-color);
  opacity: 0.9;
}

.Word_incorrect__AvLaH {
  color: var(--negative-color);
  text-decoration: line-through;
  -webkit-text-decoration-color: var(--negative-color);
          text-decoration-color: var(--negative-color);
  text-decoration-thickness: 0.125rem;
  opacity: 0.8;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .Word_word__4BXW_ {
    margin-right: 0.4rem;
  }
}

@media (max-width: 900px) {
  .Word_word__4BXW_ {
    margin-right: 0.35rem;
  }
}

@media (max-width: 600px) {
  .Word_word__4BXW_ {
    margin-right: 0.3rem;
  }
  
  .Word_active__J6_cH {
    padding: 0.1rem 0.2rem;
    margin: -0.1rem -0.2rem;
  }
}

@media (max-width: 480px) {
  .Word_word__4BXW_ {
    margin-right: 0.25rem;
  }
}


.WordSet_wordSet__KAM9c {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 auto !important;
  padding: 2.5rem 2rem !important; /* 增加padding，更宽松 */
  max-height: 20rem !important; /* 增加容器高度 */
  overflow: visible !important;
  max-width: 1400px !important; /* 强制最大宽度 */
  width: 98% !important; /* 强制使用更多屏幕宽度 */
  min-height: 12rem !important; /* 增加最小高度 */
  box-sizing: border-box !important;
  position: relative !important;
  background: transparent;
}

.WordSet_wordsContainer__uOq4k {
  display: flex !important;
  flex-direction: column !important; /* 强制列布局 */
  width: 100%;
  height: auto !important; /* 强制auto高度 */
  min-height: 10rem !important; /* 增加最小高度 */
  position: relative !important;
  overflow-x: visible;
  overflow-y: visible;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
  gap: 0.5rem !important; /* 强制行间距 */
  padding: 0.5rem 0 !important; /* 添加垂直padding */
}

.WordSet_wordLine__q6txT {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  min-height: 3.5rem !important; /* 增加行高以适应更大字体 */
  height: auto;
  width: 100%;
  overflow: visible;
  padding: 0.4rem 0 !important; /* 增加垂直padding */
  margin: 0.3rem 0 !important; /* 增加行间距 */
  box-sizing: border-box;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  max-width: 100%;
  word-break: normal;
  min-width: 0;
  line-height: 1.8 !important; /* 增加行高适应更大字体 */
  flex-wrap: nowrap;
  z-index: auto !important;
  transform: none !important;
}

/* 测量容器 */
.WordSet_measureContainer__q09DJ {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

.WordSet_measureContainer__q09DJ .WordSet_word__bnJnh {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  visibility: hidden;
}

/* 响应式设计 - Monkeytype风格 */
@media (max-width: 1200px) {
  .WordSet_wordSet__KAM9c {
    max-width: 1200px;
    padding: 2rem 1.5rem;
    max-height: 18rem;
    width: 90%;
  }
}

@media (max-width: 900px) {
  .WordSet_wordSet__KAM9c {
    max-width: 100%;
    padding: 1.5rem 1rem;
    max-height: 16rem;
    width: 95%;
  }
  
  .WordSet_wordLine__q6txT {
    min-height: 3rem !important;
    line-height: 1.6 !important;
    padding: 0.3rem 0 !important;
  }
}

@media (max-width: 600px) {
  .WordSet_wordSet__KAM9c {
    max-width: 100%;
    padding: 1.2rem 0.8rem;
    max-height: 14rem;
    min-height: 10rem;
    width: 98%;
  }
  
  .WordSet_wordLine__q6txT {
    min-height: 2.5rem !important;
    line-height: 1.4 !important;
    padding: 0.2rem 0 !important;
    margin: 0.2rem 0 !important;
  }
  
  .WordSet_wordsContainer__uOq4k {
    gap: 0.3rem !important;
  }
}

@media (max-width: 480px) {
  .WordSet_wordSet__KAM9c {
    padding: 1rem 0.5rem;
    max-height: 12rem;
    min-height: 8rem;
    width: 100%;
  }
  
  .WordSet_wordLine__q6txT {
    min-height: 2.2rem !important;
    line-height: 1.3 !important;
    padding: 0.15rem 0 !important;
    margin: 0.15rem 0 !important;
  }
}

.TypingModeSelector_typingModeSelector__Gnk9a {
  display: flex;
  align-items: center;
  background: var(--sub-color);
  border: 1px solid var(--sub-alt-color);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 1rem;
  font-size: 14px;
  color: var(--text-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  width: 100%;
  justify-content: space-between;
  position: relative;
  transition: all 0.2s ease;
}

.TypingModeSelector_typingModeSelector__Gnk9a:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: var(--accent-color);
}

.TypingModeSelector_modeGroup__bZlHy {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.TypingModeSelector_modeButton__FDEpT {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 70px;
  justify-content: center;
  opacity: 0.8;
}

.TypingModeSelector_modeButton__FDEpT:hover {
  background: var(--sub-alt-color);
  color: var(--text-color);
  transform: translateY(-1px);
  opacity: 1;
}

.TypingModeSelector_modeButton__FDEpT.TypingModeSelector_active__wLMCz {
  background: var(--accent-color);
  color: var(--background-color);
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.TypingModeSelector_modeIcon__DZOtg {
  font-size: 14px;
  line-height: 1;
}

.TypingModeSelector_modeText__kme_O {
  font-size: 14px;
  font-weight: inherit;
}

.TypingModeSelector_separator__RVdXX {
  width: 1px;
  height: 24px;
  background: var(--sub-alt-color);
  margin: 0 8px;
  flex-shrink: 0;
}

.TypingModeSelector_valueGroup__0xOAH {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.TypingModeSelector_valueButton__d6Akc {
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 40px;
  text-align: center;
  opacity: 0.8;
}

.TypingModeSelector_valueButton__d6Akc:hover {
  background: var(--sub-alt-color);
  color: var(--text-color);
  transform: translateY(-1px);
  opacity: 1;
}

.TypingModeSelector_valueButton__d6Akc.TypingModeSelector_active__wLMCz {
  background: var(--accent-color);
  color: var(--background-color);
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

.TypingModeSelector_customIcon__vL59X {
  font-size: 16px;
  line-height: 1;
}

.TypingModeSelector_customInput__16rFL {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  z-index: 10;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.TypingModeSelector_customInputField__W_iQk {
  flex: 1 1;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--background-color);
  color: var(--text-color);
  font-size: 14px;
  outline: none;
}

.TypingModeSelector_customInputField__W_iQk:focus {
  border-color: var(--active-color);
}

.TypingModeSelector_customSubmitButton__cuREW {
  padding: 6px 10px;
  background: var(--active-color);
  color: var(--background-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.TypingModeSelector_customSubmitButton__cuREW:hover {
  background: var(--positive-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .TypingModeSelector_typingModeSelector__Gnk9a {
    font-size: 13px;
    padding: 2px;
    max-width: 320px;
  }
  
  .TypingModeSelector_modeButton__FDEpT {
    padding: 5px 8px;
    font-size: 13px;
    gap: 3px;
    min-width: 55px;
  }
  
  .TypingModeSelector_modeIcon__DZOtg {
    font-size: 13px;
  }
  
  .TypingModeSelector_modeText__kme_O {
    font-size: 13px;
  }
  
  .TypingModeSelector_valueButton__d6Akc {
    padding: 5px 8px;
    font-size: 13px;
    min-width: 26px;
  }
  
  .TypingModeSelector_separator__RVdXX {
    margin: 0 4px;
    height: 18px;
  }
  
  .TypingModeSelector_customIcon__vL59X {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .TypingModeSelector_typingModeSelector__Gnk9a {
    font-size: 12px;
    padding: 2px;
    max-width: 280px;
  }
  
  .TypingModeSelector_modeButton__FDEpT {
    padding: 4px 6px;
    font-size: 12px;
    gap: 2px;
    min-width: 50px;
  }
  
  .TypingModeSelector_modeIcon__DZOtg {
    font-size: 12px;
  }
  
  .TypingModeSelector_modeText__kme_O {
    font-size: 12px;
  }
  
  .TypingModeSelector_valueButton__d6Akc {
    padding: 4px 6px;
    font-size: 12px;
    min-width: 24px;
  }
  
  .TypingModeSelector_separator__RVdXX {
    margin: 0 3px;
    height: 16px;
  }
  
  .TypingModeSelector_customIcon__vL59X {
    font-size: 12px;
  }
} 
/* 容器样式 */
.AccountSettingsPage_container__xZJwu {
  min-height: 100vh;
  background: var(--background-color);
  color: var(--active-color);
  font-family: 'Azeret Mono', monospace;
  padding: 0;
  margin: 0;
}

.AccountSettingsPage_content__CkzZf {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 20px;
  position: relative;
}

/* 面包屑导航 */
.AccountSettingsPage_breadcrumb__Lyqcr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  font-size: 14px;
  color: var(--passive-color);
}

.AccountSettingsPage_breadcrumbLink__jaHaE {
  display: flex;
  align-items: center;
  color: var(--positive-color);
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 6px;
}

.AccountSettingsPage_breadcrumbLink__jaHaE > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.AccountSettingsPage_breadcrumbLink__jaHaE:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--strong-color);
}

.AccountSettingsPage_breadcrumbIcon__k0g9P {
  font-size: 12px;
}

.AccountSettingsPage_breadcrumbSeparator__jS_fz {
  color: var(--passive-color);
}

.AccountSettingsPage_breadcrumbCurrent__Ec47K {
  color: var(--active-color);
  font-weight: 500;
}

/* 英雄区域 */
.AccountSettingsPage_hero__lTbaI {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px 0;
}

.AccountSettingsPage_title___AoLe {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--positive-color) 0%, var(--strong-color) 50%, var(--main-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

.AccountSettingsPage_subtitle__NfBtw {
  font-size: 1.1rem;
  color: var(--passive-color);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}

/* 设置网格 */
.AccountSettingsPage_settingsGrid__zGFmC {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

/* 设置卡片 */
.AccountSettingsPage_settingCard__sfkSu {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.AccountSettingsPage_settingCard__sfkSu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--positive-color), var(--strong-color));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.AccountSettingsPage_settingCard__sfkSu:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.2);
}

.AccountSettingsPage_settingCard__sfkSu:hover::before {
  transform: scaleX(1);
}

.AccountSettingsPage_settingHeader___UNK7 {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.AccountSettingsPage_settingIcon__yTzso {
  font-size: 24px;
  color: var(--positive-color);
  margin-top: 4px;
  flex-shrink: 0;
}

.AccountSettingsPage_settingInfo__LOabB {
  flex: 1 1;
  min-width: 0;
}

.AccountSettingsPage_settingTitle__jKVS_ {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--active-color);
}

.AccountSettingsPage_settingDescription__aR9M5 {
  font-size: 0.95rem;
  color: var(--passive-color);
  line-height: 1.6;
  margin-bottom: 12px;
}

.AccountSettingsPage_currentValue__sFQA7 {
  font-size: 0.9rem;
  color: var(--passive-color);
  background: rgba(0, 0, 0, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--positive-color);
}

.AccountSettingsPage_currentValue__sFQA7 span {
  color: var(--active-color);
  font-weight: 600;
}

.AccountSettingsPage_settingNote__TBKXn {
  font-size: 0.85rem;
  color: var(--passive-color);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.AccountSettingsPage_settingNote__TBKXn svg {
  color: var(--strong-color);
}

.AccountSettingsPage_settingButton__b2ATy {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--positive-color) 0%, var(--strong-color) 100%);
  color: var(--background-color);
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.AccountSettingsPage_settingButton__b2ATy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--strong-color) 0%, var(--positive-color) 100%);
}

.AccountSettingsPage_settingButton__b2ATy:active {
  transform: translateY(0);
}

/* 安全提示 */
.AccountSettingsPage_securityTips__5gmpw {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 24px;
  margin-top: 20px;
}

.AccountSettingsPage_securityTitle__Tb6Tu {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--positive-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.AccountSettingsPage_securityTitle__Tb6Tu svg {
  color: var(--strong-color);
}

.AccountSettingsPage_securityList__LSH1d {
  list-style: none;
  padding: 0;
  margin: 0;
}

.AccountSettingsPage_securityList__LSH1d li {
  padding: 8px 0;
  color: var(--passive-color);
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  padding-left: 20px;
}

.AccountSettingsPage_securityList__LSH1d li::before {
  content: '•';
  color: var(--positive-color);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* 模态框样式 */
.AccountSettingsPage_modalOverlay__foNfb {
  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: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
  animation: AccountSettingsPage_fadeIn__IP54L 0.3s ease;
}

.AccountSettingsPage_modal__aR3UV {
  background: var(--background-color);
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  animation: AccountSettingsPage_slideUp__gjpyv 0.3s ease;
}

.AccountSettingsPage_modalHeader__n5ayP {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.AccountSettingsPage_modalTitle__ZBHlS {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--active-color);
  display: flex;
  align-items: center;
  gap: 10px;
}

.AccountSettingsPage_modalTitle__ZBHlS svg {
  color: var(--positive-color);
}

.AccountSettingsPage_closeButton__CB__3 {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--passive-color);
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AccountSettingsPage_closeButton__CB__3:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--active-color);
}

.AccountSettingsPage_modalContent__fGF_Q {
  padding: 24px;
}

/* 消息样式 */
.AccountSettingsPage_errorMessage__M42mW {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
  color: var(--negative-color);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.AccountSettingsPage_successMessage__TR6t2 {
  background: rgba(0, 255, 0, 0.1);
  border: 1px solid rgba(0, 255, 0, 0.2);
  color: var(--positive-color);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* 表单样式 */
.AccountSettingsPage_modalForm__0Usns {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.AccountSettingsPage_formGroup__tXBpu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AccountSettingsPage_formGroup__tXBpu label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--active-color);
}

.AccountSettingsPage_formInput__l6eDa {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--background-color);
  color: var(--active-color);
  transition: all 0.3s ease;
  font-family: 'Azeret Mono', monospace;
}

.AccountSettingsPage_formInput__l6eDa:focus {
  outline: none;
  border-color: var(--positive-color);
  box-shadow: 0 0 0 3px rgba(166, 226, 46, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.AccountSettingsPage_formInput__l6eDa::-moz-placeholder {
  color: var(--passive-color);
}

.AccountSettingsPage_formInput__l6eDa:-ms-input-placeholder {
  color: var(--passive-color);
}

.AccountSettingsPage_formInput__l6eDa::placeholder {
  color: var(--passive-color);
}

.AccountSettingsPage_inputError__EJpug {
  border-color: var(--negative-color);
  background: rgba(255, 0, 0, 0.05);
}

.AccountSettingsPage_validationError__qscRc {
  font-size: 0.8rem;
  color: var(--negative-color);
  margin-top: 4px;
}

.AccountSettingsPage_submitButton__3F3gY {
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--positive-color) 0%, var(--strong-color) 100%);
  color: var(--background-color);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
  font-family: 'Azeret Mono', monospace;
}

.AccountSettingsPage_submitButton__3F3gY:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.AccountSettingsPage_submitButton__3F3gY:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, var(--strong-color) 0%, var(--positive-color) 100%);
}

/* 动画 */
@keyframes AccountSettingsPage_fadeIn__IP54L {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes AccountSettingsPage_slideUp__gjpyv {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .AccountSettingsPage_content__CkzZf {
    padding: 20px 16px;
  }
  
  .AccountSettingsPage_title___AoLe {
    font-size: 2.2rem;
  }
  
  .AccountSettingsPage_subtitle__NfBtw {
    font-size: 1rem;
  }
  
  .AccountSettingsPage_settingsGrid__zGFmC {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .AccountSettingsPage_settingCard__sfkSu {
    padding: 20px;
  }
  
  .AccountSettingsPage_modal__aR3UV {
    width: 95%;
    max-height: 95vh;
  }
  
  .AccountSettingsPage_modalHeader__n5ayP {
    padding: 20px 20px 12px;
  }
  
  .AccountSettingsPage_modalContent__fGF_Q {
    padding: 20px;
  }
  
  .AccountSettingsPage_modalTitle__ZBHlS {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .AccountSettingsPage_content__CkzZf {
    padding: 16px 12px;
  }
  
  .AccountSettingsPage_title___AoLe {
    font-size: 1.8rem;
  }
  
  .AccountSettingsPage_hero__lTbaI {
    padding: 30px 0;
    margin-bottom: 30px;
  }
  
  .AccountSettingsPage_settingCard__sfkSu {
    padding: 16px;
  }
  
  .AccountSettingsPage_settingHeader___UNK7 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .AccountSettingsPage_settingIcon__yTzso {
    font-size: 20px;
  }
  
  .AccountSettingsPage_modal__aR3UV {
    width: 98%;
  }
  
  .AccountSettingsPage_modalHeader__n5ayP {
    padding: 16px 16px 8px;
  }
  
  .AccountSettingsPage_modalContent__fGF_Q {
    padding: 16px;
  }
  
  .AccountSettingsPage_formInput__l6eDa {
    padding: 10px 14px;
    font-size: 0.95rem;
  }
  
  .AccountSettingsPage_submitButton__3F3gY {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
} 
/* 触发器按钮 */
.Leaderboard_triggerButton__CjwD_ {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--positive-color) 0%, var(--strong-color) 100%);
  color: var(--background-color);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.Leaderboard_triggerButton__CjwD_:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 对话框样式 */
.Leaderboard_overlay__QGnA3 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  animation: Leaderboard_overlayShow__lzlmZ 0.3s ease;
}

.Leaderboard_content__WPUff {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 1200px;
  max-height: 90vh;
  background: var(--background-color);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1001;
  animation: Leaderboard_contentShow__denZW 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.Leaderboard_header__qWfIQ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.Leaderboard_title__ZQ0Fx {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--active-color);
  margin: 0;
}

.Leaderboard_title__ZQ0Fx svg {
  color: var(--positive-color);
}

.Leaderboard_headerActions__tTCXO {
  display: flex;
  align-items: center;
  gap: 8px;
}

.Leaderboard_refreshButton__6X5_z,
.Leaderboard_filterButton__LZFIo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 8px;
  color: var(--passive-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.Leaderboard_refreshButton__6X5_z:hover,
.Leaderboard_filterButton__LZFIo:hover {
  background: var(--positive-color);
  color: var(--background-color);
}

.Leaderboard_refreshButton__6X5_z:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.Leaderboard_spinning__Gf1b6 {
  animation: Leaderboard_spin__ptHYK 1s linear infinite;
}

@keyframes Leaderboard_spin__ptHYK {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 统计栏 */
.Leaderboard_statsBar__6i80C {
  display: flex;
  justify-content: space-around;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.Leaderboard_stat__sn7r1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--passive-color);
}

.Leaderboard_stat__sn7r1 svg {
  color: var(--strong-color);
}

/* 用户排名信息 */
.Leaderboard_userRankInfo__nCbXI {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(166, 226, 46, 0.1) 0%, rgba(253, 151, 31, 0.1) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 600;
  color: var(--positive-color);
}

.Leaderboard_userRankInfo__nCbXI svg {
  color: var(--strong-color);
}

/* 标签页样式 */
.Leaderboard_tabsList__JeIdD {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.Leaderboard_tab__1j_46 {
  flex: 1 1;
  padding: 16px 24px;
  background: none;
  border: none;
  color: var(--passive-color);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 3px solid transparent;
}

.Leaderboard_tab__1j_46[data-state="active"] {
  color: var(--positive-color);
  border-bottom-color: var(--positive-color);
  background: rgba(0, 0, 0, 0.03);
}

.Leaderboard_tab__1j_46:hover {
  color: var(--active-color);
  background: rgba(0, 0, 0, 0.05);
}

.Leaderboard_tabContent___xUXi {
  flex: 1 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 错误和加载消息 */
.Leaderboard_errorMessage__0ErhJ {
  padding: 16px 24px;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
  color: var(--negative-color);
  margin: 16px 24px;
  border-radius: 8px;
  font-size: 14px;
}

.Leaderboard_loadingMessage__voZB3 {
  padding: 40px 24px;
  text-align: center;
  color: var(--passive-color);
  font-size: 16px;
}

/* 表格容器 */
.Leaderboard_tableWrapper__VJgux {
  flex: 1 1;
  overflow: auto;
  padding: 0 24px;
}

.Leaderboard_tableWrapper__VJgux::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.Leaderboard_tableWrapper__VJgux::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.Leaderboard_tableWrapper__VJgux::-webkit-scrollbar-thumb {
  background: var(--passive-color);
  border-radius: 4px;
}

/* 表格样式 */
.Leaderboard_leaderboard__LPUjY {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background: var(--background-color);
}

.Leaderboard_leaderboard__LPUjY th {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 2px solid var(--passive-color);
  color: var(--active-color);
  font-weight: 600;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.02);
}

.Leaderboard_leaderboard__LPUjY td {
  padding: 12px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  vertical-align: middle;
}

.Leaderboard_leaderboard__LPUjY tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* 特殊单元格样式 */
.Leaderboard_rankCell__fnJla,
.Leaderboard_userCell__Lf3As {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.Leaderboard_wpmCell__zPSaD {
  font-weight: 600;
  color: var(--positive-color);
}

.Leaderboard_accuracyCell__l6xol {
  font-weight: 500;
  color: var(--strong-color);
}

.Leaderboard_dateCell__7_QfH {
  color: var(--passive-color);
  font-size: 12px;
}

/* 头像样式 */
.Leaderboard_avatar__gk5k1,
.Leaderboard_defaultAvatar__yUZtT {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  font-size: 16px;
  color: var(--passive-color);
}

/* 皇冠样式 */
.Leaderboard_goldCrown__rQZdf {
  color: #FFD700;
  font-size: 16px;
}

.Leaderboard_silverCrown__4_sto {
  color: #C0C0C0;
  font-size: 16px;
}

.Leaderboard_bronzeCrown__XwGzh {
  color: #CD7F32;
  font-size: 16px;
}

/* 分页样式 */
.Leaderboard_pagination__cGYmG {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.Leaderboard_pageButton__fAPlY {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: var(--active-color);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.Leaderboard_pageButton__fAPlY:hover:not(:disabled) {
  background: var(--positive-color);
  color: var(--background-color);
  border-color: var(--positive-color);
}

.Leaderboard_pageButton__fAPlY:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.Leaderboard_pageInfo__aztdZ {
  font-size: 14px;
  color: var(--passive-color);
}

/* 更新信息 */
.Leaderboard_updateInfo__4QIHl {
  padding: 12px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--passive-color);
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 关闭按钮 */
.Leaderboard_closeButton__ton7D {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--passive-color);
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.Leaderboard_closeButton__ton7D:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--active-color);
}

/* 动画 */
@keyframes Leaderboard_overlayShow__lzlmZ {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes Leaderboard_contentShow__denZW {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .Leaderboard_content__WPUff {
    width: 95vw;
    max-height: 95vh;
  }

  .Leaderboard_header__qWfIQ {
    padding: 16px 20px;
  }

  .Leaderboard_title__ZQ0Fx {
    font-size: 1.2rem;
  }

  .Leaderboard_statsBar__6i80C {
    padding: 12px 20px;
    flex-direction: column;
    gap: 8px;
  }

  .Leaderboard_stat__sn7r1 {
    justify-content: center;
  }

  .Leaderboard_userRankInfo__nCbXI {
    padding: 8px 20px;
    font-size: 12px;
  }

  .Leaderboard_tab__1j_46 {
    padding: 12px 16px;
    font-size: 12px;
  }

  .Leaderboard_tableWrapper__VJgux {
    padding: 0 20px;
  }

  .Leaderboard_leaderboard__LPUjY th,
  .Leaderboard_leaderboard__LPUjY td {
    padding: 8px 12px;
    font-size: 12px;
  }

  .Leaderboard_avatar__gk5k1,
  .Leaderboard_defaultAvatar__yUZtT {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .Leaderboard_pagination__cGYmG {
    padding: 16px 20px;
    gap: 12px;
  }

  .Leaderboard_pageButton__fAPlY {
    padding: 6px 12px;
    font-size: 12px;
  }

  .Leaderboard_updateInfo__4QIHl {
    padding: 8px 20px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .Leaderboard_content__WPUff {
    width: 98vw;
    max-height: 98vh;
  }

  .Leaderboard_header__qWfIQ {
    padding: 12px 16px;
  }

  .Leaderboard_title__ZQ0Fx {
    font-size: 1rem;
  }

  .Leaderboard_headerActions__tTCXO {
    gap: 4px;
  }

  .Leaderboard_refreshButton__6X5_z,
  .Leaderboard_filterButton__LZFIo,
  .Leaderboard_closeButton__ton7D {
    width: 32px;
    height: 32px;
  }

  .Leaderboard_statsBar__6i80C {
    padding: 8px 16px;
  }

  .Leaderboard_userRankInfo__nCbXI {
    padding: 6px 16px;
    font-size: 11px;
  }

  .Leaderboard_tab__1j_46 {
    padding: 8px 12px;
    font-size: 11px;
  }

  .Leaderboard_tableWrapper__VJgux {
    padding: 0 16px;
  }

  .Leaderboard_leaderboard__LPUjY th,
  .Leaderboard_leaderboard__LPUjY td {
    padding: 6px 8px;
    font-size: 11px;
  }

  .Leaderboard_pagination__cGYmG {
    padding: 12px 16px;
    gap: 8px;
  }

  .Leaderboard_pageButton__fAPlY {
    padding: 4px 8px;
    font-size: 11px;
  }

  .Leaderboard_updateInfo__4QIHl {
    padding: 6px 16px;
    font-size: 10px;
  }
}
.ChallengeOverlay_overlay__MY_af {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: ChallengeOverlay_fadeIn__Fy4XZ 0.2s ease-out;
}

.ChallengeOverlay_content__G_4ab {
  background: #2a2a3e;
  border-radius: 16px;
  width: 90%;
  max-width: 480px;
  padding: 0;
  color: white;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: ChallengeOverlay_slideUp__ZJrOL 0.3s ease-out;
  border: 2px solid #4f46e5;
}

.ChallengeOverlay_header__Y_xgK {
  padding: 20px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(79, 70, 229, 0.08));
}

.ChallengeOverlay_header__Y_xgK h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.ChallengeOverlay_closeButton__q91bB {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #a0a0a0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ChallengeOverlay_closeButton__q91bB:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.ChallengeOverlay_body__NmiqV {
  padding: 32px;
  text-align: center;
}

.ChallengeOverlay_icon__N4nD3 {
  font-size: 48px;
  margin-bottom: 16px;
}

.ChallengeOverlay_body__NmiqV h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: white;
}

.ChallengeOverlay_body__NmiqV p {
  margin: 0 0 24px;
  color: #a0a0a0;
}

.ChallengeOverlay_stats__t8duF {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 32px;
}

.ChallengeOverlay_stat__e4O4s {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ChallengeOverlay_stat__e4O4s span {
  font-size: 0.75rem;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ChallengeOverlay_stat__e4O4s strong {
  font-size: 1rem;
  color: white;
}

.ChallengeOverlay_startButton__5xLN_ {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border: none;
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.ChallengeOverlay_startButton__5xLN_:hover {
  transform: translateY(-2px);
}

@keyframes ChallengeOverlay_fadeIn__Fy4XZ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ChallengeOverlay_slideUp__ZJrOL {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.DailyChallengeButton_button__lSNLd {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.05));
  border: 1px solid rgba(79, 70, 229, 0.2);
  color: #4f46e5;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.DailyChallengeButton_button__lSNLd:hover {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.15), rgba(79, 70, 229, 0.1));
  border-color: rgba(79, 70, 229, 0.3);
  transform: translateY(-1px);
}

.DailyChallengeButton_icon__CwvrE {
  font-size: 1rem;
  color: #4f46e5;
}

.ChallengeSuccessModal_overlay__IsMU_ {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: ChallengeSuccessModal_fadeIn__Rwx5S 0.3s ease-out;
}

.ChallengeSuccessModal_modal__M4ygd {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 24px;
  padding: 48px 32px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  color: white;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  animation: ChallengeSuccessModal_bounceIn__Jbaid 0.6s ease-out;
  overflow: hidden;
}

.ChallengeSuccessModal_fireworks__2zr8M {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.ChallengeSuccessModal_firework__2VRRl {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #FFD700;
  border-radius: 50%;
  animation: ChallengeSuccessModal_explode__tkDYp 2s ease-out infinite;
}

.ChallengeSuccessModal_firework__2VRRl:nth-child(1) {
  top: 20%;
  left: 20%;
  animation-delay: 0s;
}

.ChallengeSuccessModal_firework__2VRRl:nth-child(2) {
  top: 30%;
  right: 25%;
  animation-delay: 0.5s;
}

.ChallengeSuccessModal_firework__2VRRl:nth-child(3) {
  top: 40%;
  left: 50%;
  animation-delay: 1s;
}

.ChallengeSuccessModal_content__hBs_w {
  position: relative;
  z-index: 1;
}

.ChallengeSuccessModal_icon__cvoTD {
  font-size: 4rem;
  margin-bottom: 16px;
  animation: ChallengeSuccessModal_bounce__kGN8Z 1s ease-out infinite alternate;
}

.ChallengeSuccessModal_title__LQGwE {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.ChallengeSuccessModal_subtitle__Qypqq {
  font-size: 1.1rem;
  margin: 0 0 32px 0;
  opacity: 0.9;
}

.ChallengeSuccessModal_stats__TJiau {
  display: flex;
  justify-content: space-around;
  margin-bottom: 32px;
  gap: 16px;
}

.ChallengeSuccessModal_stat__UW537 {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 16px 12px;
  border-radius: 12px;
  flex: 1 1;
  backdrop-filter: blur(10px);
}

.ChallengeSuccessModal_statLabel__XmMne {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ChallengeSuccessModal_statValue__fYS__ {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFD700;
}

.ChallengeSuccessModal_reward__X8AtC {
  background: rgba(255, 215, 0, 0.2);
  border: 2px solid rgba(255, 215, 0, 0.5);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ChallengeSuccessModal_rewardIcon__p1p1B {
  font-size: 2rem;
  animation: ChallengeSuccessModal_spin__EJ_Rw 2s linear infinite;
}

.ChallengeSuccessModal_rewardText__0AVnE {
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFD700;
}

.ChallengeSuccessModal_closeButton__72U7N {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 32px;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.ChallengeSuccessModal_closeButton__72U7N:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

@keyframes ChallengeSuccessModal_fadeIn__Rwx5S {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ChallengeSuccessModal_bounceIn__Jbaid {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(0);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ChallengeSuccessModal_bounce__kGN8Z {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

@keyframes ChallengeSuccessModal_explode__tkDYp {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes ChallengeSuccessModal_spin__EJ_Rw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.Home_container__bCOhY {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background-color);
  color: var(--text-color);
}

.Home_test__ZUjsM {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  max-width: 1600px; /* 增加父容器宽度 */
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: 60vh;
}

/* 打字区域容器 */
.Home_typingContainer__1E5xH {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1500px; /* 大幅增加打字容器宽度 */
  margin: 0 auto;
  position: relative;
}

/* 输入框样式优化 */
.Home_input__ZarWZ {
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

/* 刷新按钮优化 */
.Home_refreshButton__N0QXD {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 1.5rem auto 0;
  background: var(--sub-color);
  border: 2px solid var(--sub-alt-color);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  color: var(--text-color);
}

.Home_refreshButton__N0QXD:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.Home_refreshButton__N0QXD:active {
  transform: scale(0.95);
}

.Home_refreshButton__N0QXD svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.Home_refreshButton__N0QXD:hover svg {
  transform: rotate(180deg);
}

/* 自定义提示样式 */
.Home_refreshButton__N0QXD[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 8px;
  background-color: var(--strong-color);
  color: var(--background-color);
  border: 1px solid var(--accent-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: Home_tooltipFadeIn__cnzjk 0.2s ease-in-out;
}

@keyframes Home_tooltipFadeIn__cnzjk {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .Home_test__ZUjsM {
    padding: 1.5rem 0.5rem;
    min-height: 50vh;
  }
  
  .Home_typingContainer__1E5xH {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .Home_refreshButton__N0QXD {
    width: 36px;
    height: 36px;
    margin: 1rem auto 0;
  }
  
  .Home_refreshButton__N0QXD svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .Home_test__ZUjsM {
    padding: 1rem 0.25rem;
  }
  
  .Home_typingContainer__1E5xH {
    padding: 0 0.5rem;
  }
}

/* 每日挑战模式样式 */
.Home_challengeModeNotice__ctbYp {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  animation: Home_slideInDown__sG6e1 0.5s ease-out;
}

@keyframes Home_slideInDown__sG6e1 {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.Home_challengeInfo__IL_Iu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.Home_challengeInfo__IL_Iu span {
  font-weight: 600;
  font-size: 16px;
}

.Home_exitChallengeButton__qU71y {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.Home_exitChallengeButton__qU71y:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .Home_challengeInfo__IL_Iu {
    flex-direction: column;
    text-align: center;
  }
  
  .Home_challengeInfo__IL_Iu span {
    font-size: 14px;
  }
}