/* Page-by-page compatibility with the reference system; never replaces data or permissions. */
html[theme] :is(.template,.goods,.product) .el-main{margin:0!important;padding:84px 16px 24px!important;min-width:0;font:14px/24px Arial,sans-serif}
html[theme] :is(.template,.goods,.product) .el-main .main-card{max-width:1264px;font-family:Arial,sans-serif}
html[theme] .template:not(.xf-auth-page):not(:has(.home-main)) .xf-card{padding:24px 16px 16px;margin-bottom:18px;font:14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] .template:not(.xf-auth-page):not(:has(.home-main)) :is(.xf-card-title,.xf-account-title,.main-card-title,.xf-fin-title,.xf-inst-title,.xf-ticket-head-title,.xf-filter-title){font:400 24px/36px Arial,sans-serif;color:var(--xf-text)}
html[theme] .template:not(.xf-auth-page):not(:has(.home-main)) :is(.xf-card-desc,.xf-field-help,.xf-row-card__desc,.xf-inst-desc,.xf-filter-desc){font:14px/24px Arial,sans-serif}
html[theme] .template:not(.xf-auth-page):not(:has(.home-main)) .xf-field-help{color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) .xf-field-label{font:12px/20px Arial,sans-serif;color:var(--xf-muted)}
html[theme] :is(.template,.goods,.product) .xf-field-value{font:16px/32px Arial,sans-serif;padding:0;border-bottom:1px solid #999}
html[theme] :is(.template,.goods,.product) .xf-field-value .el-input__inner,html[theme] :is(.template,.goods,.product) .xf-field-value .el-select .el-input__inner{font:16px/32px Arial,sans-serif;height:32px;border:0!important;padding:0;background:transparent;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) .xf-field{padding:16px 0 8px}
html[theme] :is(.template,.goods,.product) .xf-grid-2{gap:8px 16px}
html[theme] :is(.template,.goods,.product) .el-button,html[theme] :is(.template,.goods,.product) .xf-btn{height:36px;min-height:36px;font:500 14px/34px Arial,sans-serif;padding:0 16px;border-radius:2px;box-sizing:border-box}
html[theme] :is(.template,.goods,.product) .el-button--primary,html[theme] :is(.template,.goods,.product) .xf-btn--primary{box-shadow:0 2px 2px #0003,0 1px 5px #0002}
html[theme] :is(.template,.goods,.product) .el-table{font:14px/24px Arial,sans-serif;color:#38536d;border-color:var(--xf-line)}
html[theme] :is(.template,.goods,.product) .el-table th{font-weight:500;height:52px;background:var(--xf-card)!important;color:var(--xf-muted)}
html[theme] :is(.template,.goods,.product) .el-table .cell{padding:0 12px;font-size:14px;line-height:24px}
html[theme] :is(.template,.goods,.product) .el-table td{height:48px}
html[theme] :is(.template,.goods,.product) .el-input__inner,html[theme] :is(.template,.goods,.product) .el-textarea__inner{font-family:Arial,sans-serif;font-size:14px}
html[theme] :is(.template,.goods,.product) .el-tabs__item{font:500 14px/48px Arial,sans-serif;height:48px}
html[theme] :is(.template,.goods,.product) .el-tabs__header{margin-bottom:24px}
html[theme] :is(.template,.goods,.product) .el-table__empty-block{min-height:100px}
html[theme] :is(.template,.goods,.product) .xf-site-footer{max-width:1264px;margin-top:18px;padding:24px 16px;font:14px/24px Arial,sans-serif}
html[theme] :is(.template,.goods,.product) .xf-site-footer p{font:14px/24px Arial,sans-serif}
html[theme] .el-dialog{border-radius:2px;background:var(--xf-card);color:var(--xf-text);max-width:calc(100vw - 32px)}
html[theme] .el-dialog__header{padding:24px 24px 16px}
html[theme] .el-dialog__title{font:500 20px/28px Arial,sans-serif;color:var(--xf-ink)}
html[theme] .el-dialog__body{padding:16px 24px;font:14px/24px Arial,sans-serif;color:var(--xf-text)}
html[theme] .el-dialog__footer{padding:8px 16px 16px}
/* Personal details */
html[theme] .xf-page-account .main-card>.main-card-title{display:none}
html[theme] .xf-page-account .main-card .xf-account-info{min-height:292px}
html[theme] .xf-page-account .xf-account-title{margin-bottom:32px}
html[theme] .xf-page-account .xf-card>.xf-field-help{margin-top:32px!important}
html[theme] .xf-page-account .xf-card>.xf-grid-2{margin-top:24px!important}
html[theme] .xf-page-account .el-tabs__content{overflow:visible}
/* Security cards: full-width title, status and right-aligned action. */
html[theme] .xf-page-security .xf-summary{position:relative;min-height:210px;padding:88px 16px 24px!important;gap:24px}
html[theme] .xf-security-heading{position:absolute;left:16px;top:24px;font:500 20px/28px Arial,sans-serif;margin:0}
html[theme] .xf-page-security .xf-summary .xf-avatar{width:64px;height:64px;font:500 28px/64px Arial,sans-serif}
html[theme] .xf-page-security .xf-summary__main{flex:none;width:320px;max-width:50%}
html[theme] .xf-page-security .xf-summary__side{font:14px/30px Arial,sans-serif;text-align:left;margin-left:24px;width:auto;color:var(--xf-text)}
html[theme] .xf-page-security .xf-summary__hint{font:14px/24px Arial,sans-serif;margin-top:8px}
html[theme] .xf-page-security .xf-progress{height:8px;border-radius:4px}
html[theme] .xf-page-security .xf-row-card{position:relative;min-height:139px;align-items:stretch;display:flex;justify-content:space-between}
html[theme] .xf-page-security .xf-row-card__title{font:500 20px/28px Arial,sans-serif}
html[theme] .xf-page-security .xf-row-card__desc{margin-top:40px}
html[theme] .xf-page-security .xf-row-card>div:last-child{align-self:flex-end}
html[theme] .xf-page-security .main-card>.main-card-title{display:none}
/* Products and cart */
html[theme] .xf-inst-page .xf-inst-head{min-height:148px}
html[theme] .xf-inst-page .xf-inst-desc{margin-top:32px}
html[theme] .xf-inst-page .xf-inst-toolbar-card{min-height:86px;margin-top:-10px}
html[theme] .xf-inst-page .xf-inst-body-card{margin-top:26px;min-height:188px}
html[theme] .xf-inst-page .xf-inst-empty{padding:0;text-align:left}
html[theme] .xf-inst-page .xf-inst-empty-title{font:400 24px/36px Arial,sans-serif;margin:0 0 32px}
html[theme] .xf-inst-page .xf-inst-empty-line{font:14px/24px Arial,sans-serif;margin:16px 0 0;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-filter-card{padding:24px 16px 16px}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-filter-label{font:500 20px/28px Arial,sans-serif;margin-top:24px;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-chip{height:32px;border-radius:16px;font:14px/32px Arial,sans-serif;padding:0 12px}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-filter-desc{font:14px/24px Arial,sans-serif}
/* Ticket list */
html[theme] .xf-ticket-page .xf-ticket-head{min-height:275px}
html[theme] .xf-ticket-page .xf-ticket-new{display:inline-flex;position:static;height:36px;align-items:center;padding:0 16px;margin:0 0 24px;background:var(--xf-primary);color:#111;box-shadow:0 2px 2px #0003;font:500 14px/36px Arial,sans-serif}
html[theme] .xf-ticket-page .xf-ticket-empty{margin-top:0;padding:0}
html[theme] .xf-ticket-page .xf-ticket-empty-title{font:400 34px/40px Arial,sans-serif;color:var(--xf-ink)}
html[theme] .xf-ticket-page .xf-ticket-empty-desc{font:14px/24px Arial,sans-serif;margin-top:24px;color:var(--xf-ink)}
/* Dashboard remains the measured 208px welcome and 8:4 grid. */
html[theme] :is(.template,.goods,.product) .home-main{padding:92px 16px 24px!important}
html[theme] :is(.template,.goods,.product) .home-main .el-table th{background:#eef1f7!important}
html[theme] body.xf-dark :is(.template,.goods,.product) .el-table,html[theme] body.xf-dark :is(.template,.goods,.product) .el-table th{color:var(--xf-text);background:var(--xf-card)!important}
html[theme] body.xf-dark :is(.template,.goods,.product) .el-table__empty-text{color:var(--xf-muted)}
html[theme] body.xf-dark .el-dialog :is(.el-form-item__label,.el-input__inner,.el-textarea__inner){color:var(--xf-text);background:var(--xf-soft)}
@media(max-width:768px){html[theme] :is(.template,.goods,.product) .el-main{padding:76px 12px 24px!important}html[theme] :is(.template,.goods,.product) .xf-grid-2{grid-template-columns:minmax(0,1fr)}html[theme] .xf-page-security .xf-summary{flex-wrap:wrap}html[theme] .xf-page-security .xf-summary__main{max-width:calc(100% - 88px)}html[theme] .xf-page-security .xf-summary__side{margin-left:0}html[theme] .xf-page-security .xf-row-card{gap:16px}html[theme] .xf-ticket-page .xf-ticket-empty-title{font-size:26px;line-height:36px}html[theme] :is(.template,.goods,.product) .el-table{max-width:100%}}

/* The reference personal-details page has no extra 40px content offset. */
html[theme] #account.xf-page-account .content-box{margin-top:0}
html[theme] #account.xf-page-account .xf-account-title{font:400 24px/36px Arial,sans-serif;margin:0 0 32px}
html[theme] #account.xf-page-account .xf-card:nth-child(3) .xf-grid-2{grid-template-columns:minmax(0,1fr)}
/* Populated product catalogue, measured at /cart?fid=1. */
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item.xf-card{padding:24px 16px 8px;min-height:240px;justify-content:flex-start;overflow:visible;transition:box-shadow .25s cubic-bezier(.4,0,.2,1)}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-name-text{font:400 24px/36px Arial,sans-serif;color:var(--xf-text)}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-description{max-height:none;min-height:0;overflow:visible;font:14px/24px Arial,sans-serif;color:var(--xf-ink);margin-top:32px}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-description :is(p,li,div){font-size:14px;line-height:24px;min-height:40px;align-items:center;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-description .config-row{display:flex;gap:8px;justify-content:flex-start;min-height:40px;padding:0}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-description .config-row::before{display:none}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-description .config-row .label{width:70px;color:#38536d;font-weight:400}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .goods-description .config-row .value{font-weight:700;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-stock{display:block;margin-top:24px;padding-top:16px;border-top:1px solid var(--xf-line);font:14px/24px Arial,sans-serif}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-stock-label{font:14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-stock-track{display:block;width:100%;height:4px}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-stock .qty-box{font-size:12px}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .price-box{margin:0 0 24px;min-height:24px;line-height:24px}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .price-box .item-price{font:400 14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] :is(.template,.goods,.product) #goodsListPage .shopping-item .buy-btn{align-self:flex-start;width:auto;min-width:148px;height:36px;margin:0 -8px;font:500 14px/36px Arial,sans-serif;padding:0 16px;background:var(--xf-primary)!important;color:#111!important;border:0;box-shadow:0 2px 2px #0003,0 1px 5px #0002}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-filter-group{margin-top:32px}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-filter-group+.xf-filter-group{border-top:1px solid var(--xf-line);padding-top:16px}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-chip.is-active{background:#536dfe;color:#fff}
html[theme] :is(.template,.goods,.product) #goodsListPage .xf-chip.is-active::before{content:'location_on';font-family:'XF Material Icons';font-size:24px;vertical-align:middle;margin-right:4px}
/* The three cart modules retain their own reactive configuration logic. */
html[theme] #goodsPage .config-box{max-width:1264px;width:100%;margin:0 auto}
html[theme] #goodsPage .config-box .template{font:14px/24px Arial,sans-serif}
html[theme] #goodsPage .config-box .main-card{padding:24px 16px!important;background:var(--xf-card)!important;border:0;box-shadow:var(--xf-shadow)!important}
html[theme] #goodsPage :is(.tit,.pro-tit){font:400 24px/36px Arial,sans-serif;color:var(--xf-text);margin:0 0 24px}
html[theme] #goodsPage :is(.config-tit,.com-tit){font:500 20px/28px Arial,sans-serif;color:var(--xf-ink)}
html[theme] #goodsPage .config-tit::before{content:'settings';font:24px/1 'XF Material Icons';vertical-align:middle;margin-right:8px}
html[theme] #goodsPage .config-item{padding:24px 0;border-bottom:1px solid var(--xf-line);display:block}
html[theme] #goodsPage .config-item .el-select{width:100%;margin-top:8px}
html[theme] #goodsPage .el-radio{min-width:200px;margin-top:12px;font:14px/24px Arial,sans-serif}
html[theme] #goodsPage :is(.common-box,.mf-cloud .con){gap:24px}
html[theme] #goodsPage .description{font:14px/24px Arial,sans-serif;background:transparent;color:var(--xf-ink);padding:16px 0}
html[theme] #goodsPage .order-right{background:var(--xf-card);color:var(--xf-text);border-color:var(--xf-line)}
html[theme] body.xf-dark #goodsPage :is(.config-item,.main-card,.order-right){background:var(--xf-card)!important;color:var(--xf-text)}

/* Authentication: reference typography and Material underline fields. */
html[theme] .template.xf-auth-page .xf-auth-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:348px}
html[theme] .template.xf-auth-page .xf-auth-panel{padding:16px 16px 16px 8px;font-family:Arial,sans-serif}
html[theme] .template.xf-auth-page .xf-auth-copy{padding:64px 16px;font-family:Arial,sans-serif}
html[theme] .template.xf-auth-page .xf-auth-copy h1{font:400 44px/52px Arial,sans-serif;color:var(--xf-ink)}
html[theme] .template.xf-auth-page .xf-auth-copy h2{font:400 24px/36px Arial,sans-serif}
html[theme] .template.xf-auth-page .xf-auth-copy p{border-top:1px solid var(--xf-line);padding-top:16px;margin-top:12px;width:100%;font:14px/24px Arial,sans-serif;color:var(--xf-ink)}
html[theme] .template.xf-auth-page .xf-auth-tabs{justify-content:center;gap:0;border:0;margin:0 0 20px}
html[theme] .template.xf-auth-page .xf-auth-tab{min-width:160px;text-align:center;font:500 14px/48px Arial,sans-serif;padding:0}
html[theme] .template.xf-auth-page .xf-auth-label{font:12px/20px Arial,sans-serif;margin:0 0 4px}
html[theme] .template.xf-auth-page .xf-auth-field{margin-bottom:24px}
html[theme] .template.xf-auth-page .xf-auth-field>.el-input>.el-input__inner,html[theme] .template.xf-auth-page .custom-form .el-input__inner{font:16px/36px Arial,sans-serif;height:36px;border:0!important;border-bottom:1px solid #999!important;border-radius:0!important;padding:0;background:transparent;color:var(--xf-ink)}
html[theme] .template.xf-auth-page .xf-auth-code .el-input__inner{font:16px/36px Arial,sans-serif;height:36px;border:0!important;border-bottom:1px solid #999!important;border-radius:0!important;padding:0;background:transparent}
html[theme] .template.xf-auth-page .xf-auth-submit{height:36px;font:500 14px/36px Arial,sans-serif;color:#111;box-shadow:0 2px 2px #0003,0 1px 5px #0002}
html[theme] .template.xf-auth-page .xf-auth-code .code-btn{height:36px;min-width:32%;font:500 14px/36px Arial,sans-serif;background:var(--xf-primary);color:#111;box-shadow:0 2px 2px #0003;border:0}
html[theme] .template.xf-page-regist .xf-auth-card{display:block;padding:16px!important}
html[theme] .template.xf-page-regist .xf-auth-copy{display:none}
html[theme] .template.xf-page-regist .xf-auth-panel{padding:0}
html[theme] .template.xf-page-regist .xf-auth-field{margin-bottom:28px}
html[theme] .template.xf-page-forget #forget{height:auto;width:100%;display:block;padding:0;font-family:Arial,sans-serif}
html[theme] .template.xf-page-forget #forget .login-container{display:block;position:static;width:100%;height:auto}
html[theme] .template.xf-page-forget #forget :is(.container-back,.login-jump-btn,.login-text){display:none}
html[theme] .template.xf-page-forget #forget .container-before{position:static;width:100%;height:auto;background:var(--xf-card);border-radius:2px;box-shadow:var(--xf-shadow);padding:16px;box-sizing:border-box}
html[theme] .template.xf-page-forget #forget .login{width:100%;padding:0;margin:0}
html[theme] .template.xf-page-forget .login-top{justify-content:center;padding:0;display:flex;margin-bottom:24px}
html[theme] .template.xf-page-forget .login-top>div{font:500 14px/48px Arial,sans-serif;min-width:160px;text-align:center;margin:0}
html[theme] .template.xf-page-forget .form-main{margin:0}
html[theme] .template.xf-page-forget .form-item{margin-top:28px}
html[theme] .template.xf-page-forget .el-input__inner{font:16px/36px Arial,sans-serif;height:36px;border:0!important;border-bottom:1px solid #999!important;border-radius:0!important;background:transparent;color:var(--xf-ink)}
html[theme] .template.xf-page-forget .login-btn{width:100%;background:var(--xf-primary);color:#111;font-size:14px}
html[theme] .template.xf-page-forget .code-btn{min-width:32%;background:var(--xf-primary);color:#111;font-size:14px}
@media(max-width:1100px){html[theme] .template.xf-auth-page .xf-auth-card{grid-template-columns:minmax(0,1fr)}html[theme] .template.xf-auth-page .xf-auth-copy{padding:32px 16px}}
@media(max-width:768px){html[theme] .template.xf-auth-page .xf-auth-copy h1{font-size:32px;line-height:40px}html[theme] .template.xf-auth-page .xf-auth-tab{min-width:0;flex:1}html[theme] .template.xf-page-forget .login-top>div{min-width:120px}}
html[theme] .template.xf-page-forget #forget{max-width:1264px;margin:0 auto}
html[theme] .template.xf-page-forget #forget .container-before{transform:none;left:auto;top:auto}
html[theme] .template.xf-page-forget #forget .login-form{margin-top:0}

html[theme] .xf-page-forget #forget .el-input__inner{height:36px;font:16px/36px Arial,sans-serif;border:0!important;border-bottom:1px solid #999!important;border-radius:0!important;padding:0;background:transparent;color:var(--xf-ink)}
html[theme] .xf-page-forget #forget .xf-forget-code-label{margin-top:28px}
html[theme] .xf-page-forget #forget .code-item{margin-top:4px}
html[theme] .template.xf-auth-page .xf-auth-submit.el-button{height:36px;font:500 14px/36px Arial,sans-serif}
html[theme] .template.xf-auth-page .xf-auth-cart img{filter:brightness(0)}
html[theme] body.xf-dark .template.xf-auth-page .xf-auth-cart img{filter:brightness(0) invert(1)}
/* Configuration plugins keep their APIs, with the reference's vertical option flow. */
html[theme] #goodsPage .config-box>.content{margin:0 auto;max-width:1264px}
html[theme] #goodsPage .common-config .common-box{display:flex;flex-direction:column;gap:24px}
html[theme] #goodsPage .common-config .l-config{width:100%;margin-right:0}
html[theme] #goodsPage .common-config .order-right{position:static;inset:auto;width:100%;box-sizing:border-box;margin:24px 0 0;padding:24px 16px;box-shadow:var(--xf-shadow)}
html[theme] #goodsPage .mf-cloud .el-form-item{padding:16px 0 24px;margin:0;border-bottom:1px solid var(--xf-line)}
html[theme] #goodsPage .mf-cloud .el-form-item__label{float:none;width:100%!important;display:block;text-align:left;font:500 20px/28px Arial,sans-serif;padding-bottom:12px;color:var(--xf-ink)}
html[theme] #goodsPage .mf-cloud .el-form-item__content{margin-left:0!important;font:14px/24px Arial,sans-serif}
html[theme] #goodsPage .mf-cloud .com-tit{margin-top:24px}
html[theme] #goodsPage .f-order{position:static;inset:auto;width:100%;max-width:1264px;margin:18px auto 0;box-sizing:border-box;box-shadow:var(--xf-shadow);background:var(--xf-card);border-color:var(--xf-line);padding:24px 16px;flex-wrap:wrap;height:auto}
html[theme] #goodsPage .mf-cloud .package-box{font:14px/24px Arial,sans-serif}
@media(max-width:768px){html[theme] #goodsPage .f-order{padding:16px;gap:16px}html[theme] #goodsPage .mf-cloud .el-form-item__label{font-size:18px}html[theme] #goodsPage .config-box{width:100%}html[theme] #goodsPage .el-radio{min-width:120px}html[theme] #goodsPage .common-config .order-right{min-width:0}}
/* Finance and resource list typography uses the same 14/24 scale. */
html[theme] #finance :is(.xf-fin-filter,.xf-fin-total,.xf-fin-legend,.xf-fin-ghost){font:14px/24px Arial,sans-serif}
html[theme] #finance .xf-fin-title{font:400 24px/36px Arial,sans-serif}
html[theme] #finance .xf-fin-card{min-height:328px;padding:24px 16px}
html[theme] :is(.template,.goods,.product) .el-pagination{font-family:Arial,sans-serif;font-size:14px}
html[theme] :is(.template,.goods,.product) .el-form-item__label{font-family:Arial,sans-serif;font-size:14px}