.GameLoginPage_loginPage__9NBEj {
    position: relative;
    width: 100%;
    height: 100svh;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: 100svh;
    padding: 20px;
    background: url(/static/media/bg-login.a98d0fd36f0c62f2a255.jpg) no-repeat center center;
    background-size: cover;
}
.GameLoginPage_topArea__8t6eF {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
}
.GameLoginPage_gameLogo__5GQo8 img {
    display: block;
    width: clamp(180px, 16vw, 320px);
    height: auto;
    margin: 0 auto;
}
.GameLoginPage_policy__8W\+dK {
    color: #abaac0;
    text-align: center;
    font-size: 0.8125em;
    width: clamp(320px, 40vw, 580px);
    margin: 0 auto;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    /* backdrop-filter: blur(5px); */
    border-radius: 16px;
}
.GameLoginPage_policy__8W\+dK h2 {
    font-weight: bold;
    font-size: 0.9375rem;
}
.GameLoginPage_footer__rzxSp {
    color: #ffffff74;
    text-align: center;
    font-size: 0.8125em;
}
.GameLoginPage_footer__rzxSp a {
    color: #fff;
}
/* 
.gameLogo {
    margin-bottom: 2rem;
}

.gameLogo h1 {
    font-size: 3rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.gameLogo p {
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 1rem;
}

.gameLogo img {
    display: block;
    width: clamp(180px, 20vw, 360px);
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.loginContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
} */

.GameLoginPage_login__uoVn7 {
    width: 100%;
    width: -webkit-max-content;
    width: max-content;
}

.styled-input {
    padding: 10px;            /* 設定內距 */
    border-radius: 8px;       /* 設定圓角 */
    border: 1px solid #ccc;   /* 設定邊框顏色和大小 */
    margin-top: 10px;         /* 設定與上個元素的距離 */
    width: 30%;              /* 設定寬度為父元素的100% */
    box-sizing: border-box;   /* border 和 padding 包含在 width 內 */
    background-color: white;  /* 設定背景顏色為白色 */
  }
  
.Overlay_loading__-5sAT {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: radial-gradient(circle, rgba(32, 32, 32, 0.3) 20%, #000 90%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.Overlay_active__ClIjd {
  opacity: 1;
  pointer-events: auto;
}

.Overlay_dialogueContainer__GpVGH {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Overlay_loadingContainer__pwg6Q {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

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

.Overlay_loadingText__pJilJ i {
  display: block;
  text-transform: uppercase;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 2vh, 20px);
  text-align: center;
  text-shadow: #fff 0px 0px 5px, #5b4d2c 0px 0px 10px, #8d7847 0px 0px 15px,
    #f6db9c 0px 0px 20px, #f6db9c 0px 0px 30px, #bca46a 0px 0px 40px,
    #a28540 0px 0px 50px, #9d8752 0px 0px 75px;
  color: #d2c29c;
  animation: Overlay_blink__U87zM 3s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  margin: 0 0.5em;
}

@media (min-width: 980px) {
  .Overlay_loadingText__pJilJ i {
    font-size: clamp(16px, 3vh, 64px);
  }
}

.Overlay_loadingText__pJilJ i:nth-of-type(1) {
  animation-delay: 0s;
}
.Overlay_loadingText__pJilJ i:nth-of-type(2) {
  animation-delay: 0.2s;
}
.Overlay_loadingText__pJilJ i:nth-of-type(3) {
  animation-delay: 0.4s;
}
.Overlay_loadingText__pJilJ i:nth-of-type(4) {
  animation-delay: 0.6s;
}
.Overlay_loadingText__pJilJ i:nth-of-type(5) {
  animation-delay: 0.8s;
}
.Overlay_loadingText__pJilJ i:nth-of-type(6) {
  animation-delay: 1s;
}
.Overlay_loadingText__pJilJ i:nth-of-type(7) {
  animation-delay: 1.2s;
}

.Overlay_smallText__utW8Z {
  display: block;
  margin-top: 1em;
  font-size: 14px;
  opacity: 0.8;
  letter-spacing: 5px;
  font-weight: lighter;
  text-shadow: 1px 1px 2px #000000be;
  font-weight: normal;
  color: #bca46a;
}

@keyframes Overlay_blink__U87zM {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

.TalkGame_gameMainArea__o7rk5 {
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.TalkGame_container__GJt\+4 {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 0 200px;
    height: 100%;
}

.TalkGame_effectContainer__KDqwJ {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}
.TalkGame_sendingIndicator__1kPPA {
    position: fixed;
    bottom: 240px; /* V1_5: 調整位置，在 UserChatItem (bottom: 120px) 上方 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 12px 24px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-style: italic;
    z-index: 101;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

/* V1_5: 動態點點點效果 */
.TalkGame_sendingIndicator__1kPPA .TalkGame_dots__YI4Ky {
    display: inline-block;
    margin-left: 2px;
}

.TalkGame_sendingIndicator__1kPPA .TalkGame_dots__YI4Ky .TalkGame_dot__\+5uz7 {
    display: inline-block;
    animation: TalkGame_dotPulse__zoMQw 1.4s ease-in-out infinite;
    opacity: 0.3;
}

.TalkGame_sendingIndicator__1kPPA .TalkGame_dots__YI4Ky .TalkGame_dot__\+5uz7:nth-child(1) {
    animation-delay: 0s;
}

.TalkGame_sendingIndicator__1kPPA .TalkGame_dots__YI4Ky .TalkGame_dot__\+5uz7:nth-child(2) {
    animation-delay: 0.2s;
}

.TalkGame_sendingIndicator__1kPPA .TalkGame_dots__YI4Ky .TalkGame_dot__\+5uz7:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes TalkGame_dotPulse__zoMQw {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@media (min-width: 0px) and (max-width: 700px) {
    .TalkGame_container__GJt\+4 {
        justify-content: flex-start;
        padding: 120px 0 200px;
    }
}

.BotChatItem_chatItem__SYt3Z {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 10px;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    align-items: center;
    /* margin-top: 15vh; */
}

.BotChatItem_chatItem__SYt3Z.BotChatItem_active__L6U4I {
    transform: scale(1);
    opacity: 1;
}

.BotChatItem_chatItemContainer__5FMYA {
    display: flex;
    align-items: flex-start;
    gap: 0;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0.85) 100%); */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 40px;
    padding: 25px 25px 25px 200px;
    position: relative;
    /* width: 800px; */
    margin-left: 0;
    box-sizing: border-box;
    background: var(--bg-game-chat);
    /* 加入藍色邊緣發光效果 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(89, 107, 177, 0.08);
    width: clamp(640px, 70vw, 1100px);
    min-height: 250px;
}

.BotChatItem_avatar__psw3U {
    width: 180px;
    height: 180px;
    position: relative;
    flex-shrink: 0;
    border-radius: 30px;
    z-index: 1;
    overflow: hidden;
    position: absolute;
    left: 25px;
    top: -35px;
    border: 2px solid rgba(129, 150, 234, 0.7);
    box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    background: linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: BotChatItem_avatarHighlight__7LtCP 2s linear infinite;
}
@media (min-width: 1600px) and (min-height: 800px) {
    .BotChatItem_avatar__psw3U {
        width: 220px;
        height: 220px;
    }
    .BotChatItem_chatItemContainer__5FMYA {
        border-radius: 50px;
        padding: 25px 25px 25px 250px;
    }
}

@keyframes BotChatItem_avatarHighlight__7LtCP {
    0% {
        border: 1px solid rgba(129, 150, 234, 0.7);
        box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    }
    50% {
        border: 1px solid rgba(236, 240, 255, 0.7);
        box-shadow: 0 0 20px rgba(177, 193, 255, 0.8), inset 0 0 30px rgba(149, 78, 237, 0.05), inset 0 0 20px rgba(137, 109, 199, 0.8);
    }
    100% {
        border: 1px solid rgba(129, 150, 234, 0.7);
        box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    }
}
.BotChatItem_img__bZLAk {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* border-radius: 12px;
    border: 2px solid #bca46a;
    box-shadow: rgba(0, 0, 0, 0.5) -3px 7px 20px 0px; */
}

.BotChatItem_name__Maian {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    white-space: nowrap;
    z-index: 6;
}

.BotChatItem_content__8-UKd {
    flex: 1 1;
    min-width: 0;
    font-size: 1em;
    line-height: 1.25;
    color: #fff;
    padding: 0 0 0 40px;
    z-index: 2;
    font-family: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial;
}
.BotChatItem_content__8-UKd p,
.BotChatItem_content__8-UKd li {
    font-size: clamp(17px, 2.5vh, 30px);
}
.BotChatItem_translate__eXNjp {
    display: none;
    margin-top: 10px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;

    color: #9ce4ff;
}
.BotChatItem_content__8-UKd .BotChatItem_translate__eXNjp p {
    font-size: 1em;
}

.BotChatItem_translate__eXNjp.BotChatItem_active__L6U4I {
    display: block;
}

.BotChatItem_left__r3Uf1 {
    display: flex;
    align-items: center;
    gap: 5px;
}
.BotChatItem_left__r3Uf1 .BotChatItem_btn__Cgo7o.BotChatItem_--white__qY6S6 {
    color: #b8aeff;
}
.BotChatItem_right__jKwRZ {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.BotChatItem_btnWhite__XYtV4 {
    /* background-color: #0c243edb; */
    background-color: #0c243eac;
    color: #b8aeff;
    padding: 0 12px;
    border-radius: 20px;
    height: 32px;
    cursor: pointer;
    font-size: 0.8125em;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    /* border: 1px solid #7f93d56d; */

    font-family: var(--font-default);
    font-weight: 500;
    min-width: -webkit-fit-content;
    min-width: fit-content;
    position: relative;
    overflow: hidden;
    /* border: 2px solid transparent; */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.BotChatItem_btnWhite__XYtV4 .imrs-icon {
}
.BotChatItem_btnWhite__XYtV4 .imrs-icon:before {
    width: 18px;
    height: 18px;
    background-color: #b8aeff;
}
.BotChatItem_btnWhite__XYtV4 .imrs-icon + span {
    margin: 3px 0 0 3px;
}
.BotChatItem_btnWhite__XYtV4:before {
    content: "";
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    background-color: transparent;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.BotChatItem_btnSystemSound__o6pev {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.BotChatItem_audioCtrl__tMycG {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.BotChatItem_play__8pB9r {
    display: flex;
    align-items: center;
    gap: 5px;
}
.BotChatItem_btnSystemSound__o6pev:hover {
    background: rgba(255, 255, 255, 0.2);
}
@media (min-width: 701px) {
    .BotChatItem_left__r3Uf1 {
        gap: 10px;
    }
}
@media (min-width: 1400px) and (min-height: 800px) {
    .BotChatItem_btnWhite__XYtV4 {
        height: 40px;
        font-size: 1em;
        padding-left: 20px;
        padding-right: 20px;
    }
    .BotChatItem_btnWhite__XYtV4 .imrs-icon:before {
        width: 22px;
        height: 22px;
    }
}
@media (hover: hover) {
    .BotChatItem_btnWhite__XYtV4:hover {
        background-color: #5d33db96;
        color: #fff;
        transform: scale(1.05);
        border-color: #baa3ff96;
        /* background: #fff;
        border-color: #4c33ad; */
    }
    .BotChatItem_btnWhite__XYtV4:hover .BotChatItem_icon__b4erC {
        background-color: #fff;
        transform: scale(1.1);
    }
}
@media (hover: none) {
    .BotChatItem_btnWhite__XYtV4:hover {
        background-color: #3b1587ae;
        color: #fff;
    }
    .BotChatItem_btnWhite__XYtV4:hover .BotChatItem_icon__b4erC {
        background-color: #fff;
    }
}
.BotChatItem_chatFnBar__hK8m7 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    position: absolute;
    top: -6px;
    right: 20px;
    z-index: 10;
    /* gap: 6px;
    background-color: rgba(18, 21, 36, 0.8); */
    transform: translate(0, -100%);
    /* padding: 6px; */
    /* border-radius: 40px; */
    /* backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); */
}

.BotChatItem_chatFnBar__hK8m7.BotChatItem_disabled__\+5ToW {
    pointer-events: none;
}
.BotChatItem_chatFnBar__hK8m7.BotChatItem_disabled__\+5ToW .BotChatItem_btnWhite__XYtV4 {
    opacity: 0.1;
}
@media (min-width: 0px) and (max-width: 700px) {
    .BotChatItem_chatFnBar__hK8m7 {
        right: 0;
    }
}
@media (min-width: 1600px) and (min-height: 800px) {
    .BotChatItem_chatFnBar__hK8m7 {
        top: -8px;
    }
}
/* @media (max-width: 1200px) {
    .chatItemContainer {
        width: 700px;
    }
}

@media (max-width: 992px) {
    .chatItemContainer {
        width: 600px;
    }
} */

/* @media (min-width: 1600px) and (min-height: 800px) {
   
} */

@media (max-width: 700px) {
    .BotChatItem_chatItemContainer__5FMYA {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        padding: 30px 15px 20px;
        min-height: 200px;
        /* background-color: #fff; */
        /* background: initial;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.95) 100%);
        padding: 20px; */
        border-radius: 0;
        border-radius: initial;
    }

    .BotChatItem_avatar__psw3U {
        width: 90px;
        height: 90px;
        border-radius: 20px;
        margin: 0;
        position: absolute;
        overflow: hidden;
        left: 15px;
        top: 0;
        transform: translate(0, -66px);
    }

    .BotChatItem_content__8-UKd {
        font-size: 1em;
        line-height: 1.25;
        padding: 0;
    }

    /* .chatItem {
        margin-top: clamp(100px, 15vh, 300px);
    } */

    .BotChatItem_name__Maian {
        font-size: 1em;
        padding: 4px 12px;
    }

    .BotChatItem_chatFnBar__hK8m7 {
        /* top: 0;
        right: 0; */
        padding-left: 15px;
        padding-right: 15px;
        border-radius: 15px 0 0 0;
    }

    /* .btnWhite {
        padding: 4px 10px;
        font-size: 0.8em;
    } */
}
/*手機*/
@media (min-width: 0px) and (max-width: 700px) and (orientation: portrait) {
    .BotChatItem_name__Maian {
        font-size: 11px;
    }
}
/* 其他bot chat相關樣式... */

.--story-mode .BotChatItem_chatFnBar__hK8m7 {
    display: none;
}
/* :global(.--story-mode) .chatItem {
    margin-top: clamp(60px, 8vh, 200px);
} */

.--story-mode .BotChatItem_chatItemContainer__5FMYA {
    background: none;
    backdrop-filter: initial;
    -webkit-backdrop-filter: initial;
    padding: 20px;
    box-shadow: none;
    box-shadow: initial;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.--story-mode .BotChatItem_chatItemContainer__5FMYA .BotChatItem_avatar__psw3U {
    width: 25vh;
    height: 25vh;
    position: relative;
    margin: 0 auto clamp(40px, 4vh, 70px);
    transform: none;
    overflow: visible;
    border: medium none currentColor;
    border: initial;
    box-shadow: none;
    box-shadow: initial;
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    animation: none;
    backdrop-filter: initial;
    -webkit-backdrop-filter: initial;
    left: auto;
    left: initial;
    isolation: isolate;
}
.--story-mode .BotChatItem_chatItemContainer__5FMYA .BotChatItem_avatar__psw3U .BotChatItem_name__Maian {
    transform: translate(-50%, 110%);
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    color: #dbd3c1;
    font-weight: normal;
}
.--story-mode .BotChatItem_chatItemContainer__5FMYA .BotChatItem_avatar__psw3U:before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(1, 11, 20, 0.8),
        /* 半透明深空黑 */ rgba(15, 36, 71, 0.7),
        /* 柔和星夜藍 */ rgba(26, 58, 108, 0.6),
        /* 淡星雲藍 */ rgba(44, 13, 79, 0.5),
        /* 柔和深紫星雲 */ rgba(74, 28, 110, 0.5),
        /* 淡星際紫 */ rgba(123, 107, 143, 0.7),
        /* 柔和星塵紫 */ rgba(192, 171, 142, 0.8),
        /* 柔和星光金 */ rgba(70, 60, 41, 0.5),
        /* 淡隕石棕 */ rgba(29, 91, 138, 0.6),
        /* 柔和星河藍 */ rgba(10, 45, 82, 0.7),
        /* 淡深海藍 */ rgba(91, 136, 165, 0.6),
        /* 柔和星雲青 */ rgba(146, 127, 90, 0.5),
        /* 淡星塵金 */ rgba(212, 196, 168, 0.7),
        /* 柔和星光銀 */ rgba(46, 26, 71, 0.7),
        /* 柔和暗物質紫 */ rgba(1, 11, 20, 0.8)
    );
    animation: BotChatItem_rotateAura__i6J8T 8s linear infinite, BotChatItem_pulseAura__rYRiD 2s ease-in-out infinite;
    filter: blur(10px) brightness(1.4);
    z-index: -1;
}
.--story-mode .BotChatItem_chatItemContainer__5FMYA .BotChatItem_avatar__psw3U:after {
    content: "";
    position: absolute;
    width: 140%;
    height: 140%;
    top: -20%;
    left: -20%;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        #020202,
        /* 深邃的黑色，作為基礎 */ #3c3b3b,
        /* 中性的黑褐色，增加深度 */ #a3835b,
        /* 金屬銅棕色，展現奢華 */ #5b4b32,
        /* 柔和的金色，增添亮度 */ #a3835b,
        /* 重複的金屬銅棕色，創造平衡 */ #21201e,
        /* 重複的黑褐色，平滑過渡 */ #a3835b,
        /* 回到深邃的黑色，保持一致性 */ #a3835b,
        #020202
    );
    animation: BotChatItem_rotateAuraReverse__d\+V-W 10s linear infinite, BotChatItem_pulseAura__rYRiD 3s ease-in-out infinite;
    filter: blur(10px);
    z-index: -2;
}

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

@keyframes BotChatItem_rotateAuraReverse__d\+V-W {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes BotChatItem_pulseAura__rYRiD {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}
.--story-mode .BotChatItem_chatItemContainer__5FMYA .BotChatItem_avatar__psw3U .BotChatItem_img__bZLAk {
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    z-index: 3;
    border: 2px solid rgba(129, 150, 234, 0.7);
    box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    /* background: linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%); */

    animation: BotChatItem_avatarHighlight__7LtCP 2s linear infinite;
    /* background-size: contain; */
}
.--story-mode .BotChatItem_content__8-UKd {
    color: #fff;
    font-size: 1em;
}
.--story-mode .BotChatItem_content__8-UKd p {
    font-size: clamp(20px, 3vh, 48px);
    line-height: 1.3;
}

/* 隱藏頭像模式（劇情選擇 + 背景圖片） */
.BotChatItem_hideAvatar__6OJqZ .BotChatItem_chatItemContainer__5FMYA {
    padding: 25px;
    background: none;
    backdrop-filter: initial;
    -webkit-backdrop-filter: initial;
    box-shadow: none;
    box-shadow: initial;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.BotChatItem_hideAvatar__6OJqZ .BotChatItem_content__8-UKd {
    padding: 0;
    text-align: center;
    width: 100%;
}

.BotChatItem_hideAvatar__6OJqZ .BotChatItem_content__8-UKd p {
    font-size: clamp(20px, 3vh, 48px);
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1600px) and (min-height: 800px) {
    .BotChatItem_hideAvatar__6OJqZ .BotChatItem_chatItemContainer__5FMYA {
        padding: 30px;
    }
}

@media (max-width: 700px) {
    .BotChatItem_hideAvatar__6OJqZ .BotChatItem_chatItemContainer__5FMYA {
        padding: 20px 15px;
    }
    
    .BotChatItem_hideAvatar__6OJqZ .BotChatItem_content__8-UKd p {
        font-size: clamp(18px, 2.5vh, 36px);
    }
}

/* 移除 questionImage 相關樣式，因為我們現在使用與 avatar 相同的樣式 */
.BotChatItem_questionImage__B8zXJ {
    width: 100%;
}

.BotChatItem_questionImageFrame__3Z7pB {
}
.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_chatItemContainer__5FMYA {
    padding: 0;
    overflow: hidden;
    flex-direction: column;
}
@media screen and (min-width: 980px) {
    .BotChatItem_questionImageFrame__3Z7pB .BotChatItem_chatItemContainer__5FMYA {
        width: clamp(500px, 90vh, 1100px);
        padding: 0;
    }
}

.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_chatFnBar__hK8m7 {
    right: auto;
    right: initial;
    left: 50%;
    top: 0;
    z-index: 10;
    transform: translate(-50%, -50%);
    padding: 0;
    border-radius: 0;
    border-radius: initial;
    justify-content: center;
}
.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_content__8-UKd {
    isolation: isolate;
    /* position: absolute; */
    left: 0;
    bottom: 0;
    padding: 40px 30px 30px;
    width: 100%;
    position: relative;
}

.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_content__8-UKd:after {
    content: "";
    display: block;
    width: 50%;
    background-color: #ca98ff98;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 0;
    border-radius: 50%;
    filter: blur(25px);
    transform: translate(-50%, -50%);
}
@media (min-width: 0px) and (max-width: 980px) and (orientation: portrait) {
    .BotChatItem_questionImageFrame__3Z7pB .BotChatItem_content__8-UKd {
        padding: 30px 10px 20px;
    }
}
/* .questionImageFrame .content::before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    height: 40px;
    background: linear-gradient(to right, #fbf1e9, #d2eaf5); 
    left: 0;
    top: 0;
} */
.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_content__8-UKd p,
.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_content__8-UKd li {
    font-size: clamp(17px, 1.75vh, 24px);
}
.BotChatItem_questionImageFrame__3Z7pB .BotChatItem_content__8-UKd:before {
    content: "";
    display: block;
    position: absolute;
    left: -50%;
    top: 0;
    background: var(--bg-game-chat);
    width: 200%;
    height: 150%;
    border-radius: 50% 50% 0 0;
    background: var(--bg-game-chat);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: -1;
    display: none;
}

/* Split button styles */
.VoicePlayer_splitButtonContainer__VoHBs {
    display: flex;
    justify-content: center;
    /* margin-bottom: 0.75rem; */
}

.VoicePlayer_splitButton__goxej {
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(135, 159, 253, 0.25);
    position: relative;
    height: 32px;
    font-size: 1rem;
}

.VoicePlayer_playButton__Chstk,
.VoicePlayer_speedButton__xVE5E {
    flex: 1 1;
    /* background: linear-gradient(to bottom, #1a936f, #136731); */
    color: white;
    border: none;
    padding: 0 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    font-size: 0.8125em;
    position: relative;
    font-family: var(--font-default);
    white-space: nowrap;
}
.VoicePlayer_playButton__Chstk .imrs-icon,
.VoicePlayer_speedButton__xVE5E .imrs-icon {
    margin-left: 5px;
}
.VoicePlayer_playButton__Chstk .imrs-icon:before,
.VoicePlayer_speedButton__xVE5E .imrs-icon:before {
    width: 16px;
    height: 16px;
    background-color: #a296ff;
}
.VoicePlayer_playButton__Chstk {
    background: linear-gradient(to bottom, #1a936f, #136731);
    padding-left: 15px;
}
@media (min-width: 701px) {
    .VoicePlayer_playButton__Chstk {
        padding-left: 20px;
    }
}
.VoicePlayer_playButton__Chstk:hover {
    background: linear-gradient(to bottom, #1ca577, #167a3a);
}

.VoicePlayer_pauseButton__RUlK2 {
    background: linear-gradient(to bottom, #ad2222, #910f0f);
}

.VoicePlayer_pauseButton__RUlK2:hover {
    background: linear-gradient(to bottom, #c42828, #a01111);
}

.VoicePlayer_buttonDivider__voFN- {
    width: 0;
}

.VoicePlayer_speedButton__xVE5E {
    /* background: linear-gradient(to bottom, #333, #222); */

    background-color: #0c243edb;
    color: #a296ff;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 12px;
}

@media (hover: hover) {
    .VoicePlayer_speedButton__xVE5E:hover {
        background-color: #3b1587ae;
        color: #fff;
    }
    .VoicePlayer_speedButton__xVE5E:hover .imrs-icon:before {
        background-color: #fff;
    }
}
/*手機*/

@media (min-width: 1400px) and (min-height: 800px) {
    .VoicePlayer_splitButton__goxej {
        height: 40px;
        /* font-size: 1.25rem; */
    }
    .VoicePlayer_playButton__Chstk,
    .VoicePlayer_speedButton__xVE5E {
        font-size: 1em;
        padding-right: 20px;
        padding-left: 20px;
    }
    .VoicePlayer_playButton__Chstk .imrs-icon:before,
    .VoicePlayer_speedButton__xVE5E .imrs-icon:before {
        width: 22px;
        height: 22px;
    }
    /* .playButton {
        padding: 0 10px;
        min-width: 50px;
        font-size: 0.8125em;
    }
    .speedButton {
        padding: 0 25px 0 10px;
        min-width: 50px;
        font-size: 0.8125em;
    } */
}

.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:currentColor;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:currentColor;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:currentColor;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:currentColor;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}
.Html5AudioPlayer_audioPlayerContainer__LrUaP {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem 0;
}

.Html5AudioPlayer_voiceInput__WSz-c {
  width: 70px;
  height: 70px;
  box-shadow: none;
  border-radius: 50%;
  background: linear-gradient(to bottom, #848484, #575757);
  background: linear-gradient(to bottom, #136731, #199b47);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  font-family: var(--font-default);
}

.Html5AudioPlayer_voiceInput__WSz-c .imrs-icon::before {
  width: 28px;
  height: 28px;
  background-color: #fff;
}

@media (min-width: 1600px) and (min-height: 800px) {
  .Html5AudioPlayer_voiceInput__WSz-c {
    width: 80px;
    height: 80px;
  }
  .Html5AudioPlayer_voiceInput__WSz-c .imrs-icon::before {
    width: 32px;
    height: 32px;
  }
}

.Html5AudioPlayer_voiceInput__WSz-c .icon:before {
  width: 30px;
  height: 30px;
  background-color: #fff;
}

.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_active__pEqAt {
  background: linear-gradient(to bottom, #136731, #199b47);
}

.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_activePause__hqsqk {
  background: linear-gradient(to bottom, #910f0f, #ad2222);
}

.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_activePause__hqsqk .imrs-icon::before {
  -webkit-mask-position: 30.43% 0;
}

.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_disabled__Y6QT0 {
  cursor: not-allowed;
  opacity: 0.5;
  background: linear-gradient(
    to bottom,
    rgba(150, 150, 150, 0.1),
    rgba(150, 150, 150, 0.2)
  );
  background: linear-gradient(to bottom, #848484, #575757);
  box-shadow: none;
}

.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_disabled__Y6QT0 .imrs-icon::before {
  background-color: #969696;
}

/* 小型按鈕樣式 */
.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_small__CS7Jt {
  width: 30px;
  height: 30px;
}

.Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_small__CS7Jt .imrs-icon::before {
  width: 12px;
  height: 12px;
}

@media (min-width: 1600px) and (min-height: 800px) {
  .Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_small__CS7Jt {
    width: 30px;
    height: 30px;
  }
  .Html5AudioPlayer_voiceInput__WSz-c.Html5AudioPlayer_small__CS7Jt .imrs-icon::before {
    width: 12px;
    height: 12px;
  }
}

/* EnhancedMessage 組件的模組化樣式 */

.EnhancedMessage_markdownWrapper__bnCGN {
  color: #fff;
  line-height: 1.25;
  font-family: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC",
    "Microsoft JhengHei", Helvetica, Arial;
}

.EnhancedMessage_markdownWrapper__bnCGN p,
.EnhancedMessage_markdownWrapper__bnCGN li {
  font-size: clamp(17px, 2.5vh, 30px);
  color: #fff;
}

.EnhancedMessage_markdownWrapper__bnCGN h1,
.EnhancedMessage_markdownWrapper__bnCGN h2,
.EnhancedMessage_markdownWrapper__bnCGN h3,
.EnhancedMessage_markdownWrapper__bnCGN h4,
.EnhancedMessage_markdownWrapper__bnCGN h5,
.EnhancedMessage_markdownWrapper__bnCGN h6 {
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5em;
}

.EnhancedMessage_markdownWrapper__bnCGN strong {
  font-weight: bold;
  color: #fff;
}

.EnhancedMessage_markdownWrapper__bnCGN code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 0.875em;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  font-family: Monaco, Consolas, "Courier New", monospace;
  color: #fff;
}

.EnhancedMessage_markdownWrapper__bnCGN pre {
  padding: 1em;
  overflow: auto;
  line-height: 1.45;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  width: 100%;
  color: #fff;
}

.EnhancedMessage_markdownWrapper__bnCGN pre code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  background: transparent;
  border: 0;
}

.EnhancedMessage_speech__9M94X {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  padding: 8px 12px;
  background: rgba(89, 107, 177, 0.2);
  border-radius: 20px;
  border: 1px solid rgba(129, 150, 234, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.EnhancedMessage_speech__9M94X strong {
  font-weight: bold;
  font-size: inherit;
  color: #fff;
}

@media (min-width: 980px) {
  .EnhancedMessage_speech__9M94X strong {
    font-size: clamp(17px, 2.2vh, 22px);
  }
}

.EnhancedMessage_marker__s\+-sF {
  font-weight: bold;
  position: relative;
  cursor: pointer;
  border-radius: 0.8em 0.3em;
  background: transparent;
  padding-left: 0.5em;
  padding-right: 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(
    to right,
    rgba(0, 255, 162, 0.1),
    rgba(0, 255, 162, 0.7) 4%,
    rgba(0, 255, 153, 0.3)
  );
  color: #fff;
  transition: all 0.25s ease;
}

.EnhancedMessage_marker__s\+-sF:hover {
  background-image: linear-gradient(
    to right,
    rgba(0, 255, 162, 0.3),
    rgba(0, 255, 162, 0.9) 4%,
    rgba(0, 255, 153, 0.5)
  );
}

/* 圖片相關樣式 */
.EnhancedMessage_markdownWrapper__bnCGN .EnhancedMessage_imgWrapper__paXjP {
  display: inline-block;
  border-radius: 12px;
  width: auto;
  border: 1px solid rgba(176, 255, 195, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
  padding: 6px;
  margin: 10px 0 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
  animation: EnhancedMessage_imgScale__cSWgc 1.5s linear infinite;
}

@media (min-width: 980px) {
  .EnhancedMessage_markdownWrapper__bnCGN .EnhancedMessage_imgWrapper__paXjP {
    margin: 14px 0 0 0;
  }
}

.EnhancedMessage_markdownWrapper__bnCGN .EnhancedMessage_imgWrapper__paXjP img {
  display: block;
  width: auto;
  height: 80px;
}

.EnhancedMessage_markdownWrapper__bnCGN .EnhancedMessage_inlineImg__pdH2E {
  display: inline-block;
  border-radius: 6px;
  height: 1.75em;
  width: auto;
  margin: 0 5px;
  border: 1px solid rgba(176, 255, 195, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  vertical-align: middle;
}

.EnhancedMessage_markdownWrapper__bnCGN .EnhancedMessage_inlineImg__pdH2E + p {
  margin-top: 8px;
}

@keyframes EnhancedMessage_imgScale__cSWgc {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1);
  }
}

/* 音頻播放器樣式 */
.EnhancedMessage_speech__9M94X .audio-player {
  margin-left: 8px;
}

/* 隱藏模式樣式 */
.EnhancedMessage_speech__9M94X.EnhancedMessage_hiddenMode__EgBEp {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.EnhancedMessage_speech__9M94X.EnhancedMessage_hiddenMode__EgBEp strong {
  display: none;
}

.CharacterImage_container__lt0ZA {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  position: relative;
}

.CharacterImage_video__vnhpX {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.CharacterImage_avatar__bCxnj {
  /* border: 2px solid #FFD700; */
  overflow: hidden;
}

.CharacterImage_contain__dfjFK {
  background-size: contain !important;
  background-position: center !important;
}

.CharacterImage_contain__dfjFK .CharacterImage_video__vnhpX {
  object-fit: contain !important;
}

.QuestionImage_img__B7hej {
    width: 100%;
    display: block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 40px 40px 0 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #dbd2f536;
}

.QuestionImage_img__B7hej::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
    padding-bottom: 56%;
}

.QuestionImage_img__B7hej::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #dbd2f536);
    left: 0;
    bottom: 0;
}
@media screen and (orientation: landscape) {
    .QuestionImage_img__B7hej::before {
        padding-bottom: 70%;
        padding-bottom: 56%;
    }
    .QuestionImage_img__B7hej::after {
        height: 60px;
    }
}
/*手機*/
@media (min-width: 0px) and (max-width: 1000px) {
    .QuestionImage_img__B7hej {
        border-radius: 0;
    }
}

/* V1_5: 用戶聊天訊息樣式，固定在底部，與 GameInputArea 位置一致 */
.UserChatItem_chatItem__MC7Xz {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 120px; /* 在 GameInputArea 上方 */
    left: 0;
    width: 100%;
    align-items: center;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 9; /* 在 GameInputArea (z-index: 10) 下方 */
    pointer-events: none;
}

.UserChatItem_chatItem__MC7Xz.UserChatItem_active__-jgAC {
    transform: translateY(0);
    opacity: 1;
}

.UserChatItem_chatItemContainer__1JAsU {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 40px;
    padding: 25px 200px 25px 25px;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(183, 201, 179, 0.85) 0%, rgba(164, 183, 167, 0.9) 50%, rgba(147, 165, 150, 0.85) 100%);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), inset 0 0 60px rgba(147, 165, 150, 0.1);
    width: clamp(640px, 70vw, 1100px);
    min-height: 120px;
    pointer-events: auto;
}

/* V1_5: 沒有頭像時的樣式調整 */
.UserChatItem_chatItemContainer__1JAsU.UserChatItem_noAvatar__Qun8h {
    padding: 25px 25px 25px 25px;
}

.UserChatItem_avatar__-zZXJ {
    width: 180px;
    height: 180px;
    position: relative;
    flex-shrink: 0;
    border-radius: 30px;
    z-index: 1;
    overflow: hidden;
    position: absolute;
    right: 25px;
    top: -35px;
    border: 2px solid rgba(147, 165, 150, 0.7);
    box-shadow: 0 0 20px rgba(147, 165, 150, 0.6), inset 0 0 30px rgba(147, 165, 150, 0.1);
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0.9) 10%, rgba(235, 235, 235, 0.95) 50%, rgba(228, 228, 228, 0.9) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.UserChatItem_img__XTmly {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.UserChatItem_name__TbH6v {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
    padding: 5px 15px;
    background: rgba(147, 165, 150, 0.7);
    border-radius: 4px;
    white-space: nowrap;
    z-index: 6;
}

.UserChatItem_content__4k\+xY {
    flex: 1 1;
    min-width: 0;
    font-size: 1em;
    line-height: 1.25;
    color: rgba(51, 51, 51, 0.95);
    padding: 0 40px 0 0;
    z-index: 2;
    font-family: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial;
}

.UserChatItem_content__4k\+xY p {
    font-size: clamp(17px, 2.5vh, 30px);
    margin: 0;
}

@media (min-width: 1600px) and (min-height: 800px) {
    .UserChatItem_avatar__-zZXJ {
        width: 220px;
        height: 220px;
    }
    .UserChatItem_chatItemContainer__1JAsU {
        border-radius: 50px;
        padding: 25px 250px 25px 25px;
    }
}

@media (max-width: 700px) {
    .UserChatItem_chatItem__MC7Xz {
        bottom: 100px; /* 手機版調整位置 */
    }
    
    .UserChatItem_chatItemContainer__1JAsU {
        width: 95%;
        margin: 0 auto;
        flex-direction: column;
        padding: 30px 15px 20px;
        min-height: 120px;
        border-radius: 20px;
    }

    .UserChatItem_avatar__-zZXJ {
        width: 90px;
        height: 90px;
        border-radius: 20px;
        margin: 0;
        position: absolute;
        overflow: hidden;
        right: 15px;
        top: 0;
        transform: translate(0, -66px);
    }

    .UserChatItem_content__4k\+xY {
        font-size: 1em;
        line-height: 1.25;
        padding: 0;
    }

    .UserChatItem_name__TbH6v {
        font-size: 1em;
        padding: 4px 12px;
    }
}


.GameInputArea_gameInputArea__iTCSi {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 10;
    background: linear-gradient(to bottom, #32217700, #1f1448e4); /*線性*/
}

.GameInputArea_active__XDBhs {
    transform: translateY(0);
}

.GameInputArea_container__53XsY {
    /* max-width: 100%; */
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    width: clamp(640px, 70vw, 1100px);
}
/*手機*/
@media (min-width: 0px) and (max-width: 700px) and (orientation: portrait) {
    .GameInputArea_container__53XsY {
        padding-bottom: 30px;
    }
}
.GameInputArea_container__53XsY > div {
    width: 100%;
}
.GameInputArea_inputVoiceContainer__HH8RY,
.GameInputArea_inputTextContainer__o78lF,
.GameInputArea_inputPluginContainer__rX0Cw {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
    align-items: center;
    width: 100%;
    /* max-width: 600px; */
}

.GameInputArea_btnChange__NENbb {
    color: #fff;
    font-size: 12px;
    text-shadow: 0 0 16px rgba(159, 134, 255, 0.8);
    opacity: 0.8;
    transition: opacity 0.2s;
    margin-top: 12px;
    font-weight: 500;
    text-align: center;
    position: relative;
}

.GameInputArea_btnChange__NENbb:hover {
    opacity: 1;
}

.GameInputArea_btnChange__NENbb:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(76, 245, 167, 0.1);
    filter: blur(15px);
    pointer-events: none;
    z-index: -1;
}

.GameInputArea_btnLarge__9FuIV {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(to bottom, rgba(31, 66, 61, 0.8), rgba(8, 36, 38, 0.8));
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s;
}

.GameInputArea_btnLarge__9FuIV:hover {
    transform: scale(1.05);
}

.GameInputArea_icon__SfVm8 {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Input Mode Styles */
.GameInputArea_TEXT__K6T3u {
    /* 文字輸入模式的特定樣式 */
}

.GameInputArea_VOICE__jUDbm {
    /* 語音輸入模式的特定樣式 */
}

.GameInputArea_CHOIC__BnTFf {
    /* 選擇題模式的特定樣式 */
}

.GameInputArea_MULTI__TMB5S {
    /* 多選題模式的特定樣式 */
}

.GameInputArea_ELSA__2sKXB {
    /* ELSA模式的特定樣式 */
}

/* 確保這些樣式存在 */
.GameInputArea_gameInputArea__iTCSi {
    /* 本樣式 */
}

.GameInputArea_gameInputArea__iTCSi.GameInputArea_--voice-mode__eOvX1 .GameInputArea_inputVoiceContainer__HH8RY {
    display: flex;
}

.GameInputArea_gameInputArea__iTCSi.GameInputArea_--text-mode__Vn0L9 .GameInputArea_inputTextContainer__o78lF {
    display: flex;
}

/* 隱藏非當前模式的容器 */
.GameInputArea_inputVoiceContainer__HH8RY,
.GameInputArea_inputTextContainer__o78lF {
    display: none;
}

.GameInputArea_inputVoiceContainer__HH8RY {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* max-width: 600px; */
    padding: 20px;
    position: relative;
}

/* 發光效果容器 */
.GameInputArea_inputVoiceContainer__HH8RY:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(76, 245, 167, 0.3) 0%, rgba(76, 245, 167, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

.GameInputArea_inputTextContainer__o78lF {
    width: 100%;
    padding: 20px;
    position: relative;
    display: flex;
    justify-content: center;
}

@media (max-width: 700px) {
    .GameInputArea_container__53XsY {
        width: 100%;
    }
    .GameInputArea_inputTextContainer__o78lF {
        padding: 0;
    }
}

.GameInputTextArea_wrapper__ZhNj7 {
    position: relative;

    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%; /* 確保不會超出父容器 */
}

/* 輸入框樣式 */
.GameInputTextArea_wrapper__ZhNj7 textarea {
    width: 100%;
    height: 80px; /* 增加桌面版的高度為原本的兩倍 */
    resize: none;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    border-radius: 50px;
    padding: 10px 60px 10px 30px; /* 增加上下內邊距 */
    font-size: 1.0625em;
    max-width: 100%;
    font-family: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial;
    line-height: 1.25;
    /* 背景顏色設定 - 由上到下的淺灰到白色漸層 */
    background: linear-gradient(to bottom, rgba(240, 240, 240, 0.9), rgba(255, 255, 255, 1));
    /* 邊框設定 */
    border: 1px solid rgb(219, 212, 212);
    /* 文字顏色 */
    color: #1c0e3a;
    box-sizing: border-box;
}
@media (min-width: 1600px) and (min-height: 800px) {
    .GameInputTextArea_wrapper__ZhNj7 textarea {
        font-size: 1.125em;
    }
}
/* 功能按鈕容器 - 調整位置 */
.GameInputTextArea_fn__57T86 {
    position: absolute;
    right: 8px; /* 調整右側間距 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: auto;
}

/* 送出按鈕 */
.GameInputTextArea_btnSubmit__StiJ0 {
    border: none;
    background: #4c33ad;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    border-radius: 50%;
    transition-property: opacity, transform;
}

.GameInputTextArea_btnSubmit__StiJ0:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

/* 出按鈕圖示 */
.GameInputTextArea_icon__\+7pL2 {
    width: 20px;
    height: 20px;
    /* 圖示顏色改為白色，因為背景是綠色 */
    background-color: #fff;
    /* 使用 -webkit- 綴增加兼容性 */
    -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
    mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
    /* 使用原本 icon-10 的位置設定 */
    -webkit-mask-position: 13.04% 0;
    mask-position: 13.04% 0;
    /* 調整圖示大小 */
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    display: block;
}

/* 手機版樣式 */

@media (max-width: 700px) {
    .GameInputTextArea_wrapper__ZhNj7 {
        width: 100%; /* 手機版滿版寬度 */
        padding: 0 15px; /* 手機版左右間距 */
    }

    .GameInputTextArea_wrapper__ZhNj7 textarea {
        height: 100px; /* 手機版更高 */
        padding: 20px 70px 20px 12px; /* 增加右側內邊距，給按鈕更多空間 */
        border-radius: 11px;
    }
    .GameInputTextArea_wrapper__ZhNj7 {
        width: 100%;
        padding: 0 16px;
    }

    .GameInputTextArea_wrapper__ZhNj7 textarea {
        height: 100px;
        padding: 10px 70px 10px 10px; /* 增加右側內邊距，給按鈕更多空間 */
    }

    /* 手機版按鈕樣式 */
    .GameInputTextArea_btnSubmit__StiJ0 {
        width: 48px; /* 手機版縮小按鈕 */
        height: 90px;
        border-radius: 8px;
    }

    .GameInputTextArea_fn__57T86 {
        right: 20px; /* 調整手機版按鈕位置 */
    }
}

.Recorder_inputVoice__IlZj8 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .Recorder_inputVoice__IlZj8:hover {
    transform: scale(1.1);
  }
}

.Recorder_inputVoice__IlZj8 .imrs-icon {
}
.Recorder_inputVoice__IlZj8 .imrs-icon::before {
  width: 40px;
  height: 40px;
  background-color: var(--color-pair);
  position: relative;
  z-index: 6;
}
.Recorder_icon__cOunu {
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 3;
  background-color: #4a4848;
}

.Recorder_icon1__kdjHg {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 0 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 0 0;
  -webkit-mask-size: auto 100%;
}

.Recorder_inputVoice__IlZj8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #dad8d8, #999898);
  box-shadow: 0 0 25px rgba(146, 95, 255, 0.9);
  z-index: 1;
}

.Recorder_inputVoice__IlZj8.Recorder_active__\+vaea:before {
  background: linear-gradient(to bottom, #ffffff, #a49bb2);
  box-shadow: 0 0 35px rgba(146, 95, 255, 0.9);
}
/* .inputVoice.active :global(.imrs-icon)::before {
    -webkit-mask-position: 30.43% 0;
} */

.Recorder_inputVoice__IlZj8.Recorder_active__\+vaea .Recorder_circle__SK4ta {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  background: conic-gradient(
    #fff 0deg var(--progress-degree),
    #94d697 var(--progress-degree),
    #d1fad3 360deg
  );
  display: flex;
  justify-content: center;
  align-items: center;
  left: 3px;
  top: 3px;
  z-index: 1;
  filter: blur(0.5px);
}
.Recorder_inputVoice__IlZj8.Recorder_pause__jGkCO {
}
.Recorder_inputVoice__IlZj8.Recorder_pause__jGkCO .imrs-icon::before {
  -webkit-mask-position: 30.43% 0;
  background-color: var(--error);
}

.Recorder_transcribedText__AQ5T2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #f8f9fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 64px;
  justify-content: center;
}

.Recorder_transcribedText__AQ5T2 p {
  margin: 0;
  padding: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  text-align: center;
  word-wrap: break-word;
  max-width: 100%;
}

.Recorder_transcribedText__AQ5T2 button {
  transition: all 0.2s ease;
}

.Recorder_transcribedText__AQ5T2 button:hover {
  background: #e0e0e0 !important;
  border-color: #999 !important;
}

.SelectionInputArea_container__b83jP {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  width: 100%;
}

@media (min-width: 1600px) and (min-height: 800px) {
  .SelectionInputArea_container__b83jP {
    gap: 16px;
  }
}

.ChoiceButton_btn__ywfT\+ {
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: rgba(236, 241, 244, 0.6);
    font-size: 1.25em;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    font-family: var(--font-default);
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    color: var(--text-btn--primary);
}

@media (min-width: 1600px) and (min-height: 800px) {
    .ChoiceButton_btn__ywfT\+ {
        font-size: 1.5em;
    }
}
/*手機*/
@media (min-width: 0px) and (max-width: 700px) and (orientation: portrait) {
    .ChoiceButton_btn__ywfT\+ {
        font-size: 1em;
        padding: 4px 12px;
        font-weight: 600;
        background-color: rgba(255, 255, 255, 0.8);
    }
    .--story-mode .ChoiceButton_btn__ywfT\+ {
        font-size: 1em;
        padding: 4px 16px;
    }
}

.ChoiceButton_btn__ywfT\+::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
}

@media (hover: hover) {
    .ChoiceButton_btn__ywfT\+:hover {
        background-color: rgba(238, 236, 244, 0.9);
        border-color: #fff;
        transform: scale(1.1);
        box-shadow: rgba(232, 223, 255, 0.7) 0px 0px 12px, rgba(203, 182, 255, 0.4) 0px 0px 20px 8px, rgba(255, 255, 255, 0.3) 0px 0px 8px inset;
        text-shadow: rgba(80, 52, 190, 0.7) 0px 0px 10px;
        color: var(--text-btn-hover--primary);
    }
    .ChoiceButton_btn__ywfT\+:active {
        transform: scale(1.05) translateY(2px);
        transition: all 0.1s ease;
    }
}

@media (hover: none) {
    .ChoiceButton_btn__ywfT\+:active {
        background-color: rgba(238, 236, 244, 0.9);
        border-color: #fff;
        box-shadow: rgba(232, 223, 255, 0.7) 0px 0px 12px, rgba(203, 182, 255, 0.4) 0px 0px 20px 8px, rgba(255, 255, 255, 0.3) 0px 0px 8px inset;
        text-shadow: rgba(80, 52, 190, 0.7) 0px 0px 10px;
    }
}

.MultiSelectionInput_container__ESKNe {
  width: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.MultiSelectionInput_options__IGr2w {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 5px;
  justify-content: center;
}

.MultiSelectionInput_btn__HjEDz {
  border: none;
  background: none;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: rgba(111, 132, 146, 0.7);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid rgba(111, 132, 146, 0.5);
  min-width: 80px;
}

.MultiSelectionInput_btn__HjEDz:hover {
  transform: translateY(-2px);
  background-color: rgba(111, 132, 146, 0.9);
}

.MultiSelectionInput_btn__HjEDz.MultiSelectionInput_selected__N9tDb {
  background-color: rgba(76, 245, 167, 0.8);
  border-color: #4cf5a7;
  color: #000000;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(76, 245, 167, 0.5);
}

.MultiSelectionInput_submitBtn__AI7E- {
  width: 100%;
  padding: 12px;
  border-radius: 25px;
  background-color: rgba(76, 245, 167, 0.2);
  color: #4cf5a7;
  border: 2px solid #4cf5a7;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.5;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 5px;
  max-width: 300px;
  align-self: center;
}

.MultiSelectionInput_submitBtn__AI7E-.MultiSelectionInput_active__YDzbX {
  opacity: 1;
  background-color: rgba(76, 245, 167, 0.3);
}

.MultiSelectionInput_submitBtn__AI7E-:hover.MultiSelectionInput_active__YDzbX {
  background-color: rgba(76, 245, 167, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 245, 167, 0.3);
}

.MultiSelectionInput_submitBtn__AI7E-:disabled {
  cursor: not-allowed;
}

.QuestionAdvicePopup_overlay__MjdaC {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: all;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 60px 20px 20px 20px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.2);
}

.QuestionAdvicePopup_dialogueContainer__v8DRi {
  width: 100%;
  max-width: 800px;
  padding: 20px;
  margin: 0 auto;
  position: relative;
  z-index: 999;
  max-width: min(800px, calc(100vw - 40px));
  box-sizing: border-box;
}

.QuestionAdvicePopup_container__M5da3 {
  /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); */
  background: var(--bg-game-chat);
  border-radius: var(--rd-area);
  padding: 40px;
  padding-right: 100px;
  color: var(--text-primary);

  position: relative;
  z-index: 1;
  overflow: visible;
  min-height: 400px;
  max-height: 600px;
  margin-top: 30px;
  margin-bottom: 40px;
  transition: height 0.3s ease;

  overflow-wrap: break-word;
  word-wrap: break-word;

  display: flex;
  flex-direction: column;
}

.QuestionAdvicePopup_contentScrollContainer__4eX\+5 {
  /* max-height: calc(100vh - 200px);  */
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 10px;
  flex: 1 1;
  min-height: 0;;
}

.QuestionAdvicePopup_contentScrollContainer__4eX\+5::-webkit-scrollbar {
  width: 6px;
}

.QuestionAdvicePopup_contentScrollContainer__4eX\+5::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.QuestionAdvicePopup_contentScrollContainer__4eX\+5::-webkit-scrollbar-thumb {
  background: rgba(81, 106, 207, 0.3);
  border-radius: 3px;
}

.QuestionAdvicePopup_contentScrollContainer__4eX\+5::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 117, 222, 0.5);
}

.QuestionAdvicePopup_dialogueContent__pwOYq {
  margin-bottom: 20px;
}

.QuestionAdvicePopup_question__IXhht {
  font-size: 1.25em;

  margin-bottom: 15px;
  color: var(--text-secondary);
}

.QuestionAdvicePopup_tipText__9W9Qa {
  color: var(--color-main);
  font-size: 1.1em;
  margin-bottom: 10px;
}

.QuestionAdvicePopup_keywords__ppH\+h {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.QuestionAdvicePopup_keyword__66LLm {
  background: var(--text-highlight);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9em;
}

.QuestionAdvicePopup_advice__SnfSR {
  min-height: 200px;
  position: relative;
}
.QuestionAdvicePopup_character__Jrhgv {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 160px;
  transform: translateX(10%);
  z-index: 10;
  /* pointer-events: none; */
}

.QuestionAdvicePopup_explanation__8JAYA {
  margin-bottom: 15px;
  line-height: 1.5;
  /* color: var(--text-primary); */

  padding: 15px;

  position: relative;
  isolation: isolate;
  color: #191625;
}
.QuestionAdvicePopup_explanation__8JAYA:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-game-card);
  position: absolute;
  left: 0;
  overflow: hidden;
  left: 0;
  top: 0;
  z-index: -1;

  border-radius: var(--rd-item);
}
.QuestionAdvicePopup_examples__4OL1Y {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.QuestionAdvicePopup_exampleItem__vZ3sp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.QuestionAdvicePopup_english__\+hhCU {
  color: var(--text-highlight);
  /* font-weight: bold; */
  line-height: 1.1em;
  font-size: 1.25em;
}

.QuestionAdvicePopup_translation__M\+sb7 {
  color: var(--text-secondary);
  font-size: 0.9375em;
  font-weight: normal;
  margin-top: 3px;
}

.QuestionAdvicePopup_closeButton__BPjdP {
  position: absolute;
  top: -20px;
  right: -20px;
  height: 40px;
  width: 40px;
  background-color: var(--color-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10002;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  color: var(--text-primary);
  transition: transform 0.2s ease;
}

.QuestionAdvicePopup_closeButton__BPjdP:hover {
  transform: scale(1.25);
}

@media (min-width: 0px) and (max-width: 700px) {
  .QuestionAdvicePopup_closeButton__BPjdP {
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
  }
  
  .QuestionAdvicePopup_container__M5da3 {
    padding-right: 40px;
    margin-top: 20px;
  }
}

.QuestionAdvicePopup_notebookUl__9Opej {
  padding: 0 60px 0 0;
  margin: 0;
  counter-reset: listCounter;
}

.QuestionAdvicePopup_notebookUl__9Opej li {
  position: relative;
  padding-left: 40px;
  margin-bottom: 15px;
}

.QuestionAdvicePopup_notebookUl__9Opej li::before {
  content: counter(listCounter) ".";
  counter-increment: listCounter;
  position: absolute;
  font-weight: normal;
  left: 0;
  color: var(--text-tertiary);
  background-color: transparent;
  border: none;
  font-size: 2em;
  font-family: var(--font-default);
}
/*直式平板*/
@media (min-width: 701px) and (max-width: 1200px) and (orientation: portrait) {
  .QuestionAdvicePopup_dialogueContainer__v8DRi {
    width: 80%;
  }

  /* .dialogueContainer {
        padding: 15px;
    }

    .container {
        padding: 15px;
    } */

  .QuestionAdvicePopup_overlay__MjdaC {
    justify-content: flex-start;
  }

  .QuestionAdvicePopup_container__M5da3 {
    margin-top: 20px;
  }
}

/*手機*/
@media (min-width: 0px) and (max-width: 700px) {
  .QuestionAdvicePopup_dialogueContainer__v8DRi {
    min-height: 100svh;
  }
  .QuestionAdvicePopup_container__M5da3 {
    padding: 20px;
    margin-top: 20px;

    max-height: none;
    min-height: auto;
  }
  .QuestionAdvicePopup_contentScrollContainer__4eX\+5 {
    max-height: calc(100svh - 120px);
    flex: none;
  }
  .QuestionAdvicePopup_question__IXhht {
    font-size: 1em;
  }
  .QuestionAdvicePopup_notebookUl__9Opej {
    padding: 0 0 0 0;
  }
  .QuestionAdvicePopup_overlay__MjdaC {
    justify-content: flex-start;
  }
  .QuestionAdvicePopup_english__\+hhCU {
    font-size: 1.125em;
  }
  .QuestionAdvicePopup_character__Jrhgv {
    display: none;
  }
}

/*橫式平板*/
@media (min-width: 701px) and (max-width: 1200px) and (orientation: landscape) {
  .QuestionAdvicePopup_dialogueContainer__v8DRi {
    width: 80%;
  }

  .QuestionAdvicePopup_overlay__MjdaC {
    justify-content: flex-start;
  }

  .QuestionAdvicePopup_container__M5da3 {
    margin-top: 20px;
  }
  .QuestionAdvicePopup_contentScrollContainer__4eX\+5 {
    max-height: calc(100svh - 160px);
  }
}

.QuestionAdvicePopup_avatarGlow__lyIeV {
  position: relative;
  background: linear-gradient(135deg, #1e1b3a, #2a2654, #3730a3);  border-radius: 50%;
  padding: 4px;
  
  box-shadow: 
    0 0 20px rgba(129, 140, 248, 0.4),
    0 0 40px rgba(129, 140, 248, 0.2),
    0 0 60px rgba(129, 140, 248, 0.1),
    inset 0 0 20px rgba(199, 210, 254, 0.1);
  
  animation: QuestionAdvicePopup_glowPulse__kfIPa 2s ease-in-out infinite alternate;
}

@keyframes QuestionAdvicePopup_glowPulse__kfIPa {
  0% {
    box-shadow: 
      0 0 20px rgba(129, 140, 248, 0.4),
      0 0 40px rgba(129, 140, 248, 0.2),
      0 0 60px rgba(129, 140, 248, 0.1),
      inset 0 0 20px rgba(199, 210, 254, 0.1);
  }
  100% {
    box-shadow: 
      0 0 30px rgba(129, 140, 248, 0.6),
      0 0 50px rgba(129, 140, 248, 0.3),
      0 0 80px rgba(129, 140, 248, 0.15),
      inset 0 0 25px rgba(199, 210, 254, 0.15);
  }
}

.QuestionAdvicePopup_avatarGlow__lyIeV .QuestionAdvicePopup_img__KGTAe,
.QuestionAdvicePopup_avatarGlowIntense__NQG41 .QuestionAdvicePopup_img__KGTAe,
.QuestionAdvicePopup_avatarGlowRotating__TQIzM .QuestionAdvicePopup_img__KGTAe {
  border-radius: 50%;
  overflow: hidden;
}

@media (max-width: 700px) {
  .QuestionAdvicePopup_avatarGlow__lyIeV,
  .QuestionAdvicePopup_avatarGlowIntense__NQG41,
  .QuestionAdvicePopup_avatarGlowRotating__TQIzM {
    padding: 3px;
  }
  
  .QuestionAdvicePopup_avatarGlow__lyIeV {
    box-shadow: 
      0 0 15px rgba(129, 140, 248, 0.4),
      0 0 30px rgba(129, 140, 248, 0.2),
      inset 0 0 15px rgba(199, 210, 254, 0.1);
  }
}


.AvatarImage_avatar__SVdSY {
  width: 180px;
  height: 180px;
  position: relative;
  flex-shrink: 0;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  border: 2px solid rgba(129, 150, 234, 0.7);
}

.AvatarImage_img__uS6IK {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.AvatarImage_name__yM3rE {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.2em;
  font-weight: 500;
  padding: 5px 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  white-space: nowrap;
  z-index: 6;
}

.FixQuestionGameEnd_container__dzGiO {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    background-color: rgba(17, 17, 17, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    overflow: hidden;
}

.FixQuestionGameEnd_container__dzGiO.FixQuestionGameEnd_active__eg3kv {
    opacity: 1;
    pointer-events: auto;
}

.FixQuestionGameEnd_endContainer__1zyH3 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    align-items: center;
}

@media (min-width: 0) and (max-width: 979px) {
    .FixQuestionGameEnd_endContainer__1zyH3 {
        justify-content: center;
        padding-top: 50px;
        padding-bottom: 60px;
        height: 100svh;
    }

    .FixQuestionGameEnd_endFrame__z9nnl {
        height: calc(100vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.FixQuestionGameEnd_endFrame__z9nnl {
    width: 100%;
    height: clamp(200px, 48vh, 1200px);
    display: flex;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
    position: relative;
    justify-content: space-between;
    padding: 0;
    overflow: visible;
    min-width: 800px;
}

.FixQuestionGameEnd_endFrame__z9nnl:before,
.FixQuestionGameEnd_endFrame__z9nnl:after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    position: absolute;
}

.FixQuestionGameEnd_endFrame__z9nnl:before {
    top: 0;
    background: linear-gradient(to right, #99f29c 10%, #98c16a, #fff, #fac363 90%);
    background: linear-gradient(to right, #2d2fbd 10%, #5a4bcf, #7e77e8, #a5c9ff 90%);
    background: linear-gradient(to right, #5a4bcf 0%, #f3b94b 25%, #7e77e8 50%, #ffd700 75%, #6c5dd3 100%);
}

.FixQuestionGameEnd_endFrame__z9nnl:after {
    bottom: 0;
    background: linear-gradient(to right, #52a7d3 10%, #86df9a 90%);
    background: linear-gradient(
        to right,
        rgba(62, 58, 255, 0.8) 10%,
        rgba(140, 130, 255, 0.6),
        rgba(174, 173, 255, 0.4),
        rgba(180, 200, 255, 0.2) 90%
    );
    background: linear-gradient(to right, #3e2f9a 0%, #5a4bcf 16.6%, #7e77e8 33.3%, #bba3ff 49.9%, #f3b94b 66.5%, #ffd700 83.2%, #fff3c1 100%);
}

/* Avatar 相關樣式 */
.FixQuestionGameEnd_left__78cqe {
    position: relative;
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    max-width: 300px;
    height: 100%;
    overflow: hidden;
}

.active .FixQuestionGameEnd_avatar__soFnC {
    opacity: 1;
    transform: none;
}

@media (min-width: 0) and (max-width: 979px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        backdrop-filter: initial;
        -webkit-backdrop-filter: initial;
        flex-direction: column;
        padding: 50px 0;
        background: linear-gradient(to bottom, rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.5));
        justify-content: center;
        flex: 1 1;
    }

    .FixQuestionGameEnd_left__78cqe {
        min-width: 0;
        min-width: initial;
        width: 100%;
        height: auto;
        padding: 0;
        flex: none;
        overflow: visible;
    }

    .FixQuestionGameEnd_avatar__soFnC {
        width: 100%;
        height: auto;
    }

    .FixQuestionGameEnd_imgWrapper__C7spD {
        width: 200px;
        height: 200px;
    }

    .FixQuestionGameEnd_memo__U8t7u {
        margin-top: 10px;
    }

    .FixQuestionGameEnd_memo__U8t7u strong {
        font-size: 1.2em;
    }

    .FixQuestionGameEnd_memo__U8t7u p {
        font-size: 1em;
    }
    .FixQuestionGameEnd_endFrame__z9nnl:before {
        display: none;
    }
}
@media (min-width: 0) and (max-width: 600px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        padding: 30px 0;
    }
}
@media (min-width: 980px) {
    .FixQuestionGameEnd_avatar__soFnC {
        margin-left: -2vw;
    }

    .FixQuestionGameEnd_memo__U8t7u {
        max-width: 90%;
    }
}

@media (min-width: 1200px) {
    .FixQuestionGameEnd_avatar__soFnC {
        margin-left: -5vw;
    }
}

.FixQuestionGameEnd_right__7D8B3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 2 1;
    min-width: 400px;
    max-width: 500px;
}

@media (min-width: 980px) and (max-width: 1200px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        min-width: 800px;
        padding: 0 20px;
        justify-content: center;
        gap: 20px;
    }
    
    .FixQuestionGameEnd_left__78cqe {
        flex: 1 1;
        min-width: 200px;
        max-width: 250px;
    }
    
    .FixQuestionGameEnd_right__7D8B3 {
        flex: 2 1;
        min-width: 350px;
        max-width: 450px;
    }
}

/* 大屏幕優化 */
@media (min-width: 1201px) and (max-width: 1400px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        min-width: 900px;
        padding: 0 30px;
        justify-content: center;
        gap: 30px;
    }
    
    .FixQuestionGameEnd_left__78cqe {
        flex: 1 1;
        min-width: 220px;
        max-width: 280px;
    }
    
    .FixQuestionGameEnd_right__7D8B3 {
        flex: 4 1;
        min-width: 400px;
        max-width: 500px;
    }
}

/* 超大屏幕 */
@media (min-width: 1401px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        min-width: 1000px;
        padding: 0 40px;
        justify-content: center;
        gap: 40px;
    }
    
    .FixQuestionGameEnd_left__78cqe {
        flex: 1 1;
        min-width: 250px;
        max-width: 320px;
    }
    
    .FixQuestionGameEnd_right__7D8B3 {
        flex: 2.5 1;
        min-width: 450px;
        max-width: 600px;
    }
}

/* 移動設備保持原樣 */
@media (min-width: 0) and (max-width: 979px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        backdrop-filter: initial;
        -webkit-backdrop-filter: initial;
        flex-direction: column;
        padding: 50px 0;
        background: linear-gradient(to bottom, rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.5));
        justify-content: center;
        flex: 1 1;
        min-width: 0;
        min-width: initial; /* 移動設備不限制最小寬度 */
    }

    .FixQuestionGameEnd_left__78cqe, .FixQuestionGameEnd_right__7D8B3 {
        min-width: 0;
        min-width: initial;
        max-width: none;
        max-width: initial;
        width: 100%;
        flex: none;
    }

    .FixQuestionGameEnd_left__78cqe {
        height: auto;
        padding: 0;
        overflow: visible;
    }

    .FixQuestionGameEnd_right__7D8B3 {
        padding-bottom: 10px;
        padding-top: 3vh !important;
    }
}

@media (min-width: 980px) {
    .FixQuestionGameEnd_endFrame__z9nnl {
        align-items: center;;
    }
    
    .FixQuestionGameEnd_brief__m4m5l .FixQuestionGameEnd_right__7D8B3 {
        padding-right: 5vw;
        flex: 3 1; /* brief 模式下給右側更多空間 */
    }
    
    .FixQuestionGameEnd_brief__m4m5l .FixQuestionGameEnd_left__78cqe {
        flex: 2 1;
    }
}

@media (min-width: 1700px) {
    .FixQuestionGameEnd_brief__m4m5l .FixQuestionGameEnd_right__7D8B3 {
        flex: 4 1;
    }
}


.TalkGameScoreBoard_resultItem__WX41p {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

@media (min-width: 0) and (max-width: 979px) {
  .TalkGameScoreBoard_resultItem__WX41p {
    width: calc(100% - 40px);
  }
}

.TalkGameScoreBoard_riTop__DVPn7 {
  display: block;
  text-align: center;
  padding: 5px 0;
  margin: 0 auto;
  font-size: 0.875em;
}

@media (min-width: 0) and (max-width: 979px) {
  .TalkGameScoreBoard_riTop__DVPn7 {
    border-bottom: 1px solid #f3b25c;
  }
}

@media (min-width: 980px) {
  .TalkGameScoreBoard_riTop__DVPn7 {
    padding: 5px 1.5em;
    width: -webkit-max-content;
    width: max-content;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(to bottom, rgba(243, 178, 92, 0), #f3b25c);
  }
}

@media (min-width: 1380px) {
  .TalkGameScoreBoard_riTop__DVPn7 {
    padding: 10px 1.5em 5px;
    font-size: 1em;
  }
}

.TalkGameScoreBoard_riTop__DVPn7 strong {
  font-family: "Nunito", sans-serif;
  font-size: 1.5em;
}

.TalkGameScoreBoard_riMiddle__sGNcE {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}

.TalkGameScoreBoard_riMiddle__sGNcE .skill {
  flex-shrink: 0;
  margin: 0 8px;
  width: 72px;
}

@media (min-width: 980px) {
  .TalkGameScoreBoard_riMiddle__sGNcE .skill {
    width: 58px;
  }
}

@media (min-width: 1100px) {
  .TalkGameScoreBoard_riMiddle__sGNcE .skill {
    width: 64px;
  }
}

@media (min-width: 1380px) {
  .TalkGameScoreBoard_riMiddle__sGNcE .skill {
    width: 72px;
    margin: 5px 10px;
  }
}

@media (min-width: 1700px) {
  .TalkGameScoreBoard_riMiddle__sGNcE .skill {
    width: 88px;
  }
}

.TalkGameScoreBoard_riBottom__Rf861 {
  font-family: "Nunito", sans-serif;
  text-align: center;
  color: #fdc275;
  font-size: 1.25em;
}

@media (min-width: 980px) {
  .TalkGameScoreBoard_riBottom__Rf861 {
    font-size: 1.25em;
    padding-bottom: 20px;
  }
}

@media (min-width: 1380px) {
  .TalkGameScoreBoard_riBottom__Rf861 {
    font-size: 1.625em;
  }
}

.TalkGameScoreBoard_riBottom__Rf861 strong {
  font-size: 3em;
  background: linear-gradient(
    to bottom,
    #fdc275,
    #cd8d39 50%,
    #ffe0b7 50.1%,
    #fdc275 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.TalkGameScoreBoard_riBottom__Rf861 span {
  margin-left: 0.25em;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

.SkillIcon_skill__iVI30 {
    width: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    display: inline-block;
    image-rendering: crisp-edges;
}
@media (min-width: 0) and (max-width: 979px) {
    .SkillIcon_skill__iVI30 {
        width: 72px;
    }
}
.SkillIcon_skill__iVI30:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 138%;
}

.SkillIcon_skill1__wM6nL {
    background-image: url(/static/media/skill-1.86a2612e1441f329dd7b.png);
}

.SkillIcon_skill2__WOE2t {
    background-image: url(/static/media/skill-2.0e407291fddba8db83a6.png);
}

.SkillIcon_skill3__bKqDq {
    background-image: url(/static/media/skill-3.ca8cfc1d820640a015bc.png);
}

.SkillIcon_skill4__tnXyo {
    background-image: url(/static/media/skill-4.5c5032e0dc66d507f933.png);
}

.SkillIcon_skill5__G8pyz {
    background-image: url(/static/media/skill-5.3de718a36847c9b90aab.png);
}

.SkillIcon_skill6__h7cvE {
    background-image: url(/static/media/skill-6.affa38a49cc0e925f6cf.png);
}

.SkillIcon_skill7__hMAB5 {
    background-image: url(/static/media/skill-7.af9664fcee72513dfd58.png);
}

.SkillIcon_skill8__FJGhT {
    background-image: url(/static/media/skill-8.61c416861f5a97990544.png);
}

.SkillIcon_skill9__7P8Ts {
    background-image: url(/static/media/skill-9.75d52cf560ee40955d7a.png);
}

.SkillIcon_skill10__BzVY2 {
    background-image: url(/static/media/skill-10.fc0956d03f1c1d2a5f60.png);
}

.AvatarMemo_avatar__LhR75 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.AvatarMemo_avatarImageWrapper__3KalZ {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    z-index: 1;

    border: 2px solid rgba(129, 150, 234, 0.7);
    box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    background: linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: AvatarMemo_avatarHighlight__4wPXW 2s linear infinite;
}
@keyframes AvatarMemo_avatarHighlight__4wPXW {
    0% {
        border: 1px solid rgba(129, 150, 234, 0.7);
        box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    }
    50% {
        border: 1px solid rgba(236, 240, 255, 0.7);
        box-shadow: 0 0 20px rgba(177, 193, 255, 0.8), inset 0 0 30px rgba(149, 78, 237, 0.05), inset 0 0 20px rgba(137, 109, 199, 0.8);
    }
    100% {
        border: 1px solid rgba(129, 150, 234, 0.7);
        box-shadow: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    }
}

.AvatarMemo_avatarImage__0mJ8e {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.AvatarMemo_imageContainer__gjjxq {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    margin-bottom: 2vh;
}

.AvatarMemo_image__D1SGo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.AvatarMemo_messageBox__K\+nw8 {
    text-align: center;
    color: #fff;
    padding: 0 1.5rem;
    width: 100%;
    max-width: 90%;
}

.AvatarMemo_completion__bgJ1D {
    font-size: 1.5rem;
    font-weight: bold;
    color: #c59bff;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px #b27bff5d;
}

.AvatarMemo_comment__xfwyq {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes AvatarMemo_slideIn__6VKt6 {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (min-width: 0) and (max-width: 1300px) {
    .AvatarMemo_avatarImageWrapper__3KalZ {
        width: 150px;
        height: 150px;
    }
}

@media (min-width: 0) and (max-width: 979px) {
    .AvatarMemo_avatar__LhR75 {
        flex-direction: row;
        align-items: center;
        padding: 0 20px;
    }
    .AvatarMemo_messageBox__K\+nw8 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .AvatarMemo_imageContainer__gjjxq {
        width: 280px;
        padding-bottom: 280px;
        margin: 0 auto 1.5vh;
    }

    .AvatarMemo_messageBox__K\+nw8 {
        padding: 0 1rem;
    }

    .AvatarMemo_completion__bgJ1D {
        font-size: 1.2rem;
        margin-bottom: 0.8rem;
    }

    .AvatarMemo_comment__xfwyq {
        font-size: 1rem;
        line-height: 1.5;
    }
}
@media (min-width: 0) and (max-width: 600px) {
    .AvatarMemo_avatarImageWrapper__3KalZ {
        width: 100px;
        height: 100px;
    }
    /* .avatar {
        flex-direction: row;
        align-items: center;
        padding: 0 20px;
    } */
}
/* @media (min-width: 980px) {
    .avatar {
        margin-left: -2vw;
    }
}

@media (min-width: 1200px) {
    .avatar {
        margin-left: -5vw;
    }
} */

.ShareLink_fnArea__x0D6F {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
}

/* 確保按鈕可見 */
.ShareLink_fnArea__x0D6F button {
    opacity: 1;
    visibility: visible;
}

.Icon_icon__KCje1 {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  background-color: #a296ff;
  transition: background-color 0.3s ease;
}

@media (max-width: 700px) {
  .Icon_icon__KCje1 {
    width: 14px;
    height: 14px;
  }
}
.Icon_icon1__1-Qsp {
  -webkit-mask: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 0% 0;
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
}

.Icon_icon2__50kzU {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 1.45% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 1.45% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon3__V4tYi {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 2.9% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 2.9% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon4__e4tGW {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 4.35% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 4.35% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon5__OyvgR {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 5.8% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 5.8% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon6__Eo7We {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 7.25% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 7.25% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon7__oTWdt {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 8.7% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 8.7% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon8__0rQ2H {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 10.14% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 10.14% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon9__l1x\+V {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 11.59% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 11.59% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon10__6f3j1 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 13.04% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 13.04% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon11__TYusW {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 14.49% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 14.49% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon12__Mv4TU {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 15.94% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 15.94% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon13__7Q60P {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 17.39% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 17.39% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon14__mg5dj {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 18.84% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 18.84% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon15__Iw06K {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 20.29% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 20.29% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon16__n1C-w {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 21.74% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 21.74% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon17__xnxlr {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 23.19% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 23.19% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon18__0tgO7 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 24.64% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 24.64% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon19__eWDd7 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 26.09% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 26.09% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon20__7COgg {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 27.54% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 27.54% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon21__o-dBS {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 28.99% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 28.99% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon22__rKqqs {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 30.43% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 30.43% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon23__5lFKO {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 31.88% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 31.88% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon24__SzT6N {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 33.33% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 33.33% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon25__QTlce {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 34.78% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 34.78% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon26__atr8k {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 36.23% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 36.23% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon27__pw4hQ {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 37.68% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 37.68% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon28__iamIB {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 39.13% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 39.13% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon29__dFw1Y {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 40.58% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 40.58% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon30__onxNk {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 42.03% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 42.03% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon31__bfcBM {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 43.48% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 43.48% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon32__HjjX3 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 44.93% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 44.93% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon33__fa5Cu {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 46.38% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 46.38% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon34__hDM1U {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 47.83% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 47.83% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon35__NQEpM {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 49.28% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 49.28% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon36__InCGK {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 50.72% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 50.72% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon37__WjkXx {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 52.17% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 52.17% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon38__00yAT {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 53.62% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 53.62% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon39__QXXVW {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 55.07% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 55.07% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon40__dvSxf {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 56.52% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 56.52% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon41__3wKPE {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 57.97% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 57.97% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon42__fYGWX {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 59.42% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 59.42% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon43__8zNkc {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 60.87% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 60.87% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon44__s8zv8 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 62.32% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 62.32% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon45__4L61P {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 63.77% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 63.77% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon46__tbcdp {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 65.22% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 65.22% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon47__f9JCU {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 66.67% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 66.67% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon48__0FTfM {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 68.12% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 68.12% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon49__Kw2Co {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 69.57% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 69.57% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon50__PCnQR {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 71.01% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 71.01% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon51__I6wCe {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 72.46% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 72.46% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon52__WGOC9 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 73.91% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 73.91% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon53__1E\+rJ {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 75.36% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 75.36% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon54__2sP7E {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 76.81% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 76.81% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon55__czps5 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 78.26% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 78.26% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon56__PVrdj {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 79.71% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 79.71% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon57__jO3Vr {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 81.16% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 81.16% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon58__ehWgJ {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 82.61% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 82.61% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon59__Gp4fj {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 84.06% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 84.06% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon60__e4IMo {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 85.51% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 85.51% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon61__aL992 {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 86.96% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 86.96% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon62__bM7pY {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 88.41% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 88.41% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon63__4i49o {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 89.86% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 89.86% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon64__NFV6N {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 91.3% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 91.3% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon65__iim1P {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 92.75% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 92.75% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon66__ZBMNO {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 94.2% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 94.2% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon67__thL6d {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 95.65% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 95.65% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon68__CV\+la {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 97.1% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 97.1% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon69__AxpZR {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 98.55% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 98.55% 0;
  -webkit-mask-size: auto 100%;
}

.Icon_icon70__hK2gl {
  mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  mask-position: 100% 0;
  mask-size: auto 100%;
  -webkit-mask-image: url(/static/media/iconset.086e1f73f1debbd6da61.svg);
  -webkit-mask-position: 100% 0;
  -webkit-mask-size: auto 100%;
}

/* 響應式設計 */
@media (max-width: 700px) {
  .Icon_icon__KCje1 {
    width: 14px;
    height: 14px;
  }
}

.SystemButton_btnSystem__FyApb {
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25em;
    height: 40px;
    font-size: 1rem;
    line-height: 1;
    transition: background-color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
    border-radius: var(--rd-item);
    overflow: hidden;
}
@media (min-width: 0) and (max-width: 600px) {
    .SystemButton_btnSystem__FyApb {
        padding: 0 0.75em;
    }
}
.SystemButton_btnSystem__FyApb::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(30deg, #3a3a9d, #394fdc); /*線性*/
    transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.SystemButton_btnSystem__FyApb::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: linear-gradient(30deg, #4040cd, #3d79fc); /*線性*/
    transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.SystemButton_btnSystem__FyApb span {
    font-size: 1rem;
    font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial;
    color: #d0e1ed;
    transition: color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    line-height: 1.25;
    font-weight: normal;
    display: flex;
    align-items: center;
    letter-spacing: 0.5px;
}

@media (hover: hover) {
    /* .btnSystem:hover {
        background-color: #fff;
    } */

    .SystemButton_btnSystem__FyApb:hover:before {
        opacity: 0;
    }
    /* .btnSystem:hover:after {
        opacity: 1;
    } */
    .SystemButton_btnSystem__FyApb:hover span {
        color: #fff;
    }
}

.SystemButton_large__7u6Dm {
    font-size: 1.125em;
}

.SystemButton_large__7u6Dm span {
    padding-left: 1.5em;
    padding-right: 1.5em;
    height: 48px;
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .SystemButton_large__7u6Dm {
        font-size: 1.5em;
        margin: 10px 20px;
    }

    .SystemButton_large__7u6Dm .SystemButton_icon__TOJxH:before {
        width: 30px;
        height: 30px;
    }

    .SystemButton_large__7u6Dm span {
        height: 60px;
    }
}

@keyframes Confettiful_confettiSlow__MPYT9 {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
  }
}

@keyframes Confettiful_confettiMedium__nc48t {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
  }
}

@keyframes Confettiful_confettiFast__UkpND {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
  }
  100% {
    transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
  }
}

.Confettiful_confettiContainer__XImhC {
  perspective: 700px;
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.Confettiful_confetti__vWu6j {
  position: absolute;
  z-index: 1;
  top: -10px;
  border-radius: 0%;
}

.Confettiful_confettiAnimationSlow__4\+9-c {
  animation: Confettiful_confettiSlow__MPYT9 2.25s linear 1 forwards;
}

.Confettiful_confettiAnimationMedium__i397F {
  animation: Confettiful_confettiMedium__nc48t 1.75s linear 1 forwards;
}

.Confettiful_confettiAnimationFast__QY1Bh {
  animation: Confettiful_confettiFast__UkpND 1.25s linear 1 forwards;
}

.Highlight_highlight__WMGNJ {
  display: block;
  width: 120%;
  height: 20px;
  position: absolute;
  background: url(/static/media/highlight.b5bcf453d7845c621f32.png) no-repeat center center;
  background-size: auto 100%;
  transform: translateY(-50%);
  z-index: 1;
  animation: Highlight_highlightscale__glXh1 4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  height: 30vh;
  left: 0;
  top: 0;
  pointer-events: none;
}

@media (min-width: 0) and (max-width: 979px) {
  .Highlight_highlight__WMGNJ {
    top: 76%;
  }
}

@media (min-width: 980px) {
  .Highlight_highlight__WMGNJ {
    height: 28%;
  }
}

.Highlight_forBottom__\+Ccop {
  top: auto;
  top: initial;
  bottom: 0;
  animation: Highlight_highlightscalebottom__EchS- 6s cubic-bezier(0.215, 0.61, 0.355, 1)
    infinite;
  transform: translateY(50%);
}

@media (min-width: 980px) {
  .Highlight_forBottom__\+Ccop {
    height: 40%;
  }
}

.Highlight_forRight__qZ1O5 {
  top: auto;
  top: initial;
  bottom: 0;
  animation: Highlight_highlightscaleright__nML\+0 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  transform: translate(20%, 50%);
  z-index: 1;
}

@media (min-width: 0) and (max-width: 979px) {
  .Highlight_forRight__qZ1O5 {
    animation: Highlight_highlightscalebottom__EchS- 6s cubic-bezier(0.215, 0.61, 0.355, 1)
      infinite;
    height: 20vh;
  }
}

@media (min-width: 980px) {
  .Highlight_forRight__qZ1O5 {
    height: 40%;
  }
}

@media (min-width: 980px) {
  .Highlight_brief__NGFyg.Highlight_forRight__qZ1O5 {
    left: -18vw;
  }
}

.Highlight_elsaFeedback__KfYgg {
  height: 40px;
  position: absolute;
  top: auto;
  top: initial;
  width: 100%;
  bottom: -1px;
  animation: Highlight_highlightscalebottom__EchS- 6s cubic-bezier(0.215, 0.61, 0.355, 1)
    infinite;
  transform: translateY(50%);
  pointer-events: none;
  -webkit-clip-path: inset(0 0 50% 0);
          clip-path: inset(0 0 50% 0);
}

@media (min-width: 740px) {
  .Highlight_elsaFeedback__KfYgg {
    width: 200%;
    height: 60px;
  }
}

.Highlight_rankingArea__x1mh7 {
  height: 40px;
  left: -50%;
  width: 200%;
  top: 0;
  bottom: auto;
  bottom: initial;
}

@media (min-width: 980px) {
  .Highlight_rankingArea__x1mh7 {
    height: 120px;
  }
}

.Highlight_evolution__lYlEq {
  height: 40px;
  z-index: 9;
  top: 100%;
  bottom: auto;
  bottom: initial;
}

.Highlight_gameNav__9Ihbg {
  bottom: -100px;
  height: 100px;
  width: 160%;
  left: -30%;
  background-size: contain;
}

@keyframes Highlight_highlightscale__glXh1 {
  0% {
    transform: translateY(-50%) scaleY(1);
  }
  52% {
    transform: translateY(-50%) scaleY(0.8);
  }
  100% {
    transform: translateY(-50%) scaleY(1);
  }
}

@keyframes Highlight_highlightscalebottom__EchS- {
  0% {
    transform: translateY(50%) scaleY(1);
  }
  52% {
    transform: translateY(50%) scaleY(0.8);
  }
  100% {
    transform: translateY(50%) scaleY(1);
  }
}

@keyframes Highlight_highlightscaleright__nML\+0 {
  0% {
    transform: translate(20%, 50%) scaleY(1);
  }
  52% {
    transform: translate(20%, 50%) scaleY(0.8);
  }
  100% {
    transform: translate(20%, 50%) scaleY(1);
  }
}

@keyframes Highlight_highlightevo__yjFIB {
  0% {
    top: 100%;
    opacity: 0;
    transform: scale(0.5);
  }
  10% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: 0%;
    transform: scale(0.5);
    opacity: 0;
  }
}

/* 暗背景遮罩（失敗模式） */
.AiFeedbackPopup_V1_5_darkOverlay__dJQcJ {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 9998;
  animation: AiFeedbackPopup_V1_5_fadeIn__0reiZ 0.3s ease;
}

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

/* 彈出視窗容器 */
.AiFeedbackPopup_V1_5_popupContainer__OIFXR {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 10000;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  min-width: 400px;
  max-width: 600px;
  border-radius: 20px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  overflow: hidden;
}

.AiFeedbackPopup_V1_5_popupContainer__OIFXR.AiFeedbackPopup_V1_5_animateIn__IPIIe {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* 成功模式樣式 */
.AiFeedbackPopup_V1_5_successMode__6IiCc {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.AiFeedbackPopup_V1_5_successMode__6IiCc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
}

/* 失敗模式樣式（改為更溫和的鼓勵風格） */
.AiFeedbackPopup_V1_5_failureMode__bpnqT {
  background: linear-gradient(135deg, #3b4a5c 0%, #2d3748 100%);
  border: 2px solid rgba(251, 191, 36, 0.3);
}

.AiFeedbackPopup_V1_5_failureMode__bpnqT::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.08) 0%,
    rgba(251, 146, 60, 0.05) 100%
  );
  pointer-events: none;
}

/* 內容區域 */
.AiFeedbackPopup_V1_5_popupContent__9nCkS {
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* 成功圖示 */
.AiFeedbackPopup_V1_5_successIcon__EZ9-U {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #ffffff;
  font-weight: bold;
  animation: AiFeedbackPopup_V1_5_scaleIn__BY1Ib 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

@keyframes AiFeedbackPopup_V1_5_scaleIn__BY1Ib {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* 鼓勵圖示（失敗模式） */
.AiFeedbackPopup_V1_5_encouragementIcon__BGaNy {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  animation: AiFeedbackPopup_V1_5_scaleIn__BY1Ib 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 16px rgba(251, 191, 36, 0.3);
}

/* 分數區域（成功模式） */
.AiFeedbackPopup_V1_5_scoreSection__0GMq2 {
  margin-bottom: 20px;
}

.AiFeedbackPopup_V1_5_scoreLabel__x50\+L {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  font-weight: 500;
}

.AiFeedbackPopup_V1_5_scoreValue__V3Jyk {
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 建議區域 */
.AiFeedbackPopup_V1_5_adviceSection__NLjMj {
  margin-top: 24px;
}

.AiFeedbackPopup_V1_5_adviceSection__NLjMj p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  font-weight: 500;
}

/* 失敗模式的訊息區域 */
.AiFeedbackPopup_V1_5_messageSection__80uCC {
  margin-bottom: 32px;
}

.AiFeedbackPopup_V1_5_encouragementTitle__0nXBB {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.AiFeedbackPopup_V1_5_encouragementEmoji__aghux {
  font-size: 18px;
  animation: AiFeedbackPopup_V1_5_gentleBounce__nqK-b 2s ease-in-out infinite;
}

.AiFeedbackPopup_V1_5_encouragementEmoji__aghux:nth-child(1) {
  animation-delay: 0s;
}

.AiFeedbackPopup_V1_5_encouragementEmoji__aghux:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes AiFeedbackPopup_V1_5_gentleBounce__nqK-b {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.1);
  }
}

.AiFeedbackPopup_V1_5_adviceText__k8wnS {
  margin: 0;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  font-size: 24px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* OK 按鈕（失敗模式 - 改為更溫和的顏色） */
.AiFeedbackPopup_V1_5_okButton__4ADq3 {
  width: 120px;
  height: 48px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none;
  border-radius: 24px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.AiFeedbackPopup_V1_5_okButton__4ADq3:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
}

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

/* 響應式設計 */
@media (max-width: 768px) {
  .AiFeedbackPopup_V1_5_popupContainer__OIFXR {
    min-width: 320px;
    max-width: 90%;
    top: 15%;
  }

  .AiFeedbackPopup_V1_5_popupContent__9nCkS {
    padding: 32px 24px;
  }

  .AiFeedbackPopup_V1_5_successIcon__EZ9-U,
  .AiFeedbackPopup_V1_5_encouragementIcon__BGaNy {
    width: 64px;
    height: 64px;
    font-size: 36px;
  }

  .AiFeedbackPopup_V1_5_scoreValue__V3Jyk {
    font-size: 36px;
  }

  .AiFeedbackPopup_V1_5_encouragementTitle__0nXBB {
    font-size: 18px;
  }

  .AiFeedbackPopup_V1_5_adviceText__k8wnS {
    font-size: 20px;
  }
}


.ConfettiEffect_confettiContainer__p1mEk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.ConfettiEffect_confetti__z8nBH {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ff6b6b;
  animation: ConfettiEffect_confettiFall__1yO9T linear forwards;
}

@keyframes ConfettiEffect_confettiFall__1yO9T {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}


.StoryBackground_container__dZwrY {
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.StoryBackground_layerFade__aiK2o {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 10%,
    rgba(0, 0, 0, 0.3) 35%,
    rgba(0, 0, 0, 0.2) 75%,
    rgba(32, 24, 37, 0.8) 90%
  );
  z-index: 1;
  pointer-events: none;
  transition: filter 0.35s ease-out;
}

.StoryBackground_image__OR6Zp {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  animation: StoryBackground_fadeInScale__2KmQ4 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.StoryBackground_video__RcFWF {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: StoryBackground_fadeInScale__2KmQ4 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes StoryBackground_fadeInScale__2KmQ4 {
  0% {
    opacity: 0;
    transform: scale(1.15) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 保留原有的慢速縮放動畫作為備用 */
@keyframes StoryBackground_scale-intro__HsGrk {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.SpeakingScoreModule_speakingScoreContainer__psOtM {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 20vw);
    height: calc(100% - 20vh);
    /* Warm, light background */
    background: linear-gradient(145deg, rgba(255, 248, 240, 0.95), rgba(255, 238, 201, 0.9));
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
    border-radius: clamp(20px, 15vw, 50px);
    border: 1px solid rgba(255, 204, 128, 0.5);
    box-shadow: 0 0 20px rgba(255, 167, 38, 0.2), 0 0 30px rgba(255, 224, 178, 0.3), 0 0 40px rgba(255, 224, 178, 0.1),
        inset 0 0 30px rgba(255, 255, 255, 0.5);
    --color-main: #e65100; /* Deep Orange */
    --text-primary: #3e2723; /* Dark Brown */
    --text-secondary: #5d4037; /* Medium Brown */
    --bg-primary: #fff3e0;
}
@media (min-width: 0px) and (max-width: 700px) {
    .SpeakingScoreModule_speakingScoreContainer__psOtM {
        width: calc(100% - 50px);
        height: calc(100% - 50px);
        box-shadow: 0 0 10px rgba(255, 167, 38, 0.2), 0 0 20px rgba(255, 224, 178, 0.2), 0 0 30px rgba(255, 224, 178, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.5);
    }
}

.SpeakingScoreModule_speakingScoreGame__TCLF0 {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 50px;
}

.SpeakingScoreModule_speakingScoreGame__TCLF0::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Warm gradient blobs */
    background: repeating-conic-gradient(from var(--a), #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800);
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.3;
    width: 140%;
    height: 140%;
    z-index: -2;
}

.SpeakingScoreModule_banner__gDTEM {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 0) and (max-width: 979px) {
    .SpeakingScoreModule_banner__gDTEM {
        width: clamp(150px, 50vw, 260px);
        transform: translate(-50%, -70%);
    }
}

@media (min-width: 980px) {
    .SpeakingScoreModule_banner__gDTEM {
        left: -10%;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
    }
}

.SpeakingScoreModule_bannerImage__-lgN0:before {
    padding-bottom: 95.5%;
}

.SpeakingScoreModule_stage__zOOzp {
    font-weight: bold;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 3;
    padding: 20px;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 5vh;
}

@media (min-width: 980px) {
    .SpeakingScoreModule_stage__zOOzp {
        height: clamp(240px, 35vh, 640px);
    }
}

.SpeakingScoreModule_pronunciation__aSXDS {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: clamp(24px, 4.5vh, 48px);
    color: var(--text-primary);
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .SpeakingScoreModule_pronunciationBtn__PBa7V {
        margin: 0 0 8px 10px;
    }
}

.SpeakingScoreModule_pronunciation__aSXDS .red {
    color: #d32f2f; /* Darker red for light bg */
}

.SpeakingScoreModule_pronunciation__aSXDS .green {
    color: #2e7d32; /* Darker green for light bg */
}

.SpeakingScoreModule_pronunciationForSentence__kc2Rs {
    flex-direction: column;
    font-size: clamp(32px, 7vh, 48px);
    margin: 0 auto;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.SpeakingScoreModule_pronunciationControl__fpwfk {
    position: relative;
    width: 90%;
    max-width: 800px;
    margin: 1rem auto;
    padding: 0;
    /* Remove scroll wheel styles */
    max-height: none;
    overflow-y: visible;
}

.SpeakingScoreModule_pronunciationHint__Jg-zQ {
    font-size: clamp(1rem, 2vw, 1.2rem); /* Increased size */
    color: var(--text-secondary);
    text-align: center;
    padding: 0.5rem 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    font-weight: normal;
    opacity: 0.9;
}

.SpeakingScoreModule_feedbackContainer__oap-s {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center; /* Center align content */
}

.SpeakingScoreModule_feedbackSection__slWaP {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    align-items: center; /* Center align content */
}

.SpeakingScoreModule_feedbackSection__slWaP:not(:last-child) {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(230, 81, 0, 0.2);
}

.SpeakingScoreModule_feedbackLabel__C72GZ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(1rem, 1.5vw, 1.2rem); /* Increased size */
    font-weight: bold;
    color: var(--color-main);
    margin-bottom: 0.5rem;
}

.SpeakingScoreModule_feedbackIcon__rAALk {
    font-size: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Primary Information - Strengths */
.SpeakingScoreModule_feedbackContent__T140U {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: var(--text-primary);
    line-height: 1.6;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    max-width: 90%;
}

.SpeakingScoreModule_primaryInfo__FMXyy {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem); /* Significantly larger for primary info */
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: none;
}

.SpeakingScoreModule_improvementItem__qPPUm {
    margin-bottom: 0.75rem;
    padding-left: 0; /* Remove padding as we are centering */
    position: relative;
    /* Secondary Information - Improvements */
    color: var(--text-secondary);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
}

.SpeakingScoreModule_improvementItem__qPPUm::before {
    content: "•";
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--color-main);
    font-weight: bold;
}

.SpeakingScoreModule_improvementItem__qPPUm:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .SpeakingScoreModule_pronunciationControl__fpwfk {
        width: 95%;
    }

    .SpeakingScoreModule_feedbackContainer__oap-s {
        padding: 0.75rem 0;
        gap: 1rem;
    }

    .SpeakingScoreModule_feedbackSection__slWaP:not(:last-child) {
        padding-bottom: 1rem;
    }
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .SpeakingScoreModule_pronunciationForSentenceBtn__34n2I {
        transform: scale(0.8) translate(-0.5em, -0.5em);
    }
}

.SpeakingScoreModule_titleText__M7hY0 {
    font-size: clamp(32px, 6vh, 54px);
    font-weight: bold;
    text-align: center;
    color: var(--text-primary);
    margin-top: clamp(20px, 4vh, 40px);
    margin-bottom: clamp(30px, 5vh, 50px);
}
.SpeakingScoreModule_forSentence__W2UGB {
    font-size: clamp(16px, 3vh, 50px);
    font-size: clamp(32px, 3vh, 50px);
    margin-top: 0;
    margin-bottom: 30px;
}

.SpeakingScoreModule_detectedLabel__nH7c- {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 768px) {
    .SpeakingScoreModule_titleText__M7hY0 {
        font-size: clamp(32px, 4.5vh, 54px);
    }
    .SpeakingScoreModule_forSentence__W2UGB {
        font-size: clamp(16px, 3vh, 50px);
    }
}

.SpeakingScoreModule_titleText__M7hY0 strong {
    color: var(--color-main);
}

@keyframes SpeakingScoreModule_pulse__5MHSK {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.SpeakingScoreModule_fnBar__GRUjv {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: clamp(20px, 4vh, 40px);
    margin-top: auto;
    min-height: 220px;
}
@media (max-width: 768px) {
    .SpeakingScoreModule_fnBar__GRUjv {
        padding-bottom: 0;
    }
}
.SpeakingScoreModule_fnBarDiv__E6dHm {
    flex: 1 1;
}

.SpeakingScoreModule_practiceCount__5K1ap {
    color: var(--text-secondary);
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    position: absolute;
    z-index: 10;
    margin-bottom: 0;
    display: inline-block;
    width: auto;
    text-align: right;
}

.SpeakingScoreModule_practiceCount__5K1ap strong {
    color: var(--color-main);
    font-weight: bold;
}

.SpeakingScoreModule_partCenter__qOQoq {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2vh 0;
    gap: 20px;
}

@media (max-width: 768px) {
    .SpeakingScoreModule_partCenter__qOQoq {
        margin: 0;
    }
}

.SpeakingScoreModule_score__kfUMU {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: var(--color-main);
    margin-bottom: 0;
    font-weight: bold;
    display: inline-block;
}

.SpeakingScoreModule_highlight__WNihr {
    height: 40px;
    position: absolute;
    top: auto;
    top: initial;
    width: 100%;
    bottom: -1px;
    animation: SpeakingScoreModule_highlightscalebottom__7KRek 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    transform: translateY(50%);
    pointer-events: none;
    -webkit-clip-path: inset(0 0 50% 0);
            clip-path: inset(0 0 50% 0);
}

@media (min-width: 740px) {
    .SpeakingScoreModule_highlight__WNihr {
        width: 200%;
        height: 60px;
    }
}

@keyframes SpeakingScoreModule_rotating__NoqC3 {
    0% {
        --a: 0deg;
    }
    100% {
        --a: 360deg;
    }
}

@keyframes SpeakingScoreModule_highlightscalebottom__7KRek {
    0% {
        transform: translateY(50%) scaleY(1);
    }
    50% {
        transform: translateY(50%) scaleY(1.5);
    }
    100% {
        transform: translateY(50%) scaleY(1);
    }
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo {
    height: 45px;
    background: none;
    border: none;
    color: var(--color-main);
    border: 1px solid var(--color-main);
    border-radius: 25px;
    padding: 0 2em;
    font-size: 1em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    width: -webkit-max-content;
    width: max-content;
    justify-content: center;
    position: relative;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    margin: 0;
}

@media (min-width: 0px) and (max-width: 800px) {
    .SpeakingScoreModule_speakingScoreButton__r1Ieo {
        width: 80%;
        font-size: 1em;
    }
}
@media (min-width: 1600px) and (min-height: 800px) {
    .SpeakingScoreModule_speakingScoreButton__r1Ieo {
        height: 64px;
        font-size: 1.125em;
    }
}
.SpeakingScoreModule_speakingScoreButton__r1Ieo span {
    font-weight: normal;
    letter-spacing: 0;
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo .imrs-icon {
    margin-left: 10px;
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo .imrs-icon:before {
    background-color: var(--color-main);
}

@media (hover: hover) {
    .SpeakingScoreModule_speakingScoreButton__r1Ieo:hover {
        background: none;
        box-shadow: none;
        background-color: var(--color-main);
        color: #fff;
    }
    .SpeakingScoreModule_speakingScoreButton__r1Ieo:hover .imrs-icon:before {
        background-color: #fff;
    }
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    background-color: rgba(150, 150, 150, 0.1) !important;
    border-color: rgba(150, 150, 150, 0.3) !important;
    color: rgba(0, 0, 0, 0.3) !important;
    pointer-events: none;
    transition: none;
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo:disabled:hover {
    background-color: rgba(150, 150, 150, 0.1) !important;
    border-color: rgba(150, 150, 150, 0.3) !important;
    color: rgba(0, 0, 0, 0.3) !important;
    box-shadow: none !important;
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo:disabled span {
    color: rgba(0, 0, 0, 0.3) !important;
}

.SpeakingScoreModule_speakingScoreButton__r1Ieo:disabled .imrs-icon:before {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.SpeakingScoreModule_voiceInput__6hEft {
    width: 70px;
    height: 70px;
    box-shadow: none;
    border-radius: 50%;
    /* Warm gradient for microphone button */
    background: linear-gradient(to bottom, #bf360c, #e64a19);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    font-family: var(--font-default);
}

.SpeakingScoreModule_voiceInput__6hEft .imrs-icon::before {
    width: 30px;
    height: 30px;
    background-color: #fff;
}

@media (min-width: 1600px) and (min-height: 800px) {
    .SpeakingScoreModule_voiceInput__6hEft {
        width: 80px;
        height: 80px;
    }
    .SpeakingScoreModule_voiceInput__6hEft .imrs-icon::before {
        width: 32px;
        height: 32px;
    }
}

.SpeakingScoreModule_voiceInput__6hEft .icon:before {
    width: 30px;
    height: 30px;
    background-color: #fff;
}

.SpeakingScoreModule_voiceInput__6hEft.SpeakingScoreModule_active__4TunJ {
    background: linear-gradient(to bottom, #bf360c, #e64a19);
}

.SpeakingScoreModule_voiceInput__6hEft.SpeakingScoreModule_activePause__yjPIz {
    background: linear-gradient(to bottom, #3e2723, #5d4037); /* Dark Brown for pause */
}

.SpeakingScoreModule_voiceInput__6hEft.SpeakingScoreModule_activePause__yjPIz .imrs-icon::before {
    -webkit-mask-position: 30.43% 0;
}

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

.SpeakingScoreModule_audioReplay__IRf8O {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Shift green play button to orange/warm tone */
    filter: hue-rotate(-110deg);
}

.SpeakingScoreModule_audioReplay__IRf8O::after {
    content: "播放";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .SpeakingScoreModule_audioReplay__IRf8O::after {
        font-size: 0.65rem;
        bottom: -18px;
    }
}

.SpeakingScoreModule_audioPlayerContainer__ZkZSG {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
}

.SpeakingScoreModule_voiceInput__6hEft.SpeakingScoreModule_disabled__63rAf {
    cursor: not-allowed;
    opacity: 0.5;
    background: linear-gradient(to bottom, #bdbdbd, #9e9e9e);
    box-shadow: none;
}

.SpeakingScoreModule_voiceInput__6hEft.SpeakingScoreModule_disabled__63rAf .imrs-icon::before {
    background-color: #e0e0e0;
}

.SpeakingScoreModule_scoreInfo__zhywy {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    white-space: nowrap;
    z-index: 10;
    height: 45px;
}

.SpeakingScoreModule_bottomInfoBar__U99Gs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-radius: 15px;
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.SpeakingScoreModule_statusInfo__bifBh {
    flex: 1 1;
    text-align: left;
    min-width: 25%;
    font-size: 0.9rem;
    position: absolute;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vh, 2rem);
    z-index: 10;
}

.SpeakingScoreModule_practiceInfo__jefQF {
    flex: 1 1;
    text-align: right;
    min-width: 25%;
    position: absolute;
    right: clamp(1rem, 3vw, 2rem);
    bottom: calc(clamp(1.25rem, 3.5vh, 2.25rem) + 50px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
@media (max-width: 768px) {
    .SpeakingScoreModule_practiceInfo__jefQF {
        justify-content: center;
    }
}

.SpeakingScoreModule_feedbackText__h1cwC {
    color: var(--text-primary);
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    display: inline-block;
}

.SpeakingScoreModule_nextButtonContainer__Yeu3F {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    bottom: 0;
    right: 0;
}

@media (max-width: 768px) {
    .SpeakingScoreModule_bottomInfoBar__U99Gs {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        justify-content: center;
    }

    .SpeakingScoreModule_scoreInfo__zhywy {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        order: 2;
        min-width: 50%;
        text-align: center;
        height: auto;
    }

    .SpeakingScoreModule_practiceInfo__jefQF {
        position: relative;
        right: auto;
        bottom: auto;
        order: 3;
        min-width: 50%;
        text-align: center;
    }

    .SpeakingScoreModule_practiceCount__5K1ap {
        position: relative;
        right: auto;
        bottom: auto;
    }

    .SpeakingScoreModule_nextButtonContainer__Yeu3F {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .SpeakingScoreModule_speakingScoreButton__r1Ieo {
        width: 80%;
        width: calc(100% - 100px);
        border-radius: 50px 50px 0 0;
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    .SpeakingScoreModule_pronunciationForSentence__kc2Rs {
        font-size: clamp(24px, 6vh, 36px);
    }

    .SpeakingScoreModule_pronunciationControl__fpwfk {
        width: 90%;
        max-height: clamp(60px, 12vh, 100px);
    }

    .SpeakingScoreModule_pronunciationHint__Jg-zQ {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .SpeakingScoreModule_score__kfUMU {
        font-size: 1.25rem;
    }

    .SpeakingScoreModule_feedbackText__h1cwC {
        font-size: 0.75rem;
    }

    .SpeakingScoreModule_bottomInfoBar__U99Gs {
        width: 95%;
    }
}

@media (min-width: 768px) {
    .SpeakingScoreModule_nextButtonContainer__Yeu3F .SpeakingScoreModule_speakingScoreButton__r1Ieo {
        border-right: none;
        border-bottom: none;
        border-radius: clamp(20px, 15vw, 50px) 0 clamp(20px, 15vw, 50px) 0;
        height: clamp(50px, 6vh, 90px);
        padding-left: 3em;
        padding-right: 3.2em;
    }
}


.BasePopup_popupArea__PuEg9 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  overflow: hidden;
}

.BasePopup_dialogueContainer__ZqMg7 {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.BasePopup_container__c\+GcV {
  overflow: hidden;
  position: relative;
  /* background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border-radius: 12px; */
  /* overflow-y: visible; */
  /* box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px, rgba(0, 0, 0, 0.12) 0px 4px 8px;
    color: #2d3748;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15); */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.BasePopup_popupArea__PuEg9.BasePopup_for-elsa__rawXI .BasePopup_container__c\+GcV {
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
}

.BasePopup_closeBtn__LkqZ5 {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-size: 1.2rem;
  z-index: 100;
}

/*手機*/
@media (min-width: 0px) and (max-width: 700px) {
  .BasePopup_closeBtn__LkqZ5 {
    top: 15px;
    right: 15px;
  }
}

.BasePopup_closeBtn__LkqZ5 .imrs-icon {
}

.BasePopup_closeBtn__LkqZ5 .imrs-icon::before {
  width: 20px;
  height: 20px;
  background-color: var(--bg-primary);
}

.BasePopup_closeBtn__LkqZ5:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

.BasePopup_active__ga2yo {
  pointer-events: auto;
  opacity: 1;
}
/* @media (min-width: 740px) {
    .container {
        width: clamp(500px, 60vw, 960px);
    }
} */

/* ImageGenerationGame.module.css */

.ImageGenerationGame_gameContainer__MEHNl {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 20vw);
  height: calc(100% - 20vh);
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(41, 25, 65, 0.7));
  -webkit-backdrop-filter: blur(30px);
          backdrop-filter: blur(30px);
  border-radius: clamp(20px, 15vw, 50px);
  border: 1px solid rgba(179, 194, 255, 0.5);
  box-shadow: 0 0 20px rgba(152, 173, 255, 0.5), 0 0 30px rgba(135, 159, 253, 0.3), 0 0 40px rgba(135, 159, 253, 0.1),
      inset 0 0 30px rgba(135, 159, 253, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

@media (min-width: 0px) and (max-width: 700px) {
  .ImageGenerationGame_gameContainer__MEHNl {
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    box-shadow: 0 0 10px rgba(152, 173, 255, 0.3), 0 0 20px rgba(135, 159, 253, 0.2), 0 0 30px rgba(135, 159, 253, 0.1),
        inset 0 0 20px rgba(135, 159, 253, 0.3);
  }
}

.ImageGenerationGame_gameContent__xqeWG {
  position: relative;
  isolation: isolate;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 50px;
}

.ImageGenerationGame_gameContent__xqeWG::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from var(--a), #88a0ff, #4741ff, #1e4fff, #48b0ff, #a861ff);
  border-radius: 50%;
  filter: blur(45px);
  opacity: 0.5;
  width: 140%;
  height: 140%;
  z-index: -2;
  animation: ImageGenerationGame_rotating__h23zT 20s linear infinite;
}

@keyframes ImageGenerationGame_rotating__h23zT {
  0% {
    --a: 0deg;
  }
  100% {
    --a: 360deg;
  }
}

/* 關閉按鈕 */
.ImageGenerationGame_closeButton__mkB\+8 {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.3s ease;
}

.ImageGenerationGame_closeButton__mkB\+8:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.ImageGenerationGame_closeButton__mkB\+8:disabled,
.ImageGenerationGame_closeButton__mkB\+8.ImageGenerationGame_disabled__dElIq {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Banner */
.ImageGenerationGame_banner__WxVWj {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  display: none;
}

@media (min-width: 0) and (max-width: 979px) {
  .ImageGenerationGame_banner__WxVWj {
    width: clamp(150px, 50vw, 260px);
    transform: translate(-50%, -70%);
  }
}

@media (min-width: 980px) {
  .ImageGenerationGame_banner__WxVWj {
    left: -10%;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
  }
}

.ImageGenerationGame_bannerImage__VZX5Y {
  width: 100%;
  height: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.ImageGenerationGame_bannerImage__VZX5Y:before {
  content: "";
  display: block;
  padding-bottom: 95.5%;
}

/* 主要內容區域 */
.ImageGenerationGame_stage__Ker1V {
  font-weight: bold;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 3;
  padding: 20px;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5vh;
}

@media (min-width: 980px) {
  .ImageGenerationGame_stage__Ker1V {
    height: clamp(240px, 35vh, 640px);
  }
}

/* 題目區域 */
.ImageGenerationGame_questionSection__8KHYO {
  text-align: center;
  min-width: 80%;
}

.ImageGenerationGame_questionTitle__kJeq9 {
  font-size: clamp(24px, 4vh, 36px);
  color: #fff;
  margin-bottom: 1rem;
  font-weight: 600;
}

.ImageGenerationGame_questionText__OpIju {
  font-size: clamp(16px, 2.5vh, 20px);
  color: #b3c2ff;
  margin-bottom: 1rem;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
  font-weight: normal;
}

/* 圖片區域 */
.ImageGenerationGame_imageSection__RaCII {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 300px;
  min-width: 80%;
}

.ImageGenerationGame_imageFrame__A\+EoK {
  height: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(179, 194, 255, 0.3);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.ImageGenerationGame_generatedImage__yEdvI {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 13px;
  animation: ImageGenerationGame_fadeIn__8fiqR 0.5s ease-in;
}

@media (max-width: 768px) {
  .ImageGenerationGame_imageFrame__A\+EoK {
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .ImageGenerationGame_imageFrame__A\+EoK {
    max-width: 280px;
  }
}

@keyframes ImageGenerationGame_fadeIn__8fiqR {
  from { 
    opacity: 0; 
    transform: scale(0.95); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

.ImageGenerationGame_imagePlaceholder__cHk-O {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  text-align: center;
}

.ImageGenerationGame_placeholderIcon__pJ4Is {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.ImageGenerationGame_imagePlaceholder__cHk-O p {
  margin: 0;
  font-weight: normal;
}

/* 載入動畫 */
.ImageGenerationGame_imageLoadingContainer__AXFa8 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.ImageGenerationGame_loadingSpinner__1duZr {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top: 3px solid #4cc9f0;
  border-radius: 50%;
  animation: ImageGenerationGame_spin__UmJ5n 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes ImageGenerationGame_spin__UmJ5n {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ImageGenerationGame_loadingText__8j81c {
  font-size: 18px;
  color: #4cc9f0;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.ImageGenerationGame_loadingPrompt__5Y1w\+ {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  max-width: 300px;
  line-height: 1.3;
  font-weight: normal;
}

/* 輸入控制區域 */
.ImageGenerationGame_inputControl__MsIPX {
  position: relative;
  max-height: clamp(60px, 10vh, 80px);
  margin: 0.75rem auto;
  padding: 0;
  width: -webkit-fit-content;
  width: fit-content;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

.ImageGenerationGame_inputHint__X75Wk {
  font-size: clamp(0.75rem, 1.5vw, 0.9rem);
  color: #fff;
  text-align: center;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  font-weight: normal;
}

/* 功能按鈕區 */
.ImageGenerationGame_fnBar__IY3Ki {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: clamp(20px, 4vh, 40px);
  margin-top: auto;
  min-height: 200px;
}

@media (max-width: 768px) {
  .ImageGenerationGame_fnBar__IY3Ki {
    padding-bottom: 0;
    min-height: 180px;
  }
}

/* 輸入區域 */
.ImageGenerationGame_inputSection__l2dxP {
  width: 90%;
  max-width: 500px;
  margin-bottom: 0.5rem;
}

.ImageGenerationGame_textArea__ayH2F {
  width: 100%;
  min-height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(179, 194, 255, 0.3);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0.75rem;
  resize: vertical;
  font-family: inherit;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.ImageGenerationGame_textArea__ayH2F:focus {
  outline: none;
  border-color: #4cc9f0;
  background: rgba(255, 255, 255, 0.15);
}

.ImageGenerationGame_textArea__ayH2F::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.ImageGenerationGame_textArea__ayH2F:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ImageGenerationGame_charCount__qmGB3 {
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.25rem;
}

/* 底部按鈕區 */
.ImageGenerationGame_bottomBar__i2W\+g {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 500px;
}

.ImageGenerationGame_statusInfo__a87aD {
  flex: 1 1;
  text-align: left;
}

.ImageGenerationGame_successMessage__Xug1f {
  color: #4cc9f0;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 600;
}

.ImageGenerationGame_buttonGroup__SPYMz {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* 按鈕樣式 */
.ImageGenerationGame_generateButton__LZN5c, .ImageGenerationGame_nextButton__BGGg9 {
  height: 45px;
  background: none;
  border: 1px solid #4cc9f0;
  border-radius: 25px;
  padding: 0 2em;
  font-size: 1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  color: #4cc9f0;
  font-weight: normal;
  min-width: 120px;
}

@media (min-width: 1600px) and (min-height: 800px) {
  .ImageGenerationGame_generateButton__LZN5c, .ImageGenerationGame_nextButton__BGGg9 {
    height: 56px;
    font-size: 1.125em;
  }
}

.ImageGenerationGame_generateButton__LZN5c:hover, .ImageGenerationGame_nextButton__BGGg9:hover {
  background-color: #4cc9f0;
  color: #000;
  transform: translateY(-2px);
}

.ImageGenerationGame_generateButton__LZN5c:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  background-color: rgba(150, 150, 150, 0.3) !important;
  border-color: rgba(150, 150, 150, 0.5) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  pointer-events: none;
  transition: none;
}

.ImageGenerationGame_generateButton__LZN5c.ImageGenerationGame_generating__WnsdX {
  background-color: rgba(76, 201, 240, 0.1);
}

.ImageGenerationGame_buttonSpinner__QULRL {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(76, 201, 240, 0.3);
  border-top: 2px solid #4cc9f0;
  border-radius: 50%;
  animation: ImageGenerationGame_spin__UmJ5n 1s linear infinite;
  margin-right: 0.5rem;
}

.ImageGenerationGame_nextButton__BGGg9 {
  border-color: #00ff88;
  color: #00ff88;
}

.ImageGenerationGame_nextButton__BGGg9:hover {
  background-color: #00ff88;
  color: #000;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .ImageGenerationGame_questionTitle__kJeq9 {
    font-size: clamp(20px, 5vw, 28px);
  }
  
  .ImageGenerationGame_questionText__OpIju {
    font-size: clamp(14px, 4vw, 18px);
    max-width: 90%;
  }
  
  .ImageGenerationGame_imageFrame__A\+EoK {
    height: 200px;
    max-width: 300px;
  }
  
  .ImageGenerationGame_inputSection__l2dxP {
    width: 95%;
  }
  
  .ImageGenerationGame_textArea__ayH2F {
    min-height: 70px;
    font-size: 13px;
  }
  
  .ImageGenerationGame_bottomBar__i2W\+g {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  
  .ImageGenerationGame_buttonGroup__SPYMz {
    width: 100%;
    justify-content: center;
  }
  
  .ImageGenerationGame_generateButton__LZN5c, .ImageGenerationGame_nextButton__BGGg9 {
    width: 140px;
    font-size: 0.9em;
  }
  
  .ImageGenerationGame_statusInfo__a87aD {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .ImageGenerationGame_imageFrame__A\+EoK {
    height: 180px;
    max-width: 280px;
  }
  
  .ImageGenerationGame_textArea__ayH2F {
    min-height: 60px;
    font-size: 12px;
  }
  
  .ImageGenerationGame_generateButton__LZN5c, .ImageGenerationGame_nextButton__BGGg9 {
    width: 120px;
    height: 40px;
    font-size: 0.85em;
  }
  
  .ImageGenerationGame_buttonGroup__SPYMz {
    gap: 0.5rem;
  }
}
.AiFeedbackPopup_V1_5_darkOverlay__HShrb {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 9998;
  animation: AiFeedbackPopup_V1_5_fadeIn__p9wvT 0.3s ease;
}

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

.AiFeedbackPopup_V1_5_popupContainer__tSMR2 {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 10000;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
  min-width: 400px;
  max-width: 600px;
  border-radius: 20px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  overflow: hidden;
}

.AiFeedbackPopup_V1_5_popupContainer__tSMR2.AiFeedbackPopup_V1_5_animateIn__Jl6SK {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.AiFeedbackPopup_V1_5_successMode__n7tOS {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.AiFeedbackPopup_V1_5_successMode__n7tOS::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
}

.AiFeedbackPopup_V1_5_failureMode__N7XUm {
  background: linear-gradient(135deg, #3b4a5c 0%, #2d3748 100%);
  border: 2px solid rgba(251, 191, 36, 0.3);
}

.AiFeedbackPopup_V1_5_failureMode__N7XUm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.08) 0%,
    rgba(251, 146, 60, 0.05) 100%
  );
  pointer-events: none;
}

.AiFeedbackPopup_V1_5_popupContent__qL2so {
  padding: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.AiFeedbackPopup_V1_5_successIcon__DNuLj {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #ffffff;
  font-weight: bold;
  animation: AiFeedbackPopup_V1_5_scaleIn__J9GTY 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

@keyframes AiFeedbackPopup_V1_5_scaleIn__J9GTY {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.AiFeedbackPopup_V1_5_encouragementIcon__Z3L1k {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 146, 60, 0.2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  animation: AiFeedbackPopup_V1_5_scaleIn__J9GTY 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 16px rgba(251, 191, 36, 0.3);
}

.AiFeedbackPopup_V1_5_scoreSection__ZrBxm {
  margin-bottom: 20px;
}

.AiFeedbackPopup_V1_5_scoreLabel__nwJ9A {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  font-weight: 500;
}

.AiFeedbackPopup_V1_5_scoreValue__4DUvH {
  font-size: 48px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.AiFeedbackPopup_V1_5_adviceSection__JkeGu {
  margin-top: 24px;
}

.AiFeedbackPopup_V1_5_adviceSection__JkeGu p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
  font-size: 18px;
  font-weight: 500;
}

.AiFeedbackPopup_V1_5_messageSection__EK21Y {
  margin-bottom: 32px;
}

.AiFeedbackPopup_V1_5_encouragementTitle__iBERm {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.AiFeedbackPopup_V1_5_encouragementEmoji__taJzr {
  font-size: 18px;
  animation: AiFeedbackPopup_V1_5_gentleBounce__CnCHY 2s ease-in-out infinite;
}

.AiFeedbackPopup_V1_5_encouragementEmoji__taJzr:nth-child(1) {
  animation-delay: 0s;
}

.AiFeedbackPopup_V1_5_encouragementEmoji__taJzr:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes AiFeedbackPopup_V1_5_gentleBounce__CnCHY {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.1);
  }
}

.AiFeedbackPopup_V1_5_adviceText__6c-dR {
  margin: 0;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  font-size: 24px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.AiFeedbackPopup_V1_5_okButton__Rbb0f {
  width: 120px;
  height: 48px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none;
  border-radius: 24px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
}

.AiFeedbackPopup_V1_5_okButton__Rbb0f:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(251, 191, 36, 0.5);
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
}

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

@media (max-width: 768px) {
  .AiFeedbackPopup_V1_5_popupContainer__tSMR2 {
    min-width: 320px;
    max-width: 90%;
    top: 15%;
  }

  .AiFeedbackPopup_V1_5_popupContent__qL2so {
    padding: 32px 24px;
  }

  .AiFeedbackPopup_V1_5_successIcon__DNuLj,
  .AiFeedbackPopup_V1_5_encouragementIcon__Z3L1k {
    width: 64px;
    height: 64px;
    font-size: 36px;
  }

  .AiFeedbackPopup_V1_5_scoreValue__4DUvH {
    font-size: 36px;
  }

  .AiFeedbackPopup_V1_5_encouragementTitle__iBERm {
    font-size: 18px;
  }

  .AiFeedbackPopup_V1_5_adviceText__6c-dR {
    font-size: 20px;
  }
}


.ConfettiEffect_confettiContainer__Ot\+MI {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.ConfettiEffect_confetti__uKUDs {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #ff6b6b;
  animation: ConfettiEffect_confettiFall__zL34S linear forwards;
}

@keyframes ConfettiEffect_confettiFall__zL34S {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}


.TextReadingDisplay_textReadingContainer__vzYRS {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.TextReadingDisplay_content__2WrNl {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 50px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 200px);
  font-size: 18px;
  line-height: 2;
  color: #1a1a1a;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  text-align: justify;
}

/* HTML 元素樣式 */
.TextReadingDisplay_content__2WrNl h1,
.TextReadingDisplay_content__2WrNl h1 {
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 32px 0 20px 0 !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  border-bottom: 3px solid #e0e0e0 !important;
  padding-bottom: 12px !important;
}

.TextReadingDisplay_content__2WrNl h2,
.TextReadingDisplay_content__2WrNl h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 28px 0 16px 0 !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  border-bottom: 2px solid #e0e0e0 !important;
  padding-bottom: 10px !important;
}

.TextReadingDisplay_content__2WrNl h3,
.TextReadingDisplay_content__2WrNl h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 24px 0 14px 0 !important;
  color: #333 !important;
  line-height: 1.4 !important;
}

.TextReadingDisplay_content__2WrNl h4,
.TextReadingDisplay_content__2WrNl h4 {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 20px 0 12px 0 !important;
  color: #444 !important;
  line-height: 1.4 !important;
}

.TextReadingDisplay_content__2WrNl p,
.TextReadingDisplay_content__2WrNl p {
  margin: 0 0 20px 0 !important;
  font-size: 18px !important;
  line-height: 2 !important;
  color: #1a1a1a !important;
  text-align: justify !important;
}

.TextReadingDisplay_content__2WrNl ul,
.TextReadingDisplay_content__2WrNl ol,
.TextReadingDisplay_content__2WrNl ul,
.TextReadingDisplay_content__2WrNl ol {
  margin: 20px 0 20px 32px !important;
  padding-left: 8px !important;
}

.TextReadingDisplay_content__2WrNl li,
.TextReadingDisplay_content__2WrNl li {
  margin-bottom: 12px !important;
  line-height: 1.8 !important;
  font-size: 18px !important;
  color: #1a1a1a !important;
}

.TextReadingDisplay_content__2WrNl ul li,
.TextReadingDisplay_content__2WrNl ul li {
  list-style-type: disc !important;
}

.TextReadingDisplay_content__2WrNl ol li,
.TextReadingDisplay_content__2WrNl ol li {
  list-style-type: decimal !important;
}

.TextReadingDisplay_content__2WrNl strong,
.TextReadingDisplay_content__2WrNl b,
.TextReadingDisplay_content__2WrNl strong,
.TextReadingDisplay_content__2WrNl b {
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.TextReadingDisplay_content__2WrNl em,
.TextReadingDisplay_content__2WrNl i,
.TextReadingDisplay_content__2WrNl em,
.TextReadingDisplay_content__2WrNl i {
  font-style: italic !important;
  color: #555 !important;
}

.TextReadingDisplay_content__2WrNl code,
.TextReadingDisplay_content__2WrNl code {
  background: #f5f5f5 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-family: "Courier New", "Monaco", "Consolas", monospace !important;
  font-size: 16px !important;
  color: #d63384 !important;
  border: 1px solid #e0e0e0 !important;
}

.TextReadingDisplay_content__2WrNl pre,
.TextReadingDisplay_content__2WrNl pre {
  background: #2d2d2d !important;
  color: #f8f8f2 !important;
  padding: 20px !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 24px 0 !important;
  border: 1px solid #444 !important;
}

.TextReadingDisplay_content__2WrNl pre code,
.TextReadingDisplay_content__2WrNl pre code {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  color: inherit !important;
  font-size: 14px !important;
}

.TextReadingDisplay_content__2WrNl blockquote,
.TextReadingDisplay_content__2WrNl blockquote {
  border-left: 4px solid #2196f3 !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  background: #f5f9ff !important;
  border-radius: 0 8px 8px 0 !important;
  color: #333 !important;
  font-style: normal !important;
}

.TextReadingDisplay_content__2WrNl blockquote p,
.TextReadingDisplay_content__2WrNl blockquote p {
  margin-bottom: 0 !important;
}

.TextReadingDisplay_content__2WrNl img,
.TextReadingDisplay_content__2WrNl img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  margin: 24px 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.TextReadingDisplay_content__2WrNl hr,
.TextReadingDisplay_content__2WrNl hr {
  border: none !important;
  border-top: 2px solid #e0e0e0 !important;
  margin: 32px 0 !important;
}

.TextReadingDisplay_content__2WrNl a,
.TextReadingDisplay_content__2WrNl a {
  color: #2196f3 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: all 0.2s !important;
}

.TextReadingDisplay_content__2WrNl a:hover,
.TextReadingDisplay_content__2WrNl a:hover {
  border-bottom-color: #2196f3 !important;
  color: #1976d2 !important;
}

.TextReadingDisplay_content__2WrNl table,
.TextReadingDisplay_content__2WrNl table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
}

.TextReadingDisplay_content__2WrNl table th,
.TextReadingDisplay_content__2WrNl table td,
.TextReadingDisplay_content__2WrNl table th,
.TextReadingDisplay_content__2WrNl table td {
  padding: 12px !important;
  border: 1px solid #e0e0e0 !important;
  text-align: left !important;
}

.TextReadingDisplay_content__2WrNl table th,
.TextReadingDisplay_content__2WrNl table th {
  background: #f5f5f5 !important;
  font-weight: 600 !important;
}

/* 滾動條樣式 */
.TextReadingDisplay_content__2WrNl::-webkit-scrollbar {
  width: 8px;
}

.TextReadingDisplay_content__2WrNl::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.TextReadingDisplay_content__2WrNl::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.TextReadingDisplay_content__2WrNl::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .TextReadingDisplay_content__2WrNl {
    padding: 24px 28px;
    font-size: 16px;
    line-height: 1.8;
    max-height: calc(100vh - 150px);
  }

  .TextReadingDisplay_content__2WrNl h1,
  .TextReadingDisplay_content__2WrNl h1 {
    font-size: 26px !important;
  }

  .TextReadingDisplay_content__2WrNl h2,
  .TextReadingDisplay_content__2WrNl h2 {
    font-size: 22px !important;
  }

  .TextReadingDisplay_content__2WrNl h3,
  .TextReadingDisplay_content__2WrNl h3 {
    font-size: 20px !important;
  }
}

.CountBoard_countBoard__B5CGG {
    position: absolute;
    padding: 0;
    display: inline-flex;
    width: -webkit-max-content;
    width: max-content;
    font-size: 1.375em;
    font-family: var(--font-default);
    letter-spacing: 1px;
    background-color: transparent;
    min-width: 150px;
    text-align: center;
    /* background: linear-gradient(to bottom, rgba(19, 37, 43, 0.9), rgba(19, 37, 43, 0.5)); */
    top: 0;
    left: 50%;
    transform: translate(-50%, -150%);
}

.CountBoard_wrapper__9WJGC {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    position: relative;
    z-index: 6;
}

.CountBoard_wrapper__9WJGC:before {
    background-color: transparent;
    display: none;
}

.CountBoard_count__h31gE {
    margin-left: 0;
    color: #f4feff;
    margin-top: 2px;
    justify-content: center;
    line-height: 1;
    text-shadow: rgba(201, 212, 255, 0.8) 0px 0px 8px, rgba(109, 127, 199, 0.7) 0px 0px 20px;
}

.CountBoard_countBoard__B5CGG:before,
.CountBoard_countBoard__B5CGG:after {
    -webkit-mask-image: initial;
            mask-image: initial;
    box-sizing: border-box;
    content: "";
    display: block;
    position: absolute;
    opacity: 1;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    background-color: transparent;
    background-color: initial;
}

.CountBoard_countBoard__B5CGG:after {
    width: 200%;
    height: 250%;
    left: -50%;
    top: clamp(-300px, -6vh, -20px);
    z-index: 1;
    /* transform: translate(-50%, 0); */
    background: linear-gradient(to bottom, rgba(179, 143, 255, 0.4) 10%, rgba(97, 59, 209, 0.4) 30%, rgba(78, 30, 220, 0) 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
            clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
    position: absolute;
}

.CountBoard_countBoard__B5CGG:before {
    width: calc(200% - 80px);
    height: 250%;
    left: calc(-50% + 40px);
    top: clamp(-300px, -6vh, -20px);
    z-index: 1;
    /* transform: translate(-50%, 0); */
    background: linear-gradient(to bottom, rgba(85, 176, 255, 0.4) 20%, rgba(59, 124, 209, 0.4) 40%, rgba(78, 30, 220, 0) 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
            clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);
    position: absolute;
}

@media (min-width: 0) and (max-width: 979px) {
    .CountBoard_countBoard__B5CGG {
        height: 36px;
        font-weight: bold;
    }
}

@media (min-width: 980px) {
    .CountBoard_countBoard__B5CGG {
        height: clamp(45px, 3vw, 60px);
        font-weight: bold;
        font-size: clamp(28px, 2.5vw, 42px);
    }
}

.WritingBoard_writeBillboard__xCAno {
    position: relative;
    flex-direction: column;
    display: flex;
    border-radius: 30px;
    height: calc(100% - 50px);

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    /* margin-top: 80px; */
    width: 100%;
    /* margin-left: 5px; */
    background: linear-gradient(to bottom, rgba(17, 11, 24, 0.4), rgba(0, 0, 0, 0.5));
    box-shadow: var(--shadow-shine);
}

.WritingBoard_writeBillboard__xCAno:before,
.WritingBoard_writeBillboard__xCAno:after {
    content: "";
    display: block;
    position: absolute;
    opacity: 1;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    box-sizing: border-box;
}

.WritingBoard_writeBillboard__xCAno:after {
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    border-radius: 30px 30px 0 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(146, 76, 245, 0.3), rgba(135, 76, 245, 0));
}

.WritingBoard_writeBillboard__xCAno:before {
    /* width: calc(100% + 10px);
    height: calc(100% + 10px);
    left: -5px;
    top: -5px;
    border-radius: 5px;
    z-index: 1; */
    /* box-shadow: #7fbf99 0px 0px 5px, #81a28f 0px 0px 10px, #8cb29d 0px 0px 15px, #7ca68e 0px 0px 20px; */
    /* box-shadow: var(--shadow-shine); */
    /* border: 2px solid #d6cbe9; */
}

.WritingBoard_writeBillboard__xCAno.WritingBoard_active__O9eBQ {
    display: flex;
}

.WritingBoard_topArea__s1lQM {
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    z-index: 3;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.WritingBoard_topArea__s1lQM.WritingBoard_hide__5XYre {
    transform: translateY(-50px) scale(0.8);
    opacity: 0;
}
.WritingBoard_left__1mcja {
    flex: 1 1;
    border-radius: 5px 5px 0 0;
    min-height: 50px;
    padding: 0 20px 10px;
    border-bottom: none;
    color: #cbfbe3;
    cursor: pointer;
}

@media (min-width: 980px) {
    .WritingBoard_left__1mcja {
        padding: 0 6% 10px;
        /* border-radius: 5px 5px 0 0; */
    }
}

.WritingBoard_left__1mcja p {
    border-radius: 20px;
    padding: 5px 10px;
    display: block;
    margin-top: -5px;
    border-top: 2px solid rgba(203, 211, 233, 0.5);
    line-height: 1.125em;
    font-size: 0.9375em;
    text-align: center;
    position: relative;
    isolation: isolate;
    background: linear-gradient(to top, rgba(135, 159, 253, 0.8), #5e6ee6 80%);
    border-bottom: 1px solid #5f7ace;
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 4px 8px rgba(135, 159, 253, 0.4);
    transform: translateY(-2px);
    animation: WritingBoard_slowmove__Uzi22 2s ease-in-out infinite;
    color: #0c0f22;
    transition: color 0.3s ease, border-color 0.3s ease;
}
@keyframes WritingBoard_slowmove__Uzi22 {
    0% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(-2px);
    }
}
.WritingBoard_left__1mcja p .imrs-icon {
    display: inline-block;
    vertical-align: middle;
    margin: -4px 3px 0 0;
}
.WritingBoard_left__1mcja p .imrs-icon:before {
    background-color: #000;
    width: 18px;
    height: 18px;
}

.WritingBoard_left__1mcja p:before {
    content: "";
    display: block;
    width: calc(100% - 4px);
    height: 100%;
    position: absolute;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(192, 186, 255), rgba(192, 186, 255, 0.4), rgba(192, 186, 255, 1));
    /* clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%); */
    left: 2px;
    border-radius: 18px;
    opacity: 0.2;
    top: 0;
    transition: opacity 0.3s ease;
}

@media (min-width: 980px) {
    .WritingBoard_left__1mcja p {
        padding: 10px 20px;
        text-align: center;
        box-shadow: rgba(14, 18, 36, 0.8) 0px 7px 29px 0px;
        font-size: 1em;
        width: clamp(500px, 72%, 800px);
        margin-left: auto;
        margin-right: auto;
    }
}
@media (hover: hover) {
    .WritingBoard_left__1mcja p:hover {
        border-color: #8ca6f5;
    }
    .WritingBoard_left__1mcja p:hover:before {
        opacity: 0.8;
    }
}

.WritingBoard_right__DjQ7f {
    width: -webkit-max-content;
    width: max-content;
    position: absolute;
    right: auto;
    right: initial;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 0 0 5px 5px;
    background-color: rgba(29, 32, 69, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(8px);
    transform: translate(-50%, -140px);
}

@media (min-width: 0) and (max-width: 979px) {
    .WritingBoard_right__DjQ7f {
        transform: translate(-50%, -75px);
    }
}

@media (min-width: 1380px) {
    .WritingBoard_right__DjQ7f {
        transform: translate(-50%, -126px);
    }
}

.WritingBoard_fnArea__JC2q0 {
    padding: 0.5em 10px;

    width: 100%;

    font-size: 0.8125em;
    text-align: center;
    color: var(--text-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.WritingBoard_fnArea__JC2q0.WritingBoard_hide__5XYre {
    transform: translateY(-100px) scale(0.95);
    opacity: 0;
    transition-delay: 0.15s;
}
.WritingBoard_fnArea__JC2q0 .imrs-icon {
    margin-right: 3px;
}

.WritingBoard_fnArea__JC2q0 .imrs-icon:before {
    background-color: var(--text-highlight);
    width: 18px;
    height: 18px;
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .WritingBoard_fnArea__JC2q0 {
        height: 40px;
    }
}

.WritingBoard_bottomArea__pi4Gs {
    padding: 0 20px;
    color: #fff;
    border-radius: 0;
    overflow: hidden;

    position: relative;
    border-top: none;
    border-bottom: none;
    height: calc(100vh - 350px);
    overflow-y: auto;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.WritingBoard_bottomArea__pi4Gs.WritingBoard_hide__5XYre {
    transform: translateY(-100px) scale(0.95);
    opacity: 0;
    transition-delay: 0.07s;
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .WritingBoard_bottomArea__pi4Gs {
        height: calc(100vh - 400px);
    }
}
@media (min-width: 980px) {
    .WritingBoard_bottomArea__pi4Gs {
        padding: 0 6%;
    }
}

.WritingBoard_part__0Pr2q {
    padding: 0 0.5em 0 2.25em;
    font-size: 0.875em;
    background-color: #e1dcff;
    color: #0c243e;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    border-radius: 30px;
    margin-right: 8px;
    /* border-bottom: 2px solid var(--color-main); */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    position: relative;
    height: 2em;
    transform: translateY(-2px);
    transition: all 0.3s ease;
    transition-property: background-color, transform;
    /* box-shadow: var(--shadow-shine); */
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    /* .part {
        height: 2.25em;
        transform: translateY(-3px);
    } */
}

.WritingBoard_part__0Pr2q .imrs-icon {
    margin-right: 5px;
    font-size: 1em;
    /* margin-top: -2px; */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    /* animation: fmove 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; */
}

.WritingBoard_part__0Pr2q .imrs-icon:before {
    width: 1.5em;
    height: 1.5em;
    background-color: #0c243e;
}

@media (hover: hover) {
    .WritingBoard_part__0Pr2q:hover {
        background-color: #fff;
    }
}

.WritingBoard_part__0Pr2q.WritingBoard_yourTurn__8kNp6 {
    cursor: default;
    /* border: 1px dashed #fff;
    border: none;
    border-radius: 3px; */
    /* background-color: rgba(0, 0, 0, 0.15);
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)); */
    color: #fff;
    background-color: transparent;
    position: relative;
    box-shadow: none;
    box-shadow: initial;
    /* color: var(--color-main); */
}

.WritingBoard_part__0Pr2q.WritingBoard_yourTurn__8kNp6 .imrs-icon {
    /* margin-top: -4px; */
}

.WritingBoard_part__0Pr2q.WritingBoard_yourTurn__8kNp6 .imrs-icon:before {
    background-color: #fff;
    /* background-color: var(--color-main); */
}

.WritingBoard_part__0Pr2q.WritingBoard_others__cvBWG {
    cursor: default;
    border: none;
    background-color: transparent;
    color: var(--text-highlight);
    border: 1px dashed var(--text-highlight);
    padding: 0 15px 0 45px;
}

.WritingBoard_part__0Pr2q.WritingBoard_others__cvBWG .imrs-icon {
    animation: none;
    left: 15px;
}
.WritingBoard_part__0Pr2q.WritingBoard_others__cvBWG .imrs-icon:before {
    background-color: var(--text-highlight);
}
/* @media (hover: hover) {
    .part.others:hover {
        background-color: rgba(255, 255, 255, 0.6);
    }
} */

.WritingBoard_article__lg\+7D {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 159, 253, 0.5) transparent;
    z-index: 9;
    position: relative;
}

.WritingBoard_article__lg\+7D::-webkit-scrollbar {
    width: 12px;
}

.WritingBoard_article__lg\+7D::-webkit-scrollbar-track {
    background: transparent;
}

.WritingBoard_article__lg\+7D::-webkit-scrollbar-thumb {
    background-color: #394895;
}

.WritingBoard_article__lg\+7D p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 60px;
    line-height: 1.75em;
    background-size: 1.75em 1.75em;
    line-height: 2.25em;
    background-size: 2.25em 2.25em;
    background-image: repeating-linear-gradient(0deg, rgba(135, 209, 255, 0.2), rgba(135, 209, 255, 0.2) 1px, transparent 1px, transparent);
    font-size: 1.125em;
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .WritingBoard_article__lg\+7D p {
        font-size: 1.25em;
        line-height: 2.25em;
        background-size: 2.25em 2.25em;
    }
}

.WritingBoard_article__lg\+7D span {
    color: rgba(255, 255, 255, 0.5);
}

.WritingBoard_article__lg\+7D span.WritingBoard_self__hO9cL {
    color: var(--text-highlight-colorful);
    color: #ffffff;
    /* background: linear-gradient(45deg, #eee6ff, #ffffff, #e9dfff, #ffffff, #ebe1ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; */
    font-weight: bold;
    text-shadow: 0px 0px 8px var(--text-highlight-colorful);
    /* animation: selfgreen 1.6s linear infinite; */
}

.WritingBoard_article__lg\+7D span.WritingBoard_self__hO9cL .WritingBoard_icon__id2oq:before {
    background-color: var(--text-highlight-colorful);
}

@keyframes WritingBoard_fmove__Oz1jD {
    0% {
        transform: translateY(-50%) scale(0.8);
    }
    50% {
        transform: translateY(-50%) scale(1);
    }
    100% {
        transform: translateY(-50%) scale(0.8);
    }
}

@keyframes WritingBoard_selfgreen__dU03f {
    0% {
        text-shadow: 0px 0px 5px var(--text-highlight-colorful);
    }
    50% {
        text-shadow: 0px 0px 15px var(--text-highlight-colorful);
    }
    100% {
        text-shadow: 0px 0px 5px var(--text-highlight-colorful);
    }
}

.WritingLevelInfoPopup_guideInfoContainer__BXoBN {
    flex: 1 1;
    padding-top: 30px;
    padding-bottom: 150px;
    position: absolute;
    width: 70%;
    max-width: 1280px;
    margin: 0;
    height: 100svh;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    pointer-events: none;
    /* perspective: 1200px; */
}

.WritingLevelInfoPopup_guideInfoContainer__BXoBN.WritingLevelInfoPopup_active__hM6oB {
    pointer-events: auto;
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .WritingLevelInfoPopup_guideInfoContainer__BXoBN {
        padding-top: 60px;
    }
}
.WritingLevelInfoPopup_guideInfoContainer__BXoBN::before,
.WritingLevelInfoPopup_guideInfoContainer__BXoBN::after {
    content: "";
    display: block;
    width: 100%;
    height: 10vh;
    background-color: #000;
    position: absolute;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scaleY(0);
}

.WritingLevelInfoPopup_guideInfoContainer__BXoBN::before {
    top: 0;
    transform-origin: left top;
}

.WritingLevelInfoPopup_guideInfoContainer__BXoBN::after {
    bottom: 0;
    transform-origin: left bottom;
}

/* .guideInfoContainerContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
} */

/* Media Queries */
@media (min-width: 0) and (max-width: 979px) {
    .WritingLevelInfoPopup_guideInfoContainer__BXoBN {
        display: flex;
        padding-bottom: 120px;
        padding-top: 40px;
        /* padding-top: 0; */
    }
}

@media (max-width: 700px) {
    .WritingLevelInfoPopup_guideInfoContainer__BXoBN {
        width: 100%;

        padding-left: 16px;
        padding-right: 16px;
    }
}
@media (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) {
    .WritingLevelInfoPopup_guideInfoContainer__BXoBN {
        width: clamp(640px, 70vw, 1100px);
        padding: 50px 20px 150px;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .WritingLevelInfoPopup_guideInfoContainer__BXoBN {
        width: 80%;
    }
}

@media (min-width: 1280px) {
    .WritingLevelInfoPopup_guideInfoContainer__BXoBN {
        width: 70%;
    }
}

.WritingLevelInfoPopup_guideCard__yQ4E8 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    transition: transform 0.4s ease, opacity 0.4s ease;
    /* transform-style: preserve-3d;
    backface-visibility: hidden; */
    transform: translateY(100px) scale(0.95);
    opacity: 0;
}
@media (min-width: 1100px) {
    .WritingLevelInfoPopup_guideCard__yQ4E8 {
        justify-content: flex-end;
    }
}
.WritingLevelInfoPopup_guideInfoContainer__BXoBN.WritingLevelInfoPopup_active__hM6oB .WritingLevelInfoPopup_guideCard__yQ4E8 {
    transform: none;
    opacity: 1;
    transition-delay: 0.2s;
    /* pointer-events: auto; */
}
.WritingLevelInfoPopup_guideCardContent__6vTTF {
    position: relative;
    flex-direction: column;
    display: flex;
    border-radius: 30px;
    height: calc(100% - 50px);
    padding: 20px 6%;
    /* backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px); */

    width: 100%;

    /* background: linear-gradient(to bottom, rgba(17, 11, 24, 0.4), rgba(0, 0, 0, 0.5));
    box-shadow: var(--shadow-shine); */
    overflow-y: auto;
}
/* 
.guideCardContent:before,
.guideCardContent:after {
    content: "";
    display: block;
    position: absolute;
    opacity: 1;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    box-sizing: border-box;
}

.guideCardContent:after {
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    border-radius: 30px 30px 0 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(146, 76, 245, 0.3), rgba(135, 76, 245, 0));
}

.guideCardContent:before {
} */

.WritingLevelInfoPopup_guideCardContent__6vTTF.WritingLevelInfoPopup_active__hM6oB {
    display: flex;
}

.WritingLevelInfoPopup_article__jmFPl {
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 159, 253, 0.5) transparent;
    z-index: 9;
    position: relative;
}

.WritingLevelInfoPopup_article__jmFPl::-webkit-scrollbar {
    width: 12px;
}

.WritingLevelInfoPopup_article__jmFPl::-webkit-scrollbar-track {
    background: transparent;
}

.WritingLevelInfoPopup_article__jmFPl::-webkit-scrollbar-thumb {
    background-color: #394895;
}

.WritingLevelInfoPopup_infoHolder__GJKGX {
    padding: 20px;
    flex: 1 1;
}

.WritingLevelInfoPopup_textHolder__mSgF0 {
    color: #fff;
    text-align: left;
    font-family: var(--font-default);
    font-size: 1em;
    line-height: 1.5em;
}

.WritingLevelInfoPopup_textHolder__mSgF0 p {
    width: 100%;
    font-size: 0.9375em;
    line-height: 1.5em;
    color: #fff;
    opacity: 0.8;
    margin: 10px auto;
}

.WritingLevelInfoPopup_imgHolder__\+Etph {
    flex: 1 1;
}

.WritingLevelInfoPopup_imgHolder__\+Etph img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.WritingLevelInfoPopup_subheading__Qaigc {
    text-align: center;
    color: #dcd8ff;
    padding-bottom: 20px;
}
.WritingLevelInfoPopup_subheading__Qaigc h3 {
    color: #a296ff;
    font-size: clamp(17px, 3vh, 36px);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
    background: linear-gradient(to bottom, #a296ff 0%, #f1efff 50%, #a296ff 50%, #cac3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}
.WritingLevelInfoPopup_subheading__Qaigc h3:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin: 10px auto;
    background: linear-gradient(to right, transparent, #a296ff, transparent);
}
.WritingLevelInfoPopup_subtitle__CpBti {
    margin-bottom: 25px;
    font-weight: bold;
    line-height: 1em;
    font-size: clamp(24px, 3.75vh, 64px);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(162, 150, 255, 0.5), 0 0 15px rgba(162, 150, 255, 0.3), 0 0 20px rgba(162, 150, 255, 0.1);
}

.WritingLevelInfoPopup_subtitle__CpBti::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(241, 236, 255, 0.5), transparent);
    margin-top: 20px;
}

.WritingLevelInfoPopup_rulesSection__F0Mxg {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.WritingLevelInfoPopup_rulesTitle__wOUsz {
    color: #a296ff;
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: bold;
}

.WritingLevelInfoPopup_rulesContent__vkKmR {
    color: #fff;
    font-size: 0.9375em;
    line-height: 1.6;
    opacity: 0.9;
}

.WritingLevelInfoPopup_btnArea__BUBsX {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.WritingLevelInfoPopup_btn__4y2PK {
    background: rgba(162, 150, 255, 0.2);
    border: 1px solid rgba(162, 150, 255, 0.5);
    border-radius: 20px;
    padding: 10px 30px;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.WritingLevelInfoPopup_btn__4y2PK:hover {
    background: rgba(162, 150, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(162, 150, 255, 0.2);
}

@media (max-width: 768px) {
    .WritingLevelInfoPopup_contentLayer__O47D3 {
        width: 100%;
        flex-direction: column;
        padding: clamp(3px, 2vh, 8px);
        border-radius: 30px;
    }

    .WritingLevelInfoPopup_imgHolder__\+Etph {
        margin-bottom: 25px;
    }

    .WritingLevelInfoPopup_infoHolder__GJKGX {
        padding: 0 10px 10px;
    }

    .WritingLevelInfoPopup_subtitle__CpBti {
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .WritingLevelInfoPopup_subtitle__CpBti::after {
        margin-top: 10px;
    }

    .WritingLevelInfoPopup_textHolder__mSgF0 p {
        font-size: 0.8125em;
    }

    .WritingLevelInfoPopup_rulesTitle__wOUsz {
        font-size: 1.1em;
    }

    .WritingLevelInfoPopup_rulesContent__vkKmR {
        font-size: 0.8125em;
    }

    .WritingLevelInfoPopup_btn__4y2PK {
        padding: 8px 24px;
        font-size: 0.9em;
    }
}

.UserInfoPopup_container__FfW2n {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 300px;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
}

.UserInfoPopup_information__POTZa {
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  text-align: center;
  padding: 16px;
  word-break: break-word;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.UserInfoPopup_btnArea__nIDeL {
  display: flex;
  justify-content: center;
}

.UserInfoPopup_btn__QkEvE {
  padding: 10px 32px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.UserInfoPopup_btn__QkEvE:hover {
  background-color: #1976d2;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.UserInfoPopup_btn__QkEvE span {
  display: inline-block;
}

.WritingAdvice_writingAdvice__UcxXd {
  position: absolute;
  border: 5px solid salmon;
  left: 0;
  bottom: 0;
}
.WritingAdvice_avatar__be9P8 {
  position: absolute;
  width: 30vw;
  right: -5vw;
  bottom: 0;
  transform: translateY(40px);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.WritingAdvice_container__eHcBR {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 300px;
}
.WritingAdvice_active__meHKa .WritingAdvice_avatar__be9P8 {
  transform: none;
  opacity: 1;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}
.WritingAdvice_btnArea__VD1y1 {
  display: flex;
  justify-content: center;
}

.WritingAdvice_btn__Mtafr {
  padding: 8px 24px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

@media (min-width: 740px) {
  .WritingAdvice_avatar__be9P8 {
    width: clamp(300px, 26vw, 500px);
    right: auto;
    right: initial;
    left: 50%;
    margin-left: clamp(300px, 38vw, 560px);
    transform: translate(-50%, 40px);
  }

  .WritingAdvice_active__meHKa .WritingAdvice_avatar__be9P8 {
    transform: translate(-50%, 0);
  }
}

.WriteGame_writeGame__rtbou {
    flex: 1 1;
    padding-top: 30px;
    padding-bottom: 150px;
    /* overflow: hidden; */
    position: relative;
    width: 70%;
    max-width: 1280px;
    margin: 0 auto;
    height: 100svh;
    perspective: 1200px; /* 增強 3D 深度 */
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .WriteGame_writeGame__rtbou {
        padding-top: 60px;
    }
}
/* .hint {
    border: 1px solid var(--color-main);
    position: fixed;
    left: 0;
    bottom: 150px;
    z-index: 9;
    width: 360px;
    border-radius: 0 20px 20px 0;
    padding: 20px;
    box-shadow: var(--shadow-shine);
    font-size: 0.875em;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
} */
.WriteGame_writeGame__rtbou::before,
.WriteGame_writeGame__rtbou::after {
    content: "";
    display: block;
    width: 100%;
    height: 10vh;
    background-color: #000;
    position: absolute;
    left: 0;
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scaleY(0);
}

.WriteGame_writeGame__rtbou::before {
    top: 0;
    transform-origin: left top;
}

.WriteGame_writeGame__rtbou::after {
    bottom: 0;
    transform-origin: left bottom;
}

/* Hide self chat items */
.chat-item.self {
    display: none;
}

/* Media Queries */
@media (min-width: 0) and (max-width: 979px) {
    .WriteGame_writeGame__rtbou {
        display: flex;
        padding-bottom: 120px;
        padding-top: 40px;
        /* padding-top: 0; */
    }
}

.WriteGame_writeGameContainer__GOg0w {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
@media (min-width: 1100px) {
    .WriteGame_writeGameContainer__GOg0w {
        justify-content: flex-end;
    }
}

@media (max-width: 700px) {
    .WriteGame_writeGame__rtbou {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}
@media (min-width: 700px) and (max-width: 1366px) and (orientation: portrait) {
    .WriteGame_writeGame__rtbou {
        width: clamp(640px, 70vw, 1100px);
        padding: 50px 20px 150px;
    }
}

@media (min-width: 769px) and (max-width: 1279px) {
    .WriteGame_writeGame__rtbou {
        width: 80%;
    }
}

@media (min-width: 1280px) {
    .WriteGame_writeGame__rtbou {
        width: 70%;
    }
}

.WriteGame_levelInfoButton__fNLvq {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

.WriteGame_levelInfoButton__fNLvq button {
    background: rgba(162, 150, 255, 0.2);
    border: 1px solid rgba(162, 150, 255, 0.5);
    border-radius: 20px;
    padding: 8px 16px;
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.WriteGame_levelInfoButton__fNLvq button:hover {
    background: rgba(162, 150, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(162, 150, 255, 0.2);
}

.WriteGame_levelInfoButton__fNLvq button span {
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .WriteGame_levelInfoButton__fNLvq {
        top: 10px;
        right: 10px;
    }

    .WriteGame_levelInfoButton__fNLvq button {
        padding: 6px 12px;
        font-size: 0.8em;
    }
}

.WriteScoreDisplay_writingScore__MQ\+cd {
  position: relative;
  z-index: inherit;
  border: 1px solid #ad8d66;
  border-radius: 12px;
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  max-width: 520px;
  margin: 0 auto;
}

@media (min-width: 740px) {
  .WriteScoreDisplay_writingScore__MQ\+cd {
    min-height: 35vh;
  }
}

@media (min-width: 980px) {
  .WriteScoreDisplay_writingScore__MQ\+cd {
    height: 56vh;
  }
}

.WriteScoreDisplay_scoreItem__KTMC9 {
  background: linear-gradient(to bottom, #d4b480, #997958);
  width: calc(50% - 2px);
  padding: 10px;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  color: #000;
}

@media (min-width: 980px) {
  .WriteScoreDisplay_scoreItem__KTMC9 {
    padding: 20px;
  }
}

@media (min-width: 1700px) {
  .WriteScoreDisplay_scoreItem__KTMC9 {
    padding: 20px 30px;
  }
}

.WriteScoreDisplay_scoreItem__KTMC9:nth-of-type(1) {
  border-radius: 9.6px 0 0 0;
}

.WriteScoreDisplay_scoreItem__KTMC9:nth-of-type(2) {
  border-radius: 0 9.6px 0 0;
}

.WriteScoreDisplay_scoreItem__KTMC9:nth-of-type(3) {
  border-radius: 0 0 0 9.6px;
  margin-top: 4px;
}

.WriteScoreDisplay_scoreItem__KTMC9:nth-of-type(4) {
  border-radius: 0 0 9.6px 0;
  margin-top: 4px;
}

.WriteScoreDisplay_scoreItem__KTMC9:nth-of-type(2n + 2) {
  margin-left: 4px;
}

.WriteScoreDisplay_field__ytcoo {
  line-height: 1.125em;
  font-size: 0.8125em;
  display: block;
  width: 100%;
}

@media (min-width: 740px) {
  .WriteScoreDisplay_field__ytcoo {
    font-size: 0.875em;
  }
}

@media (min-width: 980px) {
  .WriteScoreDisplay_field__ytcoo {
    border-bottom: 1px solid #000;
    padding-bottom: 0.75em;
    margin-bottom: 0.5em;
  }
}

@media (min-width: 1380px) {
  .WriteScoreDisplay_field__ytcoo {
    font-size: 1em;
  }
}

.WriteScoreDisplay_score__1kdcj {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: 100%;
  flex-wrap: nowrap;
}

.WriteScoreDisplay_scoreValue__qDmcV {
  font-size: 2.5em;
  line-height: 1.125em;
}

@media (min-width: 740px) {
  .WriteScoreDisplay_scoreValue__qDmcV {
    font-size: 3em;
  }
}

@media (min-width: 1380px) {
  .WriteScoreDisplay_scoreValue__qDmcV {
    font-size: 4em;
  }
}

.WriteScoreDisplay_scoreMax__SByiK {
  opacity: 0.3;
  line-height: 1.125em;
  margin-left: 0.5em;
}

@media (min-width: 1380px) {
  .WriteScoreDisplay_scoreMax__SByiK {
    font-size: 2em;
  }
}

.WriteScoreDisplay_WriteScore__TyGuo {
  display: flex;
  justify-content: flex-start;
  padding-top: 50px;
  position: relative;
  isolation: isolate;
  z-index: 15;
}

@media (min-width: 980px) {
  .WriteScoreDisplay_WriteScore__TyGuo {
    justify-content: center;
    padding-top: 0;
  }
}

.WriteScoreDisplay_scene__P717o {
  isolation: isolate;
  position: relative;
  perspective: 600px;
  z-index: inherit;
}

.NovelGame_gameMainArea__eWXUB {
    width: 100%;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.NovelGame_container__gbXs6 {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 0 200px;
    height: 100%;
}

.NovelGame_effectContainer__1hQjC {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}
@media (min-width: 0px) and (max-width: 700px) {
    .NovelGame_container__gbXs6 {
        justify-content: flex-start;
        padding: 120px 0 200px;
    }
}

.AiFeedbackPopup_popupContainer__ubuBj {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 320px;
  background-color: #1e293b; /* Dark slate background */
  border-radius: 12px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 0 30px rgba(96, 165, 250, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  overflow: visible;
  z-index: 1000;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.AiFeedbackPopup_popupContainer__ubuBj::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(96, 165, 250, 0.4),
    transparent
  );
  transition: left 0.5s;
  pointer-events: none;
  z-index: 1;
}

.AiFeedbackPopup_animateIn__n7kg1 {
  transform: translateY(0);
  opacity: 1;
}

.AiFeedbackPopup_controls__1KD9E {
  display: flex;
  align-items: center;
}

.AiFeedbackPopup_expandButton__qYA5z, .AiFeedbackPopup_closeButton__NrOh- {
  background: none;
  border: none;
  font-size: 18px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.AiFeedbackPopup_expandButton__qYA5z:hover, .AiFeedbackPopup_closeButton__NrOh-:hover {
  background-color: #475569;
  color: #ffffff;
}

.AiFeedbackPopup_popupContent__UxPJh {
  padding: 16px;
  overflow-y: auto;
  max-height: 250px;
  transition: max-height 0.3s ease;
}

.AiFeedbackPopup_expanded__h9C8t {
  max-height: 400px;
}

.AiFeedbackPopup_closeButton__NrOh- {
  position: absolute;
  top: -12px;
  right: -12px;
  background: rgba(15, 23, 42, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 30;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.AiFeedbackPopup_closeButton__NrOh-:hover {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 
    0 6px 16px rgba(239, 68, 68, 0.4),
    0 0 0 2px rgba(239, 68, 68, 0.2);
}

.AiFeedbackPopup_closeButton__NrOh-:active {
  transform: scale(1.05);
}

.AiFeedbackPopup_closeIcon__igX5O {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.AiFeedbackPopup_adviceSection__qX\+Z\+ {
  padding: 0;
  margin-top: 0;
}

.AiFeedbackPopup_adviceSection__qX\+Z\+ p {
  margin: 0;
  line-height: 1.6;
  color: #d1d5db;
  font-size: 18px;
}

@media (max-width: 576px) {
  .AiFeedbackPopup_popupContainer__ubuBj {
    width: calc(100% - 40px);
    max-width: 320px;
  }
}
.ElsaModule_elsaContainer__zJYkj {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 20vw);
    height: calc(100% - 20vh);
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(41, 25, 65, 0.7));
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
    border-radius: clamp(20px, 15vw, 50px);
    border: 1px solid rgba(179, 194, 255, 0.5);
    box-shadow: 0 0 20px rgba(152, 173, 255, 0.5), 0 0 30px rgba(135, 159, 253, 0.3), 0 0 40px rgba(135, 159, 253, 0.1),
        inset 0 0 30px rgba(135, 159, 253, 0.3);
}
@media (min-width: 0px) and (max-width: 700px) {
    .ElsaModule_elsaContainer__zJYkj {
        width: calc(100% - 50px);
        height: calc(100% - 50px);
        box-shadow: 0 0 10px rgba(152, 173, 255, 0.3), 0 0 20px rgba(135, 159, 253, 0.2), 0 0 30px rgba(135, 159, 253, 0.1),
            inset 0 0 20px rgba(135, 159, 253, 0.3);
    }
}
/* @media (min-width: 0) and (max-width: 979px) {
    .elsaContainer {
        padding-bottom: 8vh;
    }
} */

.ElsaModule_elsaGame__7BHeU {
    position: relative;
    isolation: isolate;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 50px;
}

.ElsaModule_elsaGame__7BHeU::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from var(--a), #88a0ff, #4741ff, #1e4fff, #48b0ff, #a861ff);
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.5;
    width: 140%;
    height: 140%;
    z-index: -2;
}

.ElsaModule_banner__UXCme {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    display: none;
}

@media (min-width: 0) and (max-width: 979px) {
    .ElsaModule_banner__UXCme {
        width: clamp(150px, 50vw, 260px);
        transform: translate(-50%, -70%);
    }
}

@media (min-width: 980px) {
    .ElsaModule_banner__UXCme {
        left: -10%;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
    }
}

.ElsaModule_bannerImage__SVjRD:before {
    padding-bottom: 95.5%;
}

.ElsaModule_stage__6adc2 {
    font-weight: bold;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 3;
    padding: 20px;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-top: 5vh;
}

@media (min-width: 980px) {
    .ElsaModule_stage__6adc2 {
        height: clamp(240px, 35vh, 640px);
    }
}

.ElsaModule_pronunciation__sg1SP {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: clamp(24px, 4.5vh, 48px);
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .ElsaModule_pronunciationBtn__7JZse {
        margin: 0 0 8px 10px;
    }
}

.ElsaModule_pronunciation__sg1SP .red {
    color: #ff5d5d;
}

.ElsaModule_pronunciation__sg1SP .green {
    color: #33d757;
}

.ElsaModule_pronunciationForSentence__4cPfb {
    flex-direction: column;
    font-size: clamp(32px, 7vh, 48px);
    margin: 0 auto;
    flex: 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.ElsaModule_pronunciationControl__JEADe {
    position: relative;
    max-height: clamp(80px, 15vh, 120px);
    overflow-y: auto;
    margin: 0.75rem auto;
    padding: 0;
    width: -webkit-fit-content;
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 159, 253, 0.5) transparent;
}

.ElsaModule_pronunciationControl__JEADe::-webkit-scrollbar {
    width: 8px;
}

.ElsaModule_pronunciationControl__JEADe::-webkit-scrollbar-track {
    background: transparent;
}

.ElsaModule_pronunciationControl__JEADe::-webkit-scrollbar-thumb {
    background-color: rgba(135, 159, 253, 0.5);
    border-radius: 10px;
}

.ElsaModule_pronunciationHint__GCP0l {
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    color: #fff;
    text-align: center;
    padding: 0.5rem 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    font-weight: normal;
}

@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .ElsaModule_pronunciationForSentenceBtn__ffWTz {
        transform: scale(0.8) translate(-0.5em, -0.5em);
    }
}

.ElsaModule_titleText__9Lg98 {
    font-size: clamp(32px, 6vh, 54px);
    font-weight: bold;
    text-align: center;
    color: white;
    margin-top: clamp(20px, 4vh, 40px);
    margin-bottom: clamp(30px, 5vh, 50px);
}
.ElsaModule_forSentence__8IZyC {
    font-size: clamp(16px, 3vh, 50px);
    font-size: clamp(32px, 3vh, 50px);
    margin-top: 0;
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .ElsaModule_titleText__9Lg98 {
        font-size: clamp(32px, 4.5vh, 54px);
    }
    .ElsaModule_forSentence__8IZyC {
        font-size: clamp(16px, 3vh, 50px);
    }
}

.ElsaModule_titleText__9Lg98 strong {
    color: var(--color-main);
}

@keyframes ElsaModule_pulse__IwMB9 {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.ElsaModule_fnBar__josLj {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: clamp(20px, 4vh, 40px);
    margin-top: auto;
    min-height: 220px;
}
@media (max-width: 768px) {
    .ElsaModule_fnBar__josLj {
        padding-bottom: 0;
    }
}
.ElsaModule_fnBarDiv__3tElP {
    flex: 1 1;
}

.ElsaModule_practiceCount__SpzZf {
    color: #fff;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    position: absolute;
    z-index: 10;
    margin-bottom: 0;
    display: inline-block;
    width: auto;
    text-align: right;
}

.ElsaModule_practiceCount__SpzZf strong {
    color: #4cc9f0;
    color: var(--color-main, #4cc9f0);
    font-weight: bold;
}

.ElsaModule_partCenter__3TMoV {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2vh 0;
    gap: 20px;
}

@media (max-width: 768px) {
    .ElsaModule_partCenter__3TMoV {
        margin: 0;
    }
}
/*
@media (min-width: 1600px) {
    .partCenter {
        gap: 2rem;
    }
} */

.ElsaModule_elsaFeedback__z23-2 {
    z-index: 5;
    text-align: center;
    font-size: 1.125em;
    font-weight: normal;
    padding: 1rem 10px;
    color: var(--color-main);
    position: relative;
    margin: 1rem auto;
    width: 90%;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    max-height: clamp(140px, 18vh, 180px);
    overflow: hidden;
}

.ElsaModule_adviceScrollable__NZ6l5 {
    overflow-y: auto;
    max-height: clamp(120px, 16vh, 150px);
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 159, 253, 0.5) transparent;
}

.ElsaModule_adviceScrollable__NZ6l5::-webkit-scrollbar {
    width: 8px;
}

.ElsaModule_adviceScrollable__NZ6l5::-webkit-scrollbar-track {
    background: transparent;
}

.ElsaModule_adviceScrollable__NZ6l5::-webkit-scrollbar-thumb {
    background-color: rgba(135, 159, 253, 0.5);
    border-radius: 10px;
}

.ElsaModule_score__kH7LV {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: #4cc9f0;
    color: var(--color-main, #4cc9f0);
    margin-bottom: 0;
    font-weight: bold;
    display: inline-block;
}

.ElsaModule_highlight__21\+XZ {
    height: 40px;
    position: absolute;
    top: auto;
    top: initial;
    width: 100%;
    bottom: -1px;
    animation: ElsaModule_highlightscalebottom__Tn6r0 6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    transform: translateY(50%);
    pointer-events: none;
    -webkit-clip-path: inset(0 0 50% 0);
            clip-path: inset(0 0 50% 0);
}

@media (min-width: 740px) {
    .ElsaModule_highlight__21\+XZ {
        width: 200%;
        height: 60px;
    }
}

@keyframes ElsaModule_rotating__adJDd {
    0% {
        --a: 0deg;
    }
    100% {
        --a: 360deg;
    }
}

@keyframes ElsaModule_highlightscalebottom__Tn6r0 {
    0% {
        transform: translateY(50%) scaleY(1);
    }
    50% {
        transform: translateY(50%) scaleY(1.5);
    }
    100% {
        transform: translateY(50%) scaleY(1);
    }
}

.ElsaModule_elsaButton__M5lfN {
    height: 45px;
    background: none;
    border: none;
    color: var(--color-main);
    border: 1px solid var(--color-main);
    border-radius: 25px;
    padding: 0 2em;
    font-size: 1em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    width: -webkit-max-content;
    width: max-content;
    justify-content: center;
    position: relative;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
    margin: 0;
}

@media (min-width: 0px) and (max-width: 800px) {
    .ElsaModule_elsaButton__M5lfN {
        width: 80%;
        font-size: 1em;
    }
}
@media (min-width: 1600px) and (min-height: 800px) {
    .ElsaModule_elsaButton__M5lfN {
        height: 64px;
        font-size: 1.125em;
    }
}
.ElsaModule_elsaButton__M5lfN span {
    font-weight: normal;
    letter-spacing: 0;
}

/* .elsaButton:before {
    display: none;
} */
.ElsaModule_elsaButton__M5lfN .imrs-icon {
    margin-left: 10px;
}

.ElsaModule_elsaButton__M5lfN .imrs-icon:before {
    /* width: 26px;
    height: 26px; */
    background-color: var(--color-main);
}

@media (hover: hover) {
    .ElsaModule_elsaButton__M5lfN:hover {
        background: none;
        box-shadow: none;
        background-color: var(--color-main);
        color: var(--bg-primary);
    }
    .ElsaModule_elsaButton__M5lfN:hover .imrs-icon:before {
        background-color: var(--bg-primary);
    }
}

.ElsaModule_elsaButton__M5lfN:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    background-color: rgba(150, 150, 150, 0.3) !important;
    border-color: rgba(150, 150, 150, 0.5) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    pointer-events: none;
    transition: none;
}

.ElsaModule_elsaButton__M5lfN:disabled:hover {
    background-color: rgba(150, 150, 150, 0.3) !important;
    border-color: rgba(150, 150, 150, 0.5) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
}

.ElsaModule_elsaButton__M5lfN:disabled span {
    color: rgba(255, 255, 255, 0.6) !important;
}

.ElsaModule_elsaButton__M5lfN:disabled .imrs-icon:before {
    background-color: rgba(255, 255, 255, 0.6) !important;
}


.ElsaModule_voiceInput__9ork2 {
    width: 70px;
    height: 70px;
    box-shadow: none;
    border-radius: 50%;

    background: linear-gradient(to bottom, #136731, #199b47);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    font-family: var(--font-default);
}

.ElsaModule_voiceInput__9ork2 .imrs-icon::before {
    width: 30px;
    height: 30px;
    background-color: #fff;
}

@media (min-width: 1600px) and (min-height: 800px) {
    .ElsaModule_voiceInput__9ork2 {
        width: 80px;
        height: 80px;
    }
    .ElsaModule_voiceInput__9ork2 .imrs-icon::before {
        width: 32px;
        height: 32px;
    }
}

.ElsaModule_voiceInput__9ork2 .icon:before {
    width: 30px;
    height: 30px;
    background-color: #fff;
}

.ElsaModule_voiceInput__9ork2.ElsaModule_active__utWVt {
    background: linear-gradient(to bottom, #136731, #199b47);
}

.ElsaModule_voiceInput__9ork2.ElsaModule_activePause__nvj6X {
    background: linear-gradient(to bottom, #910f0f, #ad2222);
}

.ElsaModule_voiceInput__9ork2.ElsaModule_activePause__nvj6X .imrs-icon::before {
    -webkit-mask-position: 30.43% 0;
}

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

/* @media (min-width: 1600px) and (min-height: 800px) {
    .elsaReplay {
        margin-top: 1.5rem;
    }
} */

.ElsaModule_audioPlayerContainer__jMu9I {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
}

.ElsaModule_voiceInput__9ork2.ElsaModule_disabled__gJJF- {
    cursor: not-allowed;
    opacity: 0.5;
    background: linear-gradient(to bottom, rgba(150, 150, 150, 0.1), rgba(150, 150, 150, 0.2));
    background: linear-gradient(to bottom, #848484, #575757);
    box-shadow: none;
}

.ElsaModule_voiceInput__9ork2.ElsaModule_disabled__gJJF- .imrs-icon::before {
    background-color: #969696;
}

/* 分數和反饋區域 - 中間 */
.ElsaModule_scoreInfo__42eel {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    white-space: nowrap;
    z-index: 10;
    height: 45px;
}

/* 底部資訊欄 - 橫排顯示 */
.ElsaModule_bottomInfoBar__LwSmI {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-radius: 15px;
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
}

/* 狀態資訊區域 - 左側 */
.ElsaModule_statusInfo__T69mZ {
    flex: 1 1;
    text-align: left;
    min-width: 25%;
    font-size: 0.9rem;
    position: absolute;
    left: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vh, 2rem);
    z-index: 10;
}

/* 練習次數區域 - 右側 */
.ElsaModule_practiceInfo__G-7Aw {
    flex: 1 1;
    text-align: right;
    min-width: 25%;
    position: absolute;
    right: clamp(1rem, 3vw, 2rem);
    bottom: calc(clamp(1.25rem, 3.5vh, 2.25rem) + 50px);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 
  === 調整這裡 ===
  要讓練習次數顯示在下一題按鈕上方，可以修改以下屬性：
  right: clamp(1rem, 3vw, 2rem); 保持與下一題按鈕相同的水平位置
  bottom: calc(clamp(1.25rem, 3.5vh, 2.25rem) + 50px); 調整這個值，使其位於下一題按鈕上方
  */
}
@media (max-width: 768px) {
    .ElsaModule_practiceInfo__G-7Aw {
        justify-content: center;
    }
}

/* 反饋文字樣式 */
.ElsaModule_feedbackText__nwj4c {
    color: #fff;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    display: inline-block;
}

/* 下一題按鈕容器 - 右下角 */
.ElsaModule_nextButtonContainer__heOl1 {
    position: absolute;
    /* bottom: 0.5rem;
    right: clamp(1rem, 3vw, 2rem); */
    z-index: 10;
    display: flex;
    align-items: center;
    bottom: 0;
    right: 0;
}

/* 錄音按鈕區域 - 中間底部 */
/* .partCenter {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem 0;
    gap: clamp(1.5rem, 5vw, 3rem);
} */

/* 響應式調整 */
@media (max-width: 768px) {
    .ElsaModule_bottomInfoBar__LwSmI {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        justify-content: center;
    }

    .ElsaModule_scoreInfo__42eel {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        order: 2;
        min-width: 50%;
        text-align: center;
        height: auto;
    }

    .ElsaModule_practiceInfo__G-7Aw {
        position: relative;
        right: auto;
        bottom: auto;
        order: 3;
        min-width: 50%;
        text-align: center;
    }

    .ElsaModule_practiceCount__SpzZf {
        position: relative;
        right: auto;
        bottom: auto;
    }

    .ElsaModule_nextButtonContainer__heOl1 {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

    .ElsaModule_elsaButton__M5lfN {
        width: 80%;
        /* max-width: 200px; */
        width: calc(100% - 100px);
        border-radius: 50px 50px 0 0;
        border-bottom: none;
    }

    /* .fnBar {
        min-height: 250px;
    } */
}

@media (max-width: 480px) {
    .ElsaModule_pronunciationForSentence__4cPfb {
        font-size: clamp(24px, 6vh, 36px);
    }

    .ElsaModule_pronunciationControl__JEADe {
        width: 90%;
        max-height: clamp(60px, 12vh, 100px);
    }

    .ElsaModule_pronunciationHint__GCP0l {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .ElsaModule_score__kH7LV {
        font-size: 1.25rem;
    }

    .ElsaModule_feedbackText__nwj4c {
        font-size: 0.75rem;
    }

    .ElsaModule_bottomInfoBar__LwSmI {
        width: 95%;
    }
}

@media (min-width: 768px) {
    .ElsaModule_nextButtonContainer__heOl1 .ElsaModule_elsaButton__M5lfN {
        border-right: none;
        border-bottom: none;
        border-radius: clamp(20px, 15vw, 50px) 0 clamp(20px, 15vw, 50px) 0;
        height: clamp(50px, 6vh, 90px);
        padding-left: 3em;
        padding-right: 3.2em;
    }
}

.NotificationContext_notificationContainer__n1rfW {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.NotificationContext_notification__XzQrW {
  background-color: rgb(56 69 127);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  padding: 16px;
  animation: NotificationContext_slideIn__7RwGy 0.3s ease-out;
  overflow: hidden;
}

@keyframes NotificationContext_slideIn__7RwGy {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.NotificationContext_message__8Jl20 {
  margin-bottom: 16px;
  font-size: 16px;
  color: #ffffff;
}

.NotificationContext_buttonGroup__bZVTT {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.NotificationContext_confirmButton__RhZBq {
  background-color: rgba(135, 158, 253, 0.3);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.NotificationContext_confirmButton__RhZBq:hover {
  background-color: rgba(66, 96, 185, 0.3);
}

.NotificationContext_cancelButton__GM50H {
  background-color: rgb(38, 48, 90, 0.3);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.NotificationContext_cancelButton__GM50H:hover {
  background-color: #757575;
}

/* 自動消失類型的通知 */
.NotificationContext_notification__XzQrW[data-type="auto_dismiss"] {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 16px;
  animation: NotificationContext_fadeIn__SuCaa 0.2s ease-in-out, NotificationContext_fadeOut__ucCZj 0.2s ease-in-out 2.8s;
}

.NotificationContext_notification__XzQrW[data-type="auto_dismiss"] .NotificationContext_message__8Jl20 {
  color: white;
  margin-bottom: 0;
}

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

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

.GameBTN_btnStage__lrsS3 {
    background-color: #35394c;
    border-radius: 8px;
    /* border: none;
    background: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #f6db9c;
    font-size: 1em;
    padding: 8px 2em;
    border-radius: 30px;
    border: 1px solid rgba(246, 219, 156, 0.3);
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease; */
}

.GameBTN_imrsGame__y5vPh {
    position: relative;
    transition: transform 0.2s ease;
    width: 100%;
    display: block;
}

.GameBTN_imgHolder__UczhZ {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 8px;
}

.GameBTN_defaultBackground__Yg-Sv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1;
}

.GameBTN_gameName__Y2\+Wt {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  word-break: break-word;
  line-height: 1.4;
}

.GameBTN_media__VQFmv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: 2;
}

.GameBTN_media__VQFmv.GameBTN_loaded__nYUy7 {
  opacity: 1;
}

.GameBTN_loadingSpinner__on6n7 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.GameBTN_spinner__XaEQp {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: GameBTN_spin__H65nn 1s linear infinite;
}

@keyframes GameBTN_spin__H65nn {
  to {
    transform: rotate(360deg);
  }
}

.GameBTN_img__fhy4h {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    background-color: #35394c;
}

.GameBTN_textHolder__CUY7B {
    padding-top: 6px;
}

.GameBTN_textHolder__CUY7B h6 {
    color: var(--text-secondary);
    font-size: 1.0625em;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: 1.125em;
    -webkit-box-orient: vertical;
}

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

    font-size: 0.8125em;
    color: var(--text-secondary);
    margin-top: 5px;
}

.GameBTN_completionTooltip__CdVME {
    position: relative;
    cursor: pointer;
    font-size: 0.75em;
}

.GameBTN_completionTooltip__CdVME::after {
    content: "遊玩的次數";
    position: absolute;
    left: 0;
    bottom: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    transform: translateY(-5px);
}

.GameBTN_completionTooltip__CdVME:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.GameBTN_auther__9aYHf {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 5px;
    transition: color 0.3s ease;
    opacity: 0.5;
}

.GameBTN_auther__9aYHf:hover {
    text-decoration: underline;
    opacity: 1;
}

@media (hover: hover) {
    /* .imrsGame:hover {
      transform: translateY(-5px);
  } */
    .GameBTN_imrsGame__y5vPh:hover h6 {
        color: #fff;
    }
    .GameBTN_imrsGame__y5vPh:hover .GameBTN_img__fhy4h {
        transform: scale(1.05);
    }
    .GameBTN_imrsGame__y5vPh:active {
        transform: translateY(2px);
    }
}
@media (hover: none) {
    .GameBTN_imrsGame__y5vPh:hover h6 {
        color: #fff;
    }
    .GameBTN_imrsGame__y5vPh:hover .GameBTN_img__fhy4h {
        transform: scale(1.05);
    }
}
/*手機*/
@media (min-width: 0px) and (max-width: 700px) {
    .GameBTN_textHolder__CUY7B h6 {
        font-size: 0.9375em;
        color: #fff;
    }
}

/* 頂部容器：包含標題、副標題和版權信息 */
.GameListMenu_header__OOriM {
    position: fixed;
    width: 100%;
    height: var(--height-header);
    z-index: 9;
    background: linear-gradient(to bottom, var(--bg-primary) 15%, rgba(37, 39, 52, 0.7) 60%, rgba(37, 39, 52, 0) 100%); /*線性*/
}

/* Logo 區域：包含主標題和副標題 */
.GameListMenu_gameLogo__FEiBh {
    position: absolute;
    left: 20px;
    top: 0;

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border: 1px dashed seagreen; */
}

/* 主標題 IMMERSE */
.GameListMenu_gameLogo__FEiBh h1:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 29.7%;
    padding-bottom: 27%;
}
.GameListMenu_gameLogo__FEiBh h1 {
    /* font-size: clamp(20px, 2.5vh, 64px);
    font-size: 29px;
    letter-spacing: 0; */
    font-size: 0;
    display: block;
    width: 136px;
    /* line-height: 1em;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #879ffd, #435084);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    background: url(/static/media/imrs-lab.286ea07fe9f62bbe7495.svg) no-repeat center;
    background: url(/static/media/imrs-lab-ii.16e87ccc4639e1f6dce0.svg) no-repeat center;
    background-size: contain;

    /* 霓虹發光效果：從白色核心到金色外圍 */
    /* text-shadow: 0 0 6px #f6db9c, 0 0 10px #f6db9c, 0 0 14px #f6db9c, 0 0 20px #f6db9c, 0 0 25px #f6db9c, 0 0 30px #f6db9c; */
}

/* 副標題：全生成式英語學習平台 */
.GameListMenu_gameLogo__FEiBh p {
    font-size: 11px;
    letter-spacing: 1px;
    margin: 2px 0 0 0;

    opacity: 0.9;

    color: var(--color-main); /* 金色 */
    display: none;
}

/* 版權信息 */
.GameListMenu_contactUs__jApvv {
    font-size: 0.8rem;
    color: #ffffff;
    opacity: 0.8;
    margin-top: auto; /* 推到容器底部 */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* 主要內容區域容器：固定高度80vh，允許內容溢出時可捲動 */
.GameListMenu_body__uKaVk {
    flex: 1 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: calc(var(--height-header) + 20px);
    box-sizing: border-box;
    background-color: var(--color-bg-main);
    min-height: 100vh;
    background: var(--bg-gradient);
}
.GameListMenu_footer__HmpPv {
    width: 100%;
    padding: var(--gap-mobile);
    box-sizing: border-box;
    background-color: var(--color-bg-main);
    overflow: hidden;
    text-align: center;
}
/* 內容區域的內邊距容器 */
.GameListMenu_imrsBody__nuufY {
    height: 100%;
    padding: 0;
    width: 100%;
}

/* 遊戲列表區域 */
.GameListMenu_imrsGamePool__QV8MU {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 標籤按鈕容器 */
.GameListMenu_tabButtons__UuYNj {
    z-index: 2;
    padding: 0 100px;
}

/* 標籤按鈕樣式 */
.GameListMenu_tabButton__O8QnX {
    background: transparent;
    border: none;
    color: var(--color-main);
    padding: 5px 20px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 1em;
    font-family: var(--font-default);
    border-radius: 50px;
    border: none;
    border: 1px solid var(--color-main);
}

/* 活動標籤樣式 */
.GameListMenu_tabButton__O8QnX.GameListMenu_active__eoyg1 {
    color: var(--bg-primary);
    background-color: var(--color-main);
}

/* 標籤內容區域：設置overflow-y: auto使其可捲動 */
.GameListMenu_tabContents__LYqTd {
    flex: 1 1;
    overflow: hidden; /* 保持 hidden，不顯示滾動條 */
    box-sizing: border-box;
    padding: 20px 100px;
    height: calc(100vh - var(--height-header) - 100px);
}

/* 遊戲卡片網格容器 */
.GameListMenu_imrsGameContainer__dpO\+n {
    height: 100%;
    overflow-y: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
    gap: 20px;
    scroll-behavior: smooth;
}

/* 移動滾動條樣式到 imrsGameContainer */
.GameListMenu_imrsGameContainer__dpO\+n::-webkit-scrollbar {
    width: 8px;
}

.GameListMenu_imrsGameContainer__dpO\+n::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.GameListMenu_imrsGameContainer__dpO\+n::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* 移除原本 tabContents 的滾動條樣式 */
.GameListMenu_tabContents__LYqTd::-webkit-scrollbar {
    display: none;
}

/* 無內容時的提示文字 */
.GameListMenu_noContent__WisrS {
    color: var(--color-main);
    text-align: center;
    width: calc(100% - 100px);
    padding: 20px 50px 20px 0;
    display: block;
    position: absolute;
    /* font-size: clamp(20px, 5vh, 64px); */
    line-height: 50vh;
    /* text-shadow: 0 0 10px #879ffd; */
    font-size: 0.875em;
    color: var(--color-pair);
}

.GameListMenu_searchContainer__4cojy {
    width: 100%;
    max-width: 400px; /* 限制最大寬度 */
    margin: 0 auto; /* 置中對齊 */
    height: var(--height-header);
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
}
.GameListMenu_searchContainer__4cojy:before {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(136, 160, 255, 0.3);
    filter: blur(20px);
    width: 150%;
    height: 180%;
    border-radius: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
}

.GameListMenu_searchInput__0VIQr {
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: var(--font-default);
    width: 100%;
    padding: 12px 20px;
    border: 1px solid rgba(65, 74, 110);
    background-color: rgba(38, 42, 74, 0.69);
    border-radius: 30px; /* 圓角設計 */
    font-size: 1em;
    color: #ffffff;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: rgba(67, 76, 114, 1) 0px 0px 8px, rgba(0, 0, 0, 0.4) 0px 3px 6px inset;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.GameListMenu_searchInput__0VIQr::placeholder {
    color: var(--color-main);
}

.GameListMenu_searchInput__0VIQr:focus {
    border: 1px solid rgb(71, 81, 121);
    box-shadow: rgba(92, 104, 156, 0.7) 0px 0px 15px, rgba(0, 0, 0, 0.4) 0px 3px 6px inset;
}

@media (min-width: 0px) and (max-width: 900px) {
    .GameListMenu_header__OOriM {
        padding: 4rem var(--gap-mobile) var(--gap-mobile) ;
        position: relative;
        display: flex;
        flex-direction: column;
        height: auto;
        height: initial;
        z-index: 1;
        background-color: var(--bg-primary);
    }
    .GameListMenu_body__uKaVk {
        padding-top: 0;
    }
    .GameListMenu_gameLogo__FEiBh {
        position: static;
    }
    .GameListMenu_tabButtons__UuYNj {
        padding: 0 var(--gap-mobile);
    }
    .GameListMenu_tabButton__O8QnX {
        padding: 5px 20px;

        font-size: 0.875em;
    }
    .GameListMenu_tabContents__LYqTd {
        padding: var(--gap-mobile);
    }
    .GameListMenu_imrsGameContainer__dpO\+n {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.GameListMenu_loadingIndicator__nfolZ {
    margin: 20px 0;
    padding: 10px;
    text-align: center;
    min-height: 50px; /* 確保有足夠的高度被觀察 */
    visibility: visible; /* 確保可見 */
}

.GameListMenu_loadingText__lFuZF,
.GameListMenu_noMoreText__zyL2h {
    text-align: center;
    padding: 10px;
    color: var(--color-main);
    font-size: 14px;
}

.GameListMenu_loadingText__lFuZF {
    color: #1890ff;
}

.GameListMenu_loadMoreTrigger__IhES2 {
    margin: 20px 0;
    width: 100%;
    text-align: center;
}

/* 主容器設定 - 控制整體佈局和捲動 */
.Intro_gameIntroArea__7H8EH {
    position: relative;
    z-index: 1;
    padding: 50px;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
}

/* 背景層 */
.Intro_backgroundLayer__mIJX2 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.5)); /*圓形*/
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%); */
    /* clip-path: polygon(0 0, 50% 0, 40% 100%, 0% 100%); */
    z-index: 0;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

/* 內容層 */
.Intro_contentLayer__dRGCt {
    position: relative;
    z-index: 1;
    width: clamp(840px, 70vw, 1300px);
    display: flex;

    height: 100%;
    height: -webkit-max-content;
    height: max-content;
    box-sizing: border-box;
    /* padding: clamp(8px, 1vw, 12px); */
    padding: 12px;
    border-radius: 40px;
    background-color: rgba(0, 0, 0, 0.6);
    background: linear-gradient(to bottom, rgba(124, 98, 198, 0.3) 10%, rgba(132, 110, 203, 0.5) 20%, rgba(57, 39, 79, 0.5) 50%),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.3) 15%, rgba(89, 107, 177, 0.5) 100%);
    /* 加入藍色邊緣發光效果 */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(89, 107, 177, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(89, 107, 177, 0.08);
}

.Intro_contentLayer__dRGCt:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.Intro_infoHolder__WzqRT {
    padding: 20px;
}

.Intro_textHolder__rCq8V {
    /* margin-bottom: 25px; */
    color: #fff;
    color: var(--bg-primary);
    text-align: left;
    font-family: var(--font-default);
    font-size: 1em;
    line-height: 1.5em;
    text-align: center;
}

.Intro_textHolder__rCq8V p {
    /* font-family: var(--font-default); */
    width: 100%;
    font-size: 0.9375em;
    line-height: 1.5em;
    color: #fff;
    opacity: 0.8;

    margin: 10px auto;
}

/* .btn {
    composes: btn from btnStyles;
} */
.Intro_imgHolder__qNui\+ {
    flex: 1 1;
}
.Intro_imgHolder__qNui\+ .Intro_img__3OgQu {
    background-size: cover;
    border-radius: 30px;
    /* border: 1px solid var(--bg-primary); */
    border-top: none;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.Intro_imgHolder__qNui\+ .Intro_img__3OgQu:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 56.5%;
    /* padding-bottom: 75%; */
}
.Intro_subheading__5V8tz h3 {
    color: #a296ff;
    font-size: clamp(17px, 2.2vh, 22px);
    margin-bottom: 12px;
    /* text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
    letter-spacing: 0.01em;
    background: linear-gradient(to bottom, #a296ff 0%, #f1efff 50%, #a296ff 50%, #cac3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.Intro_subtitle__wP7Nu {
    margin-bottom: 25px;
    /* font-family: "Nunito", sans-serif; */
    font-weight: bold;
    line-height: 1em;
    /* font-size: clamp(24px, 4.75vh, 80px); */
    font-size: clamp(24px, 3.75vh, 64px);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(162, 150, 255, 0.5), 0 0 15px rgba(162, 150, 255, 0.3), 0 0 20px rgba(162, 150, 255, 0.1);
}

/* 分隔線 */
.Intro_subtitle__wP7Nu::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(241, 236, 255, 0.5), transparent);
    margin-top: 20px;
}

.Intro_btnHolder__rvbnk {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    z-index: 10;
}

/* 學習統計容器 - 控制統計資訊的外觀 */
.Intro_learningStatsContainer__9CH0G {
    /* width: clamp(320px, 70%, 420px); */
    width: 100%;
    /* backdrop-filter: blur(8px); */
    /* background: rgba(99, 99, 99, 0.08); */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    margin-top: auto;
    border-radius: 12px;
    /* padding: 10px; */

    margin: 0 auto 25px;
    box-sizing: border-box;
}
/* 統計網格 - 控制統計項目的排列 */
.Intro_statsGrid__VepNJ {
    display: grid;
    grid-template-columns: repeat(3, 0.8fr); /* 3列等寬排列 */
    margin-bottom: 2px;
    grid-gap: 6px;
    gap: 6px; /* 如需調整格線間距，修改 gap 值 */
}
/* 統計項目 - 控制單個統計項目的外觀 */
.Intro_statItem__ZZRHL {
    text-align: center;
    padding: 5px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column-reverse;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
/* 統計項目懸停效果 - 控制懸停時的樣式 */
.Intro_statItem__ZZRHL:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.08);
}

.Intro_statValue__36uC5 {
    font-size: 20px;
    font-family: var(--font-default);
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 2px;
    line-height: 1em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.Intro_statLabel__fllNA {
    color: #a296ff;
    font-size: 12px;
}

.Intro_learningProgress__xMeW- {
    padding-top: 8px;
    margin-top: 4px;
}

.Intro_progressTitle__hygwc {
    color: #a296ffd1;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
}

.Intro_progressContent__VugGF {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
}

@media (min-width: 701px) {
    .Intro_gameIntroArea__7H8EH {
        padding: 10vh 25px;
    }
}
@media (min-width: 701px) and (orientation: landscape) {
    .Intro_textHolder__rCq8V {
        text-align: left;
    }
    .Intro_statItem__ZZRHL {
        /* text-align: center;
        padding: 5px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 6px;
        transition: all 0.2s ease;
        display: flex; */
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
        padding: 6px 10px;
    }
    .Intro_imgHolder__qNui\+ .Intro_img__3OgQu:before {
        padding-bottom: 75%;
    }
    .Intro_infoHolder__WzqRT {
        flex: 1 1;
        padding-left: clamp(30px, 2vw, 50px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
@media (min-width: 701px) and (max-width: 1200px) and (orientation: portrait) {
    .Intro_infoHolder__WzqRT {
        padding-bottom: 20px;
    }
    .Intro_imgHolder__qNui\+ {
        margin-bottom: 25px;
    }
    .Intro_gameIntroArea__7H8EH {
        padding: 50px;
    }
    .Intro_contentLayer__dRGCt {
        width: 70%;
        padding: clamp(8px, 1vh, 15px);
        flex-direction: column;
    }
    .Intro_subtitle__wP7Nu {
        font-size: 2em;
    }
    .Intro_btnHolder__rvbnk {
        justify-content: center;
    }
}
@media (max-width: 700px) {
    .Intro_infoHolder__WzqRT {
        padding: 0 10px 10px;
    }
    .Intro_imgHolder__qNui\+ {
        margin-bottom: 25px;
    }
    .Intro_gameIntroArea__7H8EH {
        padding: 60px 25px 72px;
        /* position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      background: transparent; */
    }
    .Intro_subtitle__wP7Nu {
        font-size: 1.5em;
        margin-bottom: 10px;
    }
    .Intro_subtitle__wP7Nu::after {
        margin-top: 10px;
    }

    .Intro_backgroundLayer__mIJX2 {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .Intro_contentLayer__dRGCt {
        flex-direction: column;
        width: 100%;
        padding: clamp(3px, 2vh, 8px);
        border-radius: 30px;
    }
    .Intro_learningProgress__xMeW- {
        display: none;
    }
    .Intro_textHolder__rCq8V {
        margin-bottom: clamp(20px, 4vh, 60px);
    }

    .Intro_textHolder__rCq8V p {
        font-size: 0.8125em;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        line-height: 1.25em;
        -webkit-box-orient: vertical;
    }
    .Intro_btnHolder__rvbnk {
        justify-content: center;
    }

    .Intro_statsGrid__VepNJ {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .Intro_statValue__36uC5 {
        font-size: 16px;
    }

    .Intro_statLabel__fllNA {
        font-size: 10px;
    }
    .Intro_subheading__5V8tz h3 {
        margin-bottom: 3px;
    }
}

.GameNavLink_btn__HG9TJ {
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: rgba(236, 241, 244, 0.6);
    font-size: 1.25em;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    font-family: var(--font-default);
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    color: var(--text-btn--primary);
}
@media (min-width: 1600px) and (min-height: 800px) {
    .GameNavLink_btn__HG9TJ {
        font-size: 1.5em;
    }
}
.GameNavLink_btn__HG9TJ::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
}

@media (hover: hover) {
    .GameNavLink_btn__HG9TJ:hover {
        background-color: rgba(238, 236, 244, 0.9);
        border-color: #fff;
        transform: scale(1.1);
        box-shadow: rgba(232, 223, 255, 0.7) 0px 0px 12px, rgba(203, 182, 255, 0.4) 0px 0px 20px 8px, rgba(255, 255, 255, 0.3) 0px 0px 8px inset;
        text-shadow: rgba(80, 52, 190, 0.7) 0px 0px 10px;
        color: var(--text-btn-hover--primary);
    }
}
@media (hover: none) {
    .GameNavLink_btn__HG9TJ:active {
        background-color: rgba(238, 236, 244, 0.9);
        border-color: #fff;
        box-shadow: rgba(232, 223, 255, 0.7) 0px 0px 12px, rgba(203, 182, 255, 0.4) 0px 0px 20px 8px, rgba(255, 255, 255, 0.3) 0px 0px 8px inset;
        text-shadow: rgba(80, 52, 190, 0.7) 0px 0px 10px;
    }
}

.ShareGameButton_shareButton__jxITA {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #4a90e2;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ShareGameButton_shareButton__jxITA:hover {
  background-color: #357abd;
}

.ShareGameButton_shareIcon__lbOGc {
  width: 16px;
  height: 16px;
}

/* System 變體樣式 - 類似 SystemButton */
.ShareGameButton_system__mVBgj {
  border-radius: 6px;
  background-color: #74747c;
  color: #252734;
  padding: 0 1.25em;
  height: 40px;
  font-size: 1rem;
  line-height: 1;
  transition: background-color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  margin-left: 10px;
}

.ShareGameButton_system__mVBgj span {
  font-size: 1rem;
  font-family: "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei",
    Helvetica, Arial;
  color: #d0e1ed;
  transition: color 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  line-height: 20px;
  font-weight: normal;
}

.ShareGameButton_system__mVBgj .ShareGameButton_shareIcon__lbOGc {
  color: #d0e1ed;
}

.ShareGameButton_system__mVBgj:hover {
  background-color: #fff;
}

.ShareGameButton_system__mVBgj:hover span,
.ShareGameButton_system__mVBgj:hover .ShareGameButton_shareIcon__lbOGc {
  color: #4741ff;
}

/* Quest 變體樣式 - 為任務頁面特別設計 */
.ShareGameButton_quest__IW3qF {
  border-radius: 6px;
  background-color: #5a67d8;
  color: white;
  padding: 0 1.25em;
  height: 40px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.ShareGameButton_quest__IW3qF span {
  color: white;
}

.ShareGameButton_quest__IW3qF:hover {
  background-color: #4c51bf;
}

.ShareGameButton_tooltip__4ycIn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  animation: ShareGameButton_fadeInOut__FXW4H 2s ease-in-out forwards;
  z-index: 1000;
}

@keyframes ShareGameButton_fadeInOut__FXW4H {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.ServerHealthError_container__O9zI8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  text-align: center;
  background-color: #f5f5f5;
}

.ServerHealthError_title__AX9ka {
  color: #d32f2f;
  margin-bottom: 16px;
}

.ServerHealthError_subtitle__AfGy0 {
  color: #666;
  font-size: 16px;
  margin-bottom: 8px;
}

.ServerHealthError_message__t3QNt {
  color: #999;
  font-size: 14px;
}


.Feed_logo__r7n9P {
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  background: url(/static/media/logo-imrs.e2074749e404dca1fee9.svg) no-repeat center center;
  background-size: 40px auto;
}

/* Logo 區域：包含主標題和副標題 */
.Feed_logoArea__fLJQY {
  position: fixed;
  left: 20px;
  top: 0;
  height: var(--height-header);
  z-index: 99;
}
.Feed_gameLogo__4\+Ldg {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;

  /* border: 1px dashed seagreen; */
}

@media (max-width: 900px) {
  /* .gameLogo {
        display: none;
    } */
  .Feed_btnUpgrade__qEoxS {
    position: relative;
    transform: none;
    right: auto;
    top: auto;
  }
}

.Feed_btnUpgrade__qEoxS {
  /* 顏色與尺寸變數 */
  --gold-start: #e8f5f9; /* 金色起點 */
  --gold-end: #9082af; /* 金色終點 */
  --purple-start: #7c50f4; /* 紫色起點 */
  --purple-end: #5132cc; /* 紫色終點 */
  --border-thickness: 3px; /* 邊框厚度 */
  --button-padding: 12px 28px; /* 內部填充 */
  --button-radius: 30px; /* 圓角半徑 */

  /* 按鈕容器基本樣式 */
  padding: var(--button-padding);
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;

  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
  position: absolute; /* 關鍵：為 ::before / ::after 定位 */
  overflow: hidden; /* 關鍵：隱藏溢出的旋轉漸層 */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 1; /* 讓按鈕內容層次高於偽元素 */
  transition: transform 0.2s ease-in-out;
  background: none;
  padding: 3px;
  right: -5px;
  top: 27px;
  transform: translateX(105%);
}

.Feed_btnUpgrade__qEoxS span {
  background-color: #1e1f2a;
  display: block;
  position: relative;
  z-index: 2;
  border-radius: 30px;
  padding: 5px 15px;
}

.Feed_btnUpgrade__qEoxS:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.Feed_btnUpgrade__qEoxS.Feed_active__6SQ5S span {
  background-color: #384267;
}

/* 1. ::before 創建旋轉的錐形漸層邊框 */
.Feed_btnUpgrade__qEoxS::before {
  content: "";
  position: absolute; /* 絕對定位 */
  width: 100%;
  padding-bottom: 100%;
  /* 讓 ::before 比按鈕大一圈 (上下左右各擴大 border-thickness) */
  top: 50%;
  left: 50%;
  z-index: 1;
  opacity: 0.8;

  /* 錐形漸層：實現紫金流光效果 */
  background: conic-gradient(
    from 0deg,
    var(--gold-start) 0%,
    var(--gold-end) 10%,
    var(--purple-start) 30%,
    var(--purple-end) 50%,
    var(--gold-start) 70%,
    var(--purple-end) 100%
  );

  border-radius: calc(var(--button-radius) + var(--border-thickness));
  z-index: -1; /* 位於按鈕之下 */

  /* 旋轉動畫 */
  animation: Feed_rotateBorder__OcFHp 4s linear infinite;
}

/* 2. ::after 創建內部遮罩，只露出邊緣作為邊框 */
.Feed_btnUpgrade__qEoxS::after {
  content: "";
  position: absolute;

  /* 比按鈕小一圈 (上下左右各縮小 border-thickness) */
  top: var(--border-thickness);
  left: var(--border-thickness);
  right: var(--border-thickness);
  bottom: var(--border-thickness);

  /* 繼承按鈕的背景，遮住 ::before 的中間部分 */
  background: inherit;
  border-radius: calc(var(--button-radius) - var(--border-thickness));
  z-index: 0; /* 位於 ::before 之上，但按鈕文字之下 */
  pointer-events: none; /* 確保不影響按鈕點擊 */
}

/* 定義旋轉動畫 */
@keyframes Feed_rotateBorder__OcFHp {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 確保文字在最上層 */
.Feed_btnUpgrade__qEoxS span {
  position: relative;
  z-index: 2;
}

/* 主標題 IMMERSE */
.Feed_gameLogo__4\+Ldg h1:before {
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 29.7%;
  padding-bottom: 27%;
}
.Feed_gameLogo__4\+Ldg h1 {
  /* font-size: clamp(20px, 2.5vh, 64px);
    font-size: 29px;
    letter-spacing: 0; */
  font-size: 0;
  display: block;
  width: 136px;
  /* line-height: 1em;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(to bottom, #879ffd, #435084);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
  background: url(/static/media/imrs-lab.286ea07fe9f62bbe7495.svg) no-repeat center;
  background: url(/static/media/imrs-lab-ii.16e87ccc4639e1f6dce0.svg) no-repeat center;
  background-size: contain;

  /* 霓虹發光效果：從白色核心到金色外圍 */
  /* text-shadow: 0 0 6px #f6db9c, 0 0 10px #f6db9c, 0 0 14px #f6db9c, 0 0 20px #f6db9c, 0 0 25px #f6db9c, 0 0 30px #f6db9c; */
}
@media (max-width: 1400px) {
  .Feed_gameLogo__4\+Ldg h1 {
    width: 120px;
  }
}
.Feed_nav__35MpM {
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: var(--color-bg-main);
  width: 100%;
  width: 100vw;
  height: 60px;
  padding: 0 10px 10px;
  z-index: 9;
  background: var(--bg-nav-mobile);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  border-top: 1px solid var(--color-border);
}
.Feed_nav__35MpM.Feed_--no-show__z00N5 {
  display: none !important;
}
.Feed_nav-container__pZNO3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 701px) {
  .Feed_nav__35MpM {
    border-top: 0;
    border-top: initial;
    bottom: auto;
    bottom: initial;
    top: 0;
    height: 100vh;
    padding: 0;
    width: 72px;

    -webkit-backdrop-filter: initial;

            backdrop-filter: initial;
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    background: initial;
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
  }
  .Feed_nav-container__pZNO3 {
    flex-direction: column;
    pointer-events: auto;
  }
}

.Feed_nav__35MpM a,
.Feed_nav__35MpM button {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  padding: 10px 0 0;
  isolation: isolate;
  position: relative;
  flex: 1 1;
  box-sizing: border-box;
}
.Feed_nav__35MpM a:before,
.Feed_nav__35MpM button:before {
  content: "";
  display: block;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  position: absolute;
  border-radius: 8px;
  background-color: var(--color-pair);
  opacity: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: -1;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-property: transform, opacity;
  /* box-shadow: 0 0 15px rgba(138, 43, 226, 0.5), inset 0 0 8px rgba(138, 43, 226, 0.3);
    border: 1px solid rgba(200, 141, 255, 0.5);
    box-sizing: border-box; */
}
@media (min-width: 701px) {
  .Feed_nav__35MpM a,
  .Feed_nav__35MpM button {
    margin: 5px auto;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: initial;
  }
}

.Feed_nav__35MpM a span,
.Feed_nav__35MpM button span {
  color: var(--color-highlight-second);
  display: block;
  margin-top: 3px;
  text-align: center;
  position: relative;
  z-index: 2;
}
@media (min-width: 701px) {
  .Feed_nav__35MpM a span,
  .Feed_nav__35MpM button span {
    position: absolute;
    opacity: 0;
  }
}

.Feed_nav__35MpM a .Feed_imrs-icon__9osmo,
.Feed_nav__35MpM button .Feed_imrs-icon__9osmo {
  position: relative;
  z-index: 3;
}
.Feed_nav__35MpM a .Feed_imrs-icon__9osmo:before,
.Feed_nav__35MpM button .Feed_imrs-icon__9osmo:before {
  /* background-color: var(--color-highlight-second); */
  background-color: var(--color-main);
}
@media (min-width: 701px) {
  .Feed_nav__35MpM a .Feed_imrs-icon__9osmo:before,
  .Feed_nav__35MpM button .Feed_imrs-icon__9osmo:before {
    width: 28px;
    height: 28px;
  }
}

.Feed_nav__35MpM a.Feed_--active__twV4P,
.Feed_nav__35MpM button.Feed_--active__twV4P {
  opacity: 1;
}
@media (hover: hover) {
  .Feed_nav__35MpM a.Feed_--active__twV4P:before,
  .Feed_nav__35MpM button.Feed_--active__twV4P:before {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (hover: hover) {
  .Feed_nav__35MpM a:hover,
  .Feed_nav__35MpM button:hover {
    opacity: 0.8;
  }
  .Feed_nav__35MpM a:hover .Feed_imrs-icon__9osmo,
  .Feed_nav__35MpM button:hover .Feed_imrs-icon__9osmo {
    transform: scale(1.1);
  }
  .Feed_nav__35MpM a:hover:before,
  .Feed_nav__35MpM button:hover:before {
    opacity: 0.15;
    transform: translate(-50%, -50%) scale(1);
  }
}
.Feed_--active__twV4P .--pos-5:before {
  -webkit-mask-position: 7.25% 0;
  background-color: var(--color-main);
}
.Feed_--active__twV4P .--pos-7:before {
  -webkit-mask-position: 10.14% 0;
  background-color: var(--color-main);
}
.Feed_--active__twV4P .--pos-13:before {
  -webkit-mask-position: 18.84% 0;
  background-color: var(--color-main);
}
.Feed_--active__twV4P .--pos-26:before {
  -webkit-mask-position: 37.68% 0;
  background-color: var(--color-main);
}
.Feed_--show-desktop__o1I5S {
  display: none;
}
@media (min-width: 980px) {
  .Feed_--show-desktop__o1I5S {
    display: flex;
  }
}
.Feed_avatar__Y25RH {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}
@media (hover: hover) {
  .Feed_avatar__Y25RH {
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: transform, border-color;
    box-sizing: border-box;
  }
  .Feed_avatar__Y25RH:hover {
    transform: scale(1.1);
  }
}
@media (min-width: 701px) {
  .Feed_avatar__Y25RH {
    width: 48px;
    height: 48px;
  }
}
.Feed_section-title__hLDbd {
  display: flex;
  align-items: center;
  font-size: 1.375em;
}
.Feed_section-title__hLDbd .Feed_imrs-icon__9osmo {
  margin: 0 5px 0 0;
  vertical-align: middle;
}
.Feed_section-title__hLDbd .Feed_imrs-icon__9osmo:before {
  background-color: var(--color-highlight-third);
}
.Feed_feed-item__oLI7F {
  padding: 15px 0 30px 40px;
}
@media (min-width: 701px) {
  .Feed_feed-item__oLI7F {
    padding: 15px 0 30px 64px;
  }
}
.Feed_feed-item__oLI7F .Feed_top__5qcIA {
  position: relative;
  color: var(--color-highlight-third);
  font-size: 0.875em;
  padding-bottom: 5px;
}
.Feed_feed-item__oLI7F .Feed_top__5qcIA span {
  opacity: 0.3;
  margin-left: 5px;
}
.Feed_feed-item__oLI7F .Feed_top__5qcIA .Feed_name__KRd09 {
  color: var(--color-highlight-third);
}
.Feed_feed-item__oLI7F .Feed_middle__uz\+Os {
  font-size: 0.875em;
  padding-bottom: var(--gap);
}
@media (min-width: 701px) {
  .Feed_feed-item__oLI7F .Feed_middle__uz\+Os {
    font-size: 0.9375em;
  }
}
.Feed_feed-item__oLI7F .Feed_avatar__Y25RH {
  position: absolute;
  left: -40px;
}
@media (min-width: 701px) {
  .Feed_feed-item__oLI7F .Feed_avatar__Y25RH {
    left: -64px;
  }
}
.Feed_feed-switch__6hygV {
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* background: var(--bg-switch); */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9;
  isolation: isolate;
}
.Feed_feed-switch__6hygV:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid var(--color-border);
  position: absolute;
  left: 0;
  bottom: 0;
}
/* .feed-switch:after {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(136, 160, 255, 0.3);
    filter: blur(20px);
    width: 150%;
    height: 180%;
    border-radius: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
} */

.Feed_feed-switch__6hygV button {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-default);
  color: var(--color-pair);
  transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  flex: 1 1;
  justify-content: center;
}
.Feed_feed-switch__6hygV button span {
  display: flex;
  align-items: center;
  position: relative;
  height: 50px;
}
@media (min-width: 0) and (max-width: 900px) {
  .Feed_feed-switch__6hygV {
    padding: 4rem 0 0 0;
  }
}
@media (min-width: 701px) {
  .Feed_feed-switch__6hygV button span {
    font-size: 0.9375rem;
  }
}
.Feed_feed-switch__6hygV button span:before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-highlight-third);
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
}
.Feed_feed-switch__6hygV button.Feed_--active__twV4P {
  color: var(--color-highlight-first);
}
.Feed_feed-switch__6hygV button.Feed_--active__twV4P span:before {
  transform: translateX(-50%) scaleX(1);
}
.Feed_feed-fnbar__Aon7Y {
  display: flex;
  align-items: center;
}
.Feed_btn-heart__c-mBX,
.Feed_btn-msg__4RGSg,
.Feed_btn-share__d8AB- {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-default);
  color: var(--color-pair);
  font-size: 0.875em;
  margin-right: 20px;
  padding: 0;
}
.Feed_btn-heart__c-mBX .Feed_imrs-icon__9osmo,
.Feed_btn-msg__4RGSg .Feed_imrs-icon__9osmo,
.Feed_btn-share__d8AB- .Feed_imrs-icon__9osmo {
  margin-right: 4px;
}
@media (hover: hover) {
  .Feed_btn-heart__c-mBX:hover .Feed_imrs-icon__9osmo,
  .Feed_btn-msg__4RGSg:hover .Feed_imrs-icon__9osmo,
  .Feed_btn-share__d8AB-:hover .Feed_imrs-icon__9osmo {
    transform: scale(1.125);
  }
  .Feed_btn-heart__c-mBX:hover .Feed_imrs-icon__9osmo:before,
  .Feed_btn-msg__4RGSg:hover .Feed_imrs-icon__9osmo:before,
  .Feed_btn-share__d8AB-:hover .Feed_imrs-icon__9osmo:before {
    background-color: var(--color-highlight-third);
  }
}
.Feed_channel-card__xEx-9 {
  background: var(--bg-channel-card);
  border-radius: var(--rd-area);
  padding: calc(var(--gap) * 1.5) var(--gap);
  margin-top: var(--gap);
  font-size: 0.875em;
}
@media (min-width: 701px) {
  .Feed_channel-card__xEx-9 {
    padding: calc(var(--gap) * 2);
    font-size: 0.9375em;
    margin-top: calc(var(--gap) * 2);
  }
}
.Feed_channel-card__xEx-9 .Feed_top__5qcIA {
  padding-bottom: var(--gap);
}
@media (min-width: 701px) {
  .Feed_channel-card__xEx-9 .Feed_top__5qcIA {
    padding-bottom: calc(var(--gap) * 2);
  }
}
.Feed_channel-card__xEx-9 .Feed_top__5qcIA .Feed_left__B4Sq- {
  display: flex;
  line-height: 1.25em;
  align-items: center;
}
.Feed_channel-card__xEx-9 .Feed_top__5qcIA .Feed_text__IdsgM {
  display: flex;
  flex-direction: column;
}
@media (min-width: 701px) {
  .Feed_channel-card__xEx-9 .Feed_top__5qcIA .Feed_text__IdsgM {
    font-size: 1.125em;
  }
}
.Feed_channel-card__xEx-9 .Feed_top__5qcIA .Feed_avatar__Y25RH {
  margin-right: 5px;
}
@media (min-width: 0) and (max-width: 739px) {
  .Feed_channel-card__xEx-9 .Feed_top__5qcIA .Feed_avatar__Y25RH {
    width: 42px;
    height: 42px;
  }
}
@media (min-width: 701px) {
  .Feed_channel-card__xEx-9 .Feed_top__5qcIA .Feed_avatar__Y25RH {
    width: 64px;
    height: 64px;
  }
}
.Feed_channel-card__xEx-9 .Feed_bottom__qK7-w ul {
  display: flex;
  padding-top: var(--gap);
  margin-top: var(--gap);
}
.Feed_channel-card__xEx-9 .Feed_bottom__qK7-w li {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  color: var(--color-read);
}
.Feed_channel-card__xEx-9 .Feed_bottom__qK7-w li .Feed_num__6CwtX {
  font-family: var(--font-default);
  font-weight: bold;
  color: var(--color-highlight-third);
}
.Feed_status__kaMjC {
  text-align: center;
  /* border-top: 1px solid var(--color-border); */
  margin-top: var(--gap);
  padding-top: var(--gap);
  font-size: 0.875em;
  color: var(--color-pair);
}
@media (min-width: 0) and (max-width: 739px) {
  .Feed_container-s__-8oSv {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 700px) {
  .Feed_container-s__-8oSv {
    width: var(--width-small);
    margin: 0 auto;
  }
}
.Feed_container__6eLpu {
  min-height: 100vh;
}
.Feed_feed-container__Z9xVz {
  /* 載入提示的樣式 */
  .Feed_loading-indicator__3IV8P {
    text-align: center;
    padding: 1rem;
    color: #666;
  }
}

.Feed_pull-indicator__6McsL {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  transition: height 0.2s ease;
  overflow: hidden;
  z-index: 1;
}

.Feed_feed-container__Z9xVz {
  position: relative;
  min-height: 200px;
}

.Feed_loading-spinner__hRbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
  width: 100%;
}

/* 載入更多容器 */
.Feed_load-more-container__rEXWZ {
  width: 100%;
  margin: 15px 0;
  text-align: center;
  min-height: 60px;
}

/* 載入指示器 */
.Feed_loading-indicator__3IV8P {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #666;
  font-size: 14px;
}

/* 載入點動畫 */
.Feed_loading-dots__3kRS5 {
  display: flex;
  gap: 5px;
}

.Feed_loading-dot__FQZ\+v {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3498db;
  display: inline-block;
  animation: Feed_dot-pulse__h\+im0 1.5s infinite ease-in-out;
}

.Feed_loading-dot__FQZ\+v:nth-child(2) {
  animation-delay: 0.2s;
}

.Feed_loading-dot__FQZ\+v:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes Feed_dot-pulse__h\+im0 {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* 沒有更多貼文提示 */
.Feed_no-more-posts__lOYg7 {
  color: #777;
  font-size: 14px;
  padding: 10px;
  text-align: center;
  position: relative;
}

.Feed_no-more-posts__lOYg7:before,
.Feed_no-more-posts__lOYg7:after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: #ddd;
  margin: 0 10px;
  vertical-align: middle;
}

/* 沒有貼文提示 */
.Feed_no-posts__BIrEC {
  text-align: center;
  padding: 40px 0;
  color: #666;
  font-size: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin: 20px 0;
}

/* 歡迎訊息 - 載入完成但完全沒有資料時顯示 */
.Feed_welcome-message__jN8dK {
  text-align: center;
  padding: 60px 20px;
  margin: 40px 0;
}

.Feed_welcome-content__lTu10 {
  max-width: 500px;
  margin: 0 auto;
}

.Feed_welcome-content__lTu10 h3 {
  font-size: 1.5em;
  color: #879ffd;
  color: var(--color-highlight-first, #879ffd);
  margin-bottom: 16px;
  font-weight: 600;
}

.Feed_welcome-content__lTu10 p {
  font-size: 1em;
  color: #666;
  color: var(--color-pair, #666);
  line-height: 1.6;
  margin: 0;
}

/* 主題色彩系統 */
/* :root {
} */

/* Settings 模組顏色 */
.colors_settings__43-K- {
    --nav-bg: linear-gradient(135deg, rgba(35, 46, 92, 0.8), rgba(35, 46, 92, 0.6) 40%, rgba(35, 46, 92, 0.4) 70%, rgba(35, 46, 92, 0.2));
    --profile-border: var(--border-primary);
    --profile-shadow: var(--glow-accent);
    --settings-bg: radial-gradient(circle, var(--bg-secondary) 0%, var(--bg-tertiary) 30%, var(--bg-primary) 90%);

    /* 新增的設定 */
    --tab-divider: var(--border-light);
    --tab-text: var(--text-tertiary);
    --tab-text-hover: var(--text-secondary);
    --tab-text-active: var(--text-primary);
    --tab-line: var(--text-primary);
    --tab-line-glow: var(--glow-primary);
    --tab-bg-inactive: var(--blur-overlay);

    --scrollbar-thumb: var(--scrollbar-color);

    --profile-text: var(--text-highlight);
    --profile-title-glow: rgba(188, 202, 255, 0.7);
    --profile-ai-border: rgba(129, 150, 234, 0.4);
    --profile-ai-label: rgba(143, 166, 255, 0.8);
    --profile-ai-bg: rgba(89, 107, 177, 0.15);
    --profile-description-border: rgba(129, 150, 234, 0.2);

    --menu-link: rgba(255, 255, 255, 0.8);
    --menu-link-hover: var(--text-primary);
    --menu-divider: rgba(255, 255, 255, 0.2);
    --menu-divider-hover: rgba(255, 255, 255, 0.5);
    --menu-logout: rgba(255, 100, 100, 0.8);
    --menu-logout-hover: rgb(255, 100, 100);

    --form-border: rgba(160, 193, 209, 0.08);
    --switch-bg: rgba(255, 255, 255, 0.2);
    --radio-border: rgba(255, 255, 255, 0.3);

    /* 新增或修改的變數 */
    --nav-container-shadow: rgba(89, 107, 177, 0.08);
    --avatar-inset-glow: rgba(105, 126, 207, 0.05);

    --menu-text-shadow: rgba(255, 255, 255, 0.1);
    --menu-logout-shadow: rgba(255, 100, 100, 0.3);
    --menu-logout-shadow-2: rgba(255, 100, 100, 0.2);

    --profile-text-shadow: rgba(76, 70, 149, 0.2);

    /* 其他相關的陰影效果 */
    --profile-title-shadow: 0 0 10px var(--profile-title-glow), 0 0 20px var(--glow-secondary), 0 0 35px var(--glow-secondary);
    --profile-stat-shadow: 0 0 10px var(--glow-secondary);
    --menu-hover-shadow: 0 0 10px var(--glow-primary), 0 0 20px var(--glow-primary);

    /* 組織相關的陰影效果 */
    --shadow-effects: {
        --nav-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
        --profile-shadow: 0 0 20px var(--glow-accent);
        --avatar-shadow: 0 0 20px var(--glow-accent);
        --ai-companion-shadow: 0 0 10px var(--glow-accent);
    }

    /* 組織相關的背景效果 */
    --background-effects: {
        --nav-bg-gradient: var(--gradient-secondary), var(--gradient-primary);
        --form-bg-gradient: linear-gradient(to bottom, var(--blur-overlay), transparent);
    }
}

.Settings_settings__QPVHg {
}
.Settings_gameNavArea__dDhxc {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
  background: var(--settings-bg);
  -webkit-backdrop-filter: blur(10px) brightness(0.9);
          backdrop-filter: blur(10px) brightness(0.9);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 改用 className 來控制顯示狀態 */
.Settings_gameNavArea__dDhxc.Settings_show__aEAxf {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.Settings_gameNavArea__dDhxc + .Settings_btn__sbaJa {
  display: none !important;
}

.Settings_navContainer__sCaxn {
  width: 90%;
  max-width: 500px; /* 調窄一點 */
  height: calc(100vh - 120px);
  margin: auto;
  /* 背景改為多層藍色漸層，製造光暈和深度感 */
  background: var(--gradient-secondary), var(--gradient-primary);
  /* 加入藍色邊緣發光效果 */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5),
    inset 0 0 60px var(--nav-container-shadow);
  display: flex;
  flex-direction: column;
  transform: perspective(1000px) rotateY(30deg);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.Settings_navContainer__sCaxn.Settings_show__aEAxf {
  transform: perspective(1000px) rotateY(0deg);
  opacity: 1;
  transition-delay: 0.1s;
}
@media (min-width: 1600px) and (min-height: 800px) {
  .Settings_navContainer__sCaxn {
    max-width: 580px; /* 調窄一點 */
  }
}
.Settings_tabNav__S9aR9 {
  display: flex;
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
}

/* 上方白線 */
.Settings_tabNav__S9aR9:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: var(--white-gradient);
  box-shadow: 0 0 10px var(--glow-primary);
}

/* 底部分隔線 */
.Settings_tabNav__S9aR9:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--tab-divider);
}

.Settings_tabNav__S9aR9 div {
  flex: 1 1;
  padding: 20px;
  color: var(--tab-text);
  cursor: pointer;
  position: relative;
  font-size: 1.25em;
  text-align: center;
  transition: all 0.3s ease;
  background: transparent;
}

@media (min-width: 0px) and (max-width: 700px) {
  .Settings_tabNav__S9aR9 div {
    padding: 10px;
    font-size: 1.125em;
  }
}
@media (min-width: 701px) and (max-width: 1200px) {
  .Settings_tabNav__S9aR9 div {
    padding: 14px;
    font-size: 1.125em;
  }
}

/* 未選中tab的背景 */
.Settings_tabNav__S9aR9 div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--tab-bg-inactive), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.Settings_tabNav__S9aR9 div:not(.Settings_active__39ZvF):before {
  opacity: 1;
}

.Settings_tabNav__S9aR9 div:hover {
  color: var(--tab-text-hover);
}

/* 選中的tab樣式 */
.Settings_tabNav__S9aR9 div.Settings_active__39ZvF {
  color: var(--tab-text-active);
  text-shadow: 0 0 10px var(--tab-line-glow);
}

/* 選中tab的底線動畫 */
.Settings_tabNav__S9aR9 div.Settings_active__39ZvF:after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--tab-line);
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--tab-line-glow);
  transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: Settings_tabLineIn__Wu3z8 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes Settings_tabLineIn__Wu3z8 {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* 未選中tab的底線消失動畫 */
.Settings_tabNav__S9aR9 div:not(.Settings_active__39ZvF):after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: var(--tab-line);
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--tab-line-glow);
  transition: width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  animation: Settings_tabLineOut__Ybh0y 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes Settings_tabLineOut__Ybh0y {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

.Settings_tabContent__9RGXw {
  flex: 1 1;
  position: relative;
  overflow: hidden;
}

.Settings_content__4fky4 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #8899f0 transparent;
}

.Settings_content__4fky4::-webkit-scrollbar {
  width: 12px;
}
.Settings_content__4fky4::-webkit-scrollbar-track {
  background: transparent;
}
.Settings_content__4fky4::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 20px;
  -webkit-transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.Settings_content__4fky4.Settings_active__39ZvF {
  visibility: visible;
  opacity: 1;
}

/* Profile樣式 */
.Settings_profile__-memI {
  padding: 40px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column-reverse;
  overflow: hidden;
  background: var(--nav-bg);
  margin: 0 0 20px;
  box-shadow: 0 0 20px var(--profile-shadow);
  border: 1px solid var(--profile-border);
}

/* 調整頭像區域 */
.Settings_profile__-memI .Settings_avatar__aV22P {
  width: 150px;
  margin: 0 auto;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-secondary);
  box-shadow: 0 0 20px var(--glow-accent),
    inset 0 0 30px var(--avatar-inset-glow), inset 0 0 20px var(--glow-accent);
}

/* 調整頭像內部圖片位置 */
.Settings_profile__-memI .Settings_avatar__aV22P .Settings_img__MMaFQ {
  width: 100%;
  background-size: cover;
}

.Settings_profile__-memI .Settings_avatar__aV22P .Settings_img__MMaFQ::before {
  width: 100%;
  content: "";
  display: block;
  padding-bottom: 100%;
}

/* AI學伴頭像樣式 */
.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_img__MMaFQ {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--profile-ai-border);
  box-shadow: 0 0 10px var(--glow-accent);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_aiLabel__WrSU6 {
  font-size: 0.85em;
  color: var(--profile-ai-label);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 2px 6px;
  background: var(--profile-ai-bg);
  border-radius: 4px;
}

.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_aiName__ULjJh {
  font-size: 0.75em; /* 縮小字體大小 */
  color: var(--text-primary);
  font-weight: 500;
  text-shadow: 0 0 10px var(--glow-secondary);
}

@media (min-width: 0px) and (max-width: 700px) {
  .Settings_profile__-memI .Settings_aiCompanion__w3f\+4 {
    justify-content: center;
    margin: 15px auto 0;
  }

  .Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_img__MMaFQ {
    width: 36px;
    height: 36px;
  }
}
/* 調整文字區域 */
.Settings_profile__-memI ul {
  padding: 1rem 1rem 0.5rem;
  width: 100%;
}

.Settings_profile__-memI .Settings_title__EQ5w8 h2 {
  font-size: clamp(20px, 3.5vh, 64px); /* 加大標題 */
  color: var(--text-primary);
  text-shadow: var(--profile-title-shadow);
  letter-spacing: 2px;
  /* border-bottom: 1px solid rgba(147, 167, 240, 0.2); */
  padding-bottom: 0.15em;
  text-align: center;
}

.Settings_profile__-memI li {
  /* margin-bottom: 15px; */
  color: var(--profile-text);
  font-size: 1.3em; /* 加大文字 */
  text-shadow: 0 0 10px var(--profile-text-shadow),
    0 0 20px var(--profile-text-shadow);
  letter-spacing: 1px;
  font-family: "Nunito", sans-serif;
  text-align: center;
  margin-bottom: 0;
}

@media (min-width: 0px) and (max-width: 700px) {
  .Settings_profile__-memI {
    margin: 0;
  }
}

@media (min-width: 1600px) {
  .Settings_profile__-memI {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

/* 加入底部裝飾線 */
/* .profile:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 170, 0.1), transparent);
} */

.Settings_navMenu__cHSnf {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Settings_navMenu__cHSnf a {
  display: block;
  width: 80%;
  padding: 10px 0;
  color: var(--menu-link);
  text-align: center;
  font-size: 1.2em;
  letter-spacing: 1px;
  position: relative;
  transition: all 0.2s ease;
  text-shadow: 0 0 10px var(--menu-text-shadow);
}

/* 選項分隔線 */
.Settings_navMenu__cHSnf a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--menu-divider),
    transparent
  );
  transition: all 0.3s ease;
}

/* Hover效果 */
.Settings_navMenu__cHSnf a:hover {
  color: var(--menu-link-hover);
  text-shadow: var(--menu-hover-shadow);
  transform: scale(1.02);
}

/* Hover時分隔線效果 */
.Settings_navMenu__cHSnf a:hover:after {
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--menu-divider-hover),
    transparent
  );
  box-shadow: 0 0 10px var(--glow-primary);
}

/* 最後一個選項不要有分隔線 */
.Settings_navMenu__cHSnf a:last-child:after {
  display: none;
}

/* 第一個選項(登出)特殊樣式 */
.Settings_navMenu__cHSnf a:first-child {
  color: var(--menu-logout);
}

.Settings_navMenu__cHSnf a:first-child:hover {
  color: var(--menu-logout-hover);
  text-shadow: 0 0 10px var(--menu-logout-shadow),
    0 0 20px var(--menu-logout-shadow-2);
}

.Settings_gameSettingContainer__RkMuM {
  padding: 20px 40px; /* 左右padding可調整，影響內容寬度 */
  /* 可以加入微弱背景 */
  background: linear-gradient(to bottom, var(--blur-overlay), transparent);
}

.Settings_formItem__wRjk5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--form-border);
}

.Settings_field__EuZI8 {
  color: var(--text-primary);
  font-size: 1.1em;
}

.Settings_value__OMbu\+ {
  flex: 1 1;
  display: flex;
  justify-content: flex-end;
}

/* Switch 樣式 */
.Settings_switch__xPVm- {
  position: relative;
  width: 60px;
  height: 30px;
}

.Settings_switch__xPVm- input {
  opacity: 0;
  width: 0;
  height: 0;
}

.Settings_switch__xPVm- label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--switch-bg);
  transition: 0.4s;
  border-radius: 30px;
}

.Settings_switch__xPVm- label:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: var(--text-primary);
  transition: 0.4s;
  border-radius: 50%;
}

.Settings_switch__xPVm- input:checked + label {
  background-color: var(--switch-active);
}

.Settings_switch__xPVm- input:checked + label:before {
  transform: translateX(30px);
}

.Settings_switch__xPVm-.Settings_disabled__dYqyG {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Radio 樣式 */
.Settings_radioGroup__4ZMle {
  display: flex;
  gap: 20px;
}

.Settings_radioGroup__4ZMle div {
  position: relative;
}

.Settings_radioGroup__4ZMle input[type="radio"] {
  opacity: 0;
  position: absolute;
}

.Settings_radioGroup__4ZMle label {
  color: var(--text-secondary);
  cursor: pointer;
  padding-left: 30px;
  position: relative;
}

.Settings_radioGroup__4ZMle label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--radio-border);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.Settings_radioGroup__4ZMle label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--switch-active);
  opacity: 0;
  transition: all 0.3s ease;
}

.Settings_radioGroup__4ZMle input[type="radio"]:checked + label:before {
  border-color: var(--switch-active);
}

.Settings_radioGroup__4ZMle input[type="radio"]:checked + label:after {
  opacity: 1;
}

.Settings_radioGroup__4ZMle.Settings_disabled__dYqyG {
  opacity: 0.5;
  cursor: not-allowed;
}

.Settings_radioGroup__4ZMle.Settings_disabled__dYqyG label {
  cursor: not-allowed;
}
.--story-mode > .Settings_btn__sbaJa {
  display: none !important;
}
.Settings_profile__-memI .Settings_nicknameHeader__\+h6Ju {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
}

.Settings_profile__-memI .Settings_nicknameHeader__\+h6Ju h2 {
  margin: 0;
  flex: 1 1;
}

.Settings_profile__-memI .Settings_usernameContainer__1J8L9 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  margin-left: 12px;
  transition: all 0.3s ease;
}

.Settings_profile__-memI .Settings_usernameContainer__1J8L9:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.Settings_profile__-memI .Settings_usernameText__4w-iP {
  color: var(--profile-ai-label);
  font-size: 0.65em;
  opacity: 0.9;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.Settings_profile__-memI .Settings_copyButton__PYpad {
  background: transparent;
  border: none;
  color: var(--profile-ai-label);
  font-size: 0.75em;
  cursor: pointer;
  padding: 1px 2px;
  border-radius: 2px;
  transition: all 0.2s ease;
  opacity: 0.6;
  min-width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.Settings_profile__-memI .Settings_copyButton__PYpad:hover {
  opacity: 1;
  color: var(--text-primary);
  transform: scale(1.15);
}

.Settings_profile__-memI .Settings_copyButton__PYpad:active {
  transform: scale(0.95);
}

.Settings_profile__-memI .Settings_userDescription__sMNdP {
  color: var(--profile-text);
  font-size: 0.8em;
  line-height: 1.5;
  margin: 0 0 15px;
  padding: 10px 15px;
  background: var(--profile-ai-bg);
  border-radius: 8px;
  border: 1px solid var(--profile-description-border);
  text-shadow: 0 0 10px var(--profile-text-shadow);
  max-width: 100%;
  word-wrap: break-word;
}

@media (min-width: 0px) and (max-width: 700px) {
  .Settings_profile__-memI .Settings_userDescription__sMNdP {
    margin: 10px 0;
    min-height: 0;
    min-height: initial;
  }

  .Settings_profile__-memI .Settings_nicknameHeader__\+h6Ju {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .Settings_profile__-memI .Settings_usernameContainer__1J8L9 {
    margin-left: 0;
    padding: 3px 6px;
    align-self: flex-start;
  }

  .Settings_profile__-memI .Settings_usernameText__4w-iP {
    font-size: 0.6em;
    max-width: 100px;
  }

  .Settings_profile__-memI .Settings_copyButton__PYpad {
    font-size: 0.7em;
    min-width: 10px;
    height: 10px;
  }
}

.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_aiInfo__fuPj- {
  display: flex;
  align-items: center;
  gap: 8px;
}

.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_aiLabel__WrSU6 {
  font-size: 0.85em;
  color: var(--profile-ai-label);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.Settings_profile__-memI .Settings_aiCompanion__w3f\+4 .Settings_aiName__ULjJh {
  font-size: 1em;
  color: var(--text-primary);
  font-weight: 500;
  text-shadow: 0 0 10px var(--glow-secondary);
}

.Settings_profile__-memI .Settings_statItem__r983m {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  justify-content: center;
}

.Settings_profile__-memI .Settings_statLabel__HP\+PY {
  color: var(--profile-ai-label);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.Settings_profile__-memI .Settings_statValue__tMZLv {
  color: var(--text-primary);
  font-size: 0.95em;
  font-weight: 600;
  text-shadow: var(--profile-stat-shadow);
  background: var(--profile-ai-bg);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--profile-description-border);
  min-width: 45px;
  text-align: center;
}

@media (min-width: 0px) and (max-width: 700px) {
  .Settings_profile__-memI {
    justify-content: center;
  }

  .Settings_profile__-memI .Settings_statValue__tMZLv {
    font-size: 0.9em;
    padding: 2px 6px;
    min-width: 40px;
  }
}

.Settings_inputField__m0drw {
  width: 100%;
  background: var(--profile-ai-bg);
  color: var(--text-primary);
  border: 1px solid var(--profile-description-border);
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 1em;
  line-height: 1.5;
  margin: 8px 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 5px var(--profile-shadow);
  text-shadow: 0 0 5px var(--profile-text-shadow);
}

.Settings_inputField__m0drw:focus {
  outline: none;
  border-color: var(--switch-active);
  box-shadow: 0 0 10px var(--glow-accent);
}

.Settings_textareaField__w\+gdp {
  min-height: 80px;
  resize: vertical;
}

.Settings_editTitle__NWH2I {
  color: var(--text-primary);
  font-size: 1.5em;
  margin-bottom: 1rem;
}

.Settings_editButton__LFxDs {
  margin-top: 10px;
  background: var(--profile-ai-bg);
  color: var(--text-primary);
  border: 1px solid var(--profile-description-border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 1em;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px var(--profile-text-shadow);
  display: block;
}

.Settings_editButton__LFxDs:hover {
  background: var(--menu-divider-hover);
  box-shadow: 0 0 10px var(--glow-primary);
  transform: scale(1.02);
}

.Settings_buttonGroup__PNEtr {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  position: absolute;
  margin: 0;
  right: 30px;
  z-index: 10;
}

.Settings_saveButton__2Vi\+M {
  background: var(--switch-active);
  margin-top: 0;
}

.Settings_saveButton__2Vi\+M:hover {
  background: var(--menu-link-hover);
}

.Settings_cancelButton__YWTOE {
  background: transparent;
  margin-top: 0;
}

.Settings_cancelButton__YWTOE:hover {
  background: var(--profile-ai-bg);
  color: var(--menu-logout-hover);
}

/* 頭像URL輸入框特殊樣式 */
.Settings_avatarInput__Efxzg {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  font-size: 0.9em;
}

.Settings_profileEditContainer__k7vsu {
  width: 100%;
  height: 100%;
  padding: 30px;
  overflow-y: auto;
  position: relative;
  background: var(--nav-bg);
}

.Settings_portraitSection__OqLrn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto 30px;
}

.Settings_profileFields__NW62M {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  max-width: 600px;
  margin: 30px auto 0;
}

.Settings_fieldGroup__pD8hw {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box; /* 確保padding不影響總寬度 */
}

.Settings_fieldLabel__eR5qp {
  padding-top: 12px;
  color: var(--text-primary);
  font-size: 1.1em;
  font-weight: 500;
  min-width: 70px;
}

.Settings_nicknameInput__FhSR4 {
  flex: 1 1;
  padding: 12px 8px;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid var(--profile-description-border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
  font-size: 1.2em;
  font-weight: 500;
  transition: all 0.3s ease;
  font: inherit;
}

.Settings_nicknameInput__FhSR4:focus {
  outline: none;
  border-bottom-color: var(--switch-active);
  box-shadow: 0 4px 6px -4px var(--glow-accent);
}

.Settings_errorMessage__dxceD {
  color: #e03737;
  font-size: 1em;
}

.Settings_descriptionInput__7gm3u {
  flex: 1 1;
  box-sizing: border-box;
  min-height: 120px;
  padding: 15px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--profile-description-border);
  color: var(--text-primary);
  font-size: 1em;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.3s ease;
  font: inherit;
}

.Settings_descriptionInput__7gm3u:focus {
  outline: none;
  border-color: var(--switch-active);
  box-shadow: 0 0 10px var(--glow-accent);
}

.Settings_aiCompanionField__JgJfy {
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--profile-description-border);
}

.Settings_aiCompanionImage__edCHA {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--profile-ai-border);
  box-shadow: 0 0 8px var(--glow-accent);
}

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

.Settings_aiName__ULjJh {
  font-size: 1em;
  color: var(--text-primary);
  font-weight: 500;
}

.Settings_aiIdInput__cSSvN {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--profile-description-border);
  color: var(--text-primary);
  font-size: 0.9em;
  transition: all 0.3s ease;
}

.Settings_aiIdInput__cSSvN:focus {
  outline: none;
  border-color: var(--switch-active);
  box-shadow: 0 0 8px rgba(0, 100, 255, 0.4);
}

.Settings_cancelButton__YWTOE,
.Settings_saveButton__2Vi\+M {
  padding: a8px 20px;
  border-radius: 8px;
  font-size: 0.95em;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--profile-description-border);
}

.Settings_cancelButton__YWTOE {
  background: transparent;
  color: var(--text-secondary);
}

.Settings_cancelButton__YWTOE:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.Settings_saveButton__2Vi\+M {
  background: var(--switch-active);
  color: white;
}

.Settings_saveButton__2Vi\+M:hover {
  background: var(--menu-link-hover);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.Settings_aiSelectorWrapper__fCLTt {
  flex: 1 1;
  width: calc(100% - 120px); /* 確保與其他輸入欄位寬度一致 */
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .Settings_fieldLabel__eR5qp {
    width: 100%;
    min-width: initial;
    text-align: left;
    padding-top: 0;
    margin-bottom: 8px;
    min-width: 65px;
  }

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

  .Settings_nicknameInput__FhSR4,
  .Settings_descriptionInput__7gm3u,
  .Settings_aiSelectorWrapper__fCLTt {
    width: 100%;
  }
}

.Settings_deleteAccountButton__uScKk {
  /* 刪除這個樣式 */
}

.Settings_deleteAccountButton__uScKk:hover {
  /* 刪除這個樣式 */
}

.Settings_deleteAccountButton__uScKk:disabled {
  /* 刪除這個樣式 */
}

.Settings_deleteAccountButton__uScKk:before {
  /* 刪除這個樣式 */
}

.Settings_deleteAccountButton__uScKk:hover:before {
  /* 刪除這個樣式 */
}

.Settings_deleteErrorMessage__Az8qd {
  color: #ff4d4f;
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

.Settings_navLink__f0CX0 {
  display: block;
  padding: 15px 20px;
  color: var(--nav-link);
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
  font-size: 1.1em;
  border-bottom: 1px solid var(--nav-divider);
}

.Settings_navLink__f0CX0:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--nav-divider-glow);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.Settings_navLink__f0CX0:hover {
  color: var(--nav-link-hover);
  background: var(--nav-link-bg-hover);
}

.Settings_navLink__f0CX0:hover:after {
  opacity: 1;
}

.Settings_deleteAccountText__wVWuj {
  color: #ff4d4f;
  font-weight: 500;
  transition: all 0.3s ease;
}

.Settings_navLink__f0CX0:hover .Settings_deleteAccountText__wVWuj {
  color: #ff7875;
  text-shadow: 0 0 5px rgba(255, 77, 79, 0.3);
}

.Settings_deleteErrorMessage__Az8qd {
  color: #ff4d4f;
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
  padding: 0 20px;
}

.PortraitGenerationField_portrait-generation-container__6\+eaK {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 12px;
  background-color: rgba(29, 36, 71, 0.5);
  background-color: var(--profile-ai-bg, rgba(29, 36, 71, 0.5));
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Preview Frame at the Top */
.PortraitGenerationField_preview-frame__OG2Aw {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid rgba(147, 167, 240, 0.3);
  border: 2px solid var(--border-secondary, rgba(147, 167, 240, 0.3));
  box-shadow: 0 0 20px rgba(0, 255, 170, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(0, 255, 170, 0.1);
  box-shadow: 0 0 20px var(--glow-accent, rgba(0, 255, 170, 0.2)),
    inset 0 0 30px var(--avatar-inset-glow, rgba(0, 0, 0, 0.2)),
    inset 0 0 20px var(--glow-accent, rgba(0, 255, 170, 0.1));
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(14, 19, 41, 0.3);
}

.PortraitGenerationField_preview-image__Uy5yq {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.PortraitGenerationField_empty-preview__sxLxT {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a5b0d6;
  color: var(--text-secondary, #a5b0d6);
  font-size: 1.1em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* Mode Selection Buttons */
.PortraitGenerationField_mode-buttons__x2phC {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  justify-content: center;
}

.PortraitGenerationField_mode-button__\+YX83 {
  padding: 10px 20px;
  min-width: 120px;
  border-radius: 8px;
  background: rgba(14, 19, 41, 0.4);
  color: #a5b0d6;
  color: var(--text-secondary, #a5b0d6);
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.PortraitGenerationField_mode-button__\+YX83:hover {
  background: rgba(29, 36, 71, 0.6);
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.PortraitGenerationField_mode-button__\+YX83.PortraitGenerationField_active__MCvmD {
  background: #5983f0;
  background: var(--switch-active, #5983f0);
  color: white;
  border-color: rgba(89, 131, 240, 0.6);
  border-color: var(--glow-primary, rgba(89, 131, 240, 0.6));
  box-shadow: 0 0 15px rgba(89, 131, 240, 0.4);
}

/* Input Section */
.PortraitGenerationField_input-section__JxtPY {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.PortraitGenerationField_input-label__PBZVq {
  font-size: 1em;
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  margin-left: 5px;
  font-weight: 500;
}

.PortraitGenerationField_input-with-button__1lWFI {
  display: flex;
  gap: 12px;
  width: 100%;
}

.PortraitGenerationField_image-description-input__T1awZ {
  flex: 1 1;
  min-height: 100px;
  padding: 12px 15px;
  background: rgba(14, 19, 41, 0.3);
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  border-radius: 8px;
  resize: vertical;
  font-size: 1em;
  line-height: 1.5;
  transition: all 0.3s ease;
  font-family: "Nunito", sans-serif;
}

.PortraitGenerationField_image-description-input__T1awZ:focus {
  outline: none;
  border-color: #5983f0;
  border-color: var(--switch-active, #5983f0);
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.2);
  box-shadow: 0 0 10px var(--glow-accent, rgba(0, 255, 170, 0.2));
}

.PortraitGenerationField_url-input__DH-N6 {
  flex: 1 1;
  padding: 12px 15px;
  background: rgba(14, 19, 41, 0.3);
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  border-radius: 8px;
  font-size: 0.95em;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.PortraitGenerationField_url-input__DH-N6:focus {
  outline: none;
  border-color: #5983f0;
  border-color: var(--switch-active, #5983f0);
  box-shadow: 0 0 10px rgba(0, 255, 170, 0.2);
  box-shadow: 0 0 10px var(--glow-accent, rgba(0, 255, 170, 0.2));
}

.PortraitGenerationField_action-button__vX66n {
  padding: 12px 20px;
  background: #5983f0;
  background: var(--switch-active, #5983f0);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  font-size: 1em;
  white-space: nowrap;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.PortraitGenerationField_action-button__vX66n:hover:not(:disabled) {
  background: #3a6ae1;
  background: var(--menu-link-hover, #3a6ae1);
  box-shadow: 0 0 15px rgba(89, 131, 240, 0.4);
  transform: translateY(-2px);
}

.PortraitGenerationField_action-button__vX66n:disabled {
  background: #4a5580;
  cursor: not-allowed;
  opacity: 0.7;
}

/* File Upload */
.PortraitGenerationField_or-divider__GzxNt {
  display: flex;
  align-items: center;
  text-align: center;
  color: #8899f0;
  color: var(--profile-ai-label, #8899f0);
  font-size: 0.9em;
  margin: 15px 0;
}

.PortraitGenerationField_or-divider__GzxNt::before,
.PortraitGenerationField_or-divider__GzxNt::after {
  content: "";
  flex: 1 1;
  border-bottom: 1px solid
    rgba(78, 115, 223, 0.3);
  border-bottom: 1px solid
    var(--profile-description-border, rgba(78, 115, 223, 0.3));
}

.PortraitGenerationField_or-divider__GzxNt::before {
  margin-right: 15px;
}

.PortraitGenerationField_or-divider__GzxNt::after {
  margin-left: 15px;
}

.PortraitGenerationField_file-upload-container__8bR7P {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.PortraitGenerationField_file-input__iVC-X {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.PortraitGenerationField_upload-button__rCWUC {
  display: inline-block;
  padding: 12px 20px;
  background: rgba(14, 19, 41, 0.3);
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95em;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
}

.PortraitGenerationField_upload-button__rCWUC:hover {
  background: rgba(29, 36, 71, 0.6);
  box-shadow: 0 0 15px rgba(89, 131, 240, 0.2);
  transform: translateY(-2px);
}

/* Error and Loading Messages */
.PortraitGenerationField_error-message__UT\+LF {
  color: #ff6b6b;
  padding: 12px;
  background-color: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  font-size: 0.95em;
  text-align: center;
  margin-top: 15px;
}

.PortraitGenerationField_loading-indicator__ck-yr {
  text-align: center;
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  font-size: 0.95em;
  padding: 12px;
  background-color: rgba(29, 36, 71, 0.3);
  border-radius: 8px;
  animation: PortraitGenerationField_pulse__UijhN 1.5s infinite;
  margin-top: 15px;
}

@keyframes PortraitGenerationField_pulse__UijhN {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .PortraitGenerationField_portrait-generation-container__6\+eaK {
    padding: 15px;
  }

  .PortraitGenerationField_preview-frame__OG2Aw {
    width: 150px;
    height: 150px;
  }

  .PortraitGenerationField_mode-button__\+YX83 {
    padding: 8px 16px;
    min-width: 100px;
    font-size: 0.9em;
  }

  .PortraitGenerationField_input-with-button__1lWFI {
    flex-direction: column;
    gap: 10px;
  }

  .PortraitGenerationField_action-button__vX66n {
    width: 100%;
    padding: 10px;
  }
}

.LoadingIndicator_container__SjXvG {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #666;
  font-size: 14px;
}

.LoadingIndicator_dots__d73xn {
  display: flex;
  gap: 5px;
}

.LoadingIndicator_dot__K6t6N {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3498db;
  display: inline-block;
  animation: LoadingIndicator_dot-pulse__2k6BH 1.5s infinite ease-in-out;
}

.LoadingIndicator_dot__K6t6N:nth-child(2) {
  animation-delay: 0.2s;
}

.LoadingIndicator_dot__K6t6N:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes LoadingIndicator_dot-pulse__2k6BH {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.LoadingIndicator_text__V9Qrc {
  display: inline-block;
}


.HorizontalCharacterSelector_characterSelector__71eau {
  position: relative;
  width: 100%;
}

.HorizontalCharacterSelector_selectorContainer__gXPHI {
  align-items: center;
  height: auto;
  /* width: 100%; */
  padding: 15px;
  /* background: rgba(14, 19, 41, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  box-sizing: border-box; 確保padding不會影響總寬度 */
}

/* 導航按鈕樣式 - 絕對定位到容器兩側 */
.HorizontalCharacterSelector_navButton__1HXOI {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(29, 36, 71, 0.5);
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  z-index: 10;
  opacity: 0.8;
}

.HorizontalCharacterSelector_prevButton__FjZAB {
  left: 0rem;
}

.HorizontalCharacterSelector_nextButton__iS5TO {
  right: 0rem;
}

.HorizontalCharacterSelector_navButton__1HXOI:hover {
  background: #5983f0;
  background: var(--switch-active, #5983f0);
  border-color: rgba(89, 131, 240, 0.6);
  border-color: var(--glow-primary, rgba(89, 131, 240, 0.6));
  box-shadow: 0 0 15px rgba(0, 255, 170, 0.2);
  box-shadow: 0 0 15px var(--glow-accent, rgba(0, 255, 170, 0.2));
  opacity: 1;
}

.HorizontalCharacterSelector_navButton__1HXOI:active {
  transform: translateY(-50%) scale(0.95);
}

/* 頭像容器樣式 */
.HorizontalCharacterSelector_avatarContainer__HoPT6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  gap: 1rem;
}

.HorizontalCharacterSelector_avatarWrapper__eLGxK {
  position: relative;
  width: 75%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(78, 115, 223, 0.5);
  border: 2px solid var(--profile-ai-border, rgba(78, 115, 223, 0.5));
  box-shadow: 0 0 20px rgba(0, 255, 170, 0.2),
    inset 0 0 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px var(--glow-accent, rgba(0, 255, 170, 0.2)),
    inset 0 0 15px var(--avatar-inset-glow, rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
  will-change: transform; 
  transform: translateZ(0); 
}

.HorizontalCharacterSelector_avatar__3OZbA {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: translateZ(0); /* 強制硬件加速 */
}

/* 指示器樣式 - 獨立於容器 */
.HorizontalCharacterSelector_indicators__81\+x5 {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
  height: 6px; /* 固定高度 */
}

.HorizontalCharacterSelector_indicator__uNcri {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(147, 167, 240, 0.3);
  transition: all 0.3s ease;
}

.HorizontalCharacterSelector_indicator__uNcri.HorizontalCharacterSelector_active__KF-bc {
  background-color: #5983f0;
  background-color: var(--switch-active, #5983f0);
  box-shadow: 0 0 8px rgba(89, 131, 240, 0.5);
  box-shadow: 0 0 8px var(--glow-primary, rgba(89, 131, 240, 0.5));
  transform: scale(1.2);
}

/* 角色信息樣式 */
.HorizontalCharacterSelector_characterInfo__bNve7 {
  flex: 1 1;
  /* height: 100%;
  min-height: 140px; */
  width: 75%;
  padding: 10px 15px;
  border-radius: 10px;
  background: rgba(29, 36, 71, 0.3);
  border: 1px solid rgba(78, 115, 223, 0.3);
  border: 1px solid var(--profile-description-border, rgba(78, 115, 223, 0.3));
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  overflow: hidden; /* 確保內容不會溢出 */
}

.HorizontalCharacterSelector_characterName__\+57pA {
  font-size: 1.1em;
  font-weight: 600;
  color: #e9ecff;
  color: var(--text-primary, #e9ecff);
  margin: 0 0 8px 0;
  text-shadow: 0 0 10px rgba(89, 131, 240, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.HorizontalCharacterSelector_welcomeMessage__gYfh\+ {
  font-size: 0.95em;
  color: #a5b0d6;
  color: var(--text-secondary, #a5b0d6);
  line-height: 1.4;
  flex: 1 1;
  overflow-y: auto;
  padding-right: 5px;
  margin-bottom: 8px;
  max-height: 60px; /* 最大高度 */
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 167, 240, 0.5) transparent;
}

.HorizontalCharacterSelector_welcomeMessage__gYfh\+::-webkit-scrollbar {
  width: 4px;
}

.HorizontalCharacterSelector_welcomeMessage__gYfh\+::-webkit-scrollbar-thumb {
  background-color: rgba(147, 167, 240, 0.5);
  border-radius: 4px;
}

.HorizontalCharacterSelector_welcomeMessage__gYfh\+::-webkit-scrollbar-track {
  background: transparent;
}

.HorizontalCharacterSelector_characterCounter__T3\+GT {
  font-size: 0.75em;
  color: #8899f0;
  color: var(--profile-ai-label, #8899f0);
  text-align: right;
  opacity: 0.8;
}

/* 響應式樣式調整 */
@media (max-width: 768px) {
  .HorizontalCharacterSelector_avatarContainer__HoPT6 {
    margin: 0 0 15px 0;
  }
}

@media (max-width: 480px) {  
  .HorizontalCharacterSelector_navButton__1HXOI {
    width: 45px;
    height: 45px;
  }
  
  .HorizontalCharacterSelector_characterName__\+57pA {
    font-size: 1em;
  }
}
/* 可調整的變數：
 * --line-width: 32px;        控制長橫線的寬度
 * --line-short-width: 20px;  控制短橫線的寬度
 * --line-height: 3px;        控制橫線的高度
 * --line-spacing: 4px;       控制橫線之間的間距
 * --menu-font-size: 1em;     控制 MENU 文字大小
 * --glow-intensity: 8px;     控制發光效果的強度
 */

/* 整體容器 - 固定在右上角 */
.hamburger_gameFnArea__lOb-e {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
}
@media (min-width: 0px) and (max-width: 700px) {
    .hamburger_gameFnArea__lOb-e {
        width: 64px;
        height: 64px;
        padding: 8px;
    }
}

/* 導航切換容器 - 確保內容置中 */
.hamburger_navToggle__gqmcn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* 漢堡選單容器 - 控制三條線的排列 */
.hamburger_hamburger__JgFPw {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px; /* 對應 --line-width */
    height: 32px;
    transition: all 0.3s ease;
}

/* 所有線條的基本樣式 */
.hamburger_hamburger__JgFPw i {
    display: block;
    height: 3px; /* 對應 --line-height */
    background-color: var(--text-primary);
    margin: 4px 0; /* 對應 --line-spacing */
    transition: all 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 0 5px var(--glow-primary);
}

/* 第一條線 - 完整寬度 */
.hamburger_hamburger__JgFPw i:nth-of-type(1) {
    width: 32px; /* 對應 --line-width */
}

/* 第二條線 - 較短且靠右 */
.hamburger_hamburger__JgFPw i:nth-of-type(2) {
    width: 20px; /* 對應 --line-short-width */
    margin-left: auto;
}

/* 第三條線 - 完整寬度 */
.hamburger_hamburger__JgFPw i:nth-of-type(3) {
    width: 32px; /* 對應 --line-width */
}

/* MENU 文字樣式 */
.hamburger_hamburger__JgFPw span {
    position: absolute;
    font-size: 0.75em; /* 對應 --menu-font-size */
    color: #fff;
    display: block;
    font-weight: 500;
    letter-spacing: 0; /* 移除字間距確保寬度正確 */
    opacity: 0;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* 對應 --glow-intensity */
    width: 32px; /* 對應 --line-width，確保與橫線等寬 */
    text-align: center;
}
.hamburger_hamburger__JgFPw .hamburger_avatar__WBpF9 {
    width: 100%;
    height: 100%;
    border: 4px solid rgba(47, 36, 92, 0.6);
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.3s ease;
}
.hamburger_hamburger__JgFPw .hamburger_avatar__WBpF9 .hamburger_img__Y\+gcV {
    background-size: cover;
    background-color: rgba(47, 36, 92);
}
.hamburger_hamburger__JgFPw .hamburger_avatar__WBpF9 .hamburger_img__Y\+gcV:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}
/* 懸停效果 */
.hamburger_gameFnArea__lOb-e:hover .hamburger_hamburger__JgFPw i:nth-of-type(1),
.hamburger_gameFnArea__lOb-e:hover .hamburger_hamburger__JgFPw i:nth-of-type(3) {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.hamburger_gameFnArea__lOb-e:hover .hamburger_hamburger__JgFPw i:nth-of-type(2) {
    opacity: 0;
}

.hamburger_gameFnArea__lOb-e:hover .hamburger_hamburger__JgFPw span {
    opacity: 1;
}

/* 選單開啟狀態 - 叉叉樣式 */
.--show-nav .hamburger_gameFnArea__lOb-e {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 999;
}

.--show-nav .hamburger_hamburger__JgFPw {
    z-index: inherit;
}

.--show-nav .hamburger_hamburger__JgFPw i {
    width: 32px;
    margin: 0;
    position: absolute;
}

.--show-nav .hamburger_hamburger__JgFPw i:nth-of-type(1) {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1.5px;
}

.--show-nav .hamburger_hamburger__JgFPw i:nth-of-type(2) {
    opacity: 0;
    visibility: hidden;
}

.--show-nav .hamburger_hamburger__JgFPw i:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 50%;
    margin-top: -1.5px;
}

/* 叉叉的懸停效果 */
.--show-nav .hamburger_gameFnArea__lOb-e:hover .hamburger_hamburger__JgFPw i {
    box-shadow: 0 0 10px rgba(229, 209, 255, 0.8);
}

/* 隱藏選單開啟時的 MENU 文字 */
.--show-nav .hamburger_hamburger__JgFPw span {
    opacity: 0;
    transform: translateX(100%) scale(0);
    /* visibility: hidden; */
}

.--show-nav .hamburger_hamburger__JgFPw span {
    opacity: 0;
    transform: translateX(100%) scale(0);
    /* visibility: hidden; */
}
.--show-nav .hamburger_hamburger__JgFPw .hamburger_avatar__WBpF9 {
    transform: scale(0);
}

.--story-mode .hamburger_gameFnArea__lOb-e {
    display: none;
}

/* 根容器樣式 */
.BackGround_root__ZONbw {
    position: relative;
    height: 100svh;
    width: 100vw;
    isolation: isolate;
    z-index: 0;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
}

.BackGround_gameBgArea__4oqOu {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.BackGround_gameBgArea__4oqOu:before {
    content: "";
    display: block;
    /* background-color: var(--color-bg-main); */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    /* background: linear-gradient(135deg, #262836 0%, #435084 50%, #879ffd 100%); */

    /* background-size: 600% 600%;
    animation: gradientAnimation 15s ease infinite; */
}
@keyframes BackGround_gradientAnimation__8P0PH {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.BackGround_gameBgArea__4oqOu.BackGround_pure__c\+8oS:before {
    background-color: var(--color-bg-main) !important;
    background: var(--bg-gradient);
}
.BackGround_gameBgArea__4oqOu.BackGround_pure__c\+8oS:after {
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(136, 160, 255, 0.3);
    filter: blur(30px);
    width: 80%;
    height: 80px;
    border-radius: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}
.BackGround_layerFade__1J3wR {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background: var(--bg-fade); */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.2) 75%, rgba(32, 24, 37, 0.8) 90%);
    z-index: 0;
    pointer-events: none;
    transition: filter 0.35s ease-out;
}
.BackGround_gameBgArea__4oqOu.BackGround_pure__c\+8oS .BackGround_layerFade__1J3wR {
    position: absolute;
    background: initial;
    filter: initial;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 4;
    transform: none;
    transform: initial;
    background: url(/static/media/bg-grid.950fc490fa5b99ba5042.svg) no-repeat center bottom;
    background-size: 100% auto;
    mix-blend-mode: lighten;
    opacity: 0.3;
}
.BackGround_bg__eR6Xt {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

.BackGround_bg__eR6Xt.BackGround_forStage__izv\+D {
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: repeat-x;
}
.BackGround_bg__eR6Xt.BackGround_--animate__ZOvgl {
    animation: BackGround_scale-intro__J6epW 20s linear;
}
@keyframes BackGround_scale-intro__J6epW {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.BackGround_fadeIn__MOHpM {
    animation: BackGround_fadeIn__MOHpM 0.4s ease-out forwards;
}

@keyframes BackGround_fadeIn__MOHpM {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.--story-mode .BackGround_layerFade__1J3wR {
    background: rgb(37, 47, 72);
    background: radial-gradient(
        circle,
        rgba(37, 47, 72, 0.6022058481595763) 0%,
        rgba(37, 47, 72, 0.9271358201483718) 53%,
        rgba(37, 47, 72, 0.9747548677674195) 94%
    );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 主容器 */
.StorageManagementPage_container__oB8s\+ {
  background-color: #f5f5f5;
  padding: 24px;
  height: 100%;
  overflow-y: auto;
}

.StorageManagementPage_wrapper__hqPV1 {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 24px;
}

/* 頁面標題區 */
.StorageManagementPage_header__JgF6t {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.StorageManagementPage_headerIcon__MeTVj {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  color: #4f46e5;
}

.StorageManagementPage_headerTitle__Mmza0 {
  font-size: 28px;
  font-weight: bold;
  color: #111827;
}

/* 資料類型選擇區 */
.StorageManagementPage_typeSelector__D2XaJ {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.StorageManagementPage_typeSelectorTitle__6FZpR {
  font-size: 18px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 16px;
}

.StorageManagementPage_typeSelectorGrid__fjVUS {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  gap: 16px;
}

@media (min-width: 640px) {
  .StorageManagementPage_typeSelectorGrid__fjVUS {
    grid-template-columns: 1fr 1fr;
  }
}

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

.StorageManagementPage_typeSelectorLabel__KiQ9E {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 4px;
}

.StorageManagementPage_typeSelectorSelect__dh1UL,
.StorageManagementPage_typeSelectorInput__Gahmp {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.StorageManagementPage_typeSelectorSelect__dh1UL:focus,
.StorageManagementPage_typeSelectorInput__Gahmp:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/* Tab 區域 */
.StorageManagementPage_tabs__QQWVf {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.StorageManagementPage_tabsList__sWfMU {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.StorageManagementPage_tab__jKqZ8 {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  background: none;
}

.StorageManagementPage_tabActive__V0Cnc {
  background-color: #4f46e5;
  color: white;
}

.StorageManagementPage_tab__jKqZ8:not(.StorageManagementPage_tabActive__V0Cnc) {
  color: #6b7280;
}

.StorageManagementPage_tab__jKqZ8:hover:not(.StorageManagementPage_tabActive__V0Cnc) {
  background-color: #f3f4f6;
  color: #374151;
}

.StorageManagementPage_tabIcon__hisXy {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.StorageManagementPage_tabContent__dvx27 {
  padding: 16px;
  overflow: visible;
}

/* 刪除操作的 Tab */
.StorageManagementPage_tabDelete__YlFjM {
  color: #ef4444;
}

.StorageManagementPage_tabDelete__YlFjM.StorageManagementPage_tabActive__V0Cnc {
  background-color: #ef4444;
  color: white;
}

/* 搜尋結果區域 */
.StorageManagementPage_searchResult__B4EmG {
  margin-top: 16px;
}

.StorageManagementPage_searchResultItem__SGC3E {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.StorageManagementPage_searchResultHeader__AAZwx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.StorageManagementPage_searchResultHeader__AAZwx:hover {
  background-color: #f9fafb;
}

.StorageManagementPage_searchResultTitle__2B4f7 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #374151;
}

.StorageManagementPage_searchResultTitleFlex__2UtOo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.StorageManagementPage_searchResultTitleLeft__0BySp {
  display: flex;
  align-items: center;
}

.StorageManagementPage_searchResultTimestamp__0Uas2 {
  font-size: 0.9em;
  color: #666;
  margin-right: 16px;
}

.StorageManagementPage_searchResultExpandIcon__F5NMS {
  color: #6b7280;
  font-size: 12px;
  width: 16px;
}

.StorageManagementPage_searchResultContent__CUzyJ {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: monospace;
  font-size: 14px;
  color: #2c3e50;
  line-height: 1.5;
  border: 1px solid #e0e0e0;
}

.StorageManagementPage_searchResultActions__TmR-W {
  display: flex;
  gap: 8px;
}

/* 按鈕樣式 */
.StorageManagementPage_btn__1Kx9x {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.StorageManagementPage_btnEdit__nn8Bi {
  background-color: #4f46e5;
  color: white;
}

.StorageManagementPage_btnEdit__nn8Bi:hover {
  background-color: #4338ca;
}

.StorageManagementPage_btnDelete__CHi-0 {
  background-color: #ef4444;
  color: white;
}

.StorageManagementPage_btnDelete__CHi-0:hover {
  background-color: #dc2626;
}

.StorageManagementPage_btnCopy__lvZeg {
  background-color: #4caf50;
  margin-right: 8px;
}

.StorageManagementPage_btnCopy__lvZeg:hover {
  background-color: #45a049;
}

/* 編輯彈窗 */
.StorageManagementPage_editModal__0eQuq {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.StorageManagementPage_editModalContent__Cllpb {
  background: white;
  border-radius: 8px;
  padding: 24px;
  width: 90%;
  max-width: 800px;
  height: 90vh;
  display: flex;
  flex-direction: column;
}

.StorageManagementPage_editModalHeader__j0eBP {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

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

.StorageManagementPage_editModalTitle__AR9WS {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.StorageManagementPage_tabContainer__eBIJR {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e0e0e0;
  width: 100%;
}

.StorageManagementPage_tabButton__Y\+37D {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  color: #666;
  min-width: 140px;
}

.StorageManagementPage_tabButton__Y\+37D:hover {
  color: #1a73e8;
  background-color: #f8f9fa;
}

.StorageManagementPage_activeTab__37Gob {
  color: #1a73e8;
  font-weight: 600;
}

.StorageManagementPage_activeTab__37Gob::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1a73e8;
}

/* 修改編輯器容器的樣式 */
.StorageManagementPage_editModalEditor__fIupb {
  flex: 1 1;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  min-height: 0; /* 重要：讓 flex 子元素可以正確縮放 */
}

.StorageManagementPage_editModalActions__OxLHW {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.StorageManagementPage_editModalBtnCancel__A1XWc {
  background-color: #9ca3af;
  color: white;
}

.StorageManagementPage_editModalBtnCancel__A1XWc:hover {
  background-color: #6b7280;
}

.StorageManagementPage_editModalBtnSave__Z9hMj {
  background-color: #4f46e5;
  color: white;
}

.StorageManagementPage_editModalBtnSave__Z9hMj:hover {
  background-color: #4338ca;
}

/* 搜尋面板區域 */
.StorageManagementPage_storagePanel__ZK81d {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.StorageManagementPage_storagePanelContent__GSFMi {
  flex: 1 1;
  overflow-y: auto;
  padding-bottom: 80px; /* 為底部按鈕預留空間 */
}

.StorageManagementPage_storagePanelSection__Kdv9L {
  margin-bottom: 2rem;
}

.StorageManagementPage_storagePanelHeader__Heyyx {
  margin-bottom: 1.5rem;
}

.StorageManagementPage_storagePanelTitle__YeW8s {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.StorageManagementPage_storagePanelDescription__NyvLl {
  color: #666;
}

.StorageManagementPage_createPanelWrapper__7JZea {
  position: relative;
  padding-bottom: 60px; /* 為底部按鈕預留空間 */
}

/* 浮動按鈕容器 */
.StorageManagementPage_floatingButtonsContainer__alBiY {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 搜尋表單 */
.StorageManagementPage_storageForm__d8c-z {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
}

.StorageManagementPage_storageFormField__-Ds9d {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.StorageManagementPage_storageFormInput__0-cor {
  width: 300px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .StorageManagementPage_storageFormField__-Ds9d {
    flex-direction: column;
  }

  .StorageManagementPage_storageFormInput__0-cor {
    width: 100%;
  }
}

.StorageManagementPage_storageFormButton__5CPJU {
  background-color: #4f46e5;
  color: white;
}

.StorageManagementPage_storageFormButton__5CPJU:hover {
  background-color: #4338ca;
}

.StorageManagementPage_storageFormButtonDanger__NFWKr {
  background-color: #ef4444;
}

.StorageManagementPage_storageFormButtonDanger__NFWKr:hover {
  background-color: #dc2626;
}

.StorageManagementPage_storageFormButtonDangerAll__3RXep {
  margin-top: 16px;
  width: 300px;
}

@media (max-width: 640px) {
  .StorageManagementPage_storageFormButtonDangerAll__3RXep {
    width: 100%;
  }
}

/* 新增面板 */
.StorageManagementPage_createPanel__rus9J {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.StorageManagementPage_createPanelEditor__46ANB {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.StorageManagementPage_createPanelActions__2dRxV {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.StorageManagementPage_createPanelBtnSave__vocrl {
  background-color: #4f46e5;
  color: white;
}

.StorageManagementPage_createPanelBtnSave__vocrl:hover {
  background-color: #4338ca;
}

/* 搜尋過濾器 */
.StorageManagementPage_searchResultFilter__LGDBe {
  margin-bottom: 16px;
  max-width: 300px;
}

.StorageManagementPage_searchResultFilterInput__5A7nO {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  background-color: white;
  transition: all 0.2s;
}

.StorageManagementPage_searchResultFilterInput__5A7nO:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.StorageManagementPage_searchResultFilterInput__5A7nO::placeholder {
  color: #9ca3af;
}

/* 確保編輯區域有正確的高度和滾動行為 */
.StorageManagementPage_editPanel__k8OtW {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.StorageManagementPage_editArea__qNPDq {
  flex: 1 1;
  overflow: hidden;
  position: relative;
}

.Editors_editorForm__IprhK {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  overflow-y: auto;
  padding: 1rem;
  padding-bottom: 2rem;
  position: relative;
  padding-bottom: 60px;
}

.Editors_formGroup__dvfFa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
}

.Editors_formGroup__dvfFa:last-child {
  margin-bottom: 2rem;
}

.Editors_formGroup__dvfFa label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
}

.Editors_formGroup__dvfFa input[type="text"],
.Editors_formGroup__dvfFa input[type="number"],
.Editors_formGroup__dvfFa textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  color: #1f2937;
}

.Editors_formGroup__dvfFa input[type="text"]:focus,
.Editors_formGroup__dvfFa input[type="number"]:focus,
.Editors_formGroup__dvfFa textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.Editors_formGroup__dvfFa input::placeholder,
.Editors_formGroup__dvfFa textarea::placeholder {
  color: #9ca3af;
}

.Editors_checkboxGroup__UBmY8 {
  display: flex;
  gap: 20px;
}

.Editors_checkboxGroup__UBmY8 label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

.Editors_questionTypeGroup__FK0iM {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.Editors_questionTypeOption__vETOD {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}

.Editors_imagePreview__-\+mXj {
  margin-top: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  background: #f9f9f9;
}

.Editors_imagePreview__-\+mXj img {
  max-width: 100%;
  height: auto;
}

.Editors_contentHeader__X08fa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* Level Editor 專用樣式 */
.Editors_downloadSection__dq\+8\+ {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.Editors_downloadButton__eNhGO:hover {
  background-color: #047857 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.Editors_tabContainer__K3ZcN {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Editors_tabButtons__v7HUn {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.Editors_tabButton__3e-6H {
  padding: 0.75rem 1.5rem;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.Editors_tabButton__3e-6H:hover {
  color: #374151;
  background-color: #f9fafb;
}

.Editors_tabButton__3e-6H.Editors_active__bUIu3 {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.Editors_tabContent__oP24m {
  min-height: 400px;
}

/* QuestionList 在編輯器中的樣式修正 */
.Editors_questionListContainer__NQuTf {
  /* 確保容器內的文字有足夠對比度 */
}

.Editors_questionListContainer__NQuTf * {
  color: #1f2937 !important;
}

.Editors_questionListContainer__NQuTf h3,
.Editors_questionListContainer__NQuTf h4,
.Editors_questionListContainer__NQuTf label {
  color: #111827 !important;
  font-weight: 600 !important;
}

.Editors_questionListContainer__NQuTf input,
.Editors_questionListContainer__NQuTf textarea,
.Editors_questionListContainer__NQuTf select {
  color: #1f2937 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
}

.Editors_questionListContainer__NQuTf input::placeholder,
.Editors_questionListContainer__NQuTf textarea::placeholder {
  color: #6b7280 !important;
}

.Editors_questionListContainer__NQuTf button {
  color: #ffffff !important;
}

/* 確保題目編號和標題清晰可見 */
.Editors_questionListContainer__NQuTf [style*="color"] {
  color: #1f2937 !important;
}

.Editors_addContentBtn__J3Rxk {
  padding: 6px 12px;
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.Editors_addContentBtn__J3Rxk:hover {
  background-color: #4338ca;
}

.Editors_contentList__xDtMY {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.Editors_contentItem__bIA5y input {
  flex: 1 1;
}

.Editors_removeContentBtn__MnLsu {
  padding: 6px 12px;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.Editors_removeContentBtn__MnLsu:hover {
  background-color: #dc2626;
}

.Editors_storyPointContainer__ghUHu {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  background-color: #f9f9f9;
}

.Editors_storyPointContainer__ghUHu h4 {
  margin: 0 0 15px 0;
  color: #333;
}

.Editors_addButton__I2A9K {
  background-color: #4caf50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 15px;
}

.Editors_removeButton__QcFqH {
  padding: 6px 12px;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
  margin-top: 0;
}

.Editors_addButton__I2A9K:hover {
  background-color: #45a049;
}

.Editors_removeButton__QcFqH:hover {
  background-color: #dc2626;
}

.Editors_sceneHeader__UlYlH {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background-color 0.2s;
}

.Editors_sceneHeader__UlYlH:hover {
  background-color: #e9ecef;
}

.Editors_sceneTitle__wCss5 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1;
}

.Editors_sceneTitle__wCss5 h4 {
  margin: 0;
  font-size: 1rem;
  color: #111827;
  font-weight: 600;
}

.Editors_expandIcon__9SITN {
  font-size: 0.8em;
  color: #666;
  width: 20px;
  display: inline-block;
}

.Editors_scenePreview__V\+baM {
  color: #4b5563;
  font-size: 0.9em;
  margin-left: 8px;
}

.Editors_scenePreviewEmpty__2sXUs {
  color: #dc2626;
  font-style: italic;
}

.Editors_sceneActions__GP0dC {
  display: flex;
  gap: 8px;
}

.Editors_sceneContent__WqlYI {
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  margin-top: -4px;
  margin-bottom: 16px;
  background-color: #fff;
}

.Editors_storyPointContainer__ghUHu {
  margin-bottom: 16px;
}

.Editors_sceneDuration__ECXOq {
  color: #4b5563;
  font-size: 0.9em;
  margin-left: auto;
  padding-right: 16px;
  white-space: nowrap;
}

.Editors_mediaGroup__saX0z,
.Editors_dialogGroup__MMcDg {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.Editors_mediaGroup__saX0z .Editors_formGroup__dvfFa,
.Editors_dialogGroup__MMcDg .Editors_formGroup__dvfFa {
  margin-bottom: 16px;
}

.Editors_darkLabel__f-YER {
  color: #333;
  font-weight: 500;
  margin-bottom: 8px;
}

.Editors_darkInput__OXf-9 {
  color: #333;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
}

.Editors_darkInput__OXf-9::placeholder {
  color: #666;
}

.Editors_darkText__ItPud {
  color: #333;
  margin: 8px 0;
}

.Editors_darkPreview__a\+uuS {
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.Editors_attachmentPreview__PMZaP {
  margin-top: 8px;
}

.Editors_tabContainer__K3ZcN {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 600px;
}

.Editors_tabList__oms3K {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.Editors_tabButton__3e-6H {
  padding: 10px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.Editors_tabButton__3e-6H:hover {
  color: #333;
}

.Editors_tabButton__3e-6H.Editors_active__bUIu3 {
  color: #1890ff;
  border-bottom-color: #1890ff;
}

.Editors_tabContent__oP24m {
  flex: 1 1;
  padding: 20px;
}

.Editors_tabPanel__R2w76 {
  height: 100%;
}

.Editors_fullHeightTextarea__luebv {
  min-height: 300px;
  width: 100%;
  font-family: monospace;
  padding: 10px;
  line-height: 1.5;
  resize: vertical;
}

/* 編輯器按鈕樣式 */
.Editors_editorBtn__ywGlN {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.Editors_editorBtnPrimary__NFNvg {
  background-color: #4f46e5;
  color: white;
}

.Editors_editorBtnPrimary__NFNvg:hover {
  background-color: #4338ca;
}

.Editors_editorBtnPrimary__NFNvg:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.Editors_editorBtnContainer__-tQRH {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.Editors_learningDomainGroup__ruGi\+ {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.Editors_learningDomainGroup__ruGi\+ select {
  min-width: 150px;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  color: #1f2937;
}

.Editors_learningDomainGroup__ruGi\+ select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.Editors_customDomainInput__j8bVP {
  flex: 1 1;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: #fff;
  color: #1f2937;
}

.Editors_customDomainInput__j8bVP:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 聊天容器相關樣式 */
.Editors_chatContainer__ai8L9 {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 600px);
  min-height: 400px;
  gap: 1rem;
  background-color: #f9fafb;
  border-radius: 8px;
  padding: 1rem;
}

.Editors_chatHistory__Bcviw {
  flex: 1 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.Editors_chatMessage__2-3jB {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  max-width: 80%;
  word-wrap: break-word;
}

.Editors_userMessage__-2ebz {
  align-self: flex-end;
  background-color: #3b82f6;
  color: white;
}

.Editors_assistantMessage__NQQAi {
  align-self: flex-start;
  background-color: #e5e7eb;
  color: #1f2937;
}

.Editors_chatControls__p31N3 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.Editors_chatInput__4IW\+2 {
  display: flex;
  gap: 0.5rem;
}

.Editors_chatInput__4IW\+2 input {
  flex: 1 1;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.Editors_chatInput__4IW\+2 button {
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.Editors_chatInput__4IW\+2 button:hover {
  background-color: #2563eb;
}

.Editors_chatButtons__\+Kpd0 {
  display: flex;
  gap: 0.5rem;
}

.Editors_chatButtons__\+Kpd0 button {
  flex: 1 1;
  padding: 0.75rem;
  background-color: #4b5563;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.Editors_chatButtons__\+Kpd0 button:hover {
  background-color: #374151;
}

.Editors_ttsButtonContainer__5C1UN {
  margin-top: 1rem;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  display: inline-block;
}

.Editors_hint__CB2i4 {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: #666;
}

.Editors_voiceGenerateContainer__S6VJo {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.Editors_voiceGenerateContainer__S6VJo select {
  flex: 1 1;
}

.Editors_editorBtnSecondary__UOF6z {
  padding: 0.5rem 1rem;
  background-color: #4a5568;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s;
  white-space: nowrap;
}

.Editors_editorBtnSecondary__UOF6z:hover {
  background-color: #2d3748;
}

.Editors_editorBtnSecondary__UOF6z:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.Editors_exampleContainer__Gcpyi {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
}

.Editors_exampleContainer__Gcpyi strong {
  color: #374151;
  display: block;
  margin-bottom: 0.5rem;
}

.Editors_exampleText__Pd6s0 {
  background-color: #ffffff;
  padding: 0.75rem;
  border-radius: 4px;
  border-left: 3px solid #3b82f6;
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #4b5563;
  font-family: "Courier New", monospace;
  white-space: pre-wrap;
}

.Editors_exampleText__Pd6s0:last-child {
  margin-bottom: 0;
}

.Editors_fillDefaultButton__7FRyY {
  background-color: #10b981;
  color: white;
  margin-top: 0.5rem;
  font-size: 12px;
  padding: 6px 12px;
}

.Editors_fillDefaultButton__7FRyY:hover {
  background-color: #059669;
}

.Editors_fillDefaultButton__7FRyY:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* EnhancedMessage 組件的通用模組化樣式 */

.EnhancedMessage_markdownWrapper__Kss2v {
  color: inherit;
  line-height: 1.375;
  font-family: inherit;
}

.EnhancedMessage_markdownWrapper__Kss2v p,
.EnhancedMessage_markdownWrapper__Kss2v li {
  font-size: 1.0625em;
  letter-spacing: 0;
}

@media (min-width: 980px) {
  .EnhancedMessage_markdownWrapper__Kss2v p,
  .EnhancedMessage_markdownWrapper__Kss2v li {
    font-size: clamp(17px, 2.2vh, 22px);
    letter-spacing: 0.01em;
  }
}

@media (min-width: 1700px) {
  .EnhancedMessage_markdownWrapper__Kss2v p,
  .EnhancedMessage_markdownWrapper__Kss2v li {
    font-size: clamp(18px, 2.1vh, 22px);
    letter-spacing: 0.01em;
  }
}

.EnhancedMessage_markdownWrapper__Kss2v h1,
.EnhancedMessage_markdownWrapper__Kss2v h2,
.EnhancedMessage_markdownWrapper__Kss2v h3,
.EnhancedMessage_markdownWrapper__Kss2v h4,
.EnhancedMessage_markdownWrapper__Kss2v h5,
.EnhancedMessage_markdownWrapper__Kss2v h6 {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.EnhancedMessage_markdownWrapper__Kss2v strong {
  font-weight: bold;
}

.EnhancedMessage_markdownWrapper__Kss2v code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 0.875em;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: Monaco, Consolas, "Courier New", monospace;
}

.EnhancedMessage_markdownWrapper__Kss2v pre {
  padding: 1em;
  overflow: auto;
  line-height: 1.45;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  width: 100%;
}

.EnhancedMessage_markdownWrapper__Kss2v pre code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  background: transparent;
  border: 0;
}

.EnhancedMessage_speech__OlY9L {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.EnhancedMessage_speech__OlY9L strong {
  font-weight: bold;
  font-size: inherit;
}

@media (min-width: 980px) {
  .EnhancedMessage_speech__OlY9L strong {
    font-size: clamp(17px, 2.2vh, 22px);
  }
}

.EnhancedMessage_marker__Yl1If {
  font-weight: bold;
  position: relative;
  cursor: pointer;
  border-radius: 0.8em 0.3em;
  background: transparent;
  padding-left: 0.5em;
  padding-right: 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(
    to right,
    rgba(0, 255, 162, 0.1),
    rgba(0, 255, 162, 0.7) 4%,
    rgba(0, 255, 153, 0.3)
  );
  transition: all 0.25s ease;
}

.EnhancedMessage_marker__Yl1If:hover {
  background-image: linear-gradient(
    to right,
    rgba(0, 255, 162, 0.3),
    rgba(0, 255, 162, 0.9) 4%,
    rgba(0, 255, 153, 0.5)
  );
}

/* 圖片相關樣式 */
.EnhancedMessage_markdownWrapper__Kss2v .EnhancedMessage_imgWrapper__SpZKu {
  display: inline-block;
  border-radius: 12px;
  width: auto;
  border: 1px solid rgba(176, 255, 195, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
  padding: 6px;
  margin: 10px 0 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
  animation: EnhancedMessage_imgScale__gbFwQ 1.5s linear infinite;
}

@media (min-width: 980px) {
  .EnhancedMessage_markdownWrapper__Kss2v .EnhancedMessage_imgWrapper__SpZKu {
    margin: 14px 0 0 0;
  }
}

.EnhancedMessage_markdownWrapper__Kss2v .EnhancedMessage_imgWrapper__SpZKu img {
  display: block;
  width: auto;
  height: 80px;
}

.EnhancedMessage_markdownWrapper__Kss2v .EnhancedMessage_inlineImg__7whwI {
  display: inline-block;
  border-radius: 6px;
  height: 1.75em;
  width: auto;
  margin: 0 5px;
  border: 1px solid rgba(176, 255, 195, 0.5);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  vertical-align: middle;
}

.EnhancedMessage_markdownWrapper__Kss2v .EnhancedMessage_inlineImg__7whwI + p {
  margin-top: 8px;
}

@keyframes EnhancedMessage_imgScale__gbFwQ {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.125);
  }
  100% {
    transform: scale(1);
  }
}

/* 音頻播放器樣式 */
.EnhancedMessage_speech__OlY9L .audio-player {
  margin-left: 8px;
}

/* 隱藏模式樣式 */
.EnhancedMessage_speech__OlY9L.EnhancedMessage_hiddenMode__bQvLX {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.EnhancedMessage_speech__OlY9L.EnhancedMessage_hiddenMode__bQvLX strong {
  display: none;
}

.ImageGenerateField_chatItem__M\+VMx {
    flex: 1 1;
    align-items: center;
    display: flex;
    margin-bottom: 1vh;
}

/* 故事模式的主容器樣式 */
.ImageGenerateField_storyMode__rdfme {
    width: 100%; /* 佔滿容器寬度 */
    display: flex; /* 使用 flex 布局 */
    flex-direction: row; /* 水平排列 */
    position: relative; /* 為內部絕對定位元素提供參考點 */
    align-items: center; /* 垂直置中對齊 */
    gap: 5px; /* 子元素之間的間距 */
}

/* 故事模式的分隔發光線條 */
.ImageGenerateField_storyMode__rdfme:after {
    content: ""; /* 偽元素必需的內容 */
    display: block; /* 區塊顯示 */
    width: 100%; /* 寬度佔滿 */
    height: 4px; /* 線條高度 */
    position: absolute; /* 絕對定位 */
    bottom: -4px; /* 位於容器底部下方 */
    left: 0%; /* 左對齊 */
    background: linear-gradient(
        /* 漸層背景 */ 90deg,
        rgba(255, 166, 0, 0) 0%,
        /* 兩端透明 */ rgba(255, 166, 0, 0.3) 20%,
        rgba(255, 166, 0, 1) 50%,
        /* 中間最亮 */ rgba(255, 166, 0, 0.3) 80%,
        rgba(255, 166, 0, 0) 100%
    );
    z-index: 1; /* 確保層級正確 */
    box-shadow: 0 -2px 4px rgba(255, 166, 0, 0.3), /* 多層發光效果 */ 0 2px 4px rgba(255, 166, 0, 0.3), 0 0 20px rgba(255, 166, 0, 0.8),
        0 0 40px rgba(255, 166, 0, 0.6), 0 0 60px rgba(255, 166, 0, 0.4);
    animation: ImageGenerateField_glowLine__gObTX 2s ease-in-out infinite; /* 呼吸發光動畫 */
}

/* 頭像容器樣式 */
.ImageGenerateField_storyMode__rdfme .ImageGenerateField_avatar__i3K-S {
    width: 250px;
    flex-shrink: 0;
    position: relative;
    margin: 0;
    z-index: 2;
}

/* 共用的基本樣式 */
.ImageGenerateField_storyMode__rdfme .ImageGenerateField_avatarImage__dWvs0 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 背景圖片版本的樣式 */
.ImageGenerateField_storyMode__rdfme div.ImageGenerateField_avatarImage__dWvs0 {
    background-size: cover;
    background-position: center;
}

/* 影片版本的樣式 */
.ImageGenerateField_storyMode__rdfme video.ImageGenerateField_avatarImage__dWvs0 {
    width: 250px;
    height: 250px;
}

/* 角色名稱樣式 */
.ImageGenerateField_storyMode__rdfme .ImageGenerateField_avatarName__HOsWf {
    position: absolute; /* 絕對定位 */
    left: 50%; /* 水平置中 */
    transform: translateX(-50%); /* 水平置中微調 */
    bottom: -35px; /* 位於頭像下方 */
    width: auto; /* 自適應寬度 */
    min-width: 250px; /* 最小寬度與頭像同寬 */
    text-align: center; /* 文字置中 */
    background: linear-gradient(/* 文字漸層效果 */ 90deg, rgb(239, 234, 219) 0%, rgb(244, 206, 136) 50%, rgb(183, 145, 39) 100%);
    -webkit-background-clip: text; /* 文字填充漸層 */
    background-clip: text;
    color: transparent; /* 使文字透明以顯示背景 */
    padding: 8px; /* 內部間距 */
    font-size: 20px; /* 字體大小 */
    font-weight: bold; /* 粗體 */
    z-index: 3; /* 確保在最上層 */
}

/* 內容區域樣式 */
.ImageGenerateField_storyMode__rdfme .ImageGenerateField_content__oDYzz {
    flex: 1 1; /* 佔滿剩餘空間 */
    padding: 0 25px; /* 水平內間距 */
    font-size: 18px; /* 字體大小 */
    line-height: 1.5; /* 行高 */
    color: #ffffff; /* 文字顏色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 文字陰影 */
    z-index: 2; /* 層級 */
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
    min-height: 250px; /* 最小高度與頭像高 */
}

/* 發光線條動畫 */
@keyframes ImageGenerateField_glowLine__gObTX {
    0%,
    100% {
        /* 動畫起始和結束狀態 */
        opacity: 0.8;
        box-shadow: 0 -2px 4px rgba(255, 166, 0, 0.3), 0 2px 4px rgba(255, 166, 0, 0.3), 0 0 20px rgba(255, 166, 0, 0.8),
            0 0 40px rgba(255, 166, 0, 0.6), 0 0 60px rgba(255, 166, 0, 0.4);
    }
    50% {
        /* 動畫中間狀態 */
        opacity: 1;
        box-shadow: 0 -3px 6px rgba(255, 166, 0, 0.4), 0 3px 6px rgba(255, 166, 0, 0.4), 0 0 30px rgba(255, 166, 0, 1),
            0 0 60px rgba(255, 166, 0, 0.8), 0 0 90px rgba(255, 166, 0, 0.6);
    }
}

/* 手機版響應式調整 */
@media (max-width: 739px) {
    .ImageGenerateField_storyMode__rdfme {
        flex-direction: column;
        padding: 15px;
        gap: 1px;
        align-items: flex-start;
        margin-top: 60px;
    }

    .ImageGenerateField_storyMode__rdfme:after {
        top: 140px;
    }

    .ImageGenerateField_storyMode__rdfme .ImageGenerateField_avatar__i3K-S {
        width: 200px;
        margin: auto; /* 水平置中, 高度往下移 */
    }

    .ImageGenerateField_storyMode__rdfme .ImageGenerateField_avatarName__HOsWf {
        min-width: 200px;
        top: 100px;
    }

    .ImageGenerateField_storyMode__rdfme .ImageGenerateField_content__oDYzz {
        width: 100%;
        font-size: 16px;
        min-height: auto;
        margin: 0 auto; /* 置中 */
    }
}

.ImageGenerateField_chatItemContainer__YvKxs {
    width: 100%;
    display: flex;
    position: relative;
    align-items: flex-start;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ImageGenerateField_avatar__i3K-S {
    position: relative;
    width: 150px;
    flex-shrink: 0;
    margin: 0;
}

.ImageGenerateField_avatarImage__dWvs0 {
    position: relative;
    width: 100%;
    padding-bottom: 112.5%;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
}

.ImageGenerateField_avatarName__HOsWf {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    font-size: clamp(14px, 1.75vh, 32px);
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 80%);
    padding: 3px 10px 5px;
    border-radius: 3px;
    letter-spacing: 1px;
    white-space: nowrap;
    z-index: 3;
    display: none;
}

.ImageGenerateField_content__oDYzz {
    flex: 1 1;
    padding: 25px 10px 0;
    position: relative;
}

/* 手機版立時的樣式 */
@media (max-width: 739px) {
    .ImageGenerateField_chatItemContainer__YvKxs {
        flex-direction: column;
        padding-top: 100px;
    }

    .ImageGenerateField_avatar__i3K-S {
        width: 180px;
        position: absolute;
        top: -100px;
        left: 20px;
        z-index: 2;
    }

    .ImageGenerateField_content__oDYzz {
        width: 100%;
        padding: 10px 15px 0;
    }
}

/* 平板以上的樣式 */
@media (min-width: 740px) {
    .ImageGenerateField_avatar__i3K-S {
        width: 200px;
        margin: 0 2.2% 0 0;
    }

    .ImageGenerateField_avatarName__HOsWf {
        display: block;
    }

    .ImageGenerateField_content__oDYzz {
        padding: 25px 10px 0;
        min-height: 100%;
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 980px) {
    .ImageGenerateField_avatar__i3K-S {
        width: clamp(200px, 22vh, 360px);
    }

    .ImageGenerateField_content__oDYzz {
        padding: 28px 15px 0;
    }
}

@media (min-width: 1380px) {
    .ImageGenerateField_avatar__i3K-S {
        width: 27vh;
    }

    .ImageGenerateField_content__oDYzz {
        padding: 30px 20px 0;
    }
}

@media (min-width: 1700px) {
    .ImageGenerateField_content__oDYzz {
        padding: 32px 25px 0;
    }
}

/* 主容器 */
.LearningJourney_container__IqIhW {
  background-color: #f5f5f5;
  padding: 24px;
  height: 100%;
  overflow-y: auto;
}

.LearningJourney_wrapper__SB0Wf {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 24px;
}

/* 頁面標題區 */
.LearningJourney_header__OQady {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.LearningJourney_headerIcon__eMRC1 {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  color: #4f46e5;
}

.LearningJourney_headerTitle__hDHrc {
  font-size: 28px;
  font-weight: bold;
  color: #111827;
}

/* Tab 區域 */
.LearningJourney_tabs__dAIWq {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: visible;
}

.LearningJourney_tabsList__Vmr8o {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.LearningJourney_tab__5H6h2 {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  background: none;
}

.LearningJourney_tabActive__sMm1e {
  background-color: #4f46e5;
  color: white;
}

.LearningJourney_tab__5H6h2:not(.LearningJourney_tabActive__sMm1e) {
  color: #6b7280;
}

.LearningJourney_tabDelete__Vf6VZ {
  color: #ef4444;
}

.LearningJourney_tabDelete__Vf6VZ.LearningJourney_tabActive__sMm1e {
  background-color: #ef4444;
  color: white;
}

.LearningJourney_tabIcon__SQKjv {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.LearningJourney_tabContent__HU0SQ {
  padding: 16px;
  overflow: visible;
}

/* 面板樣式 */
.LearningJourney_panel__5ktol {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.LearningJourney_panelSection__Jzztj {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.LearningJourney_panelHeader__plysZ {
  margin-bottom: 16px;
}

.LearningJourney_panelTitle__TyqLA {
  font-size: 18px;
  font-weight: 500;
  color: #374151;
}

.LearningJourney_panelDescription__1clyG {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

/* 搜尋表單 */
.LearningJourney_searchForm__V66eP {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
}

.LearningJourney_searchField__dxeEg {
  flex: 1 1;
  min-width: 200px;
  display: flex;
  gap: 16px;
}

.LearningJourney_searchInput__fu46p {
  flex: 1 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  min-width: 200px;
  max-width: 400px;
}

.LearningJourney_searchButton__4BnhZ {
  padding: 8px 24px;
  background-color: #4f46e5;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.LearningJourney_searchButton__4BnhZ:hover {
  background-color: #4338ca;
}

/* 搜尋結果 */
.LearningJourney_searchFilter__c0g\+I {
  margin-bottom: 16px;
}

.LearningJourney_filterInput__1\+Y0t {
  flex: 1 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  min-width: 200px;
  max-width: 300px;
}

.LearningJourney_resultItem__-XTTe {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.LearningJourney_resultHeader__kPZFL {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  background-color: #f9fafb;
}

.LearningJourney_resultTitle__VWUAp {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.LearningJourney_expandIcon__jWw8v {
  color: #6b7280;
  font-size: 12px;
}

.LearningJourney_resultMeta__GMSXo {
  display: flex;
  gap: 16px;
  color: #6b7280;
  font-size: 14px;
}

.LearningJourney_resultContent__-sojj {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
}

.LearningJourney_resultDetail__9XmOx {
  font-size: 14px;
  line-height: 1.5;
}

.LearningJourney_learningResult__QAGkt {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.LearningJourney_learningResult__QAGkt h4 {
  font-weight: 500;
  margin-bottom: 8px;
  color: #374151;
}

.LearningJourney_errorMessage__46oYc {
  color: #ef4444;
  margin-top: 8px;
  font-size: 14px;
}

.LearningJourney_searchButton__4BnhZ:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.LearningJourney_filterTag__a54DV {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.LearningJourney_tagBox__MgzCP {
  padding: 6px 16px;
  border-radius: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  transition: all 0.2s ease;
  color: #666;
  white-space: nowrap;
  display: inline-block;
}

.LearningJourney_tagBox__MgzCP:hover {
  background-color: #e8e8e8;
}

.LearningJourney_tagBox__MgzCP.LearningJourney_active__pSoQG {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
}

.LearningJourney_tagBox__MgzCP.LearningJourney_active__pSoQG:hover {
  background-color: #40a9ff;
}

.LearningJourney_filterHeader__rYNJw {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.LearningJourney_filterControls__9rmXO {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.LearningJourney_resultCount__s2tCV {
  font-size: 14px;
  color: #666;
}

.LearningJourney_dateRangeControls__4sYGo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.LearningJourney_dateInput__5ap2E {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.LearningJourney_quickDateButtons__Hb8bm {
  display: flex;
  gap: 8px;
}

.LearningJourney_quickDateButtons__Hb8bm button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.LearningJourney_quickDateButtons__Hb8bm button:hover {
  background-color: #e0e0e0;
}

.LearningJourney_searchTypeButtons__zYWkl {
  display: flex;
  gap: 8px;
  margin-right: 16px;
}

.LearningJourney_searchTypeButton__rAvON {
  padding: 6px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.LearningJourney_searchTypeButton__rAvON:hover {
  background-color: #f0f0f0;
}

.LearningJourney_searchTypeButton__rAvON.LearningJourney_active__pSoQG {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.LearningJourney_copyButtons__D4NoK {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.LearningJourney_copyButton__hG9oy {
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.LearningJourney_copyButton__hG9oy:hover {
  background-color: #e0e0e0;
}

.AdminFrame_adminFrame__tPbdV {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
}

.AdminFrame_header__GWZ6C {
  background: #ffffff;
  border-bottom: 1px solid rgba(70, 117, 122, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

.AdminFrame_navContainer__UJg2Y {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.AdminFrame_leftSection__jXOuz {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.AdminFrame_breadcrumb__hHSM0 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  color: #70757a;
}

.AdminFrame_breadcrumbLink__\+\+b2F {
  color: #4285f4;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.AdminFrame_breadcrumbLink__\+\+b2F:hover {
  color: #1a73e8;
  background: rgba(66, 133, 244, 0.08);
}

.AdminFrame_breadcrumbSeparator__FhFZb {
  color: #70757a;
  opacity: 0.6;
  font-weight: 300;
  font-size: 1rem;
}

.AdminFrame_breadcrumbCurrent__A1yOw {
  color: #202124;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}

.AdminFrame_rightSection__qAM1u {
  display: flex;
  align-items: center;
}

.AdminFrame_homeButton__XgDKl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(70, 117, 122, 0.15);
  border-radius: 50%;
  color: #70757a;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.AdminFrame_homeButton__XgDKl:hover {
  background: rgba(66, 133, 244, 0.05);
  border-color: rgba(66, 133, 244, 0.3);
  color: #4285f4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
}

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

.AdminFrame_homeIcon__UIB7C {
  font-size: 1.125rem;
  line-height: 1;
}

.AdminFrame_content__6EOmJ {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AdminFrame_navContainer__UJg2Y {
    padding: 1rem;
    gap: 1rem;
  }

  .AdminFrame_breadcrumb__hHSM0 {
    font-size: 1rem;
    gap: 0.5rem;
  }

  .AdminFrame_breadcrumbLink__\+\+b2F,
  .AdminFrame_breadcrumbCurrent__A1yOw {
    padding: 0.2rem 0.4rem;
  }

  .AdminFrame_homeButton__XgDKl {
    width: 36px;
    height: 36px;
  }

  .AdminFrame_homeIcon__UIB7C {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .AdminFrame_navContainer__UJg2Y {
    padding: 0.75rem;
  }

  .AdminFrame_breadcrumb__hHSM0 {
    font-size: 0.9rem;
    gap: 0.4rem;
  }

  .AdminFrame_breadcrumbSeparator__FhFZb {
    font-size: 0.8rem;
  }

  .AdminFrame_homeButton__XgDKl {
    width: 32px;
    height: 32px;
  }

  .AdminFrame_homeIcon__UIB7C {
    font-size: 0.9rem;
  }
}

.AdminNavigation_container__loQ28 {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.AdminNavigation_header__DmknL {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 600px;
}

.AdminNavigation_title__YVfj7 {
  font-size: 2rem;
  font-weight: 500;
  color: #202124;
  margin: 0 0 0.5rem 0;
  line-height: 1.6;
}

.AdminNavigation_subtitle__rPfqa {
  font-size: 0.875rem;
  color: #70757a;
  margin: 0;
  line-height: 1.6;
  opacity: 0.8;
}

.AdminNavigation_navigationGrid__G5l7u {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  max-width: 1200px;
  width: 100%;
}

.AdminNavigation_navigationCard__Qnyuh {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.AdminNavigation_navigationCard__Qnyuh::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-color);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.AdminNavigation_navigationCard__Qnyuh:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  border-color: rgba(66, 133, 244, 0.2);
}

.AdminNavigation_navigationCard__Qnyuh:hover::before {
  opacity: 1;
}

.AdminNavigation_cardIcon__FYZZj {
  font-size: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(
    135deg,
    rgba(66, 133, 244, 0.1) 0%,
    rgba(66, 133, 244, 0.05) 100%
  );
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.AdminNavigation_navigationCard__Qnyuh:hover .AdminNavigation_cardIcon__FYZZj {
  background: linear-gradient(
    135deg,
    rgba(66, 133, 244, 0.15) 0%,
    rgba(66, 133, 244, 0.08) 100%
  );
  transform: scale(1.05);
}

.AdminNavigation_cardContent__hh7DN {
  flex-grow: 1;
}

.AdminNavigation_cardTitle__Y-YnA {
  font-size: 1.125rem;
  font-weight: 500;
  color: #202124;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

.AdminNavigation_cardDescription__Yt8iI {
  font-size: 0.875rem;
  color: #70757a;
  margin: 0;
  line-height: 1.5;
}

.AdminNavigation_cardArrow__sGqjU {
  font-size: 1.25rem;
  color: #70757a;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}

.AdminNavigation_navigationCard__Qnyuh:hover .AdminNavigation_cardArrow__sGqjU {
  color: var(--accent-color);
  transform: translateX(4px);
  opacity: 1;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AdminNavigation_container__loQ28 {
    padding: 1rem;
  }

  .AdminNavigation_header__DmknL {
    margin-bottom: 2rem;
  }

  .AdminNavigation_title__YVfj7 {
    font-size: 1.75rem;
  }

  .AdminNavigation_navigationGrid__G5l7u {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .AdminNavigation_navigationCard__Qnyuh {
    padding: 1.5rem;
    gap: 1rem;
  }

  .AdminNavigation_cardIcon__FYZZj {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }

  .AdminNavigation_cardTitle__Y-YnA {
    font-size: 1rem;
  }

  .AdminNavigation_cardDescription__Yt8iI {
    font-size: 0.8rem;
  }
}

.TextToSpeechTool_container__MxYad {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.TextToSpeechTool_header__0X3yd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.TextToSpeechTool_headerLeft__pxM0s {
  display: flex;
  align-items: center;
  gap: 20px;
}

.TextToSpeechTool_headerRight__zwMEd {
  display: flex;
  align-items: center;
  gap: 12px;
}

.TextToSpeechTool_title__ywu62 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_modelInfo__dx9V8 {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.TextToSpeechTool_modelLabel__YiGOg {
  font-size: 14px;
  color: #666;
  margin-right: 8px;
}

.TextToSpeechTool_modelValue__46tDQ {
  font-size: 14px;
  font-weight: 600;
  color: #9c27b0;
  font-family: "Courier New", monospace;
}

.TextToSpeechTool_content__CLvbP {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.TextToSpeechTool_inputSection__Mycwr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.TextToSpeechTool_label__B-roj {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.TextToSpeechTool_textInput__A3Pjn {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
}

.TextToSpeechTool_textInput__A3Pjn:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.TextToSpeechTool_settingsSection__fwAaU {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

.TextToSpeechTool_settingRow__ZhyNd {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.TextToSpeechTool_settingItem__NGhcb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
  flex: 1 1;
  max-width: 100%;
}

.TextToSpeechTool_select__ApsZu {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.TextToSpeechTool_select__ApsZu:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.TextToSpeechTool_numberInput__CAGyq {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  width: 80px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  max-width: 100%;
}

.TextToSpeechTool_numberInput__CAGyq:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.TextToSpeechTool_checkboxLabel__g7SzE {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  padding: 8px 0;
}

.TextToSpeechTool_checkboxLabel__g7SzE input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.TextToSpeechTool_buttonSection__RBdJP {
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
}

.TextToSpeechTool_generateButton__wKgmK {
  padding: 12px 20px;
  background: linear-gradient(135deg, #9c27b0 0%, #667eea 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.TextToSpeechTool_generateButton__wKgmK:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #7b1fa2 0%, #5a67d8 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.TextToSpeechTool_generateButton__wKgmK:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.TextToSpeechTool_clearButton__KeKif {
  padding: 12px 20px;
  background: linear-gradient(135deg, #764ba2 0%, #9c27b0 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.TextToSpeechTool_clearButton__KeKif:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #603986 0%, #7b1fa2 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.TextToSpeechTool_clearButton__KeKif:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.TextToSpeechTool_audioSection__eNSZM {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.TextToSpeechTool_sectionTitle__6z9Bu {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_audioPlayer__1lC0I {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.TextToSpeechTool_audioHint__stNth {
  font-size: 14px;
  color: #666;
}

.TextToSpeechTool_audioActions__cvV0J {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.TextToSpeechTool_audioActionButton__tNbY\+ {
  padding: 12px 24px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  min-width: 120px;
}

.TextToSpeechTool_audioActionButton__tNbY\+:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.TextToSpeechTool_audioActionButton__tNbY\+:active:not(:disabled) {
  transform: translateY(0);
}

.TextToSpeechTool_audioActionButton__tNbY\+:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.TextToSpeechTool_errorSection__i5Cyb {
  background: #fff5f5;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #fed7d7;
}

.TextToSpeechTool_errorMessage__zZm1A {
  color: #e53e3e;
  font-size: 14px;
  line-height: 1.5;
}

.TextToSpeechTool_responseSection__-7E2R {
  background: #f7fafc;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.TextToSpeechTool_responseContent__K7Q3a {
  max-height: 300px;
  overflow-y: auto;
}

.TextToSpeechTool_responseJson__Wzztw {
  background: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  overflow-x: auto;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .TextToSpeechTool_container__MxYad {
    margin: 10px;
    padding: 16px;
    max-width: calc(100vw - 20px);
  }

  .TextToSpeechTool_header__0X3yd {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .TextToSpeechTool_settingRow__ZhyNd {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .TextToSpeechTool_settingItem__NGhcb {
    min-width: auto;
    width: 100%;
  }

  .TextToSpeechTool_textInput__A3Pjn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .TextToSpeechTool_select__ApsZu {
    width: 100%;
    max-width: 100%;
  }

  .TextToSpeechTool_numberInput__CAGyq {
    width: 100%;
    max-width: 100%;
  }

  .TextToSpeechTool_buttonSection__RBdJP {
    flex-direction: column;
  }

  .TextToSpeechTool_generateButton__wKgmK,
  .TextToSpeechTool_clearButton__KeKif {
    width: 100%;
  }

  .TextToSpeechTool_audioPlayer__1lC0I {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .TextToSpeechTool_audioActions__cvV0J {
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .TextToSpeechTool_audioActionButton__tNbY\+ {
    flex: 1 1;
    justify-content: center;
    min-width: 100px;
    padding: 10px 20px;
    font-size: 13px;
  }

  .TextToSpeechTool_uploadButton__43SeG {
    width: 100%;
  }
}

/* 上傳功能樣式 */
.TextToSpeechTool_uploadSection__SUIUg {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.TextToSpeechTool_uploadDescription__5TUOM {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.TextToSpeechTool_fileInput__FeHEU {
  width: 100%;
  padding: 8px 12px;
  border: 2px dashed #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.TextToSpeechTool_fileInput__FeHEU:hover {
  border-color: #9c27b0;
}

.TextToSpeechTool_fileInput__FeHEU:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

.TextToSpeechTool_fileInfo__RB-58 {
  margin-top: 8px;
  padding: 8px 12px;
  background: #e8f5e8;
  border: 1px solid #c3e6c3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.TextToSpeechTool_fileName__Hk3eG {
  font-size: 14px;
  color: #2e7d32;
  font-weight: 500;
}

.TextToSpeechTool_fileSize__1ZJR8 {
  font-size: 12px;
  color: #666;
}

.TextToSpeechTool_uploadButton__43SeG {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.TextToSpeechTool_uploadButton__43SeG:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.TextToSpeechTool_uploadButton__43SeG:active:not(:disabled) {
  transform: translateY(0);
}

.TextToSpeechTool_uploadButton__43SeG:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.TextToSpeechTool_successSection__sueIA {
  margin-bottom: 20px;
  padding: 15px;
  background: #e8f5e8;
  border: 1px solid #c3e6c3;
  border-radius: 6px;
}

.TextToSpeechTool_successMessage__wbZed {
  color: #2e7d32;
  font-size: 14px;
  font-weight: 500;
}

/* 拖曳上傳區域樣式 */
.TextToSpeechTool_dropZone__64OCh {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.TextToSpeechTool_dropZone__64OCh:hover {
  border-color: #9c27b0;
  background: #f8f4ff;
}

.TextToSpeechTool_dropZone__64OCh.TextToSpeechTool_dragging__xZYoa {
  border-color: #9c27b0;
  background: #f0e6ff;
  transform: scale(1.02);
}

.TextToSpeechTool_dropZoneContent__dr-v5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.TextToSpeechTool_dropZoneIcon__\+aHoY {
  font-size: 48px;
  opacity: 0.5;
}

.TextToSpeechTool_dropZoneText__anc\+q {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.TextToSpeechTool_dropZoneHint__EEyF2 {
  font-size: 14px;
  color: #666;
}

.TextToSpeechTool_fileInfo__RB-58 {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #e8f5e8;
  border: 1px solid #c3e6c3;
  border-radius: 8px;
  padding: 20px;
  position: relative;
}

.TextToSpeechTool_fileIcon__MTOfL {
  font-size: 32px;
}

.TextToSpeechTool_fileDetails__ULo\+C {
  flex: 1 1;
  text-align: left;
}

.TextToSpeechTool_fileName__Hk3eG {
  font-size: 16px;
  color: #2e7d32;
  font-weight: 600;
  margin-bottom: 4px;
}

.TextToSpeechTool_fileSize__1ZJR8 {
  font-size: 14px;
  color: #666;
}

.TextToSpeechTool_removeFileButton__aaAwv {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.TextToSpeechTool_removeFileButton__aaAwv:hover {
  background: #d32f2f;
}

.TextToSpeechTool_uploadButtonSection__NyNi7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.TextToSpeechTool_uploadHint__mMS6V {
  color: #f57c00;
  font-size: 14px;
  background: #fff8e1;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ffcc02;
}

.TextToSpeechTool_dateHint__gLhVc {
  color: #6c757d;
  font-size: 12px;
  margin-top: 6px;
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 3px;
  border-left: 3px solid #dee2e6;
}

.TextToSpeechTool_dateSelectContainer__cCM-N {
  display: flex;
  gap: 12px;
  align-items: center;
}

.TextToSpeechTool_dateSelect__xoeBR {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.TextToSpeechTool_dateSelect__xoeBR:hover {
  border-color: #9c27b0;
}

.TextToSpeechTool_dateSelect__xoeBR:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

/* Popup 樣式 */
.TextToSpeechTool_popupOverlay__wGde4 {
  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;
  padding: 20px;
}

.TextToSpeechTool_popupContent__An-XY {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: TextToSpeechTool_popupShow__1FfSl 0.3s ease-out;
}

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

.TextToSpeechTool_popupHeader__Rn1ih {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
}

.TextToSpeechTool_popupTitle__VdS3E {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_closeButton__tquA5 {
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.TextToSpeechTool_closeButton__tquA5:hover {
  background: #f1f3f4;
  color: #333;
}

.TextToSpeechTool_popupBody__CYEmv {
  padding: 24px;
}

.TextToSpeechTool_popupFooter__eY2gX {
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.TextToSpeechTool_closePopupButton__Gz98F {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.TextToSpeechTool_closePopupButton__Gz98F:hover {
  background: #5a6268;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .TextToSpeechTool_popupOverlay__wGde4 {
    padding: 10px;
  }

  .TextToSpeechTool_popupContent__An-XY {
    max-height: 90vh;
  }

  .TextToSpeechTool_popupHeader__Rn1ih {
    padding: 16px 20px;
  }

  .TextToSpeechTool_popupBody__CYEmv {
    padding: 20px;
  }

  .TextToSpeechTool_popupFooter__eY2gX {
    padding: 12px 20px;
  }
}

/* 緩存管理按鈕樣式 */
.TextToSpeechTool_cacheButton__7jCZU {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  border: 1px solid #dee2e6;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  min-width: 70px;
}

.TextToSpeechTool_cacheButton__7jCZU:hover:not(:disabled) {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  border-color: #adb5bd;
  color: #343a40;
}

.TextToSpeechTool_cacheButton__7jCZU:active:not(:disabled) {
  background: linear-gradient(135deg, #dee2e6 0%, #ced4da 100%);
  border-color: #adb5bd;
  transform: translateY(1px);
}

.TextToSpeechTool_cacheButton__7jCZU:disabled {
  background: #f8f9fa;
  color: #adb5bd;
  border-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 響應式設計更新 */
@media (max-width: 768px) {
  .TextToSpeechTool_header__0X3yd {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .TextToSpeechTool_headerLeft__pxM0s {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .TextToSpeechTool_headerRight__zwMEd {
    width: 100%;
    justify-content: flex-end;
  }

  .TextToSpeechTool_cacheButton__7jCZU {
    font-size: 11px;
    padding: 5px 10px;
    min-width: 60px;
  }

  .TextToSpeechTool_dateSelectContainer__cCM-N {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .TextToSpeechTool_dateSelect__xoeBR {
    min-width: auto;
    width: 100%;
  }
}

/* API 回應詳情樣式 */
.TextToSpeechTool_apiResponseSection__oVQCr {
  margin-top: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #28a745;
}

.TextToSpeechTool_apiResponseTitle__xVwF4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_apiResponseContent__ouuAj {
  margin-bottom: 12px;
}

.TextToSpeechTool_apiResponseItem__GvcSU {
  margin-bottom: 4px;
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

.TextToSpeechTool_apiResponseItem__GvcSU strong {
  color: #333;
}

/* 下載按鈕樣式 */
.TextToSpeechTool_downloadButtonSection__DTas2 {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.TextToSpeechTool_downloadButton__cp0-0 {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.TextToSpeechTool_downloadButton__cp0-0:hover:not(:disabled) {
  background: #5a6268;
  transform: translateY(-1px);
}

.TextToSpeechTool_downloadButton__cp0-0:disabled {
  background: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}

/* 完整 API 回應樣式 */
.TextToSpeechTool_fullApiResponseSection__H8GO2 {
  margin-top: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #17a2b8;
}

.TextToSpeechTool_fullApiResponseTitle__sHdzg {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_fullApiResponseContent__EsXU8 {
  max-height: 300px;
  overflow-y: auto;
  border-radius: 4px;
  background: #fff;
}

.TextToSpeechTool_fullApiResponseContent__EsXU8 .TextToSpeechTool_responseJson__Wzztw {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* TTS 快取總覽樣式 */
.TextToSpeechTool_cacheOverviewSection__piara {
  margin-top: 40px;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.TextToSpeechTool_sectionHeader__z0ig7 {
  margin-bottom: 24px;
}

.TextToSpeechTool_sectionTitle__6z9Bu {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_sectionDescription__auwq- {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.TextToSpeechTool_queryControls__JsDez {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  align-items: end;
}

.TextToSpeechTool_queryField__UtToc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.TextToSpeechTool_queryLabel__hakmp {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.TextToSpeechTool_queryInput__M0ftg {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.TextToSpeechTool_queryInput__M0ftg:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.TextToSpeechTool_queryButton__4Gz1S {
  padding: 8px 16px;
  background: #9c27b0;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.TextToSpeechTool_queryButton__4Gz1S:hover:not(:disabled) {
  background: #7b1fa2;
}

.TextToSpeechTool_queryButton__4Gz1S:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.TextToSpeechTool_quickQueryButton__zsVAD {
  padding: 8px 16px;
  background: #78909c;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.TextToSpeechTool_quickQueryButton__zsVAD:hover:not(:disabled) {
  background: #607d8b;
}

.TextToSpeechTool_quickQueryButton__zsVAD:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.TextToSpeechTool_queryButtonGroup__H4Hg4 {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.TextToSpeechTool_queryResultSection__X6atb {
  background: white;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  overflow: hidden;
}

.TextToSpeechTool_resultHeader__JHnTD {
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.TextToSpeechTool_resultTitle__tawIS {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.TextToSpeechTool_resultStats__KPyUQ {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.TextToSpeechTool_resultCount__0z8o- {
  font-weight: 500;
  color: #9c27b0;
}

.TextToSpeechTool_resultInfo__gx7jW {
  color: #666;
}

.TextToSpeechTool_recordsList__naQOc {
  max-height: 600px;
  overflow-y: auto;
}

.TextToSpeechTool_recordsHeader__6XzCp {
  display: grid;
  grid-template-columns: 0.8fr 2fr 0.8fr 0.6fr 1.2fr 1.2fr 1.4fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.TextToSpeechTool_recordRow__X3Phn {
  display: grid;
  grid-template-columns: 0.8fr 2fr 0.8fr 0.6fr 1.2fr 1.2fr 1.4fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  align-items: center; /* 整行垂直置中 */
  transition: background-color 0.2s ease;
}

.TextToSpeechTool_recordRow__X3Phn:hover {
  background: #f8f9fa;
}

.TextToSpeechTool_recordCell__qC9k5 {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* 文字內容欄位保持頂部對齊 */
.TextToSpeechTool_recordCell__qC9k5:nth-child(2) {
  align-items: flex-start;
  align-self: start; /* 覆蓋整行的對齊設定 */
}

.TextToSpeechTool_md5Value__LVq4- {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #9c27b0;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.TextToSpeechTool_md5Value__LVq4-:hover {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.TextToSpeechTool_headerHint__sbB95 {
  font-size: 10px;
  color: #999;
  font-weight: normal;
  margin-left: 4px;
}

.TextToSpeechTool_textContent__tCUSl {
  color: #333;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
  max-height: 4.2em; /* 3行文字：1.4 * 3 = 4.2em */
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease;
  padding-right: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expanded__AmNqr {
  max-height: none;
  -webkit-line-clamp: unset;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E {
  cursor: pointer;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E::after {
  content: "▼";
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  color: #9c27b0;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8f9fa;
  padding: 2px 4px;
  border-radius: 2px;
  z-index: 2;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 30px;
  height: 1.4em;
  background: linear-gradient(90deg, transparent 0%, rgba(248, 249, 250, 0.8) 50%, rgba(248, 249, 250, 1) 100%);
  pointer-events: none;
  z-index: 1;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E:hover::after {
  background: #e9ecef;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E.TextToSpeechTool_expanded__AmNqr::after {
  content: "▲";
  background: #e9ecef;
}

.TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E.TextToSpeechTool_expanded__AmNqr::before {
  display: none;
}

.TextToSpeechTool_speedValue__ky9yZ {
  font-weight: 500;
  color: #666;
  font-size: 12px;
}

.TextToSpeechTool_timestamp__MYA7P {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
}

.TextToSpeechTool_timestamp__MYA7P div:first-child {
  font-weight: 500;
  color: #333;
}

.TextToSpeechTool_timestamp__MYA7P div:last-child {
  font-size: 11px;
  color: #888;
}

.TextToSpeechTool_recordActions__l1wNS {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  min-width: 120px;
}

.TextToSpeechTool_actionButton__tavRP {
  padding: 4px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  min-width: 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.TextToSpeechTool_actionButton__tavRP:hover {
  background: #e9ecef;
  border-color: #9c27b0;
}

.TextToSpeechTool_actionButton__tavRP.TextToSpeechTool_playing__DAQ9M {
  background: #9c27b0;
  color: white;
  border-color: #9c27b0;
}

.TextToSpeechTool_noRecords__vYpaP {
  padding: 40px 16px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.TextToSpeechTool_queryError__-2ves {
  margin-top: 16px;
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
}

.TextToSpeechTool_errorTitle__N0mQR {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #856404;
}

.TextToSpeechTool_errorMessage__zZm1A {
  margin: 0;
  color: #856404;
  font-size: 14px;
}

@media (max-width: 768px) {
  .TextToSpeechTool_queryControls__JsDez {
    flex-direction: column;
    align-items: stretch;
  }

  .TextToSpeechTool_queryButtonGroup__H4Hg4 {
    gap: 12px;
    justify-content: center;
  }
  
  .TextToSpeechTool_queryField__UtToc {
    min-width: auto;
  }
  
  .TextToSpeechTool_recordsHeader__6XzCp,
  .TextToSpeechTool_recordRow__X3Phn {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .TextToSpeechTool_recordHeaderCell__N6GoY {
    display: none;
  }
  
  .TextToSpeechTool_recordCell__qC9k5 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
  
  .TextToSpeechTool_recordCell__qC9k5::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: #666;
  }
  
  /* 文字內容欄位在小螢幕上保持原有樣式 */
  .TextToSpeechTool_recordCell__qC9k5:nth-child(2) {
    align-items: flex-start;
  }
  
  .TextToSpeechTool_textContent__tCUSl {
    max-height: 4em;
    padding-right: 50px;
  }
  
  .TextToSpeechTool_textContent__tCUSl.TextToSpeechTool_expandable__9eA3E::after {
    font-size: 10px;
    padding: 1px 4px;
  }
  
  .TextToSpeechTool_recordActions__l1wNS {
    gap: 3px;
    min-width: 100px;
  }
  
  .TextToSpeechTool_actionButton__tavRP {
    min-width: 24px;
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
}

/* Token Usage 搜尋列表樣式 */

.TokenUsageDetailSearch_container__pZJbs {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

/* 過濾區域 */
.TokenUsageDetailSearch_filterSection__U5D6B {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.TokenUsageDetailSearch_filterGroup__TjHrj {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.TokenUsageDetailSearch_filterLabel__3SQcL {
  font-weight: 600;
  color: #495057;
  min-width: 100px;
}

.TokenUsageDetailSearch_select__f4YiO,
.TokenUsageDetailSearch_textInput__74rzI,
.TokenUsageDetailSearch_dateInput__CY3My {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.TokenUsageDetailSearch_select__f4YiO:focus,
.TokenUsageDetailSearch_textInput__74rzI:focus,
.TokenUsageDetailSearch_dateInput__CY3My:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
}

.TokenUsageDetailSearch_select__f4YiO {
  width: 150px;
  cursor: pointer;
}

.TokenUsageDetailSearch_textInput__74rzI {
  flex: 1 1;
  min-width: 200px;
}

.TokenUsageDetailSearch_dateInputs__WaF79 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.TokenUsageDetailSearch_dateInput__CY3My {
  width: 150px;
}

.TokenUsageDetailSearch_dateButtons__qPuaj {
  display: flex;
  gap: 0.5rem;
}

.TokenUsageDetailSearch_quickDateButton__br7Su {
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #ced4da;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.TokenUsageDetailSearch_quickDateButton__br7Su:hover {
  background: #e9ecef;
  border-color: #4285f4;
  color: #4285f4;
}

.TokenUsageDetailSearch_buttonGroup__cIsSx {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.TokenUsageDetailSearch_searchButton__O06iO {
  padding: 0.6rem 2rem;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.TokenUsageDetailSearch_searchButton__O06iO:hover:not(:disabled) {
  background: #3367d6;
}

.TokenUsageDetailSearch_searchButton__O06iO:disabled {
  background: #b0bec5;
  cursor: not-allowed;
}

.TokenUsageDetailSearch_resetButton__YUetA {
  padding: 0.6rem 1.5rem;
  background: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.TokenUsageDetailSearch_resetButton__YUetA:hover:not(:disabled) {
  background: #dee2e6;
  border-color: #adb5bd;
}

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

/* 錯誤訊息 */
.TokenUsageDetailSearch_error__Tdf5Z {
  background: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  border: 1px solid #f5c6cb;
}

/* 類型過濾 */
.TokenUsageDetailSearch_typeFilterSection__IO4qC {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.TokenUsageDetailSearch_filterButton__-vF5M {
  padding: 0.5rem 1rem;
  border: 2px solid transparent;
  border-radius: 20px;
  background: #e9ecef;
  color: #495057;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}

.TokenUsageDetailSearch_filterButton__-vF5M:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.TokenUsageDetailSearch_filterButton__-vF5M.TokenUsageDetailSearch_active__dHoCa {
  opacity: 1;
}

.TokenUsageDetailSearch_filterButton__-vF5M:not(.TokenUsageDetailSearch_active__dHoCa) {
  opacity: 0.5;
}

.TokenUsageDetailSearch_preparationType__tixpR.TokenUsageDetailSearch_active__dHoCa {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #1565c0;
}

.TokenUsageDetailSearch_smartPromptType__P5p07.TokenUsageDetailSearch_active__dHoCa {
  background: #f3e5f5;
  color: #7b1fa2;
  border-color: #7b1fa2;
}

.TokenUsageDetailSearch_otherType__bS3qB.TokenUsageDetailSearch_active__dHoCa {
  background: #fff3e0;
  color: #e65100;
  border-color: #e65100;
}

/* 結果統計 */
.TokenUsageDetailSearch_resultInfo__TZLcK {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #e3f2fd;
  border-left: 4px solid #1565c0;
  border-radius: 4px;
  color: #1565c0;
  font-size: 1rem;
}

/* 當頁費用統計 */
.TokenUsageDetailSearch_pageCostSummary__3WmeE {
  background: white;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.TokenUsageDetailSearch_pageCostHeader__lxR79 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #e9ecef;
}

.TokenUsageDetailSearch_pageCostTitle__8607v {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
}

.TokenUsageDetailSearch_pageCostCount__s7qoh {
  font-size: 0.9rem;
  color: #6c757d;
}

.TokenUsageDetailSearch_pageCostGrid__fah3q {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: center;
}

.TokenUsageDetailSearch_pageCostItem__MfQrF {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.TokenUsageDetailSearch_pageCostLabel__UIpMY {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
}

.TokenUsageDetailSearch_pageCostValue__8-x3z {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
}

.TokenUsageDetailSearch_pageCostDivider__dJfqR {
  width: 1px;
  height: 50px;
  background: #dee2e6;
}

.TokenUsageDetailSearch_pageCostHint__AZIib {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #dee2e6;
  font-size: 0.8rem;
  color: #6c757d;
  font-style: italic;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .TokenUsageDetailSearch_pageCostGrid__fah3q {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .TokenUsageDetailSearch_pageCostDivider__dJfqR {
    display: none;
  }
}

/* 列表容器 */
.TokenUsageDetailSearch_listContainer__ROjDd {
  min-height: 300px;
}

.TokenUsageDetailSearch_emptyState__6JZ88 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #adb5bd;
}

.TokenUsageDetailSearch_emptyState__6JZ88 svg {
  margin-bottom: 1rem;
  color: #dee2e6;
}

.TokenUsageDetailSearch_emptyState__6JZ88 p {
  font-size: 1.1rem;
  margin: 0;
}

/* 表格 */
.TokenUsageDetailSearch_list__FbTVW {
  overflow-x: auto;
}

.TokenUsageDetailSearch_table__Ct\+Vp {
  width: 100%;
  border-collapse: collapse;
}

.TokenUsageDetailSearch_table__Ct\+Vp thead {
  background: #f8f9fa;
}

.TokenUsageDetailSearch_table__Ct\+Vp th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
}

.TokenUsageDetailSearch_table__Ct\+Vp tbody tr {
  border-bottom: 1px solid #e9ecef;
  transition: background 0.2s;
}

.TokenUsageDetailSearch_tableRow__pXttB {
  cursor: pointer;
}

.TokenUsageDetailSearch_tableRow__pXttB:hover {
  background: #f8f9fa;
}

.TokenUsageDetailSearch_table__Ct\+Vp td {
  padding: 1rem;
  color: #212529;
}

.TokenUsageDetailSearch_username__5g6Bn {
  font-weight: 500;
  color: #495057;
}

.TokenUsageDetailSearch_model__CVx9c {
  font-family: monospace;
  font-size: 0.9rem;
  color: #6c757d;
}

.TokenUsageDetailSearch_tokenCount__wLKGn {
  text-align: right;
  font-family: monospace;
  font-weight: 500;
}

.TokenUsageDetailSearch_cost__5zgm0 {
  text-align: right;
  font-weight: 600;
  color: #28a745;
}

.TokenUsageDetailSearch_typeTag__yywM8 {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.TokenUsageDetailSearch_preparationTag__c1B9p {
  background: #e3f2fd;
  color: #1565c0;
}

.TokenUsageDetailSearch_smartPromptTag__mYYKs {
  background: #f3e5f5;
  color: #7b1fa2;
}

.TokenUsageDetailSearch_otherTag__fsuu4 {
  background: #fff3e0;
  color: #e65100;
}

/* 分頁 */
.TokenUsageDetailSearch_pagination__e1MK2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e9ecef;
}

.TokenUsageDetailSearch_pageButton__0-1EP {
  padding: 0.5rem 1.5rem;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.TokenUsageDetailSearch_pageButton__0-1EP:hover:not(:disabled) {
  background: #3367d6;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.TokenUsageDetailSearch_pageButton__0-1EP:disabled {
  background: #e9ecef;
  color: #adb5bd;
  cursor: not-allowed;
  transform: none;
}

.TokenUsageDetailSearch_pageInfo__ODut\+ {
  font-weight: 500;
  color: #495057;
}

/* Token Usage 統計總覽樣式 */

.TokenUsageSummary_container__XrYLi {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

/* 過濾區域 */
.TokenUsageSummary_filterSection__TTP-W {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.TokenUsageSummary_filterRow__L2\+dU {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

.TokenUsageSummary_filterGroup__KUQsf {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.TokenUsageSummary_filterLabel__LaqBb {
  font-weight: 600;
  color: #495057;
  min-width: 120px;
}

.TokenUsageSummary_select__x7Gy2,
.TokenUsageSummary_textInput__djWDh,
.TokenUsageSummary_dateInput__juZUL {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.TokenUsageSummary_select__x7Gy2:focus,
.TokenUsageSummary_textInput__djWDh:focus,
.TokenUsageSummary_dateInput__juZUL:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.TokenUsageSummary_select__x7Gy2 {
  width: 150px;
  cursor: pointer;
}

.TokenUsageSummary_textInput__djWDh {
  width: 250px;
}

.TokenUsageSummary_dateInputs__KX69l {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.TokenUsageSummary_dateInput__juZUL {
  width: 150px;
}

.TokenUsageSummary_dateButtons__RiXdB {
  display: flex;
  gap: 0.5rem;
}

.TokenUsageSummary_quickDateButton__E-BHv {
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #ced4da;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.TokenUsageSummary_quickDateButton__E-BHv:hover {
  background: #fff3e0;
  border-color: #f59e0b;
  color: #f59e0b;
}

.TokenUsageSummary_buttonGroup__thzju {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.TokenUsageSummary_searchButton__iBg51 {
  padding: 0.6rem 2rem;
  background: #f59e0b;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.TokenUsageSummary_searchButton__iBg51:hover:not(:disabled) {
  background: #d97706;
}

.TokenUsageSummary_searchButton__iBg51:disabled {
  background: #b0bec5;
  cursor: not-allowed;
}

.TokenUsageSummary_resetButton__sXKdy {
  padding: 0.6rem 1.5rem;
  background: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
}

.TokenUsageSummary_resetButton__sXKdy:hover:not(:disabled) {
  background: #dee2e6;
  border-color: #adb5bd;
}

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

/* 錯誤訊息 */
.TokenUsageSummary_error__IffK4 {
  background: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  border: 1px solid #f5c6cb;
}

/* 統計容器 */
.TokenUsageSummary_statsContainer__j4GPi {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  .TokenUsageSummary_statsContainer__j4GPi {
    grid-template-columns: 1fr;
  }
}

/* 總記錄數卡片 */
.TokenUsageSummary_logsCountCard__J\+XkB {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
  transition: transform 0.2s;
}

.TokenUsageSummary_logsCountCard__J\+XkB:hover {
  transform: translateY(-4px);
}

.TokenUsageSummary_logsCountIcon__1GsiI {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.TokenUsageSummary_logsCountLabel__YgznH {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

.TokenUsageSummary_logsCountValue__oL4zR {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.TokenUsageSummary_logsCountHint__JX1RD {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 費用統計卡片 */
.TokenUsageSummary_costStatsCard__ZzzZV {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 2px solid #f0f0f0;
}

/* 總費用區域 */
.TokenUsageSummary_totalCostSection__YPe0F {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 1.5rem;
}

.TokenUsageSummary_totalCostHeader__-VW4Z {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #f59e0b;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.TokenUsageSummary_totalCostValues__QcbJN {
  display: flex;
  align-items: baseline;
}

.TokenUsageSummary_mainValue__CiUhC {
  display: flex;
  align-items: baseline;
}

.TokenUsageSummary_mainValue__CiUhC .TokenUsageSummary_amount__DqpPZ {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
}

/* 分項費用 */
.TokenUsageSummary_costBreakdown__U21NK {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: center;
}

.TokenUsageSummary_breakdownItem__T0bKm {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.TokenUsageSummary_breakdownIcon__wDlNf {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 12px;
}

.TokenUsageSummary_breakdownInfo__A7pHP {
  flex: 1 1;
}

.TokenUsageSummary_breakdownLabel__fYneq {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.TokenUsageSummary_breakdownValue__PbfzU {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
}

.TokenUsageSummary_breakdownDivider__i\+amQ {
  width: 1px;
  height: 50px;
  background: #dee2e6;
}

/* Token 統計 - 簡潔顯示 */
.TokenUsageSummary_tokenStats__Pr5zA {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.TokenUsageSummary_tokenItem__CPVkD {
  font-weight: 500;
}

.TokenUsageSummary_tokenDivider__UcznG {
  color: #dee2e6;
  font-weight: 300;
}

/* 匯率提示 */
.TokenUsageSummary_exchangeRateHint__dEqs9 {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #dee2e6;
  font-size: 0.85rem;
  color: #6c757d;
  text-align: right;
  font-style: italic;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .TokenUsageSummary_totalCostValues__QcbJN {
    flex-direction: column;
    gap: 0.5rem;
  }

  .TokenUsageSummary_usdValue__bomeN .TokenUsageSummary_amount__DqpPZ {
    font-size: 2rem;
  }

  .TokenUsageSummary_twdValue__Oecre .TokenUsageSummary_amount__DqpPZ {
    font-size: 1.5rem;
  }

  .TokenUsageSummary_costBreakdown__U21NK {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .TokenUsageSummary_breakdownDivider__i\+amQ {
    display: none;
  }
}

/* 排行榜網格 */
.TokenUsageSummary_rankingsGrid__MREmj {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.TokenUsageSummary_rankingCard__Og2jD {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 2rem;
  border: 2px solid #e9ecef;
}

.TokenUsageSummary_rankingHeader__JubQc {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #dee2e6;
  color: #495057;
}

.TokenUsageSummary_rankingHeader__JubQc h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.TokenUsageSummary_rankingList__v3meh {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.TokenUsageSummary_rankingItem__5w4nl {
  background: white;
  padding: 1rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s;
}

.TokenUsageSummary_rankingItem__5w4nl:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.TokenUsageSummary_rankingRank__w5fHU {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f59e0b;
  min-width: 50px;
  text-align: center;
}

.TokenUsageSummary_rankingItem__5w4nl:nth-child(1) .TokenUsageSummary_rankingRank__w5fHU {
  color: #ffd700;
}

.TokenUsageSummary_rankingItem__5w4nl:nth-child(2) .TokenUsageSummary_rankingRank__w5fHU {
  color: #c0c0c0;
}

.TokenUsageSummary_rankingItem__5w4nl:nth-child(3) .TokenUsageSummary_rankingRank__w5fHU {
  color: #cd7f32;
}

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

.TokenUsageSummary_rankingName__\+Z2La {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TokenUsageSummary_rankingStats__S1o7A {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.TokenUsageSummary_rankingCount__PfCKH {
  color: #6c757d;
}

.TokenUsageSummary_rankingCost__pDX9E {
  color: #28a745;
  font-weight: 600;
}

.TokenUsageSummary_rankingAvg__TCFHO {
  color: #6c757d;
  font-size: 0.85rem;
}

.TokenUsageSummary_rankingBar__hQM2B {
  width: 120px;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.TokenUsageSummary_rankingBarFill__KxYcH {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 進度條 */
.TokenUsageSummary_progressContainer__V36mx {
  background: #f8f9fa;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.TokenUsageSummary_progressBar__wbTiV {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.TokenUsageSummary_progressFill__NMc3I {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.TokenUsageSummary_progressText__yzgaU {
  font-size: 0.9rem;
  color: #495057;
  text-align: center;
  font-weight: 500;
}

/* 空狀態 */
.TokenUsageSummary_emptyState__iJZCc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #adb5bd;
}

.TokenUsageSummary_emptyState__iJZCc svg {
  margin-bottom: 1rem;
  color: #dee2e6;
}

.TokenUsageSummary_emptyState__iJZCc p {
  font-size: 1.1rem;
  margin: 0;
}

/* Token Usage 詳細檢視樣式 */

.TokenUsageDetailView_container__3mRyQ {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

/* Header */
.TokenUsageDetailView_header__LE7M1 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e9ecef;
}

.TokenUsageDetailView_backButton__GhbmE {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #e9ecef;
  color: #495057;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.TokenUsageDetailView_backButton__GhbmE:hover {
  background: #dee2e6;
  transform: translateX(-2px);
}

.TokenUsageDetailView_title__P5XLe {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  flex: 1 1;
}

/* 資訊卡片 */
.TokenUsageDetailView_infoCards__1Ptxk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin-bottom: 2rem;
}

.TokenUsageDetailView_infoCard__HWMrU {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.TokenUsageDetailView_infoCard__HWMrU:nth-child(2) {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.TokenUsageDetailView_infoCard__HWMrU:nth-child(3) {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.TokenUsageDetailView_infoCard__HWMrU:nth-child(4) {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.TokenUsageDetailView_cardIcon__jMvbm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

.TokenUsageDetailView_cardContent__kNrJh {
  flex: 1 1;
}

.TokenUsageDetailView_cardLabel__mr\+0w {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.TokenUsageDetailView_cardValue__Wfl\+b {
  font-size: 1.2rem;
  font-weight: 600;
  word-break: break-all;
}

/* Section */
.TokenUsageDetailView_section__g0c9Y {
  margin-bottom: 2rem;
}

.TokenUsageDetailView_sectionTitle__pXFST {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9ecef;
}

/* Token 使用量網格 */
.TokenUsageDetailView_tokenUsageGrid__lfVBf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}

.TokenUsageDetailView_tokenUsageItem__8xs-O {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  border: 2px solid #e9ecef;
  text-align: center;
  transition: all 0.2s;
}

.TokenUsageDetailView_tokenUsageItem__8xs-O:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: #4285f4;
}

.TokenUsageDetailView_tokenUsageItem__8xs-O:nth-child(3) {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
  border-color: #00acc1;
}

.TokenUsageDetailView_tokenLabel__BmzxL {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.TokenUsageDetailView_tokenValue__w1cps {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.TokenUsageDetailView_tokenCost__VLYUk {
  font-size: 1.1rem;
  font-weight: 600;
  color: #28a745;
}

.TokenUsageDetailView_tokenMeta__3GLmn {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.TokenUsageDetailView_metaItem__KF-Pr {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.TokenUsageDetailView_metaItemHighlight__S-4HX {
  font-size: 0.9rem;
  color: #28a745;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
  margin-top: 0.25rem;
}

/* 內容框 */
.TokenUsageDetailView_contentBox__mrOlm {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
}

.TokenUsageDetailView_contentText__xvAPI {
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #212529;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Footer */
.TokenUsageDetailView_footer__qgZFN {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
  text-align: center;
}

.TokenUsageDetailView_logId__6vkZ2 {
  font-family: monospace;
  font-size: 0.9rem;
  color: #6c757d;
}

/* LLM Token Usage Viewer 主頁面樣式 */

.LLMTokenUsageViewer_pageContainer__OwDtH {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.LLMTokenUsageViewer_header__EsOw7 {
  text-align: center;
  margin-bottom: 2rem;
}

.LLMTokenUsageViewer_header__EsOw7 h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.LLMTokenUsageViewer_subtitle__d9vw6 {
  font-size: 1.1rem;
  color: #7f8c8d;
  margin: 0;
}

/* Tab 切換 */
.LLMTokenUsageViewer_tabContainer__a8LyS {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
  background: white;
  padding: 0.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.LLMTokenUsageViewer_tab__7Gj3e {
  flex: 1 1;
  padding: 1rem 2rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.2s;
}

.LLMTokenUsageViewer_tab__7Gj3e:hover {
  background: #f8f9fa;
  color: #495057;
}

.LLMTokenUsageViewer_activeTab__K6tSw {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.LLMTokenUsageViewer_activeTab__K6tSw:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: white;
}

.ImageGenerateFieldWithPrompt_buttonGroup__8ebdf {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.ImageGenerateFieldWithPrompt_generateButton__N5XaN {
  padding: 12px 24px;
  background: #9c27b0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerateFieldWithPrompt_generateButton__N5XaN:hover:not(:disabled) {
  background: #7b1fa2;
}

.ImageGenerateFieldWithPrompt_generateButton__N5XaN:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ImageGenerateFieldWithPrompt_uploadButton__fr94Q {
  padding: 12px 24px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerateFieldWithPrompt_uploadButton__fr94Q:hover:not(:disabled) {
  background: #5a6268;
}

.ImageGenerateFieldWithPrompt_uploadButton__fr94Q:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ImageGenerateFieldWithPrompt_downloadButton__u9VcP {
  padding: 12px 24px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerateFieldWithPrompt_downloadButton__u9VcP:hover {
  background: #5a6268;
}

.ImageGenerateFieldWithPrompt_referenceButton__\+u5YJ {
  padding: 12px 24px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: 8px;
}

.ImageGenerateFieldWithPrompt_referenceButton__\+u5YJ:hover {
  background: #5a6268;
}

.ImageGenerateFieldWithPrompt_removeButton__NSKUE {
  padding: 12px 24px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerateFieldWithPrompt_removeButton__NSKUE:hover {
  background: #c82333;
}

.ImageGenerateFieldWithPrompt_promptSelect__N3HXQ {
  padding: 12px 24px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s ease;
  margin-right: 8px;
}

.ImageGenerateFieldWithPrompt_promptSelect__N3HXQ:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.ImageGenerateFieldWithPrompt_referenceInfo__7Amwj {
  margin-right: 8px;
  font-size: 12px;
  color: #666;
}

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

.ImageGenerateFieldWithPrompt_checkboxLabel__sg4PA {
  font-size: 14px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.ImageGenerateFieldWithPrompt_checkboxLabel__sg4PA input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.ImageGenerateFieldWithPrompt_checkboxHint__oZ3NI {
  font-size: 12px;
  color: #666;
  margin-left: 26px;
  line-height: 1.4;
}

.ImageGenerateFieldWithPrompt_tokenInfo__NpbxB {
  margin-top: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid #e9ecef;
}

.ImageGenerateFieldWithPrompt_tokenInfo__NpbxB div {
  margin: 4px 0;
}

.ImageGenerateFieldWithPrompt_tokenInfo__NpbxB strong {
  font-weight: 600;
  color: #333;
}

.ImageGenerateFieldWithPrompt_valueGroup__8S1\+y {
  margin-top: 8px;
}


.ImageGenerationTestField_testSection__TAXrD {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-sizing: border-box;
}

.ImageGenerationTestField_sectionTitle__dd7YZ {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}

.ImageGenerationTestField_description__IVBZb {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

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

.ImageGenerationTestField_label__zgjW6 {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.ImageGenerationTestField_textArea__RXhu\+ {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ImageGenerationTestField_textArea__RXhu\+:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.ImageGenerationTestField_checkboxGroup__\+ob1U {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ImageGenerationTestField_checkboxLabel__Z9QsV {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}

.ImageGenerationTestField_checkboxLabel__Z9QsV input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.ImageGenerationTestField_checkboxHint__40sB3 {
  font-size: 12px;
  color: #666;
  margin-left: 26px;
  line-height: 1.4;
}

.ImageGenerationTestField_buttonGroup__r\+rC0 {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ImageGenerationTestField_generateButton__C8Qsj {
  padding: 12px 24px;
  background: #9c27b0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerationTestField_generateButton__C8Qsj:hover:not(:disabled) {
  background: #7b1fa2;
}

.ImageGenerationTestField_generateButton__C8Qsj:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ImageGenerationTestField_downloadButton__u7V8S {
  padding: 12px 24px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerationTestField_downloadButton__u7V8S:hover {
  background: #5a6268;
}

.ImageGenerationTestField_previewSection__no6MU {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.ImageGenerationTestField_previewTitle__tM1pY {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

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

.ImageGenerationTestField_previewImage__oKndK {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
}

.ImageGenerationTestField_errorMessage__MKJGK {
  padding: 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  color: #721c24;
  font-size: 14px;
}


.PromptEditor_container__yl4nC {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.PromptEditor_header__WwLHw {
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
}

.PromptEditor_title__UlzI6 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.PromptEditor_description__GdPsX {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.PromptEditor_content__5r1ds {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.PromptEditor_loadingMessage__rF16d {
  padding: 20px;
  text-align: center;
  color: #666;
}

.PromptEditor_promptDisplay__W\+I-y {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.PromptEditor_promptLabel__2Tsup {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.PromptEditor_promptText__7-IqY {
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.PromptEditor_emptyText__ybdLk {
  color: #999;
  font-style: italic;
}

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

.PromptEditor_label__4IKAU {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.PromptEditor_textInput__CeZ8b {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.PromptEditor_textInput__CeZ8b:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.PromptEditor_textArea__50fHL {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  font-family: "Courier New", monospace;
  resize: vertical;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  line-height: 1.6;
}

.PromptEditor_textArea__50fHL:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.PromptEditor_buttonGroup__dcafP {
  display: flex;
  gap: 12px;
  align-items: center;
}

.PromptEditor_editButton__W22fX,
.PromptEditor_saveButton__lTW6D {
  padding: 10px 20px;
  background: #9c27b0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.PromptEditor_editButton__W22fX:hover,
.PromptEditor_saveButton__lTW6D:hover:not(:disabled) {
  background: #7b1fa2;
}

.PromptEditor_saveButton__lTW6D:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.PromptEditor_cancelButton__RPsVh {
  padding: 10px 20px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.PromptEditor_cancelButton__RPsVh:hover:not(:disabled) {
  background: #5a6268;
}

.PromptEditor_cancelButton__RPsVh:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.PromptEditor_errorMessage__asVVH {
  padding: 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  color: #721c24;
  font-size: 14px;
}


.ImageGenerationConfigEditor_container__SGXjt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-sizing: border-box;
}

.ImageGenerationConfigEditor_header__Vubfw {
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.ImageGenerationConfigEditor_title__bHyUD {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.ImageGenerationConfigEditor_description__Zh2xQ {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.ImageGenerationConfigEditor_content__p8fF7 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ImageGenerationConfigEditor_loadingMessage__PPo19 {
  padding: 40px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.ImageGenerationConfigEditor_configList__xatmv {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ImageGenerationConfigEditor_configItem__gniU3 {
  padding: 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
}

.ImageGenerationConfigEditor_configHeader__Cv6BT {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ImageGenerationConfigEditor_configKey__nDkLC {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  font-family: "Courier New", monospace;
}

.ImageGenerationConfigEditor_emptyBadge__MZhz1 {
  padding: 4px 8px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  color: #856404;
  font-size: 12px;
  font-weight: 500;
}

.ImageGenerationConfigEditor_configDescription__eSF9C {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.ImageGenerationConfigEditor_configValue__OcX5g {
  padding: 12px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.ImageGenerationConfigEditor_emptyValue__-TIYi {
  color: #999;
  font-style: italic;
}

.ImageGenerationConfigEditor_valueCode__3gSSu {
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #333;
  background: transparent;
}

.ImageGenerationConfigEditor_avatarList__xebJe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ImageGenerationConfigEditor_avatarId__Qu0m- {
  padding: 4px 8px;
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #495057;
}

.ImageGenerationConfigEditor_configForm__d8lGh {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.ImageGenerationConfigEditor_label__Z9M2X {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ImageGenerationConfigEditor_labelKey__zbMZb {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  font-family: "Courier New", monospace;
}

.ImageGenerationConfigEditor_labelDescription__mqvbV {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.ImageGenerationConfigEditor_textInput__Ja6ez {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: "Courier New", monospace;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.ImageGenerationConfigEditor_textInput__Ja6ez:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.ImageGenerationConfigEditor_selectInput__xwdRh {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
}

.ImageGenerationConfigEditor_selectInput__xwdRh:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1);
}

.ImageGenerationConfigEditor_hint__Q349L {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin-top: -4px;
}

.ImageGenerationConfigEditor_buttonGroup__V8XkC {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #e9ecef;
}

.ImageGenerationConfigEditor_editButton__k6CLB,
.ImageGenerationConfigEditor_saveButton__JUeXD {
  padding: 12px 24px;
  background: #9c27b0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerationConfigEditor_editButton__k6CLB:hover,
.ImageGenerationConfigEditor_saveButton__JUeXD:hover:not(:disabled) {
  background: #7b1fa2;
}

.ImageGenerationConfigEditor_saveButton__JUeXD:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ImageGenerationConfigEditor_cancelButton__1C7MV {
  padding: 12px 24px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerationConfigEditor_cancelButton__1C7MV:hover:not(:disabled) {
  background: #5a6268;
}

.ImageGenerationConfigEditor_cancelButton__1C7MV:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ImageGenerationConfigEditor_errorMessage__p2ZEb {
  padding: 12px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  color: #721c24;
  font-size: 14px;
}

.ImageGenerationSettings_container__wBvm0 {
  width: 100%;
  max-width: 1200px;
  min-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.ImageGenerationSettings_header__v9\+Go {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.ImageGenerationSettings_title__UgO0U {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.ImageGenerationSettings_description__c\+m9Z {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.ImageGenerationSettings_tabs__213Ca {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 2px solid #e9ecef;
}

.ImageGenerationSettings_tab__-mJKT {
  padding: 12px 24px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}

.ImageGenerationSettings_tab__-mJKT:hover {
  color: #9c27b0;
}

.ImageGenerationSettings_activeTab__LTOLP {
  color: #9c27b0;
  border-bottom-color: #9c27b0;
}

.ImageGenerationSettings_content__UtAeT {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-height: 400px;
  box-sizing: border-box;
}

.ImageGenerationSettings_section__cmZJI {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ImageGenerationSettings_styleTypeSection__Ga6V0 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.ImageGenerationSettings_styleTypeSection__Ga6V0:last-child {
  margin-bottom: 0;
}

.ImageGenerationSettings_styleTypeTitle__OftSO {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

.ImageGenerationSettings_styleTypeSelector__iiNBK {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ImageGenerationSettings_selectorLabel__wmls5 {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.ImageGenerationSettings_selector__IRRRC {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.ImageGenerationSettings_selector__IRRRC:hover {
  border-color: #9c27b0;
}

.ImageGenerationSettings_selector__IRRRC:focus {
  outline: none;
  border-color: #9c27b0;
  box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

.ImageGenerationSettings_sectionTitle__VXoQL {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9ecef;
}

.ImageGenerationSettings_sectionDescription__cFdKQ {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.ImageGenerationSettings_loadingMessage__LR5Sa,
.ImageGenerationSettings_noImageMessage__mL3\+m {
  padding: 40px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 6px;
  border: 2px dashed #dee2e6;
  color: #666;
}

.ImageGenerationSettings_noImageMessage__mL3\+m .ImageGenerationSettings_hint__pPahZ {
  margin-top: 8px;
  font-size: 13px;
  color: #999;
}

.ImageGenerationSettings_imagePreview__CYNOt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.ImageGenerationSettings_previewImage__-4KYu {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  background: #fff;
  margin: 0 auto;
}

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

.ImageGenerationSettings_imageLabel__zhcBL {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.ImageGenerationSettings_imageHint__XR0KC {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.ImageGenerationSettings_uploadControls__oTOXp {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ImageGenerationSettings_uploadButton__Otvv3 {
  padding: 12px 24px;
  background: #9c27b0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerationSettings_uploadButton__Otvv3:hover:not(:disabled) {
  background: #7b1fa2;
}

.ImageGenerationSettings_uploadButton__Otvv3:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.ImageGenerationSettings_clearButton__FW-zY {
  padding: 12px 24px;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ImageGenerationSettings_clearButton__FW-zY:hover {
  background: #5a6268;
}

.ImageGenerationSettings_successMessage__UdREL {
  padding: 16px;
  background: #d4edda;
  border: 1px solid #c3e6cb;
  border-radius: 6px;
  color: #155724;
}

.ImageGenerationSettings_errorMessage__OgWs3 {
  padding: 16px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 6px;
  color: #721c24;
}

.ImageGenerationSettings_statusTitle__OB289 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
}

.ImageGenerationSettings_apiResponse__VHe8f {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(21, 87, 36, 0.2);
}

.ImageGenerationSettings_apiResponse__VHe8f p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.5;
}

.ImageGenerationSettings_apiResponse__VHe8f strong {
  font-weight: 600;
}

.ImageGenerationSettings_promptsSection__V7vcZ {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.ImageGenerationSettings_configSection__oHCUM {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.ImageGenerationSettings_testSection__PZsBR {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}


/* GameCreationWizard.module.css */

/* 全螢幕覆蓋容器 */
.GameCreationWizard_wizardFullscreen__QDP9u {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f9fd;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Wizard 頂部導航欄 */
.GameCreationWizard_wizardTopBar__\+8kTZ {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.GameCreationWizard_wizardTopBarLeft__dFiZ8 {
  display: flex;
  align-items: center;
  gap: 16px;
}

.GameCreationWizard_wizardTopBarTitle__tglzj {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222222;
  margin: 0;
}

/* 繼承 dashboard.css 的變數與風格 */
.GameCreationWizard_wizardPageContainer__DWw9Y {
  /* 這裡使用與 dashboard.css 一致的變數 */
  --color-bg: #f7f9fd;
  --color-white: #ffffff;
  --color-text: #222222;
  --color-text-light: #555555;
  --color-border: #cccccc;
  --color-shadow: rgba(0, 0, 0, 0.1);
  
  /* 按鈕藍色 - 假設為標準 Dashboard 藍 */
  --color-btn-primary: #4fa2ef; 
  --color-btn-hover: #4090db;

  min-height: calc(100vh - 70px); /* 減去 topBar 高度 */
  background-color: var(--color-bg);
  padding: 40px 60px; /* 增加左右 padding */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text);
  max-width: 1600px; /* 增加最大寬度 */
  margin: 0 auto; /* 置中 */
  width: 100%;
}

/* 模組選擇器容器 */
.GameCreationWizard_moduleSelectorContainer__5kxu1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
}

.GameCreationWizard_moduleSelectorTitle__bt8Tg {
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--color-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

/* 標題區塊：陰影和圓角 */
.GameCreationWizard_wizardHeader__1KGN1 {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--color-shadow);
  padding: 20px; /* 減少 padding */
  margin-bottom: 24px; /* 減少 margin-bottom */
  text-align: center;
}

.GameCreationWizard_stepTitle__micZd {
  font-size: 1.5rem; /* 縮小標題 */
  color: var(--color-text);
  margin: 12px 0 0 0; /* 減少上間距 */
  font-weight: 700;
}

/* 卡片容器 */
.GameCreationWizard_wizardContent__bn2ry {
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--color-shadow);
  padding: 40px;
  max-width: 1200px; /* 增加寬度，讓選項卡片有更多空間 */
  margin: 0 auto;
  width: 100%; /* 確保在小螢幕上也能正常顯示 */
}

/* Step 容器 */
.GameCreationWizard_stepContainer__43AiM {
  padding: 20px 0;
}

/* Step 內容排版 */
.GameCreationWizard_stepContent__Jk59\+ {
  max-width: 100%;
  margin: 0 auto;
}

.GameCreationWizard_sectionHeader__eOOF8 {
  margin-bottom: 24px;
  text-align: center;
}

.GameCreationWizard_sectionTitle__6\+8qc {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* 選擇資訊 */
.GameCreationWizard_selectionInfo__xMTjq {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* 按鈕：藍色圓角矩形 */
.GameCreationWizard_wizardBtn__4F-6\+ {
  padding: 12px 32px;
  border-radius: 8px; /* 圓角矩形 */
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--color-text-light);
  transition: all 0.3s ease;
}

.GameCreationWizard_wizardBtn__4F-6\+:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.GameCreationWizard_wizardBtnPrimary__\+Q-pL {
  background-color: var(--color-btn-primary);
  color: var(--color-white);
}

.GameCreationWizard_wizardBtnPrimary__\+Q-pL:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.3);
}

.GameCreationWizard_wizardBtn__4F-6\+:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 選項卡片 */
.GameCreationWizard_optionCard__VuNdq {
  padding: 20px;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px; /* 確保卡片有一致的高度 */
}

.GameCreationWizard_optionCard__VuNdq:hover {
  border-color: var(--color-btn-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.GameCreationWizard_optionCardSelected__ns3k\+ {
  border-color: var(--color-btn-primary);
  background-color: #f0f7ff; /* 淺藍底色 */
  box-shadow: 0 0 0 2px var(--color-btn-primary);
}

/* 輸入框：淺灰底色 */
.GameCreationWizard_contentTextarea__e0jnv {
  width: 100%;
  min-height: 300px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  font-family: inherit;
  background-color: #f5f5f5; /* 淺灰底色 */
  color: var(--color-text);
  transition: all 0.3s ease;
}

.GameCreationWizard_contentTextarea__e0jnv:focus {
  outline: none;
  border-color: var(--color-btn-primary);
  background-color: var(--color-white);
  box-shadow: 0 0 0 3px rgba(79, 162, 239, 0.2);
}

/* 網格佈局 */
.GameCreationWizard_optionsGrid__zg2WG {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 使用 auto-fit 並增加最小寬度 */
  grid-gap: 24px;
  gap: 24px;
  max-width: 100%; /* 確保不超出容器 */
}

/* 提示訊息 - 加強視覺效果 */
.GameCreationWizard_infoBadge__0u8aA {
  background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
  color: #166534;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  border: 1px solid #86efac;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.GameCreationWizard_helperText__xgLxp {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 16px;
  text-align: center;
}

.GameCreationWizard_wizardFooter__9CrWP {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eeeeee;
}

/* 結果容器 */
.GameCreationWizard_resultContainer__pYU20 {
  text-align: center;
  padding: 60px 40px;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--color-shadow);
}

.GameCreationWizard_successIcon__GMSMp {
  font-size: 5rem;
  margin-bottom: 20px;
}

.GameCreationWizard_resultTitle__rsuHw {
  font-size: 2rem;
  color: var(--color-text);
  margin: 0 0 16px 0;
  font-weight: 700;
}

.GameCreationWizard_buttonGroup__WcLk6 {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 32px;
}

/* 進度條 */
.GameCreationWizard_progressBar__5cEuQ {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px; /* 減少底部間距 */
}

.GameCreationWizard_stepIndicator__ZTMv3 {
  width: 32px; /* 縮小尺寸 */
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid #e0e0e0;
  color: #9e9e9e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem; /* 縮小字體 */
  transition: all 0.3s ease;
}

.GameCreationWizard_stepIndicatorActive__NW3mM {
  border-color: var(--color-btn-primary);
  color: var(--color-btn-primary);
  background-color: var(--color-white);
  transform: scale(1.05); /* 輕微放大 */
}

.GameCreationWizard_stepIndicatorCompleted__Z1c-G {
  background-color: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
  color: var(--color-white);
}

.GameCreationWizard_progressLine__S2De7 {
  flex: 1 1;
  height: 2px;
  background-color: #e0e0e0;
  margin: 0 8px; /* 減少間距 */
  max-width: 40px; /* 縮短連接線 */
}

/* 輸入框樣式 - 新增 */
.GameCreationWizard_textarea__QR6oh {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  min-height: 300px; /* 增加高度 */
  font-family: inherit;
}

.GameCreationWizard_textarea__QR6oh:focus {
  background-color: var(--color-white);
  border-color: var(--color-btn-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 162, 239, 0.1);
}

/* 生成中容器 */
.GameCreationWizard_generatingContainer__RcAWT {
  text-align: center;
  padding: 60px 40px;
}

/* Spinner 動畫 */
.GameCreationWizard_spinner__PYkYO {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(79, 162, 239, 0.2);
  border-top-color: var(--color-btn-primary);
  border-radius: 50%;
  animation: GameCreationWizard_spin__xKqZW 1s linear infinite;
  margin: 0 auto 24px;
}

@keyframes GameCreationWizard_spin__xKqZW {
  to {
    transform: rotate(360deg);
  }
}

/* 題目數量控制區域 */
.GameCreationWizard_countControlContainer__kRgOX {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background-color: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.GameCreationWizard_countDisplayBox__RCCIz {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
  border-radius: 12px;
  border: 2px solid var(--color-btn-primary);
}

.GameCreationWizard_countNumber__EBkQn {
  font-size: 4rem;
  font-weight: 700;
  color: var(--color-btn-primary);
  line-height: 1;
  margin-bottom: 8px;
}

.GameCreationWizard_countLabel__uOMyK {
  font-size: 1.2rem;
  color: var(--color-text);
  font-weight: 600;
}

/* 滑桿輸入組 */
.GameCreationWizard_countInputGroup__G85HR {
  margin-bottom: 32px;
}

.GameCreationWizard_countInputLabel__HCMH3 {
  display: block;
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: 16px;
}

.GameCreationWizard_countSlider__iF4GV {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.GameCreationWizard_countSlider__iF4GV::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-btn-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 162, 239, 0.4);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.GameCreationWizard_countSlider__iF4GV::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.6);
}

.GameCreationWizard_countSlider__iF4GV::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-btn-primary);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(79, 162, 239, 0.4);
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.GameCreationWizard_countSlider__iF4GV::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.6);
}

.GameCreationWizard_sliderRange__CgLGB {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* 直接輸入區 */
.GameCreationWizard_countDirectInput__bvd72 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.GameCreationWizard_inputLabel__uG\+PY {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
}

.GameCreationWizard_numberInput__5Xfei {
  width: 100px;
  padding: 10px 16px;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.GameCreationWizard_numberInput__5Xfei:focus {
  outline: none;
  border-color: var(--color-btn-primary);
  box-shadow: 0 0 0 3px rgba(79, 162, 239, 0.2);
}

.GameCreationWizard_numberInput__5Xfei::-webkit-inner-spin-button,
.GameCreationWizard_numberInput__5Xfei::-webkit-outer-spin-button {
  opacity: 1;
  height: 40px;
}

.GameCreationWizard_inputSuffix__5nYRj {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
}

/* 內容引導區 */
.GameCreationWizard_contentGuideSection__2wPqt {
  margin-bottom: 24px;
}

.GameCreationWizard_guideTitle__YUOUF {
  font-size: 1.3rem;
  color: var(--color-text);
  margin-bottom: 16px;
  font-weight: 700;
}

.GameCreationWizard_guideBox__YR0m\+ {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
  border: 1px solid #d0e7ff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.GameCreationWizard_guideText__kHiow {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 16px;
  line-height: 1.6;
}

.GameCreationWizard_guideTips__51WfQ {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.GameCreationWizard_tipItem__czOdj {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.GameCreationWizard_tipIcon__RTZbd {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.GameCreationWizard_tipText__Ypza3 {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* 內容統計 */
.GameCreationWizard_contentStats__6gkNX {
  margin-top: 12px;
  text-align: right;
}

.GameCreationWizard_statsText__eaFQ2 {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.GameCreationWizard_statsWarning__DWZaF {
  color: #f59e0b;
  font-weight: 600;
}

.GameCreationWizard_statsSuccess__d52jV {
  color: #10b981;
  font-weight: 600;
}

/* 生成中頁面優化 */
.GameCreationWizard_generatingIcon__CdmYD {
  font-size: 5rem;
  margin-bottom: 20px;
  animation: GameCreationWizard_pulse__-pseY 1.5s ease-in-out infinite;
}

@keyframes GameCreationWizard_pulse__-pseY {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.GameCreationWizard_generatingTitle__1MXHP {
  font-size: 1.8rem;
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: 12px;
}

.GameCreationWizard_generatingStage__rsWFJ {
  font-size: 1.1rem;
  color: var(--color-btn-primary);
  font-weight: 600;
  margin-bottom: 32px;
  min-height: 30px;
}

.GameCreationWizard_progressBarContainer__Pzllj {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 16px;
}

.GameCreationWizard_progressBarBackground__o1T7k {
  width: 100%;
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.GameCreationWizard_progressBarFill__OnGBy {
  height: 100%;
  background: linear-gradient(90deg, #4fa2ef 0%, #3b8ed9 100%);
  transition: width 0.3s ease;
  border-radius: 6px;
}

.GameCreationWizard_progressText__kKxxY {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* 圖片生成進度 */
.GameCreationWizard_imageProgressContainer__yHO6I {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
  border-radius: 12px;
  border: 1px solid #d8b4fe;
}

.GameCreationWizard_imageProgressIcon__gm\+DP {
  font-size: 1.5rem;
}

.GameCreationWizard_imageProgressText__JDID7 {
  font-size: 1rem;
  font-weight: 600;
  color: #6b21a8;
}

.GameCreationWizard_imageType__05-mv {
  font-size: 0.9rem;
  font-weight: 500;
  color: #7c3aed;
  margin-left: 4px;
}

/* 題目數量資訊 */
.GameCreationWizard_questionCountInfo__K-19\+ {
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 8px;
  border: 1px solid #93c5fd;
}

/* 時間顯示 */
.GameCreationWizard_timeDisplay__HZpmw {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.GameCreationWizard_timeIcon__AhnOJ {
  font-size: 1.3rem;
}

.GameCreationWizard_timeText__9UcqD {
  font-size: 1rem;
}

/* 完成勾選標記 */
.GameCreationWizard_completeCheckmark__k5Xu9 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #10b981;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin: 20px auto;
  animation: GameCreationWizard_checkmarkPop__2H6al 0.5s ease-out;
}

@keyframes GameCreationWizard_checkmarkPop__2H6al {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 取消按鈕 */
.GameCreationWizard_cancelButton__lcSQH {
  margin-top: 24px;
  padding: 10px 24px;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.GameCreationWizard_cancelButton__lcSQH:hover {
  background-color: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 錯誤相關樣式 */
.GameCreationWizard_errorDetails__8RopJ {
  margin: 20px 0;
  padding: 16px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  text-align: left;
}

.GameCreationWizard_errorDetails__8RopJ h4 {
  margin: 0 0 8px 0;
  font-size: 1rem;
  color: #991b1b;
}

.GameCreationWizard_errorText__oyeFi {
  margin: 0;
  padding: 12px;
  background-color: #fee2e2;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #7f1d1d;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
}

.GameCreationWizard_errorActions__jcvjO {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.GameCreationWizard_backButton__pNnMw {
  padding: 10px 24px;
  background-color: #6b7280;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.GameCreationWizard_backButton__pNnMw:hover {
  background-color: #4b5563;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.GameCreationWizard_retryButton__6Eu\+0 {
  padding: 10px 24px;
  background-color: var(--color-btn-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.GameCreationWizard_retryButton__6Eu\+0:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.3);
}

/* 提示文字 */
.GameCreationWizard_countdownHint__7dOph {
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 16px 0;
  font-weight: 500;
}

.GameCreationWizard_countdownText__KRM-O {
  font-size: 1rem;
  color: var(--color-text-light);
  margin-bottom: 20px;
  font-weight: 500;
}

/* 結果頁面樣式 */

/* 結果頁進度條 */
.GameCreationWizard_resultProgressBar__Tx4qc {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  padding: 20px;
}

.GameCreationWizard_resultStepItem__8bH1N {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.GameCreationWizard_resultStepCircle__ZjiGG {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-btn-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.GameCreationWizard_resultStepLabel__ewQCe {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 600;
}

.GameCreationWizard_resultProgressLine__m\+jy9 {
  flex: 1 1;
  height: 2px;
  background-color: var(--color-btn-primary);
  margin: 0 16px;
  max-width: 100px;
}

.GameCreationWizard_resultMainTitle__OVJwn {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 24px;
}

/* 遊戲連結卡片 */
.GameCreationWizard_gameLinkCard__IsjVY {
  background-color: #f0f7ff;
  border: 2px solid var(--color-btn-primary);
  border-radius: 12px;
  padding: 20px;
  margin: 32px 0;
  max-width: 600px;
  width: 100%;
}

.GameCreationWizard_gameLinkHeader__A6I\+t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.GameCreationWizard_gameLinkIcon__DPS9H {
  color: var(--color-btn-primary);
}

.GameCreationWizard_gameLinkLabel__s\+ZNM {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
}

.GameCreationWizard_gameLinkInput__91Mv2 {
  display: flex;
  gap: 8px;
}

.GameCreationWizard_linkInputField__UpRcf {
  flex: 1 1;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--color-text);
  background-color: var(--color-white);
}

.GameCreationWizard_copyButton__JR6RS {
  padding: 10px 20px;
  background-color: var(--color-btn-primary);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.GameCreationWizard_copyButton__JR6RS:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.3);
}

/* 主要操作按鈕 */
.GameCreationWizard_mainActions__X-I6j {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}

.GameCreationWizard_actionButton__rXr9K {
  flex: 1 1;
  padding: 14px 28px;
  background-color: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.GameCreationWizard_actionButton__rXr9K:hover {
  border-color: var(--color-btn-primary);
  color: var(--color-btn-primary);
  background-color: #f0f7ff;
  transform: translateY(-2px);
}

.GameCreationWizard_actionButtonPrimary__VHP8r {
  flex: 1 1;
  padding: 14px 28px;
  background-color: var(--color-btn-primary);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.GameCreationWizard_actionButtonPrimary__VHP8r:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.3);
}

/* 編輯器收合區 */
.GameCreationWizard_editorCollapse__7pwXY {
  width: 100%;
  max-width: 900px;
  margin: 32px 0;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-white);
}

.GameCreationWizard_collapseToggle__8SPCw {
  width: 100%;
  padding: 16px 20px;
  background-color: #f9fafb;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color 0.3s ease;
}

.GameCreationWizard_collapseToggle__8SPCw:hover {
  background-color: #f0f7ff;
}

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

.GameCreationWizard_editorPanel__5A6D7 {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.GameCreationWizard_editorPanelHeader__5myQ5 {
  padding: 20px;
  background-color: #f9fafb;
  border-bottom: 1px solid var(--color-border);
}

.GameCreationWizard_editorPanelTitle__cO6UM {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px 0;
}

.GameCreationWizard_editorPanelDesc__oHPtx {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin: 0;
}

.GameCreationWizard_editorWrapper__0DTra {
  padding: 20px;
  max-height: 600px;
  overflow-y: auto;
}

/* 結果頁底部 */
.GameCreationWizard_resultFooter__wojaj {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e0e0e0;
}

.GameCreationWizard_footerTip__fT-eD {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 0;
  text-align: center;
  line-height: 1.6;
}

/* 錯誤相關樣式 */
.GameCreationWizard_errorDetails__8RopJ {
  margin-top: 24px;
  padding: 20px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  text-align: left;
}

.GameCreationWizard_errorDetails__8RopJ h4 {
  font-size: 1rem;
  color: #dc2626;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.GameCreationWizard_errorText__oyeFi {
  font-size: 0.85rem;
  color: #991b1b;
  font-family: 'Monaco', 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #fecaca;
  max-height: 200px;
  overflow-y: auto;
}

.GameCreationWizard_errorActions__jcvjO {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.GameCreationWizard_backButton__pNnMw {
  padding: 12px 32px;
  background-color: var(--color-btn-primary);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.GameCreationWizard_backButton__pNnMw:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 162, 239, 0.3);
}

.GameCreationWizard_retryButton__6Eu\+0 {
  padding: 12px 32px;
  background-color: #6b7280;
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.GameCreationWizard_retryButton__6Eu\+0:hover {
  background-color: #4b5563;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

/* 重試訊息 */
.GameCreationWizard_retryInfo__jzX51 {
  margin: 16px 0;
  padding: 12px 20px;
  background-color: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.95rem;
  font-weight: 600;
}

/* 進度文字 */
.GameCreationWizard_progressText__kKxxY {
  font-size: 1rem;
  color: var(--color-btn-primary);
  font-weight: 600;
  margin-bottom: 20px;
}

/* 完成勾選標記 */
.GameCreationWizard_completeCheckmark__k5Xu9 {
  font-size: 5rem;
  color: #10b981;
  animation: GameCreationWizard_checkmarkPop__2H6al 0.5s ease-out;
}

@keyframes GameCreationWizard_checkmarkPop__2H6al {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 遊戲資訊卡片 */
.GameCreationWizard_gameInfoCard__Yw2pn {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
  border: 2px solid var(--color-btn-primary);
  border-radius: 12px;
  padding: 24px;
  margin: 24px auto;
  max-width: 600px;
  text-align: center;
}

.GameCreationWizard_gameInfoTitle__0rZZ3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px 0;
}

.GameCreationWizard_gameInfoSubtitle__\+yNrS {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin: 0 0 16px 0;
}

.GameCreationWizard_gameInfoDetails__JUA0e {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
}

/* 載入狀態 */
.GameCreationWizard_loadingState__f86xg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 20px;
}

.GameCreationWizard_loadingState__f86xg p {
  font-size: 1.1rem;
  color: var(--color-text-light);
  margin: 0;
}

/* Avatar 相關樣式 */
.GameCreationWizard_avatarPreviewCard__ZP777 {
  background-color: var(--color-white);
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  margin: 32px auto;
  max-width: 700px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.GameCreationWizard_avatarPreviewHeader__gDZSB {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e5e7eb;
}

.GameCreationWizard_avatarIcon__PCVTH {
  width: 28px;
  height: 28px;
  color: var(--color-btn-primary);
}

.GameCreationWizard_avatarLabel__Pz8SV {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
}

.GameCreationWizard_avatarImageContainer__bwImb {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.GameCreationWizard_avatarImage__DVtcD {
  width: 100%;
  height: auto;
  display: block;
}

.GameCreationWizard_avatarInfo__439HD {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.GameCreationWizard_avatarInfoRow__M5Gs6 {
  display: flex;
  gap: 12px;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.GameCreationWizard_avatarInfoLabel__M2eYF {
  font-weight: 600;
  color: var(--color-text);
  min-width: 100px;
  flex-shrink: 0;
}

.GameCreationWizard_avatarInfoValue__qZfMs {
  color: var(--color-text-light);
  flex: 1 1;
  line-height: 1.6;
}

.GameCreationWizard_exampleSection__tGt3N {
  margin-top: 32px;
  padding: 24px;
  background-color: #f8f9fa;
  border-radius: 12px;
}

.GameCreationWizard_exampleTitle__fb-wN {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
}

.GameCreationWizard_exampleCard__8VGCt {
  background-color: var(--color-white);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.GameCreationWizard_exampleText__hrWaI {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
}

.GameCreationWizard_exampleText__hrWaI strong {
  color: var(--color-text);
}

/* 快速標籤區域 */
.GameCreationWizard_quickTagsSection__LTcwj {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.GameCreationWizard_quickTagsHeader__UDj5m {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.GameCreationWizard_quickTagsIcon__7zdxA {
  font-size: 1.3rem;
}

.GameCreationWizard_quickTagsTitle__8jQRH {
  font-size: 1.05rem;
}

.GameCreationWizard_quickTagsHint__zoL\+N {
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-weight: 400;
}

.GameCreationWizard_quickTagCategory__Bk1Yz {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.GameCreationWizard_quickTagCategory__Bk1Yz:last-child {
  margin-bottom: 0;
}

.GameCreationWizard_quickTagCategoryName__Ipfft {
  min-width: 60px;
  font-weight: 600;
  color: var(--color-text);
  padding-top: 6px;
  flex-shrink: 0;
}

.GameCreationWizard_quickTagList__3zPnn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1;
}

.GameCreationWizard_quickTag__OIxRP {
  background-color: var(--color-white);
  border: 2px solid #dee2e6;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.GameCreationWizard_quickTag__OIxRP:hover {
  background-color: var(--color-btn-primary);
  border-color: var(--color-btn-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(79, 162, 239, 0.3);
}

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

/* 字數統計改進 */
.GameCreationWizard_charCountNeutral__WQycD {
  color: #6c757d;
}

.GameCreationWizard_charCountWarning__u1P0T {
  color: #fd7e14;
}

.GameCreationWizard_charCountGood__whT54 {
  color: #20c997;
}

.GameCreationWizard_charCountExcellent__I0Okp {
  color: #28a745;
  font-weight: 600;
}

.GameCreationWizard_charCountNumber__KSM1K {
  font-weight: 700;
  margin-right: 8px;
}

.GameCreationWizard_charCountMessage__wZQjY {
  font-size: 0.95rem;
}

/* 範例收合區域 */
.GameCreationWizard_examplesCollapse__krWnB {
  margin-top: 24px;
}

.GameCreationWizard_examplesToggle__Gx-Cg {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.GameCreationWizard_examplesToggle__Gx-Cg:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.GameCreationWizard_examplesToggleIcon__WjG9d {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.GameCreationWizard_examplesContent__SXgQc {
  margin-top: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.GameCreationWizard_simpleExample__h\+myl {
  margin-bottom: 16px;
}

.GameCreationWizard_simpleExample__h\+myl:last-child {
  margin-bottom: 0;
}

.GameCreationWizard_exampleLabel__YR2rr {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-btn-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.GameCreationWizard_exampleLabel__YR2rr::before {
  content: "▸";
  font-size: 1rem;
}

.GameCreationWizard_exampleBox__vYjqb {
  background-color: var(--color-white);
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.6;
  cursor: pointer;
  transition: all 0.2s ease;
}

.GameCreationWizard_exampleBox__vYjqb:hover {
  border-color: var(--color-btn-primary);
  background-color: #f0f7ff;
  color: var(--color-text);
}

/* 圖片展示區域 */
.GameCreationWizard_imageGallerySection__j8WSn {
  width: 100%;
  margin: 32px 0;
  padding: 24px;
  background-color: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.GameCreationWizard_imageGallery__Vt1rJ {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-top: 20px;
}

.GameCreationWizard_imageCard__NZlef {
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.GameCreationWizard_imageCard__NZlef:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--color-btn-primary);
}

.GameCreationWizard_imageWrapper__1vQwe {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.GameCreationWizard_galleryImage__W9YBc {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.GameCreationWizard_imageCard__NZlef:hover .GameCreationWizard_galleryImage__W9YBc {
  transform: scale(1.05);
}

.GameCreationWizard_imageLabel__9lPHp {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.GameCreationWizard_imageBadge__xE8tO {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--color-btn-primary) 0%, #3b8ed9 100%);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: -webkit-fit-content;
  width: fit-content;
}

.GameCreationWizard_imageTitle__jyW74 {
  font-size: 0.9rem;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 倒數計時器樣式 */
.GameCreationWizard_countdownDisplay__oy-di {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 16px 0;
}

.GameCreationWizard_countdownNumber__jwcUk {
  font-size: 5rem;
  font-weight: 700;
  color: var(--color-btn-primary);
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  animation: GameCreationWizard_countdownPulse__C3xGW 1s ease-in-out infinite;
}

@keyframes GameCreationWizard_countdownPulse__C3xGW {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.GameCreationWizard_countdownLabel__sssu1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-light);
}

.GameCreationWizard_countdownHint__7dOph {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 8px 0 24px 0;
  text-align: center;
}

/* 圖片比例控制區域 */
.GameCreationWizard_imageRatioSection__c1Ntj {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid #e5e7eb;
}

.GameCreationWizard_imageRatioHeader__x\+-lZ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.GameCreationWizard_imageRatioTitle__rOk4l {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.GameCreationWizard_imageRatioDisplay__Hjn6S {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.GameCreationWizard_imageRatioNumber__0SXrQ {
  font-size: 2rem;
  font-weight: 700;
  color: #10b981;
  line-height: 1;
}

.GameCreationWizard_imageRatioEstimate__\+hJQe {
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-weight: 500;
}

.GameCreationWizard_imageRatioWarning__pnF4K {
  margin-top: 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}


/* 圖片上傳區域優化 */
.GameCreationWizard_imageUploadArea__38Zgs {
  width: 100%;
  min-height: 200px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background-color: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}

.GameCreationWizard_imageUploadArea__38Zgs:hover {
  border-color: var(--color-btn-primary);
  background-color: #f0f9ff;
}

.GameCreationWizard_hasImage__FWIjn {
  border-style: solid;
  border-color: #e2e8f0;
  background-color: #ffffff;
  padding: 0;
}

.GameCreationWizard_uploadPlaceholder__zpbt7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
}

.GameCreationWizard_uploadIcon__K\+ouC {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #e0f2fe;
  color: var(--color-btn-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.GameCreationWizard_uploadText__rTjDD {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.GameCreationWizard_uploadHint__iVjf3 {
  font-size: 0.9rem;
  color: var(--color-text-light);
  max-width: 300px;
}

.GameCreationWizard_imagePreviewContainer__tr23k {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #000;
  border-radius: 10px;
  overflow: hidden;
}

.GameCreationWizard_imagePreview__J5WLd {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.GameCreationWizard_removeImageBtn__Bcgnj {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.GameCreationWizard_removeImageBtn__Bcgnj:hover {
  background-color: rgba(239, 68, 68, 0.9);
  transform: scale(1.1);
}

.GameCreationWizard_imageInfo__YxWUZ {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
  font-size: 0.9rem;
  text-align: center;
}

/* StepResult 優化樣式 */
.GameCreationWizard_resultHeader__\+elNZ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.GameCreationWizard_successBadge__LlPv2 {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #ecfdf5;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #a7f3d0;
}

.GameCreationWizard_successIconSmall__QBdaG {
  font-size: 1.2rem;
}

.GameCreationWizard_successText__DtiA2 {
  color: #059669;
  font-weight: 700;
  font-size: 1rem;
}

.GameCreationWizard_headerActions__4dejn {
  display: flex;
  gap: 12px;
}

.GameCreationWizard_actionButtonPrimary__VHP8r {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--color-btn-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.GameCreationWizard_actionButtonPrimary__VHP8r:hover {
  background-color: var(--color-btn-hover);
  transform: translateY(-2px);
}

.GameCreationWizard_avatarCompactCard__m5vVW {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 32px;
  gap: 32px;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.GameCreationWizard_avatarImageSection__DHDyX {
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border-right: 1px solid #e2e8f0;
}

.GameCreationWizard_avatarImageLarge__6Q87S {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.GameCreationWizard_avatarPlaceholder__DJllH {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f1f5f9;
}

.GameCreationWizard_avatarInfoSection__6PL-E {
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.GameCreationWizard_avatarName__CYq4r {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 20px 0;
  padding-bottom: 16px;
  border-bottom: 2px solid #f1f5f9;
}

.GameCreationWizard_infoGrid__quBEc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}

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

.GameCreationWizard_infoItemFull__YlrKA {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.GameCreationWizard_infoLabel__6AFwB {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
}

.GameCreationWizard_infoValue__70S0a {
  font-size: 1rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
  background-color: #f8fafc;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* StepResult Hero & Details 優化 */
.GameCreationWizard_heroSection__5fVZg {
  display: flex;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  min-height: 280px;
}

.GameCreationWizard_heroImageContainer__ETLj2 {
  width: 280px;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.GameCreationWizard_heroImage__8645N {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.GameCreationWizard_heroPlaceholder__Ytm4D {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f1f5f9;
}

.GameCreationWizard_heroContent__YF0TE {
  flex: 1 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.GameCreationWizard_heroName__H2s94 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.GameCreationWizard_heroTags__Pvcex {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.GameCreationWizard_heroTag__Dc9BT {
  font-size: 0.85rem;
  background-color: #f1f5f9;
  color: #64748b;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 600;
}

.GameCreationWizard_heroDescription__yVXZY {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 600px;
}

.GameCreationWizard_viewDetailsBtn__TlsGQ {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-btn-primary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  width: -webkit-fit-content;
  width: fit-content;
}

.GameCreationWizard_viewDetailsBtn__TlsGQ:hover {
  text-decoration: underline;
}

.GameCreationWizard_detailsContainer__DJOjn {
  animation: GameCreationWizard_slideDown__hDsgs 0.3s ease-out;
}

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

.GameCreationWizard_detailGrid__o6jWq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.GameCreationWizard_detailCard__Aw6z5 {
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.GameCreationWizard_detailCardFull__eBokl {
  grid-column: 1 / -1;
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.GameCreationWizard_detailTitle__-8K9g {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.GameCreationWizard_detailTitle__-8K9g::before {
  content: '';
  display: block;
  width: 4px;
  height: 16px;
  background-color: var(--color-btn-primary);
  border-radius: 2px;
}

.GameCreationWizard_detailText__q5y6- {
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.GameCreationWizard_welcomeMessageBox__RgDaD {
  background-color: #f8fafc;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--color-btn-primary);
  font-size: 1rem;
  color: #334155;
  line-height: 1.6;
}

.GameCreationWizard_advancedEditSection__9\+RtX {
  margin-top: 40px;
}

.GameCreationWizard_divider__gbw02 {
  display: flex;
  align-items: center;
  text-align: center;
  color: #94a3b8;
  margin-bottom: 24px;
}

.GameCreationWizard_divider__gbw02::before,
.GameCreationWizard_divider__gbw02::after {
  content: '';
  flex: 1 1;
  border-bottom: 1px solid #e2e8f0;
}

.GameCreationWizard_divider__gbw02 span {
  padding: 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* StepQuestionTypes Redesign Styles */

.GameCreationWizard_splitLayout__8SA4- {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 60vh;
}

.GameCreationWizard_selectedSection__yHTen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background-color: #f0f9ff;
  border-radius: 16px;
  border: 2px dashed #bae6fd;
  min-height: 200px;
  transition: all 0.3s ease;
}

.GameCreationWizard_selectedSectionTitle__x28hi {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-btn-primary);
  margin-bottom: 10px;
}

.GameCreationWizard_unselectedSection__OlT9Y {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.GameCreationWizard_unselectedSectionTitle__LNen9 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

/* Small Option Card for Unselected Items */
.GameCreationWizard_smallOptionCard__tjevF {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 50px; /* Pill shape */
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
          user-select: none;
  width: auto;
  min-width: 160px;
  justify-content: center;
}

.GameCreationWizard_smallOptionCard__tjevF:hover {
  border-color: var(--color-btn-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: #f8fafc;
}

.GameCreationWizard_smallOptionCardIcon__PtwKD {
  font-size: 1.2rem;
}

.GameCreationWizard_smallOptionCardLabel__r\+La0 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Hover Description Tooltip */
.GameCreationWizard_hoverDescription__rlVqn {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background-color: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.GameCreationWizard_hoverDescription__rlVqn::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.GameCreationWizard_smallOptionCard__tjevF:hover .GameCreationWizard_hoverDescription__rlVqn {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* Big Next Button */
.GameCreationWizard_bigNextButtonContainer__8rNVA {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-bottom: 20px;
}

.GameCreationWizard_bigNextButton__XWKYT {
  background: linear-gradient(135deg, var(--color-btn-primary) 0%, #2563eb 100%);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 16px 60px;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.GameCreationWizard_bigNextButton__XWKYT:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
}

.GameCreationWizard_bigNextButton__XWKYT:active {
  transform: translateY(-1px);
}

.GameCreationWizard_bigNextButton__XWKYT::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.GameCreationWizard_bigNextButton__XWKYT:hover::after {
  opacity: 1;
}

.GameCreationWizard_bigNextButtonIcon__OcxrB {
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}

.GameCreationWizard_bigNextButton__XWKYT:hover .GameCreationWizard_bigNextButtonIcon__OcxrB {
  transform: translateX(4px);
}

/* Grid for Selected Items */
.GameCreationWizard_selectedGrid__dLfbV {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  width: 100%;
}

/* Grid for Unselected Items */
/* StepCount Redesign Styles */

.GameCreationWizard_stepSection__JSDzx {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.GameCreationWizard_stepSection__JSDzx:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.GameCreationWizard_sectionHeader__eOOF8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.GameCreationWizard_sectionTitle__6\+8qc {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 12px;
}

.GameCreationWizard_sectionIcon__YlSwd {
  font-size: 1.5rem;
  background-color: #f1f5f9;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.GameCreationWizard_bigNumberDisplay__I4nYR {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--color-btn-primary);
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}

.GameCreationWizard_bigNumberUnit__V8d6O {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-left: 8px;
  vertical-align: baseline;
}

.GameCreationWizard_controlRow__Y83Mo {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
}

.GameCreationWizard_modernSlider__KItjZ {
  flex: 1 1;
  height: 8px;
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: #e2e8f0; /* Fallback */
}

.GameCreationWizard_modernSlider__KItjZ::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-btn-primary);
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.GameCreationWizard_modernSlider__KItjZ::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.GameCreationWizard_compactInput__c-nBp {
  width: 80px;
  padding: 8px 12px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  color: var(--color-text);
  transition: all 0.2s ease;
}

.GameCreationWizard_compactInput__c-nBp:focus {
  outline: none;
  border-color: var(--color-btn-primary);
  box-shadow: 0 0 0 3px rgba(79, 162, 239, 0.1);
}

.GameCreationWizard_infoTag__CMzdP {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f0f9ff;
  color: #0369a1;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 12px;
}

.GameCreationWizard_warningBox__YZ5os {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cost Popup Styles */
.GameCreationWizard_costPopupOverlay__gL8PA {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: GameCreationWizard_fadeIn__OQ5ZQ 0.2s ease;
}

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

.GameCreationWizard_costPopup__IYFhA {
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: GameCreationWizard_slideUp__fsBq5 0.3s ease;
}

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

.GameCreationWizard_costPopupHeader__GsT8P {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #e0e0e0;
}

.GameCreationWizard_costPopupTitle__p2o3J {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.GameCreationWizard_costPopupClose__12LYc {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.GameCreationWizard_costPopupClose__12LYc:hover {
  background-color: #f0f0f0;
  color: var(--color-text);
}

.GameCreationWizard_costPopupContent__qaDS8 {
  padding: 24px;
}

.GameCreationWizard_costSection__\+Dv9V,
.GameCreationWizard_timeSection__uwOJ1 {
  margin-bottom: 32px;
}

.GameCreationWizard_costSection__\+Dv9V:last-child,
.GameCreationWizard_timeSection__uwOJ1:last-child {
  margin-bottom: 0;
}

.GameCreationWizard_costSectionTitle__no44K {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0e0e0;
}

.GameCreationWizard_costItem__sNGHZ,
.GameCreationWizard_costItemTotal__R0rUI {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.GameCreationWizard_costItemTotal__R0rUI {
  border-bottom: 2px solid #e0e0e0;
  margin-top: 8px;
  padding-top: 16px;
  font-weight: 600;
}

.GameCreationWizard_costLabel__6BVV- {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
}

.GameCreationWizard_costItemTotal__R0rUI .GameCreationWizard_costLabel__6BVV- {
  font-weight: 700;
  font-size: 1.1rem;
}

.GameCreationWizard_costValue__h4dlX {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.GameCreationWizard_costUSD__5oz2Q {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
}

.GameCreationWizard_costItemTotal__R0rUI .GameCreationWizard_costUSD__5oz2Q {
  font-weight: 700;
  font-size: 1.2rem;
}

.GameCreationWizard_costTWD__WG-iJ {
  font-size: 0.9rem;
  color: var(--color-text-light);
  font-weight: 500;
}

.GameCreationWizard_costItemTotal__R0rUI .GameCreationWizard_costTWD__WG-iJ {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-btn-primary);
}

.GameCreationWizard_timeItem__0s1d5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.GameCreationWizard_timeItem__0s1d5:last-child {
  border-bottom: none;
}

.GameCreationWizard_timeLabel__5hhLk {
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-weight: 500;
}

.GameCreationWizard_timeValue__UIIur {
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

.confirm-delete-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.confirm-delete-modal {
  background: white;
  border-radius: 12px;
  padding: 0;
  min-width: 400px;
  max-width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.modal-body {
  padding: 24px;
}

.modal-body p {
  margin: 0 0 12px;
  font-size: 16px;
  color: #374151;
}

.warning-text {
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-cancel,
.btn-confirm {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel {
  background: #f3f4f6;
  color: #374151;
}

.btn-cancel:hover {
  background: #e5e7eb;
}

.btn-confirm {
  background: #dc2626;
  color: white;
}

.btn-confirm:hover {
  background: #b91c1c;
}


.MenuBuddies_cover__IuqD8 {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.MenuBuddies_cover__IuqD8::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 2px 2px, rgba(0, 0, 0, 0.02) 1px, transparent 0);
  background-size: 8px 8px;
  pointer-events: none;
  z-index: 1;
}


/* 浮動視窗容器 */
.AdminModelTestTool_floatingContainer__igyQ- {
  position: fixed;
  width: 320px;
  z-index: 9999;
  background: white;
  border: 2px solid #ff9800;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.AdminModelTestTool_floatingContainer__igyQ-.AdminModelTestTool_dragging__1jf5s {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: grabbing;
}

/* 標題列（可拖曳區域） */
.AdminModelTestTool_header__ObDd6 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #ff9800;
  color: white;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}

.AdminModelTestTool_header__ObDd6:active {
  cursor: grabbing;
}

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

.AdminModelTestTool_icon__-ynqn {
  font-size: 16px;
}

.AdminModelTestTool_title__HH3He {
  font-size: 14px;
  font-weight: 600;
}

.AdminModelTestTool_headerRight__Hlcdy {
  display: flex;
  align-items: center;
  gap: 4px;
}

.AdminModelTestTool_positionButton__WMW1x,
.AdminModelTestTool_minimizeButton__88bK5 {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background-color 0.2s;
  padding: 0;
}

.AdminModelTestTool_positionButton__WMW1x:hover,
.AdminModelTestTool_minimizeButton__88bK5:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 內容區域 */
.AdminModelTestTool_content__LjImM {
  max-height: 500px;
  overflow-y: auto;
}

.AdminModelTestTool_expandButton__ean96 {
  width: 100%;
  padding: 12px;
  background: #fff8e1;
  border: none;
  color: #ff9800;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.AdminModelTestTool_expandButton__ean96:hover {
  background: #ffe082;
}

.AdminModelTestTool_toolHeader__49rcY {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #e0e0e0;
  background: #fff8e1;
}

.AdminModelTestTool_toolTitle__wixf0 {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.AdminModelTestTool_closeButton__KokVB {
  background: transparent;
  border: none;
  color: #666;
  font-size: 20px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
  padding: 0;
  line-height: 1;
}

.AdminModelTestTool_closeButton__KokVB:hover {
  background: #e0e0e0;
}

.AdminModelTestTool_modelSelectors__fNSup {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.AdminModelTestTool_modelSelectorItem__pY8bk {
  width: 100%;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AdminModelTestTool_floatingContainer__igyQ- {
    width: 280px;
  }

  .AdminModelTestTool_modelSelectors__fNSup {
    gap: 10px;
    padding: 10px;
  }
}

/* 確保不影響頁面滾動 */
.AdminModelTestTool_floatingContainer__igyQ- * {
  box-sizing: border-box;
}


.Story_storyContainer__A-OX2 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.Story_background__Mz1zt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: opacity 0.4s ease-out;
}

.Story_background__Mz1zt.Story_fadeIn__jC87M {
    opacity: 0;
}

.Story_layerFade__XJqGg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    z-index: 0;
    pointer-events: none;
}

.Story_backgroundImage__yt2I6,
.Story_backgroundVideo__pObq7 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease-out;
}

.Story_backgroundImage__yt2I6 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 添加背景切換時的黑色過渡效果 */
.Story_background__Mz1zt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    z-index: 1;
    pointer-events: none;
}

.Story_background__Mz1zt.Story_fadeIn__jC87M::before {
    opacity: 1;
}

.Story_foregroundLayer__tBmQv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20vh;
    pointer-events: none;
    z-index: 2;
}

.Story_foregroundContainer__IMA9C {
    position: relative;
    transform: none;
    width: auto;
    height: auto;
    max-width: 40%;
    max-height: 40vh;
    padding: 4px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(28, 28, 28, 0.6) 0%, rgba(40, 40, 40, 0.4) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.5px solid rgba(255, 215, 0, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.2), 0 0 40px rgba(255, 215, 0, 0.1), 0 0 80px rgba(218, 165, 32, 0.05),
        0 0 120px rgba(184, 134, 11, 0.03);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
}

.Story_foregroundContainer__IMA9C.Story_show__fzVV8 {
    visibility: visible;
    animation: Story_popIn__VHBR- 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, Story_glowPulse__1GoZw 4s ease-in-out infinite;
}

.Story_foregroundImage__1uu6B,
.Story_foregroundVideo__004LH {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    display: block;
    min-width: 200px;
    min-height: 150px;
}

.Story_foreground__C2bmp::before {
    content: "";
    position: absolute;
    top: -0.5px;
    left: -0.5px;
    right: -0.5px;
    bottom: -0.5px;
    background: linear-gradient(45deg, #8b7355, #daa520, #8b7355, #b8860b);
    z-index: -1;
    border-radius: 8px;
    background-size: 200%;
    animation: Story_borderGlow__-85VC 8s linear infinite;
    filter: blur(0.5px);
    opacity: 0.3;
}

@keyframes Story_borderGlow__-85VC {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes Story_popIn__VHBR- {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    85% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes Story_contentScale__KLQI2 {
    from {
        transform: scale(0.95);
    }
    to {
        transform: scale(1);
    }
}

.Story_foreground__C2bmp::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 0.5px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(218, 165, 32, 0.04) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.Story_narration__N4Gfq {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    max-width: 80%;
    z-index: 4;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.Story_dialogContainer__iICrP {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 800px;
    z-index: 5;
}

.Story_controls__K00JE {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 6;
}

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

.Story_controlButton__hMEsk:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes Story_glowPulse__1GoZw {
    0% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.2), 0 0 40px rgba(255, 215, 0, 0.1), 0 0 80px rgba(218, 165, 32, 0.05),
            0 0 120px rgba(184, 134, 11, 0.03);
    }
    50% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 215, 0, 0.3), 0 0 60px rgba(255, 215, 0, 0.2), 0 0 120px rgba(218, 165, 32, 0.1),
            0 0 160px rgba(184, 134, 11, 0.05);
    }
    100% {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.2), 0 0 40px rgba(255, 215, 0, 0.1), 0 0 80px rgba(218, 165, 32, 0.05),
            0 0 120px rgba(184, 134, 11, 0.03);
    }
}

/* 針對較小螢幕的響應式調整 */
@media screen and (max-width: 768px) {
    .Story_foregroundContainer__IMA9C {
        max-width: 50%;
        max-height: 50vh;
    }
}

.StoryIntro_storyIntroArea__SzRcl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.StoryIntro_card__NiTcs {
  position: relative;
  width: 90%;
  max-width: 800px;
  height: 80vh;
  max-height: 600px;
  background: linear-gradient(to bottom, #fff9f2, #fff1e6);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(184, 134, 92, 0.2);
  display: flex;
  flex-direction: column;
}

.StoryIntro_coverImage__KQNzZ {
  width: 100%;
  height: 60%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.StoryIntro_coverImage__KQNzZ::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #fff1e6);
}

.StoryIntro_contentLayer__4h91u {
  position: relative;
  flex: 1 1;
  padding: 20px 30px 30px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #fff9f2, #fff1e6);
}

.StoryIntro_textHolder__RB3wt {
  flex: 1 1;
}

.StoryIntro_title__nbUeS {
  font-size: 2.5em;
  color: #614434;
  margin-bottom: 15px;
  font-weight: bold;
}

.StoryIntro_description__No1sA {
  font-size: 1.1em;
  color: #8b6b5c;
  line-height: 1.6;
}

.StoryIntro_qrCodeContainer__nfOn5 {
  position: absolute;
  bottom: 30px;
  right: 30px;
  text-align: center;
  padding: 12px;
  background: rgba(255, 252, 248, 0.95);
  border: 2px dashed #b8865c;
  border-radius: 8px;
  transform: rotate(-5deg);
}

.StoryIntro_qrCode__e\+At2 {
  padding: 8px;
  background: #fff9f2;
  border-radius: 4px;
  display: block;
}

.StoryIntro_qrCode__e\+At2 svg {
  display: block;
}

.StoryIntro_scanText__MmCkF {
  margin-top: 8px;
  font-size: 0.8em;
  color: #8b6b5c;
  font-family: "Courier New", monospace;
  white-space: nowrap;
}

.StoryIntro_btnHolder__Wy7zf {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.StoryIntro_btnStoryLarge__yJxwP {
  display: inline-flex;
  padding: 15px 40px;
  background: #b8865c;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-size: 1.2em;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.StoryIntro_btnStoryLarge__yJxwP:hover {
  background: #a67550;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(184, 134, 92, 0.3);
}

@media (max-width: 768px) {
  .StoryIntro_card__NiTcs {
    width: 95%;
    height: 90vh;
  }

  .StoryIntro_qrCodeContainer__nfOn5 {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 20px auto;
    transform: none;
  }

  .StoryIntro_title__nbUeS {
    font-size: 2em;
  }

  .StoryIntro_description__No1sA {
    font-size: 1em;
  }

  .StoryIntro_btnStoryLarge__yJxwP {
    padding: 12px 30px;
    font-size: 1.1em;
  }

  .StoryIntro_coverImage__KQNzZ {
    height: 55%;
  }
}

.CreateUser_createUserContainer__wk47K {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #1a1a1a;
  overflow: hidden;
}

.CreateUser_overlay__KzSCc {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(32, 32, 40, 0.95),
    rgba(20, 20, 26, 0.98)
  );
  pointer-events: none;
}

.CreateUser_content__URhiz {
  position: relative;
  z-index: 1;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.CreateUser_title__IQiJE {
  color: #e6e6e6;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.CreateUser_subtitle__gIuYh {
  display: block;
  color: #b3b3b3;
  font-size: 1rem;
  margin-top: 0.5rem;
}

.CreateUser_mainContent__Katix {
  background-color: rgba(40, 40, 48, 0.95);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 150px);
  margin: 0 auto;
  max-width: 1000px;
  width: 95%;
}

.CreateUser_characterInfo__kdgbW {
  background: rgba(255, 255, 255, 0.98);
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  text-align: left;
  position: relative;
  width: 80%;
  flex: 1 1;
  margin: 0;
  transform: none;
}

.CreateUser_characterName__L\+Us1 {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.CreateUser_characterDescription__Q652t {
  color: #666;
  font-size: 1em;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .CreateUser_content__URhiz {
    overflow-y: visible;
    height: auto;
  }

  .CreateUser_createUserContainer__wk47K {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }

  .CreateUser_mainContent__Katix {
    height: auto;
    min-height: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow-y: visible;
    margin: 0.5rem auto;
  }

  .CreateUser_characterDescription__Q652t {
    font-size: 0.75em;
    line-height: 1.3;
    max-height: none;
    overflow-y: visible;
  }

  .CreateUser_characterName__L\+Us1 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
  }

  .CreateUser_characterInfo__kdgbW {
    width: 90%;
    padding: 12px;
    margin-bottom: 15px;
    max-height: none;
  }

  .CreateUser_title__IQiJE {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
  }

  .CreateUser_subtitle__gIuYh {
    font-size: 0.7rem;
    margin-top: 0.3rem;
  }
}

.CreateUser_nicknameModal__ByOwm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(23, 28, 48, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: CreateUser_fadeIn__iUF-h 0.3s ease;
}

.CreateUser_modalContent__xYqgl {
  background: rgba(40, 40, 48, 0.95);
  padding: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  width: 90%;
  max-width: 400px;
  text-align: center;
  animation: CreateUser_slideUp__lcaM5 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.CreateUser_modalContent__xYqgl h2 {
  color: #e6e6e6;
  margin-bottom: 30px;
  font-size: 1.5em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.CreateUser_inputGroup__pLown {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.CreateUser_errorMessage__r2\+A\+ {
  color: #ff4d4d;
  font-size: 0.9em;
  margin-top: 0;
  text-align: left;
  animation: CreateUser_fadeIn__iUF-h 0.2s ease;
}

.CreateUser_input__K0NqI {
  width: 100%;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 1.1em;
  margin-bottom: 5px;
  transition: all 0.3s ease;
}

.CreateUser_input__K0NqI:focus {
  outline: none;
  border-color: rgb(255, 166, 0);
  box-shadow: 0 0 15px rgba(255, 166, 0, 0.3);
}

@keyframes CreateUser_fadeIn__iUF-h {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.CreateUser_characterInfo__kdgbW {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.CreateUser_avatarCard__BQkT8 {
  position: absolute;
  width: 240px;
  height: 340px;
  top: 10%;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: 15px;
  overflow: hidden;
}

.CreateUser_avatarCard__BQkT8 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.CreateUser_avatarCard__BQkT8.CreateUser_prev__Px9hR {
  transform: translateX(-140%) scale(0.7);
  opacity: 0.4;
}

.CreateUser_avatarCard__BQkT8.CreateUser_next__1ztQ2 {
  transform: translateX(140%) scale(0.7);
  opacity: 0.4;
}

.CreateUser_avatarCard__BQkT8.CreateUser_current__3T6dD {
  transform: translateX(0) scale(1);
  opacity: 1;
  filter: brightness(1.05);
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(89, 107, 177, 0.4), 0 0 40px rgba(89, 107, 177, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.CreateUser_bottomSection__Awu8U {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 90%;
  z-index: 2;
}

@media (max-width: 768px) {
  .CreateUser_bottomSection__Awu8U {
    position: static;
    bottom: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 100%;
    padding-bottom: 20px;
    z-index: 10;
  }

  .CreateUser_bottomSection__Awu8U button {
    margin-top: 0;
    position: relative;
    z-index: 20;
    width: 80%;
    max-width: 200px;
  }

  .CreateUser_avatarSwiper__1t5EJ {
    margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .CreateUser_bottomSection__Awu8U button {
    margin-top: 0;
    width: 70%;
  }

  .CreateUser_characterInfo__kdgbW {
    margin-bottom: 15px;
    max-height: none;
  }
}

.CreateUser_navigationButton__ELbhM {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  z-index: 2;
}

.CreateUser_prevButton__Cf8cu {
  left: 5%;
}

.CreateUser_nextButton__TjobI {
  right: 5%;
}

.AvatarSwiper_avatarSwiper__NwM7q {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 120px;
}

@media (max-width: 768px) {
  .AvatarSwiper_avatarSwiper__NwM7q {
    margin-bottom: 10px;
    height: auto;
    min-height: 220px;
    position: relative;
  }

  .AvatarSwiper_swiperContainer__i\+8hl {
    padding: 10px 40px;
    max-width: 100%;
    position: relative;
  }

  .AvatarSwiper_avatarCard__3Oej2 {
    width: 130px;
    height: 180px;
    transform: scale(0.9);
    position: relative;
  }

  .swiper-slide-active .AvatarSwiper_avatarCard__3Oej2 {
    transform: scale(1);
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 28px;
    height: 28px;
    top: 40%;
    position: absolute;
  }

  .swiper-button-prev {
    left: 5px;
  }

  .swiper-button-next {
    right: 5px;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    font-size: 0.9em;
  }
}

@media (max-width: 480px) {
  .AvatarSwiper_avatarCard__3Oej2 {
    width: 110px;
    height: 160px;
  }

  .AvatarSwiper_avatarSwiper__NwM7q {
    min-height: 180px;
  }

  .AvatarSwiper_swiperContainer__i\+8hl {
    padding: 5px 30px;
  }
}

.AvatarSwiper_swiperContainer__i\+8hl {
  width: 100%;
  max-width: 900px;
  padding: 20px 60px;
}

.AvatarSwiper_avatarCard__3Oej2 {
  width: 200px;
  height: 280px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.85);
  opacity: 0.3;
  filter: brightness(0.6) blur(1px);
}

.AvatarSwiper_avatarCard__3Oej2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease;
}

.swiper-slide-active .AvatarSwiper_avatarCard__3Oej2 {
  transform: scale(1);
  opacity: 1;
  filter: brightness(1.05);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(89, 107, 177, 0.4), 0 0 40px rgba(89, 107, 177, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.swiper-button-prev,
.swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(89, 107, 177, 0.2);
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  top: 45%;
}

.swiper-button-prev {
  left: 15px;
}

.swiper-button-next {
  right: 15px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--switch-active);
  box-shadow: 0 0 20px var(--glow-accent);
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 1.2em;
  color: var(--text-primary);
}

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

/**
 * Swiper 11.2.8
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 23, 2025
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: initial;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
          margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
          margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid #007aff;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */

:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(44px / 44 * 27);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: 44px;
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (44px / 2));
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-theme-color);
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: 44px;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-feature-settings: ;
  font-variant: normal;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 10px;
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */

.StoryButton_button__XVrVZ {
  background: transparent;
  border: 1px solid rgb(255, 166, 0);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: StoryButton_fadeIn__8AS-r 1s ease-out;
}

.StoryButton_button__XVrVZ:hover {
  background: rgba(255, 166, 0, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255, 166, 0, 0.3);
}

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

@keyframes StoryButton_fadeIn__8AS-r {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 添加媒體查詢，優化小螢幕顯示 */
@media screen and (max-width: 768px) {
  .StoryButton_button__XVrVZ {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    min-width: 100px;
    background: rgba(255, 166, 0, 0.15);
    box-shadow: 0 0 10px rgba(255, 166, 0, 0.2);
  }
}

@media screen and (max-width: 480px) {
  .StoryButton_button__XVrVZ {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    min-width: 90px;
    background: rgba(255, 166, 0, 0.2);
  }
}

.StoryMode_storyMode__2z-Qd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgb(0, 0, 0) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.StoryMode_container__OmtBd {
  width: 90%;
  max-width: 1200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: 0;
  margin: 0 auto;
}

.StoryMode_message__3djg9 {
  display: flex;
  align-items: center;
  position: relative;
  height: 70%;
  padding: 0;
  margin: 0 auto;
  width: 100%;
}

.StoryMode_avatar__y\+Q5e {
  position: relative;
  width: 26%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 10%;
}

.StoryMode_avatarImage__scQtH {
  width: 100%;
  height: 52%;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: transparent;
  position: relative;
}

/* 線條容器 */
.StoryMode_lineContainer__mMHjz {
  position: fixed;
  left: 0;
  width: 100%;
  height: 2px;
  bottom: 40%;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 166, 0, 0) 0%,
    rgba(255, 166, 0, 0) 20%,
    rgba(255, 166, 0, 0.4) 40%,
    rgba(255, 166, 0, 0.8) 47%,
    rgba(255, 166, 0, 1) 50%,
    rgba(255, 166, 0, 0.8) 53%,
    rgba(255, 166, 0, 0.4) 60%,
    rgba(255, 166, 0, 0) 80%,
    rgba(255, 166, 0, 0) 100%
  );
  box-shadow: 0 0 10px rgba(255, 166, 0, 0.6), 0 0 20px rgba(255, 166, 0, 0.4),
    0 0 30px rgba(255, 166, 0, 0.2), 0 0 40px rgba(255, 166, 0, 0.1);
  animation: StoryMode_glowLine__1ZTDc 1.5s infinite ease-in-out;
}

.StoryMode_avatarName__zRlde {
  position: fixed;
  bottom: 35%;
  left: 8%;
  color: white;
  font-size: 1.25rem;
  z-index: 2;
}

.StoryMode_content__WAPlu {
  position: absolute;
  left: 30%;
  top: 50%;
  transform: translateY(-50%);
  width: 65%;
  color: white;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 2rem;
  margin: 0;
  background: transparent;
  animation: StoryMode_slideIn__rMXc4 0.8s ease-out;
}

.StoryMode_options__WU8c3 {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.StoryMode_button__xHlfG {
  background: transparent;
  border: 1px solid rgb(255, 166, 0);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-width: 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: StoryMode_fadeIn__sp2pi 1s ease-out;
}

.StoryMode_button__xHlfG:hover {
  background: rgba(255, 166, 0, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(255, 166, 0, 0.3);
}

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

/* 動畫定義 */
@keyframes StoryMode_fadeIn__sp2pi {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes StoryMode_glowPulse__BGcvN {
  0% {
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 166, 0, 0.5), 0 0 20px rgba(255, 166, 0, 0.3),
      0 0 30px rgba(255, 166, 0, 0.1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 15px rgba(255, 166, 0, 0.6), 0 0 25px rgba(255, 166, 0, 0.4),
      0 0 35px rgba(255, 166, 0, 0.2);
  }
  100% {
    opacity: 0.8;
    box-shadow: 0 0 10px rgba(255, 166, 0, 0.5), 0 0 20px rgba(255, 166, 0, 0.3),
      0 0 30px rgba(255, 166, 0, 0.1);
  }
}

/* 修改發光動畫 */
@keyframes StoryMode_glowLine__1ZTDc {
  0% {
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(255, 166, 0, 0.6), 0 0 20px rgba(255, 166, 0, 0.4),
      0 0 30px rgba(255, 166, 0, 0.2), 0 0 40px rgba(255, 166, 0, 0.1);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(255, 166, 0, 0.8), 0 0 30px rgba(255, 166, 0, 0.7),
      0 0 40px rgba(255, 166, 0, 0.6), 0 0 50px rgba(255, 166, 0, 0.4);
  }
  100% {
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(255, 166, 0, 0.6), 0 0 20px rgba(255, 166, 0, 0.4),
      0 0 30px rgba(255, 166, 0, 0.2), 0 0 40px rgba(255, 166, 0, 0.1);
  }
}

/* 移除其他可能產生線條的樣式 */
.StoryMode_avatarImage__scQtH::after,
.StoryMode_avatarName__zRlde::before,
.StoryMode_avatarName__zRlde::after {
  display: none;
}

/* 添加媒體查詢以解決 Safari 手機版按鈕被介面蓋住的問題 */
@media screen and (max-width: 768px) {
  .StoryMode_message__3djg9 {
    height: 70%; /* 減少 message 的高度，避免與 options 交疊 */
    transform: translateY(-20%); /* 將 message 往上移動 */
  }

  .StoryMode_options__WU8c3 {
    bottom: 5rem; /* 增加底部間距，避免被 Safari 工具列遮擋 */
    width: 90%;
    flex-wrap: wrap; /* 允許按鈕在小螢幕上換行 */
  }

  .StoryMode_content__WAPlu {
    font-size: 0.9rem; /* 更小的字體 */
    padding: 1rem;
    line-height: 1.4; /* 減少行高 */
  }

  .StoryMode_avatarName__zRlde {
    font-size: 0.6rem;
  }

  .StoryMode_button__xHlfG {
    padding: 0.4rem 1rem; /* 縮小按鈕 */
    font-size: 0.9rem; /* 縮小按鈕文字 */
    min-width: 100px; /* 縮小最小寬度 */
  }
}

/* 針對更小的螢幕進一步優化 */
@media screen and (max-width: 480px) {
  .StoryMode_message__3djg9 {
    height: 55%; /* 進一步減少高度 */
  }

  .StoryMode_content__WAPlu {
    font-size: 0.85rem;
    padding: 0.8rem;
  }

  .StoryMode_button__xHlfG {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    min-width: 90px;
  }
}

/* 針對 iOS Safari 的特殊修復 */
@supports (-webkit-touch-callout: none) {
  .StoryMode_options__WU8c3 {
    bottom: 6rem; /* 為 iOS Safari 提供更多空間 */
    padding-bottom: env(safe-area-inset-bottom, 2rem); /* 使用 iOS 安全區域 */
  }

  .StoryMode_container__OmtBd {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* 針對 iOS Safari 的額外調整 */
  @media screen and (max-width: 768px) {
    .StoryMode_message__3djg9 {
      height: 55%; /* 在 iOS 上進一步減少高度 */
    }
  }
}

.post_post-editor__4IHSB {
  background: var(--bg-channel-card);
  border-radius: var(--rd-area);
  padding: calc(var(--gap) * 1.5) var(--gap);
  margin-top: var(--gap);
}

@media (min-width: 701px) {
  .post_post-editor__4IHSB {
    padding: calc(var(--gap) * 2);
    margin-top: calc(var(--gap) * 2);
  }
}

.post_editor-input__0vReV {
  width: 100%;
  min-height: 120px;
  background: none;
  border: none;
  outline: none;
  color: var(--color-highlight-first);
  font-family: var(--font-default);
  font-size: 0.9375em;
  line-height: 1.5;
  resize: none;
  padding: 0;
}

.post_mention-suggestions__U3sXm {
  position: absolute;
  background: var(--bg-nav-mobile);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: var(--rd-item);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.post_mention-item__8YH1w {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--color-highlight-first);
}

.post_mention-item__8YH1w:hover {
  background: var(--color-highlight-third);
  opacity: 0.8;
}

.post_mention-avatar__vizc\+ {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.post_mention-text__-il1i {
  color: var(--color-highlight-third);
  font-weight: bold;
}

.post_toolbar__XJ8aQ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--color-border);
}

.post_toolbar-button__kCmsq {
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  color: var(--color-pair);
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--rd-item);
  transition: all 0.2s;
}

.post_toolbar-button__kCmsq:hover {
  background: var(--color-highlight-third);
  opacity: 0.8;
}

.post_game-preview__tARd3 {
  margin-top: var(--gap);
  padding: var(--gap);
  background: var(--bg-game-card);
  border-radius: var(--rd-item);
  display: flex;
  align-items: center;
}

.post_game-preview__tARd3 img {
  width: 60px;
  height: 60px;
  border-radius: var(--rd-item);
  margin-right: var(--gap);
}

.PersonalPage_personalPage__WsMjl {
    width: 100%;
    /* min-height: 100vh; */
    height: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    /* background: linear-gradient(180deg, #2a2a2b 90%, #282829d0 100%); */
}

@media screen and (min-width: 700px) {
    .PersonalPage_personalPage__WsMjl {
        width: var(--width-small);
    }
}
/* Profile Header Styles */
.PersonalPage_profile__0QZGH {
    display: flex;
    flex-direction: column;
    background-color: #595f80;
    border-radius: 0.6rem;
    padding: 1rem;
    color: white;
    position: relative;
    margin-bottom: 1rem;
}

.PersonalPage_followButton__KF\+\+W {
    background-color: #f5d547;
    color: #000;
    border: none;
    border-radius: 1rem;
    padding: 6px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    margin-left: auto;
    max-height: 30px;
    min-width: 85px;
    justify-content: center;
}

.PersonalPage_followButton__KF\+\+W:hover {
    background-color: #f0ca2d;
}

.PersonalPage_followButton__KF\+\+W::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9\"></path><path d=\"M13.73 21a2 2 0 0 1-3.46 0\"></path></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 6px;
}

.PersonalPage_title__e5KbM {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
}

.PersonalPage_protrait__9u86y {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-right: 15px;
    background-color: #fff;
    flex-shrink: 0;
}

.PersonalPage_userInfo__IyXOI {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.PersonalPage_title__e5KbM h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.PersonalPage_userId__98MoI {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.PersonalPage_userDescription__42t0j {
    margin-bottom: 16px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.PersonalPage_statItem__RFnF1 {
    display: flex;
    margin-top: 16px;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 12px;
}

.PersonalPage_statItem__RFnF1 > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    position: relative;
}

.PersonalPage_statItem__RFnF1 > div:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.PersonalPage_statLabel__fDv15 {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.PersonalPage_statValue__D-1e\+ {
    font-size: 1rem;
    font-weight: 600;
}

.PersonalPage_navContainer__VvtVw {
    width: 100%;
}

/* Tab navigation */
.PersonalPage_tabNav__F3oqL {
    display: flex;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 1rem;
    justify-content: space-around;
}

.PersonalPage_tabNav__F3oqL div {
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    color: #9e9e9e;
    transition: color 0.2s ease;
}

.PersonalPage_active__U8m0u {
    color: #ffffff !important;
    font-weight: 500;
}

.PersonalPage_tabNav__F3oqL div.PersonalPage_active__U8m0u::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #4f7df3; /* Blue highlight color as shown in the image */
    border-radius: 2px 2px 0 0;
}

.PersonalPage_tabNav__F3oqL div:hover {
    color: #ffffff;
}

/* Tab content */
.PersonalPage_tabContent__0CfPD {
    width: 100%;
}

.PersonalPage_content__UcqRv {
    display: none;
    width: 100%;
}

.PersonalPage_content__UcqRv.PersonalPage_active__U8m0u {
    display: block;
}

/* 共享樣式 */
.PersonalPage_sectionTitle__hP5xs {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.PersonalPage_emptyState__5rFQw {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #f9f9f9;
    border-radius: 8px;
    color: #888;
    font-size: 1rem;
}

/* ContentCreated 樣式 */
.PersonalPage_contentCreatedContainer__oGT4e {
    padding: 1rem 0;
}

.PersonalPage_contentList__DHomB {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.PersonalPage_contentItem__nuF8p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.PersonalPage_contentItem__nuF8p:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.PersonalPage_contentInfo__pn408 {
    flex: 1 1;
}

.PersonalPage_contentTitle__wf\+Pu {
    font-size: 1.1rem;
    margin: 0 0 8px 0;
    color: #333;
}

.PersonalPage_contentMeta__WBaVX {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    color: #666;
}

.PersonalPage_contentType__3XFhl {
    padding: 2px 8px;
    background-color: #e9f5ff;
    color: #0066cc;
    border-radius: 4px;
}

.PersonalPage_contentDate__LU\+hU {
    color: #888;
}

.PersonalPage_contentActions__Ld2aq {
    display: flex;
    gap: 8px;
}

.PersonalPage_actionButton__FjQzQ {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.PersonalPage_actionButton__FjQzQ:hover {
    background-color: #f5f5f5;
}
@media (min-width: 0px) and (max-width: 900px) {
    .PersonalPage_personalPage__WsMjl {
        padding: 5rem var(--gap-mobile);
    }
}
@media (min-width: 0px) and (max-width: 700px) {
    .PersonalPage_profile__0QZGH {
        padding: 15px 10px;
    }

    .PersonalPage_followButton__KF\+\+W {
        align-self: flex-start;
        font-size: 0.9rem;
    }

    .PersonalPage_statItem__RFnF1 > div {
        padding: 0 5px;
    }

    .PersonalPage_statLabel__fDv15,
    .PersonalPage_statValue__D-1e\+ {
        font-size: 0.8rem;
        text-align: center;
    }
}

/* LastestActivities 樣式 */
.PersonalPage_latestActivitiesContainer__i67YK {
    padding: 1rem 0;
}

.ContentCreated_contentCreated__9l8c4 {
    width: 100%;
    color: #ffffff;
}

/* Section styling */
.ContentCreated_section__6h2uQ {
    margin-bottom: 1.5rem;
    min-height: 340px;
}

.ContentCreated_sectionHeader__KnE2S {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.ContentCreated_sectionHeader__KnE2S h2 {
    color: var(--color-main);
    font-size: var(--title-size);
    font-family: var(--font-family);
    font-weight: 500;
    display: flex;
    align-items: center;
    letter-spacing: 0.01em;
    background: var(--title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ContentCreated_sectionHeader__KnE2S h2 .imrs-icon {
    margin-right: 8px;
}
.ContentCreated_sectionHeader__KnE2S h2 .imrs-icon:before {
    width: 36px;
    height: 36px;
    background-color: var(--color-main);
}

.ContentCreated_sectionTitle__5GeeM {
    display: flex;
    align-items: center;
    font-size: 36px;
    font-weight: 600;
    margin: 0;
}

.ContentCreated_icon__H6YJy {
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.ContentCreated_badge__jdYYz {
    background: var(--title-gradient);
    color: var(--color-bg-main);
    border-radius: 3rem;
    padding: 5px 8px 4px;
    font-weight: bold;
    font-family: var(--font-default);
    line-height: 1.12em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55em;
    margin-left: 8px;
}

.ContentCreated_scrollContainer__yKQk8 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.ContentCreated_tasksScrollable__E\+38h {
    display: flex;
    overflow-x: auto;
    padding: 8px;
    margin-bottom: 8px;
    gap: 16px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scroll-behavior: smooth;
}

.ContentCreated_tasksScrollable__E\+38h::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Scroll buttons */
.ContentCreated_scrollButton__futhI {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
}

.ContentCreated_scrollButton__futhI:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

.ContentCreated_scrollLeft__-GrCp {
    left: 0;
}

.ContentCreated_scrollRight__HRmR3 {
    right: 0;
}

.ContentCreated_myCustomQuestCard__GVyWj {
    width: 100%;
}

/* Card grids */
.ContentCreated_cardGrid__fQ7dJ,
.ContentCreated_articleGrid__KUg7D,
.ContentCreated_gameGrid__mAhoV {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    gap: 20px;
}

/* Article cards */
.ContentCreated_articleCard__d4nzH {
    display: flex;
    background-color: #222222;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    height: 80px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    grid-column: 1 / -1; /* Make article cards span full width */
}

.ContentCreated_articleCard__d4nzH:hover {
    transform: translateY(-4px);
}

.ContentCreated_articleInfo__uq41F {
    flex: 1 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ContentCreated_articleTitle__CW\+2I {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.ContentCreated_articleViews__dp548 {
    font-size: 12px;
    color: #9e9e9e;
    display: flex;
    align-items: center;
}

.ContentCreated_viewIcon__OM3wd {
    color: #9e9e9e;
    margin-right: 4px;
}

.ContentCreated_articleThumbnail__VI-l2 {
    width: 80px;
    background-size: cover;
    background-position: center;
    background-color: #444444; /* Fallback */
}

@media (max-width: 960px) {
    .ContentCreated_gameGrid__mAhoV {
        grid-template-columns: repeat(2, 1fr);
    }

    /* .scrollContainer {
        padding: 0 1.2rem;
    } */
}

/* Empty state styling */
.ContentCreated_emptyState__NY9hd {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #9e9e9e;
    font-size: 16px;
    text-align: center;
}

@media (min-width: 980px) {
    .ContentCreated_gameGrid__mAhoV {
        grid-template-columns: repeat(3, 1fr);
    }
}
.ContentCreated_taskCardContainer__g41Fe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    gap: 20px;
    padding-bottom: 100px;
}
@media (max-width: 980px) and (orientation: portrait) {
    .ContentCreated_taskCardContainer__g41Fe {
        grid-template-columns: repeat(2, 1fr);
    }
    .ContentCreated_gameGrid__mAhoV {
        grid-template-columns: repeat(2, 1fr);
    }
}

.QuestBTN_taskCard__ghvfy {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    /* background: linear-gradient(-30deg, #1f1534 0%, #3e1671 30%, #6232a1 70%, #1f1534 100%); */
    background: linear-gradient(to bottom, #1d1331 0%, #552199 100%);

    position: relative;
    display: flex;
    flex-direction: column;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;

    width: 100%;
}
/* .taskCard::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid #f8d687;
    border-radius: 8px;
    pointer-events: none; 
    z-index: 3;
} */
/* .taskCard::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 150%;
} */

.QuestBTN_taskCard__ghvfy:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.QuestBTN_taskCard__ghvfy:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.QuestBTN_textHolder__\+OcUj {
    padding: 20px 10px 60px;
}
.QuestBTN_cardContent__oZY9A {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    /* flex: 1;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%), linear-gradient(315deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%);
    background-size: 100px 100px;
    position: relative;
    z-index: 2; */
}

.QuestBTN_cardContent__oZY9A::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 64%;
    background: url(/static/media/quest-cover.9cfb8c525aec2f94193a.jpg) no-repeat center center;
    background-size: cover;
}

.QuestBTN_title__J7SaR {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: clamp(15px, 1.75vh, 20px);
    font-weight: 500;
    color: #fff0c5;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: 1.25em;
    -webkit-box-orient: vertical;
}

.QuestBTN_pointsBadge__Qn-RM {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #f9e7b4 0%, #f5d56a 25%, #e2b84d 50%, #d19b2e 75%, #f6e087 100%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    background-blend-mode: overlay;
    color: var(--text-btn--primary);
    border-radius: 20px;
    padding: 5px 18px;
    font-weight: bold;

    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 8px rgba(255, 255, 255, 0.3);
    width: -webkit-max-content;
    width: max-content;
    margin: 0 auto;
}

.QuestBTN_pointsBadge__Qn-RM span {
    color: var(--text-btn--primary);
    font-size: 1.125em;
    font-weight: bold;
}

.QuestBTN_participantsBar__7\+Tnc {
    position: absolute;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    left: 0;
    bottom: 0;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
}

.QuestBTN_participantsCount__PeBCk {
    font-weight: bold;
    position: relative;
}

.QuestBTN_coin__acsVa .imrs-icon {
    margin-right: 5px;
}
.QuestBTN_coin__acsVa .imrs-icon:before {
    width: 20px;
    height: 20px;
    background-color: var(--text-btn--primary);
}

.CreateQuest_container__rPGZo {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  padding: 50px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(162, 150, 255, 0.5) transparent;
}
/*手機*/
@media (min-width: 0px) and (max-width: 700px) {
  .CreateQuest_container__rPGZo {
    padding: 0;
  }
}
.CreateQuest_container__rPGZo::-webkit-scrollbar {
  width: 6px;
}

.CreateQuest_container__rPGZo::-webkit-scrollbar-track {
  background: transparent;
}

.CreateQuest_container__rPGZo::-webkit-scrollbar-thumb {
  background-color: rgba(162, 150, 255, 0.5);
  border-radius: 3px;
}
.CreateQuest_quest-item__qqBLM {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .top {
    margin-bottom: 20px;
}

.top h2 {
    font-size: 1.5rem;
    color: #333;
    margin: 0;
} */

.CreateQuest_content__4JMcp {
  padding: 15px 0;
}

.CreateQuest_formGroup__Afk8\+ {
  margin-bottom: 20px;
}

.CreateQuest_formGroup__Afk8\+ label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.CreateQuest_textarea__IctoY {
  min-height: 100px;
  resize: vertical;
}

.CreateQuest_submitButton__uLJ70 {
  background-color: #4a90e2;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.CreateQuest_submitButton__uLJ70:hover {
  background-color: #357abd;
}

.CreateQuest_submitButton__uLJ70:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.CreateQuest_questContent__Tmxrk {
  position: relative;
  width: var(--width-small);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.CreateQuest_header__y3Rqb {
  flex-shrink: 0;
  padding: 0 var(--gap-mobile) var(--gap-mobile);
}

.CreateQuest_header__y3Rqb h2 {
  color: var(--color-main);
  font-size: clamp(20px, 2.75vh, 36px);
  font-family: var(--font-family);
  font-weight: 500;
  display: flex;
  align-items: center;
  letter-spacing: 0.01em;
  background: linear-gradient(
    to bottom,
    #a296ff 0%,
    #f1efff 50%,
    #a296ff 50%,
    #cac3ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.CreateQuest_header__y3Rqb h2 .imrs-icon {
  margin-right: 8px;
}
.CreateQuest_header__y3Rqb h2 .imrs-icon:before {
  width: 36px;
  height: 36px;
  background-color: var(--color-main);
}
.CreateQuest_form__MDoos {
  flex: 1 1;

  display: flex;
  flex-direction: column;
  /* gap: 12px; */
  align-items: center;
  padding: var(--gap-mobile);
  box-sizing: border-box;
}

.CreateQuest_formGroup__Afk8\+ {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-bottom: var(--gap-mobile);
}

.CreateQuest_formGroup__Afk8\+ label {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 1px;
}

.CreateQuest_input__0kPxx,
.CreateQuest_textarea__IctoY,
.CreateQuest_select__g9fTN {
  width: 100%;

  font-size: 1em;
  font-family: var(--font-family);

  border: none;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--rd-item) / 2);
  padding: 9px 12px;
  color: var(--text-primary);
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
/* 覆寫 autofill 樣式 */
.CreateQuest_input__0kPxx:-webkit-autofill,
.CreateQuest_input__0kPxx:-webkit-autofill:hover,
.CreateQuest_input__0kPxx:-webkit-autofill:focus,
.CreateQuest_input__0kPxx:-webkit-autofill:active,
.CreateQuest_textarea__IctoY:-webkit-autofill,
.CreateQuest_textarea__IctoY:-webkit-autofill:hover,
.CreateQuest_textarea__IctoY:-webkit-autofill:focus,
.CreateQuest_textarea__IctoY:-webkit-autofill:active,
.CreateQuest_select__g9fTN:-webkit-autofill,
.CreateQuest_select__g9fTN:-webkit-autofill:hover,
.CreateQuest_select__g9fTN:-webkit-autofill:focus,
.CreateQuest_select__g9fTN:-webkit-autofill:active {
  background: #31344a !important; /* 維持背景色 */
  -webkit-box-shadow: 0 0 0 30px #31344a inset !important; /* 維持背景色 */
  -webkit-text-fill-color: var(--text-primary) !important; /* 維持文字顏色 */
  border: 1px solid var(--color-border) !important; /* 維持邊框顏色 */
}

/* 標準 autofill（未來兼容性） */
.CreateQuest_input__0kPxx:-webkit-autofill, .CreateQuest_textarea__IctoY:-webkit-autofill, .CreateQuest_select__g9fTN:-webkit-autofill {
  box-shadow: 0 0 0 30px #31344a inset !important; /* 維持背景色 */
  color: var(--text-primary) !important; /* 維持文字顏色 */
  border: 1px solid var(--color-border) !important; /* 維持邊框顏色 */
}
.CreateQuest_input__0kPxx:autofill,
.CreateQuest_textarea__IctoY:autofill,
.CreateQuest_select__g9fTN:autofill {
  box-shadow: 0 0 0 30px #31344a inset !important; /* 維持背景色 */
  color: var(--text-primary) !important; /* 維持文字顏色 */
  border: 1px solid var(--color-border) !important; /* 維持邊框顏色 */
}
.CreateQuest_textarea__IctoY {
  min-height: 100px;
  resize: vertical;
}

.CreateQuest_input__0kPxx:focus,
.CreateQuest_textarea__IctoY:focus,
.CreateQuest_select__g9fTN:focus {
  outline: none;
  border-color: rgba(162, 150, 255, 0.5);
  box-shadow: 0 0 5px 3px rgba(162, 150, 255, 0.1);
}

.CreateQuest_buttonGroup__\+zp-h {
  flex-shrink: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.CreateQuest_formInfo__hlG\+0 {
  width: 100%;
  margin-bottom: 24px;
  padding: 16px;
  border-radius: var(--rd-item);
  background: rgba(162, 150, 255, 0.25);
  border: 1px solid rgba(162, 150, 255, 0.5);
  box-shadow: 0 0 15px rgba(162, 150, 255, 0.2);
  font-size: 0.875em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.CreateQuest_formInfo__hlG\+0 h3 {
  color: #ffffff;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 500;
  text-shadow: 0 0 8px rgba(162, 150, 255, 0.5);
  display: flex;
  align-items: center;
}
.CreateQuest_formInfo__hlG\+0 h3 .imrs-icon {
  margin: -2px 5px 0 0;
}
.CreateQuest_formInfo__hlG\+0 p {
  margin-bottom: 8px;
}

.CreateQuest_formInfo__hlG\+0 p:last-child {
  margin-bottom: 0;
}

.CreateQuest_formInfo__hlG\+0 ol li {
  list-style: decimal inside;
  margin-bottom: 8px;
}
.CreateQuest_deleteButtonCustom__czCSL {
  background-color: #ff5733 !important;
  color: white !important;
  border: 1px solid #ff5733 !important;
}

.CreateQuest_deleteButtonCustom__czCSL:hover {
  background-color: #ff2400 !important;
  border: 1px solid #ff2400 !important;
}

@media (max-width: 700px) {
  .CreateQuest_questContent__Tmxrk {
    width: 100%;
    padding: 100px 0 80px;
  }

  .CreateQuest_gameImage__hIXSH {
    max-height: 100px;
  }
}

.CreateQuest_hint__SlG0k {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.CreateQuest_input__0kPxx[type="date"] {
  /* 自定義日期選擇器的外觀 */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255, 255, 255, 0.8%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%274%27 width=%2718%27 height=%2718%27 rx=%272%27 ry=%272%27%3E%3C/rect%3E%3Cline x1=%2716%27 y1=%272%27 x2=%2716%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%278%27 y1=%272%27 x2=%278%27 y2=%276%27%3E%3C/line%3E%3Cline x1=%273%27 y1=%2710%27 x2=%2721%27 y2=%2710%27%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 20px;
  padding-right: 32px;

  /* 新增寬度限制 */
  width: 160px !important; /* 覆蓋原本的 width: 100% */
  align-self: flex-start; /* 讓日期輸入框靠左對齊 */
}

/* 調整日期輸入框的父容器 */
.CreateQuest_formGroup__Afk8\+:has(.CreateQuest_input__0kPxx[type="date"]) {
  align-items: flex-start; /* 讓內容靠左對齊 */
}

/* 數字輸入框也可以調整寬度 */
.CreateQuest_input__0kPxx[type="number"] {
  width: 120px !important;
  align-self: flex-start;
}

.CreateQuest_formGroup__Afk8\+:has(.CreateQuest_input__0kPxx[type="number"]) {
  align-items: flex-start;
}

.CreateQuest_input__0kPxx[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

/* 確保日期文字顏色正確 */
.CreateQuest_input__0kPxx[type="date"]::-webkit-datetime-edit-text,
.CreateQuest_input__0kPxx[type="date"]::-webkit-datetime-edit-month-field,
.CreateQuest_input__0kPxx[type="date"]::-webkit-datetime-edit-day-field,
.CreateQuest_input__0kPxx[type="date"]::-webkit-datetime-edit-year-field {
  color: #fff;
}

.CreateQuest_error__V2wF3 {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
}

.CreateQuest_gamePreview__GlVGk {
  width: 100%;
  margin-top: calc(var(--gap-mobile) * -1);
  margin-bottom: calc(var(--gap-mobile) * 1.5);
}

.CreateQuest_gamePreview__GlVGk h3 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 8px;
}

.CreateQuest_gameInfo__YXw8g {
  display: flex;

  gap: var(--gap);
  padding: var(--gap);
  border: 1px solid var(--color-border);
  border-radius: var(--rd-item);
}

.CreateQuest_gameTitle__TyRQu {
  color: var(--text-highlight);
  font-size: 1.125em;
  font-weight: 500;
  flex: 1 1;
  width: 60%;
}

.CreateQuest_img__UqJEk {
  width: 100%;
  background-size: cover;
  border-radius: var(--rd-item);
  overflow: hidden;
  width: 40%;
  max-width: 200px;
}
.CreateQuest_img__UqJEk:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}

/* 新增 QuestDetail 樣式 */
.CreateQuest_questDetailArea__MUpgu {
  position: relative;
  max-width: 800px;
  margin: 20px auto;
  padding: 0 16px;
}

.CreateQuest_contentLayer__Je42M {
  background: rgba(0, 0, 0, 0.5);
  min-height: calc(100vh - 40px);
  border-radius: 12px;
  padding: 20px;
}

.CreateQuest_questCard__B9ZJQ {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 0 auto;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.CreateQuest_cardHeader__E-YCM {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.CreateQuest_questTitle__Q8ltw {
  font-size: 1.5rem;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.CreateQuest_cardContent__d1lw5 {
  padding: 16px;
}

.CreateQuest_closeButton__w2u6b {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  font-size: 1.2rem;
  z-index: 10;
}

.CreateQuest_closeButton__w2u6b:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.CreateQuest_actionSection__PLJo8 {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.CreateQuest_actionButton__00llK {
  min-width: 120px;
  padding: 8px 24px;
  border-radius: 5px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
}

.CreateQuest_actionButton__00llK[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 保留原有的表單樣式，但進行調整 */
.CreateQuest_form__MDoos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.CreateQuest_formGroup__Afk8\+ {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CreateQuest_formGroup__Afk8\+ label {
  /* color: rgba(255, 255, 255, 0.9); */
  color: var(--text-highlight);
  font-size: 15px;
  letter-spacing: 0;
}

.CreateQuest_input__0kPxx,
.CreateQuest_textarea__IctoY,
.CreateQuest_select__g9fTN {
  background: rgba(62, 65, 89, 0.1);
  /* border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; */
  /* padding: 8px 12px; */
  color: #fff;
  width: 100%;
}

.CreateQuest_textarea__IctoY {
  min-height: 100px;
  resize: vertical;
}

.CreateQuest_input__0kPxx:focus,
.CreateQuest_textarea__IctoY:focus,
.CreateQuest_select__g9fTN:focus {
  outline: none;
  border-color: rgba(162, 150, 255, 0.5);
  background: rgba(62, 65, 89, 0.3);
  box-shadow: 0 0 8px rgba(162, 150, 255, 0.5);
}

.CreateQuest_hint__SlG0k {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
}

.CreateQuest_error__V2wF3 {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
}

.CreateQuest_gamePreview__GlVGk {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.CreateQuest_gamePreview__GlVGk h3 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}

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

.CreateQuest_gameTitle__TyRQu {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.CreateQuest_gameImage__hIXSH {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

/* 特殊輸入框樣式 */
.CreateQuest_input__0kPxx[type="date"] {
  color: rgba(255, 255, 255, 0.9);
}

.CreateQuest_input__0kPxx[type="number"] {
  color: rgba(255, 255, 255, 0.9);
}

.CreateQuest_input__0kPxx[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
}

@media (max-width: 700px) {
  .CreateQuest_questDetailArea__MUpgu {
    padding: 0 8px;
  }

  .CreateQuest_contentLayer__Je42M {
    padding: 12px;
  }

  .CreateQuest_cardHeader__E-YCM {
    padding: 12px;
  }

  .CreateQuest_cardContent__d1lw5 {
    padding: 12px;
  }

  .CreateQuest_questTitle__Q8ltw {
    font-size: 1.2rem;
  }

  .CreateQuest_formGroup__Afk8\+ label {
    font-size: 13px;
  }

  .CreateQuest_gameImage__hIXSH {
    max-height: 100px;
  }

  .CreateQuest_closeButton__w2u6b {
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

.CreateQuest_gameInputGroup__mJALR {
  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: flex-start;
}

.CreateQuest_searchDropdown__K\+hWz {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(49, 52, 74, 0.98);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--rd-item) / 2);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.CreateQuest_searchItem__0-CDk {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.CreateQuest_searchItem__0-CDk:last-child {
  border-bottom: none;
}

.CreateQuest_searchItem__0-CDk:hover {
  background-color: rgba(162, 150, 255, 0.15);
}

.CreateQuest_searchItemContent__Ehrpg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.CreateQuest_searchItemTitle__oBfll {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.CreateQuest_searchItemId__SXah8 {
  color: var(--text-tertiary);
  font-size: 12px;
}

.CreateQuest_searchLoading__r8rPA {
  padding: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.CreateQuest_searchEmpty__Upj2I {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}
.QuestDetail_questDetailArea__ESmDP {
    position: absolute;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    /* background: rgba(255, 2550, 255, 0.5); */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 50px 20px 0;
    align-items: center;
    justify-content: flex-start;
    left: 0;
    top: 0;
    overflow: hidden;
}
.QuestDetail_questHeader__ESyes {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
}

.QuestDetail_questHeader__ESyes:after {
    content: "";
    position: absolute;
    bottom: 0;
    display: block;

    transform: translateY(1px);
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.QuestDetail_questBody__HmxSz {
    padding: 0;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    flex: 1 1;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(to bottom, rgba(58, 65, 69, 0.5), rgba(47, 51, 56, 0.5), rgba(10, 38, 59, 0.3));
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(89, 107, 177, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    scrollbar-color: #9fc3c682 transparent;
}
/* @media (min-width: 740px) {
    .questBody {
        border-radius: 0 0 12px 12px;
        background: linear-gradient(to bottom, rgba(37, 47, 56, 0.4), rgba(61, 75, 91, 0.3), rgba(10, 38, 59, 0.5));
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(89, 107, 177, 0.08);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }
} */
.QuestDetail_questContainer__Nwycb,
.QuestDetail_rankContainer__SoK8v {
    position: relative;
    z-index: 1;
    width: 100%;
    /* max-width: var(--width-small); */
    margin: 0 auto;
    box-sizing: border-box;

    padding: 0 40px 60px;
    transition: height 0.3s ease-in-out;
}
.QuestDetail_rankContainer__SoK8v {
    padding: 0;
}
@media (min-width: 0) and (max-width: 739px) {
    .QuestDetail_rankContainer__SoK8v {
        padding: 0;
        padding-bottom: calc(60px + 120px);
    }
    .QuestDetail_questContainer__Nwycb {
        padding: 0 40px calc(60px + 120px);
    }
    .QuestDetail_questBody__HmxSz {
        padding-bottom: calc(60px + 20px);
    }
}
@media (min-width: 740px) {
    .QuestDetail_questDetailArea__ESmDP {
        padding: 50px 0;
    }
    .QuestDetail_questHeader__ESyes,
    .QuestDetail_questBody__HmxSz,
    .QuestDetail_questFooter__Fa4Pc {
        width: clamp(600px, 60%, 900px);
    }
}
@media (min-width: 980px) {
    .QuestDetail_questHeader__ESyes,
    .QuestDetail_questBody__HmxSz,
    .QuestDetail_questFooter__Fa4Pc {
        width: clamp(700px, 60%, 900px);
    }
}

.QuestDetail_questCover__9ZynR {
    width: calc(100% - 10px);
    margin: 5px auto 0;
    border-radius: 36px 36px 0 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.QuestDetail_img__T8EhJ {
    background-size: cover;
    background-position: center;
    width: 100%;
}

.QuestDetail_img__T8EhJ::before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
}

.QuestDetail_cardHeader__1LsCE {
    padding: 20px 40px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.QuestDetail_cardHeader__1LsCE::before {
    content: "";
    display: block;
    background: linear-gradient(to bottom, #e0b36600 0%, #3c3665 50%, #282441 100%); /*線性*/
    width: 100%;
    height: 200%;
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
}

.QuestDetail_avatarSection__5mMCc {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 12px;
}

.QuestDetail_decoTitle__RxG05 {
    margin-bottom: 15px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    color: rgba(176, 147, 255, 0.9);
    color: #fff;
}

.QuestDetail_decoTitle__RxG05 strong {
    padding: 2px 10px;
    border-radius: 20px;
    background-color: rgba(125, 78, 255, 0.9);
    color: #fff;
}

.QuestDetail_decoTitle__RxG05::before,
.QuestDetail_decoTitle__RxG05::after {
    content: "";
    flex: 1 1;
    height: 1px;
    background: linear-gradient(to left, #d2eaf5, transparent);
}

.QuestDetail_decoTitle__RxG05::after {
    background: linear-gradient(to right, #d2eaf5, transparent);
}

.QuestDetail_gamePool__PS9kN {
    padding: 10px 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
}

.QuestDetail_avatar__DrJr0 {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    margin: 5px auto;
    box-shadow: 0 0 20px rgba(89, 156, 255, 0.5);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

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

.QuestDetail_creatorName__qMcJb {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.QuestDetail_timestamp__RMJP8 {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    display: block;
    width: 100%;
}

.QuestDetail_questTitle__3AsEc {
    margin: 10px 0;
    font-size: 1.75rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.QuestDetail_cardContent__L-b9B {
    flex: 1 1;
    padding: 20px;
    overflow-y: auto;
    position: relative;
}

.QuestDetail_cardContent__L-b9B::-webkit-scrollbar {
    width: 6px;
}

.QuestDetail_cardContent__L-b9B::-webkit-scrollbar-track {
    background: transparent;
}

.QuestDetail_cardContent__L-b9B::-webkit-scrollbar-thumb {
    background-color: rgba(162, 150, 255, 0.5);
    border-radius: 3px;
}

.QuestDetail_descriptionSection__CP\+TR {
    margin-bottom: 20px;
}

.QuestDetail_description__xrp3s {
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.5;
}

.QuestDetail_rewardSection__UFYej {
    margin-bottom: 20px;
}

.QuestDetail_rewardBadge__Q1oUW {
    display: inline-flex;
    align-items: center;
    padding: 3px 20px;
    border-radius: 40px;
    border: 1px solid #a586d6;
    background: linear-gradient(to bottom, #7e5bb7 0%, #543093 50%, #2d1a51 50.1%, #543093 100%);
    color: #c9a9ff;
    box-shadow: 0 0 15px 5px rgba(84, 48, 147, 0.5);
    text-shadow: 0 0 5px rgba(201, 169, 255, 0.7);
    transition: all 0.3s ease;
}

.QuestDetail_rewardBadge__Q1oUW:hover {
    box-shadow: 0 0 20px 8px rgba(84, 48, 147, 0.7);
}

.QuestDetail_rewardIcon__lAbNb {
    margin-right: 8px;
    font-size: 1.2rem;
    color: #d4baff;
}

.QuestDetail_rewardAmount__t1ciQ {
    color: #f1e9ff;
    font-weight: 600;
}

.QuestDetail_gameCard__OmJ\+E {
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.QuestDetail_gameCover__py9wg {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.QuestDetail_gameInfo__xvyH\+ {
    padding: 16px;
}

.QuestDetail_gameTitle__ewqBG {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.QuestDetail_gameDescription__E6fjF {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
}

.QuestDetail_participantsSection__Llh-J {
    margin-top: 20px;
}

.QuestDetail_sectionTitle__kqIlt {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.QuestDetail_participantsList__6AHf1 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.QuestDetail_participantItem__udEzy {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    /* background: rgba(255, 255, 255, 0.1); */
    /* border-radius: 16px; */

    width: 100%;
    justify-content: space-between;
}

.QuestDetail_participantName__4Zaad {
    color: rgba(255, 255, 255, 0.9);
}

.QuestDetail_statusBadge__dBTCN {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.QuestDetail_statusBadge__dBTCN.QuestDetail_completed__UG\+cW {
    background: rgba(30, 142, 62, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.QuestDetail_statusBadge__dBTCN.QuestDetail_in_progress__XcZB4 {
    background: rgba(249, 168, 37, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.QuestDetail_questFooter__Fa4Pc {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 16px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 5;
    padding-bottom: 25px;
}
@media (min-width: 0) and (max-width: 739px) {
    .QuestDetail_questFooter__Fa4Pc {
        z-index: 10;
        padding-bottom: calc(60px + 25px);
        bottom: 0;
    }
}
@media (min-width: 1500px) {
    .QuestDetail_questFooter__Fa4Pc {
        gap: 30px;
    }
}
.QuestDetail_actionButton__\+mrSg {
    min-width: 120px;
    padding: 12px 28px 10px;
    border-radius: 16px;
    height: 60px;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(0);
    transition: all 0.2s ease;
    background: linear-gradient(to bottom, #6e6e6e 0%, #5c5c5c 50%, #4a4a4a 100%);
    border: 1px solid #8a8a8a;
    box-shadow: 0 0 20px rgba(100, 100, 100, 0.6), 0 0 40px rgba(100, 100, 100, 0.3);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.QuestDetail_actionButton__\+mrSg span {
    color: #eee;
    font-family: var(--font-default);
    font-size: 1.25em;
    letter-spacing: 0.5px;
}

.QuestDetail_actionButton__\+mrSg:hover {
    color: #fff;
    transform: translateY(-2px);
}

.QuestDetail_actionButton__\+mrSg:hover span {
    color: #fff;
}

@keyframes QuestDetail_pulse__k86tr {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    }
}

.QuestDetail_actionButton__\+mrSg.QuestDetail_animated__QZQXl {
    animation: QuestDetail_pulse__k86tr 2s infinite;
}
/* 
.joinButtonCustom:hover {
    background: linear-gradient(to bottom, #ffe45c 0%, #ffd700 50%, #ffc100 100%);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
    color: #222;
}

.joinButtonCustom:active {
    transform: translateY(1px);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    background: linear-gradient(to bottom, #ffc100 0%, #e6a800 50%, #cc9700 100%);
}

.joinButtonCustom {
    background: linear-gradient(to bottom, #ffd700 0%, #ffc100 50%, #e6a800 100%);
    border: 1px solid #ffe45c;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    font-weight: bold;
}

.joinButtonCustom span {
    font-weight: bold;
    color: #222;
}

.joinButtonCustom:hover span {
    color: #222;
} */

.QuestDetail_leaveButtonCustom__pyeFF {
    background: linear-gradient(to bottom, #ff4d4d 0%, #e60000 50%, #b30000 100%);
    border: 1px solid #ff6666;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.6), 0 0 40px rgba(255, 0, 0, 0.3);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.QuestDetail_leaveButtonCustom__pyeFF span {
    font-weight: bold;
    color: #fff;
}

.QuestDetail_leaveButtonCustom__pyeFF:hover {
    color: #fff;
    transform: translateY(-2px);
}

.QuestDetail_editButtonCustom__04KJp {
    background-color: #2196f3;
    color: white;
}

.QuestDetail_deleteButtonCustom__j5cWb {
    background-color: #d32f2f;
    color: white;
}

.QuestDetail_leaveButtonCustom__pyeFF:hover span {
    color: #fff;
}

.QuestDetail_actionButton__\+mrSg[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.QuestDetail_modalContent__YivHj {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

.QuestDetail_modalActions__1JPYQ {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.QuestDetail_cancelButton__f2B78 {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.QuestDetail_confirmButton__5k0Hu {
    padding: 8px 16px;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    background: #ff4d4f;
    color: white;
    cursor: pointer;
}

.QuestDetail_cancelButton__f2B78:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.QuestDetail_confirmButton__5k0Hu:hover {
    background: #ff7875;
    border-color: #ff7875;
}

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

.QuestDetail_statusLabel__qdRKi {
    color: rgba(255, 255, 255, 0.7);
}

.QuestDetail_closeButton__TA3MW {
    position: absolute;
    top: 70px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    font-size: 1.2rem;
    z-index: 10;
}

.QuestDetail_closeButton__TA3MW:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 1);
}

.QuestDetail_completionDetails__\+hAYt {
    display: flex;
    align-items: center;
    gap: 8px;
}

.QuestDetail_completionScore__Dl8F4 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.25em;
    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px, #9cdbf6 0px 0px 20px;
    font-size: 1.25em;
}

.QuestDetail_notFoundMessage__AZPa3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.QuestDetail_notFoundMessage__AZPa3 h2 {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

.QuestDetail_notFoundMessage__AZPa3 p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
    font-size: 1.1rem;
}

.QuestDetail_questEnd__RAJNy {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 12px 20px;
    border-radius: 12px;
    background: linear-gradient(to bottom, rgba(80, 80, 80, 0.3) 0%, rgba(60, 60, 60, 0.4) 50%, rgba(40, 40, 40, 0.5) 100%);
    border: 1px solid rgba(100, 100, 100, 0.3);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.QuestDetail_questEnd__RAJNy p {
    color: rgba(200, 200, 200, 0.7);
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.QuestDetail_remainTime__Lobkr {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 12px 20px;
    border-radius: 12px;
    background: linear-gradient(to bottom, rgba(255, 184, 76, 0.3) 0%, rgba(255, 153, 0, 0.4) 50%, rgba(204, 122, 0, 0.5) 100%);
    border: 1px solid rgba(255, 184, 76, 0.4);
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.4);
    font-family: "Quantico", sans-serif;
}

.QuestDetail_remainTime__Lobkr p {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.QuestDetail_remainLabel__JMBDZ {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.QuestDetail_remainTime__Lobkr span.QuestDetail_remainTime__Lobkr {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    animation: QuestDetail_pulseText__\+UZWa 2s infinite;
}

.QuestDetail_remainTimeValue__q3TWw {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 215, 0, 0.5);
    animation: QuestDetail_pulseText__\+UZWa 2s infinite;
}

@keyframes QuestDetail_pulseText__\+UZWa {
    0% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 15px rgba(255, 215, 0, 0.5);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 215, 0, 0.8);
    }
    100% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 15px rgba(255, 215, 0, 0.5);
    }
}

.QuestDetail_shareButtonCustom__cjTc- {
    min-width: 60px;
    padding: 12px 28px 10px;
    border-radius: 16px;
    height: 60px;
    font-weight: 600;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(0);
    transition: all 0.2s ease;
    background: linear-gradient(to bottom, #6e6e6e 0%, #5c5c5c 50%, #4a4a4a 100%);
    border: 1px solid #8a8a8a;
    box-shadow: 0 0 20px rgba(100, 100, 100, 0.6), 0 0 40px rgba(100, 100, 100, 0.3);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
}

.QuestDetail_shareButtonCustom__cjTc- .QuestDetail_shareIcon__2md5E {
}

.QuestDetail_shareButtonCustom__cjTc- span {
    color: #eee;
    font-family: var(--font-default);
    font-size: 1.25em;
    font-weight: normal;
    letter-spacing: 0.5px;
    display: none;
}

.QuestDetail_shareButtonCustom__cjTc-:hover {
    color: #fff;
    transform: translateY(-2px);
}

.QuestDetail_shareButtonCustom__cjTc-:hover span {
    color: #fff;
}

/* Quest Ranking Styles */
.QuestDetail_questRankingContainer__Wvl\+t {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* .questContainer {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
} */

.QuestDetail_cardHeader__1LsCE {
    margin-bottom: 30px;
    text-align: center;
}

.QuestDetail_questTitle__3AsEc {
    font-size: clamp(24px, 3.5vh, 48px);
    color: #ffffff;
    margin: 0;
    padding: 30px 0 10px;
    font-weight: 500;

    text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px, #9cdbf6 0px 0px 20px;
}

.QuestDetail_rankingHeader__AqBYU {
    text-align: center;

    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.QuestDetail_rankingHeader__AqBYU p {
    font-size: 18px;
    color: #ffffff;
    margin: 0;
}

.QuestDetail_rankingList__L0Qa6 {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-family: "Quantico", "Noto Sans TC", "PingFang", "PingFangTC", sans-serif;
}

.QuestDetail_rankingItem__8I3Q3 {
    display: flex;
    background: linear-gradient(to bottom, rgba(8, 36, 38, 0.4) 0%, rgba(31, 66, 61, 0.5) 50%, rgba(2, 14, 15, 0.55) 100%);
    align-items: center;

    position: relative;
    padding: 0 15px;
}
@media (min-width: 740px) {
    .QuestDetail_rankingItem__8I3Q3 {
        padding-left: 25px;
    }
}
@media (min-width: 740px) and (min-height: 800px) and (orientation: landscape) {
    .QuestDetail_rankingItem__8I3Q3 {
        min-height: 50px;
    }
}
.QuestDetail_rankingItem__8I3Q3.QuestDetail_currentUser__vGZqe {
    background: linear-gradient(to right, rgba(124, 98, 198, 0.4), rgba(147, 112, 219, 0.3));
    border: 2px solid rgba(147, 112, 219, 0.8);
    box-shadow: 0 0 20px rgba(124, 98, 198, 0.4), inset 0 0 10px rgba(147, 112, 219, 0.2);
    transform: scale(1.02);
    position: relative;
}

.QuestDetail_rankingItem__8I3Q3.QuestDetail_currentUser__vGZqe::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 12px;
    background: linear-gradient(45deg, rgba(124, 98, 198, 0.5), rgba(147, 112, 219, 0.5), rgba(124, 98, 198, 0.5));
    z-index: -1;
    animation: QuestDetail_borderGlow__DH5FZ 2s ease-in-out infinite;
}

@keyframes QuestDetail_borderGlow__DH5FZ {
    0% {
        opacity: 0.5;
        box-shadow: 0 0 10px rgba(124, 98, 198, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(147, 112, 219, 0.5);
    }
    100% {
        opacity: 0.5;
        box-shadow: 0 0 10px rgba(124, 98, 198, 0.3);
    }
}

.QuestDetail_rankingItem__8I3Q3:hover {
    background: rgba(255, 255, 255, 0.1);
}

.QuestDetail_rankingItem__8I3Q3.QuestDetail_currentUser__vGZqe:hover {
    background: linear-gradient(to right, rgba(124, 98, 198, 0.5), rgba(147, 112, 219, 0.4));
    box-shadow: 0 0 25px rgba(124, 98, 198, 0.5), inset 0 0 15px rgba(147, 112, 219, 0.3);
}

.QuestDetail_rankNumber__AG8pE {
    font-size: 20px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 20px;
    min-width: 70px;
}

@media screen and (max-width: 739px) {
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(1) .QuestDetail_rankNumber__AG8pE {
        background: linear-gradient(to bottom, rgba(249, 202, 17, 0.7) 0%, rgb(255, 231, 134) 50%, rgba(249, 202, 17, 0.7) 100%);
        color: rgb(82, 77, 59);
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(2) .QuestDetail_rankNumber__AG8pE {
        background: linear-gradient(to bottom, rgba(113, 121, 126, 0.9) 0%, rgba(192, 192, 192, 0.8) 50%, rgba(113, 121, 126, 0.9) 100%);
        color: rgb(68, 81, 89);
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(3) .QuestDetail_rankNumber__AG8pE {
        background: linear-gradient(to bottom, rgba(105, 64, 7, 0.8) 0%, rgba(227, 145, 62, 0.8) 50%, rgba(105, 64, 7, 0.8) 100%);
        color: rgb(81, 47, 0);
    }
}
@media screen and (min-width: 740px) {
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(1)::before,
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(2)::before,
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(3)::before {
        content: "";
        display: block;
        position: absolute;
        width: 5px;
        height: 100%;
        left: 0;
        top: 0;
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(1) .QuestDetail_rankNumber__AG8pE {
        background: linear-gradient(to bottom, rgba(249, 202, 17, 1) 0%, rgb(255, 231, 134) 50%, rgba(249, 202, 17, 1) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 26px;
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(1)::before {
        background: linear-gradient(to bottom, rgba(249, 202, 17, 0.7) 0%, rgb(255, 231, 134) 50%, rgba(249, 202, 17, 0.7) 100%);
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(2) .QuestDetail_rankNumber__AG8pE {
        background: linear-gradient(to bottom, rgba(175, 187, 195, 0.9) 0%, rgba(236, 236, 236, 0.8) 50%, rgb(156, 165, 170) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 24px;
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(2)::before {
        background: linear-gradient(to bottom, rgba(113, 121, 126, 0.9) 0%, rgba(192, 192, 192, 0.8) 50%, rgba(113, 121, 126, 0.9) 100%);
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(3) .QuestDetail_rankNumber__AG8pE {
        background: linear-gradient(to bottom, rgba(132, 78, 23, 0.8) 0%, rgba(255, 173, 91, 0.8) 50%, rgba(166, 103, 40, 0.8) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 22px;
    }
    .QuestDetail_rankingItem__8I3Q3:nth-of-type(3)::before {
        background: linear-gradient(to bottom, rgba(105, 64, 7, 0.8) 0%, rgba(227, 145, 62, 0.8) 50%, rgba(105, 64, 7, 0.8) 100%);
    }
}

/* 參與者項目樣式覆蓋 */
.QuestDetail_participantItem__udEzy {
    display: flex;
    align-items: center;
    flex: 1 1;
    color: #ffffff;
}

.QuestDetail_participantName__4Zaad {
    font-size: 16px;
    color: #ffffff;
    margin-right: 15px;
}

.QuestDetail_statusBadge__dBTCN {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    margin: 0 10px;
}

.QuestDetail_statusBadge__dBTCN.QuestDetail_completed__UG\+cW {
    background: rgba(46, 213, 115, 0.2);
    color: #2ed573;
}

.QuestDetail_statusBadge__dBTCN.QuestDetail_joined__PvcO4 {
    background: rgba(86, 128, 233, 0.2);
    color: #5680e9;
}

.QuestDetail_completionDetails__\+hAYt {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 學習歷程按鈕樣式 */
.QuestDetail_completionDetails__\+hAYt button {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.QuestDetail_completionDetails__\+hAYt button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* 查看排行榜按鈕樣式 */
.QuestDetail_viewRankingButton__rSzOj {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(74, 144, 226, 0.2);
    color: #ffffff;
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.QuestDetail_viewRankingButton__rSzOj:hover {
    background: rgba(74, 144, 226, 0.3);
    border-color: rgba(74, 144, 226, 0.4);
}

.QuestDetail_viewMoreSection__EC5yk {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.QuestDetail_progressGrid__OlJ8t {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 10px 0;
}

.QuestDetail_progressHeader__x52ma {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    white-space: nowrap;
}

.QuestDetail_progressBoxes__fxXax {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.QuestDetail_progressBox__6DkMs {
    /* width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    margin: 0 2px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 30px;
    border-radius: 8px;
    padding: 0;
    width: 40px;
    font-size: 0.875em;
    font-family: "apparat", sans-serif;
    line-height: 1;
    font-weight: normal;
}

.QuestDetail_progressBox__6DkMs::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.QuestDetail_progressBox__6DkMs:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: 125%;
}

.QuestDetail_progressBox__6DkMs.QuestDetail_completed__UG\+cW {
    /* background: rgba(255, 215, 0, 0.3); */
    border-color: #2fc1fb;
}

.QuestDetail_progressBox__6DkMs.QuestDetail_current__64EwF {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.QuestDetail_progressBox__6DkMs:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0, 221, 255, 0.5);
}

.QuestDetail_progressBox__6DkMs.QuestDetail_completed__UG\+cW:hover {
    background: #2fc1fb;
}

.QuestDetail_progressBox__6DkMs span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 0) and (max-width: 739px) {
    .QuestDetail_rankingItem__8I3Q3 {
        position: relative;
        padding-left: 80px;
        overflow: hidden;
    }
    .QuestDetail_participantItem__udEzy {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
    }
    .QuestDetail_progressGrid__OlJ8t {
        margin: 0;
    }
    .QuestDetail_completionScore__Dl8F4 {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.25em;
        text-shadow: #cef 0px 0px 5px, #4d5b90 0px 0px 10px, #4778ab 0px 0px 15px, #9cdbf6 0px 0px 20px;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .QuestDetail_rankNumber__AG8pE {
        position: absolute;
        width: 70px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: linear-gradient(to bottom, rgba(133, 194, 220, 0.5) 0%, rgba(175, 214, 224, 0.8) 50%, rgba(94, 192, 201, 0.3) 100%);
        left: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        color: #10303d;
        text-align: center;
        justify-content: center;
    }
}

/* 基礎按鈕樣式 */
.QuestDetailDisplay_btnSystem__waS\+l {
  min-width: 120px;
  padding: 12px 28px 10px;
  border-radius: 16px;
  height: 60px;
  font-weight: 600;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(0);
  transition: all 0.2s ease;
  background: linear-gradient(to bottom, #6e6e6e 0%, #5c5c5c 50%, #4a4a4a 100%);
  border: 1px solid #8a8a8a;
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.6),
    0 0 40px rgba(100, 100, 100, 0.3);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
}

.QuestDetailDisplay_btnSystem__waS\+l span {
  color: #eee;
  font-family: var(--font-default);
  font-size: 1.25em;
  letter-spacing: 0.5px;
}

.QuestDetailDisplay_btnSystem__waS\+l:hover {
  color: #fff;
  transform: translateY(-2px);
}

.QuestDetailDisplay_btnSystem__waS\+l:hover span {
  color: #fff;
}

.QuestDetailDisplay_btnSystem__waS\+l:active {
  transform: translateY(1px);
}

.QuestDetailDisplay_btnSystem__waS\+l[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 大尺寸按鈕 */
.QuestDetailDisplay_large__n5PtD {
  min-width: 140px;
  font-size: 1.1em;
}

/* 退出任務按鈕樣式 */
.QuestDetailDisplay_leaveButtonCustom__8lS6w {
  background: linear-gradient(to bottom, #ff4d4d 0%, #e60000 50%, #b30000 100%);
  border: 1px solid #ff6666;
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.6), 0 0 40px rgba(255, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.QuestDetailDisplay_leaveButtonCustom__8lS6w span {
  font-weight: bold;
  color: #fff;
}

.QuestDetailDisplay_leaveButtonCustom__8lS6w:hover {
  background: linear-gradient(to bottom, #ff6666 0%, #ff1a1a 50%, #cc0000 100%);
  box-shadow: 0 0 25px rgba(255, 77, 77, 0.8), 0 0 50px rgba(255, 0, 0, 0.4);
  transform: translateY(-2px);
}

.QuestDetailDisplay_leaveButtonCustom__8lS6w:hover span {
  color: #fff;
}

.QuestDetailDisplay_leaveButtonCustom__8lS6w:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(255, 77, 77, 0.5);
  background: linear-gradient(to bottom, #cc0000 0%, #b30000 50%, #990000 100%);
}

/* 參加任務按鈕樣式 */
.QuestDetailDisplay_joinButtonCustom__YG3xw {
  background: linear-gradient(to bottom, #ffd700 0%, #ffc100 50%, #e6a800 100%);
  border: 1px solid #ffe45c;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
  font-weight: bold;
}

.QuestDetailDisplay_joinButtonCustom__YG3xw span {
  font-weight: bold;
  color: #222;
}

.QuestDetailDisplay_joinButtonCustom__YG3xw:hover {
  background: linear-gradient(to bottom, #ffe45c 0%, #ffd700 50%, #ffc100 100%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
}

.QuestDetailDisplay_joinButtonCustom__YG3xw:hover span {
  color: #222;
}

.QuestDetailDisplay_joinButtonCustom__YG3xw:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  background: linear-gradient(to bottom, #ffc100 0%, #e6a800 50%, #cc9700 100%);
}

/* 呼吸動畫效果 */
@keyframes QuestDetailDisplay_pulse__M7Tzm {
  0% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.3);
  }
}

.QuestDetailDisplay_animated__jO1ID {
  animation: QuestDetailDisplay_pulse__M7Tzm 2s infinite;
}

/* 編輯任務按鈕樣式 */
.QuestDetailDisplay_editButtonCustom__i2FDv {
  background: linear-gradient(to bottom, #4fc3f7 0%, #2196f3 50%, #1976d2 100%);
  border: 1px solid #64b5f6;
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.6), 0 0 40px rgba(33, 150, 243, 0.3);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.QuestDetailDisplay_editButtonCustom__i2FDv span {
  font-weight: bold;
  color: #fff;
}

.QuestDetailDisplay_editButtonCustom__i2FDv:hover {
  background: linear-gradient(to bottom, #64b5f6 0%, #42a5f5 50%, #2196f3 100%);
  box-shadow: 0 0 25px rgba(33, 150, 243, 0.8), 0 0 50px rgba(33, 150, 243, 0.4);
  transform: translateY(-2px);
}

.QuestDetailDisplay_editButtonCustom__i2FDv:hover span {
  color: #fff;
}

.QuestDetailDisplay_editButtonCustom__i2FDv:active {
  transform: translateY(1px);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
  background: linear-gradient(to bottom, #2196f3 0%, #1976d2 50%, #1565c0 100%);
}

/* 響應式設計 */
@media (max-width: 700px) {
  .QuestDetailDisplay_btnSystem__waS\+l {
    flex: 1 1;
    padding: 8px 10px;
    height: 45px;
    min-width: 100px;
  }

  .QuestDetailDisplay_btnSystem__waS\+l span {
    font-size: 1em;
  }

  .QuestDetailDisplay_large__n5PtD {
    min-width: 110px;
    font-size: 1em;
  }
}

.GameCard_gameCard__tFoGn {
    display: flex;
    background: var(--color-bg-post);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    margin: 6px;
    width: calc(33.33% - 12px); /* 每行顯示三個卡片 */
    min-width: 280px;
    max-width: 400px; /* 限制最大寬度 */
    flex-direction: column;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
}
.GameCard_gameCard__tFoGn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.GameCard_coverHolder__eIrnf {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
}
.GameCard_coverHolder__eIrnf::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.5));
    pointer-events: none;
}
.GameCard_textHolder__IsEmg {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.GameCard_desc__2yNOY {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: 1.375em;
    -webkit-box-orient: vertical;
    color: rgba(255, 255, 255, 0.9); /* 淺色文字 */
    font-size: 0.875em;
    margin-top: 4px;
}

.GameCard_title__aK\+4E {
    font-size: 1em;
    line-height: 1.25em;
    color: #ffffff; /* 白色標題 */
    padding-bottom: calc(var(--gap) / 2);
    display: block;
    cursor: pointer;
    transition: color 0.2s ease;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.GameCard_title__aK\+4E span {
    display: inline-flex;
    background-color: var(--color-highlight-third);
    color: var(--color-bg-main);
    font-size: 0.6875em;
    vertical-align: middle;
    border-radius: 4px;
    padding: 3px 5px 2px;
    margin: -3px 0 0 5px;
    line-height: 1.125em;
    font-weight: bold;
}
.GameCard_coverImage__A3hke {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    cursor: pointer;
}
.GameCard_coverImage__A3hke:before {
    display: none; /* 移除原有的寬高比限制 */
}
.GameCard_coverHolder__eIrnf:hover .GameCard_coverImage__A3hke {
    transform: scale(1.1);
}

.GameCard_labelContainer__wjFvh {
    padding-top: calc(var(--gap) / 2);
    padding-bottom: calc(var(--gap));
}
.GameCard_label__0gtV6 {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 6px 0;
    height: 18px;
    box-sizing: border-box;
    color: var(--color-highlight-second);
    position: relative;
    border: 1px solid var(--color-highlight-third);
    border-radius: var(--rd-item);
    cursor: pointer;
    margin-right: 3px;
}

.GameCard_labelContainer__wjFvh .GameCard_label__0gtV6:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-main);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--rd-item);
    opacity: 0.2;
}
.GameCard_labelContainer__wjFvh .GameCard_label__0gtV6:hover {
    opacity: 0.8;
}

.GameCard_coverHolder__eIrnf,
.GameCard_title__aK\+4E,
.GameCard_desc__2yNOY {
    cursor: pointer;
}

.GameCard_coverHolder__eIrnf:hover,
.GameCard_title__aK\+4E:hover,
.GameCard_desc__2yNOY:hover {
    opacity: 0.9;
}

.GameCard_gameCard__tFoGn.GameCard_disabled__bND9f {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.GameCard_gameCard__tFoGn.GameCard_disabled__bND9f .GameCard_coverHolder__eIrnf,
.GameCard_gameCard__tFoGn.GameCard_disabled__bND9f .GameCard_title__aK\+4E,
.GameCard_gameCard__tFoGn.GameCard_disabled__bND9f .GameCard_desc__2yNOY {
    cursor: not-allowed;
}

.GameCard_gameCard__tFoGn.GameCard_disabled__bND9f:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.GameCard_gameCard__tFoGn.GameCard_disabled__bND9f .GameCard_coverHolder__eIrnf:hover .GameCard_coverImage__A3hke {
    transform: none;
}
.GameCard_count__9Xn3- {
    font-size: 0.75em;
    opacity: 0.5;
}
@media (min-width: 0px) and (max-width: 700px) and (orientation: portrait) {
    .GameCard_gameCard__tFoGn {
        width: 100%;
        max-width: 100%;
        margin: 6px 0;
    }

    .GameCard_coverHolder__eIrnf {
        height: 140px;
    }

    .GameCard_title__aK\+4E {
        font-size: 0.9em;
    }

    .GameCard_desc__2yNOY {
        font-size: 0.8em;
    }
}
@media (min-width: 701px) and (max-width: 1024px) {
    .GameCard_gameCard__tFoGn {
        width: calc(50% - 12px); /* 平板上每行顯示兩個卡片 */
    }
}
@media (min-width: 1600px) and (min-height: 800px) {
    /* .textHolder {
        padding: 40px;
    } */
}

.GameCard_gameCard__tFoGn.GameCard_collection__-Vc8j .GameCard_coverHolder__eIrnf {
    position: relative;
    isolation: isolate;
}
/* .gameCard.collection .coverHolder:after {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid var(--color-highlight-third);
    box-sizing: border-box;
}
.gameCard.collection .coverHolder:after {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: calc(var(--rd-area) * 0.8);
    left: 6px;
    top: 6px;
} */
.GameCard_gameAttachment__Vx8K8 {
    background-color: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.1);
}
.GameCard_questAttachment__QG9Jj {
    background-color: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.1);
}
.GameCard_learningJourneyAttachment__gH8d3 {
    background-color: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
}
.GameCard_urlAttachment__s-sh3 {
    background-color: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.1);
}
.GameCard_otherAttachment__QGKTR {
    background-color: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.1);
}

.VersionBadge_versionBadge__BCo23 {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  -webkit-user-select: none;
          user-select: none;
  pointer-events: none;
}

.VersionBadge_label__u2ldN {
  opacity: 0.7;
  font-weight: 500;
}

.VersionBadge_version__2oi7S {
  font-weight: 600;
  color: #60a5fa;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .VersionBadge_versionBadge__BCo23 {
    bottom: 12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }
}


.InsightDashboard_dashboard_container__XKTf5 {
  min-height: 100vh;
  padding: 1.5rem;
  background-color: #f8f9fa;
}

.InsightDashboard_dashboard_header__rbkT6 {
  background-color: white;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.InsightDashboard_dashboard_title__4-wsE {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.5rem;
}

.InsightDashboard_dashboard_date__het5Z {
  font-size: 0.875rem;
  color: #64748b;
}

.InsightDashboard_unified_container__Laq4h {
  background-color: white;
  padding: 2rem;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.InsightDashboard_controls_grid__qneER {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: start;
}

.InsightDashboard_input_group__n-ftY {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.InsightDashboard_input_label__Zx-UZ {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

@media (max-width: 640px) {
  .InsightDashboard_controls_grid__qneER {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .InsightDashboard_input_group__n-ftY {
    width: 100%;
  }

  .InsightDashboard_date_input__oisAj,
  .InsightDashboard_select_input__6a124 {
    min-width: 100%;
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .InsightDashboard_controls_grid__qneER {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

/* 大螢幕 */
@media (min-width: 1025px) {
  .InsightDashboard_controls_grid__qneER {
    grid-template-columns: repeat(3, 1fr);
  }
}

.InsightDashboard_date_input__oisAj,
.InsightDashboard_select_input__6a124 {
  -webkit-appearance: none;
  appearance: none;
  padding: 0.75rem 1rem;
  border: 1px solid #E5E7EB;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #111827;
  background-color: white;
  transition: all 0.2s;
}

.InsightDashboard_date_input__oisAj {
  position: relative;
  padding-right: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 24 24%27 stroke=%27%236B7280%27%3E%3Cpath stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z%27%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  font-size: 1rem;
}

.InsightDashboard_date_input__oisAj::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.InsightDashboard_select_input__6a124 {
  padding-right: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 24 24%27 stroke=%27%236B7280%27%3E%3Cpath stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M19 9l-7 7-7-7%27%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  font-size: 1rem;
}

.InsightDashboard_date_input__oisAj:focus,
.InsightDashboard_select_input__6a124:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}
@media (max-width: 768px) {
  .InsightDashboard_time-selector-grid__zPQ0U {
      flex-direction: column;
      gap: 1rem;
  }
  
  .InsightDashboard_input-group__Xi59- {
      width: 100%;
  }
}

.InsightDashboard_charts_grid__M7ZRq {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  .InsightDashboard_charts_grid__M7ZRq {
    grid-template-columns: 1fr;
  }
}

.InsightDashboard_chart_container__ZCkSK {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),
              0 1px 2px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease-in-out;
  position: relative;
}

.InsightDashboard_chart_container__ZCkSK.InsightDashboard_large__JgrZE {
  grid-column: 1 / -1;
  min-height: 400px;
}

.InsightDashboard_footer_charts_grid__1j7FR {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.InsightDashboard_lower_charts_grid__CwOro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem;
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .InsightDashboard_lower_charts_grid__CwOro {
    grid-template-columns: 1fr;
  }
}


.InsightDashboard_chart_container__ZCkSK:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
              0 2px 4px rgba(0, 0, 0, 0.06);
}

.InsightDashboard_chart_title__9KbYb {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 1.25rem;
}
.InsightDashboard_chart_subtitle__unF2M {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 1.25rem;
}

.InsightDashboard_chart_wrapper__g\+xs6 {
  width: 100%;
  min-height: 400px;
  margin-bottom: 1rem;
}

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

@media (max-width: 768px) {
  .InsightDashboard_metrics_grid__b6Bo5 {
    grid-template-columns: 1fr;
  }
}

.InsightDashboard_metric_card__B\+oR5 {
  background-color: #f8fafc;
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-in-out;
}

.InsightDashboard_metric_card__B\+oR5:hover {
  transform: translateY(-2px);
}

.InsightDashboard_metric_label__\+6L-k {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 0.5rem;
}

.InsightDashboard_metric_value__BQSOS {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
}

.InsightDashboard_legend_container__tpCEO {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75rem;
  gap: 0.75rem;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
}

.InsightDashboard_legend_item__\+o99R {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.375rem;
  min-width: 0;
}

.InsightDashboard_legend_color__F3EGE {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.InsightDashboard_legend_label__3-6Jl {
  font-size: 0.875rem;
  color: #4a5568;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  line-height: 1.25;
}

.InsightDashboard_buttons_wrapper__aTRP\+ {
  display: flex;
  gap: 0.5rem;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.InsightDashboard_button_base__fhkjd {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.InsightDashboard_button_csv__fHtpT {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #439c73;
}
.InsightDashboard_button_csv__fHtpT:hover {
  background-color: #e2e8f0;
}

.InsightDashboard_button_json__BNAwv {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #295196;
}
.InsightDashboard_button_json__BNAwv:hover {
  background-color: #e2e8f0;
}

.InsightDashboard_notification_container__xTFPG {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
}

.InsightDashboard_notification__SDUhC {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-left-width: 4px;
  border-color: #E5E7EB;
  width: 24rem;
  display: flex;
  align-items: flex-start;
  animation: InsightDashboard_slide-in__Q\+izO 0.3s ease-out;
}

.InsightDashboard_notification_icon__RbpCg {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.InsightDashboard_notification_content__e2lOP {
  flex: 1 1;
  min-width: 0;
  padding: 1rem;
}

.InsightDashboard_notification_title__6gdRQ {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight: 500;
}

.InsightDashboard_notification_message__jKYVu {
  font-size: 0.875rem;
  color: #111827;
  margin-top: 0.25rem;
}

.InsightDashboard_notification_close__x5yP9 {
  margin-left: 1rem;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  flex-shrink: 0;
  display: flex;
  padding: 0.375rem;
  border-radius: 9999px;
  transition: background-color 0.2s;
}

.InsightDashboard_notification_close__x5yP9:hover {
  background-color: #F3F4F6;
}

.InsightDashboard_notification_close__x5yP9 svg {
  width: 1rem;
  height: 1rem;
  color: #9CA3AF;
}

@keyframes InsightDashboard_slide-in__Q\+izO {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.InsightDashboard_notification__SDUhC + .InsightDashboard_notification__SDUhC {
  margin-top: 1rem;
}
/* 表格樣式 */
.SDGSRank_rank_table__WBw46 {
  width: 100%;
  border-collapse: collapse;
}

.SDGSRank_table_header__gcijE {
  background-color: #f0f9ff;
}

.SDGSRank_table_header__gcijE th {
  padding: 0.5rem;
  text-align: left;
  border: 1px solid #d1d5db;
  color: #0369a1; /* 更換為海藍色 */
  font-weight: 600; /* 加粗 */
}

.SDGSRank_table_header__gcijE th:last-child {
  text-align: right;
}

.SDGSRank_table_row_even__-cbC5 {
  background-color: #ffffff;
}

.SDGSRank_table_row_odd__RyzK5 {
  background-color: #f8fafc;
}

.SDGSRank_table_cell__gA5yR {
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  color: #1f2937;
}

.SDGSRank_table_cell_right__rzaaB {
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  text-align: right;
  color: #1f2937;
}

.SDGSRank_table_container__g\+O0i {
  overflow-x: auto;
  position: relative;
}

/* 載入覆蓋層 */
.SDGSRank_loading_overlay__XA30T {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 標題樣式 */
.SDGSRank_dashboard_title__02zJe {
  color: #0369a1; /* 更換為海藍色 */
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.SDGSRank_dashboard_subtitle__FGPS6 {
  color: #64748b;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.SDGSRank_chart_title__GVkSf {
  color: #0369a1; /* 更換為海藍色 */
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
}

/* 分頁樣式 */
.SDGSRank_pagination_container__oC\+HQ {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.SDGSRank_pagination_button__kg723 {
  padding: 0.375rem 0.75rem;
  margin: 0 0.25rem;
  background-color: #f1f5f9;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.SDGSRank_pagination_button__kg723:hover:not(:disabled) {
  background-color: #e2e8f0;
}

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

.SDGSRank_pagination_text__sCJEr {
  margin: 0 0.5rem;
}

.SDGSRank_no_data__jh90N {
  text-align: center;
  padding: 1rem;
}

.SDGSRank_loading__OA79x {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16rem;
} 
/* 最終調整的 CSS 樣式 */

.RankDashboard_dashboard__22vfC {
  padding: 1.5rem;
  background-color: #f8f9fa;
}

.RankDashboard_gridContainer__9XzzC {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .RankDashboard_gridContainer__9XzzC {
    grid-template-columns: 1fr 1fr;
  }
}

.RankDashboard_card__0SMt7 {
  background-color: white;
  padding: 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.RankDashboard_cardTitle__CEOdF {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}
.RankDashboard_cardSubtitle__vw5PM {
  color: #637185;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.RankDashboard_table__DmjG8 {
  width: 100%;
  border-collapse: collapse;
  border-radius: 4px;
  overflow: hidden;
  table-layout: fixed; /* 固定表格佈局 */
}

.RankDashboard_tableHeader__CUPYU {
  background-color: #f1f2f6;
}

.RankDashboard_tableHeaderCell__7usSe {
  padding: 0.5rem;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap; /* 防止表頭文字換行 */
}

.RankDashboard_tableRowEven__\+nO1g {
  background-color: white;
}

.RankDashboard_tableRowOdd__os7Rs {
  background-color: #f8f9fa;
}

.RankDashboard_tableCell__qtFGr {
  padding: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  color: #444;
}

.RankDashboard_rankCell__00TsU {
  font-weight: 600;
  text-align: center;
  min-width: 2.5em; /* 縮小排名欄位寬度 */
  width: 8%; /* 縮小百分比 */
  white-space: nowrap;
}

.RankDashboard_nameCell__jaB5g {
  min-width: 4em; /* 保持姓名欄位寬度不變 */
  width: 18%;
  white-space: nowrap;
}

.RankDashboard_schoolCell__0QZhJ {
  width: 60%; /* 增加學校欄位寬度 */
  min-width: 5em;
}

.RankDashboard_scoreCell__G0IVY {
  font-weight: 500;
  text-align: right;
  min-width: 3em; /* 縮小積分欄位寬度 */
  width: 14%; /* 縮小百分比 */
  white-space: nowrap;
}

/* 金銀銅牌樣式 */
.RankDashboard_goldMedal__omhDN {
  color: #fff;
  background-color: #ffc107;
  font-weight: 700;
}

.RankDashboard_silverMedal__tH6A2 {
  color: #fff;
  background-color: #6c757d;
  font-weight: 700;
}

.RankDashboard_bronzeMedal__mzusJ {
  color: #fff;
  background-color: #cd7f32;
  font-weight: 700;
}
/* src/components/DataInsight/Utility/RankDisplay.module.css */
.RankDisplay_container__Zc8Kw {
  font-family: sans-serif;
  padding: 20px;
  background-color: #f8f9fa; /* 淺灰色背景 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 800px; /* 限制最大寬度 */
  margin: 20px auto; /* 頁面居中 */
}

.RankDisplay_section__Is5ws {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #ffffff; /* 白色背景 */
  border: 1px solid #dee2e6; /* 淺灰色邊框 */
  border-radius: 4px;
}

.RankDisplay_searchForm__zwmP5 {
  display: flex;
  gap: 10px; /* 輸入框和按鈕間距 */
  margin-bottom: 15px;
  align-items: center;
}

.RankDisplay_input__YX1WB {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  flex-grow: 1; /* 讓輸入框填滿可用空間 */
}

.RankDisplay_button__0nc0I {
  padding: 8px 15px;
  background-color: #007bff; /* 主題藍色 */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.RankDisplay_button__0nc0I:hover {
  background-color: #0056b3; /* 深一點的藍色 */
}

.RankDisplay_clearButton__HJoIY {
  background-color: #6c757d; /* 灰色 */
}
.RankDisplay_clearButton__HJoIY:hover {
  background-color: #5a6268;
}

.RankDisplay_error__JxuDw {
  color: #dc3545; /* 紅色錯誤訊息 */
  font-weight: bold;
}

.RankDisplay_playerList__qOn9N {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.RankDisplay_playerItem__TeBsS {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #eee; /* 分隔線 */
  background-color: #fff;
}

.RankDisplay_playerItem__TeBsS:last-child {
  border-bottom: none;
}

.RankDisplay_highlight__bVPlI {
  background-color: #fff3cd; /* 淡黃色高亮 */
  font-weight: bold;
  border-left: 3px solid #ffc107; /* 黃色邊框 */
}

.RankDisplay_divider__v4WCd {
  border: 0;
  height: 1px;
  background-color: #e0e0e0;
  margin: 25px 0;
}

.RankDisplay_rankContainer__aruUH {
  margin-bottom: 15px;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  overflow: hidden; /* 確保子元素圓角效果 */
}

.RankDisplay_rankHeader__RmNM6 {
  background-color: #e9ecef; /* 稍深的灰色 */
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}
.RankDisplay_rankHeader__RmNM6:hover {
  background-color: #ced4da;
}

.RankDisplay_rankHeader__RmNM6 h4 {
  margin: 0;
  font-size: 1.1em;
}

.RankDisplay_groupList__rNKYR {
  list-style: none;
  padding: 0 0 0 20px; /* 左側縮排 */
  margin: 0;
  background-color: #f8f9fa; /* 與容器背景色一致 */
}

.RankDisplay_groupItem__xyRQb {
  /* border-top: 1px solid #dee2e6; */ /* Group 之間的分隔 */
  padding: 0;
  margin: 0;
}

.RankDisplay_groupHeader__w9g\+1 {
  padding: 8px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px dashed #dee2e6; /* Group Header 上方虛線 */
  transition: background-color 0.2s ease;
}
.RankDisplay_groupHeader__w9g\+1:hover {
  background-color: #f1f3f5;
}

.RankDisplay_groupHeader__w9g\+1 span {
  font-size: 0.95em;
}

.RankDisplay_nestedPlayerList__7akzl {
  padding-left: 20px; /* 進一步縮排玩家列表 */
  border-left: 2px solid #dee2e6;
  margin-left: 15px; /* 與 Group Header 文字對齊 */
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #ffffff;
}

.RankDisplay_nestedPlayerList__7akzl .RankDisplay_playerItem__TeBsS {
  font-size: 0.9em;
  padding: 6px 10px;
}

.Premium_container__AAoew {
    min-height: 100vh;
    padding: 2rem;
}

.Premium_innerContainer__JJ\+py {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 900px){
    .Premium_header__bfbvD{
        margin-top: 3.5rem;
    }
}

.Premium_header__bfbvD {
    text-align: center;
    margin-bottom: 2rem;
}

.Premium_mainTitle__Nh9B0 {
    font-size: 3rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.Premium_subtitle__9bdWM {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 載入狀態 */
.Premium_loadingContainer__5cWbF {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.Premium_loadingText__rUYAe {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Section 容器 */
.Premium_section__ZRnz2 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 2rem;
    width: 80%;
}

.Premium_sectionHeader__QjX17 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.Premium_sectionTitle__0a6Pd {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.Premium_badge__ElbRi {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* 創作者功能卡片網格 */
.Premium_creatorGrid__J38Mq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.Premium_featureCard__K8d2l {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 1rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.Premium_featureCard__K8d2l::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.Premium_featureCard__K8d2l:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.Premium_featureCard__K8d2l:hover::before {
    opacity: 1;
}

.Premium_featureCard__K8d2l.Premium_purple__oiE2t {
    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
}

.Premium_featureCard__K8d2l.Premium_blue__bOU4N {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
}

.Premium_featureCard__K8d2l.Premium_green__wSwTr {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
}

.Premium_featureCard__K8d2l.Premium_orange__-f\+\+D {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
}

.Premium_cardIcon__da4lj {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.Premium_cardTitle__eC9tf {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0.5rem;
}

.Premium_cardDescription__aD\+v- {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 功能介紹列表 */
.Premium_featureList__nn90b {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.Premium_featureItem__OAe9\+ {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.Premium_featureIcon__l5YL\+ {
    font-size: 2rem;
    flex-shrink: 0;
}

.Premium_featureContent__EIP7A {
    flex: 1 1;
}

.Premium_featureTitle__Yinlm {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.Premium_featureDescription__KyHAj {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 按鈕區域 */
.Premium_buttonContainer__mrlMr {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

@media (min-width: 640px) {
    .Premium_buttonContainer__mrlMr {
        flex-direction: row;
        justify-content: center;
    }
}

.Premium_button__Lt\+zm {
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    color: white;
    min-width: 200px;
}

.Premium_button__Lt\+zm:hover {
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.Premium_buttonGetCode__bJaRl {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.Premium_buttonGetCode__bJaRl:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.Premium_buttonEnterCode__sy16o {
    background: linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
}

.Premium_buttonEnterCode__sy16o:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #db2777 100%);
}

/* 彈窗樣式 */
.Premium_modalOverlay__rabiv {
    position: fixed;
    inset: 0;
    background: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.Premium_modalContent__-grif {
    position: relative;
    background: linear-gradient(to bottom, rgba(124, 98, 198, 0.3) 10%, rgba(132, 110, 203, 0.5) 20%, rgba(57, 39, 79, 0.5) 50%),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.3) 15%, rgba(89, 107, 177, 0.5) 100%);
    border-radius: 1.5rem;
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(89, 107, 177, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: Premium_modalFadeIn__tS47L 0.3s ease-out;
}

.Premium_modalContent__-grif::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes Premium_modalFadeIn__tS47L {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.Premium_modalTitle__2vomZ {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(162, 150, 255, 0.5);
}

.Premium_formGroup__V9hzM {
    margin-bottom: 1.5rem;
}

.Premium_label__GTcrI {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #a296ff;
    margin-bottom: 0.5rem;
}

.Premium_usernameDisplay__YjT4U {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem;
    color: #ffffff;
    font-weight: 600;
}

.Premium_input__yBOpg {
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    font-size: 1rem;
    color: #ffffff;
    transition: all 0.2s ease;
}

.Premium_input__yBOpg::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.Premium_input__yBOpg:focus {
    outline: none;
    border-color: #a296ff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(162, 150, 255, 0.3);
}

.Premium_input__yBOpg:disabled {
    background: rgba(255, 255, 255, 0.05);
    cursor: not-allowed;
    opacity: 0.6;
}

.Premium_modalButtons__87AFF {
    display: flex;
    gap: 0.75rem;
}

.Premium_modalButton__9Lyfc {
    flex: 1 1;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 8px;
    background-color: rgba(236, 241, 244, 0.6);
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
    color: #5034be;
    color: var(--text-btn--primary, #5034be);
}

.Premium_modalButton__9Lyfc::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 100%);
}

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

.Premium_modalButton__9Lyfc:disabled::before {
    display: none;
}

@media (hover: hover) {
    .Premium_modalButton__9Lyfc:hover:not(:disabled) {
        background-color: rgba(238, 236, 244, 0.9);
        border-color: #fff;
        transform: scale(1.05);
        box-shadow: rgba(232, 223, 255, 0.7) 0px 0px 12px, rgba(203, 182, 255, 0.4) 0px 0px 20px 8px, rgba(255, 255, 255, 0.3) 0px 0px 8px inset;
        text-shadow: rgba(80, 52, 190, 0.7) 0px 0px 10px;
        color: #3d2a8f;
        color: var(--text-btn-hover--primary, #3d2a8f);
    }
}

@media (hover: none) {
    .Premium_modalButton__9Lyfc:active:not(:disabled) {
        background-color: rgba(238, 236, 244, 0.9);
        border-color: #fff;
        box-shadow: rgba(232, 223, 255, 0.7) 0px 0px 12px, rgba(203, 182, 255, 0.4) 0px 0px 20px 8px, rgba(255, 255, 255, 0.3) 0px 0px 8px inset;
        text-shadow: rgba(80, 52, 190, 0.7) 0px 0px 10px;
    }
}

.Premium_buttonCancel__Y2-Av {
    background: #d1d5db;
    color: #1f2937;
}

.Premium_buttonCancel__Y2-Av:hover:not(:disabled) {
    background: #9ca3af;
}

.Premium_buttonSubmit__ABCvZ {
    background: linear-gradient(150deg, #4d2d8f 0%, #543695 100%);
    color: white;
}

.Premium_buttonSubmit__ABCvZ:hover:not(:disabled) {
    background: linear-gradient(150deg, #574280 0%, #543695 100%);
}

/* 空狀態 */
.Premium_emptyState__HoAOd {
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .Premium_container__AAoew {
        padding: 1rem;
    }

    .Premium_subtitle__9bdWM {
        font-size: 1rem;
    }

    .Premium_sectionTitle__0a6Pd {
        font-size: 1.5rem;
    }

    .Premium_section__ZRnz2 {
        padding: 1.5rem;
    }

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