.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;
}
@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;
}

/* 移除 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;
  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;
    }
}

.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;
    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_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;
  }
}
.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_scale-intro__HsGrk 20s linear;
}

.StoryBackground_video__RcFWF {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: StoryBackground_scale-intro__HsGrk 20s linear;
}

@keyframes StoryBackground_scale-intro__HsGrk {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.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;
    }
}

.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;
  }
}
.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;
}

.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_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 {
    font-size: clamp(20px, 2.5vh, 64px);
    font-size: 29px;
    letter-spacing: 0;

    display: block;
    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;

    /* 霓虹發光效果：從白色核心到金色外圍 */
    /* 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: 0.8rem;
    margin: 0;

    opacity: 0.9;
    letter-spacing: 0;
    color: var(--color-main); /* 金色 */
}

/* 版權信息 */
.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;
    top: 0;
    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: 700px) {
    /* 頂部容器：包含標題、副標題和版權信息 */
    .GameListMenu_header__OOriM {
        padding: 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;
  }
}

.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;
}

.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: 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: 740px) {
  .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;
}
/* 主題色彩系統 */
/* :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;
  }
}

.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;
}

.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: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.TextToSpeechTool_header__0X3yd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.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;
}

.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;
}

.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;
}

.TextToSpeechTool_settingRow__ZhyNd {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.TextToSpeechTool_settingItem__NGhcb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 180px;
}

.TextToSpeechTool_select__ApsZu {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  transition: border-color 0.2s ease;
}

.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;
}

.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: wrap;
}

.TextToSpeechTool_generateButton__wKgmK {
  padding: 12px 24px;
  background: #9c27b0;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.TextToSpeechTool_generateButton__wKgmK:hover:not(:disabled) {
  background: #7b1fa2;
}

.TextToSpeechTool_generateButton__wKgmK:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.TextToSpeechTool_clearButton__KeKif {
  padding: 12px 24px;
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.TextToSpeechTool_clearButton__KeKif:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
}

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

.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;
}

.TextToSpeechTool_audioHint__stNth {
  font-size: 14px;
  color: #666;
}

.TextToSpeechTool_audioActions__cvV0J {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.TextToSpeechTool_actionButton__tavRP {
  padding: 8px 16px;
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.TextToSpeechTool_actionButton__tavRP:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
}

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

.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;
  }

  .TextToSpeechTool_header__0X3yd {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .TextToSpeechTool_settingRow__ZhyNd {
    flex-direction: column;
    gap: 12px;
  }

  .TextToSpeechTool_settingItem__NGhcb {
    min-width: auto;
  }

  .TextToSpeechTool_buttonSection__RBdJP {
    flex-direction: column;
  }

  .TextToSpeechTool_generateButton__wKgmK,
  .TextToSpeechTool_clearButton__KeKif {
    width: 100%;
  }

  .TextToSpeechTool_audioActions__cvV0J {
    flex-direction: column;
  }

  .TextToSpeechTool_actionButton__tavRP {
    width: 100%;
    justify-content: center;
  }
}

.CreateCharacter_header__9WmcZ {
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 1rem;
  margin-bottom: 2rem;
}

.CreateCharacter_titleContainer__LX9PE {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.CreateCharacter_titleContainer__LX9PE h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.CreateCharacter_buttonContainer__Fxrvz {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.CreateCharacter_button__Oijcy {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background-color: #4267b2;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.CreateCharacter_button__Oijcy:hover {
  background-color: #365899;
  transform: translateY(-1px);
}

.CreateCharacter_button__Oijcy:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.CreateCharacter_clearButton__VWyV7 {
  background-color: #6c757d;
}

.CreateCharacter_clearButton__VWyV7:hover {
  background-color: #5a6268;
}

.CreateCharacter_saveButton__kFrt3 {
  background-color: #4267b2;
}

.CreateCharacter_saveButton__kFrt3:hover {
  background-color: #365899;
}

/* 為了避免內容被固定按鈕擋住 */
.CreateCharacter_content__4-Iv4 {
  padding-bottom: 80px;
}

.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;
  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);
}

.AssistantDemo_assistantWrapper__T6Jsr {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  width: 450px;
  padding: 0 15px 0 0;
  box-sizing: border-box;
}
html,
body {
  background-color: transparent;
}

.AssistantDemo_characterSection__zzS6I {
  flex-shrink: 0;
  z-index: 1;
  position: absolute;
  left: -15px;
  bottom: 0;
  width: 180px;
  height: 200px;
}

.AssistantDemo_assistantImage__VHWtT {
  background-size: contain;
  background-position: left bottom;
}

.AssistantDemo_assistantDemo__QUtkD {
  border-radius: 30px 30px 0 0;
  z-index: 1;
  width: calc(100% - 50px);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 6px 6px 6px 80px;
  box-shadow: none;
  isolation: isolate;
  position: relative;
}

@keyframes AssistantDemo_gradient__faX4n {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.AssistantDemo_assistantDemo__QUtkD:before {
  display: none;
}
.AssistantDemo_assistantDemo__QUtkD:after {
  display: none;
}
.AssistantDemo_displayContainer__JId7- {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 10px;
  box-sizing: border-box;
}
.AssistantDemo_recorder__YtkFn {
  width: 48px;
  height: 48px;
  margin: 0.5rem;
}

.AssistantDemo_recorder__YtkFn svg {
  width: 24px;
  height: 24px;
}

.AssistantDemo_messageBox__\+XrxS {
  font-family: var(--font-default);
  border-radius: 8px;
  padding: 8px 8px 16px 8px;
  margin-bottom: 0;
  font-size: 0.875em;
  height: 90px;
  line-height: 1.375em;
  background-color: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.8);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
  box-shadow: rgba(148, 163, 184, 0.15) 0px -2px 8px 0px;
  position: relative;
  z-index: 1;
}

.AssistantDemo_messageBox__\+XrxS::-webkit-scrollbar {
  width: 8px;
}

.AssistantDemo_messageBox__\+XrxS::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.AssistantDemo_messageBox__\+XrxS p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #505050 !important;
  font-weight: 400;
  font-size: 14px;
  position: relative;
  z-index: 2;
  text-shadow: none;
  opacity: 1 !important;
}

.AssistantDemo_messageBox__\+XrxS,
.AssistantDemo_messageBox__\+XrxS p {
  mix-blend-mode: normal;
}

.AssistantDemo_buttonArea__tVOHv {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.AssistantDemo_button__d5Yf4 {
  font-size: 0.7rem !important;
  padding: 0.25rem 0.5rem !important;
  background-color: rgba(148, 163, 184, 0.9) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 0.4rem !important;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 24px !important;
  line-height: 1 !important;
  min-width: 48px;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.AssistantDemo_button__d5Yf4:hover {
  background-color: rgba(100, 116, 139, 0.95);
  transform: translateY(-1px);
  color: #ffffff;
}

.AssistantDemo_button__d5Yf4 * {
  font-size: 0.7rem !important;
}

.AssistantDemo_buttonArea__tVOHv > * {
  font-size: 0.7rem !important;
}

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

.AssistantDemo_rapidBar__wdvqZ {
  padding: 10px 0 5px 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
}
.AssistantDemo_rapidBar__wdvqZ {
}

.Recorder_inputVoice__8puwj {
    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__8puwj:hover {
        transform: scale(1.1);
    }
}

.Recorder_icon__fqOFi {
    width: 30px;
    height: 30px;
    position: relative;
    z-index: 3;
    background-color: #4a4848;
}

.Recorder_icon1__txhv6 {
    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__8puwj: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__8puwj.Recorder_active__bV0uy:before {
    background: linear-gradient(to bottom, #ffffff, #a49bb2);
    box-shadow: 0 0 35px rgba(146, 95, 255, 0.9);
}

.Recorder_inputVoice__8puwj.Recorder_active__bV0uy .Recorder_circle__gPRwQ {
    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__8puwj.Recorder_pause__vFDgu {
}

.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: 700px) {
    .PersonalPage_personalPage__WsMjl {
        padding: 1rem var(--gap-mobile);
    }
    .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);
}

.GameCard_gameCard__4VjyH {
    display: flex;
    background: var(--color-bg-post);
    border-radius: var(--rd-item);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border-post);
    transition: box-shadow 0.3s ease;
    margin-top: 6px;
}
.GameCard_gameCard__4VjyH:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.GameCard_coverHolder__yTmTC {
    width: 40%;
    overflow: hidden;
}
.GameCard_textHolder__1UAjz {
    width: 60%;
    padding: calc(var(--gap) * 1.5);
    box-sizing: border-box;
}

.GameCard_desc__XICb2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    line-height: 1.375em;
    -webkit-box-orient: vertical;
    color: var(--color-highlight-first);
    opacity: 0.7;
}

.GameCard_title__5jmmV {
    font-size: 1.25em;
    line-height: 1.125em;
    color: var(--color-highlight-first);
    padding-bottom: var(--gap);
    display: block;
    cursor: pointer;
    transition: color 0.2s ease;
}
.GameCard_title__5jmmV 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__E1cuq {
    width: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.GameCard_coverImage__E1cuq:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
}
.GameCard_coverHolder__yTmTC:hover .GameCard_coverImage__E1cuq {
    transform: scale(1.05);
}

.GameCard_labelContainer__1yZdL {
    padding-top: calc(var(--gap) / 2);
    padding-bottom: calc(var(--gap));
}
.GameCard_label__rPg11 {
    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__1yZdL .GameCard_label__rPg11: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__1yZdL .GameCard_label__rPg11:hover {
    opacity: 0.8;
}

.GameCard_coverHolder__yTmTC,
.GameCard_title__5jmmV,
.GameCard_desc__XICb2 {
    cursor: pointer;
}

.GameCard_coverHolder__yTmTC:hover,
.GameCard_title__5jmmV:hover,
.GameCard_desc__XICb2:hover {
    opacity: 0.9;
}
.GameCard_count__fUjTM {
    font-size: 0.75em;
    opacity: 0.5;
}
@media (min-width: 0px) and (max-width: 700px) and (orientation: portrait) {
    .GameCard_gameCard__4VjyH {
        flex-direction: column;
        padding: calc(var(--gap) * 1.2);
        width: calc(100% - var(--gap));
    }
    .GameCard_title__5jmmV {
        font-size: 1.125em;
    }
    .GameCard_desc__XICb2 {
        font-size: 0.8125em;
    }
    .GameCard_textHolder__1UAjz {
        width: 100%;
        padding: calc(var(--gap) * 1.5) 0 0 0;
    }
    .GameCard_coverHolder__yTmTC {
        width: 100%;
        border-radius: calc(var(--rd-item) * 0.7);
        box-shadow: var(--shadow-cover-post);
    }
}
@media (min-width: 1600px) and (min-height: 800px) {
    .GameCard_textHolder__1UAjz {
        padding: calc(var(--gap) * 2.5);
    }
}

.GameCard_gameCard__4VjyH.GameCard_collection__oV1cm .GameCard_coverHolder__yTmTC {
    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__vfx5j {
    background-color: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.1);
}
.GameCard_questAttachment__-zeqq {
    background-color: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.1);
}
.GameCard_learningJourneyAttachment__G0g98 {
    background-color: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
}
.GameCard_urlAttachment__UJwYW {
    background-color: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.1);
}
.GameCard_otherAttachment__fb8oh {
    background-color: rgba(0, 123, 255, 0.05);
    border: 1px solid rgba(0, 123, 255, 0.1);
}

.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: 50px 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;
  }
}

.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;
    }
    .QuestDetail_questContainer__Nwycb {
        padding: 0 40px 80px;
    }
}
@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: 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_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);
}

.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;
}

.ToastNotification_notificationContainer__qRqR0 {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}

/* 位置樣式 */
.ToastNotification_notificationContainer__qRqR0.ToastNotification_top-right__YigR8 {
  top: 1rem;
  right: 1rem;
}

.ToastNotification_notificationContainer__qRqR0.ToastNotification_top-left__JMjHL {
  top: 1rem;
  left: 1rem;
}

