:root {
    --primaryMainColor: #4285f4;
    --primaryDarkColor: #1a73e8;
    --primaryGrayColor: #e6e6e6;
    --primaryLightColor: #e8f0fe;
}
#app-header {
    position: relative;
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 50%, #1557b0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    min-width: 1080px;
    padding: 0 30px;
    box-shadow: 0 2px 10px rgba(66, 133, 244, 0.2);
}
a {
    text-decoration: none;
    -webkit-backface-visibility: hidden;
    color: #4285f4;
    transition: all 0.3s ease;
}

a:hover {
    color: #1a73e8;
    transform: translateY(-1px);
}

a:active {
    transform: translateY(0);
}

/* Header 链接样式 */
.login-info a,
.header a {
    color: white;
    transition: all 0.3s ease;
}

.login-info a:hover,
.header a:hover {
    color: #e8f0fe;
    transform: translateY(-1px);
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 导航菜单链接动效 */
.text-hover {
    transition: all 0.3s ease;
}

.text-hover:hover {
    color: #e8f0fe !important;
    transform: translateY(-2px);
    text-shadow: 0 2px 8px rgba(255,255,255,0.3);
}

/* 普通链接悬停动效 */
.text-primary {
    color: #4285f4 !important;
    transition: all 0.3s ease;
}

.text-primary:hover {
    color: #1a73e8 !important;
    transform: translateY(-1px);
}

/* Footer 链接样式 */
.footer a {
    color: #666;
    font-size: 14px;
    transition: all 0.3s ease;
}

.footer a:hover {
    color: #4285f4;
    text-decoration: underline;
    transform: translateY(-1px);
}

/* 按钮类链接样式 */
.big-btn {
    font-size: 16px;
    background: linear-gradient(45deg, #4285f4, #1a73e8);
    color: #fff;
    padding: 6px 14px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.big-btn:hover {
    background: linear-gradient(45deg, #1a73e8, #1557b0);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.big-btn:active {
    transform: translateY(0);
}

/* 状态按钮样式更新 */
.seperate-status-play {
    border-color: #4285f4;
    background-color: #e8f0fe;
    color: #4285f4;
    transition: all 0.3s ease;
}

.seperate-status-play:hover {
    background-color: #4285f4;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.seperate-status-living {
    background: linear-gradient(45deg, #4285f4, #1a73e8);
    border-color: #4285f4;
    color: #fff;
    transition: all 0.3s ease;
}

.seperate-status-living:hover {
    background: linear-gradient(45deg, #1a73e8, #1557b0);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

[v-cloak] {
  display: none;
}
.padding-small {padding: 8px 0;}
.padding-middle {padding: 14px 0;}
.padding-big {padding: 18px 0;}
.mb-small {margin-bottom: 10px;}
.mb-middle {margin-bottom: 20px;}
.mb-big {margin-bottom: 30px;}
.pointer {cursor: pointer;}
.text-one { white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
.text-two { text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}
.text-666 {color: #666;}
.text-999 {color: #999;}
.text-light-grey {color: #a7a7a7;}
.font-16 {font-size: 16px;}
.font-18 {font-size: 18px;}
.font-20 {font-size: 20px;}
.font-bold {font-weight: bold;}
img {width: 100%; height: auto;}
.relative {position: relative;}
.absolute {position: absolute;}
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
}
::-webkit-input-placeholder { /* WebKit browsers */
  color: #b2b2b2;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #b2b2b2;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #b2b2b2;
}
.seperate-status {
    font-size: 20px;
    border-radius: 28px;
    justify-content: center;
    padding: 4px 14px;
    border-style: solid;
    border-width: 1px;
}

.spinner {
    height: 16px;
    font-size: 10px;
    align-items: flex-end;
}
.spinner>div {
    background-color: #ffffff;
    height: 100%;
    width: 2px;
    margin-right: 2px;
     display: inline-block;
    -webkit-animation: stretchdelay 1.9s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect1 {
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.0s;
}
.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}
.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@keyframes stretchdelay {
    5% {
        height: 100%;
    }
    10% {
        height: 10%;
    }
    15% {
        height: 30%;
    }
    32% {
        height: 70%;
    }
    36% {
        height: 30%;
    }
    48% {
        height: 40%;
    }
    60% {
        height: 5%;
    }
    80% {
        height: 30%;
    }
    88% {
        height: 60%;
    }
    100% {
        height: 90%;
    }
}
.prev-act {background-image: url('/index/images/prev.png');background-repeat: no-repeat; background-position: left; padding-left: 14px;}
.next-act {background-image: url('/index/images/next.png');background-repeat: no-repeat; background-position: right; padding-right: 14px;}
.btn-disable {background-color: #ccc!important;}
.login-info .top-item:not(:last-child) {margin-right: 14px;}
.login-info .user-avatar {width: 30px;height: 30px; margin-right: 10px;}
.login-info .user-avatar img {width: 100%;height: 100%; border-radius: 50%;}
.bg-img {
    background-color: #ffffff;
}
.flex-column {flex-direction: column;}
.flex-between {justify-content: space-between;}
.flex-center {align-items: center; align-content: center;}
#app {}
.logo {width: 120px;}
.wrapper {width: 88vw; margin: 0 auto;min-width: 1080px;padding: 0 30px}
.download,.index {min-height: 90vh;background-color: #ffffff;}
.header {height: 10vh; min-height: 120px;}
.login-info {align-items: center;}
.login-box {
    border-radius: 6px;
    box-shadow: 0px 0px 5px 1px #999;
    padding: 40px 30px;
    position: fixed;
    top: 24vh;
    right: 16vw;
    background-color: #fff;
    width: 300px;
    font-size: 14px;
}
.login-box .qrcode-item {width: 120px; height: 120px;}
.login-box .header-title {font-size: 20px; padding: 6px 0;}
.simple-form .simple-form-item:not(:last-child) {margin-bottom: 10px;}
.simple-form .simple-form-item input,.simple-form .simple-form-item button {width: 100%;}
.simple-form .simple-form-item input {background-color: #f2f2f2; border-radius: 26px; padding: 6px 20px; height: 40px;}
.simple-form .simple-form-item .obtain-sms-code {right: 10px;bottom: 8px;}
.check-circle {border: 2px solid #b2b2b2;border-radius: 50%;padding: 3px;margin-right: 6px;margin-top: 4px;}
.check-circle-checked  {border-color: #4285f4;}
.checked {width: 8px;height: 8px; border-radius: 50%;}
.check-circle-checked .checked { background-color: #4285f4 }
.footer {
    padding: 20px 0;
    align-items: center;
    width: 100%;
    position: fixed;
    bottom: 0;
    color: #666;
    font-size: 14px;
    background-color: #fff;
}
.footer .link:not(:last-child) {margin-right: 8px;}

/* 状态按钮等待样式 */
.seperate-status-waiting {
    border-color: #90caf9;
    background-color: #90caf9;
    color: #fff;
    transition: all 0.3s ease;
}

.seperate-status-waiting:hover {
    background-color: #64b5f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(144, 202, 249, 0.3);
}

/** element-ui style reset */