:root{--hs-green:#1457c8;--hs-blue:#22b8cf;--hs-cream:#fff8ee;--hs-ink:#17233c}body{background:#fff8ee!important;color:#17233c}.lg-card{border-radius:28px!important;border:2px solid #c8ddf8!important;box-shadow:0 8px 0 #dce9fb!important}.hs-head .hs-logo{border-radius:14px}.hs-greet{width:80px!important;height:80px!important}label{display:block;font-weight:700;margin:12px 0}input{display:block;width:100%;border:2px solid #c8d9ee;border-radius:12px;padding:12px;margin-top:6px;font:inherit;color:#17233c;background:white}form p{font-size:14px;line-height:1.6;color:#52627b}form button,#forgot,#settingsButton,dialog button{min-height:44px;border:0;border-radius:12px;background:#1457c8;color:white;font:inherit;font-weight:700;padding:10px 18px;margin:5px;cursor:pointer}button:disabled{opacity:.6}button:focus-visible,input:focus-visible{outline:3px solid #22b8cf;outline-offset:3px}.account-message,[role=status]{color:#92400e;line-height:1.6}dialog{border:2px solid #bfd7f7;border-radius:24px;width:min(520px,calc(100% - 24px));max-height:90vh;padding:24px;color:#17233c}dialog::backdrop{background:#0b2e6380}dialog h2{font-size:24px;font-weight:800}dialog h3{margin-top:20px;font-weight:700}.navbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.navbar a{padding:10px 14px;color:#1457c8}footer.exitbar{text-align:center;padding:20px;color:#52627b}

.bg-gradient-to-br{background-image:linear-gradient(135deg,#e7f5ff,#fff4dc)!important}.text-purple-600,.text-purple-700{color:#1457c8!important}.from-purple-500,.from-purple-600{--tw-gradient-from:#1457c8!important}.to-pink-500,.to-pink-600{--tw-gradient-to:#22b8cf!important}.border-purple-200{border-color:#c9dff7!important}.bg-purple-50{background-color:#f2f6fc!important}
/* 長帳號與分數在手機換行，保留完整帳號。 */
#root h1,#root h2,#root h3{overflow-wrap:anywhere;min-width:0}#root .flex.items-center.justify-center{flex-wrap:wrap}#root .text-3xl{font-size:clamp(22px,5vw,30px)}#root .max-w-2xl{max-width:min(42rem,100%)}

.welcome-header{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.welcome-header h2{max-width:100%}@media(max-width:480px){#root .grid.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}#root .grid.grid-cols-4 button{white-space:nowrap}.welcome-header{flex-direction:column}}

#settingsButton[hidden]{display:none!important}

.identity-avatar{display:inline-block;flex:none;width:74px;height:74px;border-radius:50%;background:#fff url('assets/identity-avatar.png') center/280% auto no-repeat}.identity-eztea{display:inline-block;flex:none;width:82px;height:82px;border-radius:18px;background:#211c47 url('assets/identity-eztea.png') center/190% auto no-repeat}.hs-head{gap:14px}.login-wordmark{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;margin:0 0 18px;border-radius:14px}.lg-card{max-width:520px!important}.hs-title b{font-size:26px!important}

/* Brand-reference illustration atlas. */
img[src*="identity-sprite.svg#art-"]{background-image:url("assets/identity-cute-atlas-v2.png");background-size:300% 300%;background-repeat:no-repeat;}
img[src$="#art-0"]{background-position:0% 0%;}
img[src$="#art-1"]{background-position:50% 0%;}
img[src$="#art-2"]{background-position:100% 0%;}
img[src$="#art-3"]{background-position:0% 50%;}
img[src$="#art-4"]{background-position:50% 50%;}
img[src$="#art-5"]{background-position:100% 50%;}
img[src$="#art-6"]{background-position:0% 100%;}
img[src$="#art-7"]{background-position:50% 100%;}
img[src$="#art-8"]{background-position:100% 100%;}

.login-actions{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;margin-top:14px}.login-actions button{width:100%;margin:0;min-height:48px;padding:10px 8px;font-size:15px;white-space:nowrap}.login-actions #forgot{background:#e6f2ff;color:#1457c8;border:1px solid #bdd6f4}
#loginForm .login-actions button{height:48px!important;min-height:48px!important;margin:0!important;align-self:stretch;padding:10px 8px!important}

.identity-avatar,.identity-eztea{background-image:url("assets/identity-cute-atlas-v2.png");background-size:300% 300%;background-color:transparent;border-radius:0;width:82px;height:82px}.identity-avatar{background-position:0 0}.identity-eztea{background-position:50% 0}.lg-card{border-color:#ffe0a4!important;box-shadow:0 8px 0 #ffe8bf!important}

/* Playful login reward: a gentle invitation, then one celebratory burst. */
.cc-veil .cc-box{border:3px solid #ffda8a;border-radius:30px;background:#fffaf0;box-shadow:0 10px 0 #ffc95850,0 24px 60px #17233c40}
.cc-veil .cc-t{color:#1457c8;font-size:22px}.cc-veil .cc-s{color:#52627b;font-size:15px}
.cc-veil .cc-chest{animation:ccFloat 2.2s ease-in-out infinite;outline-offset:6px}
.cc-treasure-art{display:block;filter:drop-shadow(0 8px 8px #ffbf3540)}
.cc-veil .cc-chest.cc-opened{animation:ccCelebrate .65s ease-out both;cursor:default}
.cc-veil .cc-spark{animation:ccScatter 1.1s ease-out both;z-index:1}.cc-star{color:#ffb421;font-size:28px;text-shadow:0 2px white}
.cc-veil .cc-got{color:#ed861c;animation:ccRewardPop .5s ease-out both}.cc-veil .cc-btn{background:#1457c8}
@keyframes ccFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes ccCelebrate{0%{transform:scale(1)}25%{transform:scale(.88) rotate(-5deg)}55%{transform:scale(1.15) rotate(4deg)}80%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes ccScatter{0%{opacity:0;transform:translate(-50%,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(30deg) scale(1.2)}}
@keyframes ccRewardPop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.cc-veil .cc-chest,.cc-veil .cc-spark,.cc-veil .cc-got{animation:none!important}.cc-veil .cc-spark{display:none}}
/* Keep account settings a quiet utility on the right. */
.navbar{width:100%}
.navbar #settingsButton{margin-left:auto;margin-right:0;min-height:36px;padding:6px 10px;border:1px solid #d6dbe2;border-radius:8px;background:#fffdf8;color:#687384;font-size:13px;font-weight:500;box-shadow:none}
.navbar #settingsButton:hover{background:#f0f2f4;color:#344154}

.login-actions{grid-template-columns:1fr}

#logoutButton[hidden],#logoutStatus[hidden]{display:none!important}.navbar #logoutButton{min-height:36px;padding:6px 10px;border:1px solid #d6dbe2;border-radius:8px;background:#fffdf8;color:#687384;font:500 13px system-ui;cursor:pointer}.navbar #logoutButton:hover{background:#f0f2f4;color:#344154}#logoutStatus{width:100%;color:#92400e;font-size:13px}