/* 启动阶段与 PageLoading 使用同一套外观和物理尺寸，不依赖应用根字号。 */
#mt-h5-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f3f4fb;
    z-index: 900;
}

#mt-h5-loading .mt-startup-loading__card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    background: rgba(28, 28, 33, 0.6);
    border-radius: 20px;
}

#mt-h5-loading .mt-startup-loading__arc {
    width: 40px;
    height: 40px;
    animation: mt-startup-spin 1s linear infinite;
}

#mt-h5-loading .mt-startup-loading__label {
    margin-top: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 17px;
}

#mt-h5-loading .mt-startup-loading__arc circle {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 42 999;
}

@keyframes mt-startup-spin {
    to {
        transform: rotate(360deg);
    }
}

/* isoverview=1 使用透明全屏背景，首屏与 React loading 保持同一套卡片和转圈。 */
html[data-overview-loading='true'] #mt-h5-loading,
.mt-page-loading--cover.mt-page-loading--overview {
    background: transparent;
}

#__vconsole {
    position: relative;
    z-index: 9999999999;
}

.mt-startup-pcc {
    display: none;
}
html[data-pcc-startup-tab] #mt-h5-loading {
    background: linear-gradient(180deg, #e8edff 0%, #e8edff 35%, #f6f7fa 100%);
}
html[data-pcc-startup-tab] .mt-startup-loading__card {
    display: none !important;
}
html[data-pcc-startup-tab] .mt-startup-pcc {
    display: block;
    max-width: 393px;
    margin: auto;
    padding-top: 0;
    padding-top: env(safe-area-inset-top);
}
.mt-startup-pcc i,
.mt-startup-pcc span,
.mt-startup-pcc b {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(199, 204, 214, 0.16), rgba(199, 204, 214, 0.4), rgba(199, 204, 214, 0.16));
}
.mt-startup-pcc__header {
    display: flex;
    height: 52px;
    padding: 0 24px 8px;
    align-items: center;
}
.mt-startup-pcc__header i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.mt-startup-pcc__header span {
    width: 112px;
    height: 16px;
    margin-left: 8px;
}
.mt-startup-pcc__header b {
    width: 48px;
    height: 16px;
    margin-left: auto;
}
.mt-startup-pcc__games {
    padding: 80px 14px 20px;
    background: #f0f2ff;
}
.mt-startup-pcc__games > div {
    display: flex;
    justify-content: space-between;
    padding-right: 17px;
}
.mt-startup-pcc__games i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.mt-startup-pcc__games > span {
    height: 20px;
    margin-top: 53px;
}
.mt-startup-pcc__social > div {
    display: flex;
    height: 85px;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 20px 24px 0;
}
.mt-startup-pcc__social span {
    background: none;
}
.mt-startup-pcc__social span i {
    width: 160px;
    height: 12px;
}
.mt-startup-pcc__social span b {
    width: 100px;
    height: 8px;
    margin-top: 8px;
}
.mt-startup-pcc__social > div > i {
    width: 48px;
    height: 28px;
    margin-top: 8.5px;
    border-radius: 14px;
}
.mt-startup-pcc__behavior,
.mt-startup-pcc__my {
    display: none;
}
html[data-pcc-startup-tab='behavior'] .mt-startup-pcc__header,
html[data-pcc-startup-tab='behavior'] .mt-startup-pcc__games,
html[data-pcc-startup-tab='behavior'] .mt-startup-pcc__social {
    display: none;
}
html[data-pcc-startup-tab='behavior'] .mt-startup-pcc__behavior {
    display: block;
}
.mt-startup-pcc__behavior,
.mt-startup-pcc__behavior * {
    box-sizing: border-box;
}
.mt-startup-pcc__behavior-header {
    display: flex;
    height: 52px;
    padding: 0 24px;
    align-items: center;
}
.mt-startup-pcc__behavior-header > i {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
}
.mt-startup-pcc__behavior-header > span {
    width: 112px;
    height: 16px;
    margin-left: 8px;
}
.mt-startup-pcc__behavior-header > b {
    width: 48px;
    height: 16px;
    margin-left: auto;
}
.mt-startup-pcc__behavior-games {
    display: flex;
    height: 223px;
    padding: 118px 12px 0;
    background: #f0f2ff;
}
.mt-startup-pcc__behavior-games > div {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    flex-direction: column;
}
.mt-startup-pcc__behavior-games i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.mt-startup-pcc__behavior-games span {
    width: 60px;
    max-width: 100%;
    height: 10px;
    margin-top: 6px;
}
.mt-startup-pcc__behavior-tabs {
    display: flex;
    height: 34px;
    margin: 12px 0 16px;
    padding: 0 16px;
}
.mt-startup-pcc__behavior-tabs span {
    width: 108px;
    border-radius: 999px;
}
.mt-startup-pcc__behavior-tabs span + span {
    margin-left: 12px;
}
.mt-startup-pcc__behavior-content {
    padding: 0 16px 16px;
}
.mt-startup-pcc__control-card {
    padding: 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(26, 36, 64, 0.06);
}
.mt-startup-pcc__control-title {
    width: 160px;
    height: 14px;
}
.mt-startup-pcc__control-periods {
    display: flex;
    height: 48px;
    margin-top: 16px;
}
.mt-startup-pcc__control-periods span {
    flex: 1;
    border-radius: 12px;
}
.mt-startup-pcc__control-periods span + span {
    margin-left: 8px;
}
.mt-startup-pcc__control-usage {
    width: 150px;
    height: 12px;
    margin-top: 20px;
}
.mt-startup-pcc__control-meter {
    height: 6px;
    margin-top: 12px;
}
.mt-startup-pcc__control-input {
    height: 48px;
    margin-top: 16px;
}
html[data-pcc-startup-tab='my'] .mt-startup-pcc__header,
html[data-pcc-startup-tab='my'] .mt-startup-pcc__games,
html[data-pcc-startup-tab='my'] .mt-startup-pcc__social {
    display: none;
}
html[data-pcc-startup-tab='my'] .mt-startup-pcc__my {
    display: block;
    padding: 16px;
}
.mt-startup-pcc__my,
.mt-startup-pcc__my * {
    box-sizing: border-box;
}
.mt-startup-pcc__my-header {
    height: 52px;
    padding-top: 8px;
}
.mt-startup-pcc__my-header > span {
    width: 200px;
    height: 14px;
}
.mt-startup-pcc__my-pending {
    height: 150px;
    padding: 16px 15px 0 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.mt-startup-pcc__my-pending > span {
    width: 160px;
    height: 12px;
    margin-bottom: 12px;
}
.mt-startup-pcc__my-accounts {
    margin-top: 20px;
}
.mt-startup-pcc__my-row {
    display: flex;
    height: 76px;
}
.mt-startup-pcc__my-row > i {
    flex: 0 0 48px;
    height: 48px;
    margin-top: 14px;
    border-radius: 50%;
}
.mt-startup-pcc__my-row > div {
    margin: 20px 0 0 14px;
}
.mt-startup-pcc__my-row span {
    width: 160px;
    height: 12px;
}
.mt-startup-pcc__my-row span + span {
    width: 120px;
    height: 8px;
    margin-top: 8px;
}
.mt-startup-pcc__my-row > b {
    flex: 0 0 8px;
    height: 24px;
    margin: 26px 8px 0 auto;
}
.mt-startup-pcc__my-row.is-request {
    height: 56px;
}
.mt-startup-pcc__my-row.is-request > i {
    flex-basis: 40px;
    height: 40px;
    margin-top: 8px;
}
.mt-startup-pcc__my-row.is-request > div {
    margin: 15px 0 0 10px;
}
.mt-startup-pcc__my-row.is-request span {
    width: 150px;
    height: 10px;
}
.mt-startup-pcc__my-row.is-request span + span {
    width: 100px;
    height: 8px;
    margin-top: 7px;
}
.mt-startup-pcc__my-row.is-request > b {
    flex-basis: 72px;
    height: 28px;
    margin: 4px 0 0 auto;
    border-radius: 14px;
}