* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

:root {
    font-size: 16px; /* 根字体大小 */
}

body {
    background-color: #f5f5f5;
}
a {
    color: #333;
    text-decoration: none;
}
.wrap {
    position: relative;
    max-width: 640px;
    height: 100vh;
    margin: 0 auto;
    padding: 0 0.5em;
    background: #eaeaea;
}
.wrap header {
    position: relative;
    width: 100%;
    text-align: center;
}
.wrap header .back {
    position: absolute;
    content: '';
    top: 0.7em;
    width: 1em;
    height: 1.5em;
    background: url(./img/icon.png);
    background-position: -7.3em 0em;
    background-size: 1200%;
}
.wrap header h3 {
    padding: .5em 0;
}
.wrap .brand {
    margin-top: 2em;
    text-align: center;
}
.wrap .brand .logo img {
    width: 4em;
}
.wrap .brand .ysbz img {
    width: 5.5em;
    padding: 0.2em 0;
}
.wrap .brand .text {
    color: #333;
}
.wrap .brand h2 {
    padding: 0.2em 0;
    color: #201203;
}
.wrap .days,
.wrap .logout,
.wrap .other-acc {
    text-align: center;
}
.wrap .logout{
    margin: 15em 1em 0;
    padding: 0.5em 0;
    border: 1px solid #201203;
    border-radius: 0.5em;
    color: #333;
}
.wrap .days {
    padding-top: 2em;
    color: #666;
}
.wrap .logon-form {
    margin-top: 2.5em;
}
.wrap .logon-form div {
    margin: 1em 0;
}
.wrap .logon-form .vcode,
.wrap .logon-form .mail {
    position: relative;
    height: 3em;
}
.wrap .logon-form .vcode::before,
.wrap .logon-form .mail::before {
    position: absolute;
    content: '';
    top: 0.8em;
    left: 1em;
    width: 1.5em;
    height: 1.5em;
    background: url(./img/icon.png);
    background-position: -7.3em -1.6em;
    background-size: 850%;
}
.wrap .logon-form .vcode::before {
    background-position: -8.8em -1.6em;
}
.wrap .logon-form .vcode span {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 27%;
    height: 3em;
    line-height: 3em;
    background: #201203;
    color: #fff;
    border-radius: 0.5em;
    text-align: center;
}
.wrap .logon-form button.false,
.wrap .logon-form .vcode span.false {
    background: #ccc;
    color: #fff;
}
.wrap .logon-form .vcode input,
.wrap .logon-form .mail input {
    width: 100%;
    padding-left: 3em;
    height: 100%;
    border-radius: 0.5em;
    border: none;
    font-size: 1em;
}
.wrap .logon-form .vcode input {
    width: 70%;
}
.wrap .logon-form button {
    width: 100%;
    margin-top: .5em;
    padding: 0.5em 0;
    background: #201203;
    color: #fff;
    font-size: 1.2em;
    border-radius: 0.5em;
    border: none;
}
.wrap .readme {
    position: relative;
    margin-top: 1em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    font-size: .9em;
    color: #666;
}
.wrap .readme::before {
    position: absolute;
    content: '';
    top: .2em;
    width: 1.5em;
    height: 1.5em;
    background: url(./img/icon.png);
    background-position: -10.3em -3.5em;
    background-size: 1000%;
}
.wrap .readme.done::before {
    background-position: -11.6em -3.3em;
    background-size: 950%;
}
.wrap .readme span{
    display: inline-block;
    padding-left: 1.8em;
}
.wrap .readme a{
    color: #3f9bf1;
}
.wrap .google {
    position: relative;
    margin-top: 7.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    font-size: 1em;
    color: #333;
}
.wrap .google.other-acc {
    margin-top: 1.5em;
}
.wrap .google::after,
.wrap .google::before {
    position: absolute;
    content: '';
    width: 2em;
    height: 2.5em;
    background: url(./img/icon.png);
    background-position: -2.7em -8.7em;
    background-size: 600%;
}
.wrap .google::before {
    margin-left: -2.3em;
}
.wrap .google::after {
    top: .5em;
    width: 1.5em;
    height: 1.5em;
    background-position: -1.6em -3em;
    background-size: 900%;
}
.wrap .google.other-acc::before {
    background-position: -9.3em -5.8em;
}
.wrap .google span {
    display: inline-block;
}
#t-m-l {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: rgba(128, 128, 128, 0.7);
}
#t-m-l .text{
    padding: 1em 1.5em;
    background: #201203;
    color: #fff;
    border-radius: 0.3em;
}
#t-m-l .box{
    width: 70%;
    background: #fff;
    border-radius: .5em;
    text-align: center;
}
#t-m-l .box h3{
    padding: 1em 0;
}
#t-m-l .box .acc{
    color: #333;
}
#t-m-l .box .days{
    padding-top: 0.5em;
    color: #666;
}
#t-m-l .box .btn{
    display: flex;
}
#t-m-l .box .btn div{
    flex: 1;
    margin: 1em;
    padding: .3em 0;
    border: 1px solid;
    border-radius: .5em;
}
#t-m-l .box .btn div.cancel{
    color: #201203;
    border-color: #201203;
}
#t-m-l .box .btn div.sure{
    background: #201203;
    color: #fff;
    border-color: #201203;
}
#t-m-l.dn,
#send-vcode.dn,
.dn {
    display: none;
}