/* Pull-to-refresh styles for mobile browsers & WeChat */
@media (max-width: 1024px) {
    html, body {
        overscroll-behavior-y: contain;
    }
}

.ptr-box {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #f7f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    box-sizing: border-box;
    will-change: height;
    overflow-anchor: none;
}

.ptr-box .ptr-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    line-height: 50px;
}

.ptr-box .ptr-icon-wrap {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ptr-box .ptr-arrow {
    width: 17px;
    height: 17px;
    color: #ff6b6b;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
    display: block;
}

.ptr-box.ptr-ready .ptr-arrow {
    transform: rotate(180deg);
}

.ptr-box .ptr-spinner {
    width: 17px;
    height: 17px;
    display: none;
    color: #ff6b6b;
    animation: ptr-spin 0.75s linear infinite;
}

.ptr-box .ptr-spinner-circle {
    stroke-dasharray: 48, 16;
    stroke-linecap: round;
}

.ptr-box .ptr-success {
    width: 17px;
    height: 17px;
    display: none;
    color: #10b981;
}

@keyframes ptr-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ptr-box.ptr-refreshing .ptr-arrow {
    display: none;
}
.ptr-box.ptr-refreshing .ptr-spinner {
    display: block;
}

.ptr-box.ptr-done .ptr-arrow,
.ptr-box.ptr-done .ptr-spinner {
    display: none;
}
.ptr-box.ptr-done .ptr-success {
    display: block;
}

/* Dark mode and Night theme adaptation */
body.dark-theme .ptr-box,
body.night .ptr-box,
.dark-theme .ptr-box,
.night .ptr-box {
    background: #1e232b;
    border-bottom: 1px solid #2c333c;
    color: #b4c2e1;
}

body.dark-theme .ptr-box .ptr-arrow,
body.night .ptr-box .ptr-arrow,
.dark-theme .ptr-box .ptr-arrow,
.night .ptr-box .ptr-arrow {
    color: #ff7875;
}

body.dark-theme .ptr-box .ptr-spinner,
body.night .ptr-box .ptr-spinner,
.dark-theme .ptr-box .ptr-spinner,
.night .ptr-box .ptr-spinner {
    color: #ff7875;
}

body.dark-theme .ptr-box .ptr-success,
body.night .ptr-box .ptr-success,
.dark-theme .ptr-box .ptr-success,
.night .ptr-box .ptr-success {
    color: #34d399;
}