:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    width: 100%;
    background: #FFFFFF;
    color-scheme: light only;
}
body {
    width: 100%;
    position: static !important;
    height: auto !important;
    min-height: var(--app-height, 100vh);
    min-height: 100svh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, video, canvas, svg, iframe {
    max-width: 100%;
}
img, video {
    display: block;
}
video {
    background: #FFFFFF;
}
button, input, textarea, select {
    font: inherit;
    min-width: 0;
}
a, button {
    touch-action: manipulation;
}
.product-img,
.modal-product-img,
.goods-img,
.img-preview-wrap,
.media-preview,
.preview-img {
    overflow: hidden;
}
.product-img img,
.product-img video,
.product-bg-media,
.modal-product-img img,
.modal-product-img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.media-viewer img,
.media-viewer video {
    width: auto;
    height: auto;
    max-width: min(100%, 1200px);
    max-height: calc(100svh - 40px);
    object-fit: contain;
}
.img-preview-wrap img,
.img-preview-wrap video,
.media-preview,
.preview-img {
    width: auto;
    height: auto;
    object-fit: contain;
}
#loginView,
#registerView,
#homeView {
    min-height: var(--app-height, 100vh);
    min-height: 100svh;
}
body:has(#homeView),
body:has(#loginView),
body:has(#registerView) {
    position: static !important;
    height: auto !important;
    min-height: 100svh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.view {
    min-height: var(--app-height, 100vh);
    min-height: 100svh;
    height: auto !important;
}
#loginView,
#registerView {
    padding: max(16px, var(--safe-top)) max(16px, var(--safe-right)) max(16px, var(--safe-bottom)) max(16px, var(--safe-left));
}
#homeView {
    height: auto !important;
    min-height: var(--app-height, 100vh);
    min-height: 100svh;
    overflow-y: visible !important;
    padding-top: max(16px, var(--safe-top));
    padding-bottom: max(24px, var(--safe-bottom));
}
.goods-form-card,
.notice-float,
.modal {
    max-width: calc(100vw - 24px);
}
.goods-container,
.main {
    width: 100%;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.goods-container {
    overflow: visible !important;
}
.goods-grid,
.products-grid,
.skeleton-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}
.goods-item,
.product-card {
    min-width: 0;
}
.goods-info,
.product-body,
.modal-product-info {
    min-width: 0;
}
.header-top,
.balance-info,
.goods-header,
.modal-header,
.info-row {
    min-width: 0;
}
@supports not (aspect-ratio: 1 / 1) {
    .product-img::before,
    .skeleton-img::before {
        content: '';
        display: block;
        padding-top: 100%;
    }
    .product-img > *,
    .skeleton-img > * {
        position: absolute;
        inset: 0;
    }
}
@media (hover: none) {
    .product-card:hover,
    .goods-item:hover {
        transform: none;
    }
}
@media (max-width: 720px) {
    body {
        background-attachment: scroll !important;
    }
    .header {
        padding-left: 14px;
        padding-right: 14px;
    }
    .main,
    .goods-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .balance-info {
        justify-content: flex-start;
    }
    .goods-form-card {
        max-height: calc(100svh - 24px);
    }
}
@media (max-width: 520px) {
    .header-top {
        align-items: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }
    .header-links {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .goods-grid {
        grid-template-columns: 1fr !important;
    }
    .products-grid,
    .skeleton-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .product-body {
        padding: 10px;
    }
    .product-name {
        font-size: 13px;
    }
    .product-price {
        font-size: 16px;
    }
    .modal-header,
    .info-row {
        align-items: flex-start;
    }
    .info-row {
        flex-direction: column;
        gap: 5px;
    }
    .info-label {
        min-width: 0 !important;
    }
    .result-top,
    .card-body,
    .modal-body,
    .actions,
    .result-actions {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .info-list,
    .copy-area {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}
@media (max-width: 360px) {
    .products-grid,
    .skeleton-grid {
        grid-template-columns: 1fr !important;
    }
    .captcha-wrapper,
    .goods-form-card .form-actions,
    .withdraw-options {
        flex-direction: column;
        align-items: stretch;
    }
    .captcha-img {
        width: 100% !important;
        height: 44px !important;
    }
    .goods-actions button,
    .withdraw-options button,
    .balance-info button {
        width: 100%;
    }
}
@media (min-width: 1024px) {
    .products-grid,
    .skeleton-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    }
    .goods-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }
}

.silent-bg-video,
.product-img video,
.modal-product-img video {
    pointer-events: none !important;
    -webkit-user-select: none;
    user-select: none;
}
.silent-bg-video::-webkit-media-controls,
.silent-bg-video::-webkit-media-controls-panel,
.silent-bg-video::-webkit-media-controls-play-button,
.silent-bg-video::-webkit-media-controls-start-playback-button,
.product-bg-media::-webkit-media-controls,
.product-bg-media::-webkit-media-controls-panel,
.product-bg-media::-webkit-media-controls-play-button,
.product-bg-media::-webkit-media-controls-start-playback-button,
.product-img video::-webkit-media-controls,
.product-img video::-webkit-media-controls-panel,
.product-img video::-webkit-media-controls-play-button,
.product-img video::-webkit-media-controls-start-playback-button,
.modal-product-img video::-webkit-media-controls,
.modal-product-img video::-webkit-media-controls-panel,
.modal-product-img video::-webkit-media-controls-play-button,
.modal-product-img video::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0 !important;
    -webkit-appearance: none !important;
}
.balance-info {
    justify-content: space-around !important;
    align-items: center !important;
}
.balance-info > div {
    flex: 0 1 auto;
    white-space: nowrap;
}
.balance-info > div:last-child,
.withdraw-options,
.goods-actions {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    flex-wrap: wrap;
}
.withdraw-options.hidden {
    display: none !important;
}
.goods-actions button,
.withdraw-options button,
.balance-info button {
    width: auto !important;
    flex: 0 0 auto;
}
@media (max-width: 520px) {
    #registerView {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: max(10px, var(--safe-top)) 12px max(12px, var(--safe-bottom)) !important;
    }
    #registerView .card {
        width: 100%;
        max-width: none;
        min-height: calc(var(--app-height, 100vh) - 22px);
        border-radius: 0;
        padding: 18px 16px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #registerView h2 {
        font-size: 20px;
        margin-bottom: 14px;
    }
    #registerView .input-group {
        margin-bottom: 10px;
    }
    #registerView label {
        font-size: 12px;
        margin-bottom: 5px;
    }
    #registerView input,
    #registerView .file-input,
    #registerView select,
    #registerView textarea {
        padding: 9px 12px;
        font-size: 15px;
        border-radius: 10px;
    }
    #registerView button {
        padding: 10px 14px;
        font-size: 15px;
        border-radius: 12px;
        margin-top: 6px;
    }
    #registerView .switch-link {
        margin-top: 12px;
    }
    #registerView .captcha-img {
        height: 36px !important;
    }
    .balance-info {
        gap: 8px 10px !important;
        justify-content: flex-start !important;
    }
    .goods-actions {
        gap: 6px !important;
    }
}
@media (max-width: 360px) {
    .captcha-wrapper {
        flex-direction: row !important;
        align-items: center !important;
    }
    .captcha-img {
        width: 96px !important;
        height: 36px !important;
    }
    .withdraw-options,
    .goods-actions {
        flex-direction: row !important;
    }
}

