/* MDUI interaction values from the reference theme. */
html[theme] :is(.template,.goods,.product) .xf-topbar-back::before{content:'arrow_back';position:static;width:auto;height:auto;background:none;font:24px/1 'XF Material Icons';transform:none}
html[theme] :is(.template,.goods,.product) .xf-topbar-back::after{display:none}
html[theme] .el-header :is(.xf-hamburger,.xf-topbar-back,.xf-dark-toggle,.head-box,.xf-auth-avatar,.un-login,.xf-topbar-brand,.xf-topbar-logo){position:relative;overflow:hidden;cursor:pointer;transition:background-color .3s cubic-bezier(.4,0,.2,1),opacity .2s;isolation:isolate}
html[theme] .el-header :is(.xf-hamburger,.xf-topbar-back,.xf-dark-toggle,.head-box,.xf-auth-avatar,.un-login,.xf-topbar-brand):hover{background-color:rgba(255,255,255,.1)!important;transform:none}
html[theme] .el-header :is(.xf-hamburger,.xf-topbar-back,.xf-dark-toggle,.head-box,.xf-auth-avatar,.un-login,.xf-topbar-brand):active{background-color:rgba(255,255,255,.165)!important}
html[theme] .el-header .xf-topbar-logo:hover{opacity:.87}
html[theme] .el-header .car-item,html[theme] .el-header .header-right-item:has(.xf-auth-cart){display:none!important}
html[theme] :is(.template,.goods,.product) .menu-top :is(.el-menu-item,.el-submenu__title),html[theme] .template.xf-auth-page .xf-auth-aside-link{position:relative;overflow:hidden;transition:background-color .3s cubic-bezier(.4,0,.2,1)}
html[theme] :is(.template,.goods,.product) .menu-top :is(.el-menu-item,.el-submenu__title):hover,html[theme] .template.xf-auth-page .xf-auth-aside-link:hover{background:rgba(0,0,0,.08)!important;color:inherit}
html[theme] body.xf-dark :is(.template,.goods,.product) .menu-top :is(.el-menu-item,.el-submenu__title):hover,html[theme] body.xf-dark .template.xf-auth-page .xf-auth-aside-link:hover{background:rgba(255,255,255,.08)!important}
html[theme] .template.xf-auth-page :is(.xf-auth-field,.custom-form .el-form-item,.xf-auth-code) input.el-input__inner{border:0!important;border-bottom:1px solid rgba(0,0,0,.42)!important;border-radius:0!important;box-shadow:none;background:transparent!important;transition:border-color .2s,box-shadow .2s}
html[theme] .template.xf-auth-page :is(.xf-auth-field,.custom-form .el-form-item,.xf-auth-code) input.el-input__inner:focus{border-bottom-color:#304ffe!important;box-shadow:0 1px 0 #304ffe!important;outline:none}
html[theme] .template.xf-auth-page :is(.xf-auth-field,.el-form-item):focus-within :is(.xf-auth-label,.el-form-item__label){color:#304ffe}
html[theme] body.xf-dark .template.xf-auth-page :is(.xf-auth-field,.custom-form .el-form-item,.xf-auth-code) input.el-input__inner{border-bottom-color:rgba(255,255,255,.7)!important}
html[theme] body.xf-dark .template.xf-auth-page :is(.xf-auth-field,.custom-form .el-form-item,.xf-auth-code) input.el-input__inner:focus{border-bottom-color:#536dfe!important;box-shadow:0 1px 0 #536dfe!important}
html[theme] .template.xf-auth-page :is(.xf-auth-submit,.code-btn,.el-button--primary),html[theme] #goodsListPage .shopping-item .buy-btn{position:relative;overflow:hidden;transition:opacity .2s,box-shadow .2s cubic-bezier(.4,0,1,1);box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}
html[theme] .template.xf-auth-page :is(.xf-auth-submit,.code-btn,.el-button--primary):hover,html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .buy-btn:hover{opacity:.87;background:#91c2ed!important;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;transform:none}
html[theme] .template.xf-auth-page :is(.xf-auth-submit,.code-btn,.el-button--primary):active,html[theme] #goodsListPage .shopping-item .buy-btn:active{opacity:.76;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}
html[theme] .template.xf-auth-page a:hover{text-decoration:none;opacity:.87}
html[theme] #goodsListPage .xf-filter-group{margin-top:32px}
html[theme] #goodsListPage .xf-filter-label{font:500 20px/28px Arial,sans-serif;color:var(--xf-ink);margin:0}
html[theme] #goodsListPage .xf-chips{display:flex;gap:4px;flex-wrap:wrap}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-chip{box-sizing:border-box;display:inline-flex;align-items:center;height:32px;border:0;border-radius:16px;margin:2px 0;padding:0 12px;background:#e0e0e0;color:#000;font:14px/32px Arial,sans-serif;transition:box-shadow .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-chip.is-active{background:#536dfe;color:#fff;padding-left:0}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-chip.is-active::before{display:inline-block;content:'location_on';font:24px/32px 'XF Material Icons';width:32px;height:32px;text-align:center;background:#91c2ed;border-radius:50%;margin-right:8px;color:#fff;flex:none}
html[theme] #goodsListPage .xf-chip:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}
html[theme] #goodsListPage .xf-chip:active{background:#d6d6d6}
html[theme] #goodsListPage .xf-chips+.xf-filter-label{margin-top:16px;padding-top:16px;border-top:1px solid var(--xf-line)}
html[theme] body.xf-dark #goodsListPage .xf-chip:not(.is-active){background:#616161;color:#fff}
html[theme] #goodsListPage .xf-filter-cart{display:none}
html[theme] #goodsListPage .xf-filter-desc::after{content:'shopping_cart';font:24px/1 'XF Material Icons';display:inline-block;margin-left:16px;vertical-align:middle;color:#757575}
html[theme] #goodsListPage .shopping-item .buy-btn i{font:24px/1 'XF Material Icons';vertical-align:middle}
html[theme] #goodsListPage .shopping-item .buy-btn i::before{display:none}
.xf-reference-ripple{position:absolute;pointer-events:none;border-radius:50%;background:currentColor;opacity:0;transform:scale(0);animation:xf-reference-ripple .6s ease-out;z-index:5}
@keyframes xf-reference-ripple{0%{opacity:.16;transform:scale(0)}100%{opacity:0;transform:scale(1)}}
/* Configuration: full-width Material sections and billing tables. */
html[theme] #goodsPage>.el-container>.el-container>.el-main{display:block;min-width:0}
html[theme] #goodsPage .config-box{height:auto;max-width:1264px;width:100%;display:block}
html[theme] #goodsPage .config-box>.el-popover__reference,html[theme] #goodsPage .config-box>span:has(.goods-item-name){display:none}
html[theme] #goodsPage .config-box>.content{width:100%;height:auto;display:block}
html[theme] #goodsPage .config-box>.content>.template{position:static!important;display:block!important;min-width:0;width:100%!important;height:auto!important;padding:0!important;margin:0!important;min-height:0;background:transparent}
html[theme] #goodsPage .config-box .main-card{height:auto!important;min-height:0;width:100%!important;max-width:none!important;display:block;padding:16px!important;box-sizing:border-box}
html[theme] #goodsPage .common-box{display:block!important;width:100%}
html[theme] #goodsPage .l-config{width:100%!important;margin:0;position:static}
html[theme] #goodsPage .order-right{position:static!important;inset:auto!important;width:100%!important;margin:8px 0 0;box-shadow:none;border:0}
html[theme] #goodsPage .config-item{padding:16px 0 24px!important;margin:0!important;min-height:96px;box-sizing:border-box}
html[theme] #goodsPage :is(.config-tit,.com-tit){font:500 20px/28px Arial,sans-serif!important;color:var(--xf-ink);border:0;padding:0;margin:0!important}
html[theme] #goodsPage :is(.config-tit,.com-tit)::before{content:'settings';font:24px/1 'XF Material Icons';display:inline-block;vertical-align:middle;margin-right:6px;background:none;width:auto;height:auto;position:static}
html[theme] #goodsPage .el-select{width:100%;margin:0}
html[theme] #goodsPage .el-input__inner{height:38px;line-height:38px;border:1px solid #cbd2df;border-radius:3px;background:transparent;color:var(--xf-ink);font:14px/38px Arial,sans-serif}
html[theme] #goodsPage .common-config .order-right .right-main,html[theme] #goodsPage .common-config .order-right .order-right-footer{display:none}
html[theme] #goodsPage .order-right .f-btn{display:flex;justify-content:flex-start;gap:8px;padding:8px;position:static}
html[theme] #goodsPage .order-right .f-btn button{width:auto!important;height:36px;font:500 14px/36px Arial,sans-serif;padding:0 16px;background:#91c2ed;color:#000;border:0}
html[theme] #goodsPage .xf-config-intro{padding:24px 16px 16px;margin:0 0 8px;background:var(--xf-card);box-shadow:var(--xf-shadow);font:14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] #goodsPage .xf-config-intro h1{font:400 24px/36px Arial,sans-serif;margin:0 0 32px;color:var(--xf-text)}
html[theme] #goodsPage .xf-config-intro p{margin:0}
html[theme] #goodsPage .xf-config-cost{background:var(--xf-card);box-shadow:var(--xf-shadow);margin-top:8px}
html[theme] #goodsPage .xf-config-cost h2{font:400 24px/36px Arial,sans-serif;padding:24px 16px;margin:0;border-bottom:1px solid var(--xf-line)}
html[theme] #goodsPage .xf-config-cost table{width:100%;border-collapse:collapse;font:14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] #goodsPage .xf-config-cost :is(td,th){padding:12px 24px;text-align:left;border-bottom:1px solid var(--xf-line);font-weight:400}
html[theme] #goodsPage .xf-config-cost th{padding-top:16px;padding-bottom:16px;color:var(--xf-muted)}
html[theme] #goodsPage .xf-config-cost :is(td,th):last-child{text-align:right}
html[theme] #goodsPage .xf-config-cost tr:last-child td{font-weight:500}
html[theme] #goodsPage .common-config .pro-tit{display:none}
html[theme] #goodsPage .mf-cloud .con{display:block}
html[theme] #goodsPage .mf-cloud .el-form-item{padding:16px 0 24px;border-bottom:1px solid var(--xf-line);margin:0}
html[theme] #goodsPage .mf-cloud .el-form-item__label{display:block;float:none;text-align:left;font:500 20px/28px Arial,sans-serif;width:100%!important;margin-bottom:8px}
html[theme] #goodsPage .mf-cloud .el-form-item__content{margin-left:0!important;line-height:24px}
html[theme] #goodsPage .f-order{position:static!important;width:100%!important;max-width:none;margin:8px 0;padding:16px!important;background:var(--xf-card);box-shadow:var(--xf-shadow)}

html[theme] #goodsPage>.el-container>.el-container>.el-main{padding:84px 24px 24px!important}
html[theme] #goodsPage .config-box,html[theme] #goodsPage .config-box .template,html[theme] #goodsPage .config-box .el-form-item__label,html[theme] #goodsPage .config-box .el-form-item__content{font-family:Arial,sans-serif!important}
html[theme] #goodsPage .config-box>.content>.template>h1.tit{display:none}
html[theme] #goodsPage .config-box :is(.main-card,.xf-config-intro,.xf-config-cost){background:var(--xf-card)!important}
html[theme] #goodsPage .config-box .mf-cloud .el-tabs__content{padding:0}
html[theme] #goodsPage .config-box .mf-cloud .con{padding:0 0 16px}

html[theme] #goodsPage .f-order .el-main{padding:0!important;margin:0!important;width:100%!important;overflow:visible}
html[theme] #goodsPage .f-order .l-empty{display:none}
html[theme] #goodsPage .f-order .main-card{padding:0!important;display:flex;flex-wrap:wrap;gap:16px;box-shadow:none!important}
html[theme] #goodsPage .f-order :is(.left,.right){display:flex;align-items:center;gap:16px;flex-wrap:wrap}
html[theme] #goodsPage .f-order .mid{margin-left:auto}
html[theme] #goodsPage .f-order :is(.add-cart,.buy){height:36px;padding:0 16px;border:0;border-radius:2px;font:500 14px/36px Arial,sans-serif;background:#91c2ed;color:#000;cursor:pointer;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}
html[theme] #goodsPage .f-order :is(.add-cart,.buy):hover{opacity:.87}

html[theme] .el-header :is(.xf-dark-toggle,.head-box,.xf-auth-avatar,.un-login):hover{color:#243ce3!important}
html[theme] .el-header :is(.xf-dark-toggle,.head-box,.xf-auth-avatar,.un-login){width:48px!important;height:48px!important;border-radius:50%;display:flex;align-items:center;justify-content:center}
html[theme] .el-header .un-login{font-size:0}
html[theme] .el-header .un-login img,html[theme] .el-header .xf-auth-avatar svg{display:none}
html[theme] .el-header :is(.un-login,.xf-auth-avatar)::before{content:'person_add';font:24px/1 'XF Material Icons'}
.xf-reference-tooltip{position:fixed;z-index:100001;pointer-events:none;white-space:nowrap;padding:4px 8px;border-radius:2px;background:rgba(97,97,97,.9);color:#fff;font:700 12px/18px Arial,sans-serif}
html[theme] #goodsListPage .shopping-item,html[theme] #goodsListPage .shopping-item:hover,html[theme] #goodsListPage .goods-list-div>div:hover{transform:none!important;translate:none!important}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .buy-btn:hover,html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .buy-btn:hover *{color:#5674dc!important}
html[theme] .template:has(#goodsListPage)>.el-container>.el-container>.el-main{padding-top:92px!important}
html[theme] :is(.template,.goods,.product) .menu-top .el-menu-item:hover,html[theme] :is(.template,.goods,.product) .menu-top .el-menu-item:hover .aside-menu-text{color:#536dfe!important;background-color:#ebebeb!important}
html[theme] :is(.template,.goods,.product) .menu-top .el-menu-item:hover :is(.xf-material,.xf-boxicon){color:#757575!important}
html[theme] body.xf-dark :is(.template,.goods,.product) .menu-top .el-menu-item:hover{background-color:#515151!important}
html[theme] #goodsPage .mf-cloud .con{display:flex;flex-direction:column;gap:0}
html[theme] #goodsPage .mf-cloud .con>.image{order:-2}
html[theme] #goodsPage .mf-cloud .image>.el-form-item__label{font-size:0!important}
html[theme] #goodsPage .mf-cloud .image>.el-form-item__label::before{content:'settings';font:24px/28px 'XF Material Icons';vertical-align:middle;margin-right:6px}
html[theme] #goodsPage .mf-cloud .image>.el-form-item__label::after{content:'操作系统';font:500 20px/28px Arial,sans-serif;vertical-align:middle}
html[theme] #goodsPage .mf-cloud .image:has(.xf-os-controls) .image-box,html[theme] #goodsPage .mf-cloud .image:has(.xf-os-controls) .image-tabs{display:none}
html[theme] #goodsPage .xf-os-controls{width:100%;position:relative;font:14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] #goodsPage .xf-os-controls :is(button,select){box-sizing:border-box;width:100%;height:38px;border:1px solid #cbd2df;border-radius:3px;background:var(--xf-card);font:14px/36px Arial,sans-serif;color:var(--xf-ink);padding:0 12px;text-align:left}
html[theme] #goodsPage .xf-os-controls button{display:flex;align-items:center;gap:6px;cursor:pointer}
html[theme] #goodsPage .xf-os-controls button::after{content:'';border:4px solid transparent;border-top-color:#b7bec8;margin-left:auto;margin-top:6px}
html[theme] #goodsPage .xf-os-controls img{width:20px;height:20px}
html[theme] #goodsPage .xf-os-menu{position:absolute;z-index:40;top:46px;width:100%;box-sizing:border-box;background:var(--xf-card);padding:0 8px;box-shadow:0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f,0 8px 10px -5px #0003}
html[theme] #goodsPage .xf-os-menu button{height:32px;line-height:32px;border:0;border-radius:0;padding:0;font-size:13px}
html[theme] #goodsPage .xf-os-menu button:hover{background:#f7f8f9}

html[theme] #goodsPage .mf-cloud .con .el-form{display:flex;flex-direction:column}
html[theme] #goodsPage .mf-cloud .con .el-form>.image{order:-2}
html[theme] #goodsPage .mf-cloud .com-tit{display:none}
html[theme] #goodsPage [data-xf-preferred-custom] .top-tab>.el-tabs__header{display:none}
html[theme] #goodsPage .mf-cloud .el-radio-button{margin:0;min-width:240px}
html[theme] #goodsPage .mf-cloud .el-radio-button__inner{border:0!important;padding:8px 0;background:transparent!important;color:var(--xf-ink)!important;box-shadow:none!important;font:14px/24px Arial,sans-serif;text-align:left}
html[theme] #goodsPage .mf-cloud .el-radio-button__inner::before{content:'';display:inline-block;box-sizing:border-box;width:18px;height:18px;border:2px solid #757575;border-radius:50%;vertical-align:middle;margin-right:18px}
html[theme] #goodsPage .mf-cloud .el-radio-button__orig-radio:checked+.el-radio-button__inner::before{border-color:#536dfe;background:radial-gradient(circle,#536dfe 0 4px,transparent 5px)}
html[theme] #goodsPage .mf-cloud .el-slider__runway{height:8px;background:#eee;border:1px solid #bdbdbd;border-radius:4px}
html[theme] #goodsPage .mf-cloud .el-slider__button{height:15px;width:15px;border:0;border-radius:50%;background:#007bff}

html[theme] .template.xf-auth-page .el-header .xf-auth-avatar{background:transparent!important;box-shadow:none!important;border:0;border-radius:50%;color:#495057!important;padding:0}
html[theme] .template.xf-auth-page .el-header .xf-auth-avatar::before{color:inherit;font:24px/1 'XF Material Icons'}
html[theme] .template.xf-auth-page .el-header .xf-auth-avatar:hover{background:rgba(255,255,255,.1)!important;color:#243ce3!important;opacity:1}
html[theme] body.xf-dark .template.xf-auth-page .el-header .xf-auth-avatar{color:#fff!important}
.xf-auth-mobile-backdrop{display:none}
@media(max-width:768px){
 html[theme] .template.xf-auth-page .el-header{z-index:1300}
 html[theme] .template.xf-auth-page .xf-auth-aside{display:flex!important;position:fixed!important;left:0!important;top:56px!important;bottom:0;width:240px!important;height:calc(100dvh - 56px)!important;padding:8px 0!important;gap:0;z-index:1200;transform:translateX(-100%);visibility:hidden;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility .25s;box-shadow:0 8px 10px -5px #0003,0 16px 24px 2px #00000024}
 html[theme] body.xf-auth-menu-open .template.xf-auth-page .xf-auth-aside{transform:translateX(0);visibility:visible}
 html[theme] .template.xf-auth-page .xf-auth-main{margin-left:0!important;width:100%;min-width:0}
 body.xf-auth-menu-open .xf-auth-mobile-backdrop{display:block;position:fixed;inset:56px 0 0;background:rgba(0,0,0,.4);z-index:1190;border:0;padding:0;width:100%;height:calc(100dvh - 56px)}
 body.xf-auth-menu-open{overflow:hidden}
}
