.app-container{min-height:100vh;background-color:var(--background-color, #f5f5f5)}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.loading-spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #40a9ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.loading-text{color:#666;font-size:16px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--primary-color: #1989fa;--success-color: #52c41a;--warning-color: #faad14;--error-color: #f5222d;--text-color: #323233;--text-color-secondary: #646566;--border-color: #ebedf0;--background-color: #f5f5f5;--white: #ffffff;--border-radius: 8px;--box-shadow: 0 2px 8px rgba(0, 0, 0, .1);--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px}*{margin:0;padding:0;box-sizing:border-box}html,body{font-size:var(--font-size-sm);color:var(--text-color);background-color:var(--background-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;overflow-x:visible;width:100%;max-width:none}html.hide-scrollbar,html.hide-scrollbar body{-ms-overflow-style:none;scrollbar-width:none}html.hide-scrollbar::-webkit-scrollbar,html.hide-scrollbar body::-webkit-scrollbar{display:none}.page{min-height:100vh;padding-bottom:60px}.page-header{background-color:var(--primary-color);color:var(--white);padding:15px;text-align:center;font-size:18px;font-weight:500;position:relative}.page-header .back-btn{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--white)}.btn{display:inline-block;padding:10px 20px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:var(--border-radius);font-size:16px;cursor:pointer;text-align:center;transition:background-color .3s}.btn:active{opacity:.8}.btn-primary{background-color:#d2f2ff;color:#333}.btn-primary:hover{background-color:#b8e6ff}.btn-success{background-color:var(--success-color)}.btn-error{background-color:var(--error-color)}.btn-block{display:block;width:100%}.card{background-color:var(--white);border-radius:var(--border-radius);padding:15px;margin-bottom:10px;box-shadow:var(--box-shadow)}.input{width:100%;padding:12px 16px;border:2px solid #D2F2FF;border-radius:8px;font-size:var(--font-size-base);outline:none;transition:all .3s ease;background-color:#d2f2ff!important;color:#333;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #D2F2FF inset!important;-webkit-text-fill-color:#333!important;background-color:#d2f2ff!important}.input:focus{border-color:#b8e6ff;background-color:#b8e6ff!important;box-shadow:0 0 0 3px #d2f2ff4d}.input:hover{border-color:#b8e6ff;background-color:#b8e6ff!important}.mahjong-card{width:60px;height:80px;margin:0;border-radius:4px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.mahjong-card img{width:100%;height:100%;object-fit:cover}.mahjong-card.selected{border:2px solid var(--primary-color)}.mahjong-card.correct{border:2px solid var(--success-color)}.mahjong-card.incorrect{border:2px solid var(--error-color)}.loading{display:inline-block;width:20px;height:20px}@media(max-width:768px){html,body{font-size:14px}.page-header{padding:12px 15px;font-size:16px}.btn{padding:12px 20px;font-size:16px}.card{padding:12px;margin-bottom:8px}.input{padding:12px 16px;font-size:var(--font-size-base)}}.el-message{max-width:90vw!important;word-break:break-word;text-align:center}.el-message--error{background-color:#fff2f0!important;border-color:#ffccc7!important;color:#a8071a!important}.el-message--success{background-color:#f6ffed!important;border-color:#b7eb8f!important;color:#389e0d!important}.el-message-box__btns{display:flex!important;justify-content:flex-end!important;gap:10px!important}.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#000000b3;color:var(--white);padding:10px 20px;border-radius:4px;z-index:9999}.bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:600px;margin:0 auto;background-color:#d2f2ff;display:flex;justify-content:space-around;padding:10px 0;border-top:1px solid var(--border-color);z-index:100}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;color:var(--text-color-secondary);cursor:pointer;transition:color .3s}.bottom-nav-item:hover,.bottom-nav-item.active{color:var(--primary-color)}.bottom-nav-icon{font-size:20px;margin-bottom:4px}.bottom-nav-text{font-size:12px}@media(max-width:768px){html,body{font-size:var(--font-size-xs)}.page-header{padding:12px;font-size:var(--font-size-lg)}.btn{padding:8px 16px;font-size:var(--font-size-sm)}.input{padding:10px 14px;font-size:var(--font-size-sm)}.card{padding:12px;margin-bottom:8px}.mahjong-card{width:14px;height:25px}.bottom-nav-icon{font-size:18px}.bottom-nav-text{font-size:10px}}@media(max-width:480px){.page-header{padding:10px;font-size:var(--font-size-base)}.btn{padding:6px 12px;font-size:var(--font-size-xs)}.input{padding:8px 12px;font-size:var(--font-size-xs)}.card{padding:10px}.mahjong-card{width:12px;height:22px}.bottom-nav{padding:8px 0}.bottom-nav-icon{font-size:16px}}