html {
    position: static !important;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.product-bg-media,
.product-img video,
.modal-product-img video,
.silent-bg-video {
    pointer-events: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.product-img,
.modal-product-img,
.skeleton-img {
    position: relative;
}
.product-img:before,
.skeleton-img:before {
    content: '';
    display: none;
}
@media (max-width: 520px) {
    #loginView,
    #registerView,
    #homeView,
    .view {
        min-height: var(--app-height, 100vh) !important;
    }
}
html.ua-android,
html.ua-android body {
    position: static !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
html.ua-android body {
    background-attachment: scroll !important;
}
html.ua-android .view {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: var(--app-height, 100vh) !important;
    height: auto !important;
}
html.ua-android .view.hidden {
    display: none !important;
}
html.ua-android #loginView,
html.ua-android #registerView {
    display: flex;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
}
html.ua-android #loginView.hidden,
html.ua-android #registerView.hidden {
    display: none !important;
}
html.ua-android #loginView .card,
html.ua-android #registerView .card {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(var(--app-height, 100vh) - 20px) !important;
    border-radius: 0 !important;
    padding: 18px 16px 16px !important;
    box-sizing: border-box;
    background: rgba(255,255,255,0.96) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
html.ua-android #registerView h2,
html.ua-android #loginView h2 {
    font-size: 20px !important;
    margin-bottom: 14px !important;
}
html.ua-android #registerView .input-group,
html.ua-android #loginView .input-group {
    margin-bottom: 10px !important;
}
html.ua-android #registerView label,
html.ua-android #loginView label {
    font-size: 12px !important;
    margin-bottom: 5px !important;
}
html.ua-android #registerView input,
html.ua-android #registerView .file-input,
html.ua-android #registerView select,
html.ua-android #registerView textarea,
html.ua-android #loginView input {
    height: auto !important;
    padding: 9px 12px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    border-radius: 10px !important;
}
html.ua-android #registerView button,
html.ua-android #loginView button {
    padding: 10px 14px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    margin-top: 6px !important;
}
html.ua-android .captcha-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
html.ua-android .captcha-img {
    width: 96px !important;
    height: 36px !important;
    flex: 0 0 96px !important;
}
html.ua-android #homeView {
    display: flex;
    position: relative !important;
    overflow: visible !important;
    padding-top: 12px !important;
    padding-bottom: 24px !important;
}
html.ua-android #homeView.hidden {
    display: none !important;
}
html.ua-android .balance-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    background: rgba(255,255,255,0.94) !important;
}
html.ua-android .balance-info > div {
    display: flex;
    align-items: center;
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
}
html.ua-android .balance-info > div:last-child,
html.ua-android .withdraw-options,
html.ua-android .goods-actions,
html.ua-android .goods-form-card .form-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
html.ua-android .withdraw-options.hidden {
    display: none !important;
}
html.ua-android .balance-info button,
html.ua-android .withdraw-options button,
html.ua-android .goods-actions button {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}
html.ua-android .goods-container,
html.ua-android .main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
    overflow: visible !important;
}
html.ua-android .goods-grid {
    display: block !important;
}
html.ua-android .goods-item {
    width: 100% !important;
    margin-bottom: 10px !important;
    box-sizing: border-box;
}
html.ua-android .products-grid,
html.ua-android .skeleton-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
html.ua-android .product-card {
    width: 100% !important;
    min-width: 0 !important;
}
html.ua-android .product-img,
html.ua-android .skeleton-img {
    width: 100% !important;
    height: auto !important;
    padding-top: 100% !important;
    aspect-ratio: auto !important;
    position: relative !important;
    overflow: hidden !important;
}
html.ua-android .product-img > img,
html.ua-android .product-img > video,
html.ua-android .product-img > span,
html.ua-android .product-bg-media,
html.ua-android .skeleton-img > * {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
html.ua-android .silent-bg-video,
html.ua-android .android-bg-video,
html.ua-android .product-bg-media,
html.ua-android .product-img video,
html.ua-android .modal-product-img video {
    pointer-events: none !important;
    object-fit: cover !important;
    background: #FFFFFF !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
/* 视频缩略图占位图层 */
.video-thumb-proxy {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transition: opacity 0.4s !important;
}
/* 背景视频层（初始透明，播放后淡入） */
.silent-bg-video,
.product-bg-media,
.android-bg-video {
    z-index: 1;
    transition: opacity 0.5s;
}
/* 保持向后兼容的旧版类名 */
.video-canvas-source {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
}
html.ua-android .modal {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    border-radius: 18px 18px 0 0 !important;
}
html.ua-android .modal-product-img {
    position: relative !important;
    overflow: hidden !important;
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
}
html.ua-android-builtin .header,
html.ua-vivo .header,
html.ua-miui .header {
    position: relative !important;
    top: auto !important;
    background: rgba(242,242,247,0.96) !important;
}
@media (max-width: 360px) {
    html.ua-android .products-grid,
    html.ua-android .skeleton-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    html.ua-android .product-body {
        padding: 9px !important;
    }
    html.ua-android .product-name {
        font-size: 12px !important;
    }
    html.ua-android .product-price {
        font-size: 15px !important;
    }
}