.ToastNotification_notificationContainer__qRqR0.ToastNotification_top-center__Svb6H {
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-right__rvKoB {
  bottom: 1rem;
  right: 1rem;
}

.ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-left__IMvWq {
  bottom: 1rem;
  left: 1rem;
}

.ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-center__wGx0q {
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.ToastNotification_notification__f2G9B {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-left-width: 4px;
  border-left-style: solid;
  width: 24rem;
  max-width: calc(100vw - 2rem);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  animation: ToastNotification_slideIn__rRJYj 0.3s ease-out;
  pointer-events: all;
  transition: all 0.2s ease-in-out;
}

.ToastNotification_notification__f2G9B:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.ToastNotification_notificationIcon__mR9sd {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

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

.ToastNotification_notificationTitle__sR\+e1 {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-bottom: 0.25rem;
}

.ToastNotification_notificationMessage__DEieS {
  font-size: 0.875rem;
  line-height: 1.5rem;
  word-wrap: break-word;
}

.ToastNotification_notificationClose__cYHCA {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s ease-in-out;
}

.ToastNotification_notificationClose__cYHCA:hover {
  background-color: rgba(107, 114, 128, 0.1);
  color: #374151;
}

.ToastNotification_notificationClose__cYHCA:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* 動畫效果 */
@keyframes ToastNotification_slideIn__rRJYj {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 從左側進入的動畫 */
.ToastNotification_notificationContainer__qRqR0.ToastNotification_top-left__JMjHL .ToastNotification_notification__f2G9B,
.ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-left__IMvWq .ToastNotification_notification__f2G9B {
  animation: ToastNotification_slideInFromLeft__rdTuS 0.3s ease-out;
}

@keyframes ToastNotification_slideInFromLeft__rdTuS {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 從上方進入的動畫 */
.ToastNotification_notificationContainer__qRqR0.ToastNotification_top-center__Svb6H .ToastNotification_notification__f2G9B {
  animation: ToastNotification_slideInFromTop__y3kRV 0.3s ease-out;
}

@keyframes ToastNotification_slideInFromTop__y3kRV {
  from {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* 從下方進入的動畫 */
.ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-center__wGx0q .ToastNotification_notification__f2G9B {
  animation: ToastNotification_slideInFromBottom__VocFX 0.3s ease-out;
}

@keyframes ToastNotification_slideInFromBottom__VocFX {
  from {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* 響應式設計 */
@media (max-width: 640px) {
  .ToastNotification_notification__f2G9B {
    width: calc(100vw - 2rem);
    margin: 0 1rem;
  }

  .ToastNotification_notificationContainer__qRqR0.ToastNotification_top-center__Svb6H,
  .ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-center__wGx0q {
    left: 0;
    right: 0;
    transform: none;
  }

  .ToastNotification_notificationContainer__qRqR0.ToastNotification_top-center__Svb6H .ToastNotification_notification__f2G9B,
  .ToastNotification_notificationContainer__qRqR0.ToastNotification_bottom-center__wGx0q .ToastNotification_notification__f2G9B {
    transform: none;
    margin: 0 auto;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .ToastNotification_notification__f2G9B {
    background-color: #1f2937;
    color: #f9fafb;
  }

  .ToastNotification_notificationClose__cYHCA {
    color: #9ca3af;
  }

  .ToastNotification_notificationClose__cYHCA:hover {
    background-color: rgba(156, 163, 175, 0.1);
    color: #d1d5db;
  }
}

.GoogleLogin_container__b0MmL {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.GoogleLogin_background__r1Vng {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.GoogleLogin_background__r1Vng::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.GoogleLogin_content__tKUHV {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  width: 90%;
  margin: 0 auto;
}

.GoogleLogin_header__zU3LT {
  margin-bottom: 2rem;
}

.GoogleLogin_title__EtdCE {
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.GoogleLogin_subtitle__58Png {
  font-size: 1.1rem;
  color: #666;
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.GoogleLogin_description__NRs80 {
  font-size: 0.95rem;
  color: #888;
  margin: 0;
  line-height: 1.5;
}

.GoogleLogin_loginContainer__wQAIj {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.GoogleLogin_googleButton__Lf4Ga {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.GoogleLogin_googleButton__Lf4Ga:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 響應式設計 */
@media (max-width: 480px) {
  .GoogleLogin_content__tKUHV {
    padding: 2rem 1.5rem;
    border-radius: 12px;
  }

  .GoogleLogin_title__EtdCE {
    font-size: 1.5rem;
  }

  .GoogleLogin_subtitle__58Png {
    font-size: 1rem;
  }

  .GoogleLogin_description__NRs80 {
    font-size: 0.9rem;
  }
}

/* 載入狀態 */
.GoogleLogin_loading__Gwr2a {
  opacity: 0.7;
  pointer-events: none;
}

/* 動畫效果 */
@keyframes GoogleLogin_fadeIn__t6dcl {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.GoogleLogin_content__tKUHV {
  animation: GoogleLogin_fadeIn__t6dcl 0.6s ease-out;
}

/* Google 按鈕自定義樣式 */
.GoogleLogin_googleButton__Lf4Ga div[role="button"] {
  width: 100% !important;
  border-radius: 8px !important;
}

/* 無障礙功能 */
.GoogleLogin_googleButton__Lf4Ga:focus-within {
  outline: 2px solid #4285f4;
  outline-offset: 2px;
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .GoogleLogin_content__tKUHV {
    background: rgba(28, 28, 30, 0.95);
    color: #ffffff;
  }

  .GoogleLogin_title__EtdCE {
    color: #ffffff;
  }

  .GoogleLogin_subtitle__58Png {
    color: #a1a1aa;
  }

  .GoogleLogin_description__NRs80 {
    color: #71717a;
  }
}

.GoogleLoginButton_googleButton__r15sW {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 24px;
  border: 2px solid #4285f4;
  border-radius: 8px;
  background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  color: white;
  font-size: 16px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  cursor: pointer;
  transition: all 0.3s ease;

  min-width: 150px;
  min-height: 44px;
}

.GoogleLoginButton_googleButton__r15sW:hover:not(:disabled) {
  background: linear-gradient(135deg, #3367d6 0%, #2e8b57 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.GoogleLoginButton_googleButton__r15sW:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(66, 133, 244, 0.2);
}

.GoogleLoginButton_googleButton__r15sW:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.GoogleLoginButton_buttonIcon__Y7rN3 {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.GoogleLoginButton_loadingIcon__NMSgt {
  font-size: 16px;
  animation: GoogleLoginButton_spin__BSXEP 1s linear infinite;
}

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

/* 響應式設計 */
@media (max-width: 768px) {
  .GoogleLoginButton_googleButton__r15sW {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .GoogleLoginButton_googleButton__r15sW {
    border-color: #4285f4;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
  }

  .GoogleLoginButton_googleButton__r15sW:hover:not(:disabled) {
    background: linear-gradient(135deg, #3367d6 0%, #2e8b57 100%);
  }
}

/* 高對比度模式 */
@media (prefers-contrast: high) {
  .GoogleLoginButton_googleButton__r15sW {
    border-width: 3px;
    font-weight: 600;
  }
}

/* 減少動畫模式 */
@media (prefers-reduced-motion: reduce) {
  .GoogleLoginButton_googleButton__r15sW {
    transition: none;
  }

  .GoogleLoginButton_googleButton__r15sW:hover:not(:disabled) {
    transform: none;
  }

  .GoogleLoginButton_loadingIcon__NMSgt {
    animation: none;
  }
}

.FreeInputArea_container__paxGq {
  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);
}

.FreeInputArea_container__paxGq.FreeInputArea_active__LkYEz {
  transform: translateY(0);
}

.FreeInputArea_container__paxGq.FreeInputArea_disabled__qAPDz {
  opacity: 0.6;
  pointer-events: none;
}

.FreeInputArea_inputArea__T8SNj {
  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) {
  .FreeInputArea_inputArea__T8SNj {
    padding-bottom: 30px;
  }
}

.FreeInputArea_inputArea__T8SNj > div {
  width: 100%;
}

.FreeInputArea_voiceContainer__8cQAb,
.FreeInputArea_textContainer__jR0qR {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.FreeInputArea_voiceContainer__8cQAb {
  padding: 20px;
  position: relative;
}

/* 發光效果 */
.FreeInputArea_voiceContainer__8cQAb: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;
}

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

.FreeInputArea_modeToggle__vZAIz {
  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;
  cursor: pointer;
  text-decoration: underline;
}

.FreeInputArea_modeToggle__vZAIz:hover {
  opacity: 1;
}

.FreeInputArea_modeToggle__vZAIz: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;
}

/* 模式特定樣式 */
.FreeInputArea_container__paxGq.FreeInputArea_voice__dneC- {
  /* 語音模式特定樣式 */
}

.FreeInputArea_container__paxGq.FreeInputArea_text__rU3-H {
  /* 文字模式特定樣式 */
}

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

  .FreeInputArea_textContainer__jR0qR {
    padding: 0;
  }
}

.TextInput_wrapper__4sCPx {
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.TextInput_wrapper__4sCPx 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;
  transition: all 0.3s ease;
}

.TextInput_wrapper__4sCPx textarea:focus {
  border-color: #4c33ad;
  box-shadow: 0 0 0 3px rgba(76, 51, 173, 0.1);
}

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

@media (min-width: 1600px) and (min-height: 800px) {
  .TextInput_wrapper__4sCPx textarea {
    font-size: 1.125em;
  }
}

.TextInput_actions__3hFYf {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.TextInput_sendButton__vB0mj {
  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%;
}

.TextInput_sendButton__vB0mj:hover:not(:disabled) {
  opacity: 0.9;
  transform: scale(1.1);
}

.TextInput_sendButton__vB0mj:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.TextInput_sendIcon__bg2En {
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3e%3cpath d=%27M2.01 21L23 12 2.01 3 2 10l15 2-15 2z%27/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3e%3cpath d=%27M2.01 21L23 12 2.01 3 2 10l15 2-15 2z%27/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  display: block;
}

/* 手機版樣式 */
@media (max-width: 700px) {
  .TextInput_wrapper__4sCPx {
    width: 100%;
    padding: 0 15px;
  }

  .TextInput_wrapper__4sCPx textarea {
    height: 100px;
    padding: 20px 70px 20px 12px;
    border-radius: 11px;
  }

  .TextInput_sendButton__vB0mj {
    width: 48px;
    height: 90px;
    border-radius: 8px;
  }

  .TextInput_actions__3hFYf {
    right: 20px;
  }
}

.VoiceRecorder_voiceButton__twtfN {
  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) {
  .VoiceRecorder_voiceButton__twtfN:hover {
    transform: scale(1.1);
  }
}

.VoiceRecorder_micIcon__rMPAc {
  position: relative;
  z-index: 3;
  font-size: 24px;
  color: #fff;
}

.VoiceRecorder_voiceButton__twtfN: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;
}

.VoiceRecorder_voiceButton__twtfN.VoiceRecorder_active__rPOkT:before {
  background: linear-gradient(to bottom, #ffffff, #a49bb2);
  box-shadow: 0 0 35px rgba(146, 95, 255, 0.9);
}

.VoiceRecorder_voiceButton__twtfN.VoiceRecorder_recording__eZiY9 .VoiceRecorder_micIcon__rMPAc {
  color: #ff4444;
}

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

.VoiceRecorder_voiceButton__twtfN:disabled:hover {
  transform: none;
}

.VoiceRecorder_progressCircle__tIang {
  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);
}

.VoiceRecorder_permissionContainer__X7Tgr {
  text-align: center;
  margin-bottom: 16px;
}

.VoiceRecorder_permissionMessage__E1KDa {
  color: #d32f2f;
  background: #fff3e0;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}

.VoiceRecorder_permissionButton__bn-x7 {
  color: #fff;
  background: #1976d2;
  padding: 8px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.VoiceRecorder_permissionButton__bn-x7:hover {
  background: #1565c0;
}

.VoiceRecorder_transcribedText__\+9Hcg {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
  border-left: 4px solid #1976d2;
  margin: 8px 0;
}

.VoiceRecorder_transcribedText__\+9Hcg p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

/* DataStorage 範例組件樣式 */
.DataStorageExample_container__3Vxp6 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.DataStorageExample_title__b\+lld {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 8px;
  text-align: center;
}

.DataStorageExample_description__SKEjq {
  background: #f8f9fa;
  border-left: 4px solid #007bff;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 4px;
}

.DataStorageExample_description__SKEjq p {
  margin: 0;
  line-height: 1.6;
  color: #495057;
}

.DataStorageExample_description__SKEjq code {
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: "Monaco", "Consolas", monospace;
  font-size: 0.9em;
  color: #d63384;
}

/* 配置區域 */
.DataStorageExample_configSection__Y9l4n {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.DataStorageExample_configSection__Y9l4n h3 {
  margin: 0 0 20px 0;
  color: #495057;
  font-size: 1.25rem;
}

.DataStorageExample_formGroup__Prf05 {
  margin-bottom: 16px;
}

.DataStorageExample_label__6hvOA {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #495057;
  font-size: 0.95rem;
}

.DataStorageExample_input__8p82b,
.DataStorageExample_select__XLfyZ,
.DataStorageExample_textarea__4118\+ {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.95rem;
  background-color: #fff;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.DataStorageExample_input__8p82b:focus,
.DataStorageExample_select__XLfyZ:focus,
.DataStorageExample_textarea__4118\+:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.DataStorageExample_textarea__4118\+ {
  resize: vertical;
  font-family: "Monaco", "Consolas", monospace;
  font-size: 0.9rem;
}

.DataStorageExample_error__sm56z {
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 4px;
}

.DataStorageExample_actionGroup__H5scA {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.DataStorageExample_executeButton__SliyB {
  background: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.DataStorageExample_executeButton__SliyB:hover:not(:disabled) {
  background: #0056b3;
}

.DataStorageExample_executeButton__SliyB:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.DataStorageExample_clearButton__CFzve {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.DataStorageExample_clearButton__CFzve:hover {
  background: #545b62;
}

/* 狀態區域 */
.DataStorageExample_statusSection__8\+nx1 {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.DataStorageExample_statusSection__8\+nx1 h3 {
  margin: 0 0 16px 0;
  color: #495057;
  font-size: 1.25rem;
}

.DataStorageExample_statusGrid__21jym {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

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

.DataStorageExample_statusLabel__nUBXr {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
}

.DataStorageExample_statusValue__3-xOj {
  font-weight: 600;
  font-size: 0.95rem;
}

.DataStorageExample_statusValue__3-xOj.DataStorageExample_active__jzCIp {
  color: #ffc107;
}

.DataStorageExample_statusValue__3-xOj.DataStorageExample_inactive__qfq6M {
  color: #28a745;
}

/* 結果區域 */
.DataStorageExample_resultsSection__MqR1f {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.DataStorageExample_resultsSection__MqR1f h3 {
  margin: 0 0 16px 0;
  color: #495057;
  font-size: 1.25rem;
}

.DataStorageExample_noResults__7sNkO {
  text-align: center;
  color: #6c757d;
  padding: 40px;
  font-style: italic;
}

.DataStorageExample_resultsList__XCREQ {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.DataStorageExample_resultItem__i-ADF {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 16px;
  background: #f8f9fa;
}

.DataStorageExample_resultItem__i-ADF.DataStorageExample_success__-DWaH {
  border-left: 4px solid #28a745;
  background: #d4edda;
}

.DataStorageExample_resultItem__i-ADF.DataStorageExample_error__sm56z {
  border-left: 4px solid #dc3545;
  background: #f8d7da;
}

.DataStorageExample_resultHeader__AVR\+D {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.DataStorageExample_resultOperation__wVR3f {
  font-weight: 600;
  font-family: "Monaco", "Consolas", monospace;
  font-size: 0.9rem;
  color: #495057;
}

.DataStorageExample_resultStatus__yrg3J {
  font-size: 0.85rem;
  font-weight: 500;
}

.DataStorageExample_resultMessage__tJkUG {
  color: #495057;
  margin-bottom: 8px;
  line-height: 1.4;
}

.DataStorageExample_resultData__fhXab {
  margin-top: 12px;
}

.DataStorageExample_resultData__fhXab summary {
  cursor: pointer;
  font-weight: 500;
  color: #007bff;
  font-size: 0.9rem;
}

.DataStorageExample_resultData__fhXab pre {
  background: #f1f3f4;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 12px;
  margin-top: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .DataStorageExample_container__3Vxp6 {
    padding: 12px;
  }

  .DataStorageExample_title__b\+lld {
    font-size: 1.5rem;
  }

  .DataStorageExample_actionGroup__H5scA {
    flex-direction: column;
  }

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

  .DataStorageExample_resultHeader__AVR\+D {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

.FreeInputAreaExample_container__WaaUz {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
  background: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
}

.FreeInputAreaExample_header__akR1s {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.FreeInputAreaExample_title__bDh8P {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
}

.FreeInputAreaExample_description__q1PCs {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
  line-height: 1.5;
}

.FreeInputAreaExample_controls__ATgNQ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .FreeInputAreaExample_controls__ATgNQ {
    grid-template-columns: 1fr;
  }
}

.FreeInputAreaExample_section__X0mKE {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.FreeInputAreaExample_section__X0mKE h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.FreeInputAreaExample_controlGroup__IgpuG {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.FreeInputAreaExample_button__19a9T {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
  font-size: 14px;
}

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

.FreeInputAreaExample_button__19a9T.FreeInputAreaExample_active__szJdB {
  background: #e74c3c;
  color: white;
}

.FreeInputAreaExample_button__19a9T.FreeInputAreaExample_active__szJdB:hover:not(:disabled) {
  background: #c0392b;
}

.FreeInputAreaExample_button__19a9T.FreeInputAreaExample_inactive__G5olW {
  background: #27ae60;
  color: white;
}

.FreeInputAreaExample_button__19a9T.FreeInputAreaExample_inactive__G5olW:hover:not(:disabled) {
  background: #219a52;
}

.FreeInputAreaExample_button__19a9T:not(.FreeInputAreaExample_active__szJdB):not(.FreeInputAreaExample_inactive__G5olW) {
  background: #3498db;
  color: white;
}

.FreeInputAreaExample_button__19a9T:not(.FreeInputAreaExample_active__szJdB):not(.FreeInputAreaExample_inactive__G5olW):hover:not(:disabled) {
  background: #2980b9;
}

.FreeInputAreaExample_row__0tqcM {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.FreeInputAreaExample_label__AbwN4 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #2c3e50;
}

.FreeInputAreaExample_label__AbwN4 input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.FreeInputAreaExample_formRow__nxLTd {
  margin-bottom: 15px;
}

.FreeInputAreaExample_formLabel__\+w50C {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.FreeInputAreaExample_input__ad\+7G,
.FreeInputAreaExample_select__veDIS {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
  margin-top: 5px;
}

.FreeInputAreaExample_input__ad\+7G:focus,
.FreeInputAreaExample_select__veDIS:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.FreeInputAreaExample_status__jhrYH {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.FreeInputAreaExample_statusItem__FP3qA {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.FreeInputAreaExample_statusLabel__pw3EY {
  font-weight: 500;
  color: #2c3e50;
  font-size: 14px;
}

.FreeInputAreaExample_statusValue__iBCKc {
  font-weight: 600;
  font-size: 14px;
}

.FreeInputAreaExample_activeStatus__QLQeS {
  color: #27ae60;
}

.FreeInputAreaExample_inactiveStatus__0D569 {
  color: #e74c3c;
}

.FreeInputAreaExample_micOpenStatus__DsFXu {
  color: #e67e22;
}

.FreeInputAreaExample_micClosedStatus__AIFSc {
  color: #95a5a6;
}

.FreeInputAreaExample_output__qSsWI {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.FreeInputAreaExample_output__qSsWI h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.FreeInputAreaExample_outputContent__Lij17 {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
  margin-bottom: 10px;
}

.FreeInputAreaExample_outputContent__Lij17 pre {
  margin: 0;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.4;
  color: #2c3e50;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.FreeInputAreaExample_outputInfo__Ho6yz {
  text-align: right;
  color: #7f8c8d;
}

.FreeInputAreaExample_tips__9vLE- {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.FreeInputAreaExample_tips__9vLE- h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.FreeInputAreaExample_tips__9vLE- ul {
  margin: 0;
  padding-left: 20px;
}

.FreeInputAreaExample_tips__9vLE- li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #2c3e50;
  font-size: 14px;
}

.FreeInputAreaExample_tips__9vLE- strong {
  color: #2c3e50;
  font-weight: 600;
}

.FreeInputAreaExample_freeInputArea__KVSru {
  /* 這裡可以添加針對 FreeInputArea 的自定義樣式 */
}

.StreamingChatExample_container__ospgU {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.StreamingChatExample_header__58RnO {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.StreamingChatExample_header__58RnO h2 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 24px;
}

.StreamingChatExample_controls__2o0j2 {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

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

.StreamingChatExample_modelSelector__QDNOT label {
  font-weight: 500;
  color: #34495e;
}

.StreamingChatExample_modelSelector__QDNOT select {
  padding: 8px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  font-size: 14px;
  transition: border-color 0.3s;
}

.StreamingChatExample_modelSelector__QDNOT select:focus {
  outline: none;
  border-color: #3498db;
}

.StreamingChatExample_status__M5-Vc {
  display: flex;
  align-items: center;
  gap: 15px;
}

.StreamingChatExample_statusIndicator__WklYu {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.StreamingChatExample_connected__SF-B7 {
  background: #d4edda;
  color: #155724;
}

.StreamingChatExample_disconnected__G23Em {
  background: #f8d7da;
  color: #721c24;
}

.StreamingChatExample_streaming__5FPAV {
  padding: 6px 12px;
  background: #fff3cd;
  color: #856404;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.StreamingChatExample_clearButton__yiGml {
  padding: 10px 16px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.StreamingChatExample_clearButton__yiGml:hover:not(:disabled) {
  background: #c0392b;
  transform: translateY(-1px);
}

.StreamingChatExample_clearButton__yiGml:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.StreamingChatExample_chatContainer__af4rO {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  height: 600px;
  display: flex;
  flex-direction: column;
}

.StreamingChatExample_messagesContainer__Wbxel {
  flex: 1 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
}

.StreamingChatExample_welcome__PWxf2 {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.StreamingChatExample_welcome__PWxf2 h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.StreamingChatExample_examples__CWsSz {
  margin-top: 20px;
}

.StreamingChatExample_examples__CWsSz p {
  margin-bottom: 15px;
  font-weight: 500;
  color: #495057;
}

.StreamingChatExample_exampleButton__F4KCz {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 10px auto;
  padding: 12px 16px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.StreamingChatExample_exampleButton__F4KCz:hover:not(:disabled) {
  background: #2980b9;
  transform: translateY(-1px);
}

.StreamingChatExample_exampleButton__F4KCz:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.StreamingChatExample_message__KVKAz {
  margin-bottom: 16px;
  animation: StreamingChatExample_fadeIn__QghN3 0.3s ease-in;
}

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

.StreamingChatExample_userMessage__BuiJf {
  text-align: right;
}

.StreamingChatExample_userMessage__BuiJf .StreamingChatExample_messageContent__HBLfj {
  background: #3498db;
  color: white;
  margin-left: 20%;
}

.StreamingChatExample_assistantMessage__aigMs .StreamingChatExample_messageContent__HBLfj {
  background: #ecf0f1;
  color: #2c3e50;
  margin-right: 20%;
}

.StreamingChatExample_streamingMessage__dAi0s .StreamingChatExample_messageContent__HBLfj {
  background: #e8f5e8;
  border-left: 4px solid #27ae60;
}

.StreamingChatExample_messageHeader__zZOQ5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #6c757d;
}

.StreamingChatExample_messageRole__KN0na {
  font-weight: 600;
}

.StreamingChatExample_messageTime__ZKeju {
  opacity: 0.8;
}

.StreamingChatExample_streamingIndicator__e5wp5 {
  background: #27ae60;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  animation: StreamingChatExample_pulse__ouIiq 2s infinite;
}

@keyframes StreamingChatExample_pulse__ouIiq {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.StreamingChatExample_messageContent__HBLfj {
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
  font-family: inherit;
  color: inherit;
  line-height: 1.5;
}

.StreamingChatExample_messageContent__HBLfj h1,
.StreamingChatExample_messageContent__HBLfj h2,
.StreamingChatExample_messageContent__HBLfj h3,
.StreamingChatExample_messageContent__HBLfj h4,
.StreamingChatExample_messageContent__HBLfj h5,
.StreamingChatExample_messageContent__HBLfj h6 {
  font-weight: bold;
  margin: 0.5em 0;
}

.StreamingChatExample_messageContent__HBLfj p {
  margin: 0.5em 0;
}

.StreamingChatExample_messageContent__HBLfj strong {
  font-weight: bold;
}

.StreamingChatExample_messageContent__HBLfj code {
  padding: 0.2em 0.4em;
  font-size: 0.875em;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: Monaco, Consolas, "Courier New", monospace;
}

.StreamingChatExample_messageContent__HBLfj pre {
  padding: 1em;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.StreamingChatExample_messageContent__HBLfj pre code {
  padding: 0;
  background: transparent;
}

.StreamingChatExample_messageContent__HBLfj ul,
.StreamingChatExample_messageContent__HBLfj ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.StreamingChatExample_messageContent__HBLfj li {
  margin: 0.2em 0;
}

/* Markdown 專用樣式 */
.markdown-content {
  font-family: inherit;
  color: inherit;
  line-height: 1.5;
}

.markdown-content strong {
  font-weight: bold !important;
}

.markdown-content em {
  font-style: italic !important;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-weight: bold;
  margin: 0.5em 0;
}

.markdown-content p {
  margin: 0.5em 0;
}

.markdown-content ul,
.markdown-content ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.markdown-content li {
  margin: 0.2em 0;
}

.markdown-content code {
  padding: 0.2em 0.4em;
  font-size: 0.875em;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: Monaco, Consolas, "Courier New", monospace;
}

.markdown-content pre {
  padding: 1em;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.markdown-content pre code {
  padding: 0;
  background: transparent;
}

.StreamingChatExample_cursor__RtaYu {
  animation: StreamingChatExample_blink__4NpLR 1s infinite;
  color: #27ae60;
  font-weight: bold;
}

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

.StreamingChatExample_inputContainer__8F8a5 {
  padding: 20px;
  background: white;
  border-top: 1px solid #e9ecef;
}

.StreamingChatExample_inputWrapper__egMte {
  display: flex;
  gap: 12px;
  align-items: center;
}

.StreamingChatExample_input__IyrYp {
  flex: 1 1;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 25px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.StreamingChatExample_input__IyrYp:focus {
  outline: none;
  border-color: #3498db;
}

.StreamingChatExample_inputButtons__XMzWk {
  display: flex;
  gap: 8px;
}

.StreamingChatExample_button__Woqvu {
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 80px;
}

.StreamingChatExample_sendButton__YjZzY {
  background: #27ae60;
  color: white;
}

.StreamingChatExample_sendButton__YjZzY:hover:not(:disabled) {
  background: #219a52;
  transform: translateY(-1px);
}

.StreamingChatExample_sendButton__YjZzY:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.StreamingChatExample_stopButton__Nrm8y {
  background: #e74c3c;
  color: white;
}

.StreamingChatExample_stopButton__Nrm8y:hover {
  background: #c0392b;
  transform: translateY(-1px);
}

.StreamingChatExample_info__oHdfh {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.StreamingChatExample_info__oHdfh h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.StreamingChatExample_info__oHdfh ul {
  list-style: none;
  padding: 0;
}

.StreamingChatExample_info__oHdfh li {
  padding: 8px 0;
  border-bottom: 1px solid #ecf0f1;
}

.StreamingChatExample_info__oHdfh li:last-child {
  border-bottom: none;
}

.StreamingChatExample_technical__n6xiT {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.StreamingChatExample_technical__n6xiT h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.StreamingChatExample_techGrid__xOghL {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.StreamingChatExample_techItem__dmynH {
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.StreamingChatExample_techItem__dmynH strong {
  display: block;
  color: #2c3e50;
  margin-bottom: 5px;
}

.StreamingChatExample_techItem__dmynH span {
  color: #6c757d;
  font-size: 14px;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .StreamingChatExample_container__ospgU {
    padding: 10px;
  }

  .StreamingChatExample_controls__2o0j2 {
    flex-direction: column;
    align-items: stretch;
  }

  .StreamingChatExample_chatContainer__af4rO {
    height: 500px;
  }

  .StreamingChatExample_inputWrapper__egMte {
    flex-direction: column;
  }

  .StreamingChatExample_input__IyrYp {
    margin-bottom: 10px;
  }

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

  .StreamingChatExample_userMessage__BuiJf .StreamingChatExample_messageContent__HBLfj {
    margin-left: 10%;
  }

  .StreamingChatExample_assistantMessage__aigMs .StreamingChatExample_messageContent__HBLfj {
    margin-right: 10%;
  }
}

/* 暗色主題支援 */
@media (prefers-color-scheme: dark) {
  .StreamingChatExample_container__ospgU {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }

  .StreamingChatExample_header__58RnO,
  .StreamingChatExample_chatContainer__af4rO,
  .StreamingChatExample_info__oHdfh,
  .StreamingChatExample_technical__n6xiT {
    background: #34495e;
    color: #ecf0f1;
  }

  .StreamingChatExample_messagesContainer__Wbxel {
    background: #2c3e50;
  }

  .StreamingChatExample_assistantMessage__aigMs .StreamingChatExample_messageContent__HBLfj {
    background: #34495e;
    color: #ecf0f1;
  }

  .StreamingChatExample_input__IyrYp {
    background: #34495e;
    color: #ecf0f1;
    border-color: #5d6d7e;
  }

  .StreamingChatExample_techItem__dmynH {
    background: #2c3e50;
  }

  /* 暗色主題 markdown 樣式 */
  .StreamingChatExample_messageContent__HBLfj code {
    background: rgba(255, 255, 255, 0.1);
  }

  .StreamingChatExample_messageContent__HBLfj pre {
    background: rgba(255, 255, 255, 0.1);
  }
}

.GoogleLoginButtonExample_container__fCX-C {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.GoogleLoginButtonExample_header__Q4o1A {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  border-bottom: 2px solid #e0e0e0;
}

.GoogleLoginButtonExample_header__Q4o1A h2 {
  color: #333;
  font-size: 28px;
  margin-bottom: 10px;
}

.GoogleLoginButtonExample_header__Q4o1A p {
  color: #666;
  font-size: 16px;
}

.GoogleLoginButtonExample_content__RhSlD {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
  gap: 30px;
  margin-bottom: 40px;
}

.GoogleLoginButtonExample_userSection__qRqor,
.GoogleLoginButtonExample_buttonSection__pmNZW {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.GoogleLoginButtonExample_userSection__qRqor h3,
.GoogleLoginButtonExample_buttonSection__pmNZW h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 20px;
}

.GoogleLoginButtonExample_userInfo__aeVuE {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.GoogleLoginButtonExample_userInfo__aeVuE p {
  margin: 10px 0;
  color: #555;
}

.GoogleLoginButtonExample_logoutButton__bFFCg {
  background: #dc3545;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 15px;
  transition: background 0.3s ease;
}

.GoogleLoginButtonExample_logoutButton__bFFCg:hover {
  background: #c82333;
}

.GoogleLoginButtonExample_buttonContainer__Wude7 {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.GoogleLoginButtonExample_buttonGroup__jGNbo {
  background: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.GoogleLoginButtonExample_buttonGroup__jGNbo h4 {
  color: #333;
  margin-bottom: 15px;
  font-size: 16px;
}

.GoogleLoginButtonExample_customButton__mHvBI {
  background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
  border-color: #ff6b6b;
}

.GoogleLoginButtonExample_customButton__mHvBI:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5252 0%, #26a69a 100%);
}

.GoogleLoginButtonExample_logSection__aKuZo {
  grid-column: 1 / -1;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.GoogleLoginButtonExample_logHeader__bSK8q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.GoogleLoginButtonExample_logHeader__bSK8q h3 {
  color: #333;
  margin: 0;
  font-size: 20px;
}

.GoogleLoginButtonExample_clearButton__6cfon {
  background: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.GoogleLoginButtonExample_clearButton__6cfon:hover {
  background: #5a6268;
}

.GoogleLoginButtonExample_logContainer__MBymu {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  max-height: 300px;
  overflow-y: auto;
}

.GoogleLoginButtonExample_logItem__hAiT2 {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

.GoogleLoginButtonExample_logItem__hAiT2:last-child {
  border-bottom: none;
}

.GoogleLoginButtonExample_noLogs__\+R1zQ {
  color: #999;
  font-style: italic;
  text-align: center;
  margin: 0;
}

.GoogleLoginButtonExample_docSection__G-ycD {
  grid-column: 1 / -1;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.GoogleLoginButtonExample_docSection__G-ycD h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 20px;
}

.GoogleLoginButtonExample_codeBlock__5-s3Z {
  background: #2d3748;
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
}

.GoogleLoginButtonExample_codeBlock__5-s3Z pre {
  color: #e2e8f0;
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: 14px;
  line-height: 1.6;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .GoogleLoginButtonExample_container__fCX-C {
    padding: 15px;
  }

  .GoogleLoginButtonExample_content__RhSlD {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .GoogleLoginButtonExample_userSection__qRqor,
  .GoogleLoginButtonExample_buttonSection__pmNZW {
    padding: 20px;
  }

  .GoogleLoginButtonExample_buttonContainer__Wude7 {
    gap: 20px;
  }

  .GoogleLoginButtonExample_logHeader__bSK8q {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .GoogleLoginButtonExample_codeBlock__5-s3Z {
    padding: 15px;
  }

  .GoogleLoginButtonExample_codeBlock__5-s3Z pre {
    font-size: 12px;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .GoogleLoginButtonExample_container__fCX-C {
    background: #1a202c;
    color: #e2e8f0;
  }

  .GoogleLoginButtonExample_header__Q4o1A {
    border-bottom-color: #4a5568;
  }

  .GoogleLoginButtonExample_header__Q4o1A h2 {
    color: #e2e8f0;
  }

  .GoogleLoginButtonExample_header__Q4o1A p {
    color: #a0aec0;
  }

  .GoogleLoginButtonExample_userSection__qRqor,
  .GoogleLoginButtonExample_buttonSection__pmNZW,
  .GoogleLoginButtonExample_logSection__aKuZo,
  .GoogleLoginButtonExample_docSection__G-ycD {
    background: #2d3748;
    color: #e2e8f0;
  }

  .GoogleLoginButtonExample_userInfo__aeVuE,
  .GoogleLoginButtonExample_buttonGroup__jGNbo,
  .GoogleLoginButtonExample_logContainer__MBymu {
    background: #1a202c;
    border-color: #4a5568;
  }

  .GoogleLoginButtonExample_userInfo__aeVuE p {
    color: #a0aec0;
  }

  .GoogleLoginButtonExample_logItem__hAiT2 {
    color: #e2e8f0;
    border-bottom-color: #4a5568;
  }

  .GoogleLoginButtonExample_noLogs__\+R1zQ {
    color: #718096;
  }
}

.LogViewer_container__e\+-24 {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.LogViewer_filterRow__kiV6v {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
}
.LogViewer_input__v5R\+j {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  font-size: 1rem;
}
.LogViewer_dash__3kiiH {
  color: #888;
}
.LogViewer_button__67Zs2 {
  padding: 8px 18px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.LogViewer_button__67Zs2:disabled {
  background: #a5b4fc;
  cursor: not-allowed;
}
.LogViewer_buttonSecondary__6nBmE {
  background: #6b7280;
}
.LogViewer_buttonSecondary__6nBmE:hover {
  background: #4b5563;
}
.LogViewer_buttonSecondary__6nBmE:disabled {
  background: #9ca3af;
}
.LogViewer_resultInfo__wx8SQ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 6px;
  margin-bottom: 12px;
  border-left: 4px solid #2563eb;
}
.LogViewer_infoText__Zyzo- {
  font-size: 0.95rem;
  color: #374151;
  font-weight: 500;
}
.LogViewer_countText__7ONkt {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 600;
}
.LogViewer_resultList__HxZYx {
  margin-top: 10px;
}
.LogViewer_empty__q4yW7 {
  color: #888;
  text-align: center;
  padding: 30px 0;
}
.LogViewer_logItem__LYdGx {
  border-bottom: 1px solid #f1f1f1;
  padding: 12px 0;
}
.LogViewer_logMeta__uu4fT {
  display: flex;
  gap: 16px;
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 4px;
}
.LogViewer_logTime__vEItB {
  min-width: 120px;
  color: #2563eb;
}
.LogViewer_logLevel__zV\+YP {
  min-width: 60px;
  font-weight: 600;
}
.LogViewer_logUser__5d7Io {
  min-width: 80px;
  color: #059669;
}
.LogViewer_logMsg__4\+rdy {
  font-size: 1.05rem;
  color: #222;
  word-break: break-all;
}
@media (max-width: 600px) {
  .LogViewer_container__e\+-24 {
    padding: 10px;
  }
  .LogViewer_filterRow__kiV6v {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .LogViewer_logMeta__uu4fT {
    flex-direction: column;
    gap: 2px;
  }
}

.Login_container__L7l1s {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.Login_card__CZQ-4 {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.Login_title__ZIW0Y {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.Login_subtitle__T1Rjz {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}

.Login_form__hb90k {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Login_inputGroup__9P26K {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.Login_label__rCeDF {
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

.Login_input__mby41 {
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.Login_input__mby41:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.Login_button__gX5G5 {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-top: 0.5rem;
}

.Login_button__gX5G5:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

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

.Login_loading__FcLKb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.Login_spinner__cIFH9 {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff40;
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: Login_spin__LVP58 1s linear infinite;
}

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

.Login_error__xY52x {
  background: #fee2e2;
  color: #dc2626;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.Login_success__la3tM {
  background: #dcfce7;
  color: #16a34a;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .Login_container__L7l1s {
    padding: 1rem;
  }

  .Login_card__CZQ-4 {
    padding: 1.5rem;
  }

  .Login_title__ZIW0Y {
    font-size: 1.5rem;
  }
}

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

.SelectionInputArea_container__VBZMm.SelectionInputArea_disabled__gnuZF {
  opacity: 0.6;
  pointer-events: none;
}

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

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

.SelectionInputArea_optionButton__SU22a {
  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;
}

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

.SelectionInputArea_optionButton__SU22a.SelectionInputArea_selected__-Hlli {
  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);
}

.SelectionInputArea_submitButton__QiKUR {
  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;
}

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

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

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

/* 手機版樣式 */
@media (max-width: 700px) {
  .SelectionInputArea_container__VBZMm {
    padding: 10px;
  }

  .SelectionInputArea_optionButton__SU22a {
    font-size: 1rem;
    padding: 8px 16px;
  }

  .SelectionInputArea_submitButton__QiKUR {
    font-size: 1.1rem;
  }
}

/* QuickInputArea 樣式 - 整合快速選擇和自由輸入的彈出式組件 */

.QuickInputArea_overlay__NpD2R {
  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: 99999;
  padding: 20px;
  box-sizing: border-box;
}

.QuickInputArea_container__JKPAO {
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  animation: QuickInputArea_modalSlideUp__Rb\+GI 0.3s ease-out;
}

@keyframes QuickInputArea_modalSlideUp__Rb\+GI {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.QuickInputArea_header__IwW6E {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #eee;
}

.QuickInputArea_title__CZ8po {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.QuickInputArea_closeButton__vYo4n {
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.QuickInputArea_closeButton__vYo4n:hover {
  background-color: #f5f5f5;
  color: #333;
}

.QuickInputArea_quickSelection__JK2OR {
  padding: 20px 24px;
}

.QuickInputArea_sectionLabel__i4dre {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.QuickInputArea_optionButtons__Gtbfn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.QuickInputArea_optionButton__iMJTB {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 24px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  text-align: center;
}

.QuickInputArea_optionButton__iMJTB:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.QuickInputArea_optionButton__iMJTB:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.QuickInputArea_divider__CWhwk {
  position: relative;
  margin: 0 24px;
  height: 1px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.QuickInputArea_dividerText__qAjpr {
  background: white;
  padding: 0 16px;
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.QuickInputArea_freeInputSection__XSSre {
  padding: 20px 24px 24px;
}

/* 手機端適配 */
@media (max-width: 768px) {
  .QuickInputArea_overlay__NpD2R {
    padding: 10px;
    align-items: center;
    justify-content: center;
  }

  .QuickInputArea_container__JKPAO {
    max-height: 90vh;
    border-radius: 16px;
    margin: auto;
    width: 95%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
  }

  .QuickInputArea_header__IwW6E {
    padding: 16px 20px 12px;
    flex-shrink: 0;
  }

  .QuickInputArea_title__CZ8po {
    font-size: 16px;
  }

  .QuickInputArea_quickSelection__JK2OR {
    padding: 16px 20px;
    flex-shrink: 0;
  }

  .QuickInputArea_freeInputSection__XSSre {
    padding: 16px 20px 20px;
    flex-shrink: 0;
    margin-top: auto;
  }

  .QuickInputArea_optionButtons__Gtbfn {
    gap: 8px;
    margin-bottom: 8px;
  }

  .QuickInputArea_optionButton__iMJTB {
    min-width: 60px;
  }

  .QuickInputArea_divider__CWhwk {
    margin: 8px 20px;
    flex-shrink: 0;
  }

  .QuickInputArea_dividerText__qAjpr {
    font-size: 11px;
    padding: 0 12px;
  }
}

/* 超小螢幕適配 */
@media (max-width: 480px) {
  .QuickInputArea_overlay__NpD2R {
    padding: 8px;
    align-items: center;
    justify-content: center;
  }

  .QuickInputArea_container__JKPAO {
    width: 98%;
    max-width: 100%;
    border-radius: 12px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
  }

  .QuickInputArea_quickSelection__JK2OR {
    padding: 12px 16px;
    flex-shrink: 0;
  }

  .QuickInputArea_freeInputSection__XSSre {
    padding: 12px 16px 16px;
    flex-shrink: 0;
    margin-top: 8px;
  }

  .QuickInputArea_optionButtons__Gtbfn {
    justify-content: center;
    gap: 6px;
    margin-bottom: 6px;
  }

  .QuickInputArea_optionButton__iMJTB {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 3px);
    min-width: 60px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .QuickInputArea_divider__CWhwk {
    margin: 6px 16px;
    flex-shrink: 0;
  }
}

/* 無障礙功能 */
@media (prefers-reduced-motion: reduce) {
  .QuickInputArea_container__JKPAO {
    animation: none;
  }

  .QuickInputArea_optionButton__iMJTB {
    transition: none;
  }
}

/* iPhone設備專用適配 */
@media (max-device-width: 428px) and (-webkit-min-device-pixel-ratio: 2) {
  .QuickInputArea_overlay__NpD2R {
    padding: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .QuickInputArea_container__JKPAO {
    width: 95% !important;
    max-width: 380px !important;
    border-radius: 16px !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .QuickInputArea_quickSelection__JK2OR {
    padding: 16px !important;
    flex-shrink: 0 !important;
  }

  .QuickInputArea_freeInputSection__XSSre {
    padding: 12px 16px 16px !important;
    flex-shrink: 0 !important;
    margin-top: 8px !important;
  }

  .QuickInputArea_optionButtons__Gtbfn {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  .QuickInputArea_optionButton__iMJTB {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 4px);
    min-width: 70px !important;
    max-width: 160px !important;
  }

  .QuickInputArea_optionButton__iMJTB:active {
    transform: scale(0.98) !important;
  }

  .QuickInputArea_sectionLabel__i4dre {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 12px !important;
  }

  .QuickInputArea_divider__CWhwk {
    margin: 8px 16px !important;
    flex-shrink: 0 !important;
  }
}

/* 專門針對小螢幕手機的強制顯示設定 */
@media (max-width: 767px) {
  .QuickInputArea_overlay__NpD2R {
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .QuickInputArea_container__JKPAO {
    position: relative !important;
    z-index: 999999 !important;
    background: white !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  .QuickInputArea_quickSelection__JK2OR {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: white !important;
    position: relative !important;
    z-index: 999999 !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }

  .QuickInputArea_divider__CWhwk {
    order: 2 !important;
    flex-shrink: 0 !important;
  }

  .QuickInputArea_freeInputSection__XSSre {
    order: 3 !important;
    flex-shrink: 0 !important;
    margin-top: 8px !important;
  }

  .QuickInputArea_optionButtons__Gtbfn {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  .QuickInputArea_optionButton__iMJTB {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(50% - 4px);
    min-width: 80px !important;
    max-width: 150px !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  .QuickInputArea_optionButton__iMJTB:active {
    transform: scale(0.95) !important;
  }

  .QuickInputArea_sectionLabel__i4dre {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 12px !important;
  }
}

/* 高對比模式支援 */
@media (prefers-contrast: high) {
  .QuickInputArea_container__JKPAO {
    border: 2px solid #000;
  }

  .QuickInputArea_optionButton__iMJTB {
    border-color: #000;
  }

  .QuickInputArea_optionButton__iMJTB:hover {
    background: #000;
    color: #fff;
  }
}

/* RealtimeInputArea 基礎樣式 - 浮動在底部 */
.RealtimeInputArea_container__IlBu3 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  z-index: 10;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: auto;
}

.RealtimeInputArea_container__IlBu3.RealtimeInputArea_active__zg5bt {
  transform: translateY(0);
}

.RealtimeInputArea_container__IlBu3.RealtimeInputArea_disabled__H5Eqz {
  opacity: 0.6;
  pointer-events: none;
}

/* 模式特定樣式 */
.RealtimeInputArea_container__IlBu3.RealtimeInputArea_voice__p7hTl {
  /* 語音模式特定樣式 */
}

.RealtimeInputArea_container__IlBu3.RealtimeInputArea_text__9uRh3 {
  /* 文字模式特定樣式 */
}

/* 輸入區域 */
.RealtimeInputArea_inputArea__P4rJp {
  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) {
  .RealtimeInputArea_inputArea__P4rJp {
    padding-bottom: 30px;
  }
}

.RealtimeInputArea_inputArea__P4rJp > div {
  width: 100%;
}

/* 語音輸入模式 */
.RealtimeInputArea_voiceContainer__AC2MQ {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1rem;
  padding: 20px;
  position: relative;
}

/* VAD 模式選擇 */
.RealtimeInputArea_vadToggle__l0CuX {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: rgba(147, 51, 234, 0.05);
  border-radius: 6px;
  border: 1px solid rgba(147, 51, 234, 0.15);
}

.RealtimeInputArea_vadLabel__KGpmg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b21a8;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.RealtimeInputArea_vadLabel__KGpmg input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.RealtimeInputArea_vadLabel__KGpmg span {
  transition: color 0.3s ease;
}

.RealtimeInputArea_vadLabel__KGpmg:hover span {
  color: #7c3aed;
}

.RealtimeInputArea_vadHint__iimJ7 {
  font-size: 12px;
  color: #6b7280;
  text-align: center;
  font-style: italic;
}

.RealtimeInputArea_recordingSection__sD\+48 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.RealtimeInputArea_recordButton__OInuL {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.RealtimeInputArea_recordButton__OInuL:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
}

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

.RealtimeInputArea_recordButton__OInuL.RealtimeInputArea_recording__X2ZFm {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  animation: RealtimeInputArea_pulse__yeHhg 2s infinite;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
}

.RealtimeInputArea_recordButton__OInuL.RealtimeInputArea_vadMode__bPlk4 {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.3);
}

.RealtimeInputArea_recordButton__OInuL.RealtimeInputArea_vadMode__bPlk4:hover {
  box-shadow: 0 6px 24px rgba(147, 51, 234, 0.4);
}

.RealtimeInputArea_recordButton__OInuL.RealtimeInputArea_vadMode__bPlk4.RealtimeInputArea_recording__X2ZFm {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  animation: RealtimeInputArea_vadPulse__IA9lc 1.5s infinite;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
}

/* VAD 指示器樣式 */
.RealtimeInputArea_vadIndicator__rjhaA {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.3);
  cursor: default;
  transition: all 0.3s ease;
  animation: RealtimeInputArea_vadPulse__IA9lc 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.RealtimeInputArea_vadIndicator__rjhaA.RealtimeInputArea_active__zg5bt {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.4);
  animation: RealtimeInputArea_vadActive__ueRo\+ 1s ease-in-out infinite;
}

@keyframes RealtimeInputArea_vadActive__ueRo\+ {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

.RealtimeInputArea_recordButton__OInuL.RealtimeInputArea_recording__X2ZFm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 70%
  );
  animation: RealtimeInputArea_ripple__PpIuT 1.5s infinite;
}

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

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

@keyframes RealtimeInputArea_ripple__PpIuT {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes RealtimeInputArea_vadPulse__IA9lc {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.RealtimeInputArea_recordingStatus__7px\+N {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  text-align: center;
  min-height: 20px;
  transition: color 0.3s ease;
}

.RealtimeInputArea_recording__X2ZFm .RealtimeInputArea_recordingStatus__7px\+N {
  color: #ef4444;
  font-weight: 600;
}

/* 文字輸入模式 */
.RealtimeInputArea_textContainer__nrfnN {
  width: 100%;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.RealtimeInputArea_textInputWrapper__NDkKj {
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.RealtimeInputArea_textInput__YUaQ9 {
  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;
  transition: all 0.3s ease;
}

.RealtimeInputArea_textInput__YUaQ9:focus {
  border-color: #4c33ad;
  box-shadow: 0 0 0 3px rgba(76, 51, 173, 0.1);
}

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

.RealtimeInputArea_textInput__YUaQ9::placeholder {
  color: #9ca3af;
}

.RealtimeInputArea_sendButton__dD8eL {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  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%;
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.RealtimeInputArea_sendButton__dD8eL:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-50%) scale(1.1);
}

.RealtimeInputArea_sendButton__dD8eL:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translateY(-50%);
}

/* 模式切換 */
.RealtimeInputArea_modeToggle__K1oi5 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 8px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  color: #4c33ad;
  font-size: 11px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial,
    sans-serif;
  letter-spacing: 0px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(76, 51, 173, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
          user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: -webkit-fit-content;
  width: fit-content;
  white-space: nowrap;
}

.RealtimeInputArea_modeToggle__K1oi5:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(76, 51, 173, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.RealtimeInputArea_modeToggle__K1oi5:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(76, 51, 173, 0.2);
  color: #3b297a;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(76, 51, 173, 0.16), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.RealtimeInputArea_modeToggle__K1oi5:hover:before {
  left: 100%;
}

.RealtimeInputArea_modeToggle__K1oi5:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(76, 51, 173, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 為不同狀態添加特殊樣式 */
.RealtimeInputArea_modeToggle__K1oi5.RealtimeInputArea_switching__An5YI {
  background: linear-gradient(135deg, #4c33ad 0%, #6b46c1 100%);
  color: white;
  border-color: transparent;
}

.RealtimeInputArea_modeToggle__K1oi5.RealtimeInputArea_switching__An5YI:hover {
  background: linear-gradient(135deg, #3b297a 0%, #553c9a 100%);
  color: white;
}

/* 非活躍狀態 */
.RealtimeInputArea_inactiveHint__QUjBH {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  color: #9ca3af;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

/* 響應式設計 */
@media (max-width: 700px) {
  .RealtimeInputArea_inputArea__P4rJp {
    width: 100%;
  }

  .RealtimeInputArea_textContainer__nrfnN {
    padding: 0;
  }

  .RealtimeInputArea_recordButton__OInuL {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }

  .RealtimeInputArea_textInput__YUaQ9 {
    min-height: 60px;
    font-size: 16px; /* 防止 iOS 縮放 */
  }

  .RealtimeInputArea_sendButton__dD8eL {
    min-width: 70px;
    height: 44px;
    font-size: 13px;
  }

  .RealtimeInputArea_modeToggle__K1oi5 {
    padding: 4px 6px;
    font-size: 10px;
    margin-top: 4px;
    gap: 2px;
    min-height: 28px; /* iOS 點擊區域最小尺寸 */
    width: -webkit-fit-content;
    width: fit-content;
  }
}

/* 輔助樣式 */
.RealtimeInputArea_visuallyHidden__qMkUa {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.AiChat_container__tGgb8 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.AiChat_container__tGgb8:hover {
  border-color: #4285f4;
  box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
}

.AiChat_disabled__49qb6 {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.AiChat_statusArea__MgsHK {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.AiChat_loading__u0Hzi {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: #e3f2fd;
  color: #1976d2;
  border: 1px solid #bbdefb;
}

.AiChat_spinner__nmdHN {
  width: 20px;
  height: 20px;
  border: 2px solid #bbdefb;
  border-top: 2px solid #1976d2;
  border-radius: 50%;
  animation: AiChat_spin__ECCZP 1s linear infinite;
}

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

.AiChat_error__0tqc1 {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
}

.AiChat_success__WHV8q {
  background-color: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
}

.AiChat_controls__YpPMH {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.AiChat_processButton__OhogK {
  padding: 12px 24px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1 1;
  min-width: 120px;
}

.AiChat_processButton__OhogK:hover:not(:disabled) {
  background-color: #3367d6;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(66, 133, 244, 0.3);
}

.AiChat_processButton__OhogK:disabled {
  background-color: #e1e5e9;
  color: #9aa0a6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.AiChat_resetButton__RqnXJ {
  padding: 12px 24px;
  background-color: #f8f9fa;
  color: #5f6368;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
}

.AiChat_resetButton__RqnXJ:hover:not(:disabled) {
  background-color: #e8eaed;
  border-color: #dadce0;
  transform: translateY(-1px);
}

.AiChat_resetButton__RqnXJ:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.AiChat_messagePreview__9KG4t {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #4285f4;
}

.AiChat_label__X9dmv {
  font-size: 12px;
  font-weight: 600;
  color: #5f6368;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AiChat_message__o5GC3 {
  font-size: 14px;
  color: #202124;
  line-height: 1.5;
  word-wrap: break-word;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AiChat_container__tGgb8 {
    padding: 16px;
    gap: 12px;
  }

  .AiChat_controls__YpPMH {
    flex-direction: column;
  }

  .AiChat_processButton__OhogK,
  .AiChat_resetButton__RqnXJ {
    width: 100%;
    min-width: 0;
    min-width: initial;
  }

  .AiChat_statusArea__MgsHK {
    font-size: 13px;
    padding: 10px;
  }

  .AiChat_spinner__nmdHN {
    width: 16px;
    height: 16px;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .AiChat_container__tGgb8 {
    background-color: #202124;
    border-color: #5f6368;
    color: #e8eaed;
  }

  .AiChat_container__tGgb8:hover {
    border-color: #8ab4f8;
  }

  .AiChat_messagePreview__9KG4t {
    background-color: #303134;
    border-left-color: #8ab4f8;
  }

  .AiChat_loading__u0Hzi {
    background-color: #1a2332;
    color: #8ab4f8;
    border-color: #3c4043;
  }

  .AiChat_error__0tqc1 {
    background-color: #3d2a2a;
    color: #f28b82;
    border-color: #5f2a28;
  }

  .AiChat_success__WHV8q {
    background-color: #2a3d2a;
    color: #81c995;
    border-color: #285f2a;
  }

  .AiChat_resetButton__RqnXJ {
    background-color: #303134;
    color: #e8eaed;
    border-color: #5f6368;
  }

  .AiChat_resetButton__RqnXJ:hover:not(:disabled) {
    background-color: #404144;
    border-color: #8ab4f8;
  }
}

.AiDataProcessor_container__OCira {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.AiDataProcessor_container__OCira.AiDataProcessor_disabled__V5TOv {
  opacity: 0.6;
  pointer-events: none;
}

.AiDataProcessor_inputSection__VpR6s {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.AiDataProcessor_processingHint__u5Q0C {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #6c757d;
}

.AiDataProcessor_processDetails__2JDBl {
  margin-top: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #f8f9fa;
}

.AiDataProcessor_processDetails__2JDBl summary {
  padding: 0.75rem;
  cursor: pointer;
  font-weight: 500;
  color: #495057;
  background: #e9ecef;
  border-radius: 6px 6px 0 0;
  -webkit-user-select: none;
          user-select: none;
}

.AiDataProcessor_processDetails__2JDBl summary:hover {
  background: #dee2e6;
}

.AiDataProcessor_aiSection__WYPB5,
.AiDataProcessor_storageSection__2YofY {
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
}

.AiDataProcessor_aiSection__WYPB5:last-child,
.AiDataProcessor_storageSection__2YofY:last-child {
  border-bottom: none;
}

.AiDataProcessor_aiSection__WYPB5 h4,
.AiDataProcessor_storageSection__2YofY h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #495057;
}

.AiDataProcessor_hiddenProcessors__5JgJ6 {
  display: none;
}

.AiDataProcessor_actions__rukwY {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.AiDataProcessor_resetButton__UHCJD {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.AiDataProcessor_resetButton__UHCJD:hover {
  background: #5a6268;
}

.AiDataProcessor_resetButton__UHCJD:active {
  background: #495057;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AiDataProcessor_container__OCira {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .AiDataProcessor_processDetails__2JDBl summary {
    padding: 0.5rem;
  }

  .AiDataProcessor_aiSection__WYPB5,
  .AiDataProcessor_storageSection__2YofY {
    padding: 0.75rem;
  }
}

/* 無障礙功能 */
@media (prefers-reduced-motion: reduce) {
  .AiDataProcessor_resetButton__UHCJD {
    transition: none;
  }
}

.AiDataProcessor_resetButton__UHCJD:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* MultiRoundAiProcessor 組件樣式 */

.MultiRoundAiProcessor_multiRoundProcessor__q8xgh {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.MultiRoundAiProcessor_header__RI\+Yg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.MultiRoundAiProcessor_title__8yFzb {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.MultiRoundAiProcessor_controls__h7poL {
  display: flex;
  gap: 12px;
}

.MultiRoundAiProcessor_controlButton__758Ir {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.MultiRoundAiProcessor_startButton__oUi0H {
  background: linear-gradient(135deg, #4caf50, #45a049);
  color: white;
}

.MultiRoundAiProcessor_startButton__oUi0H:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.MultiRoundAiProcessor_stopButton__he2TW {
  background: linear-gradient(135deg, #f44336, #d32f2f);
  color: white;
}

.MultiRoundAiProcessor_stopButton__he2TW:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
}

.MultiRoundAiProcessor_resetButton__G-4zt {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
}

.MultiRoundAiProcessor_resetButton__G-4zt:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.MultiRoundAiProcessor_inputSection__qqaLS {
  margin-bottom: 24px;
}

.MultiRoundAiProcessor_inputLabel__5Us-V {
  display: block;
  font-weight: 600;
  color: #34495e;
  margin-bottom: 8px;
  font-size: 1rem;
}

.MultiRoundAiProcessor_inputArea__ZbY-9 {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.MultiRoundAiProcessor_inputArea__ZbY-9:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.MultiRoundAiProcessor_inputArea__ZbY-9::placeholder {
  color: #95a5a6;
}

.MultiRoundAiProcessor_progressSection__Npc\+u {
  margin-bottom: 24px;
}

.MultiRoundAiProcessor_progressHeader__u4k2S {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.MultiRoundAiProcessor_progressTitle__FIIy- {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.MultiRoundAiProcessor_progressPercentage__RPUch {
  font-size: 1.1rem;
  font-weight: 600;
  color: #3498db;
}

.MultiRoundAiProcessor_progressBar__XyvgP {
  width: 100%;
  height: 8px;
  background-color: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.MultiRoundAiProcessor_progressFill__-fpAR {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.MultiRoundAiProcessor_phaseIndicators__2XajH {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.MultiRoundAiProcessor_phaseIndicator__tW8TY {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border-radius: 8px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.MultiRoundAiProcessor_phaseIndicator__tW8TY.MultiRoundAiProcessor_active__1mJly {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border-color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.MultiRoundAiProcessor_phaseIndicator__tW8TY.MultiRoundAiProcessor_completed__pX9pc {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
  border-color: #2ecc71;
}

.MultiRoundAiProcessor_phaseIcon__\+LC7s {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.MultiRoundAiProcessor_phaseLabel__zPo5J {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.MultiRoundAiProcessor_currentStep__4N5aG {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.MultiRoundAiProcessor_stepLabel__7zXzQ {
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
}

.MultiRoundAiProcessor_stepContent__\+rb1j {
  color: #6c757d;
  font-size: 0.95rem;
  line-height: 1.5;
}

.MultiRoundAiProcessor_resultsSection__AzpCV {
  margin-top: 24px;
}

.MultiRoundAiProcessor_resultsTitle__Uh8mJ {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
}

.MultiRoundAiProcessor_resultItem__2O8ZS {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.MultiRoundAiProcessor_resultHeader__rLuG7 {
  display: flex;
  justify-content: between;
  align-items: center;
  margin-bottom: 8px;
}

.MultiRoundAiProcessor_resultType__NXcYe {
  font-weight: 600;
  color: #495057;
}

.MultiRoundAiProcessor_resultTimestamp__A65PI {
  font-size: 0.85rem;
  color: #6c757d;
}

.MultiRoundAiProcessor_resultContent__Mhtab {
  color: #495057;
  line-height: 1.5;
}

.MultiRoundAiProcessor_errorMessage__2hxqh {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.MultiRoundAiProcessor_loadingSpinner__U0Ogu {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: MultiRoundAiProcessor_spin__4Gkrw 1s linear infinite;
  margin-right: 8px;
}

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

/* 響應式設計 */
@media (max-width: 768px) {
  .MultiRoundAiProcessor_multiRoundProcessor__q8xgh {
    padding: 16px;
  }

  .MultiRoundAiProcessor_header__RI\+Yg {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .MultiRoundAiProcessor_controls__h7poL {
    justify-content: center;
  }

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

  .MultiRoundAiProcessor_phaseIndicator__tW8TY {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
  }

  .MultiRoundAiProcessor_phaseIcon__\+LC7s {
    margin-bottom: 0;
  }
}

/* 無障礙功能 */
@media (prefers-reduced-motion: reduce) {
  .MultiRoundAiProcessor_progressFill__-fpAR,
  .MultiRoundAiProcessor_phaseIndicator__tW8TY,
  .MultiRoundAiProcessor_controlButton__758Ir {
    transition: none;
  }

  .MultiRoundAiProcessor_loadingSpinner__U0Ogu {
    animation: none;
  }
}

.EditRecordModal_modalOverlay__mnQfk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.EditRecordModal_modalContent__SPh38 {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.EditRecordModal_modalHeader__TeFh3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.EditRecordModal_modalHeader__TeFh3 h3 {
  margin: 0;
  color: #1f2937;
  font-size: 1.25rem;
  font-weight: 600;
}

.EditRecordModal_closeButton__Xeyd8 {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.EditRecordModal_closeButton__Xeyd8:hover {
  background-color: #f3f4f6;
  color: #374151;
}

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

.EditRecordModal_modalBody__pkewz {
  padding: 24px;
  flex: 1 1;
  overflow-y: auto;
}

.EditRecordModal_recordInfo__NQVwW {
  background: #f0f9ff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #0ea5e9;
  color: #0c4a6e;
  font-size: 0.9rem;
}

.EditRecordModal_fieldsContainer__3jG37 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.EditRecordModal_fieldGroup__F0fd3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.EditRecordModal_fieldLabel__GPQUB {
  font-weight: 500;
  color: #374151;
  font-size: 0.9rem;
}

.EditRecordModal_inputField__eevag,
.EditRecordModal_selectField__sq0yX {
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.EditRecordModal_inputField__eevag:focus,
.EditRecordModal_selectField__sq0yX:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.EditRecordModal_selectField__sq0yX {
  background: white;
  cursor: pointer;
}

.EditRecordModal_modalFooter__KIhvK {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.EditRecordModal_cancelButton__hQsZw,
.EditRecordModal_saveButton__4BTfU {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.EditRecordModal_cancelButton__hQsZw {
  background: white;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.EditRecordModal_cancelButton__hQsZw:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.EditRecordModal_saveButton__4BTfU {
  background: #3b82f6;
  color: white;
  border: 1px solid #3b82f6;
}

.EditRecordModal_saveButton__4BTfU:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.EditRecordModal_saveButton__4BTfU:disabled,
.EditRecordModal_cancelButton__hQsZw:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 手機版調整 */
@media (max-width: 640px) {
  .EditRecordModal_modalContent__SPh38 {
    width: 95%;
    max-height: 90vh;
  }

  .EditRecordModal_modalHeader__TeFh3,
  .EditRecordModal_modalBody__pkewz,
  .EditRecordModal_modalFooter__KIhvK {
    padding: 16px;
  }

  .EditRecordModal_modalFooter__KIhvK {
    flex-direction: column;
  }

  .EditRecordModal_cancelButton__hQsZw,
  .EditRecordModal_saveButton__4BTfU {
    width: 100%;
  }
}

.RecentRecords_container__\+CfHO {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8ecef;
  overflow: hidden;
}

/* 標題和按鈕區域 */
.RecentRecords_header__Ujey2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f0f0f0;
  background: #f8f9fa;
}

.RecentRecords_title__y59qj {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.RecentRecords_actions__wI8-H {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* 按鈕樣式 */
.RecentRecords_refreshButton__gO3gh,
.RecentRecords_expandButton__f51oy,
.RecentRecords_collapseButton__G2kGG {
  padding: 0.5rem 1rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  color: #6c757d;
}

.RecentRecords_refreshButton__gO3gh {
  background: #e3f2fd;
  color: #1976d2;
  border-color: #bbdefb;
  padding: 0.5rem;
  border-radius: 50%;
  font-size: 1rem;
}

.RecentRecords_refreshButton__gO3gh:hover {
  background: #bbdefb;
  color: #1565c0;
  transform: rotate(180deg);
}

.RecentRecords_expandButton__f51oy,
.RecentRecords_collapseButton__G2kGG {
  background: #f8f9fa;
  color: #6c757d;
  border-color: #dee2e6;
}

.RecentRecords_expandButton__f51oy:hover,
.RecentRecords_collapseButton__G2kGG:hover {
  background: #e9ecef;
  color: #495057;
}

/* 內容區域 */
.RecentRecords_content__LnFBG {
  padding: 2rem;
}

/* 載入狀態 */
.RecentRecords_loading__WBtTq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  color: #6c757d;
}

.RecentRecords_spinner__GPzRL {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: RecentRecords_spin__kfqyE 1s linear infinite;
}

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

/* 記錄列表 */
.RecentRecords_recordsList__FaEen {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.RecentRecords_recordItem__UzWWX {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid #3498db;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

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

/* 記錄內容區域 */
.RecentRecords_recordContent__SNeE3 {
  flex: 1 1;
  min-width: 0; /* 允許內容收縮 */
}

/* 操作按鈕區域 */
.RecentRecords_recordActions__-3d-8 {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0; /* 防止按鈕被壓縮 */
}

/* 操作按鈕 */
.RecentRecords_actionButton__nOfKg {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.RecentRecords_actionButton__nOfKg:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.RecentRecords_actionButton__nOfKg:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 複製按鈕 */
.RecentRecords_actionButton__nOfKg:nth-child(1) {
  color: #6c757d;
  border-color: #ced4da;
}

.RecentRecords_actionButton__nOfKg:nth-child(1):hover {
  background: #e9ecef;
  color: #495057;
}

/* 編輯按鈕 */
.RecentRecords_editButton__d1NQ8 {
  color: #0d6efd;
  border-color: #0d6efd;
}

.RecentRecords_editButton__d1NQ8:hover {
  background: #0d6efd;
  color: white;
}

/* 刪除按鈕 */
.RecentRecords_deleteButton__tNrab {
  color: #dc3545;
  border-color: #dc3545;
}

.RecentRecords_deleteButton__tNrab:hover {
  background: #dc3545;
  color: white;
}

/* 禁用狀態 */
.RecentRecords_refreshButton__gO3gh:disabled,
.RecentRecords_expandButton__f51oy:disabled,
.RecentRecords_collapseButton__G2kGG:disabled,
.RecentRecords_actionButton__nOfKg:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* 空狀態 */
.RecentRecords_empty__xsjyE {
  text-align: center;
  color: #6c757d;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
}

.RecentRecords_empty__xsjyE p {
  margin: 0;
  font-size: 1rem;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .RecentRecords_header__Ujey2 {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
  }

  .RecentRecords_actions__wI8-H {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .RecentRecords_content__LnFBG {
    padding: 1rem;
  }

  .RecentRecords_recordItem__UzWWX {
    padding: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .RecentRecords_recordActions__-3d-8 {
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .RecentRecords_actionButton__nOfKg {
    min-width: 40px;
    min-height: 40px;
    font-size: 1.1rem;
  }
}

/* 動畫效果 */
@keyframes RecentRecords_slideIn__ToODH {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.RecentRecords_recordItem__UzWWX {
  animation: RecentRecords_slideIn__ToODH 0.3s ease-out;
}

/* 無障礙功能 */
@media (prefers-reduced-motion: reduce) {
  .RecentRecords_recordItem__UzWWX {
    animation: none;
    transition: none;
  }

  .RecentRecords_recordItem__UzWWX:hover {
    transform: none;
  }

  .RecentRecords_refreshButton__gO3gh:hover {
    transform: none;
  }

  .RecentRecords_spinner__GPzRL {
    animation: none;
  }
}

.AccountingRecordItem_recordItem__BHuix {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid #3498db;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* 收入和支出的不同樣式 */
.AccountingRecordItem_income__w\+oEd {
  border-left-color: #27ae60;
}

.AccountingRecordItem_expense__T12sW {
  border-left-color: #e74c3c;
}

.AccountingRecordItem_transfer__6AiCO {
  border-left-color: #3498db;
}

/* 金額顯示 */
.AccountingRecordItem_amount__\+khfI {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.AccountingRecordItem_income__w\+oEd .AccountingRecordItem_amount__\+khfI {
  color: #27ae60;
}

.AccountingRecordItem_expense__T12sW .AccountingRecordItem_amount__\+khfI {
  color: #e74c3c;
}

.AccountingRecordItem_transfer__6AiCO .AccountingRecordItem_amount__\+khfI {
  color: #3498db;
}

/* 詳細資訊 */
.AccountingRecordItem_details__ncPmv {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.AccountingRecordItem_category__GdhF\+ {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: white;
}

.AccountingRecordItem_category__GdhF\+.AccountingRecordItem_收入__UDMqJ {
  background: #27ae60;
}

.AccountingRecordItem_category__GdhF\+.AccountingRecordItem_支出__EMRnU {
  background: #e74c3c;
}

.AccountingRecordItem_category__GdhF\+.AccountingRecordItem_轉帳__XWJC4 {
  background: #3498db;
}

.AccountingRecordItem_description__OEgxq {
  color: #2c3e50;
  font-weight: 500;
}

.AccountingRecordItem_date__WqoB0 {
  color: #6c757d;
  font-size: 0.9rem;
}

/* 標籤 */
.AccountingRecordItem_tags__FBR7p {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.AccountingRecordItem_tag__X9bqz {
  background: #e8f5e8;
  color: #27ae60;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  border: 1px solid #c3e6c3;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AccountingRecordItem_recordItem__BHuix {
    padding: 1rem;
  }

  .AccountingRecordItem_details__ncPmv {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .AccountingRecordItem_amount__\+khfI {
    font-size: 1.1rem;
  }
}

/* 動畫效果 */
@keyframes AccountingRecordItem_slideIn__h3iww {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.AccountingRecordItem_recordItem__BHuix {
  animation: AccountingRecordItem_slideIn__h3iww 0.3s ease-out;
}

/* 無障礙功能 */
@media (prefers-reduced-motion: reduce) {
  .AccountingRecordItem_recordItem__BHuix {
    animation: none;
    transition: none;
  }

  .AccountingRecordItem_recordItem__BHuix:hover {
    transform: none;
  }
}

.ImageGenerationAgent_container__qa6J7 {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ImageGenerationAgent_container__qa6J7:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Header 區域 */
.ImageGenerationAgent_header__T1k4c {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-height: 60px;
}

.ImageGenerationAgent_header__T1k4c.ImageGenerationAgent_clickable__uz6is {
  cursor: pointer;
  transition: background 0.3s ease;
}

.ImageGenerationAgent_header__T1k4c.ImageGenerationAgent_clickable__uz6is:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.ImageGenerationAgent_headerLeft__XZgNB {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ImageGenerationAgent_engineIcon__gmRpu {
  font-size: 1.5rem;
  animation: ImageGenerationAgent_pulse__\+FSr2 2s infinite;
}

@keyframes ImageGenerationAgent_pulse__\+FSr2 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.ImageGenerationAgent_engineTitle__wmurA {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

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

/* 狀態徽章 */
.ImageGenerationAgent_statusBadge__SEfc8 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.ImageGenerationAgent_statusIcon__O1EzX {
  font-size: 1rem;
}

.ImageGenerationAgent_statusText__9U1xj {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 緊湊進度條 */
.ImageGenerationAgent_compactProgress__Y6P64 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ImageGenerationAgent_compactProgressBar__Ypp1s {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.ImageGenerationAgent_compactProgressFill__V7WbS {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.ImageGenerationAgent_compactProgressText__bE2Ky {
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 30px;
}

.ImageGenerationAgent_expandIcon__NcZkJ {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

/* 展開內容 */
.ImageGenerationAgent_expandedContent__AlkxN {
  padding: 1.5rem;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* 輸入資訊區域 */
.ImageGenerationAgent_inputSection__o73jP {
  margin-bottom: 1.5rem;
}

.ImageGenerationAgent_inputSection__o73jP h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ImageGenerationAgent_inputDetails__-Dkxw {
  display: grid;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.ImageGenerationAgent_inputItem__GRw4s {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ImageGenerationAgent_inputLabel__ROKIG {
  font-weight: 600;
  color: #495057;
  min-width: 80px;
  flex-shrink: 0;
}

.ImageGenerationAgent_inputValue__QnqSA {
  color: #212529;
  background: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  font-family: monospace;
  font-size: 0.875rem;
  flex: 1 1;
  word-break: break-word;
}

/* 結果區域 */
.ImageGenerationAgent_resultSection__D8FOm {
  margin-bottom: 1.5rem;
}

.ImageGenerationAgent_resultSection__D8FOm h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

.ImageGenerationAgent_resultItem__H9Ufj {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: #f8f9fa;
  padding: 0.75rem;
  border-radius: 6px;
  border-left: 3px solid #28a745;
}

.ImageGenerationAgent_resultLabel__pGM0w {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ImageGenerationAgent_resultValue__1LZ0f {
  font-size: 0.875rem;
  color: #212529;
  font-family: monospace;
  word-break: break-word;
}

/* 圖片預覽 */
.ImageGenerationAgent_imagePreview__FkJBa {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  border: 2px dashed #dee2e6;
  margin-bottom: 1rem;
}

.ImageGenerationAgent_imagePreview__FkJBa h5 {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
}

.ImageGenerationAgent_previewImage__56-3v {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 auto 1rem auto;
}

.ImageGenerationAgent_imageUrl__q7xoV {
  margin: 0;
  font-size: 0.75rem;
  color: #6c757d;
  word-break: break-all;
}

.ImageGenerationAgent_imageUrl__q7xoV a {
  color: #007bff;
  text-decoration: none;
}

.ImageGenerationAgent_imageUrl__q7xoV a:hover {
  text-decoration: underline;
}

/* 進度區域 */
.ImageGenerationAgent_progressSection__QHV1i {
  margin-bottom: 1.5rem;
}

.ImageGenerationAgent_progressBar__clwX5 {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.ImageGenerationAgent_progressFill__-udhE {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
  border-radius: 4px;
}

.ImageGenerationAgent_progressText__8AkQb {
  font-size: 0.875rem;
  color: #495057;
  font-weight: 500;
  text-align: center;
}

/* 步驟區域 */
.ImageGenerationAgent_stepsSection__FZLTC {
  margin-bottom: 1.5rem;
}

.ImageGenerationAgent_stepsSection__FZLTC h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ImageGenerationAgent_stepsList__Adm3Y {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ImageGenerationAgent_stepItem__gDXJO {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 0.75rem;
  transition: all 0.3s ease;
}

.ImageGenerationAgent_stepItem__gDXJO.ImageGenerationAgent_active__be4gu {
  border-color: #007bff;
  background: #f8f9ff;
}

.ImageGenerationAgent_stepItem__gDXJO.ImageGenerationAgent_completed__3pP08 {
  border-color: #28a745;
  background: #f8fff9;
}

.ImageGenerationAgent_stepItem__gDXJO.ImageGenerationAgent_error__k07zh {
  border-color: #dc3545;
  background: #fff8f8;
}

.ImageGenerationAgent_stepHeader__4iMiE {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ImageGenerationAgent_stepIcon__Yp2Wt {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.ImageGenerationAgent_stepMessage__oOhwA {
  flex: 1 1;
  font-size: 0.875rem;
  color: #495057;
}

.ImageGenerationAgent_stepProgress__veUkg {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  min-width: 40px;
  text-align: right;
}

.ImageGenerationAgent_stepDetails__nxPQ\+ {
  margin-top: 0.5rem;
}

.ImageGenerationAgent_stepDetails__nxPQ\+ summary {
  font-size: 0.75rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0.25rem 0;
}

.ImageGenerationAgent_stepDetails__nxPQ\+ summary:hover {
  color: #495057;
}

.ImageGenerationAgent_stepDetailsContent__g30qX {
  background: #f8f9fa;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #495057;
  margin-top: 0.5rem;
  border: 1px solid #dee2e6;
  overflow-x: auto;
}

/* 詳細資訊展開 */
.ImageGenerationAgent_fullResultDetails__2sYlM {
  margin-top: 1rem;
}

.ImageGenerationAgent_fullResultDetails__2sYlM summary {
  font-size: 0.875rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
}

.ImageGenerationAgent_fullResultDetails__2sYlM summary:hover {
  color: #495057;
}

.ImageGenerationAgent_fullResultContent__J5KUg {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #495057;
  margin-top: 0.5rem;
  border: 1px solid #dee2e6;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

/* 控制按鈕 */
.ImageGenerationAgent_controls__X67b0 {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.ImageGenerationAgent_stopButton__hYDF\+ {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ImageGenerationAgent_stopButton__hYDF\+:hover {
  background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.ImageGenerationAgent_stopButton__hYDF\+:active {
  transform: translateY(0);
}

/* 響應式設計 */
@media (max-width: 768px) {
  .ImageGenerationAgent_header__T1k4c {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.5rem;
    min-height: auto;
  }

  .ImageGenerationAgent_headerRight__zQD8D {
    align-self: stretch;
    justify-content: space-between;
  }

  .ImageGenerationAgent_engineTitle__wmurA {
    font-size: 1rem;
  }

  .ImageGenerationAgent_expandedContent__AlkxN {
    padding: 1rem;
  }

  .ImageGenerationAgent_inputDetails__-Dkxw {
    padding: 0.75rem;
  }

  .ImageGenerationAgent_inputItem__GRw4s {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .ImageGenerationAgent_inputLabel__ROKIG {
    min-width: auto;
  }

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

  .ImageGenerationAgent_stepHeader__4iMiE {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .ImageGenerationAgent_stepMessage__oOhwA {
    flex-basis: 100%;
  }
}

/* 無障礙功能 */
@media (prefers-reduced-motion: reduce) {
  .ImageGenerationAgent_container__qa6J7,
  .ImageGenerationAgent_header__T1k4c.ImageGenerationAgent_clickable__uz6is,
  .ImageGenerationAgent_compactProgressFill__V7WbS,
  .ImageGenerationAgent_progressFill__-udhE,
  .ImageGenerationAgent_stepItem__gDXJO,
  .ImageGenerationAgent_stopButton__hYDF\+ {
    transition: none;
  }

  .ImageGenerationAgent_engineIcon__gmRpu {
    animation: none;
  }
}

/* 高對比模式 */
@media (prefers-contrast: high) {
  .ImageGenerationAgent_container__qa6J7 {
    border: 2px solid #000;
  }

  .ImageGenerationAgent_header__T1k4c {
    background: #000;
    color: #fff;
  }

  .ImageGenerationAgent_statusBadge__SEfc8 {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
  }

  .ImageGenerationAgent_inputValue__QnqSA {
    border: 2px solid #000;
  }
}

.ExecutionEngine_container__zhqGx {
  background: linear-gradient(135deg, #f0fff4 0%, #e8f5e8 100%);
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 0;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

.ExecutionEngine_container__zhqGx:hover {
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.25);
  transform: translateY(-2px);
}

.ExecutionEngine_header__fC-IJ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
  color: white;
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease;
}

.ExecutionEngine_header__fC-IJ.ExecutionEngine_clickable__9tMCD {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.ExecutionEngine_header__fC-IJ.ExecutionEngine_clickable__9tMCD:hover {
  background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
  transform: scale(1.01);
}

.ExecutionEngine_headerLeft__IvSEr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ExecutionEngine_engineIcon__wDsLr {
  font-size: 24px;
  animation: ExecutionEngine_rotate__V9g\+N 3s linear infinite;
}

@keyframes ExecutionEngine_rotate__V9g\+N {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ExecutionEngine_engineTitle__TePsS {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.ExecutionEngine_headerRight__9g3bQ {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ExecutionEngine_statusBadge__0ai8Z {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.ExecutionEngine_statusIcon__oZdqA {
  font-size: 16px;
}

.ExecutionEngine_statusText__9rjfk {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

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

.ExecutionEngine_compactProgressBar__VCCdK {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.ExecutionEngine_compactProgressFill__QTX-Y {
  height: 100%;
  background: linear-gradient(90deg, #00ff88 0%, #00cc6a 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ExecutionEngine_compactProgressText__gRfTI {
  font-size: 12px;
  font-weight: 600;
  color: white;
  min-width: 35px;
}

.ExecutionEngine_expandIcon__Gk6-o {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.ExecutionEngine_expandedContent__NlPkl {
  padding: 20px;
  background: white;
  animation: ExecutionEngine_slideDown__octJ7 0.3s ease;
}

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

.ExecutionEngine_planInfo__fK-j\+ {
  background: #f0fff4;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.ExecutionEngine_planLabel__LbGVl {
  font-weight: 600;
  color: #2e7d32;
  margin-bottom: 12px;
  font-size: 14px;
}

.ExecutionEngine_planDetails__ldfDh {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.ExecutionEngine_planItem__-Cj1r {
  background: white;
  border: 1px solid #e8f5e8;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  color: #333;
}

.ExecutionEngine_planItem__-Cj1r strong {
  color: #2e7d32;
  font-weight: 600;
}

.ExecutionEngine_resultSummary__j\+PQv {
  background: #f0f8ff;
  border: 2px solid #4caf50;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.ExecutionEngine_resultSummary__j\+PQv h4 {
  margin: 0 0 16px 0;
  color: #2e7d32;
  font-size: 16px;
  font-weight: 600;
}

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

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

.ExecutionEngine_resultLabel__ygCwq {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ExecutionEngine_resultValue__kggFl {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #c8e6c9;
}

.ExecutionEngine_detailedResultsSection__IMJA2 {
  background: #f8fff8;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 16px;
}

.ExecutionEngine_detailedResultsSection__IMJA2 h5 {
  margin: 0 0 12px 0;
  color: #2e7d32;
  font-size: 14px;
  font-weight: 600;
}

.ExecutionEngine_detailedResultsList__W9hz8 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ExecutionEngine_detailedResultItem__NRQ0C {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.ExecutionEngine_detailedResultItem__NRQ0C.ExecutionEngine_success__aOUzq {
  border-color: #4caf50;
  background: #f8fff8;
}

.ExecutionEngine_detailedResultItem__NRQ0C.ExecutionEngine_error__uou1N {
  border-color: #f44336;
  background: #fff8f8;
}

.ExecutionEngine_resultHeader__1J5ze {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ExecutionEngine_resultIcon__dmh3A {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.ExecutionEngine_resultTitle__yydhQ {
  flex: 1 1;
  font-weight: 500;
  color: #333;
}

.ExecutionEngine_resultTime__33EBj {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 12px;
}

.ExecutionEngine_resultDetails__GKb7C {
  margin-left: 32px;
}

.ExecutionEngine_successDetails__Hcuaw {
  color: #2e7d32;
}

.ExecutionEngine_errorDetails__LatGM {
  color: #d32f2f;
}

.ExecutionEngine_dataCount__DQdd4 {
  font-size: 13px;
  font-weight: 500;
}

.ExecutionEngine_errorMessage__oh7rh {
  font-size: 13px;
  font-weight: 500;
}

.ExecutionEngine_dataPreview__S72gV {
  margin-top: 8px;
  cursor: pointer;
}

.ExecutionEngine_dataPreview__S72gV summary {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  padding: 4px 0;
}

.ExecutionEngine_dataContent__2\+qt3 {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  font-size: 11px;
  color: #333;
  margin-top: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.ExecutionEngine_progressSection__FU4D1 {
  background: #fff3e0;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.ExecutionEngine_progressBar__\+xzTT {
  width: 100%;
  height: 8px;
  background: #c8e6c9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ExecutionEngine_progressFill__YK765 {
  height: 100%;
  background: linear-gradient(90deg, #4caf50 0%, #388e3c 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.ExecutionEngine_progressText__4GheR {
  font-size: 14px;
  font-weight: 500;
  color: #2e7d32;
  text-align: center;
}

.ExecutionEngine_stepsSection__clzW4 {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.ExecutionEngine_stepsSection__clzW4 h4 {
  margin: 0 0 16px 0;
  color: #424242;
  font-size: 16px;
  font-weight: 600;
}

.ExecutionEngine_stepsList__1WWrQ {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ExecutionEngine_stepItem__v9Ir4 {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.ExecutionEngine_stepItem__v9Ir4.ExecutionEngine_pending__ONdQF {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.ExecutionEngine_stepItem__v9Ir4.ExecutionEngine_active__Tjb\+n {
  border-color: #4caf50;
  background: #f0fff4;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.ExecutionEngine_stepItem__v9Ir4.ExecutionEngine_completed__2gQLl {
  border-color: #4caf50;
  background: #e8f5e8;
}

.ExecutionEngine_stepItem__v9Ir4.ExecutionEngine_error__uou1N {
  border-color: #f44336;
  background: #ffebee;
}

.ExecutionEngine_stepHeader__Ojzj3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ExecutionEngine_stepIcon__lAWsW {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.ExecutionEngine_stepMessage__vy2QA {
  flex: 1 1;
  font-weight: 500;
  color: #333;
}

.ExecutionEngine_stepProgress__HayUK {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 12px;
}

.ExecutionEngine_stepResult__cu6Pw {
  margin-top: 8px;
  margin-left: 32px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #4caf50;
}

.ExecutionEngine_successText__fo-nH {
  color: #2e7d32;
  font-weight: 500;
}

.ExecutionEngine_errorText__R-A6g {
  color: #d32f2f;
  font-weight: 500;
}

.ExecutionEngine_stepDetails__hsorM {
  margin-top: 8px;
  margin-left: 32px;
}

.ExecutionEngine_stepDetails__hsorM details {
  cursor: pointer;
}

.ExecutionEngine_stepDetails__hsorM summary {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  padding: 4px 0;
}

.ExecutionEngine_detailsContent__9FNxT {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  font-size: 11px;
  color: #333;
  margin-top: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.ExecutionEngine_controls__8Kk0r {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.ExecutionEngine_stopButton__VBnLX {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.ExecutionEngine_stopButton__VBnLX:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

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

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

  .ExecutionEngine_header__fC-IJ {
    padding: 12px 16px;
  }

  .ExecutionEngine_engineTitle__TePsS {
    font-size: 16px;
  }

  .ExecutionEngine_expandedContent__NlPkl {
    padding: 16px;
  }

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

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

  .ExecutionEngine_stepDetails__hsorM {
    margin-left: 20px;
  }

  .ExecutionEngine_resultDetails__GKb7C {
    margin-left: 20px;
  }

  .ExecutionEngine_compactProgressBar__VCCdK {
    width: 60px;
  }
}

/* 新增的除錯資訊區域樣式 */
.ExecutionEngine_inputSection__iDNEU {
  background: #f0fff4;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.ExecutionEngine_inputSection__iDNEU h4 {
  margin: 0 0 12px 0;
  color: #2e7d32;
  font-size: 14px;
  font-weight: 600;
}

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

.ExecutionEngine_inputItem__abePz {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ExecutionEngine_inputLabel__Er\+hc {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ExecutionEngine_inputValue__uYx7J {
  font-size: 13px;
  color: #333;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  flex: 1 1;
}

.ExecutionEngine_taskPlanSection__xFCk1,
.ExecutionEngine_executionStepsSection__n22X2 {
  background: #fff9e6;
  border: 1px solid #ffa726;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.ExecutionEngine_taskPlanSection__xFCk1 h4,
.ExecutionEngine_executionStepsSection__n22X2 h4 {
  margin: 0 0 12px 0;
  color: #e65100;
  font-size: 14px;
  font-weight: 600;
}

.ExecutionEngine_taskPlanDetails__OyfwJ {
  margin-top: 8px;
}

.ExecutionEngine_taskPlanDetails__OyfwJ summary {
  cursor: pointer;
  font-weight: 500;
  color: #e65100;
  padding: 8px;
  background: rgba(255, 167, 38, 0.1);
  border-radius: 4px;
  border: 1px solid #ffa726;
  -webkit-user-select: none;
          user-select: none;
}

.ExecutionEngine_taskPlanDetails__OyfwJ summary:hover {
  background: rgba(255, 167, 38, 0.2);
}

.ExecutionEngine_taskPlanContent__bALq7 {
  background: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 6px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #4a5568;
}

.ExecutionEngine_executionStepsList__xHfJP {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ExecutionEngine_executionStepItem__MsKJ\+ {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

.ExecutionEngine_executionStepHeader__foIGr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ExecutionEngine_stepNumber__XQASs {
  background: #4caf50;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.ExecutionEngine_stepDescription__Nq93z {
  font-weight: 500;
  color: #333;
  flex: 1 1;
  font-size: 14px;
}

.ExecutionEngine_stepInputOutput__shVWJ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-top: 12px;
}

.ExecutionEngine_stepInput__SN0Gf,
.ExecutionEngine_stepOutput__VONrG {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px;
}

.ExecutionEngine_stepInput__SN0Gf strong,
.ExecutionEngine_stepOutput__VONrG strong {
  display: block;
  margin-bottom: 8px;
  color: #495057;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ExecutionEngine_stepInputContent__fQKne,
.ExecutionEngine_stepOutputContent__t0xM7 {
  background: #2d3748;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #4a5568;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .ExecutionEngine_inputItem__abePz {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ExecutionEngine_inputLabel__Er\+hc {
    min-width: auto;
  }

  .ExecutionEngine_inputValue__uYx7J {
    width: 100%;
  }

  .ExecutionEngine_stepInputOutput__shVWJ {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ExecutionEngine_taskPlanContent__bALq7,
  .ExecutionEngine_stepInputContent__fQKne,
  .ExecutionEngine_stepOutputContent__t0xM7 {
    font-size: 10px;
    padding: 10px;
  }
}

/* 等待訊息樣式 */
.ExecutionEngine_waitingMessage__b-mAs {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
  font-size: 14px;
}

.PlanningEngine_container__7kD\+y {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
  border: 2px solid #4a90e2;
  border-radius: 12px;
  padding: 0;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

.PlanningEngine_container__7kD\+y:hover {
  box-shadow: 0 6px 20px rgba(74, 144, 226, 0.25);
  transform: translateY(-2px);
}

.PlanningEngine_header__BI0Ta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: white;
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease;
}

.PlanningEngine_header__BI0Ta.PlanningEngine_clickable__zj2dA {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.PlanningEngine_header__BI0Ta.PlanningEngine_clickable__zj2dA:hover {
  background: linear-gradient(135deg, #357abd 0%, #2968a3 100%);
  transform: scale(1.01);
}

.PlanningEngine_headerLeft__8CIFw {
  display: flex;
  align-items: center;
  gap: 12px;
}

.PlanningEngine_engineIcon__gQ5uR {
  font-size: 24px;
  animation: PlanningEngine_pulse__m0Q4b 2s infinite;
}

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

.PlanningEngine_engineTitle__rNEyf {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.PlanningEngine_headerRight__meSbI {
  display: flex;
  align-items: center;
  gap: 16px;
}

.PlanningEngine_statusBadge__ebVgE {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.PlanningEngine_statusIcon__WVokB {
  font-size: 16px;
}

.PlanningEngine_statusText__MwjSM {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

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

.PlanningEngine_compactProgressBar__D30N8 {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.PlanningEngine_compactProgressFill__wTXnA {
  height: 100%;
  background: linear-gradient(90deg, #00ff88 0%, #00cc6a 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.PlanningEngine_compactProgressText__WBRoF {
  font-size: 12px;
  font-weight: 600;
  color: white;
  min-width: 35px;
}

.PlanningEngine_expandIcon__sv3LX {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.PlanningEngine_expandedContent__\+nf\+1 {
  padding: 20px;
  background: white;
  animation: PlanningEngine_slideDown__EZGud 0.3s ease;
}

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

.PlanningEngine_queryInfo__\+NVCw {
  background: #f8f9ff;
  border: 1px solid #e1e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.PlanningEngine_queryLabel__QEIZL {
  font-weight: 600;
  color: #4a90e2;
  margin-bottom: 8px;
  font-size: 14px;
}

.PlanningEngine_queryText__XHVmG {
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
  color: #333;
}

.PlanningEngine_resultSummary__wDiTH {
  background: #f0f8ff;
  border: 2px solid #4a90e2;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.PlanningEngine_resultSummary__wDiTH h4 {
  margin: 0 0 16px 0;
  color: #4a90e2;
  font-size: 16px;
  font-weight: 600;
}

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

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

.PlanningEngine_resultLabel__1U-\+t {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PlanningEngine_resultValue__v3hpG {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e1e8f0;
}

.PlanningEngine_aiAnalysisSection__dnKTg {
  background: #fff8f0;
  border: 1px solid #ffa726;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.PlanningEngine_aiAnalysisSection__dnKTg h5 {
  margin: 0 0 12px 0;
  color: #f57c00;
  font-size: 14px;
  font-weight: 600;
}

.PlanningEngine_analysisGrid__8fpV4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

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

.PlanningEngine_analysisLabel__fCNsI {
  font-size: 11px;
  font-weight: 600;
  color: #f57c00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PlanningEngine_analysisValue__3ocWf {
  font-size: 13px;
  color: #333;
  background: white;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ffe0b2;
}

.PlanningEngine_plannedStepsSection__jwiCv {
  background: #f0fff4;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 16px;
}

.PlanningEngine_plannedStepsSection__jwiCv h5 {
  margin: 0 0 12px 0;
  color: #2e7d32;
  font-size: 14px;
  font-weight: 600;
}

.PlanningEngine_plannedStepsList__XZ0L5 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.PlanningEngine_plannedStepItem__7yW3x {
  background: white;
  border: 1px solid #c8e6c9;
  border-radius: 6px;
  padding: 12px;
}

.PlanningEngine_plannedStepHeader__MY\+1h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.PlanningEngine_stepNumber__HiEJR {
  background: #4caf50;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.PlanningEngine_stepDescription__lQRUN {
  font-weight: 500;
  color: #333;
  flex: 1 1;
}

.PlanningEngine_stepDetails__GXoRJ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 36px;
}

.PlanningEngine_stepDetail__bMy2U {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.PlanningEngine_detailLabel__YEp42 {
  font-size: 11px;
  font-weight: 600;
  color: #666;
  min-width: 70px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PlanningEngine_detailValue__xepXs {
  font-size: 12px;
  color: #333;
  flex: 1 1;
  word-break: break-word;
}

.PlanningEngine_progressSection__ONX\+i {
  background: #fff3e0;
  border: 1px solid #ff9800;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.PlanningEngine_progressBar__E4Fkx {
  width: 100%;
  height: 8px;
  background: #ffe0b2;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.PlanningEngine_progressFill__gyExF {
  height: 100%;
  background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.PlanningEngine_progressText__g-yZ7 {
  font-size: 14px;
  font-weight: 500;
  color: #e65100;
  text-align: center;
}

.PlanningEngine_stepsSection__6RFkr {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.PlanningEngine_stepsSection__6RFkr h4 {
  margin: 0 0 16px 0;
  color: #424242;
  font-size: 16px;
  font-weight: 600;
}

.PlanningEngine_stepsList__\+1qe7 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.PlanningEngine_stepItem__SKNSH {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.PlanningEngine_stepItem__SKNSH.PlanningEngine_pending__ICLBn {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.PlanningEngine_stepItem__SKNSH.PlanningEngine_active__hZEgn {
  border-color: #2196f3;
  background: #e3f2fd;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

.PlanningEngine_stepItem__SKNSH.PlanningEngine_completed__isd9M {
  border-color: #4caf50;
  background: #e8f5e8;
}

.PlanningEngine_stepItem__SKNSH.PlanningEngine_error__6badY {
  border-color: #f44336;
  background: #ffebee;
}

.PlanningEngine_stepHeader__Uq25W {
  display: flex;
  align-items: center;
  gap: 12px;
}

.PlanningEngine_stepIcon__Fge68 {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.PlanningEngine_stepMessage__EK2FE {
  flex: 1 1;
  font-weight: 500;
  color: #333;
}

.PlanningEngine_stepProgress__1pldB {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 12px;
}

.PlanningEngine_stepDetails__GXoRJ {
  margin-top: 8px;
  margin-left: 32px;
}

.PlanningEngine_stepDetails__GXoRJ details {
  cursor: pointer;
}

.PlanningEngine_stepDetails__GXoRJ summary {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  padding: 4px 0;
}

.PlanningEngine_detailsContent__LlARm {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  font-size: 11px;
  color: #333;
  margin-top: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.PlanningEngine_controls__boOH8 {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.PlanningEngine_stopButton__4gw6L {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.PlanningEngine_stopButton__4gw6L:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

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

@media (max-width: 768px) {
  .PlanningEngine_container__7kD\+y {
    margin: 12px 0;
  }

  .PlanningEngine_header__BI0Ta {
    padding: 12px 16px;
  }

  .PlanningEngine_engineTitle__rNEyf {
    font-size: 16px;
  }

  .PlanningEngine_expandedContent__\+nf\+1 {
    padding: 16px;
  }

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

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

  .PlanningEngine_stepDetails__GXoRJ {
    margin-left: 20px;
  }

  .PlanningEngine_compactProgressBar__D30N8 {
    width: 60px;
  }
}

/* 新增的除錯資訊區域樣式 */
.PlanningEngine_inputSection__67CyQ {
  background: #f0f8ff;
  border: 1px solid #4a90e2;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.PlanningEngine_inputSection__67CyQ h4 {
  margin: 0 0 12px 0;
  color: #2968a3;
  font-size: 14px;
  font-weight: 600;
}

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

.PlanningEngine_inputItem__ll3ie {
  display: flex;
  gap: 12px;
  align-items: center;
}

.PlanningEngine_inputLabel__jVfly {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  min-width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.PlanningEngine_inputValue__-oEQp {
  font-size: 13px;
  color: #333;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  flex: 1 1;
}

.PlanningEngine_systemInstructionSection__0GxgR,
.PlanningEngine_aiResponseSection__QwBjH,
.PlanningEngine_parsedResultSection__9k9sP {
  background: #fff9e6;
  border: 1px solid #ffa726;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.PlanningEngine_systemInstructionSection__0GxgR h4,
.PlanningEngine_aiResponseSection__QwBjH h4,
.PlanningEngine_parsedResultSection__9k9sP h4 {
  margin: 0 0 12px 0;
  color: #e65100;
  font-size: 14px;
  font-weight: 600;
}

.PlanningEngine_systemInstructionDetails__KUH27,
.PlanningEngine_aiResponseDetails__HReKg,
.PlanningEngine_parsedResultDetails__UGv7j,
.PlanningEngine_fullResultDetails__Npx4x {
  margin-top: 8px;
}

.PlanningEngine_systemInstructionDetails__KUH27 summary,
.PlanningEngine_aiResponseDetails__HReKg summary,
.PlanningEngine_parsedResultDetails__UGv7j summary,
.PlanningEngine_fullResultDetails__Npx4x summary {
  cursor: pointer;
  font-weight: 500;
  color: #e65100;
  padding: 8px;
  background: rgba(255, 167, 38, 0.1);
  border-radius: 4px;
  border: 1px solid #ffa726;
  -webkit-user-select: none;
          user-select: none;
}

.PlanningEngine_systemInstructionDetails__KUH27 summary:hover,
.PlanningEngine_aiResponseDetails__HReKg summary:hover,
.PlanningEngine_parsedResultDetails__UGv7j summary:hover,
.PlanningEngine_fullResultDetails__Npx4x summary:hover {
  background: rgba(255, 167, 38, 0.2);
}

.PlanningEngine_systemInstructionContent__j6SAs,
.PlanningEngine_aiResponseContent__xB-W-,
.PlanningEngine_parsedResultContent__jtMMl,
.PlanningEngine_fullResultContent__gsm75 {
  background: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 6px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #4a5568;
}

.PlanningEngine_resultSection__xVJnd {
  background: #f0fff4;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.PlanningEngine_resultSection__xVJnd h4 {
  margin: 0 0 12px 0;
  color: #2e7d32;
  font-size: 14px;
  font-weight: 600;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .PlanningEngine_inputItem__ll3ie {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .PlanningEngine_inputLabel__jVfly {
    min-width: auto;
  }

  .PlanningEngine_inputValue__-oEQp {
    width: 100%;
  }

  .PlanningEngine_systemInstructionContent__j6SAs,
  .PlanningEngine_aiResponseContent__xB-W-,
  .PlanningEngine_parsedResultContent__jtMMl,
  .PlanningEngine_fullResultContent__gsm75 {
    font-size: 11px;
    padding: 12px;
  }
}

.AnalysisEngine_container__eH5DZ {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border: 2px solid #9c27b0;
  border-radius: 12px;
  padding: 0;
  margin: 16px 0;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

.AnalysisEngine_container__eH5DZ:hover {
  box-shadow: 0 6px 20px rgba(156, 39, 176, 0.25);
  transform: translateY(-2px);
}

.AnalysisEngine_header__lF24a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
  color: white;
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease;
}

.AnalysisEngine_header__lF24a.AnalysisEngine_clickable__0ORHG {
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.AnalysisEngine_header__lF24a.AnalysisEngine_clickable__0ORHG:hover {
  background: linear-gradient(135deg, #7b1fa2 0%, #6a1b9a 100%);
  transform: scale(1.01);
}

.AnalysisEngine_headerLeft__1xEd3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.AnalysisEngine_engineIcon__FsIXT {
  font-size: 24px;
  animation: AnalysisEngine_pulse__KZx8- 2s ease-in-out infinite;
}

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

.AnalysisEngine_engineTitle__6KxAE {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.AnalysisEngine_headerRight__cHBiu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.AnalysisEngine_statusBadge__jb8i8 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.AnalysisEngine_statusIcon__you-v {
  font-size: 16px;
}

.AnalysisEngine_statusText__AiUYJ {
  font-size: 14px;
  font-weight: 500;
  color: white;
}

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

.AnalysisEngine_compactProgressBar__-Wm5F {
  width: 80px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
}

.AnalysisEngine_compactProgressFill__DrkW5 {
  height: 100%;
  background: linear-gradient(90deg, #e91e63 0%, #c2185b 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.AnalysisEngine_compactProgressText__m6jqW {
  font-size: 12px;
  font-weight: 600;
  color: white;
  min-width: 35px;
}

.AnalysisEngine_expandIcon__U0BKh {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.AnalysisEngine_expandedContent__DOWIS {
  padding: 20px;
  background: white;
  animation: AnalysisEngine_slideDown__wjyg9 0.3s ease;
}

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

.AnalysisEngine_queryInfo__dovW2 {
  background: #f3e5f5;
  border: 1px solid #ce93d8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.AnalysisEngine_queryLabel__BK\+q4 {
  font-weight: 600;
  color: #7b1fa2;
  margin-bottom: 8px;
  font-size: 14px;
}

.AnalysisEngine_queryText__qnKaB {
  background: white;
  border: 1px solid #e1bee7;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.AnalysisEngine_dataInfo__QPSuy {
  background: #fce4ec;
  border: 1px solid #f8bbd9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.AnalysisEngine_dataLabel__d0ZHT {
  font-weight: 600;
  color: #7b1fa2;
  margin-bottom: 12px;
  font-size: 14px;
}

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

.AnalysisEngine_dataItem__mBYfq {
  background: white;
  border: 1px solid #f8bbd9;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  color: #333;
}

.AnalysisEngine_dataItem__mBYfq strong {
  color: #7b1fa2;
  font-weight: 600;
}

.AnalysisEngine_resultSummary__wX9wS {
  background: #f0f8ff;
  border: 2px solid #9c27b0;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.AnalysisEngine_resultSummary__wX9wS h4 {
  margin: 0 0 16px 0;
  color: #7b1fa2;
  font-size: 16px;
  font-weight: 600;
}

.AnalysisEngine_analysisResultCard__vZGXD {
  background: white;
  border: 1px solid #e1bee7;
  border-radius: 8px;
  padding: 16px;
}

.AnalysisEngine_resultHeader__3HX5T {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.AnalysisEngine_confidenceScore__4ED8t {
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.AnalysisEngine_resultContent__MiRgv {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.AnalysisEngine_summarySection__TgVok,
.AnalysisEngine_answerSection__PZ4u1 {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 16px;
}

.AnalysisEngine_summarySection__TgVok h5,
.AnalysisEngine_answerSection__PZ4u1 h5 {
  margin: 0 0 8px 0;
  color: #7b1fa2;
  font-size: 14px;
  font-weight: 600;
}

.AnalysisEngine_summaryText__\+UvVt,
.AnalysisEngine_answerText__OpZv3 {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.AnalysisEngine_dataSourceSection__fmssS {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 16px;
}

.AnalysisEngine_dataSourceSection__fmssS h5 {
  margin: 0 0 12px 0;
  color: #7b1fa2;
  font-size: 14px;
  font-weight: 600;
}

.AnalysisEngine_dataSourceGrid__W3Ekw {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.AnalysisEngine_dataSourceItem__qrfjS {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.AnalysisEngine_dataSourceItem__qrfjS.AnalysisEngine_success__bf2rA {
  border-color: #4caf50;
  background: #f8fff8;
}

.AnalysisEngine_dataSourceItem__qrfjS.AnalysisEngine_error__Gwqcg {
  border-color: #f44336;
  background: #fff8f8;
}

.AnalysisEngine_sourceHeader__DRfrj {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.AnalysisEngine_sourceIcon__rRtD9 {
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.AnalysisEngine_sourceTitle__8hzbS {
  flex: 1 1;
  font-weight: 500;
  color: #333;
  font-size: 13px;
}

.AnalysisEngine_sourceCount__Cd\+qD {
  font-size: 11px;
  color: #666;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
}

.AnalysisEngine_sourcePreview__HRxKl {
  cursor: pointer;
}

.AnalysisEngine_sourcePreview__HRxKl summary {
  font-size: 11px;
  color: #666;
  font-weight: 500;
  padding: 4px 0;
}

.AnalysisEngine_previewContent__mkGRV {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px;
  margin-top: 4px;
}

.AnalysisEngine_previewItem__W8nta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 11px;
}

.AnalysisEngine_previewItem__W8nta:last-child {
  border-bottom: none;
}

.AnalysisEngine_previewDesc__spc-O {
  flex: 1 1;
  color: #333;
  font-weight: 500;
}

.AnalysisEngine_previewAmount__N0gh2 {
  color: #e91e63;
  font-weight: 600;
  margin: 0 8px;
}

.AnalysisEngine_previewCategory__h2AOP {
  color: #666;
  font-size: 10px;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 8px;
}

.AnalysisEngine_previewMore__20-sd {
  text-align: center;
  color: #666;
  font-size: 10px;
  font-style: italic;
  padding-top: 4px;
  border-top: 1px solid #f0f0f0;
}

.AnalysisEngine_progressSection__RMqvC {
  background: #fff3e0;
  border: 1px solid #9c27b0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.AnalysisEngine_progressBar__YoBzL {
  width: 100%;
  height: 8px;
  background: #e1bee7;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.AnalysisEngine_progressFill__8A8oE {
  height: 100%;
  background: linear-gradient(90deg, #9c27b0 0%, #7b1fa2 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.AnalysisEngine_progressText__zZNuR {
  font-size: 14px;
  font-weight: 500;
  color: #7b1fa2;
  text-align: center;
}

.AnalysisEngine_stepsSection__pVQMj {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.AnalysisEngine_stepsSection__pVQMj h4 {
  margin: 0 0 16px 0;
  color: #424242;
  font-size: 16px;
  font-weight: 600;
}

.AnalysisEngine_stepsList__u2uvM {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.AnalysisEngine_stepItem__A3e8L {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.3s ease;
}

.AnalysisEngine_stepItem__A3e8L.AnalysisEngine_pending__k1mBq {
  border-color: #bdbdbd;
  background: #f5f5f5;
}

.AnalysisEngine_stepItem__A3e8L.AnalysisEngine_active__6Py1x {
  border-color: #9c27b0;
  background: #f3e5f5;
  box-shadow: 0 2px 8px rgba(156, 39, 176, 0.2);
}

.AnalysisEngine_stepItem__A3e8L.AnalysisEngine_completed__6dFqt {
  border-color: #4caf50;
  background: #e8f5e8;
}

.AnalysisEngine_stepItem__A3e8L.AnalysisEngine_error__Gwqcg {
  border-color: #f44336;
  background: #ffebee;
}

.AnalysisEngine_stepHeader__T20IM {
  display: flex;
  align-items: center;
  gap: 12px;
}

.AnalysisEngine_stepIcon__9432J {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.AnalysisEngine_stepMessage__WILJA {
  flex: 1 1;
  font-weight: 500;
  color: #333;
}

.AnalysisEngine_stepProgress__x46T5 {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 12px;
}

.AnalysisEngine_stepDetails__I9wN8 {
  margin-top: 8px;
  margin-left: 32px;
}

.AnalysisEngine_stepDetails__I9wN8 details {
  cursor: pointer;
}

.AnalysisEngine_stepDetails__I9wN8 summary {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  padding: 4px 0;
}

.AnalysisEngine_detailsContent__ULqXy {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px;
  font-size: 11px;
  color: #333;
  margin-top: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.AnalysisEngine_controls__MXbev {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.AnalysisEngine_stopButton__Wnnvs {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.AnalysisEngine_stopButton__Wnnvs:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
}

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

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

  .AnalysisEngine_header__lF24a {
    padding: 12px 16px;
  }

  .AnalysisEngine_engineTitle__6KxAE {
    font-size: 16px;
  }

  .AnalysisEngine_expandedContent__DOWIS {
    padding: 16px;
  }

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

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

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

  .AnalysisEngine_stepDetails__I9wN8 {
    margin-left: 20px;
  }

  .AnalysisEngine_compactProgressBar__-Wm5F {
    width: 60px;
  }

  .AnalysisEngine_previewItem__W8nta {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* 新增的除錯資訊區域樣式 */
.AnalysisEngine_inputSection__Q2yBW {
  background: #f3e5f5;
  border: 1px solid #9c27b0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.AnalysisEngine_inputSection__Q2yBW h4 {
  margin: 0 0 12px 0;
  color: #7b1fa2;
  font-size: 14px;
  font-weight: 600;
}

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

.AnalysisEngine_inputItem__Y\+3ab {
  display: flex;
  gap: 12px;
  align-items: center;
}

.AnalysisEngine_inputLabel__7sg5d {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.AnalysisEngine_inputValue__\+ghFn {
  font-size: 13px;
  color: #333;
  background: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  flex: 1 1;
}

.AnalysisEngine_executionResultsSection__e4q-f,
.AnalysisEngine_aiInputSection__Pceah,
.AnalysisEngine_aiResponseSection__shxOE {
  background: #fff9e6;
  border: 1px solid #ffa726;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.AnalysisEngine_executionResultsSection__e4q-f h4,
.AnalysisEngine_aiInputSection__Pceah h4,
.AnalysisEngine_aiResponseSection__shxOE h4 {
  margin: 0 0 12px 0;
  color: #e65100;
  font-size: 14px;
  font-weight: 600;
}

.AnalysisEngine_executionResultsDetails__wTwA6,
.AnalysisEngine_aiInputDetails__8E8Ih,
.AnalysisEngine_aiResponseDetails__dOF-O {
  margin-top: 8px;
}

.AnalysisEngine_executionResultsDetails__wTwA6 summary,
.AnalysisEngine_aiInputDetails__8E8Ih summary,
.AnalysisEngine_aiResponseDetails__dOF-O summary {
  cursor: pointer;
  font-weight: 500;
  color: #e65100;
  padding: 8px;
  background: rgba(255, 167, 38, 0.1);
  border-radius: 4px;
  border: 1px solid #ffa726;
  -webkit-user-select: none;
          user-select: none;
}

.AnalysisEngine_executionResultsDetails__wTwA6 summary:hover,
.AnalysisEngine_aiInputDetails__8E8Ih summary:hover,
.AnalysisEngine_aiResponseDetails__dOF-O summary:hover {
  background: rgba(255, 167, 38, 0.2);
}

.AnalysisEngine_executionResultsContent__J-PbO,
.AnalysisEngine_aiResponseContent__TiSBY {
  background: #2d3748;
  color: #e2e8f0;
  padding: 16px;
  border-radius: 6px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #4a5568;
}

.AnalysisEngine_aiInputContent__hQjSw {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 16px;
  margin-top: 8px;
}

.AnalysisEngine_inputDataSection__40zMF,
.AnalysisEngine_rawDataSection__tM10- {
  margin-bottom: 16px;
}

.AnalysisEngine_inputDataSection__40zMF h5,
.AnalysisEngine_rawDataSection__tM10- h5 {
  margin: 0 0 8px 0;
  color: #495057;
  font-size: 13px;
  font-weight: 600;
}

.AnalysisEngine_inputDataSection__40zMF p {
  margin: 4px 0;
  font-size: 12px;
  color: #6c757d;
}

.AnalysisEngine_rawDataContent__z8Lin {
  background: #2d3748;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 4px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #4a5568;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AnalysisEngine_inputItem__Y\+3ab {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .AnalysisEngine_inputLabel__7sg5d {
    min-width: auto;
  }

  .AnalysisEngine_inputValue__\+ghFn {
    width: 100%;
  }

  .AnalysisEngine_executionResultsContent__J-PbO,
  .AnalysisEngine_aiResponseContent__TiSBY,
  .AnalysisEngine_rawDataContent__z8Lin {
    font-size: 10px;
    padding: 10px;
  }

  .AnalysisEngine_aiInputContent__hQjSw {
    padding: 12px;
  }
}

/* 等待訊息樣式 */
.AnalysisEngine_waitingMessage__pr1WF {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
  font-size: 14px;
}

.CharacterChatComponent_characterChat__z40VA {
  max-width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.CharacterChatComponent_characterChat__z40VA.CharacterChatComponent_disabled__0K0uW {
  opacity: 0.6;
  pointer-events: none;
}

.CharacterChatComponent_hidden__5u5G9 {
  display: none;
}

.CharacterChatComponent_chatContainer__0lasx {
  display: flex;
  align-items: flex-start;
  gap: 0;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 40px;
  padding: 25px 25px 25px 200px;
  position: relative;
  margin-left: 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  background: var(--bg-game-chat, rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1),
    inset 0 0 60px rgba(89, 107, 177, 0.08);
  width: clamp(320px, 70vw, 800px);
  min-height: 200px;
}

/* 角色頭像區域 */
.CharacterChatComponent_avatar__BcaTf {
  width: 180px;
  height: 180px;
  position: relative;
  flex-shrink: 0;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden;
  position: absolute;
  left: 25px;
  top: 0;
  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: CharacterChatComponent_avatarHighlight__GyeyG 2s linear infinite;
}

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

@keyframes CharacterChatComponent_avatarHighlight__GyeyG {
  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);
  }
}

.CharacterChatComponent_img__xXrjD {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
}

.CharacterChatComponent_name__7KzXw {
  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;
}

/* 對話內容區域 */
.CharacterChatComponent_content__gHmIS {
  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;
}

.CharacterChatComponent_content__gHmIS p,
.CharacterChatComponent_content__gHmIS li {
  font-size: clamp(17px, 2.5vh, 30px);
}

/* 載入狀態 */
.CharacterChatComponent_loading__unVLN {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.CharacterChatComponent_loadingDots__xWLJe {
  display: flex;
  gap: 4px;
}

.CharacterChatComponent_loadingDots__xWLJe span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4fc3f7;
  animation: CharacterChatComponent_loadingBounce__FQxIv 1.4s infinite ease-in-out both;
}

.CharacterChatComponent_loadingDots__xWLJe span:nth-child(1) {
  animation-delay: -0.32s;
}

.CharacterChatComponent_loadingDots__xWLJe span:nth-child(2) {
  animation-delay: -0.16s;
}

.CharacterChatComponent_loadingDots__xWLJe span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes CharacterChatComponent_loadingBounce__FQxIv {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* AI 回應區域 */
.CharacterChatComponent_response__0OPoR {
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  border-left: 4px solid #4fc3f7;
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.CharacterChatComponent_messageText__8yYq3 {
  font-size: clamp(16px, 2.5vh, 24px);
  line-height: 1.6;
  color: #fff;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 展開按鈕 */
.CharacterChatComponent_expandButton__KI-3W {
  background: #4fc3f7;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.CharacterChatComponent_expandButton__KI-3W:hover {
  background: #29b6f6;
  transform: translateY(-1px);
}

.CharacterChatComponent_expandButton__KI-3W:active {
  transform: translateY(0);
}

/* 功能按鈕區域 */
.CharacterChatComponent_actionBar__1PIys {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 10;
}

.CharacterChatComponent_voiceSection__8oskn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.CharacterChatComponent_playButton__u-Pd3 {
  background-color: #0c243edb;
  color: #a296ff;
  padding: 0 12px;
  border-radius: 20px;
  height: 32px;
  cursor: pointer;
  font-size: 0.8125em;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  font-family: var(--font-default);
  font-weight: 500;
  min-width: -webkit-fit-content;
  min-width: fit-content;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: none;
  gap: 5px;
  white-space: nowrap;
}

.CharacterChatComponent_playButton__u-Pd3:hover {
  background-color: #3b1587ae;
  color: #fff;
  transform: scale(1.05);
}

.CharacterChatComponent_playButton__u-Pd3 i {
  font-size: 18px;
}

.CharacterChatComponent_playButton__u-Pd3 i:before {
  width: 18px;
  height: 18px;
  background-color: #a296ff;
}

.CharacterChatComponent_playButton__u-Pd3:hover i:before {
  background-color: #fff;
}

.CharacterChatComponent_voiceHint__WUIaE {
  font-size: 0.8125em;
  color: #a296ff;
  font-style: italic;
}

/* 響應式設計 */
@media (max-width: 700px) {
  .CharacterChatComponent_chatContainer__0lasx {
    width: 100%;
    margin-left: 0;
    flex-direction: row;
    padding: 15px;
    min-height: 120px;
    border-radius: 20px;
    gap: 15px;
  }

  .CharacterChatComponent_avatar__BcaTf {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin: 0;
    position: relative;
    overflow: hidden;
    left: 0;
    top: 0;
    transform: none;
    flex-shrink: 0;
  }

  .CharacterChatComponent_content__gHmIS {
    font-size: 1em;
    line-height: 1.25;
    padding: 0;
    padding-top: 5px;
  }

  .CharacterChatComponent_content__gHmIS p,
  .CharacterChatComponent_content__gHmIS li {
    font-size: clamp(14px, 4vw, 18px);
  }

  .CharacterChatComponent_messageText__8yYq3 {
    font-size: clamp(14px, 4vw, 18px);
  }

  .CharacterChatComponent_name__7KzXw {
    font-size: 0.9em;
    padding: 3px 8px;
  }

  .CharacterChatComponent_actionBar__1PIys {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    border-radius: 0;
  }

  .CharacterChatComponent_playButton__u-Pd3 {
    height: 28px;
    padding: 0 8px;
    font-size: 0.75em;
  }

  .CharacterChatComponent_playButton__u-Pd3 i {
    font-size: 16px;
  }

  .CharacterChatComponent_playButton__u-Pd3 i:before {
    width: 16px;
    height: 16px;
  }
}

/* 手機直向 */
@media (min-width: 0px) and (max-width: 700px) and (orientation: portrait) {
  .CharacterChatComponent_name__7KzXw {
    font-size: 11px;
  }
}

@media (min-width: 0px) and (max-width: 700px) {
  .CharacterChatComponent_actionBar__1PIys {
    right: 0;
  }
}

@media (min-width: 1600px) and (min-height: 800px) {
  .CharacterChatComponent_actionBar__1PIys {
    top: 20px;
  }
  .CharacterChatComponent_playButton__u-Pd3 {
    height: 40px;
    font-size: 1em;
    padding-left: 20px;
    padding-right: 20px;
  }
  .CharacterChatComponent_playButton__u-Pd3 i:before {
    width: 22px;
    height: 22px;
  }
}

/* 展開按鈕樣式調整 */
.CharacterChatComponent_expandButton__KI-3W {
  background: #0c243edb;
  color: #a296ff;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8125em;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.CharacterChatComponent_expandButton__KI-3W:hover {
  background: #3b1587ae;
  color: #fff;
  transform: scale(1.05);
}

/* RealtimeChat 組件樣式 */

/* 主容器 */
.RealtimeChat_realtimeChat__PKy2Q {
  position: relative;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
}

/* 連接狀態指示器 */
.RealtimeChat_connectionStatus__B6Fbh {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.RealtimeChat_connectionStatus__B6Fbh.RealtimeChat_disconnected__qDNqI {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}

.RealtimeChat_connectionStatus__B6Fbh.RealtimeChat_connecting__GA4kw {
  background: #d1ecf1;
  border: 1px solid #74c0fc;
  color: #0c5460;
}

.RealtimeChat_connectionStatus__B6Fbh.RealtimeChat_connected__0tcDZ {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.RealtimeChat_connectionStatus__B6Fbh.RealtimeChat_error__Rvp2D {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.RealtimeChat_statusIndicator__y21rl {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.RealtimeChat_statusIndicator__y21rl.RealtimeChat_disconnected__qDNqI {
  background: #ffc107;
}

.RealtimeChat_statusIndicator__y21rl.RealtimeChat_connecting__GA4kw {
  background: #17a2b8;
  animation: RealtimeChat_statusPulse__tqhlc 1.5s infinite;
}

.RealtimeChat_statusIndicator__y21rl.RealtimeChat_connected__0tcDZ {
  background: #28a745;
}

.RealtimeChat_statusIndicator__y21rl.RealtimeChat_error__Rvp2D {
  background: #dc3545;
}

@keyframes RealtimeChat_statusPulse__tqhlc {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* 控制按鈕 */
.RealtimeChat_controls__EHGVS {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.RealtimeChat_controlButton__JEe9K {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.RealtimeChat_controlButton__JEe9K.RealtimeChat_connect__VCirl {
  background: #28a745;
  color: white;
}

.RealtimeChat_controlButton__JEe9K.RealtimeChat_connect__VCirl:hover:not(:disabled) {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.RealtimeChat_controlButton__JEe9K.RealtimeChat_disconnect__TFBva {
  background: #dc3545;
  color: white;
}

.RealtimeChat_controlButton__JEe9K.RealtimeChat_disconnect__TFBva:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.RealtimeChat_controlButton__JEe9K:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 音頻控制 */
.RealtimeChat_audioControls__Y5UQI {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 16px;
}

.RealtimeChat_micButton__w23il {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.RealtimeChat_micButton__w23il.RealtimeChat_inactive__FDKOe {
  background: #6c757d;
  color: white;
}

.RealtimeChat_micButton__w23il.RealtimeChat_active__t7mz5 {
  background: #dc3545;
  color: white;
  animation: RealtimeChat_micActive__XHLF9 2s ease-in-out infinite;
}

.RealtimeChat_micButton__w23il:hover:not(:disabled) {
  transform: scale(1.1);
}

.RealtimeChat_micButton__w23il:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

@keyframes RealtimeChat_micActive__XHLF9 {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
}

.RealtimeChat_audioStatus__zlMSg {
  flex: 1 1;
  font-size: 0.9rem;
  color: #495057;
}

/* 音頻可視化 */
.RealtimeChat_audioVisualizer__8ISlv {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
}

.RealtimeChat_audioBar__qD88d {
  width: 3px;
  background: #6c757d;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.RealtimeChat_audioVisualizer__8ISlv.RealtimeChat_active__t7mz5 .RealtimeChat_audioBar__qD88d {
  animation: RealtimeChat_audioVisualize__bdgLT 1.5s ease-in-out infinite;
}

.RealtimeChat_audioBar__qD88d:nth-child(1) {
  animation-delay: 0s;
}
.RealtimeChat_audioBar__qD88d:nth-child(2) {
  animation-delay: 0.1s;
}
.RealtimeChat_audioBar__qD88d:nth-child(3) {
  animation-delay: 0.2s;
}
.RealtimeChat_audioBar__qD88d:nth-child(4) {
  animation-delay: 0.3s;
}
.RealtimeChat_audioBar__qD88d:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes RealtimeChat_audioVisualize__bdgLT {
  0%,
  100% {
    height: 8px;
    background: #6c757d;
  }
  50% {
    height: 32px;
    background: #28a745;
  }
}

/* 錯誤顯示 */
.RealtimeChat_errorDisplay__R3Yy3 {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.RealtimeChat_errorDisplay__R3Yy3 strong {
  display: block;
  margin-bottom: 4px;
}

/* 隱藏元素 */
.RealtimeChat_hidden__ZRq2E {
  display: none !important;
}

/* 載入指示器 */
.RealtimeChat_loading__YEeSL {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 8px;
  color: #1565c0;
  font-size: 0.9rem;
}

.RealtimeChat_loadingSpinner__gp6ax {
  width: 16px;
  height: 16px;
  border: 2px solid #e3f2fd;
  border-top: 2px solid #1565c0;
  border-radius: 50%;
  animation: RealtimeChat_spin__I5zqK 1s linear infinite;
}

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

/* 會話信息 */
.RealtimeChat_sessionInfo__rUYqG {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: #6c757d;
}

.RealtimeChat_sessionInfo__rUYqG .RealtimeChat_sessionId__s\+q5H {
  font-family: "Courier New", monospace;
  color: #495057;
  font-weight: 600;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .RealtimeChat_controls__EHGVS {
    flex-direction: column;
  }

  .RealtimeChat_controlButton__JEe9K {
    justify-content: center;
  }

  .RealtimeChat_audioControls__Y5UQI {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .RealtimeChat_audioVisualizer__8ISlv {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .RealtimeChat_connectionStatus__B6Fbh,
  .RealtimeChat_controls__EHGVS,
  .RealtimeChat_audioControls__Y5UQI,
  .RealtimeChat_errorDisplay__R3Yy3,
  .RealtimeChat_loading__YEeSL,
  .RealtimeChat_sessionInfo__rUYqG {
    padding: 12px;
  }

  .RealtimeChat_micButton__w23il {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

.PersonalitySelector_personalitySelector__mGqA1 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.PersonalitySelector_selectorHeader__FLQHI {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2d3748;
  font-size: 14px;
}

.PersonalitySelector_personalityGrid__qkpg9 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.PersonalitySelector_personalityCard__kjhh8 {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 100px;
}

.PersonalitySelector_personalityCard__kjhh8:hover {
  border-color: #4299e1;
  box-shadow: 0 2px 8px rgba(66, 153, 225, 0.15);
  transform: translateY(-2px);
}

.PersonalitySelector_personalityCard__kjhh8.PersonalitySelector_selected__uj9j5 {
  border-color: #3182ce;
  background: #ebf8ff;
  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.2);
}

.PersonalitySelector_personalityCard__kjhh8.PersonalitySelector_disabled__W0u0D {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f7fafc;
}

.PersonalitySelector_personalityCard__kjhh8.PersonalitySelector_disabled__W0u0D:hover {
  border-color: #e2e8f0;
  box-shadow: none;
  transform: none;
}

.PersonalitySelector_cardHeader__cpFkn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.PersonalitySelector_cardIcon__e9XOb {
  font-size: 20px;
}

.PersonalitySelector_cardName__1iYed {
  font-weight: 600;
  color: #2d3748;
  font-size: 14px;
}

.PersonalitySelector_cardDescription__0SQPt {
  color: #718096;
  font-size: 12px;
  line-height: 1.4;
  flex-grow: 1;
}

.PersonalitySelector_cardDetails__2oJEx {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  font-size: 10px;
  color: #a0aec0;
}

.PersonalitySelector_voiceInfo__l25gX {
  display: flex;
  align-items: center;
  gap: 4px;
}

.PersonalitySelector_settingsInfo__rq58P {
  display: flex;
  gap: 8px;
}

.PersonalitySelector_currentSelection__yNUms {
  background: #f0fff4;
  border: 2px solid #48bb78;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.PersonalitySelector_currentSelectionHeader__pbFGy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2f855a;
  margin-bottom: 8px;
  font-size: 14px;
}

.PersonalitySelector_currentSelectionDetails__pN5wp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  font-size: 12px;
  color: #2f855a;
}

.PersonalitySelector_detailItem__7lIBH {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.PersonalitySelector_detailLabel__JG68t {
  font-weight: 500;
  opacity: 0.8;
}

.PersonalitySelector_detailValue__mGeAp {
  font-weight: 600;
}

.CharacterCard_card__usmCz {
  position: relative;
  width: 200px;
  height: 280px;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.CharacterCard_card__usmCz:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.CharacterCard_card__usmCz:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
}

.CharacterCard_card__usmCz:active {
  transform: translateY(-4px) scale(0.98);
}

.CharacterCard_disabled__mkvAP {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.CharacterCard_imageContainer__prSQi {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.CharacterCard_characterImage__0Vjkz {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: transform 0.3s ease;
}

.CharacterCard_characterVideo__EB1pW {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.3s ease;
}

.CharacterCard_card__usmCz:hover .CharacterCard_characterImage__0Vjkz,
.CharacterCard_card__usmCz:hover .CharacterCard_characterVideo__EB1pW {
  transform: scale(1.05);
}

.CharacterCard_placeholderContent__HI0SI {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.CharacterCard_placeholderIcon__Gl9fW {
  color: rgba(0, 0, 0, 0.4);
  opacity: 0.7;
}

.CharacterCard_nameContainer__2-yan {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  z-index: 3;
}

.CharacterCard_characterName__fZcII {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 建立新角色卡片樣式 */
.CharacterCard_createNew__035LA {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 2px dashed rgba(255, 255, 255, 0.6);
}

.CharacterCard_createNew__035LA:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  border-color: rgba(255, 255, 255, 0.8);
}

.CharacterCard_createNewContent__60dxd {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
}

.CharacterCard_createNewIcon__w84h1 {
  margin-bottom: 12px;
  padding: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.CharacterCard_createNew__035LA:hover .CharacterCard_createNewIcon__w84h1 {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.CharacterCard_createNewText__2cDLK {
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 覆蓋層效果 */
.CharacterCard_overlay__xLSxh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1) 0%,
    rgba(118, 75, 162, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.CharacterCard_card__usmCz:hover .CharacterCard_overlay__xLSxh {
  opacity: 1;
}

/* Hover 光效效果 */
.CharacterCard_hoverEffect__Ghvmb {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 26px;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.CharacterCard_card__usmCz:hover .CharacterCard_hoverEffect__Ghvmb {
  opacity: 1;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .CharacterCard_card__usmCz {
    width: 160px;
    height: 220px;
  }

  .CharacterCard_imageContainer__prSQi {
    height: 160px;
  }

  .CharacterCard_characterName__fZcII {
    font-size: 14px;
  }

  .CharacterCard_nameContainer__2-yan {
    padding: 12px;
  }

  .CharacterCard_createNewIcon__w84h1 {
    padding: 12px;
  }

  .CharacterCard_createNewText__2cDLK {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .CharacterCard_card__usmCz {
    width: 140px;
    height: 200px;
  }

  .CharacterCard_imageContainer__prSQi {
    height: 140px;
  }

  .CharacterCard_characterName__fZcII {
    font-size: 12px;
  }

  .CharacterCard_nameContainer__2-yan {
    padding: 10px;
  }
}

.CharacterGrid_container__PhQJY {
  width: 100%;
  padding: 24px;
  background: transparent;
}

.CharacterGrid_grid__9Axkz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  justify-items: center;
  align-items: start;
}

/* 載入狀態 */
.CharacterGrid_loadingContainer__z1kA8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.CharacterGrid_loadingSpinner__Lo75Q {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(102, 126, 234, 0.2);
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: CharacterGrid_spin__z18la 1s linear infinite;
  margin-bottom: 16px;
}

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

.CharacterGrid_loadingText__2\+AlM {
  color: #667eea;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

/* 錯誤狀態 */
.CharacterGrid_errorContainer__DRwGP {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.CharacterGrid_errorIcon__9iOlz {
  color: #ef4444;
  margin-bottom: 16px;
}

.CharacterGrid_errorText__Bhsao {
  color: #ef4444;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

/* 空狀態 */
.CharacterGrid_emptyContainer__L3tj7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.CharacterGrid_emptyIcon__JEOKC {
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  opacity: 0.7;
}

.CharacterGrid_emptyText__V-7uw {
  color: rgba(0, 0, 0, 0.6);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  max-width: 400px;
  line-height: 1.5;
}

/* 響應式設計 */
@media (max-width: 1200px) {
  .CharacterGrid_grid__9Axkz {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .CharacterGrid_container__PhQJY {
    padding: 16px;
  }

  .CharacterGrid_grid__9Axkz {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .CharacterGrid_loadingContainer__z1kA8,
  .CharacterGrid_errorContainer__DRwGP,
  .CharacterGrid_emptyContainer__L3tj7 {
    padding: 40px 16px;
  }

  .CharacterGrid_loadingText__2\+AlM,
  .CharacterGrid_errorText__Bhsao {
    font-size: 14px;
  }

  .CharacterGrid_emptyText__V-7uw {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .CharacterGrid_container__PhQJY {
    padding: 12px;
  }

  .CharacterGrid_grid__9Axkz {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .CharacterGrid_loadingSpinner__Lo75Q {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }

  .CharacterGrid_loadingContainer__z1kA8,
  .CharacterGrid_errorContainer__DRwGP,
  .CharacterGrid_emptyContainer__L3tj7 {
    padding: 30px 12px;
  }
}

/* 動畫效果 */
.CharacterGrid_grid__9Axkz > * {
  animation: CharacterGrid_fadeInUp__MTFdp 0.5s ease-out;
  animation-fill-mode: both;
}

.CharacterGrid_grid__9Axkz > *:nth-child(1) {
  animation-delay: 0.1s;
}
.CharacterGrid_grid__9Axkz > *:nth-child(2) {
  animation-delay: 0.2s;
}
.CharacterGrid_grid__9Axkz > *:nth-child(3) {
  animation-delay: 0.3s;
}
.CharacterGrid_grid__9Axkz > *:nth-child(4) {
  animation-delay: 0.4s;
}
.CharacterGrid_grid__9Axkz > *:nth-child(5) {
  animation-delay: 0.5s;
}
.CharacterGrid_grid__9Axkz > *:nth-child(6) {
  animation-delay: 0.6s;
}

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

/* 特殊佈局：當只有建立新角色按鈕時 */
.CharacterGrid_grid__9Axkz:has(> :only-child) {
  justify-content: center;
}

/* 滾動優化 */
.CharacterGrid_container__PhQJY {
  scroll-behavior: smooth;
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
  .CharacterGrid_loadingSpinner__Lo75Q {
    border-color: #000;
    border-top-color: #667eea;
  }

  .CharacterGrid_loadingText__2\+AlM,
  .CharacterGrid_errorText__Bhsao,
  .CharacterGrid_emptyText__V-7uw {
    color: #000;
  }

  .CharacterGrid_errorIcon__9iOlz {
    color: #d00;
  }

  .CharacterGrid_emptyIcon__JEOKC {
    color: #666;
  }
}

/* 減少動畫模式支援 */
@media (prefers-reduced-motion: reduce) {
  .CharacterGrid_loadingSpinner__Lo75Q {
    animation: none;
  }

  .CharacterGrid_grid__9Axkz > * {
    animation: none;
  }
}

.CharacterSelector_container__7ibFI {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow-x: hidden;
}

.CharacterSelector_container__7ibFI::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(102, 126, 234, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(118, 75, 162, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

.CharacterSelector_header__kU-Yg {
  position: relative;
  text-align: center;
  padding: 60px 20px 40px;
  z-index: 1;
}

.CharacterSelector_title__Sjsr\+ {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px 0;
  line-height: 1.2;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.CharacterSelector_description__h2hbP {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.CharacterSelector_grid__WPJAU {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .CharacterSelector_header__kU-Yg {
    padding: 40px 16px 30px;
  }

  .CharacterSelector_title__Sjsr\+ {
    font-size: 2.2rem;
  }

  .CharacterSelector_description__h2hbP {
    font-size: 1rem;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .CharacterSelector_header__kU-Yg {
    padding: 30px 12px 20px;
  }

  .CharacterSelector_title__Sjsr\+ {
    font-size: 1.8rem;
  }

  .CharacterSelector_description__h2hbP {
    font-size: 0.9rem;
  }
}

/* 動畫效果 */
.CharacterSelector_header__kU-Yg {
  animation: CharacterSelector_slideInDown__rVKSK 0.8s ease-out;
}

.CharacterSelector_title__Sjsr\+ {
  animation: CharacterSelector_fadeIn__Wia0D 1s ease-out 0.2s both;
}

.CharacterSelector_description__h2hbP {
  animation: CharacterSelector_fadeIn__Wia0D 1s ease-out 0.4s both;
}

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

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

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
  .CharacterSelector_container__7ibFI {
    background: #fff;
  }

  .CharacterSelector_container__7ibFI::before {
    display: none;
  }

  .CharacterSelector_title__Sjsr\+ {
    background: #000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .CharacterSelector_description__h2hbP {
    color: #000;
  }
}

/* 減少動畫模式支援 */
@media (prefers-reduced-motion: reduce) {
  .CharacterSelector_header__kU-Yg,
  .CharacterSelector_title__Sjsr\+,
  .CharacterSelector_description__h2hbP {
    animation: none;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .CharacterSelector_container__7ibFI {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .CharacterSelector_container__7ibFI::before {
    background: radial-gradient(
        circle at 20% 80%,
        rgba(102, 126, 234, 0.2) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 20%,
        rgba(118, 75, 162, 0.2) 0%,
        transparent 50%
      );
  }

  .CharacterSelector_title__Sjsr\+ {
    background: linear-gradient(135deg, #8b9aff 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .CharacterSelector_description__h2hbP {
    color: rgba(255, 255, 255, 0.8);
  }
}

.demo-navigation {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* 歡迎區域 */
.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h1 {
  font-size: 2.5rem;
  margin-bottom: 16px;
  color: #333;
  font-weight: 300;
}

.welcome-description {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 24px;
  line-height: 1.6;
}

.user-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  margin: 0 auto;
  max-width: 400px;
}

.user-type {
  padding: 4px 12px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* 統計區域 */
.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #4285f4;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #4285f4;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 1rem;
  color: #666;
  font-weight: 500;
}

/* Demo 網格 */
.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 40px;
}

.demo-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e1e5e9;
}

.demo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-color: #4285f4;
}

.demo-card.placeholder {
  border: 2px dashed #e1e5e9;
  background: #fafafa;
}

.demo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.demo-title {
  font-size: 1.4rem;
  margin: 0;
  color: #333;
  font-weight: 600;
}

.demo-badges {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.version-badge {
  padding: 4px 10px;
  background: #f0f0f0;
  color: #666;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.demo-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.demo-components h4 {
  font-size: 0.9rem;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.component-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.component-tag {
  padding: 6px 12px;
  background: #e8f5e8;
  color: #2e7d32;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: 500;
}

.demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tag {
  padding: 4px 10px;
  background: #f0f7ff;
  color: #1976d2;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.demo-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.demo-button {
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
  flex: 1 1;
  font-size: 0.9rem;
}

.demo-button.primary {
  background: #4285f4;
  color: white;
}

.demo-button.primary:hover {
  background: #3367d6;
  transform: translateY(-1px);
}

.demo-button.secondary {
  background: #f8f9fa;
  color: #5f6368;
  border: 2px solid #e1e5e9;
}

.demo-button.secondary:hover {
  background: #e8eaed;
  border-color: #dadce0;
}

/* 占位卡片 */
.placeholder-content {
  text-align: center;
  opacity: 0.7;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  color: #ccc;
}

.placeholder-content h3 {
  color: #666;
  margin-bottom: 12px;
}

.placeholder-content p {
  color: #999;
  margin-bottom: 20px;
}

.coming-soon {
  text-align: left;
  padding: 16px;
  background: #f0f7ff;
  border-radius: 8px;
  border-left: 4px solid #4285f4;
}

.coming-soon span {
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.coming-soon ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
}

/* 快速開始指南 */
.quick-start-section {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.quick-start-section h2 {
  text-align: center;
  margin-bottom: 32px;
  color: #333;
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.step-number {
  width: 40px;
  height: 40px;
  background: #4285f4;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content h4 {
  margin: 0 0 8px 0;
  color: #333;
}

.step-content p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* 技術資訊 */
.tech-info {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e1e5e9;
}

.tech-info h3 {
  margin: 0 0 16px 0;
  color: #333;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.tech-item {
  color: #666;
}

.tech-item strong {
  color: #333;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .demo-navigation {
    padding: 16px;
  }

  .welcome-section h1 {
    font-size: 2rem;
  }

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

  .demo-card {
    padding: 20px;
  }

  .demo-actions {
    flex-direction: column;
  }

  .user-info {
    flex-direction: column;
    gap: 8px;
  }

  .guide-steps {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 480px) {
  .welcome-section h1 {
    font-size: 1.6rem;
  }

  .stats-section {
    grid-template-columns: 1fr;
  }

  .demo-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .quick-start-section {
    padding: 20px;
  }
}

/* 導航按鈕樣式 */
.nav-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
}

.nav-button {
  padding: 0.75rem 1.5rem;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  background: white;
  color: #495057;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.nav-button:hover {
  border-color: #4285f4;
  color: #4285f4;
}

.nav-button.active {
  background: #4285f4;
  border-color: #4285f4;
  color: white;
}

/* 組件列表樣式 */
.components-section {
  margin-bottom: 2rem;
}

.components-description {
  color: #6c757d;
  margin-bottom: 2rem;
  font-size: 1.1rem;
  text-align: center;
}

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

.component-category {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e6ed;
  transition: all 0.3s ease;
}

.component-category:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.component-category h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-size: 1.2rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.component-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.component-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #4285f4;
  transition: all 0.2s ease;
}

.component-item:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.component-name {
  font-weight: 600;
  color: #2c3e50;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.9rem;
}

.component-desc {
  color: #6c757d;
  font-size: 0.85rem;
}

/* 使用指南樣式 */
.components-usage {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.components-usage h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
  text-align: center;
}

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

.tip-item {
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border-left: 4px solid #28a745;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.tip-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tip-item strong {
  color: #2c3e50;
}

/* 響應式設計增強 */
@media (max-width: 768px) {
  .nav-buttons {
    flex-direction: column;
    align-items: center;
  }

  .nav-button {
    width: 200px;
  }

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

  .component-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .usage-tips {
    grid-template-columns: 1fr;
  }
}

.ai-chat-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.demo-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
}

.demo-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
  font-weight: 300;
}

.demo-header p {
  margin: 0;
  font-size: 1.1em;
  opacity: 0.9;
}

.demo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 20px;
  gap: 20px;
  height: 80vh;
}

/* 控制面板 */
.control-panel {
  grid-column: 1 / -1;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.system-instruction {
  margin-bottom: 15px;
}

.system-instruction label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.system-instruction textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.system-instruction textarea:focus {
  outline: none;
  border-color: #4285f4;
}

.demo-actions {
  display: flex;
  gap: 12px;
}

.example-btn,
.reset-btn,
.continue-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.example-btn {
  background: #4285f4;
  color: white;
}

.example-btn:hover {
  background: #3367d6;
  transform: translateY(-1px);
}

.reset-btn {
  background: #f8f9fa;
  color: #5f6368;
  border: 2px solid #e1e5e9;
}

.reset-btn:hover {
  background: #e8eaed;
}

.continue-btn {
  background: #34a853;
  color: white;
}

.continue-btn:hover {
  background: #137333;
}

/* 聊天歷史 */
.chat-history {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-history h3 {
  margin: 0 0 15px 0;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.messages {
  flex: 1 1;
  overflow-y: auto;
  max-height: 400px;
}

.message {
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message.user {
  background: #e3f2fd;
  border-left: 4px solid #2196f3;
}

.message.ai {
  background: #e8f5e8;
  border-left: 4px solid #4caf50;
}

.message.action {
  background: #fff3e0;
  border-left: 4px solid #ff9800;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sender {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
}

.timestamp {
  font-size: 12px;
  color: #555;
}

.message-content {
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  color: #2c2c2c;
  font-weight: 400;
}

.message.user .message-content {
  color: #1565c0;
}

.message.ai .message-content {
  color: #2e7d32;
}

.message.action .message-content {
  color: #e65100;
}

.action-info {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 152, 0, 0.1);
  border-radius: 6px;
  font-size: 12px;
  font-family: "Courier New", monospace;
  color: #d84315;
}

/* 輸入區域 */
.input-area {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.input-area h3 {
  margin: 0 0 15px 0;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

.selection-area,
.free-input-area,
.ai-processing-area,
.response-area {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

.response-status {
  padding: 15px;
  background: #e8f5e8;
  color: #2e7d32;
  border-radius: 8px;
  margin-bottom: 15px;
  font-weight: 500;
}

/* 狀態資訊 */
.status-info {
  grid-column: 1 / -1;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.status-info h3 {
  margin: 0 0 15px 0;
  color: #333;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.status-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #4285f4;
}

.status-item strong {
  color: #333;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .ai-chat-demo {
    padding: 10px;
  }

  .demo-container {
    grid-template-columns: 1fr;
    height: auto;
    gap: 15px;
  }

  .chat-history {
    order: 2;
  }

  .input-area {
    order: 1;
  }

  .status-info {
    order: 3;
  }

  .demo-actions {
    flex-direction: column;
  }

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

  .messages {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .demo-header h1 {
    font-size: 1.8em;
  }

  .demo-header p {
    font-size: 1em;
  }

  .example-btn,
  .reset-btn,
  .continue-btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* AccountingDemoV4.css - 模組化版本樣式 */

.accounting-demo-v4 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 標題區域 */
.demo-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.demo-header h2 {
  margin: 0 0 10px 0;
  font-size: 2.2em;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.demo-header p {
  margin: 0 0 20px 0;
  font-size: 1.1em;
  opacity: 0.9;
  font-weight: 300;
}

.version-badges {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-new {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
  animation: pulse 2s ease-in-out infinite;
}

.badge-feature {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  color: white;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 內容區域 */
.demo-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 最近記錄區域 */
.recent-records-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

/* 處理器選擇區域 */
.processor-selection {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.processor-selection h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
}

.mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
}

.mode-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
}

.mode-btn:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.mode-btn.active {
  border-color: #667eea;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.mode-icon {
  font-size: 1.5em;
  min-width: 32px;
  text-align: center;
}

.mode-info strong {
  display: block;
  font-size: 1.1em;
  margin-bottom: 4px;
}

.mode-info small {
  display: block;
  opacity: 0.8;
  font-size: 0.9em;
}

/* 快速處理區域 */
.processor-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.processor-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
}

/* 模組化引擎區域 */
.modular-engines-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.modular-engines-section h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
}

/* 階段指示器 */
.phase-indicators {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
  position: relative;
}

.phase-indicators::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, #dee2e6 0%, #dee2e6 100%);
  z-index: 1;
}

.phase-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: white;
  border: 2px solid #dee2e6;
  min-width: 100px;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.phase-indicator.pending {
  border-color: #6c757d;
  color: #6c757d;
  background: #f8f9fa;
}

.phase-indicator.active {
  border-color: #007bff;
  color: #007bff;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  animation: activePhase 2s ease-in-out infinite;
}

.phase-indicator.completed {
  border-color: #28a745;
  color: #28a745;
  background: #f8fff9;
}

.phase-indicator.error {
  border-color: #dc3545;
  color: #dc3545;
  background: #fff5f5;
}

@keyframes activePhase {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.phase-icon {
  font-size: 1.5em;
}

.phase-label {
  font-weight: 600;
  font-size: 0.9em;
}

.phase-progress {
  font-size: 0.8em;
  font-weight: 500;
  opacity: 0.8;
}

/* 輸入區域 */
.input-section {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}

.input-section h4 {
  margin: 0 0 16px 0;
  color: #495057;
  font-size: 1.1em;
  font-weight: 600;
}

.input-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.query-input {
  flex: 1 1;
  padding: 12px 16px;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  font-size: 1em;
  background: white;
  transition: all 0.3s ease;
}

.query-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.start-button {
  padding: 12px 24px;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.start-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

.start-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 錯誤區域 */
.error-section {
  margin-bottom: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
  border-radius: 12px;
  border: 2px solid #fc8181;
}

.error-section h4 {
  margin: 0 0 12px 0;
  color: #c53030;
  font-size: 1.1em;
  font-weight: 600;
}

.error-content p {
  margin: 0 0 16px 0;
  color: #742a2a;
  line-height: 1.5;
}

.restart-button {
  padding: 10px 20px;
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.restart-button:hover {
  background: linear-gradient(135deg, #c53030 0%, #9c2626 100%);
  box-shadow: 0 4px 12px rgba(197, 48, 48, 0.3);
  transform: translateY(-2px);
}

/* 引擎容器 */
.engines-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.planning-engine,
.execution-engine,
.analysis-engine {
  border-radius: 12px;
  overflow: hidden;
}

/* 完成區域 */
.completion-section {
  padding: 24px;
  background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
  border-radius: 12px;
  border: 2px solid #68d391;
}

.completion-section h4 {
  margin: 0 0 20px 0;
  color: #22543d;
  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
}

.final-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 20px;
}

.result-card {
  background: white;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #9ae6b4;
  box-shadow: 0 2px 8px rgba(34, 84, 61, 0.1);
}

.result-card h5 {
  margin: 0 0 12px 0;
  color: #22543d;
  font-size: 1em;
  font-weight: 600;
}

.result-card p {
  margin: 0;
  color: #2d3748;
  line-height: 1.5;
}

.confidence-display {
  display: flex;
  align-items: center;
  gap: 12px;
}

.confidence-bar {
  flex: 1 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #48bb78 0%, #38a169 100%);
  transition: width 0.3s ease;
}

.confidence-text {
  font-weight: 600;
  color: #22543d;
  min-width: 40px;
}

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

/* 結果顯示區域 */
.result-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.result-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
}

.result-content {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 16px;
}

.result-text {
  margin: 0;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.9em;
  line-height: 1.5;
  color: #495057;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 查詢結果區域 */
.query-results-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.query-results-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 說明區域 */
.demo-info {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e5e9;
}

.demo-info h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 1.3em;
  font-weight: 600;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.info-item {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #dee2e6;
}

.info-item h4 {
  margin: 0 0 16px 0;
  color: #495057;
  font-size: 1.1em;
  font-weight: 600;
}

.info-item ul {
  margin: 0;
  padding-left: 20px;
}

.info-item li {
  margin-bottom: 8px;
  color: #6c757d;
  line-height: 1.4;
}

.info-item li strong {
  color: #495057;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .accounting-demo-v4 {
    padding: 16px;
  }

  .demo-header {
    padding: 20px;
  }

  .demo-header h2 {
    font-size: 1.8em;
  }

  .mode-selector {
    grid-template-columns: 1fr;
  }

  .phase-indicators {
    flex-direction: column;
    gap: 12px;
  }

  .phase-indicators::before {
    display: none;
  }

  .input-container {
    flex-direction: column;
  }

  .final-results {
    grid-template-columns: 1fr;
  }

  .confidence-display {
    flex-direction: column;
    align-items: stretch;
  }

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

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

/* Demo 通用樣式 */
.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
}

.demo-header {
  text-align: center;
  margin-bottom: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.demo-header h1 {
  margin: 0 0 1rem 0;
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.demo-description {
  font-size: 1.1rem;
  color: #495057;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.feature-list {
  text-align: left;
  display: inline-block;
  margin: 1rem 0;
}

.feature-list li {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #495057;
}

.demo-content {
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
}

/* 控制面板 */
.control-panel {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.control-section {
  margin-bottom: 1.5rem;
}

.control-section:last-child {
  margin-bottom: 0;
}

.control-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 模式選擇 */
.mode-selector {
  margin-bottom: 1rem;
}

.mode-info {
  margin-top: 1rem;
}

.info-card {
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid;
}

.info-card.generate {
  background: #e8f5e8;
  border-left-color: #28a745;
}

.info-card.edit {
  background: #e3f2fd;
  border-left-color: #007bff;
}

.info-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.info-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #495057;
}

/* 文件上傳 */
.file-upload-area {
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.file-upload-area:hover {
  border-color: #667eea;
  background: #f0f4ff;
}

.file-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: white;
  margin-bottom: 1rem;
}

.upload-info p {
  margin: 0.25rem 0;
  font-size: 0.875rem;
  color: #6c757d;
}

.selected-count {
  color: #28a745 !important;
  font-weight: 600;
}

/* 進階設定 */
.advanced-settings {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.setting-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
}

.setting-input,
.setting-select {
  padding: 0.5rem;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  transition: border-color 0.3s ease;
}

.setting-input:focus,
.setting-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 控制按鈕 */
.control-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.control-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-button.reset {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.control-button.reset:hover:not(:disabled) {
  background: linear-gradient(135deg, #495057 0%, #343a40 100%);
  transform: translateY(-1px);
}

.control-button.clear {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
}

.control-button.clear:hover:not(:disabled) {
  background: linear-gradient(135deg, #c82333 0%, #a71e2a 100%);
  transform: translateY(-1px);
}

.control-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* 輸入區域 */
.input-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.input-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
}

.warning-message {
  background: #fff3cd;
  color: #856404;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #ffeaa7;
  margin-top: 1rem;
  font-size: 0.875rem;
  text-align: center;
}

/* 進度顯示 */
.progress-display {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.progress-display h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
}

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

.progress-bar {
  width: 100%;
  height: 12px;
  background: #e9ecef;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transition: width 0.3s ease;
  border-radius: 6px;
}

.progress-text {
  font-size: 0.875rem;
  color: #495057;
  font-weight: 500;
}

/* 生成歷史 */
.history-section {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.history-section h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.history-item {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.history-item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.history-header {
  padding: 1rem;
  background: white;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
}

.history-date {
  font-size: 0.75rem;
  color: #6c757d;
}

.history-image {
  padding: 1rem;
  text-align: center;
  background: white;
}

.history-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.history-details {
  padding: 1rem;
  background: white;
}

.history-prompt {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.4;
}

.history-actions {
  display: flex;
  gap: 0.5rem;
}

.history-action {
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #495057;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-action:hover {
  background: #e9ecef;
  text-decoration: none;
  color: #343a40;
}

/* 使用說明 */
.demo-instructions {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
  margin-top: 2rem;
}

.demo-instructions h3 {
  margin: 0 0 1.5rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
}

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

.instruction-card {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1.5rem;
  border-left: 4px solid #667eea;
}

.instruction-card h4 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
}

.instruction-card ol,
.instruction-card ul {
  margin: 0;
  padding-left: 1.5rem;
}

.instruction-card li {
  margin: 0.5rem 0;
  font-size: 0.875rem;
  color: #495057;
  line-height: 1.4;
}

/* 編輯歷史圖片樣式 */
.editing-history-info {
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease;
}

.editing-history-info .info-card {
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #764ba2;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8e9f3 100%);
}

.editing-history-info h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editing-history-info p {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: #495057;
  word-break: break-word;
}

.editing-input-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.editing-prompt-input {
  flex: 1 1;
  min-width: 300px;
  padding: 0.75rem;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.875rem;
  background: white;
  transition: all 0.3s ease;
}

.editing-prompt-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.editing-submit-button,
.editing-cancel-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.editing-submit-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.editing-submit-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.editing-submit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.editing-cancel-button {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
}

.editing-cancel-button:hover {
  background: #e9ecef;
  border-color: #ced4da;
}

/* 編輯按鈕樣式 */
.history-action.edit-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.history-action.edit-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.history-action.edit-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #6c757d;
}

/* 動畫效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 響應式設計 */
@media (max-width: 768px) {
  .demo-container {
    padding: 15px;
  }

  .demo-header {
    padding: 1.5rem 1rem;
  }

  .demo-header h1 {
    font-size: 2rem;
  }

  .control-buttons {
    flex-direction: column;
  }

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

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

  .advanced-settings {
    gap: 0.75rem;
  }

  .editing-input-group {
    flex-direction: column;
    align-items: stretch;
  }

  .editing-prompt-input {
    min-width: 100%;
  }

  .editing-submit-button,
  .editing-cancel-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .demo-header h1 {
    font-size: 1.75rem;
  }

  .control-panel,
  .input-section,
  .progress-display,
  .history-section {
    padding: 1rem;
  }
}

.CharacterChatDemo_demo__5YqAg {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #f8f9fa;
  min-height: 100vh;
}

.CharacterChatDemo_header__YhfgA {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.CharacterChatDemo_header__YhfgA h1 {
  color: #2c3e50;
  margin-bottom: 12px;
  font-size: 2.5rem;
}

.CharacterChatDemo_description__rarhX {
  color: #666;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

/* 控制面板 */
.CharacterChatDemo_controls__gtpOW {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.CharacterChatDemo_controlGroup__iTPYS {
  margin-bottom: 24px;
}

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

.CharacterChatDemo_controlGroup__iTPYS h3 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 1.2rem;
}

/* 角色選擇 */
.CharacterChatDemo_characterSelection__63pzE {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.CharacterChatDemo_characterButton__NfkBb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.CharacterChatDemo_characterButton__NfkBb:hover {
  background: #e3f2fd;
  border-color: #4fc3f7;
  transform: translateY(-2px);
}

.CharacterChatDemo_characterButton__NfkBb.CharacterChatDemo_active__1Vugh {
  background: #e3f2fd;
  border-color: #4fc3f7;
  box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
}

.CharacterChatDemo_characterIcon__QnxPc {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid transparent;
  transition: border-color 0.3s ease;
}

.CharacterChatDemo_characterButton__NfkBb.CharacterChatDemo_active__1Vugh .CharacterChatDemo_characterIcon__QnxPc {
  border-color: #4fc3f7;
}

.CharacterChatDemo_characterButton__NfkBb span {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 場景選擇 */
.CharacterChatDemo_scenarioSelection__bdeR8 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.CharacterChatDemo_scenarioButton__b7lLa {
  padding: 12px 20px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.CharacterChatDemo_scenarioButton__b7lLa:hover {
  background: #e8f5e8;
  border-color: #4caf50;
}

.CharacterChatDemo_scenarioButton__b7lLa.CharacterChatDemo_active__1Vugh {
  background: #e8f5e8;
  border-color: #4caf50;
  color: #2e7d2e;
}

/* 對話區域 */
.CharacterChatDemo_chatArea__DFg07 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 32px;
}

.CharacterChatDemo_inputSection__sY3YL,
.CharacterChatDemo_responseSection__SyW1M {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.CharacterChatDemo_inputSection__sY3YL h3,
.CharacterChatDemo_responseSection__SyW1M h3 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 1.2rem;
}

/* 功能說明 */
.CharacterChatDemo_features__-pPqh {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.CharacterChatDemo_features__-pPqh h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.CharacterChatDemo_featureGrid__eft6T {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  gap: 20px;
}

.CharacterChatDemo_featureCard__6erlm {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s ease;
}

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

.CharacterChatDemo_featureIcon__ugmFH {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.CharacterChatDemo_featureCard__6erlm h4 {
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.CharacterChatDemo_featureCard__6erlm p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* 使用說明 */
.CharacterChatDemo_usage__goGol {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.CharacterChatDemo_usage__goGol h3 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 1.3rem;
}

.CharacterChatDemo_steps__alvjT {
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 20px;
}

.CharacterChatDemo_steps__alvjT li {
  margin-bottom: 8px;
}

/* 技術說明 */
.CharacterChatDemo_technical__VJOcM {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.CharacterChatDemo_technical__VJOcM h3 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 1.3rem;
}

.CharacterChatDemo_techList__g2qf7 {
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
  padding-left: 20px;
}

.CharacterChatDemo_techList__g2qf7 li {
  margin-bottom: 8px;
}

.CharacterChatDemo_techList__g2qf7 strong {
  color: #2c3e50;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .CharacterChatDemo_demo__5YqAg {
    padding: 16px;
  }

  .CharacterChatDemo_header__YhfgA h1 {
    font-size: 2rem;
  }

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

  .CharacterChatDemo_characterSelection__63pzE {
    justify-content: center;
  }

  .CharacterChatDemo_characterButton__NfkBb {
    min-width: 100px;
  }

  .CharacterChatDemo_characterIcon__QnxPc {
    width: 50px;
    height: 50px;
  }

  .CharacterChatDemo_scenarioSelection__bdeR8 {
    justify-content: center;
  }

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

.personal-info-component {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.personal-info-component.collapsed {
  padding: 15px 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
  transition: all 0.3s ease;
}

.personal-info-component.collapsed .info-header {
  margin-bottom: 0;
  border-bottom: none;
}

.info-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.2em;
}

.info-header .collapse-icon {
  font-size: 1.2em;
  color: #666;
  transition: transform 0.3s ease;
}

.info-header:hover .collapse-icon {
  transform: scale(1.1);
}

.personal-info-component h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 1.2em;
}

.no-profile {
  text-align: center;
  padding: 40px 20px;
}

.no-profile p {
  color: #666;
  margin-bottom: 20px;
}

.create-profile-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.create-profile-btn:hover {
  background-color: #45a049;
}

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

.info-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e1e4e8;
}

.info-item label {
  display: block;
  font-size: 0.9em;
  color: #666;
  margin-bottom: 5px;
}

.info-value {
  font-size: 1.1em;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
}

.info-value:hover {
  color: #4caf50;
}

.info-value.bmi {
  cursor: default;
  color: #4caf50;
  font-weight: 600;
}

.edit-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 300px;
}

.edit-modal h4 {
  margin: 0 0 20px 0;
  color: #333;
}

.cancel-btn {
  margin-top: 15px;
  background-color: #e1e4e8;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.cancel-btn:hover {
  background-color: #d1d5da;
}

/* AI建議樣式 */
.ai-recommendations {
  margin-top: 25px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f4fd 100%);
  border-radius: 12px;
  border: 2px solid #667eea;
}

.ai-recommendations h4 {
  margin: 0 0 15px 0;
  color: #4c63d2;
  font-size: 1.1em;
  font-weight: 600;
}

.ai-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 15px;
}

.ai-info-item {
  background: white;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ai-info-item.full-width {
  grid-column: 1 / -1;
}

.ai-info-item label {
  display: block;
  font-size: 0.85em;
  color: #666;
  margin-bottom: 5px;
  font-weight: 500;
}

.ai-value {
  font-size: 1.1em;
  font-weight: 700;
  color: #4c63d2;
}

.ai-reason {
  font-size: 0.95em;
  color: #555;
  line-height: 1.4;
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  border-left: 3px solid #4c63d2;
}

.regenerate-ai-btn {
  width: 100%;
  padding: 10px;
  background: #4c63d2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.regenerate-ai-btn:hover {
  background: #3b4bc7;
  transform: translateY(-1px);
}

.ai-actions {
  display: flex;
  gap: 10px;
}

.manual-adjust-btn {
  flex: 1 1;
  padding: 10px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.manual-adjust-btn:hover {
  background: #218838;
  transform: translateY(-1px);
}

/* AI歷史記錄樣式 */
.ai-history {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  border: 1px solid #e9ecef;
}

.ai-history h4 {
  margin: 0 0 15px 0;
  color: #495057;
  font-size: 1em;
  font-weight: 600;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  background: white;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-date {
  font-size: 0.85em;
  color: #6c757d;
  font-weight: 500;
}

.history-type {
  font-size: 0.8em;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.history-type.ai_auto {
  background: #e3f2fd;
  color: #1976d2;
}

.history-type.user_manual {
  background: #e8f5e8;
  color: #2e7d32;
}

.history-type.weekly_review {
  background: #fff3e0;
  color: #f57c00;
}

.history-content {
  font-size: 0.9em;
}

.calorie-change {
  font-weight: 600;
  color: #495057;
  margin-bottom: 4px;
}

.change-indicator {
  font-size: 0.85em;
  font-weight: 500;
  margin-left: 8px;
}

.change-indicator.increase {
  color: #dc3545;
}

.change-indicator.decrease {
  color: #28a745;
}

.history-reason {
  color: #6c757d;
  margin-bottom: 4px;
  line-height: 1.3;
}

.weekly-data {
  font-size: 0.8em;
  color: #6c757d;
  font-style: italic;
}

/* 熱量詳細分析面板樣式 */
.calorie-analysis-panel {
  margin-top: 25px;
  padding: 25px;
  background: linear-gradient(135deg, #fff9e6 0%, #ffecd2 100%);
  border-radius: 15px;
  border: 2px solid #ffb347;
  box-shadow: 0 4px 15px rgba(255, 179, 71, 0.2);
}

.calorie-analysis-panel h4 {
  margin: 0 0 20px 0;
  color: #e67e00;
  font-size: 1.2em;
  font-weight: 700;
}

.calorie-analysis-panel h5 {
  margin: 15px 0 10px 0;
  color: #d16100;
  font-size: 1em;
  font-weight: 600;
}

.calorie-analysis-panel h6 {
  margin: 10px 0 8px 0;
  color: #b8460e;
  font-size: 0.9em;
  font-weight: 600;
}

/* 計算顯示區塊 */
.calculation-display {
  background: white;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  border-left: 4px solid #ffb347;
}

.calc-formula {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  color: #666;
  margin-bottom: 8px;
  line-height: 1.4;
}

.calc-result {
  font-size: 1.1em;
  font-weight: 700;
  color: #e67e00;
  margin-bottom: 5px;
}

.calc-note {
  font-size: 0.85em;
  color: #888;
  font-style: italic;
}

/* 目標調整區塊 */
.goal-adjustment-section {
  margin: 20px 0;
}

.current-goal {
  margin-bottom: 15px;
  padding: 10px;
  background: #fff3e0;
  border-radius: 8px;
  border: 1px solid #ffcc80;
}

.goal-label {
  font-weight: 600;
  color: #e65100;
  margin-right: 10px;
}

.goal-value {
  font-weight: 700;
  color: #ff9800;
  background: white;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 減重選項 */
.weight-loss-options {
  margin-top: 15px;
}

.speed-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 10px;
}

.speed-option {
  display: flex;
  align-items: center;
  padding: 12px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.speed-option:hover {
  border-color: #ffb347;
  box-shadow: 0 2px 8px rgba(255, 179, 71, 0.2);
}

.speed-option input[type="radio"] {
  margin-right: 10px;
  width: 16px;
  height: 16px;
}

.speed-option input[type="radio"]:checked + .option-info {
  color: #e67e00;
}

.speed-option:has(input[type="radio"]:checked) {
  border-color: #ffb347;
  background: #fff9e6;
}

.option-info {
  flex: 1 1;
}

.option-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.option-desc {
  font-size: 0.85em;
  color: #666;
}

/* 自訂調整 */
.custom-deficit {
  margin-top: 15px;
  padding: 15px;
  background: white;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
}

.custom-deficit label {
  display: block;
  font-weight: 600;
  color: #e67e00;
  margin-bottom: 10px;
}

.deficit-slider {
  margin: 15px 0;
}

.deficit-slider input[type="range"] {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  outline: none;
  margin-bottom: 10px;
}

.deficit-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  background: #ffb347;
  border-radius: 50%;
  cursor: pointer;
}

.slider-value {
  text-align: center;
  font-size: 1.1em;
  font-weight: 700;
  color: #e67e00;
}

.deficit-note {
  font-size: 0.8em;
  color: #888;
  text-align: center;
  margin-top: 5px;
}

/* 最終建議 */
.final-recommendation {
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  border-radius: 12px;
  border: 2px solid #81c784;
}

.recommendation-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
}

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

.summary-item label {
  display: block;
  font-size: 0.85em;
  color: #2e7d32;
  margin-bottom: 5px;
  font-weight: 600;
}

.summary-value {
  font-size: 1.2em;
  font-weight: 700;
  color: #388e3c;
}

.summary-value.primary {
  font-size: 1.4em;
  color: #1b5e20;
}

/* 面板操作按鈕 */
.panel-actions {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.save-settings-btn,
.reset-ai-btn {
  flex: 1 1;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-settings-btn {
  background: #4caf50;
  color: white;
}

.save-settings-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
}

.reset-ai-btn {
  background: #2196f3;
  color: white;
}

.reset-ai-btn:hover {
  background: #1976d2;
  transform: translateY(-2px);
}

/* 簡化的AI建議 */
.ai-recommendations-simple {
  margin-top: 20px;
  padding: 15px;
  background: #f0f8ff;
  border-radius: 10px;
  border: 1px solid #87ceeb;
}

.ai-recommendations-simple h4 {
  margin: 0 0 10px 0;
  color: #1e88e5;
  font-size: 1em;
}

.ai-summary {
  font-size: 0.9em;
}

.ai-reason {
  color: #424242;
  margin-bottom: 5px;
}

.ai-status {
  color: #1565c0;
  font-weight: 500;
}

/* 營養成分顯示元件樣式 */
.nutrition-display {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.nutrition-display h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1em;
}

.nutrient-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.nutrient-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.nutrient-item:hover {
  background-color: #f8f9fa;
}

.nutrient-name {
  min-width: 80px;
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
}

.nutrient-bar {
  flex: 1 1;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.nutrient-fill {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
  border-radius: 6px;
}

.nutrient-value {
  min-width: 120px;
  font-size: 0.85em;
  color: #666;
  text-align: right;
  font-weight: 500;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .nutrition-display {
    padding: 15px;
  }

  .nutrient-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .nutrient-name {
    min-width: auto;
    text-align: left;
  }

  .nutrient-value {
    min-width: auto;
    text-align: left;
    font-size: 0.8em;
  }

  .nutrient-bar {
    height: 10px;
  }
}

/* 不同使用場景的變體樣式 */
.nutrition-display.compact {
  padding: 15px;
}

.nutrition-display.compact .nutrient-grid {
  gap: 8px;
}

.nutrition-display.compact .nutrient-item {
  gap: 8px;
}

.nutrition-display.compact .nutrient-name {
  min-width: 60px;
  font-size: 0.8em;
}

.nutrition-display.compact .nutrient-value {
  min-width: 100px;
  font-size: 0.8em;
}

.nutrition-display.compact .nutrient-bar {
  height: 8px;
}

/* 兩欄佈局變體 */
.nutrition-display.two-column .nutrient-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px 20px;
}

/* 三欄佈局變體 */
.nutrition-display.three-column .nutrient-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
}

@media (max-width: 768px) {
  .nutrition-display.two-column .nutrient-grid,
  .nutrition-display.three-column .nutrient-grid {
    grid-template-columns: 1fr;
  }
}

/* AI 營養建議元件樣式 */
.nutrition-advice-ai {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0fdf4 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #d1fae5;
}

.nutrition-advice-ai.compact {
  padding: 15px;
  margin-bottom: 15px;
}

.advice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.advice-header h4 {
  margin: 0;
  color: #065f46;
  font-size: 1.1em;
}

.get-advice-btn {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.get-advice-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4);
}

.ai-analyzing {
  text-align: center;
  padding: 20px;
}

.pulse-animation {
  font-size: 2em;
  animation: pulse 2s infinite;
  margin-bottom: 10px;
}

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

.ai-analyzing p {
  color: #065f46;
  font-size: 1em;
  margin-bottom: 15px;
}

.analysis-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.analysis-details span {
  color: #374151;
  font-size: 0.9em;
  padding-left: 15px;
  position: relative;
}

.analysis-details span::before {
  content: "⚙️";
  position: absolute;
  left: 0;
  animation: spin 2s linear infinite;
}

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

.advice-result {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.advice-content {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 20px;
}

.advice-content p {
  margin-bottom: 12px;
}

.advice-content p:last-child {
  margin-bottom: 0;
}

.advice-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid #e5e7eb;
  padding-top: 15px;
}

.refresh-advice-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.3s ease;
}

.refresh-advice-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
}

.close-advice-btn {
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.3s ease;
}

.close-advice-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .nutrition-advice-ai {
    padding: 15px;
  }

  .advice-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .advice-header h4 {
    text-align: center;
  }

  .get-advice-btn {
    width: 100%;
  }

  .ai-analyzing {
    padding: 15px;
  }

  .advice-actions {
    flex-direction: column;
  }

  .refresh-advice-btn,
  .close-advice-btn {
    width: 100%;
  }
}

/* AI 食譜推薦元件樣式 */
.recipe-recommendation-ai {
  background: linear-gradient(135deg, #fef3e2 0%, #fefbf3 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #fed7aa;
}

.recipe-recommendation-ai.compact {
  padding: 15px;
  margin-bottom: 15px;
}

.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.recommendation-header h4 {
  margin: 0;
  color: #c2410c;
  font-size: 1.1em;
}

.get-recipe-btn {
  background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(234, 88, 12, 0.3);
}

.get-recipe-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(234, 88, 12, 0.4);
}

.get-recipe-btn:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ai-analyzing {
  text-align: center;
  padding: 20px;
}

.pulse-animation {
  font-size: 2em;
  animation: pulse 2s infinite;
  margin-bottom: 10px;
}

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

.ai-analyzing p {
  color: #c2410c;
  font-size: 1em;
  margin-bottom: 15px;
}

.analysis-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.analysis-details span {
  color: #374151;
  font-size: 0.9em;
  padding-left: 15px;
  position: relative;
}

.analysis-details span::before {
  content: "🔥";
  position: absolute;
  left: 0;
  animation: flicker 1.5s ease-in-out infinite alternate;
}

@keyframes flicker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

.recommendation-result {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.recommendation-content {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 20px;
}

.recommendation-content p {
  margin-bottom: 12px;
}

.recommendation-content p:last-child {
  margin-bottom: 0;
}

.recommendation-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid #e5e7eb;
  padding-top: 15px;
}

.refresh-recipe-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.3s ease;
}

.refresh-recipe-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.close-recipe-btn {
  background: #f3f4f6;
  color: #6b7280;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.85em;
  transition: all 0.3s ease;
}

.close-recipe-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.quick-status {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 15px;
  margin-top: 10px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-label {
  color: #6b7280;
  font-size: 0.9em;
  font-weight: 500;
}

.status-value {
  color: #374151;
  font-weight: 600;
  font-size: 0.9em;
}

.status-value.over-limit {
  color: #dc2626;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .recipe-recommendation-ai {
    padding: 15px;
  }

  .recommendation-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .recommendation-header h4 {
    text-align: center;
  }

  .get-recipe-btn {
    width: 100%;
  }

  .ai-analyzing {
    padding: 15px;
  }

  .recommendation-actions {
    flex-direction: column;
  }

  .refresh-recipe-btn,
  .close-recipe-btn {
    width: 100%;
  }

  .status-item {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
}

/* Markdown 樣式 */
.recommendation-content .markdown-h4 {
  color: #c2410c;
  font-size: 1.1em;
  font-weight: 600;
  margin: 16px 0 8px 0;
  border-bottom: 2px solid #fed7aa;
  padding-bottom: 4px;
}

.recommendation-content .markdown-h5 {
  color: #ea580c;
  font-size: 1em;
  font-weight: 600;
  margin: 12px 0 6px 0;
}

.recommendation-content .markdown-paragraph {
  margin: 8px 0;
  line-height: 1.6;
}

.recommendation-content .markdown-list-item {
  display: flex;
  align-items: flex-start;
  margin: 6px 0;
  padding-left: 8px;
}

.recommendation-content .markdown-list-item .bullet {
  color: #ea580c;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}

.recommendation-content .markdown-bold {
  font-weight: 600;
  color: #c2410c;
  background: rgba(254, 215, 170, 0.3);
  padding: 1px 4px;
  border-radius: 3px;
}

.recommendation-content .markdown-divider {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #fed7aa 0%, #fbbf24 50%, #fed7aa 100%);
  margin: 16px 0;
  border-radius: 1px;
}

/* 表格樣式增強 */
.markdown-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.9em;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.markdown-table th {
  background-color: rgba(74, 144, 226, 0.1);
  color: #333;
  font-weight: 600;
  padding: 12px 10px;
  text-align: left;
  border-bottom: 2px solid rgba(74, 144, 226, 0.2);
}

.markdown-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(74, 144, 226, 0.1);
}

.markdown-table tbody tr:hover {
  background-color: rgba(74, 144, 226, 0.05);
}

.markdown-table tbody tr:last-child td {
  border-bottom: none;
}

/* 偏好設定區域樣式 */
.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.preferences-btn {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.preferences-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.preferences-section {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(247, 250, 255, 0.95)
  );
  border: 1px solid rgba(108, 92, 231, 0.2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(108, 92, 231, 0.1);
}

.preferences-section h5 {
  color: #6c5ce7;
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-options-section,
.custom-requirement-section {
  margin-bottom: 20px;
}

.section-label {
  display: block;
  color: #4a4a4a;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 14px;
}

.quick-options {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid rgba(108, 92, 231, 0.15);
}

.custom-input {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border: 1px solid rgba(108, 92, 231, 0.15);
  min-height: 80px;
}

.preferences-summary {
  background: linear-gradient(
    135deg,
    rgba(108, 92, 231, 0.1),
    rgba(162, 155, 254, 0.1)
  );
  border-radius: 8px;
  padding: 15px;
  border: 1px solid rgba(108, 92, 231, 0.2);
  margin-top: 15px;
}

.preferences-summary h6 {
  color: #6c5ce7;
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
}

.preferences-summary p {
  margin: 8px 0;
  color: #4a4a4a;
  font-size: 14px;
  line-height: 1.4;
}

.reset-btn {
  background: linear-gradient(135deg, #e17055, #ff7675);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.reset-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(225, 112, 85, 0.3);
}

.meal-record-component {
  background-color: #fff3e0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.meal-record-component h3 {
  margin: 0 0 20px 0;
  color: #f57c00;
  font-size: 1.2em;
}

.meal-record-component.loading {
  text-align: center;
  color: #666;
  padding: 40px;
}

.nutrition-summary {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.nutrition-summary h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1em;
}

.nutrient-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.nutrient-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nutrient-name {
  min-width: 50px;
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
}

.nutrient-bar {
  flex: 1 1;
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.nutrient-fill {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

.nutrient-value {
  min-width: 100px;
  font-size: 0.85em;
  color: #666;
  text-align: right;
}

.meal-actions {
  text-align: center;
  margin-bottom: 20px;
}

.add-meal-btn {
  background-color: #ff9800;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.add-meal-btn:hover {
  background-color: #f57c00;
}

.add-meal-modal {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.add-meal-modal h4 {
  margin: 0 0 15px 0;
  color: #333;
}

.input-tip {
  background: #fff3e0;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
  color: #f57c00;
  font-size: 0.9em;
}

.cancel-btn {
  margin-top: 15px;
  background-color: #e0e0e0;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  width: 100%;
}

.cancel-btn:hover {
  background-color: #d0d0d0;
}

.meals-history {
  background: white;
  border-radius: 8px;
  padding: 15px;
}

.meals-history h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1em;
}

.meals-list {
  max-height: 400px;
  overflow-y: auto;
}

.meal-item {
  background: #f8f8f8;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
}

.meal-item:last-child {
  margin-bottom: 0;
}

.meal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.meal-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.meal-actions {
  display: flex;
  gap: 4px;
}

.edit-meal-btn,
.delete-meal-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-meal-btn:hover:not(:disabled) {
  background: #e3f2fd;
  border-color: #2196f3;
}

.delete-meal-btn:hover:not(:disabled) {
  background: #ffebee;
  border-color: #f44336;
}

.edit-meal-btn:disabled,
.delete-meal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.meal-type {
  font-weight: 600;
  color: #f57c00;
  font-size: 1.1em;
}

.meal-time {
  color: #999;
  font-size: 0.9em;
}

.meal-calories {
  color: #e91e63;
  font-weight: 600;
  font-size: 0.95em;
}

.meal-foods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.food-item {
  background: white;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.85em;
  border: 1px solid #e0e0e0;
}

.food-name {
  color: #333;
  font-weight: 500;
}

.food-portion {
  color: #666;
  margin-left: 6px;
}

/* 餐點營養成分顯示樣式 */
.meal-nutrients {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meal-nutrients .nutrient-item {
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  font-size: 0.8em;
  transition: all 0.2s ease;
}

.meal-nutrients .nutrient-item:hover {
  transform: translateY(-1px);
}

.meal-nutrients .nutrient-label {
  font-weight: 600;
  font-size: 0.85em;
}

.meal-nutrients .nutrient-value {
  font-weight: 700;
  font-size: 0.9em;
}

/* 主要營養素樣式 (原來的綠色) */
.meal-nutrients .nutrient-item.macronutrient {
  background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
  border: 1px solid #c8e6c9;
}

.meal-nutrients .nutrient-item.macronutrient:hover {
  background: linear-gradient(135deg, #dcedc8 0%, #e8f5e8 100%);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.15);
}

.meal-nutrients .nutrient-item.macronutrient .nutrient-label {
  color: #2e7d32;
}

.meal-nutrients .nutrient-item.macronutrient .nutrient-value {
  color: #1b5e20;
}

/* 維生素樣式 (橙色系) */
.meal-nutrients .nutrient-item.vitamin {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 1px solid #ffcc02;
}

.meal-nutrients .nutrient-item.vitamin:hover {
  background: linear-gradient(135deg, #ffe0b2 0%, #ffcc02 100%);
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.2);
}

.meal-nutrients .nutrient-item.vitamin .nutrient-label {
  color: #ef6c00;
}

.meal-nutrients .nutrient-item.vitamin .nutrient-value {
  color: #bf360c;
}

/* 礦物質樣式 (藍色系) */
.meal-nutrients .nutrient-item.mineral {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 1px solid #90caf9;
}

.meal-nutrients .nutrient-item.mineral:hover {
  background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
  box-shadow: 0 2px 6px rgba(33, 150, 243, 0.2);
}

.meal-nutrients .nutrient-item.mineral .nutrient-label {
  color: #1976d2;
}

.meal-nutrients .nutrient-item.mineral .nutrient-value {
  color: #0d47a1;
}

/* 糖分樣式 (紅色系) */
.meal-nutrients .nutrient-item.sugar {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  border: 1px solid #ef9a9a;
}

.meal-nutrients .nutrient-item.sugar:hover {
  background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
  box-shadow: 0 2px 6px rgba(244, 67, 54, 0.2);
}

.meal-nutrients .nutrient-item.sugar .nutrient-label {
  color: #d32f2f;
}

.meal-nutrients .nutrient-item.sugar .nutrient-value {
  color: #b71c1c;
}

@media (max-width: 768px) {
  /* ✅ 手機版全寬優化 - 完全移除左右空白 */
  .meal-record-component {
    padding: 15px 0; /* 完全移除左右padding */
    margin: 0 -20px 15px -20px; /* 負邊距突破父容器限制 */
    border-radius: 0; /* 手機版移除圓角 */
    width: calc(100% + 40px); /* 強制全寬 */
  }

  .meal-record-component h3 {
    margin-bottom: 16px;
    text-align: center; /* 手機版標題居中 */
    padding: 0 20px; /* 標題保持適當內距 */
  }

  /* ✅ 飲食清單優化 - 移除雙層邊距 */
  .meals-history {
    padding: 0; /* 完全移除內距，避免雙層邊距 */
    margin: 0;
  }

  .meals-history h4 {
    padding: 8px 20px; /* 只有標題需要內距 */
    margin: 0 0 8px 0;
  }

  .meals-list {
    padding: 0;
    /* 增加滑動區域高度 */
    min-height: 200px;
  }

  .meal-item {
    margin: 0 20px 8px 20px; /* 只保留左右內距和最小垂直間距 */
    border-radius: 12px;
    padding: 20px; /* 增加內距提升觸控體驗 */
    /* 確保足夠的觸控區域 */
    min-height: 120px;
  }

  .meal-header {
    flex-direction: row; /* 改為水平排列，節省空間 */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .meal-info {
    flex-direction: row; /* 改為水平排列 */
    gap: 12px;
    align-items: center;
    flex: 1 1;
  }

  .meal-type {
    font-size: 16px;
    font-weight: 600;
    color: #ff9800;
    white-space: nowrap; /* 防止換行 */
  }

  .meal-time,
  .meal-calories {
    font-size: 14px;
    white-space: nowrap; /* 防止換行 */
  }

  .meal-actions {
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0; /* 防止按鈕被壓縮 */
  }

  .edit-meal-btn,
  .delete-meal-btn {
    min-width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .meal-foods {
    margin-top: 0; /* 減少上邊距 */
    margin-bottom: 12px;
  }

  .food-item {
    /* 保持水平排列，更緊湊 */
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 8px 12px; /* 增加內距提升觸控 */
  }

  .food-name {
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0; /* 防止名稱被壓縮 */
  }

  .food-portion {
    font-size: 13px;
    margin-left: 0;
    color: #999;
    flex: 1 1; /* 份量佔據剩餘空間 */
  }

  /* ✅ 手機版營養成分顯示調整 - 更緊湊 */
  .meal-nutrients {
    margin-top: 0; /* 移除上邊距 */
    padding-top: 12px;
    gap: 6px;
    border-top: 1px solid #f0f0f0; /* 添加分隔線 */
  }

  .meal-nutrients .nutrient-item {
    min-width: 70px;
    padding: 8px 10px;
    font-size: 0.75em;
    /* 更緊湊的排列 */
    flex: 1 1;
    text-align: center;
  }

  .meal-nutrients .nutrient-label {
    font-size: 0.75em;
    display: block; /* 標籤獨立一行 */
  }

  .meal-nutrients .nutrient-value {
    font-size: 0.85em;
    display: block; /* 數值獨立一行 */
    margin-top: 2px;
  }

  .nutrient-item {
    flex-direction: column;
    gap: 6px;
  }

  .nutrient-name {
    min-width: auto;
  }

  .nutrient-value {
    min-width: auto;
    text-align: left;
  }

  .add-meal-btn {
    width: calc(100% - 40px);
    padding: 15px 24px;
    font-size: 16px;
    margin: 0 20px 16px 20px; /* 與容器內距一致 */
    border-radius: 12px;
  }

  .add-meal-modal {
    padding: 15px 20px; /* 與容器內距一致 */
    margin: 0 20px; /* 與容器內距一致 */
    border-radius: 12px;
  }
}

/* 超小螢幕額外優化 */
@media (max-width: 480px) {
  /* ✅ 超小螢幕全寬優化 */
  .meal-record-component {
    padding: 12px 0; /* 完全移除左右padding */
    margin: 0 -16px 12px -16px; /* 較小的負邊距 */
    border-radius: 0; /* 完全移除圓角 */
    width: calc(100% + 32px);
  }

  .meal-record-component h3 {
    margin-bottom: 12px;
    font-size: 1.1em; /* 稍微縮小字體 */
    padding: 0 16px; /* 適當內距 */
  }

  /* ✅ 超小螢幕飲食清單優化 - 移除雙層邊距 */
  .meals-history {
    padding: 0; /* 完全移除內距，避免雙層邊距 */
    margin: 0;
  }

  .meals-history h4 {
    padding: 8px 16px; /* 只有標題需要內距 */
    margin: 0 0 6px 0;
    font-size: 1em;
  }

  .meals-list {
    /* 超小螢幕增加滑動區域 */
    min-height: 180px;
  }

  .meal-item {
    margin: 0 16px 6px 16px; /* 最小邊距和間距 */
    padding: 16px; /* 適中的觸控區域 */
    border-radius: 10px;
    /* 超小螢幕確保觸控區域 */
    min-height: 100px;
  }

  .meal-header {
    gap: 8px;
    margin-bottom: 10px;
    /* 超小螢幕保持水平排列 */
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .meal-info {
    gap: 8px;
    /* 超小螢幕也保持水平排列 */
    flex-direction: row;
    align-items: center;
    flex: 1 1;
  }

  .meal-type {
    font-size: 15px;
  }

  .meal-time,
  .meal-calories {
    font-size: 13px;
  }

  .edit-meal-btn,
  .delete-meal-btn {
    min-width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .food-item {
    margin-bottom: 4px;
    padding: 6px 10px; /* 超小螢幕適中的觸控區域 */
    /* 保持水平排列 */
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .food-name {
    font-size: 13px;
    flex-shrink: 0;
  }

  .food-portion {
    font-size: 12px;
    flex: 1 1;
  }

  .add-meal-btn {
    width: calc(100% - 32px);
    margin: 0 16px 12px 16px; /* 與容器內距一致 */
    border-radius: 10px;
  }

  .add-meal-modal {
    padding: 12px 16px; /* 與容器內距一致 */
    margin: 0 16px; /* 配合容器調整 */
    border-radius: 10px;
  }

  /* ✅ 超小螢幕營養成分優化 - 極致緊湊 */
  .meal-nutrients {
    gap: 4px;
    padding-top: 10px;
  }

  .meal-nutrients .nutrient-item {
    min-width: 65px;
    padding: 6px 8px;
    font-size: 0.7em;
    /* 極致緊湊排列 */
    flex: 1 1;
    text-align: center;
  }

  .meal-nutrients .nutrient-label {
    font-size: 0.7em;
    display: block;
  }

  .meal-nutrients .nutrient-value {
    font-size: 0.8em;
    display: block;
    margin-top: 1px;
  }
}

/* AI 分析容器樣式 */
.ai-analysis-container {
  background: #f0f8ff;
  border: 2px solid #4fc3f7;
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  animation: pulse 2s infinite;
}

.ai-analysis-container p {
  margin: 0 0 15px 0;
  color: #1565c0;
  font-size: 14px;
  font-weight: 500;
}

@keyframes pulse {
  0%,
  100% {
    border-color: #4fc3f7;
  }
  50% {
    border-color: #29b6f6;
  }
}

/* 改進營養成分網格 */
.nutrient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 15px;
}

/* 改進營養項目樣式 */
.nutrient-item {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.nutrient-item:hover {
  background: #f5f5f5;
  border-color: #ff9800;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
}

/* 營養素名稱樣式改進 */
.nutrient-name {
  font-weight: 600;
  color: #333;
  font-size: 13px;
  margin-bottom: 8px;
  text-transform: capitalize;
}

/* 營養條樣式改進 */
.nutrient-bar {
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.nutrient-fill {
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 5px;
}

/* 營養數值樣式改進 */
.nutrient-value {
  font-size: 12px;
  color: #666;
  text-align: center;
  font-weight: 500;
}

/* 改進輸入提示樣式 */
.input-tip {
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
  border: 1px solid #90caf9;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  color: #1565c0;
  font-size: 14px;
  line-height: 1.5;
  position: relative;
}

.input-tip::before {
  content: "💡";
  margin-right: 8px;
  font-size: 16px;
}

/* 響應式改進 */
@media (max-width: 768px) {
  .ai-analysis-container {
    padding: 15px;
    margin: 10px 0;
  }

  .nutrient-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .nutrient-item {
    padding: 12px;
  }
}

/* AI 智能功能區樣式 */
.ai-features-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #bae6fd;
}

.ai-features-section h4 {
  margin: 0 0 20px 0;
  color: #0c4a6e;
  font-size: 1.1em;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 2px solid #bae6fd;
}

.ai-features-section .nutrition-advice {
  margin-bottom: 15px;
}

.ai-features-section .recipe-recommendation {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .ai-features-section {
    padding: 15px 20px; /* 與容器內距一致 */
    margin: 15px 20px 0 20px; /* 與容器內距一致 */
    border-radius: 12px;
  }

  .ai-features-section h4 {
    font-size: 1em;
    margin-bottom: 15px;
  }
}

/* AI功能區超小螢幕優化 */
@media (max-width: 480px) {
  .ai-features-section {
    padding: 12px 16px; /* 與容器內距一致 */
    margin: 12px 16px 0 16px; /* 與容器內距一致 */
    border-radius: 10px;
  }
}

/* 飲水記錄統計組件樣式 - 簡潔設計 */
.water-intake-component {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
}

.water-intake-component.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #64748b;
  font-style: italic;
}

/* 頭部區域 */
.water-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.water-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.water-icon {
  font-size: 1.4em;
}

.water-title h4 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 600;
}

.expand-btn {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
}

.expand-btn:hover {
  background: #2563eb;
}

/* 主要統計區域 */
.water-main-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.water-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.water-circle-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.water-value {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.water-unit {
  font-size: 16px;
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
}

.water-progress-ring {
  transform: rotate(-90deg);
}

.water-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* ✅ 新增：行動指引樣式 */
.water-action-complete {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border-radius: 10px;
  border: 2px solid #4caf50;
  text-align: center;
}

.action-status {
  font-size: 18px;
  font-weight: 600;
  color: #2e7d32;
}

.action-encouragement {
  font-size: 14px;
  color: #388e3c;
  font-weight: 500;
}

.water-action-needed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 10px;
  border: 2px solid #ff9800;
}

.action-main {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.action-label {
  font-size: 16px;
  color: #e65100;
  font-weight: 500;
}

.action-value {
  font-size: 20px;
  font-weight: 700;
  color: #e65100;
}

.action-suggestion {
  font-size: 14px;
  color: #bf360c;
  font-weight: 500;
  text-align: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}

.water-target {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}

.water-remaining {
  font-size: 20px;
  font-weight: 600;
  color: #3b82f6;
}

.water-progress-text {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}

/* 記錄按鈕區域 */
.water-actions {
  text-align: center;
  margin-bottom: 18px;
}

.add-water-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
}

.add-water-btn:hover {
  background: #2563eb;
}

.add-water-modal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.add-water-modal h4 {
  margin: 0 0 18px 0;
  color: #0f172a;
  font-weight: 600;
  font-size: 24px;
}

.custom-amount {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.custom-amount p {
  margin: 0 0 12px 0;
  color: #64748b;
  font-size: 16px;
}

.cancel-btn {
  margin-top: 18px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
  width: 100%;
}

.cancel-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

.achievement-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 18px;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.4);
}

/* 一週詳情區域 */
.weekly-details {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.weekly-details h5 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 1em;
  font-weight: 600;
}

.weekly-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weekly-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.weekly-item:hover {
  background: #f1f3f4;
  border-color: #2196f3;
}

.weekly-date {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  font-size: 0.95em;
}

.weekly-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
}

.stat-label {
  color: #666;
  font-weight: 500;
}

.stat-value {
  color: #333;
  font-weight: 600;
}

.stat-value.achieved {
  color: #4caf50;
}

.stat-value.not-achieved {
  color: #f44336;
}

/* 響應式設計 - 簡化手機版 */
@media (max-width: 768px) {
  .water-intake-component {
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 6px rgba(33, 150, 243, 0.08);
  }

  .water-main-stats {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .water-details {
    align-items: center;
  }

  .add-water-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
  }

  .add-water-modal {
    padding: 15px;
    margin: 0 -5px;
  }

  .weekly-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .weekly-item {
    padding: 12px;
  }

  .stat-item {
    padding: 4px 0;
    border-bottom: 1px solid #eee;
  }

  .stat-item:last-child {
    border-bottom: none;
  }
}

/* 平板響應式 */
@media (max-width: 1024px) and (min-width: 769px) {
  .water-main-stats {
    gap: 20px;
  }

  .weekly-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* 小手機響應式 - 更簡潔 */
@media (max-width: 480px) {
  .water-intake-component {
    padding: 10px;
    box-shadow: 0 1px 4px rgba(33, 150, 243, 0.06);
  }

  .water-header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    margin-bottom: 12px;
  }

  .water-main-stats {
    gap: 10px;
  }

  .water-circle-inner .water-value {
    font-size: 1.5em;
  }

  .weekly-details {
    padding: 12px;
  }

  .weekly-item {
    padding: 8px;
  }
}

/* ✅ 新增：行動指引響應式樣式 */
.water-action-complete,
.water-action-needed {
  padding: 10px;
}

.action-status {
  font-size: 16px;
}

.action-main {
  flex-direction: column;
  gap: 4px;
}

.action-label {
  font-size: 14px;
}

.action-value {
  font-size: 18px;
}

.action-suggestion {
  font-size: 13px;
  padding: 3px 6px;
}

/* 快速餐點記錄組件樣式 */
.quick-meal-component {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  width: 100%;
}

.quick-meal-component:hover {
  border-color: #cbd5e1;
}

.quick-meal-component.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #64748b;
  font-size: 16px;
}

/* Header 區域 */
.meal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.meal-icon {
  font-size: 20px;
}

.meal-title h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
}

.expand-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* 主要統計區域 */
.meal-main-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.meal-circle {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.meal-circle-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.meal-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.meal-unit {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.meal-progress-ring {
  transform: rotate(-90deg);
}

.meal-progress-ring circle {
  transition: stroke-dashoffset 0.3s ease;
}

.meal-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meal-target,
.meal-remaining,
.meal-progress-text {
  font-size: 14px;
  color: #64748b;
}

.meal-target {
  font-weight: 600;
  color: #0f172a;
}

.meal-remaining {
  color: #f59e0b;
}

.meal-progress-text {
  color: #10b981;
  font-weight: 500;
}

/* 操作按鈕區域 */
.meal-actions {
  margin-bottom: 20px;
}

.input-mode-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}

.add-meal-btn {
  flex: 1 1;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.add-meal-btn.quick-mode {
  background: #3b82f6;
}

.add-meal-btn.ai-mode {
  background: #10b981;
}

.add-meal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.add-meal-btn.quick-mode:hover {
  background: #2563eb;
}

.add-meal-btn.ai-mode:hover {
  background: #059669;
}

.add-meal-btn:active {
  transform: translateY(0);
}

/* AI 輸入模態框 */
.ai-input-modal,
.ai-analysis-modal {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.ai-input-modal h4,
.ai-analysis-modal h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-input-tip {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 16px;
  line-height: 1.4;
}

.ai-analysis-container {
  margin: 16px 0;
  padding: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.ai-analysis-container p {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
  font-weight: 500;
}

.cancel-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 12px;
}

.cancel-btn:hover {
  background: #e2e8f0;
  color: #475569;
}

/* 今日餐點摘要 */
.today-meals-summary {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
}

.today-meals-summary h5 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.meals-quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meal-quick-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.meal-type {
  color: #64748b;
  font-weight: 500;
}

.meal-calories {
  color: #f59e0b;
  font-weight: 600;
}

/* 週統計詳情 */
.weekly-details {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.weekly-details h5 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
}

.weekly-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weekly-item {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
}

.weekly-date {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.weekly-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.stat-label {
  color: #64748b;
}

.stat-value {
  font-weight: 500;
  color: #0f172a;
}

.stat-value.achieved {
  color: #10b981;
}

.stat-value.not-achieved {
  color: #f59e0b;
}

/* 響應式設計 */
@media (max-width: 480px) {
  .meal-main-stats {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .meal-circle {
    width: 100px;
    height: 100px;
  }

  .meal-value {
    font-size: 20px;
  }

  .meal-unit {
    font-size: 11px;
  }

  .input-mode-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .add-meal-btn {
    font-size: 16px;
    padding: 14px 16px;
  }

  .ai-input-modal,
  .ai-analysis-modal {
    padding: 16px;
  }

  .weekly-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .meals-quick-list {
    flex-direction: column;
  }

  .meal-quick-item {
    justify-content: space-between;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .meal-main-stats {
    gap: 16px;
  }

  .weekly-stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* 狀態顏色 */
.status-excellent {
  color: #10b981;
}

.status-good {
  color: #3b82f6;
}

.status-warning {
  color: #f59e0b;
}

.status-danger {
  color: #ef4444;
}

.status-low {
  color: #9ca3af;
}

/* 運動記錄統計組件樣式 */
.exercise-tracker-component {
  background: linear-gradient(135deg, #f3e5f5 0%, #ffffff 100%);
  border: 2px solid #ce93d8;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(156, 39, 176, 0.1);
  margin-bottom: 20px;
}

.exercise-tracker-component.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #666;
  font-style: italic;
}

/* 頭部區域 */
.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.exercise-icon {
  font-size: 1.5em;
}

.exercise-title h4 {
  margin: 0;
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
}

.expand-btn {
  background: #9c27b0;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-btn:hover {
  background: #7b1fa2;
  transform: translateY(-1px);
}

/* 主要統計區域 */
.exercise-main-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.exercise-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-circle-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.exercise-value {
  font-size: 1.8em;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.exercise-unit {
  font-size: 0.8em;
  color: #666;
  margin-top: 2px;
}

.exercise-progress-ring {
  transform: rotate(-90deg);
}

.exercise-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ✅ 新增：運動行動指引樣式 */
.exercise-action-complete {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border-radius: 10px;
  border: 2px solid #4caf50;
  text-align: center;
}

.exercise-action-complete .action-status {
  font-size: 18px;
  font-weight: 600;
  color: #2e7d32;
}

.exercise-action-complete .action-encouragement {
  font-size: 14px;
  color: #388e3c;
  font-weight: 500;
}

.exercise-action-complete .action-stats {
  font-size: 12px;
  color: #66bb6a;
  font-weight: 500;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}

.exercise-action-needed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 10px;
  border: 2px solid #ff9800;
}

.exercise-action-needed .action-main {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.exercise-action-needed .action-label {
  font-size: 16px;
  color: #e65100;
  font-weight: 500;
}

.exercise-action-needed .action-value {
  font-size: 20px;
  font-weight: 700;
  color: #e65100;
}

.exercise-action-needed .action-suggestion {
  font-size: 14px;
  color: #bf360c;
  font-weight: 500;
  text-align: center;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}

.exercise-action-needed .action-progress {
  font-size: 12px;
  color: #f57c00;
  font-weight: 500;
  text-align: center;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
}

.exercise-calories {
  font-size: 0.95em;
  color: #666;
  font-weight: 500;
}

.exercise-status {
  font-size: 1.1em;
  font-weight: bold;
}

.exercise-progress-text {
  font-size: 0.9em;
  color: #666;
}

/* 記錄按鈕區域 */
.exercise-actions {
  text-align: center;
  margin-bottom: 20px;
}

.add-exercise-btn {
  background-color: #9c27b0;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
  width: 100%;
}

.add-exercise-btn:hover {
  background-color: #7b1fa2;
  transform: translateY(-1px);
}

.add-exercise-modal {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.add-exercise-modal h4 {
  margin: 0 0 15px 0;
  color: #333;
}

.selected-info {
  background: #f3e5f5;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
  color: #7b1fa2;
  font-weight: 500;
}

.cancel-btn {
  margin-top: 15px;
  background-color: #e0e0e0;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
  width: 100%;
}

.cancel-btn:hover {
  background-color: #d0d0d0;
}

.exercise-history {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

.exercise-history h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1em;
}

.exercise-list {
  max-height: 300px;
  overflow-y: auto;
}

.exercise-item {
  background: #f8f8f8;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #e0e0e0;
}

.exercise-item:last-child {
  margin-bottom: 0;
}

.exercise-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.exercise-type {
  font-weight: 600;
  color: #7b1fa2;
  font-size: 1.1em;
}

.exercise-intensity {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
}

.intensity-低 {
  background-color: #c8e6c9;
  color: #2e7d32;
}

.intensity-中 {
  background-color: #fff9c4;
  color: #f57f17;
}

.intensity-高 {
  background-color: #ffccbc;
  color: #d84315;
}

.exercise-details-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: #666;
}

.exercise-time {
  color: #999;
}

.exercise-duration {
  color: #666;
  font-weight: 500;
}

.exercise-calories {
  color: #e91e63;
  font-weight: 600;
}

/* 一週詳情區域 */
.weekly-details {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.weekly-details h5 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 1em;
  font-weight: 600;
}

.weekly-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.weekly-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.weekly-item:hover {
  background: #f1f3f4;
  border-color: #9c27b0;
}

.weekly-date {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  font-size: 0.95em;
}

.weekly-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
}

.stat-label {
  color: #666;
  font-weight: 500;
}

.stat-value {
  color: #333;
  font-weight: 600;
}

.stat-value.achieved {
  color: #4caf50;
}

.stat-value.not-achieved {
  color: #f44336;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .exercise-tracker-component {
    padding: 15px;
    margin-bottom: 15px;
  }

  .exercise-main-stats {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .exercise-details {
    align-items: center;
  }

  /* ✅ 新增：運動行動指引響應式樣式 */
  .exercise-action-complete,
  .exercise-action-needed {
    padding: 10px;
  }

  .exercise-action-complete .action-status {
    font-size: 16px;
  }

  .exercise-action-needed .action-main {
    flex-direction: column;
    gap: 4px;
  }

  .exercise-action-needed .action-label {
    font-size: 14px;
  }

  .exercise-action-needed .action-value {
    font-size: 18px;
  }

  .exercise-action-needed .action-suggestion {
    font-size: 13px;
    padding: 3px 6px;
  }

  .exercise-action-needed .action-progress {
    font-size: 11px;
  }

  .add-exercise-btn {
    width: 100%;
    padding: 15px 24px;
    font-size: 16px;
  }

  .add-exercise-modal {
    padding: 15px;
    margin: 0 -5px;
  }

  .exercise-item {
    padding: 10px;
  }

  .exercise-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .exercise-details-item {
    flex-direction: column;
    gap: 4px;
  }

  .weekly-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .weekly-item {
    padding: 12px;
  }

  .stat-item {
    padding: 4px 0;
    border-bottom: 1px solid #eee;
  }

  .stat-item:last-child {
    border-bottom: none;
  }
}

/* 平板響應式 */
@media (max-width: 1024px) and (min-width: 769px) {
  .exercise-main-stats {
    gap: 20px;
  }

  .weekly-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* 小手機響應式 */
@media (max-width: 480px) {
  .exercise-tracker-component {
    padding: 12px;
  }

  .exercise-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .exercise-main-stats {
    gap: 12px;
  }

  .exercise-circle-inner .exercise-value {
    font-size: 1.5em;
  }

  .weekly-details {
    padding: 16px;
  }

  .weekly-item {
    padding: 10px;
  }
}

.fridge-inventory-component {
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.fridge-inventory-component h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fridge-inventory-component.loading {
  text-align: center;
  color: #666;
  padding: 40px;
}

.inventory-summary {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.summary-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.total-items {
  font-weight: bold;
  color: #2c3e50;
}

.last-updated {
  color: #666;
  font-size: 0.9em;
}

.category-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-badge {
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.inventory-actions {
  text-align: center;
  margin-bottom: 20px;
}

.add-item-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.add-item-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

.add-item-modal {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #e9ecef;
  margin-bottom: 20px;
}

.add-item-modal h4 {
  margin: 0 0 15px 0;
  color: #333;
}

.quantity-tip {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 12px;
  font-style: italic;
}

.cancel-btn {
  background: #666;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.3s ease;
}

.cancel-btn:hover {
  background: #555;
}

.inventory-list {
  background: white;
  border-radius: 8px;
  padding: 15px;
}

.inventory-list h4 {
  margin: 0 0 15px 0;
  color: #2c3e50;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 15px;
  gap: 15px;
}

.inventory-item {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item-name {
  font-weight: bold;
  color: #2c3e50;
}

.remove-btn {
  background: #ff5722;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.3s ease;
}

.remove-btn:hover {
  background: #d84315;
}

.item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.item-category {
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.8em;
  font-weight: 500;
}

.item-quantity {
  color: #666;
  font-size: 0.9em;
}

.item-quantity.editable {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.item-quantity.editable:hover {
  background: #f0f0f0;
  border-color: #ddd;
  color: #333;
}

/* 數量編輯區域 */
.quantity-edit {
  display: flex;
  align-items: center;
  gap: 4px;
}

.quantity-input {
  padding: 2px 6px;
  border: 1px solid #4caf50;
  border-radius: 4px;
  font-size: 0.9em;
  width: 80px;
  outline: none;
}

.quantity-input:focus {
  border-color: #45a049;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.3);
}

.quantity-edit-buttons {
  display: flex;
  gap: 2px;
}

.save-quantity-btn,
.cancel-quantity-btn {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.save-quantity-btn {
  background: #4caf50;
  color: white;
}

.save-quantity-btn:hover {
  background: #45a049;
}

.cancel-quantity-btn {
  background: #f44336;
  color: white;
}

.cancel-quantity-btn:hover {
  background: #d32f2f;
}

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

.calories {
  color: #ff9800;
  font-size: 0.8em;
  font-weight: 500;
}

.empty-fridge {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-style: italic;
}

.empty-fridge p {
  margin: 0;
  font-size: 1.1em;
}

@media (max-width: 768px) {
  .summary-info {
    flex-direction: column;
    gap: 10px;
  }

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

  .category-summary {
    justify-content: center;
  }
}

/* 熱量資訊面板 */
.calorie-info-panel {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.calorie-info-panel h4 {
  margin: 0 0 12px 0;
  font-size: 1.1em;
}

.calorie-details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.calorie-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
}

.calorie-item .label {
  opacity: 0.9;
}

.calorie-item .value {
  font-weight: bold;
}

.calorie-item .value.over-limit {
  color: #ffeb3b;
}

.calorie-progress {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  height: 8px;
  min-width: 120px;
  flex: 1 1;
}

.progress-bar {
  background: rgba(255, 255, 255, 0.8);
  height: 100%;
  border-radius: 20px;
  transition: width 0.3s ease;
  max-width: 100%;
}

.progress-text {
  position: absolute;
  top: -25px;
  right: 0;
  font-size: 0.8em;
  font-weight: bold;
}

/* 動作按鈕區域 */
.action-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.action-buttons button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.cooking-recommendation-btn {
  background: #ff9800;
  color: white;
}

.cooking-recommendation-btn:hover:not(:disabled) {
  background: #e68900;
  transform: translateY(-1px);
}

.cooking-recommendation-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 添加食材模態框增強 */
.add-method-selection {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.method-btn {
  flex: 1 1;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.9em;
}

.method-btn.traditional {
  border-color: #4caf50;
  color: #4caf50;
}

.method-btn.traditional:hover {
  background: #4caf50;
  color: white;
}

.method-btn.ai {
  border-color: #2196f3;
  color: #2196f3;
}

.method-btn.ai:hover {
  background: #2196f3;
  color: white;
}

/* AI 辨識區域 */
.ai-tip {
  background: #e3f2fd;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
  margin-bottom: 16px;
  font-size: 0.9em;
  line-height: 1.4;
}

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

.ai-analyzing {
  padding: 20px;
  background: #f0f8ff;
  border-radius: 8px;
  margin-bottom: 16px;
}

.pulse-animation {
  font-size: 2em;
  animation: pulse 1.5s infinite;
}

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

.processing-text {
  font-style: italic;
  color: #666;
  margin-top: 8px;
  font-size: 0.9em;
}

/* 料理推薦區域 */
.cooking-recommendation {
  background: #fff8e1;
  border: 2px solid #ffb74d;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.cooking-recommendation-result {
  background: #f1f8e9;
  border: 2px solid #8bc34a;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.recommendation-header h4 {
  margin: 0;
  color: #2c3e50;
}

.close-recommendation-btn {
  background: #ff5722;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
}

.close-recommendation-btn:hover {
  background: #d84315;
  transform: scale(1.1);
}

.recommendation-content {
  background: white;
  padding: 16px;
  border-radius: 8px;
  margin-top: 12px;
}

.recommendation-text {
  line-height: 1.6;
  margin-bottom: 16px;
}

.recommendation-text p {
  margin: 8px 0;
}

.recommendation-actions {
  display: flex;
  justify-content: center;
}

.refresh-recommendation-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.3s ease;
}

.refresh-recommendation-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

/* 響應式設計 */
@media (max-width: 768px) {
  .calorie-details {
    flex-direction: column;
    align-items: stretch;
  }

  .calorie-progress {
    min-width: auto;
    margin-top: 8px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .add-method-selection {
    flex-direction: column;
  }

  .recommendation-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* 常購買食材快速添加樣式 */
.common-foods-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.common-foods-section h5 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.1em;
}

.common-foods-tip {
  color: #666;
  font-size: 0.9em;
  margin: 0 0 15px 0;
  font-style: italic;
}

.common-foods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.common-food-btn {
  background: white;
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 12px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
  min-height: 70px;
  font-size: 0.9em;
}

.common-food-btn:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.common-food-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.food-name {
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

.food-quantity {
  font-size: 0.8em;
  opacity: 0.7;
  text-align: center;
}

/* 常購買食材響應式設計 */
@media (max-width: 768px) {
  .common-foods-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }

  .common-food-btn {
    padding: 10px 6px;
    min-height: 60px;
    font-size: 0.8em;
  }
}

@media (max-width: 480px) {
  .common-foods-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 類別分組樣式 */
.category-section {
  margin-bottom: 25px;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid currentColor;
}

.category-title {
  font-weight: bold;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-count {
  color: #666;
  font-size: 0.9em;
  font-weight: normal;
  background: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .category-count {
    align-self: flex-end;
  }
}

.time-component {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.time-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.current-time {
  text-align: left;
}

.time-value {
  display: block;
  font-size: 2.2em;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}

.time-period {
  display: block;
  font-size: 0.9em;
  opacity: 0.9;
  font-weight: 400;
}

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

.date-main {
  display: block;
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}

.day-of-week {
  display: block;
  font-size: 0.9em;
  opacity: 0.9;
  font-weight: 400;
}

.week-info {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 15px;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.week-number {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 4px;
}

.week-range {
  font-size: 0.85em;
  opacity: 0.9;
}

.greeting {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.4;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .time-display {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .current-time,
  .current-date {
    text-align: center;
  }

  .time-value {
    font-size: 2em;
  }

  .date-main {
    font-size: 1.2em;
  }
}

.health-advice-component {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

.health-advice-component::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(120, 119, 198, 0.3),
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.1),
      transparent 50%
    );
  pointer-events: none;
}

.health-advice-component h3 {
  margin: 0 0 20px 0;
  font-size: 1.3em;
  text-align: center;
  position: relative;
  z-index: 1;
}

.health-advice-component.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.ai-thinking {
  text-align: center;
  z-index: 1;
  position: relative;
}

.loading-animation {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 15px;
}

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

.greeting-section {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.personalized-greeting {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.time-info {
  margin: 0;
  font-size: 0.9em;
  opacity: 0.8;
}

.advices-section {
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.advices-section h4 {
  margin: 0 0 15px 0;
  font-size: 1.1em;
  opacity: 0.9;
}

.advices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.advice-item {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border-radius: 10px;
  padding: 16px;
  border-left: 4px solid;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

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

.advice-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.advice-icon {
  font-size: 1.2em;
}

.advice-title {
  font-weight: 600;
  font-size: 1em;
  color: #333;
}

.advice-content {
  margin: 0 0 10px 0;
  color: #555;
  line-height: 1.4;
}

.suggested-action {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.9em;
  color: #555;
  border-left: 3px solid #4caf50;
}

.suggested-action strong {
  color: #333;
}

.meal-suggestion {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.meal-suggestion h4 {
  margin: 0 0 15px 0;
  font-size: 1.1em;
}

.suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ingredients,
.portions,
.nutrition-goals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
}

.label {
  font-weight: 600;
  min-width: 80px;
  opacity: 0.9;
}

.items {
  flex: 1 1;
  opacity: 0.8;
}

.health-tip {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: relative;
  z-index: 1;
}

.health-tip h4 {
  margin: 0 0 10px 0;
  font-size: 1.1em;
}

.health-tip p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

.refresh-section {
  text-align: center;
  position: relative;
  z-index: 1;
}

.refresh-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.3s;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

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

.priority-high {
  border-left-color: #f44336 !important;
}

.priority-medium {
  border-left-color: #ff9800 !important;
}

.priority-low {
  border-left-color: #4caf50 !important;
}

@media (max-width: 768px) {
  .health-advice-component {
    padding: 15px;
  }

  .greeting-section,
  .meal-suggestion,
  .health-tip {
    padding: 15px;
  }

  .advice-item {
    padding: 12px;
  }

  .ingredients,
  .portions,
  .nutrition-goals {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .label {
    min-width: auto;
  }
}

/* 卡洛里攝取統計組件樣式 */
.calorie-intake-component {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.calorie-intake-component.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #64748b;
  font-style: italic;
}

/* 頭部區域 */
.calorie-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.calorie-icon {
  font-size: 1.5em;
}

.calorie-title h4 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 600;
}

.expand-btn {
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-btn:hover {
  background: #ff5757;
}

/* 主要統計區域 */
.calorie-main-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.calorie-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calorie-circle-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.calorie-value {
  font-size: 24px;
  font-weight: bold;
  color: #0f172a;
  line-height: 1;
}

.calorie-unit {
  font-size: 16px;
  color: #64748b;
  margin-top: 2px;
}

.calorie-progress-ring {
  transform: rotate(-90deg);
}

.calorie-details {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calorie-target {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}

.calorie-remaining {
  font-size: 20px;
  font-weight: bold;
}

.calorie-exercise {
  font-size: 16px;
  color: #64748b;
}

/* 適應性建議區域 */
.adaptive-recommendations {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border-left: 4px solid #ff6b6b;
  border: 1px solid #e2e8f0;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  color: white;
}

.status-badge.超量 {
  background: #ff6b6b;
}

.status-badge.適中 {
  background: #51cf66;
}

.status-badge.不足 {
  background: #ffa726;
}

.recommendation-text {
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.4;
}

.daily-suggestion {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}

/* 每日詳情區域 */
.daily-details {
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.daily-details h5 {
  margin: 0 0 12px 0;
  color: #0f172a;
  font-size: 20px;
}

.daily-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.daily-item {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #e2e8f0;
}

.daily-date {
  font-size: 16px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.daily-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

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

.stat-label {
  font-size: 0.8em;
  color: #666;
}

.stat-value {
  font-size: 0.85em;
  font-weight: 500;
  color: #333;
}

.stat-value.over-limit {
  color: #ff6b6b;
  font-weight: bold;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .calorie-intake-component {
    padding: 16px;
  }

  .calorie-main-stats {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .calorie-details {
    text-align: center;
    width: 100%;
  }

  .daily-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .stat-item {
    padding: 4px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .stat-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .calorie-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .expand-btn {
    align-self: center;
  }

  .calorie-circle {
    transform: scale(0.9);
  }

  .adaptive-recommendations {
    padding: 12px;
  }

  .recommendation-text {
    font-size: 0.9em;
  }
}

/* 營養均衡統計組件樣式 */
.nutrition-balance-component {
  background: linear-gradient(135deg, #f0fff4 0%, #ffffff 100%);
  border: 2px solid #c8e6c9;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
  margin-bottom: 20px;
}

.nutrition-balance-component.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: #666;
  font-style: italic;
}

/* 頭部區域 */
.nutrition-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

.nutrition-icon {
  font-size: 1.5em;
}

.nutrition-title h4 {
  margin: 0;
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
}

.expand-btn {
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.85em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.expand-btn:hover {
  background: #45a049;
  transform: translateY(-1px);
}

/* 主要統計區域 */
.nutrition-main-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.nutrition-score-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.score-circle-inner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.score-value {
  font-size: 1.8em;
  font-weight: bold;
  color: #333;
  line-height: 1;
}

.score-unit {
  font-size: 0.7em;
  color: #666;
  margin-top: 2px;
}

.score-grade {
  font-size: 0.8em;
  color: #666;
  font-weight: 500;
  margin-top: 4px;
}

.score-progress-ring {
  transform: rotate(-90deg);
}

.nutrition-summary {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ✅ 方案三：優先營養素樣式 */
.priority-deficiency {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.priority-deficiency h5 {
  margin: 0 0 12px 0;
  color: #e65100;
  font-size: 1em;
  font-weight: 600;
}

.food-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.food-suggestions strong {
  color: #333;
  font-size: 0.9em;
  margin-right: 4px;
}

.food-tag {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffb74d;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
}

/* ✅ 方案三：無缺乏狀態樣式 */
.no-deficiency {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border: 2px solid #4caf50;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}

.no-deficiency h5 {
  margin: 0 0 8px 0;
  color: #2e7d32;
  font-size: 1em;
  font-weight: 600;
}

.no-deficiency p {
  margin: 0;
  color: #388e3c;
  font-size: 0.9em;
}

/* ✅ 方案三：其他關注營養素樣式 */
.other-concerns {
  background: rgba(245, 245, 245, 0.8);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.other-concerns h5 {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 0.9em;
  font-weight: 600;
}

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

.other-nutrient {
  color: #666;
  font-size: 0.85em;
  line-height: 1.4;
}

.more-nutrients {
  color: #999;
  font-size: 0.8em;
  font-style: italic;
  margin-top: 4px;
}

/* ✅ 方案三：達標營養素簡化顯示 */
.excellent-summary {
  background: rgba(232, 245, 233, 0.6);
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #c8e6c9;
}

.excellent-summary h5 {
  margin: 0 0 6px 0;
  color: #2e7d32;
  font-size: 0.9em;
  font-weight: 600;
}

.excellent-preview {
  color: #388e3c;
  font-size: 0.85em;
  line-height: 1.3;
}

.excellent-nutrients h5,
.deficiency-count h5 {
  margin: 0 0 8px 0;
  font-size: 0.9em;
  color: #333;
}

.excellent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.excellent-tag {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

.no-excellent {
  color: #999;
  font-size: 0.85em;
  margin: 0;
  font-style: italic;
}

.deficiency-count p {
  margin: 0;
  color: #666;
  font-size: 0.9em;
}

/* 營養缺乏區域 */
.deficiencies-section {
  margin-bottom: 20px;
}

.deficiencies-section h5 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 1em;
}

.deficiencies-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deficiency-item {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 12px;
  border-left: 4px solid;
}

.deficiency-item.輕微 {
  border-left-color: #ffa726;
  background-color: #fff8e1;
}

.deficiency-item.中等 {
  border-left-color: #ff9800;
  background-color: #fff3e0;
}

.deficiency-item.嚴重 {
  border-left-color: #f44336;
  background-color: #ffebee;
}

.deficiency-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.nutrient-name {
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.deficiency-level {
  background: rgba(0, 0, 0, 0.1);
  color: #666;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: 500;
}

.deficiency-percentage {
  font-size: 0.85em;
  font-weight: bold;
  color: #666;
}

.deficiency-suggestion {
  font-size: 0.85em;
  color: #555;
  line-height: 1.4;
}

.show-more-hint {
  text-align: center;
  color: #666;
  font-size: 0.85em;
  margin: 12px 0 0 0;
  font-style: italic;
}

/* 每日營養詳情 */
.daily-nutrition-details {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
}

.daily-nutrition-details h5 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 1em;
}

.nutrition-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.nutrition-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}

.nutrition-name {
  min-width: 80px;
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
}

.nutrition-bar {
  flex: 1 1;
  height: 10px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.nutrition-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 5px;
}

.nutrition-value {
  min-width: 100px;
  font-size: 0.8em;
  color: #666;
  text-align: right;
  font-weight: 500;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .nutrition-balance-component {
    padding: 16px;
  }

  .nutrition-main-stats {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .nutrition-summary {
    width: 100%;
    text-align: center;
  }

  /* ✅ 方案三：響應式 - 優先營養素 */
  .priority-deficiency {
    text-align: left;
    padding: 14px;
  }

  .food-suggestions {
    justify-content: flex-start;
    margin-top: 8px;
  }

  .food-tag {
    font-size: 0.75em;
    padding: 3px 10px;
  }

  /* ✅ 方案三：響應式 - 其他關注營養素 */
  .other-concerns {
    text-align: left;
    padding: 10px;
  }

  /* ✅ 方案三：響應式 - 達標營養素 */
  .excellent-summary {
    text-align: left;
    padding: 10px;
  }

  .excellent-list {
    justify-content: center;
  }

  .deficiency-header {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }

  .nutrition-item {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .nutrition-name {
    min-width: auto;
    text-align: left;
  }

  .nutrition-value {
    min-width: auto;
    text-align: left;
    font-size: 0.8em;
  }
}

@media (max-width: 480px) {
  .nutrition-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .expand-btn {
    align-self: center;
  }

  .nutrition-score-circle {
    transform: scale(0.9);
  }

  /* ✅ 方案三：小屏幕 - 優先營養素 */
  .priority-deficiency {
    padding: 12px;
    margin-bottom: 12px;
  }

  .priority-deficiency h5 {
    font-size: 0.95em;
  }

  .food-suggestions {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .food-suggestions strong {
    margin-bottom: 4px;
  }

  .food-tag {
    font-size: 0.7em;
    padding: 2px 8px;
  }

  /* ✅ 方案三：小屏幕 - 其他關注營養素 */
  .other-concerns {
    padding: 8px;
    margin-bottom: 8px;
  }

  .other-concerns h5 {
    font-size: 0.85em;
  }

  .other-nutrient {
    font-size: 0.8em;
  }

  /* ✅ 方案三：小屏幕 - 達標營養素 */
  .excellent-summary {
    padding: 8px;
  }

  .excellent-summary h5 {
    font-size: 0.85em;
  }

  .excellent-preview {
    font-size: 0.8em;
  }

  .deficiencies-section {
    margin-bottom: 16px;
  }

  .deficiency-item {
    padding: 10px;
  }

  .deficiency-suggestion {
    font-size: 0.8em;
  }

  .nutrition-grid {
    gap: 8px;
  }
}

.daily-health-summary {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 100%;
}

/* 標題欄 */
.summary-header {
  background: #3b82f6;
  color: white;
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  -webkit-user-select: none;
          user-select: none;
  min-height: 60px;
}

.summary-header:hover {
  background: #2563eb;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1 1;
  max-width: calc(100% - 40px);
}

.header-content h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  flex-shrink: 0;
}

.quick-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 完全移除所有layer - 直接顯示在藍色背景上 */
.collapsed-info {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  padding: 0;
  border-radius: 0;
  transition: none;
  border: none;
  min-width: auto;
  justify-content: center;
}

.collapsed-info:hover {
  background: none;
}

.collapsed-info .info-icon {
  font-size: 24px;
  flex-shrink: 0;
}

/* 熱量資訊樣式 - 無背景 */
.collapsed-info.calorie-info {
  position: relative;
}

.collapsed-info.calorie-info .info-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.collapsed-info.calorie-info .current-calories {
  font-size: 24px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.collapsed-info.calorie-info .target-calories {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

/* 運動資訊樣式 - 無背景 */
.collapsed-info.exercise-info .info-text {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.collapsed-info.exercise-info .exercise-time {
  font-size: 24px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.collapsed-info.exercise-info .exercise-unit {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

/* 通用文字樣式 */
.collapsed-info .info-text {
  font-size: 24px;
  font-weight: 600;
  color: white;
  white-space: nowrap;
  text-align: center;
}

.collapsed-info .status-indicator {
  font-size: 20px;
  font-weight: bold;
  flex-shrink: 0;
}

/* 移除動畫效果 */

.status-indicators {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-badge {
  font-size: 16px;
  padding: 4px 8px;
  background: transparent;
  border-radius: 12px;
  transition: all 0.2s ease;
  color: white;
}

.health-score {
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: transparent;
  padding: 4px 10px;
  border-radius: 12px;
  margin-left: 8px;
}

/* 更明顯的收折icon */
.collapse-icon {
  font-size: 28px;
  font-weight: bold;
  transition: all 0.3s ease;
  opacity: 0.9;
  padding: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.collapse-icon:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* 內容區域 */
.summary-content {
  padding: 0;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

.advice-section {
  padding: 20px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

/* 今日數據總覽 */
.data-overview {
  padding: 20px;
  background: rgba(248, 250, 252, 0.8);
}

.data-overview h4 {
  margin: 0 0 16px 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.data-item {
  background: white;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.6);
  transition: all 0.2s ease;
}

.data-item:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #3b82f6;
}

.data-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.data-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1;
  min-width: 0;
}

.data-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

.data-value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.05);
  align-self: flex-start;
}

/* 響應式設計 */

/* 手機版 (768px 以下) */
@media (max-width: 768px) {
  .daily-health-summary {
    margin: 0 0 16px 0;
    border-radius: 16px;
  }

  .summary-header {
    padding: 16px;
    min-height: 56px;
  }

  .header-content {
    gap: 12px;
    max-width: calc(100% - 36px);
  }

  .header-content h3 {
    font-size: 16px;
  }

  .collapsed-info {
    padding: 10px 16px;
    gap: 10px;
    min-width: 140px;
    border-radius: 16px;
  }

  .collapsed-info .info-icon {
    font-size: 18px;
  }

  .collapsed-info.calorie-info .current-calories {
    font-size: 16px;
  }

  .collapsed-info.calorie-info .target-calories {
    font-size: 11px;
  }

  .collapsed-info.exercise-info .exercise-time {
    font-size: 16px;
  }

  .collapsed-info.exercise-info .exercise-unit {
    font-size: 11px;
  }

  .collapsed-info .info-text {
    font-size: 13px;
  }

  .collapsed-info .status-indicator {
    font-size: 16px;
  }

  .collapse-icon {
    font-size: 24px;
    width: 36px;
    height: 36px;
    padding: 6px;
  }

  .status-indicators {
    gap: 6px;
  }

  .status-badge {
    font-size: 14px;
    padding: 2px 6px;
  }

  .health-score {
    font-size: 12px;
    padding: 2px 8px;
    margin-left: 6px;
  }

  .advice-section,
  .data-overview {
    padding: 16px;
  }

  .data-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .data-item {
    padding: 12px;
    border-radius: 12px;
  }

  .data-icon {
    font-size: 20px;
  }

  .data-value {
    font-size: 13px;
  }

  .data-status {
    font-size: 10px;
  }
}

/* 小手機版 (480px 以下) */
@media (max-width: 480px) {
  .summary-header {
    padding: 14px;
    min-height: 52px;
  }

  .header-content {
    gap: 8px;
    max-width: calc(100% - 32px);
  }

  .header-content h3 {
    font-size: 15px;
  }

  .collapsed-info {
    padding: 8px 12px;
    gap: 8px;
    min-width: 120px;
    border-radius: 14px;
  }

  .collapsed-info .info-icon {
    font-size: 16px;
  }

  .collapsed-info.calorie-info .current-calories {
    font-size: 14px;
  }

  .collapsed-info.calorie-info .target-calories {
    font-size: 10px;
  }

  .collapsed-info.exercise-info .exercise-time {
    font-size: 14px;
  }

  .collapsed-info.exercise-info .exercise-unit {
    font-size: 10px;
  }

  .collapsed-info .info-text {
    font-size: 12px;
  }

  .collapsed-info .status-indicator {
    font-size: 14px;
  }

  .collapse-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    padding: 4px;
  }

  .status-indicators {
    flex-direction: column;
    gap: 4px;
  }

  .status-badge {
    font-size: 12px;
    padding: 2px 4px;
  }

  .health-score {
    font-size: 11px;
    padding: 2px 6px;
    margin-left: 0;
  }

  .data-item {
    padding: 10px;
  }

  .data-icon {
    font-size: 18px;
  }

  .data-content {
    gap: 2px;
  }

  .data-label {
    font-size: 11px;
  }

  .data-value {
    font-size: 12px;
  }
}

/* 平板版 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .data-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .data-item {
    padding: 18px;
  }
}

/* 桌面版 (1025px 以上) */
@media (min-width: 1025px) {
  .data-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .data-item {
    padding: 20px;
  }

  .data-icon {
    font-size: 28px;
  }
}

.last-week-summary {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

/* 標題區域 */
.summary-header {
  text-align: center;
  margin-bottom: 24px;
}

.summary-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}

.date-range {
  margin: 0;
  color: #64748b;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 整體評分卡片 */
.overall-score-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.score-circle {
  position: relative;
}

.score-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.score-inner {
  background: white;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.score-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.score-text {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.score-info h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
}

.score-level {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* 統計網格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 24px;
}

/* 統計卡片 */
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.stat-icon {
  font-size: 1.25rem;
}

.stat-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 主要指標 */
.primary-metric {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.metric-unit {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

/* 次要指標 */
.secondary-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.metric-row span:first-child {
  color: #64748b;
}

.metric-highlight {
  font-weight: 600;
  color: #1e293b;
}

.metric-percentage {
  font-weight: 600;
}

/* 進度條 */
.progress-bar {
  width: 100%;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 營養詳情 */
.nutrition-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.nutrition-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.nutrition-item span:first-child {
  color: #64748b;
}

.nutrition-item span:last-child {
  font-weight: 600;
  color: #1e293b;
}

/* 行動建議 */
.action-suggestions {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.action-suggestions h4 {
  margin: 0 0 16px 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.suggestion-icon {
  font-size: 1rem;
  margin-top: 2px;
}

.water-suggestion {
  background: rgba(59, 130, 246, 0.1);
  border-left: 4px solid #3b82f6;
}

.exercise-suggestion {
  background: rgba(34, 197, 94, 0.1);
  border-left: 4px solid #22c55e;
}

.nutrition-suggestion {
  background: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
}

.success-suggestion {
  background: rgba(34, 197, 94, 0.1);
  border-left: 4px solid #22c55e;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .last-week-summary {
    padding: 16px;
    margin-bottom: 16px;
  }

  .overall-score-card {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .score-progress {
    width: 80px;
    height: 80px;
  }

  .score-inner {
    width: 60px;
    height: 60px;
  }

  .score-number {
    font-size: 1.5rem;
  }

  .metric-value {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .summary-header h3 {
    font-size: 1.25rem;
  }

  .overall-score-card {
    padding: 16px;
  }

  .suggestion-item {
    padding: 8px;
    font-size: 0.8rem;
  }
}

/* 動畫效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.last-week-summary {
  animation: fadeInUp 0.6s ease-out;
}

.stat-card {
  animation: fadeInUp 0.6s ease-out;
}

.stat-card:nth-child(1) {
  animation-delay: 0.1s;
}
.stat-card:nth-child(2) {
  animation-delay: 0.2s;
}
.stat-card:nth-child(3) {
  animation-delay: 0.3s;
}

/* 深色主題支持 */
@media (prefers-color-scheme: dark) {
  .last-week-summary {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #e2e8f0;
  }

  .summary-header h3,
  .score-inner,
  .stat-card,
  .action-suggestions {
    background: #334155;
    color: #e2e8f0;
  }

  .score-number,
  .metric-value,
  .metric-highlight {
    color: #f1f5f9;
  }

  .date-range,
  .metric-row span:first-child,
  .nutrition-item span:first-child {
    color: #94a3b8;
  }
}

.weekly-stats-panel {
  background-color: #fafafa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.weekly-stats-panel h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.3em;
  text-align: center;
}

.weekly-stats-panel.loading {
  text-align: center;
  color: #666;
  padding: 40px;
}

.week-period {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  margin-bottom: 20px;
}

.overall-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.score-circle {
  width: 100px;
  height: 100px;
  border: 6px solid;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
}

.score-value {
  font-size: 2em;
  font-weight: 700;
  line-height: 1;
}

.score-label {
  font-size: 0.8em;
  opacity: 0.8;
}

.score-description {
  font-size: 1.1em;
  font-weight: 600;
  color: #333;
}

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

.stat-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

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

.stat-card h4 {
  margin: 0 0 15px 0;
  font-size: 1em;
  color: #333;
}

.stat-card.water {
  border-left: 4px solid #2196f3;
}

.stat-card.exercise {
  border-left: 4px solid #9c27b0;
}

.stat-card.nutrition {
  border-left: 4px solid #ff9800;
}

.stat-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.stat-value {
  font-size: 2em;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.stat-unit {
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
}

.stat-details {
  font-size: 0.85em;
  color: #666;
  line-height: 1.4;
}

.stat-details p {
  margin: 4px 0;
}

/* 詳細營養分析樣式 */
.detailed-nutrition-analysis {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.detailed-nutrition-analysis h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1em;
}

.nutrition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.nutrition-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 3px solid #4caf50;
}

.nutrition-item .nutrient-name {
  font-weight: 600;
  color: #333;
  font-size: 0.9em;
}

.nutrition-item .nutrient-value {
  font-size: 1.1em;
  font-weight: 700;
  color: #2196f3;
}

.nutrition-item .nutrient-recommended {
  font-size: 0.8em;
  color: #666;
}

/* AI 智能分析樣式 */
.ai-analysis-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
  text-align: center;
}

.ai-analysis-section h4 {
  margin: 0 0 15px 0;
  color: white;
  font-size: 1.1em;
}

.start-analysis-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

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

.ai-analyzing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pulse-animation {
  font-size: 2em;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

/* 營養缺乏分析樣式 */
.nutrition-deficiencies {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #ff9800;
}

.nutrition-deficiencies h4 {
  margin: 0 0 15px 0;
  color: #e65100;
  font-size: 1em;
}

.deficiency-item {
  background: #fff3e0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  border-left: 3px solid;
}

.deficiency-item.輕微 {
  border-left-color: #ff9800;
  background: #fff3e0;
}

.deficiency-item.中等 {
  border-left-color: #f57c00;
  background: #fff8e1;
}

.deficiency-item.嚴重 {
  border-left-color: #d32f2f;
  background: #ffebee;
}

.deficiency-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.deficiency-header .nutrient-name {
  font-weight: 600;
  color: #333;
  font-size: 1em;
}

.deficiency-level {
  background: rgba(255, 152, 0, 0.1);
  color: #e65100;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 600;
}

.deficiency-details p {
  margin: 0 0 10px 0;
  color: #666;
  font-size: 0.9em;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.suggestion-tag {
  background: #4caf50;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: 500;
}

/* 明日熱量調整建議樣式 */
.calorie-adjustment-suggestion {
  background: linear-gradient(135deg, #42a5f5 0%, #478ed1 100%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  color: white;
}

.calorie-adjustment-suggestion h4 {
  margin: 0 0 15px 0;
  color: white;
  font-size: 1.1em;
}

.adjustment-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  gap: 15px;
  margin-bottom: 15px;
}

.current-target,
.suggested-target {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.current-target .label,
.suggested-target .label {
  display: block;
  font-size: 0.9em;
  opacity: 0.9;
  margin-bottom: 5px;
}

.current-target .value,
.suggested-target .value {
  font-size: 1.3em;
  font-weight: 700;
}

.suggested-target .value.suggested {
  color: #81c784;
}

.adjustment-percentage {
  font-size: 0.9em;
  opacity: 0.8;
  margin-left: 8px;
}

.adjustment-reason {
  background: rgba(255, 255, 255, 0.1);
  padding: 12px;
  border-radius: 8px;
  font-size: 0.9em;
  line-height: 1.4;
}

/* 下一餐建議樣式 */
.next-meal-suggestion {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #8bc34a;
}

.next-meal-suggestion h4 {
  margin: 0 0 15px 0;
  color: #689f38;
  font-size: 1em;
}

.meal-suggestion-content {
  background: #f1f8e9;
  padding: 15px;
  border-radius: 8px;
  line-height: 1.5;
}

.meal-suggestion-content p {
  margin: 8px 0;
  color: #555;
}

.meal-suggestion-content p:first-child {
  margin-top: 0;
}

.meal-suggestion-content p:last-child {
  margin-bottom: 0;
}

.recommendations {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.recommendations h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1em;
}

.recommendations ul {
  margin: 0;
  padding-left: 20px;
}

.recommendations li {
  margin-bottom: 8px;
  color: #555;
  line-height: 1.4;
}

.recommendations li:last-child {
  margin-bottom: 0;
}

/* Markdown 樣式支援 */
.markdown-h4 {
  color: #333;
  font-size: 1.1em;
  font-weight: 600;
  margin: 15px 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #e0e0e0;
}

.markdown-h5 {
  color: #555;
  font-size: 1em;
  font-weight: 600;
  margin: 12px 0 8px 0;
}

.markdown-paragraph {
  color: #666;
  line-height: 1.5;
  margin: 8px 0;
  font-size: 0.9em;
}

.markdown-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0;
  color: #666;
  font-size: 0.9em;
  line-height: 1.4;
}

.markdown-list-item .bullet {
  color: #4caf50;
  font-weight: bold;
  margin-top: 1px;
  flex-shrink: 0;
}

.markdown-bold {
  color: #333;
  font-weight: 600;
}

.markdown-divider {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 15px 0;
}

/* 營養缺乏建議樣式優化 */
.suggestion-item {
  background: rgba(76, 175, 80, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 4px 0;
  border-left: 3px solid #4caf50;
}

.suggestion-item .markdown-paragraph {
  margin: 0;
  color: #555;
}

.suggestion-item .markdown-bold {
  color: #2e7d32;
}

/* 熱量調整原因樣式優化 */
.reason-content {
  margin-top: 8px;
}

.reason-content .markdown-paragraph {
  color: rgba(255, 255, 255, 0.9);
  margin: 6px 0;
}

.reason-content .markdown-bold {
  color: white;
  font-weight: 700;
}

.reason-content .markdown-h5 {
  color: white;
  font-size: 0.95em;
  margin: 10px 0 5px 0;
}

/* 下一餐建議Markdown樣式 */
.meal-suggestion-content .markdown-h4 {
  color: #2e7d32;
  font-size: 1.1em;
  margin: 15px 0 10px 0;
  border-bottom-color: #c8e6c9;
}

.meal-suggestion-content .markdown-h5 {
  color: #388e3c;
  font-size: 1em;
  margin: 12px 0 6px 0;
}

.meal-suggestion-content .markdown-paragraph {
  color: #555;
  margin: 6px 0;
}

.meal-suggestion-content .markdown-list-item {
  color: #555;
  margin: 4px 0;
}

.meal-suggestion-content .markdown-list-item .bullet {
  color: #689f38;
}

.meal-suggestion-content .markdown-bold {
  color: #2e7d32;
  font-weight: 600;
}

.meal-suggestion-content .markdown-divider {
  background: linear-gradient(to right, transparent, #c8e6c9, transparent);
  margin: 12px 0;
}

/* ✅ 新增：行動指引卡片樣式 */
.action-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-top: 4px solid;
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-card h4 {
  margin: 0 0 16px 0;
  font-size: 1em;
  color: #333;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-card.water {
  border-top-color: #2196f3;
}

.action-card.water::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(33, 150, 243, 0.3),
    transparent
  );
}

.action-card.exercise {
  border-top-color: #9c27b0;
}

.action-card.exercise::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(156, 39, 176, 0.3),
    transparent
  );
}

.action-card.nutrition {
  border-top-color: #ff9800;
}

.action-card.nutrition::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 152, 0, 0.3),
    transparent
  );
}

.action-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  min-height: 40px;
  align-items: center;
}

.action-main.completed {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  border-radius: 8px;
  border: 2px solid #4caf50;
}

.action-value {
  font-size: 1.6em;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.action-unit {
  font-size: 0.9em;
  color: #666;
  font-weight: 500;
}

.action-status {
  font-size: 1.2em;
  font-weight: 600;
  color: #2e7d32;
}

.action-encouragement {
  font-size: 0.9em;
  color: #388e3c;
  font-weight: 500;
}

.action-focus {
  font-size: 1.1em;
  font-weight: 600;
  color: #e65100;
  text-align: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border-radius: 20px;
  border: 1px solid #ffcc02;
}

.action-details {
  font-size: 0.85em;
  color: #666;
  line-height: 1.4;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  border-left: 3px solid rgba(0, 0, 0, 0.1);
}

.action-details p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* ✅ 新增：行動指引卡片響應式樣式 */
  .action-card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .action-card h4 {
    font-size: 0.95em;
    margin-bottom: 12px;
  }

  .action-value {
    font-size: 1.4em;
  }

  .action-focus {
    font-size: 1em;
    padding: 6px 10px;
  }

  .action-details {
    font-size: 0.8em;
    padding: 6px 10px;
  }

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

  .adjustment-comparison {
    grid-template-columns: 1fr;
  }

  .overall-score {
    margin-bottom: 20px;
  }

  .score-circle {
    width: 80px;
    height: 80px;
  }

  .score-value {
    font-size: 1.6em;
  }

  .suggestions {
    flex-direction: column;
  }
}

.history-record-component {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(240, 248, 255, 0.95)
  );
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  border: 1px solid rgba(74, 144, 226, 0.2);
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.1);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-header h4 {
  color: #4a90e2;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.expand-btn {
  background: linear-gradient(135deg, #74b9ff, #4a90e2);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.expand-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(74, 144, 226, 0.3);
}

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

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(74, 144, 226, 0.15);
  transition: all 0.3s ease;
}

.history-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
}

.history-item.achieved {
  border-color: rgba(76, 175, 80, 0.3);
  background: linear-gradient(
    135deg,
    rgba(76, 175, 80, 0.05),
    rgba(255, 255, 255, 0.9)
  );
}

.history-item.not-achieved {
  border-color: rgba(255, 152, 0, 0.3);
  background: linear-gradient(
    135deg,
    rgba(255, 152, 0, 0.05),
    rgba(255, 255, 255, 0.9)
  );
}

.history-date {
  min-width: 80px;
  font-size: 13px;
  font-weight: 500;
  color: #666;
}

.history-progress {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.progress-value {
  font-weight: 600;
  color: #333;
}

.progress-target {
  color: #888;
  font-size: 12px;
}

.progress-bar-small {
  height: 6px;
  background-color: rgba(74, 144, 226, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill-small {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.achievement-status {
  font-size: 16px;
  min-width: 20px;
  text-align: center;
}

.no-history {
  text-align: center;
  padding: 20px;
  color: #888;
  font-style: italic;
}

.no-history p {
  margin: 0;
  font-size: 14px;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .history-date {
    min-width: auto;
    width: 100%;
  }

  .history-progress {
    width: 100%;
  }

  .achievement-status {
    align-self: flex-end;
  }
}

/* 健康記錄 App - 簡潔設計 */
.HealthAppDemo_healthApp__UCB7V {
  min-height: 100vh;
  /* 簡化背景 */
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1e293b;
  overflow-x: hidden;

  /* 完全貼合螢幕，移除所有邊距 */
  margin: 0;
  padding: 0;
  width: 100vw;
  position: relative;
}

/* 簡化 Header */
.HealthAppDemo_appHeader__i7O4Z {
  background: #ffffff;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

.HealthAppDemo_headerTop__p1JAs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.HealthAppDemo_appTitle__CCd36 {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.HealthAppDemo_timeInfo__tkCYj {
  text-align: right;
  font-size: 16px;
  color: #64748b;
}

.HealthAppDemo_currentTime__SrOxx {
  font-size: 24px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}

.HealthAppDemo_dateInfo__VdFE- {
  font-size: 16px;
  color: #94a3b8;
  margin: 2px 0 0 0;
}

.HealthAppDemo_subtitle__Yecex {
  font-size: 16px;
  color: #94a3b8;
  text-align: center;
  margin: 0;
}

/* 簡化標籤導航 */
.HealthAppDemo_tabNavigation__3gdP\+ {
  display: flex;
  margin: 0 20px 16px 20px;
  padding: 8px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.HealthAppDemo_tabNavigation__3gdP\+::-webkit-scrollbar {
  display: none;
}

.HealthAppDemo_tabButton__RKfDA {
  flex: 1 1;
  min-width: 60px;
  background: transparent;
  border: none;
  padding: 12px 8px;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  color: #64748b;
}

.HealthAppDemo_tabButton__RKfDA.HealthAppDemo_active__JuWkX {
  background: #3b82f6;
  color: white;
}

.HealthAppDemo_tabIcon__\+QD2H {
  font-size: 18px;
}

.HealthAppDemo_tabLabel__RP\+XS {
  font-size: 16px;
  font-weight: 500;
}

/* 簡化內容區域 */
.HealthAppDemo_tabContent__AW\+-v {
  padding: 0 20px;
  margin-bottom: 100px;
}

/* 簡化總覽頁面 */
.HealthAppDemo_overviewTab__DaxiB {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 健康建議區域 */
.HealthAppDemo_healthAdviceSection__Emrow {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.HealthAppDemo_healthAdviceSection__Emrow h3 {
  color: #2c3e50;
  margin-bottom: 16px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.HealthAppDemo_quickRecords__FBfGM {
  padding: 0;
}

.HealthAppDemo_quickRecords__FBfGM h3 {
  margin: 0 0 16px 0;
  font-size: 24px;
  color: #0f172a;
  font-weight: 600;
  padding: 16px 0;
}

.HealthAppDemo_quickGrid__fCo2K {
  display: grid;
  /* 預設為直排，適合手機螢幕 */
  grid-template-columns: 1fr;
  grid-gap: 16px;
  gap: 16px;
}

/* 簡化週統計預覽 */
.HealthAppDemo_weeklyPreview__HA0OZ {
  padding: 0;
}

.HealthAppDemo_weeklyPreview__HA0OZ h3 {
  margin: 0 0 16px 0;
  font-size: 24px;
  color: #0f172a;
  font-weight: 600;
  padding: 16px 0;
}

.HealthAppDemo_statsPreviewGrid__7\+cFK {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  gap: 16px;
}

/* 移除多餘背景的其他頁面 */
.HealthAppDemo_profileTab__\+PBUS,
.HealthAppDemo_recordsTab__WakkT,
.HealthAppDemo_statsTab__Fs3c-,
.HealthAppDemo_fridgeTab__uiQSW {
  padding: 0;
  margin: 0;
}

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

.HealthAppDemo_nutritionStatsGrid__UdtH2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  gap: 20px;
}

/* 現代化底部資訊 */
.HealthAppDemo_appFooter__voCI2 {
  margin-top: 40px;
  background: #ffffff;
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.HealthAppDemo_appFooter__voCI2.HealthAppDemo_collapsed__r4Ksf {
  padding: 15px 25px;
}

.HealthAppDemo_footerHeader__tm8mt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 5px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.HealthAppDemo_appFooter__voCI2.HealthAppDemo_collapsed__r4Ksf .HealthAppDemo_footerHeader__tm8mt {
  margin-bottom: 0;
  border-bottom: none;
}

.HealthAppDemo_footerTitle__o9Elh {
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
}

.HealthAppDemo_collapseIcon__Wx6ke {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #64748b;
  font-weight: bold;
  font-size: 18px;
}

.HealthAppDemo_collapseIcon__Wx6ke:hover {
  background: #e2e8f0;
  color: #3b82f6;
}

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

.HealthAppDemo_summaryItem__OxNBO {
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  background: #f8f9fa;
}

.HealthAppDemo_summaryLabel__XQ2-G {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
}

.HealthAppDemo_summaryValue__GFdZi {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.HealthAppDemo_calorieInfo__2AYVa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.HealthAppDemo_calorieStatusBadge__OZWP7 {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

.HealthAppDemo_appInfo__lRkuw {
  padding: 12px 20px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.HealthAppDemo_appInfo__lRkuw p {
  margin: 0;
  font-size: 11px;
  color: #888;
}

/* 隱藏元素 */
.HealthAppDemo_hidden__zixFf {
  display: none;
}

/* 專門針對手機設備的強制直排設定 */
@media (max-width: 767px) {
  .HealthAppDemo_quickGrid__fCo2K {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 16px !important;
    gap: 16px !important;
  }
}

/* 專門針對iPhone尺寸的補強設定 */
@media (max-device-width: 428px) {
  .HealthAppDemo_quickGrid__fCo2K {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 16px !important;
    gap: 16px !important;
  }
}

/* 響應式設計 */

/* 小手機 (320px - 375px) - 現代化設計 */
@media (max-width: 480px) {
  .HealthAppDemo_healthApp__UCB7V {
    width: 100vw;
    margin: 0;
    padding: 0;
  }

  .HealthAppDemo_appHeader__i7O4Z {
    padding: 12px 16px;
    margin: 0;
  }

  .HealthAppDemo_headerTop__p1JAs {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .HealthAppDemo_appTitle__CCd36 {
    font-size: 18px;
  }

  .HealthAppDemo_currentTime__SrOxx {
    font-size: 20px;
  }

  .HealthAppDemo_tabNavigation__3gdP\+ {
    margin: 0 16px 12px 16px;
    padding: 6px;
  }

  .HealthAppDemo_tabContent__AW\+-v {
    padding: 0 16px;
  }

  .HealthAppDemo_tabButton__RKfDA {
    padding: 8px 4px;
    min-width: 55px;
  }

  .HealthAppDemo_tabIcon__\+QD2H {
    font-size: 16px;
  }

  .HealthAppDemo_tabLabel__RP\+XS {
    font-size: 10px;
  }

  /* 確保小螢幕上的快速記錄為直排 */
  .HealthAppDemo_quickGrid__fCo2K {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 16px !important;
    gap: 16px !important;
  }

  .HealthAppDemo_quickRecords__FBfGM,
  .HealthAppDemo_weeklyPreview__HA0OZ {
    padding: 0;
  }

  .HealthAppDemo_profileTab__\+PBUS,
  .HealthAppDemo_recordsTab__WakkT,
  .HealthAppDemo_statsTab__Fs3c-,
  .HealthAppDemo_fridgeTab__uiQSW {
    padding: 16px;
    margin: 8px 0;
    border-radius: 16px;
  }

  .HealthAppDemo_recordsGrid__0qrnJ {
    padding: 0;
  }
}

/* 標準手機 (481px - 767px) - 現代化設計 */
@media (min-width: 481px) and (max-width: 767px) {
  .HealthAppDemo_healthApp__UCB7V {
    width: 100vw;
    margin: 0;
    padding: 0;
  }

  .HealthAppDemo_appHeader__i7O4Z {
    padding: 16px 20px;
    margin: 0;
  }

  .HealthAppDemo_appTitle__CCd36 {
    font-size: 20px;
  }

  .HealthAppDemo_currentTime__SrOxx {
    font-size: 22px;
  }

  .HealthAppDemo_tabNavigation__3gdP\+ {
    margin: 0 20px 14px 20px;
    padding: 8px;
  }

  .HealthAppDemo_tabContent__AW\+-v {
    padding: 0 20px;
    margin-bottom: 120px;
  }

  /* 確保標準手機上也是直排 */
  .HealthAppDemo_quickGrid__fCo2K {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-gap: 18px !important;
    gap: 18px !important;
  }

  .HealthAppDemo_statsPreviewGrid__7\+cFK {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .HealthAppDemo_dataSummary__GBjzp {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .HealthAppDemo_quickRecords__FBfGM,
  .HealthAppDemo_weeklyPreview__HA0OZ {
    padding: 0;
  }

  .HealthAppDemo_profileTab__\+PBUS,
  .HealthAppDemo_recordsTab__WakkT,
  .HealthAppDemo_statsTab__Fs3c-,
  .HealthAppDemo_fridgeTab__uiQSW {
    padding: 20px;
    margin: 10px 0;
    border-radius: 18px;
  }

  .HealthAppDemo_recordsGrid__0qrnJ {
    padding: 0;
  }
}

/* 平板直立 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .HealthAppDemo_healthApp__UCB7V {
    max-width: 768px;
    padding: 0 20px;
  }

  .HealthAppDemo_appHeader__i7O4Z {
    padding: 20px 32px;
    margin: 0 0 24px 0;
    border-radius: 24px;
  }

  .HealthAppDemo_appTitle__CCd36 {
    font-size: 24px;
  }

  .HealthAppDemo_currentTime__SrOxx {
    font-size: 28px;
  }

  .HealthAppDemo_dateInfo__VdFE- {
    font-size: 14px;
  }

  .HealthAppDemo_tabNavigation__3gdP\+ {
    margin: 0 0 24px 0;
    padding: 12px;
    border-radius: 20px;
  }

  .HealthAppDemo_tabButton__RKfDA {
    padding: 12px 8px;
    min-width: 80px;
  }

  .HealthAppDemo_tabIcon__\+QD2H {
    font-size: 20px;
  }

  .HealthAppDemo_tabLabel__RP\+XS {
    font-size: 12px;
  }

  .HealthAppDemo_tabContent__AW\+-v {
    padding: 0;
    margin-bottom: 120px;
  }

  .HealthAppDemo_overviewTab__DaxiB {
    gap: 24px;
  }

  .HealthAppDemo_quickRecords__FBfGM,
  .HealthAppDemo_weeklyPreview__HA0OZ,
  .HealthAppDemo_profileTab__\+PBUS,
  .HealthAppDemo_recordsTab__WakkT,
  .HealthAppDemo_statsTab__Fs3c-,
  .HealthAppDemo_fridgeTab__uiQSW {
    padding: 24px;
    border-radius: 20px;
  }

  .HealthAppDemo_quickGrid__fCo2K {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }

  .HealthAppDemo_statsPreviewGrid__7\+cFK {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .HealthAppDemo_nutritionStatsGrid__UdtH2 {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .HealthAppDemo_dataSummary__GBjzp {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 32px;
  }

  .HealthAppDemo_appFooter__voCI2 {
    border-radius: 24px 24px 0 0;
  }
}

/* 平板橫向與小桌機 (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
  .HealthAppDemo_healthApp__UCB7V {
    max-width: 1000px;
    padding: 0 40px;
  }

  .HealthAppDemo_appHeader__i7O4Z {
    padding: 24px 40px;
    margin: 0 0 32px 0;
    border-radius: 28px;
  }

  .HealthAppDemo_headerTop__p1JAs {
    align-items: flex-start;
  }

  .HealthAppDemo_appTitle__CCd36 {
    font-size: 28px;
  }

  .HealthAppDemo_currentTime__SrOxx {
    font-size: 32px;
  }

  .HealthAppDemo_dateInfo__VdFE- {
    font-size: 16px;
  }

  .HealthAppDemo_subtitle__Yecex {
    font-size: 14px;
  }

  .HealthAppDemo_tabNavigation__3gdP\+ {
    margin: 0 0 32px 0;
    padding: 16px;
    border-radius: 24px;
    justify-content: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;
  }

  .HealthAppDemo_tabButton__RKfDA {
    padding: 16px 12px;
    min-width: 100px;
  }

  .HealthAppDemo_tabIcon__\+QD2H {
    font-size: 24px;
  }

  .HealthAppDemo_tabLabel__RP\+XS {
    font-size: 14px;
  }

  .HealthAppDemo_tabContent__AW\+-v {
    padding: 0;
    margin-bottom: 140px;
  }

  .HealthAppDemo_overviewTab__DaxiB {
    gap: 32px;
  }

  .HealthAppDemo_quickRecords__FBfGM,
  .HealthAppDemo_weeklyPreview__HA0OZ,
  .HealthAppDemo_profileTab__\+PBUS,
  .HealthAppDemo_recordsTab__WakkT,
  .HealthAppDemo_statsTab__Fs3c-,
  .HealthAppDemo_fridgeTab__uiQSW {
    padding: 32px;
    border-radius: 24px;
  }

  .HealthAppDemo_quickGrid__fCo2K {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }

  .HealthAppDemo_statsPreviewGrid__7\+cFK {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .HealthAppDemo_nutritionStatsGrid__UdtH2 {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .HealthAppDemo_dataSummary__GBjzp {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 24px 40px;
  }

  /* 底部面板調整 */
  .HealthAppDemo_appFooter__voCI2 {
    border-radius: 28px 28px 0 0;
  }

  .HealthAppDemo_footerTitle__o9Elh {
    font-size: 16px;
  }
}

/* 大桌機 (1200px+) */
@media (min-width: 1200px) {
  .HealthAppDemo_healthApp__UCB7V {
    max-width: 1200px;
    padding: 20px 60px;
  }

  .HealthAppDemo_appHeader__i7O4Z {
    padding: 32px 48px;
    margin: 0 0 40px 0;
    border-radius: 32px;
  }

  .HealthAppDemo_headerTop__p1JAs {
    align-items: center;
  }

  .HealthAppDemo_appTitle__CCd36 {
    font-size: 32px;
  }

  .HealthAppDemo_currentTime__SrOxx {
    font-size: 36px;
  }

  .HealthAppDemo_dateInfo__VdFE- {
    font-size: 18px;
  }

  .HealthAppDemo_subtitle__Yecex {
    font-size: 16px;
  }

  .HealthAppDemo_tabNavigation__3gdP\+ {
    margin: 0 auto 40px auto;
    padding: 20px;
    border-radius: 28px;
    max-width: 700px;
    justify-content: center;
  }

  .HealthAppDemo_tabButton__RKfDA {
    padding: 20px 16px;
    min-width: 120px;
  }

  .HealthAppDemo_tabIcon__\+QD2H {
    font-size: 28px;
  }

  .HealthAppDemo_tabLabel__RP\+XS {
    font-size: 16px;
  }

  .HealthAppDemo_tabContent__AW\+-v {
    padding: 0;
    margin-bottom: 160px;
  }

  .HealthAppDemo_overviewTab__DaxiB {
    gap: 40px;
  }

  .HealthAppDemo_quickRecords__FBfGM,
  .HealthAppDemo_weeklyPreview__HA0OZ,
  .HealthAppDemo_profileTab__\+PBUS,
  .HealthAppDemo_recordsTab__WakkT,
  .HealthAppDemo_statsTab__Fs3c-,
  .HealthAppDemo_fridgeTab__uiQSW {
    padding: 40px;
    border-radius: 28px;
  }

  .HealthAppDemo_quickRecords__FBfGM h3,
  .HealthAppDemo_weeklyPreview__HA0OZ h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .HealthAppDemo_quickGrid__fCo2K {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
  }

  .HealthAppDemo_statsPreviewGrid__7\+cFK {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .HealthAppDemo_nutritionStatsGrid__UdtH2 {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .HealthAppDemo_dataSummary__GBjzp {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 32px 48px;
  }

  .HealthAppDemo_summaryItem__OxNBO {
    padding: 16px;
  }

  .HealthAppDemo_summaryLabel__XQ2-G {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .HealthAppDemo_summaryValue__GFdZi {
    font-size: 16px;
  }

  /* 底部面板調整 */
  .HealthAppDemo_appFooter__voCI2 {
    border-radius: 32px 32px 0 0;
  }

  .HealthAppDemo_footerHeader__tm8mt {
    padding: 16px 48px;
  }

  .HealthAppDemo_footerTitle__o9Elh {
    font-size: 18px;
  }

  .HealthAppDemo_appInfo__lRkuw p {
    font-size: 13px;
  }
}

/* 超大螢幕 (1400px+) */
@media (min-width: 1400px) {
  .HealthAppDemo_quickGrid__fCo2K {
    grid-template-columns: repeat(4, 1fr);
  }

  .HealthAppDemo_statsPreviewGrid__7\+cFK {
    grid-template-columns: repeat(3, 1fr);
  }

  .HealthAppDemo_nutritionStatsGrid__UdtH2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.EmployeeProfileComponent_employeeProfile__PA59C {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 載入狀態 */
.EmployeeProfileComponent_loading__eIdCJ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}

.EmployeeProfileComponent_loadingIcon__LrKq5 {
  font-size: 2em;
  animation: EmployeeProfileComponent_spin__x8\+R2 2s linear infinite;
}

@keyframes EmployeeProfileComponent_spin__x8\+R2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 首次設置界面 */
.EmployeeProfileComponent_setupContainer__bGG1H {
  text-align: center;
}

.EmployeeProfileComponent_welcomeHeader__olO7o {
  margin-bottom: 30px;
}

.EmployeeProfileComponent_welcomeHeader__olO7o h2 {
  margin: 0 0 8px 0;
  color: #2e7d32;
  font-size: 1.8em;
}

.EmployeeProfileComponent_welcomeHeader__olO7o p {
  margin: 0;
  color: #666;
  font-size: 1em;
}

.EmployeeProfileComponent_inputSection__U8mPQ {
  background: white;
  padding: 24px;
  border-radius: 12px;
  border: 2px solid #e8f5e8;
  margin-bottom: 20px;
}

.EmployeeProfileComponent_inputSection__U8mPQ h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1.3em;
}

.EmployeeProfileComponent_inputHint__TYcu8 {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 0.9em;
  line-height: 1.4;
}

.EmployeeProfileComponent_creating__MDWV0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background-color: #fff3e0;
  border-radius: 8px;
  border: 1px solid #ffcc02;
  color: #e65100;
  font-weight: 500;
}

.EmployeeProfileComponent_spinner__BZG6Z {
  animation: EmployeeProfileComponent_pulse__H7O5V 1.5s ease-in-out infinite;
}

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

.EmployeeProfileComponent_userInfo__SJ9D8 {
  padding: 16px;
  background-color: #e3f2fd;
  border-radius: 8px;
  border: 1px solid #64b5f6;
}

.EmployeeProfileComponent_username__A-oAi {
  margin: 0;
  color: #1565c0;
  font-size: 0.9em;
}

/* 已建立資料顯示 */
.EmployeeProfileComponent_profileDisplay__lHeRf {
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid #e8f5e8;
}

.EmployeeProfileComponent_profileHeader__omplO {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.EmployeeProfileComponent_profileHeader__omplO h3 {
  margin: 0;
  color: #2e7d32;
  font-size: 1.3em;
}

.EmployeeProfileComponent_profileStatus__JpJAl {
  background-color: #e8f5e8;
  color: #2e7d32;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.8em;
  font-weight: 600;
  border: 1px solid #81c784;
}

.EmployeeProfileComponent_profileInfo__6h5da {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.EmployeeProfileComponent_infoRow__l1ECi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.EmployeeProfileComponent_label__yub2A {
  font-weight: 600;
  color: #555;
  font-size: 0.9em;
}

.EmployeeProfileComponent_value__gU3md {
  font-weight: 500;
  color: #333;
  font-size: 1em;
}

/* 手機版響應式設計 */
@media (max-width: 767px) {
  .EmployeeProfileComponent_employeeProfile__PA59C {
    padding: 16px;
    margin-bottom: 16px;
  }

  .EmployeeProfileComponent_welcomeHeader__olO7o h2 {
    font-size: 1.5em;
  }

  .EmployeeProfileComponent_inputSection__U8mPQ {
    padding: 20px;
  }

  .EmployeeProfileComponent_inputSection__U8mPQ h3 {
    font-size: 1.2em;
  }

  .EmployeeProfileComponent_profileHeader__omplO {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .EmployeeProfileComponent_profileStatus__JpJAl {
    align-self: flex-end;
  }

  .EmployeeProfileComponent_infoRow__l1ECi {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    text-align: left;
  }

  .EmployeeProfileComponent_label__yub2A {
    font-size: 0.8em;
  }

  .EmployeeProfileComponent_value__gU3md {
    font-size: 1.1em;
  }
}

.AttendanceClockComponent_clockContainer__qSk5D {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* 桌面版本優化 */
@media (min-width: 769px) {
  .AttendanceClockComponent_clockContainer__qSk5D {
    max-width: 700px;
    padding: 40px;
    border-radius: 32px;
  }

  .AttendanceClockComponent_userInfo__s4O7T {
    gap: 16px;
    margin-bottom: 30px;
  }

  .AttendanceClockComponent_userAvatar__sbtZN {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .AttendanceClockComponent_employeeName__IhriJ {
    font-size: 1.3em;
  }

  .AttendanceClockComponent_currentDate__oaSYj {
    font-size: 0.95em;
  }

  .AttendanceClockComponent_timeAndStatus__oMOHV {
    padding: 24px 30px;
    border-radius: 20px;
  }

  .AttendanceClockComponent_timeDisplay__VblEH {
    font-size: 2.4em;
  }

  .AttendanceClockComponent_timeLabel__5WXQa {
    font-size: 0.8em;
  }

  .AttendanceClockComponent_statusIndicator__1IfF1 {
    padding: 12px 16px;
    border-radius: 16px;
  }

  .AttendanceClockComponent_statusText__3hzw5 {
    font-size: 0.9em;
  }

  .AttendanceClockComponent_clockButtons__7tD2b {
    gap: 24px;
    margin-top: 40px;
  }

  .AttendanceClockComponent_clockButton__lUcEh {
    padding: 32px 24px;
    min-height: 140px;
    border-radius: 24px;
  }

  .AttendanceClockComponent_buttonIcon__b8Egc {
    font-size: 2em;
    margin-bottom: 8px;
  }

  .AttendanceClockComponent_buttonTitle__PTPPx {
    font-size: 1.2em;
  }

  .AttendanceClockComponent_buttonSubtitle__aS21Q {
    font-size: 0.85em;
  }
}

/* 整合的頂部區域 */
.AttendanceClockComponent_headerSection__eYXSq {
  margin-bottom: 32px;
}

/* 使用者資訊 - 簡化版 */
.AttendanceClockComponent_userInfo__s4O7T {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.AttendanceClockComponent_userAvatar__sbtZN {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.AttendanceClockComponent_userDetails__e\+mof {
  flex: 1 1;
}

.AttendanceClockComponent_employeeName__IhriJ {
  margin: 0 0 4px 0;
  font-size: 1.1em;
  color: #1a1a1a;
  font-weight: 600;
}

.AttendanceClockComponent_currentDate__oaSYj {
  margin: 0;
  color: #6b7280;
  font-size: 0.85em;
  font-weight: 500;
}

/* 時間和狀態區域 */
.AttendanceClockComponent_timeAndStatus__oMOHV {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.AttendanceClockComponent_currentTime__32MpQ {
  text-align: left;
}

.AttendanceClockComponent_timeDisplay__VblEH {
  margin: 0 0 4px 0;
  font-size: 1.8em;
  color: #1a1a1a;
  font-weight: 700;
  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
  letter-spacing: -0.02em;
}

.AttendanceClockComponent_timeLabel__5WXQa {
  margin: 0;
  font-size: 0.75em;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.AttendanceClockComponent_todayStatus__gvPqr {
  text-align: right;
}

.AttendanceClockComponent_statusIndicator__1IfF1 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.AttendanceClockComponent_statusIcon__3yaTx {
  font-size: 1.1em;
}

.AttendanceClockComponent_statusText__3hzw5 {
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

/* 打卡按鈕區域 */
.AttendanceClockComponent_clockButtons__7tD2b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  gap: 16px;
  margin-bottom: 0;
}

.AttendanceClockComponent_clockButton__lUcEh {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.AttendanceClockComponent_clockButton__lUcEh:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.AttendanceClockComponent_clockButton__lUcEh:active:not(:disabled) {
  transform: translateY(0);
}

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

/* 上班打卡按鈕 */
.AttendanceClockComponent_clockInButton__r18tL {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.AttendanceClockComponent_clockInButton__r18tL:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* 下班打卡按鈕 */
.AttendanceClockComponent_clockOutButton__xda13 {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.AttendanceClockComponent_clockOutButton__xda13:hover:not(:disabled) {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.AttendanceClockComponent_buttonIcon__b8Egc {
  font-size: 1.5em;
  margin-bottom: 4px;
}

.AttendanceClockComponent_buttonText__vg7BD {
  text-align: center;
}

.AttendanceClockComponent_buttonTitle__PTPPx {
  display: block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}

.AttendanceClockComponent_buttonSubtitle__aS21Q {
  display: block;
  font-size: 0.75em;
  opacity: 0.9;
  line-height: 1.2;
}

/* 載入狀態 */
.AttendanceClockComponent_clockingStatus__edhhu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  color: #374151;
  font-weight: 600;
  font-size: 0.9em;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 10;
}

.AttendanceClockComponent_spinner__-2JiD {
  font-size: 1.1em;
  animation: AttendanceClockComponent_spin__9E4Ja 2s linear infinite;
}

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

/* 響應式設計 */
@media (max-width: 640px) {
  .AttendanceClockComponent_clockContainer__qSk5D {
    margin: 16px;
    padding: 20px;
    border-radius: 20px;
  }

  .AttendanceClockComponent_timeAndStatus__oMOHV {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .AttendanceClockComponent_currentTime__32MpQ,
  .AttendanceClockComponent_todayStatus__gvPqr {
    text-align: center;
  }

  .AttendanceClockComponent_statusIndicator__1IfF1 {
    justify-content: center;
  }

  .AttendanceClockComponent_clockButtons__7tD2b {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .AttendanceClockComponent_clockButton__lUcEh {
    min-height: 80px;
    padding: 20px 16px;
  }

  .AttendanceClockComponent_timeDisplay__VblEH {
    font-size: 1.6em;
  }
}

@media (max-width: 480px) {
  .AttendanceClockComponent_clockContainer__qSk5D {
    margin: 12px;
    padding: 16px;
  }

  .AttendanceClockComponent_userAvatar__sbtZN {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .AttendanceClockComponent_employeeName__IhriJ {
    font-size: 1em;
  }

  .AttendanceClockComponent_currentDate__oaSYj {
    font-size: 0.8em;
  }

  .AttendanceClockComponent_timeDisplay__VblEH {
    font-size: 1.4em;
  }

  .AttendanceClockComponent_buttonTitle__PTPPx {
    font-size: 0.9em;
  }

  .AttendanceClockComponent_buttonSubtitle__aS21Q {
    font-size: 0.7em;
  }
}

.AttendanceRecordItem_attendanceItem__goMBr {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  transition: all 0.3s ease;
  position: relative;
}

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

.AttendanceRecordItem_itemHeader__FsIsL {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.AttendanceRecordItem_typeTag__ew3wq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

/* 上班打卡樣式 */
.AttendanceRecordItem_clockIn__6VGkU {
  background: #e8f5e8;
  color: #2e7d32;
  border: 1px solid #81c784;
}

/* 下班打卡樣式 */
.AttendanceRecordItem_clockOut__dTl3Z {
  background: #fff3e0;
  color: #ef6c00;
  border: 1px solid #ffb74d;
}

.AttendanceRecordItem_employeeName__\+elZp {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.AttendanceRecordItem_timeInfo__pN966 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.AttendanceRecordItem_timeDisplay__25b7O {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  font-family: "Monaco", "Menlo", monospace;
}

.AttendanceRecordItem_dateDisplay__QHtWg {
  font-size: 12px;
  color: #666;
}

.AttendanceRecordItem_typeIcon__KHO4K {
  font-size: 1em;
}

.AttendanceRecordItem_locationInfo__vZxNU {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  border-left: 3px solid #007bff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.AttendanceRecordItem_locationIcon__Sfvbo {
  font-size: 16px;
}

.AttendanceRecordItem_notesInfo__5v\+0C {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #fffbf0;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  border-left: 3px solid #ffc107;
  display: flex;
  align-items: center;
  gap: 8px;
}

.AttendanceRecordItem_notesIcon__bx14- {
  font-size: 16px;
}

.AttendanceRecordItem_indexNumber__77T8b {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.1);
  color: #666;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

.AttendanceRecordItem_location__gFjRP {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  border-left: 3px solid #007bff;
}

.AttendanceRecordItem_notes__v1XsC {
  margin: 8px 0;
  padding: 8px 12px;
  background-color: #fffbf0;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  border-left: 3px solid #ffc107;
}

.AttendanceRecordItem_metadata__a\+EJl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 11px;
  color: #999;
}

.AttendanceRecordItem_recordId__CevHJ {
  font-family: "Monaco", "Menlo", monospace;
}

.AttendanceRecordItem_creator__6lE3X {
  font-style: italic;
}

/* 手機版響應式設計 */
@media (max-width: 767px) {
  .AttendanceRecordItem_attendanceItem__goMBr {
    padding: 12px;
    margin-bottom: 8px;
  }

  .AttendanceRecordItem_itemHeader__FsIsL {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .AttendanceRecordItem_timeInfo__pN966 {
    align-items: flex-start;
    width: 100%;
  }

  .AttendanceRecordItem_time__ZFzSD {
    font-size: 18px;
  }

  .AttendanceRecordItem_metadata__a\+EJl {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .AttendanceRecordItem_typeTag__ew3wq {
    font-size: 13px;
    padding: 4px 10px;
  }

  .AttendanceRecordItem_employeeName__\+elZp {
    font-size: 15px;
  }
}

.AttendanceAppDemo_attendanceApp__Wbe1v {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  background: #f8fafc;
  min-height: 100vh;
}

/* 桌面版本優化 */
@media (min-width: 769px) {
  .AttendanceAppDemo_attendanceApp__Wbe1v {
    padding: 60px 40px;
  }

  .AttendanceAppDemo_header__t2xqG {
    padding: 40px;
    margin-bottom: 40px;
  }

  .AttendanceAppDemo_appTitle__Xe0QJ {
    font-size: 2.4em;
  }

  .AttendanceAppDemo_appSubtitle__VGiuh {
    font-size: 1.1em;
  }

  .AttendanceAppDemo_tabNavigation__t\+FBW {
    max-width: 500px;
    margin: 0 auto 40px auto;
  }

  .AttendanceAppDemo_tabButton__jRElS {
    padding: 20px 30px;
    font-size: 1.1em;
  }

  .AttendanceAppDemo_tabContent__INvrT {
    max-width: 800px;
    margin: 0 auto;
  }

  .AttendanceAppDemo_historyTab__Oname {
    padding: 40px;
  }

  .AttendanceAppDemo_historyTitle__H--sV {
    font-size: 2.2em;
  }

  .AttendanceAppDemo_historySubtitle__iwqdM {
    font-size: 1.1em;
  }

  .AttendanceAppDemo_clockTab__wVXsL {
    gap: 40px;
  }

  .AttendanceAppDemo_emptyState__c0VaR {
    padding: 80px 40px;
  }

  .AttendanceAppDemo_goToClockButton__0G5dy {
    padding: 16px 32px;
    font-size: 1.1em;
  }
}

/* 應用程式標題 - 簡化版 */
.AttendanceAppDemo_header__t2xqG {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
}

.AttendanceAppDemo_appTitle__Xe0QJ {
  margin: 0 0 6px 0;
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.AttendanceAppDemo_appSubtitle__VGiuh {
  margin: 0;
  font-size: 0.95em;
  opacity: 0.9;
  font-weight: 500;
}

/* Tab 導航 */
.AttendanceAppDemo_tabNavigation__t\+FBW {
  display: flex;
  background: white;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.AttendanceAppDemo_tabButton__jRElS {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1em;
  font-weight: 500;
  color: #6c757d;
}

.AttendanceAppDemo_tabButton__jRElS:hover {
  background: #f8f9fa;
  color: #495057;
}

.AttendanceAppDemo_tabButton__jRElS.AttendanceAppDemo_active__W\+U7w {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.AttendanceAppDemo_tabIcon__vX75I {
  font-size: 1.2em;
}

.AttendanceAppDemo_tabLabel__BwXzJ {
  font-weight: 600;
}

/* Tab 內容 */
.AttendanceAppDemo_tabContent__INvrT {
  animation: AttendanceAppDemo_fadeIn__W-mlL 0.3s ease-in-out;
}

@keyframes AttendanceAppDemo_fadeIn__W-mlL {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 設定模式 */
.AttendanceAppDemo_setupMode__utayw {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

/* 桌面版設定模式優化 */
@media (min-width: 769px) {
  .AttendanceAppDemo_setupMode__utayw {
    min-height: 50vh;
    padding: 40px;
  }
}

/* 打卡頁面 */
.AttendanceAppDemo_clockTab__wVXsL {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.AttendanceAppDemo_profileSection__DcR4B {
  margin-bottom: 0;
}

.AttendanceAppDemo_clockSection__mKx2K {
  margin-bottom: 0;
}

/* 歷史記錄頁面 */
.AttendanceAppDemo_historyTab__Oname {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.AttendanceAppDemo_historyHeader__kgl\+V {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e9ecef;
}

.AttendanceAppDemo_historyTitle__H--sV {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-size: 1.8em;
  font-weight: 600;
}

.AttendanceAppDemo_historySubtitle__iwqdM {
  margin: 0;
  color: #6c757d;
  font-size: 1em;
}

/* 記錄列表 */
.AttendanceAppDemo_recordsList__3cv\+8 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.AttendanceAppDemo_recordItem__vZBDx {
  animation: AttendanceAppDemo_slideIn__NjmRS 0.3s ease-out;
}

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

/* 空狀態 */
.AttendanceAppDemo_emptyState__c0VaR {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
}

.AttendanceAppDemo_emptyIcon__iLxN3 {
  font-size: 4em;
  margin-bottom: 16px;
  opacity: 0.5;
}

.AttendanceAppDemo_emptyState__c0VaR h3 {
  margin: 0 0 8px 0;
  color: #495057;
  font-size: 1.5em;
}

.AttendanceAppDemo_emptyState__c0VaR p {
  margin: 0 0 24px 0;
  font-size: 1em;
}

.AttendanceAppDemo_goToClockButton__0G5dy {
  padding: 12px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.AttendanceAppDemo_goToClockButton__0G5dy:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 使用者資訊 */
.AttendanceAppDemo_userInfo__8yDyz {
  margin-top: 24px;
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.AttendanceAppDemo_userInfoText__V0r-q {
  margin: 0;
  color: #6c757d;
  font-size: 0.9em;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .AttendanceAppDemo_attendanceApp__Wbe1v {
    padding: 16px;
    margin: 0;
  }

  .AttendanceAppDemo_header__t2xqG {
    padding: 20px;
    margin-bottom: 24px;
  }

  .AttendanceAppDemo_appTitle__Xe0QJ {
    font-size: 1.8em;
  }

  .AttendanceAppDemo_appSubtitle__VGiuh {
    font-size: 1em;
  }

  .AttendanceAppDemo_tabButton__jRElS {
    padding: 14px 16px;
    font-size: 0.9em;
  }

  .AttendanceAppDemo_tabIcon__vX75I {
    font-size: 1.1em;
  }

  .AttendanceAppDemo_historyTab__Oname {
    padding: 20px;
  }

  .AttendanceAppDemo_historyTitle__H--sV {
    font-size: 1.5em;
  }

  .AttendanceAppDemo_clockTab__wVXsL {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .AttendanceAppDemo_attendanceApp__Wbe1v {
    padding: 12px;
  }

  .AttendanceAppDemo_header__t2xqG {
    padding: 16px;
  }

  .AttendanceAppDemo_appTitle__Xe0QJ {
    font-size: 1.6em;
  }

  .AttendanceAppDemo_tabButton__jRElS {
    padding: 12px 14px;
    font-size: 0.85em;
  }

  .AttendanceAppDemo_tabLabel__BwXzJ {
    display: none;
  }

  .AttendanceAppDemo_historyTab__Oname {
    padding: 16px;
  }

  .AttendanceAppDemo_emptyState__c0VaR {
    padding: 40px 16px;
  }

  .AttendanceAppDemo_emptyIcon__iLxN3 {
    font-size: 3em;
  }
}

/* RealtimeChatDemo 模組化樣式 */

/* 主容器 */
.RealtimeChatDemo_demo__LxEQ3 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: #f8f9fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
}

/* 標題區域 */
.RealtimeChatDemo_header__DS5\+i {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  color: white;
}

.RealtimeChatDemo_headerContent__pHR6s {
  flex: 1 1;
  text-align: center;
}

.RealtimeChatDemo_headerActions__OJ0KY {
  flex-shrink: 0;
  margin-left: 24px;
}

.RealtimeChatDemo_header__DS5\+i h1 {
  margin: 0 0 16px 0;
  font-size: 2.8rem;
  font-weight: 700;
}

.RealtimeChatDemo_description__qd\+BR {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.95;
}

.RealtimeChatDemo_docsButton__pPWuz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.RealtimeChatDemo_docsButton__pPWuz:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: white;
  text-decoration: none;
}

/* 控制面板 */
.RealtimeChatDemo_controls__jV2yT {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.RealtimeChatDemo_controlGroup__bsGZh {
  margin-bottom: 32px;
}

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

/* 人格選擇器特殊樣式 */
.RealtimeChatDemo_controlGroup__bsGZh .RealtimeChatDemo_personalitySelector__ct6wv {
  /* 給人格選擇器更多空間 */
  margin: -8px -8px 16px -8px;
  padding: 8px;
}

.RealtimeChatDemo_controlGroup__bsGZh h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 連接控制 */
.RealtimeChatDemo_connectionSection__gRHJW {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.RealtimeChatDemo_connectionStatus__9Dbf9 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
}

.RealtimeChatDemo_connectionStatus__9Dbf9.RealtimeChatDemo_disconnected__5g-TS {
  background: #fff3cd;
  border: 2px solid #ffeaa7;
  color: #856404;
}

.RealtimeChatDemo_connectionStatus__9Dbf9.RealtimeChatDemo_connecting__6qc46 {
  background: #d1ecf1;
  border: 2px solid #74c0fc;
  color: #0c5460;
}

.RealtimeChatDemo_connectionStatus__9Dbf9.RealtimeChatDemo_connected__spaIs {
  background: #d4edda;
  border: 2px solid #c3e6cb;
  color: #155724;
}

.RealtimeChatDemo_connectionStatus__9Dbf9.RealtimeChatDemo_error__VkXKy {
  background: #f8d7da;
  border: 2px solid #f5c6cb;
  color: #721c24;
}

.RealtimeChatDemo_statusIndicator__-HFu3 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.RealtimeChatDemo_statusIndicator__-HFu3.RealtimeChatDemo_disconnected__5g-TS {
  background: #ffc107;
}

.RealtimeChatDemo_statusIndicator__-HFu3.RealtimeChatDemo_connecting__6qc46 {
  background: #17a2b8;
  animation: RealtimeChatDemo_pulse__3Rn0l 1.5s infinite;
}

.RealtimeChatDemo_statusIndicator__-HFu3.RealtimeChatDemo_connected__spaIs {
  background: #28a745;
}

.RealtimeChatDemo_statusIndicator__-HFu3.RealtimeChatDemo_error__VkXKy {
  background: #dc3545;
}

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

.RealtimeChatDemo_connectionButtons__V5QUx {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.RealtimeChatDemo_connectButton__EAe8z {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.RealtimeChatDemo_connectButton__EAe8z.RealtimeChatDemo_connect__ZDy5x {
  background: #28a745;
  color: white;
}

.RealtimeChatDemo_connectButton__EAe8z.RealtimeChatDemo_connect__ZDy5x:hover:not(:disabled) {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(40, 167, 69, 0.3);
}

.RealtimeChatDemo_connectButton__EAe8z.RealtimeChatDemo_disconnect__8rfyx {
  background: #dc3545;
  color: white;
}

.RealtimeChatDemo_connectButton__EAe8z.RealtimeChatDemo_disconnect__8rfyx:hover:not(:disabled) {
  background: #c82333;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(220, 53, 69, 0.3);
}

.RealtimeChatDemo_connectButton__EAe8z:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.RealtimeChatDemo_clearButton__c1Oib {
  background: #6c757d;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.RealtimeChatDemo_clearButton__c1Oib:hover {
  background: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3);
}

/* 設定區域 */
.RealtimeChatDemo_settingsGrid__7SwJF {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

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

.RealtimeChatDemo_settingGroup__ls5TE label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #495057;
}

.RealtimeChatDemo_settingInput__YbMgj,
.RealtimeChatDemo_settingSelect__YqKYh {
  padding: 12px 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  transition: all 0.3s ease;
}

.RealtimeChatDemo_settingInput__YbMgj:focus,
.RealtimeChatDemo_settingSelect__YqKYh:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.RealtimeChatDemo_settingTextarea__0uuFO {
  padding: 16px;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.RealtimeChatDemo_settingTextarea__0uuFO:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 對話區域 */
.RealtimeChatDemo_chatContainer__fKXUl {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 24px;
  gap: 24px;
  margin-bottom: 24px;
}

.RealtimeChatDemo_messagesPanel__GKDLm {
  background: white;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.RealtimeChatDemo_messagesHeader__pGhwN {
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-weight: 600;
  color: #2c3e50;
  font-size: 1.1rem;
}

.RealtimeChatDemo_messagesList__\+2zZL {
  flex: 1 1;
  padding: 24px;
  max-height: 600px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.RealtimeChatDemo_messageHeader__oxIra {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #6c757d;
}

.RealtimeChatDemo_messageType__o2JCC {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.RealtimeChatDemo_messageType__o2JCC.RealtimeChatDemo_user__noFFn {
  background: #e3f2fd;
  color: #1976d2;
}

.RealtimeChatDemo_messageType__o2JCC.RealtimeChatDemo_assistant__sPtd4 {
  background: #e8f5e8;
  color: #388e3c;
}

.RealtimeChatDemo_messageType__o2JCC.RealtimeChatDemo_system__IXgwb {
  background: #fff3e0;
  color: #f57c00;
}

.RealtimeChatDemo_messageContent__M8Esz {
  padding: 16px;
  border-radius: 12px;
  line-height: 1.6;
  font-size: 1rem;
  white-space: pre-wrap;
}

.RealtimeChatDemo_messageContent__M8Esz.RealtimeChatDemo_user__noFFn {
  background: #e3f2fd;
  color: #1565c0;
  margin-left: 20px;
}

.RealtimeChatDemo_messageContent__M8Esz.RealtimeChatDemo_assistant__sPtd4 {
  background: #e8f5e8;
  color: #2e7d2e;
  margin-right: 20px;
}

.RealtimeChatDemo_messageContent__M8Esz.RealtimeChatDemo_system__IXgwb {
  background: #fff3e0;
  color: #ef6c00;
  margin: 0 20px;
  font-size: 0.9rem;
  font-style: italic;
}

/* 狀態面板 */
.RealtimeChatDemo_statusPanel__YHH31 {
  width: 300px;
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
  height: -webkit-fit-content;
  height: fit-content;
}

.RealtimeChatDemo_statusPanel__YHH31 h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.RealtimeChatDemo_statusItem__WvoKZ {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
}

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

.RealtimeChatDemo_statusLabel__cWL2u {
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 4px;
  font-weight: 600;
}

.RealtimeChatDemo_statusValue__0X8vg {
  font-size: 1rem;
  color: #2c3e50;
  font-weight: 500;
}

/* 輸入區域 */
.RealtimeChatDemo_inputSection__OGMAt {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.RealtimeChatDemo_inputSection__OGMAt h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.RealtimeChatDemo_inputForm__ZtIv5 {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.RealtimeChatDemo_messageInput__yVxAf {
  flex: 1 1;
  padding: 16px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-size: 1rem;
  background: white;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.RealtimeChatDemo_messageInput__yVxAf:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.RealtimeChatDemo_sendButton__yl1Hz {
  padding: 16px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.RealtimeChatDemo_sendButton__yl1Hz:hover:not(:disabled) {
  background: #5a67d8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

.RealtimeChatDemo_sendButton__yl1Hz:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 錯誤訊息 */
.RealtimeChatDemo_errorMessage__1mUui {
  background: #f8d7da;
  border: 2px solid #f5c6cb;
  color: #721c24;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-weight: 500;
}

/* 音頻狀態指示器 */
.RealtimeChatDemo_audioIndicator__oj7in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #e8f5e8;
  border: 2px solid #c3e6cb;
  border-radius: 12px;
  color: #155724;
  font-weight: 600;
  font-size: 0.9rem;
}

.RealtimeChatDemo_audioIndicator__oj7in.RealtimeChatDemo_receiving__L16YB {
  animation: RealtimeChatDemo_audioWave__Ie8ns 1.5s ease-in-out infinite;
}

@keyframes RealtimeChatDemo_audioWave__Ie8ns {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 警告文字 */
.RealtimeChatDemo_warningText__fZllY {
  color: #ffa500;
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: block;
  font-style: italic;
}

/* 響應式設計 */
@media (max-width: 1200px) {
  .RealtimeChatDemo_chatContainer__fKXUl {
    grid-template-columns: 1fr;
  }

  .RealtimeChatDemo_statusPanel__YHH31 {
    width: auto;
  }
}

@media (max-width: 768px) {
  .RealtimeChatDemo_demo__LxEQ3 {
    padding: 16px;
  }

  .RealtimeChatDemo_header__DS5\+i {
    padding: 24px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .RealtimeChatDemo_headerContent__pHR6s {
    text-align: center;
  }

  .RealtimeChatDemo_headerActions__OJ0KY {
    margin-left: 0;
  }

  .RealtimeChatDemo_header__DS5\+i h1 {
    font-size: 2.2rem;
  }

  .RealtimeChatDemo_controls__jV2yT {
    padding: 24px;
  }

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

  .RealtimeChatDemo_connectionButtons__V5QUx {
    flex-direction: column;
  }

  .RealtimeChatDemo_inputForm__ZtIv5 {
    flex-direction: column;
    align-items: stretch;
  }

  .RealtimeChatDemo_messagesList__\+2zZL {
    max-height: 400px;
  }
}

@media (max-width: 480px) {
  .RealtimeChatDemo_demo__LxEQ3 {
    padding: 12px;
  }

  .RealtimeChatDemo_header__DS5\+i h1 {
    font-size: 1.8rem;
  }

  .RealtimeChatDemo_controls__jV2yT,
  .RealtimeChatDemo_messagesPanel__GKDLm,
  .RealtimeChatDemo_statusPanel__YHH31,
  .RealtimeChatDemo_inputSection__OGMAt {
    padding: 16px;
  }
}

/* 回應狀態指示器 */
.RealtimeChatDemo_respondingIndicator__XdD9N {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
  border: 2px solid #90caf9;
  border-radius: 12px;
  color: #1565c0;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 16px;
  animation: RealtimeChatDemo_respondingPulse__-FKC7 2s ease-in-out infinite;
}

@keyframes RealtimeChatDemo_respondingPulse__-FKC7 {
  0%,
  100% {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-color: #90caf9;
  }
  50% {
    background: linear-gradient(135deg, #f3e5f5, #e8f5e8);
    border-color: #c3e6cb;
  }
}

/* 進階設定樣式 */
.RealtimeChatDemo_advancedToggle__fSwHs {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.RealtimeChatDemo_toggleButton__oOaQx {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: flex-start;
}

.RealtimeChatDemo_toggleButton__oOaQx:hover:not(:disabled) {
  background: #e9ecef;
  border-color: #adb5bd;
  color: #212529;
}

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

.RealtimeChatDemo_advancedSettings__AjiDM {
  margin-top: 16px;
  padding: 20px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  animation: RealtimeChatDemo_slideIn__-QCwn 0.3s ease-out;
}

@keyframes RealtimeChatDemo_slideIn__-QCwn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.RealtimeChatDemo_settingRange__uFwpC {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #dee2e6;
  outline: none;
  margin: 8px 0;
  -webkit-appearance: none;
  appearance: none;
}

.RealtimeChatDemo_settingRange__uFwpC::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.RealtimeChatDemo_settingRange__uFwpC::-webkit-slider-thumb:hover {
  background: #5a67d8;
  transform: scale(1.1);
}

.RealtimeChatDemo_settingRange__uFwpC::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #667eea;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.RealtimeChatDemo_rangeInfo__fuc7p {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 4px;
}

/* 模態設定 */
.RealtimeChatDemo_modalitySettings__cOjo6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.RealtimeChatDemo_checkboxGroup__qC8gW {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.RealtimeChatDemo_checkboxGroup__qC8gW:hover {
  background-color: #f5f5f5;
}

.RealtimeChatDemo_checkboxGroup__qC8gW input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.RealtimeChatDemo_checkboxGroup__qC8gW span {
  font-size: 14px;
  color: #333;
  -webkit-user-select: none;
          user-select: none;
}

.RealtimeChatDemo_settingHint__NRnTJ {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  padding: 6px 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #007bff;
}

/* 切換開關樣式 */
.RealtimeChatDemo_toggleSwitch__7E0B1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.RealtimeChatDemo_toggleSwitch__7E0B1 input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #007bff;
  cursor: pointer;
}

.RealtimeChatDemo_toggleSwitch__7E0B1 input[type="checkbox"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.RealtimeChatDemo_toggleLabel__bKMXG {
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  transition: color 0.2s ease;
}

.RealtimeChatDemo_toggleLabel__bKMXG:hover {
  color: #007bff;
}

.RealtimeChatDemo_settingHint__NRnTJ {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 4px;
  font-style: italic;
}

/* 即時轉錄對話框 - 漫畫風格 */
.RealtimeChatDemo_realtimeTranscriptBubble__HJ3HH {
  position: relative;
  margin: 16px 20px 20px;
  padding: 0;
  animation: RealtimeChatDemo_bubbleAppear__5R7ME 0.3s ease-out;
}

.RealtimeChatDemo_bubbleContent__DOmFl {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px 20px 20px 4px;
  padding: 16px 20px;
  color: white;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
  border: 3px solid #ffffff;
  position: relative;
  overflow: hidden;
}

.RealtimeChatDemo_bubbleContent__DOmFl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.RealtimeChatDemo_bubbleHeader__LxiLx {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.RealtimeChatDemo_bubbleIcon__LPR1b {
  font-size: 1.1rem;
  animation: RealtimeChatDemo_micPulse__Eiq4z 1.5s infinite;
}

.RealtimeChatDemo_bubbleLabel__tIAD2 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
}

.RealtimeChatDemo_bubbleText__ZuNQg {
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  z-index: 1;
  min-height: 1.4em;
}

.RealtimeChatDemo_bubbleText__ZuNQg::after {
  content: "|";
  animation: RealtimeChatDemo_typingCursor__nsUG0 1s infinite;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 2px;
}

.RealtimeChatDemo_bubbleTail__bp9Yj {
  position: absolute;
  bottom: -8px;
  left: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 0;
  border-color: #667eea transparent transparent transparent;
  filter: drop-shadow(0 3px 6px rgba(102, 126, 234, 0.2));
}

.RealtimeChatDemo_bubbleTail__bp9Yj::after {
  content: "";
  position: absolute;
  top: -15px;
  left: -9px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 9px 0 0;
  border-color: #ffffff transparent transparent transparent;
}

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

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

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

/* 測試頁面專用樣式 */
.RealtimeChatDemo_emptyState__6Tjyt {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 40px 20px;
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  background: #f8f9fa;
}

.RealtimeChatDemo_featureDescription__OZmXl {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  border-radius: 12px;
  border: 1px solid #e1bee7;
}

.RealtimeChatDemo_featureDescription__OZmXl h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 1.2rem;
  font-weight: 600;
}

.RealtimeChatDemo_featureDescription__OZmXl ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.RealtimeChatDemo_featureDescription__OZmXl li {
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border-left: 4px solid #9c27b0;
  font-size: 0.95rem;
  line-height: 1.4;
}

.RealtimeChatDemo_featureDescription__OZmXl li:last-child {
  margin-bottom: 0;
}

.RealtimeChatDemo_featureDescription__OZmXl strong {
  color: #2c3e50;
}