@font-face {
    font-family: wushan;
    src: url(../fonts/wushan.ttf) format('truetype')
}

@font-face {
    font-family: MiSans;
    src: url(../fonts/MiSans-Regular.ttf) format('truetype')
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
    font-family: MiSans, sans-serif;
    text-decoration: none;
    box-sizing: border-box;
    border: none;
    transition: all 0.3s ease;
}

html,
body {
    overflow: hidden;
    user-select: none;
    background-color: white;
    -webkit-user-select: none;
}

img {
    -webkit-user-drag: none;
}

.title-bar {
    -webkit-app-region: drag;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 7.6vh;
    padding: 0 12px;
    color: rgb(24, 24, 24);
    background-color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
}

.title-bar .controls {
    -webkit-app-region: no-drag;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-bar .controls .button {
    border: 0;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.title-bar .controls .button-text {
    padding: 4px 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 2px;
    color: #1d1d1d;
    border-radius: 999px;
    border: 1px solid rgba(32, 122, 226, 0.2);
    background: rgba(32, 122, 226, 0.06);
}

.title-bar .controls #alipay-qrcode:hover {
    color: #ffffff;
    background: #1577ff;
    border-color: #1577ff;
}

.title-bar .controls #wechat-qrcode:hover {
    color: #ffffff;
    background: #29c668;
    border-color: #29c668;
}

.title-bar .controls .button-text:hover .icon {
    background-color: #ffffff!important;
}

.qrcode-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.qrcode-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.qrcode-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(100, 100, 100, 0.5);
    backdrop-filter: blur(2px);
}

.qrcode-modal__panel {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18);
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    max-width: min(84vw, 420px);
}

.qrcode-modal.is-open .qrcode-modal__panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.qrcode-modal__image {
    display: block;
    width: min(80vw, 320px);
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.qrcode-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(32, 122, 226, 0.1);
    color: #207ae2;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#qrcode-modal .qrcode-modal__close {
    background-color: rgb(0 0 0 / 10%);
    color: #ffffff;
}

#alipay-modal .qrcode-modal__close {
    background-color: rgba(32, 122, 226, 0.1);
    color: #207ae2;
}

.qrcode-modal__close:hover {
    background: rgba(32, 122, 226, 0.2);
}

.title-bar .controls .button:hover .icon {
    background-color: #207ae2;
}

.title-bar .controls .icon {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-color: #000
}

.icon-reload {
    -webkit-mask: url("data:image/svg+xml,%3Csvg t='1743803173167' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='9806' width='200' height='200'%3E%3Cpath d='M674.133333 878.933333l-98.133333-102.4c128-17.066667 230.4-123.733333 230.4-251.733333 0-123.733333-93.866667-230.4-217.6-251.733333l-89.6-89.6h38.4c196.266667 0 354.133333 153.6 354.133333 341.333333 0 128-76.8 243.2-183.466666 298.666667v85.333333l-34.133334-29.866667z m-93.866666-17.066666c-12.8 0-29.866667 4.266667-46.933334 4.266666-196.266667 0-354.133333-153.6-354.133333-341.333333 0-128 76.8-243.2 183.466667-298.666667V128l55.466666 55.466667 85.333334 85.333333c-132.266667 12.8-234.666667 123.733333-234.666667 256 0 128 98.133333 234.666667 226.133333 251.733333l85.333334 85.333334z' fill='%23444444' p-id='9807'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg t='1743803173167' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='9806' width='200' height='200'%3E%3Cpath d='M674.133333 878.933333l-98.133333-102.4c128-17.066667 230.4-123.733333 230.4-251.733333 0-123.733333-93.866667-230.4-217.6-251.733333l-89.6-89.6h38.4c196.266667 0 354.133333 153.6 354.133333 341.333333 0 128-76.8 243.2-183.466666 298.666667v85.333333l-34.133334-29.866667z m-93.866666-17.066666c-12.8 0-29.866667 4.266667-46.933334 4.266666-196.266667 0-354.133333-153.6-354.133333-341.333333 0-128 76.8-243.2 183.466667-298.666667V128l55.466666 55.466667 85.333334 85.333333c-132.266667 12.8-234.666667 123.733333-234.666667 256 0 128 98.133333 234.666667 226.133333 251.733333l85.333334 85.333334z' fill='%23444444' p-id='9807'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

.icon-wechat-qrcode {
    width: 18px!important;
    height: 18px!important;
    background-color: #3a3a3a!important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg t='1771546186817' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='10201' width='200' height='200'%3E%3Cpath d='M597.333333 597.333333h85.333334v-85.333333h85.333333v128h-85.333333v42.666667h-85.333334v-42.666667h-85.333333v-128h85.333333v85.333333z m-384-85.333333h256v256H213.333333v-256z m85.333334 85.333333v85.333334h85.333333v-85.333334H298.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m85.333334 85.333334v85.333333h85.333333V298.666667H298.666667z m213.333333-85.333334h256v256h-256V213.333333z m85.333333 85.333334v85.333333h85.333334V298.666667h-85.333334z m85.333334 384h85.333333v85.333333h-85.333333v-85.333333z m-170.666667 0h85.333333v85.333333h-85.333333v-85.333333z' fill='%23444444' p-id='10202'%3E%3C/path%3E%3C/svg%3E");
    mask: url("data:image/svg+xml,%3Csvg t='1771546186817' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='10201' width='200' height='200'%3E%3Cpath d='M597.333333 597.333333h85.333334v-85.333333h85.333333v128h-85.333333v42.666667h-85.333334v-42.666667h-85.333333v-128h85.333333v85.333333z m-384-85.333333h256v256H213.333333v-256z m85.333334 85.333333v85.333334h85.333333v-85.333334H298.666667zM213.333333 213.333333h256v256H213.333333V213.333333z m85.333334 85.333334v85.333333h85.333333V298.666667H298.666667z m213.333333-85.333334h256v256h-256V213.333333z m85.333333 85.333334v85.333333h85.333334V298.666667h-85.333334z m85.333334 384h85.333333v85.333333h-85.333333v-85.333333z m-170.666667 0h85.333333v85.333333h-85.333333v-85.333333z' fill='%23444444' p-id='10202'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}