@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/ycdimages/ycbg.jpg');background-size: cover;background-repeat: no-repeat;background-position: center center;z-index: 0;}
.home-btn {position: fixed;top: 20px;left: 20px;z-index: 100;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 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 auto;}
.button-btn button i{font-size:1.41rem;margin-right:0.41rem;}
.split-btn-wrapper {display: flex;width: 208px;height: 41px;border-radius: 1.41rem;overflow: hidden;background: #fb3c3e;margin: 20px auto 0;box-shadow: 0 2px 8px rgba(251, 60, 62, 0.25);}
.split-btn-wrapper button {flex: 1;border: none;background: transparent;color: #e9ebed;font-size: 1.28rem;font-family: inherit;cursor: pointer;text-align: center;line-height: 41px;padding: 0 4px;
white-space: nowrap;transition: background 0.15s;position: relative;}
.split-btn-wrapper button:first-child {border-right: 1.5px solid rgba(255, 255, 255, 0.45);border-radius: 1.41rem 0 0 1.41rem;}
.split-btn-wrapper button:last-child {border-radius: 0 1.41rem 1.41rem 0;}
.split-btn-wrapper button:active {background: rgba(0, 0, 0, 0.12);}
.split-btn-wrapper button i {font-size: 1.28rem;margin-right: 4px;}
.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: 520px;height: 620px;max-width: 100%;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: 24px 24px 20px;}
.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-content {display: flex;flex-direction: column;flex: 1;overflow: hidden;margin-top: 4px;min-height: 0;}
.tutorial-text {flex-shrink: 0;padding: 0 4px 16px 4px;border-bottom: 1.5px solid #f0f0f0;margin-bottom: 14px;overflow-y: auto;max-height: 220px;}
.tutorial-text .title {font-size: 1rem;font-weight: bold;color: #444;display: block;margin-bottom: 10px;}
.tutorial-text .step {display: block;font-size: 0.95rem;color: #444;line-height: 1.9;padding-left: 4px;}
.tutorial-image-wrapper {flex: 1;min-height: 0;display: flex;justify-content: center;align-items: center;background: #fafafa;border-radius: 12px;overflow: hidden;}
.tutorial-image-wrapper img {max-width: 100%;max-height: 100%;display: block;border-radius: 8px;object-fit: contain;}
.test{padding:7px; font-size:1rem; line-height:38px;-webkit-user-select: text;user-select: text;}
.test span{color:#F73131;}
.test a{text-decoration: none;font-size:1rem;color:#000000;}
#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;}
.hide { display: none !important; }
@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: 35%;transform: translateY(-38%);}
    .logo {transform: translateY(-28%);}
	.content-image {display: block;margin-top: 28px;}
    .button-btn {margin-top: 41px;}
	.background-image {object-fit: cover;}
	.split-btn-wrapper {margin-top: 20px;}
}
@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% + 10vh);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;}
    .split-btn-wrapper {max-width: 180px;height: 38px;}
    .split-btn-wrapper button {font-size: 1.1rem;line-height: 38px;}
    .split-btn-wrapper button i {font-size: 1.1rem;}
    .tutorial-overlay {padding: 12px;}
    .tutorial-box {width: 87%;height: 68vh;max-height: 90vh;padding: 24px 14px 14px;border-radius: 16px;overflow: visible;}
    .tutorial-close {top: 2px;right: 2px;width: 28px;height: 28px;font-size: 17px;}
    .tutorial-text {padding: 0 2px 12px 2px;margin-bottom: 10px; max-height: 180px;}
    .tutorial-text .title {font-size: 0.97rem;margin-bottom: 8px;}
    .tutorial-text .step {font-size: 0.85rem;line-height: 1.8;}
    .tutorial-image-wrapper {border-radius: 8px;}
}
@media (max-height: 600px) and (orientation: landscape) {
    .tutorial-box {width: 90%;height: 85vh;max-height: 88vh;padding: 14px 18px 12px;border-radius: 14px;overflow: visible;}
    .tutorial-text {padding: 0 2px 8px 2px;margin-bottom: 8px; max-height: 120px;}
	.tutorial-text .title {font-size: 0.877777777777777777rem;margin-bottom: 4px;}
    .tutorial-text .step {font-size: 0.78rem;line-height: 1.6;}
    .tutorial-close {top: 8px;right: 8px;width: 28px;height: 28px;font-size: 15px;}
}
@media (min-width: 768px) and (max-width: 1024px) {
    .tutorial-box {width: 480px;height: 580px;overflow: visible;}
}