@charset "utf-8";
* {margin: 0;padding: 0;box-sizing: border-box;}
body {min-height: 100vh;display: flex;background: #ffeeee;font-family:'PingFang SC Medium','microsoft yahei','PingFang Heavy',Verdana,Arial,Helvetica,sans-serif;flex-direction: column;align-items: center;position: relative;-webkit-tap-highlight-color: transparent;tap-highlight-color: transparent;outline: none;}
.vertical-image{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;max-width: 100vh;max-height: 100vw;background-image: url('https://www.87ycd.com/ycaiz/ycapp/ylimages/ycbg.jpg');background-size: cover;background-repeat: no-repeat;background-position: center center;z-index: 0;}
.home-btn-wrapper {position: fixed;top: 20px;left: 20px;z-index: 100;}
.home-btn {width: 41px;height: 41px;border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);text-decoration: none;}
.home-btn i {font-size: 28px;color: #FF69B4;}
.home-btn:hover {background: rgba(255, 255, 255, 1);}		
.main-content {width: 100%;z-index: 1;max-width: 800px;display: flex;flex-direction: column;align-items: center;}
.logo {width: 280px;height: auto;margin-bottom: 28px;}
.content-image {width: 680px;height: 187px;max-width: 87%;object-fit: contain;margin: -20px 0 30px 0;}
.button-btn button{border:none;cursor: pointer;}
.button-btn {display: flex;flex-direction: column;align-items: center;gap: 20px;}
.button-btn button.register {width: 208px;height: 41px;line-height: 28px;text-align: center;background: #fb3c3e;color: #e9ebed;font-size: 1.28rem;border-radius: 1.41rem;display: block;margin: 0;}
.button-btn button i{font-size:1.41rem;margin-right:0.41rem;}
.login-tip {font-size: 0.98rem;color: #FFFFFF;text-align: center;margin: 0;line-height: 1.5;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);}
.login-tip .btn-tutorial {color: #FFEB3B;text-decoration: underline;cursor: pointer;font-weight: bold;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);}
.login-tip .btn-tutorial:active {opacity: 0.6;}
.tutorial-overlay {display: none;position: fixed;z-index: 999;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);justify-content: center;align-items: center;animation: fadeIn 0.3s ease;padding: 20px;}
.tutorial-overlay.active {display: flex;}
.tutorial-box {position: relative;width: auto;height: auto;max-width: 90vw;max-height: 90vh;background: #ffffff;border-radius: 20px;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);animation: scaleIn 0.3s ease;display: flex;flex-direction: column;overflow: visible;padding: 6px;}
.tutorial-close {position: absolute;top: 2px;right: 2px;width: 36px;height: 36px;border-radius: 50%;background: #fb3c3e;color: #fff;border: none;font-size: 20px;cursor: pointer;box-shadow: 0 4px 12px rgba(251, 60, 62, 0.35);transition: transform 0.2s;display: flex;align-items: center;justify-content: center;line-height: 1;z-index: 10;flex-shrink: 0;}
.tutorial-close:hover {transform: scale(1.1);}
.tutorial-close:active {transform: scale(0.9);}
.tutorial-image-wrapper {display: flex;justify-content: center;align-items: center;overflow: hidden;border-radius: 16px;}
.tutorial-image-wrapper img {display: block;max-width: calc(90vw - 12px);max-height: calc(90vh - 12px);width: auto;height: auto;border-radius: 16px;object-fit: contain;}
#mask {display:none;position:fixed;z-index:90;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);}
#weixintoast {display:none;white-space:nowrap;-webkit-transform: translateX(-50%);border-radius: 1.28rem;padding: .6rem .6rem;transform: translateX(-50%);background-color: rgba(0,0,0,.7);color:white;font-size:1rem;position: fixed;z-index: 200;top:50%;left:50%;text-align: center;}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.92) translateY(10px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
@media (orientation: portrait) {
	.main-content {position: absolute;top: 41%;transform: translateY(-41%);}
    .logo {transform: translateY(-28%);}
	.content-image {display: block;}
    .button-btn {margin-top: 68px;}
}
@media (orientation: landscape) {
    .main-content {justify-content: center;height: 100vh;position: relative;}
    .logo {transform: translateY(-15vh);margin-bottom: 8vh;}
    .content-image {display: none;}
    .button-btn {position: absolute;top: calc(50% + 28vh);transform: translateY(-50%);}
    .vertical-image {width: 100%;height: 100%;}
}
@media (max-width: 768px) {
	.content-image {margin-top: -28px;margin-bottom: 18px;}
    .logo {width: 228px;margin-bottom: 20px;}
	.vertical-image {width: 100%;height: 100%;max-width: none;max-height: none;}
}
@media (max-width: 480px) {
    .logo {width: 197px;}
    .button-btn button.register {max-width: 180px;font-size: 1.1rem;height: 38px;line-height: 28px;}
    .login-tip {font-size: 0.87rem;}
    .tutorial-overlay {padding: 12px;}
    .tutorial-box {max-width: 92vw;max-height: 85vh;padding: 4px;border-radius: 16px;}
    .tutorial-close {top: 2px;right: 2px;width: 30px;height: 30px;font-size: 16px;}
    .tutorial-image-wrapper img {max-width: calc(87vw - 8px);max-height: calc(81vh - 8px);border-radius: 12px;}
}
@media (max-height: 600px) and (orientation: landscape) {
    .tutorial-box {max-width: 85vw;max-height: 85vh;padding: 4px;border-radius: 14px;}
    .tutorial-close {top: -12px;right: -12px;width: 30px;height: 30px;font-size: 16px;}
    .tutorial-image-wrapper img {max-width: calc(85vw - 8px);max-height: calc(85vh - 8px);border-radius: 12px;}
}