:root {
    --gp-accent: #7d39ff;
    --gp-accent-deep: #5e22d6;
    --gp-accent-soft: rgba(125, 57, 255, .12);
    --gp-canvas: #f6f3ec;
    --gp-card: #ffffff;
    --gp-bone: #f9f7f3;
    --gp-ink: #202020;
    --gp-muted: #66615b;
    --gp-line: rgba(32, 32, 32, .12);
    --gp-display: "Arial Black", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --gp-ui: "Inter", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif
}

#app .gpc-vue-console {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-width: 320px;
    min-height: 100svh;
    background: #f9f7f3;
    color: #202020;
    font-family: Inter, Segoe UI, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif
}

#app .gpc-vue-console .gp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px
}

#app .gpc-vue-console .gp-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

#app .gpc-vue-console .gp-checkout,
#app .gpc-vue-console .gp-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, .8fr);
    gap: 24px;
    align-items: start
}

#app .gpc-vue-console .gp-page-stack {
    display: grid;
    gap: 24px
}

#app .gpc-vue-console .gp-card,
#app .gpc-vue-console .gp-plan,
#app .gpc-vue-console .gp-table-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px;
    background: #fff;
    box-shadow: none
}

#app .gpc-vue-console .gp-card h2,
#app .gpc-vue-console .gp-plan h2 {
    margin: 18px 0 0;
    color: #202020;
    font-family: Arial Black, Microsoft YaHei UI, Microsoft YaHei, sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0
}

#app .gpc-vue-console .gp-card p,
#app .gpc-vue-console .gp-plan p {
    margin: 14px 0 0;
    color: #575757;
    font-size: 14px;
    line-height: 1.55
}

#app .gpc-vue-console .gp-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #7d39ff1f;
    color: #5f24d6;
    font-size: 12px;
    font-weight: 800
}

#app .gpc-vue-console .gp-primary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid #7d39ff;
    border-radius: 999px;
    background: #7d39ff;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700
}

#app .gpc-vue-console .gp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

#app .gpc-vue-console .gp-actions button,
#app .gpc-vue-console .gp-card>button,
#app .gpc-vue-console .gp-plan>button,
#app .gpc-vue-console .gp-table button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 999px;
    background: #fff;
    color: #202020;
    font-size: 14px;
    font-weight: 700;
    margin-top: 14px;
}

#app .gpc-vue-console .gp-actions button.gp-primary,
#app .gpc-vue-console button.gp-primary {
    border-color: #7d39ff;
    background: #7d39ff;
    color: #fff;
    margin-top: 14px;
}

#app .gpc-vue-console .gp-progress {
    height: 10px;
    overflow: hidden;
    margin-top: 18px;
    border-radius: 999px;
    background: #ece7dd
}

#app .gpc-vue-console .gp-progress i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #7d39ff
}

#app .gpc-vue-console .gp-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px;
    background: #fff
}

#app .gpc-vue-console .gp-table .head,
#app .gpc-vue-console .gp-table .row {
    display: grid;
    gap: 16px;
    align-items: center;
    min-height: 58px;
    padding: 14px 20px;
    border-top: 1px solid rgba(32, 32, 32, .12);
    color: #3a3a3a;
    font-size: 14px
}

#app .gpc-vue-console .gp-table .head {
    min-height: 48px;
    border-top: 0;
    background: #f3f0e8;
    color: #575757;
    font-size: 13px;
    font-weight: 700
}

#app .gpc-vue-console .gp-table strong {
    color: #202020;
    font-weight: 800
}

#app .gpc-vue-console .gp-table:not(.node):not(.invite):not(.commission):not(.traffic):not(.ticket) .head,
#app .gpc-vue-console .gp-table:not(.node):not(.invite):not(.commission):not(.traffic):not(.ticket) .row {
    min-width: 980px;
    grid-template-columns: minmax(220px, 1.25fr) minmax(110px, .7fr) minmax(120px, .75fr) minmax(120px, .75fr) minmax(180px, 1fr) minmax(100px, .6fr)
}

#app .gpc-vue-console .gp-table.node .head,
#app .gpc-vue-console .gp-table.node .row {
    min-width: 860px;
    grid-template-columns: minmax(240px, 1.25fr) minmax(110px, .55fr) minmax(100px, .5fr) minmax(220px, 1fr)
}

#app .gpc-vue-console .gpc-kpi-card {
    background: #fff !important
}

#app .gpc-vue-console .gpc-kpi-card .gpc-pill.is-current-plan {
    border-color: #7d39ff !important;
    background: #7d39ff !important;
    color: #fff !important
}

#app .gpc-vue-console .gpc-kpi-card .gpc-pill.is-subscribe-active {
    border-color: #39ff7d !important;
    background: #39ff7d !important;
    color: #202020 !important
}

#app .gpc-vue-console .gpc-kpi-card .gpc-pill.is-subscribe-expired {
    border-color: #ff3958 !important;
    background: #ff3958 !important;
    color: #fff !important
}

#app .gpc-vue-console .gpc-kpi-card .gpc-pill.is-subscribe-inactive {
    border-color: rgba(32, 32, 32, .16) !important;
    background: #e9e7e2 !important;
    color: #575757 !important
}

#app .gpc-vue-console .gpc-workspace-section>h2,
#app .gpc-vue-console #gpc-shortcut-title {
    font-size: 22px !important
}

#app .gpc-vue-console .gpc-shell {
    display: contents !important;
    transition: grid-template-columns .22s ease
}

#app .gpc-vue-console .gpc-nav {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff !important
}

#app .gpc-vue-console .gpc-nav-leading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px
}

#app .gpc-vue-console .gpc-nav-toggle {
    flex: 0 0 auto
}

#app .gpc-vue-console .gpc-nav-title {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: #202020;
    font-family: Inter, Segoe UI, Microsoft YaHei UI, Microsoft YaHei, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

#app .gpc-vue-console .gpc-sidebar {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: relative;
    width: 248px;
    min-height: 100svh;
    overflow: hidden;
    background: #fff !important;
    transition: width .22s ease, padding .22s ease, opacity .18s ease
}

#app .gpc-vue-console .gpc-workspace {
    grid-column: 2;
    grid-row: 2
}

#app .gpc-vue-console .gpc-sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    margin: 0 0 24px
}

#app .gpc-vue-console .gpc-sidebar-head .gpc-brand {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0
}

#app .gpc-vue-console .gpc-sidebar-head .gpc-brand img {
    width: 138px;
    max-width: 100%
}

#app .gpc-vue-console .gpc-sidebar-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px !important;
    background: #fff;
    color: #202020
}

#app .gpc-vue-console .gpc-sidebar-toggle span,
#app .gpc-vue-console .gpc-sidebar-toggle span:before,
#app .gpc-vue-console .gpc-sidebar-toggle span:after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: ""
}

#app .gpc-vue-console .gpc-sidebar-toggle span {
    position: relative
}

#app .gpc-vue-console .gpc-sidebar-toggle span:before,
#app .gpc-vue-console .gpc-sidebar-toggle span:after {
    position: absolute;
    left: 0
}

#app .gpc-vue-console .gpc-sidebar-toggle span:before {
    top: -5px
}

#app .gpc-vue-console .gpc-sidebar-toggle span:after {
    top: 5px
}

#app .gpc-vue-console.is-sidebar-collapsed .gpc-shell {
    grid-template-columns: 0 minmax(0, 1fr) !important
}

#app .gpc-vue-console.is-sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr)
}

#app .gpc-vue-console.is-sidebar-collapsed .gpc-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    padding-right: 0 !important;
    padding-left: 0 !important;
    opacity: 0;
    pointer-events: none
}

#app .gpc-vue-console.is-sidebar-collapsed .gpc-sidebar>* {
    visibility: hidden
}

#app .gpc-vue-console .gpc-dialog-actions {
    justify-content: flex-start
}

#app .gpc-vue-console .gpc-dialog-actions .gpc-button {
    min-width: 0;
    padding: 0 16px;
    font-size: 13px
}

#app .gpc-vue-console .gpc-dialog-close {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important
}

#app .gpc-vue-console .gpc-dialog-close span,
#app .gpc-vue-console .gpc-dialog-close span:before,
#app .gpc-vue-console .gpc-dialog-close span:after {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: #202020;
    content: "";
    transform-origin: center
}

#app .gpc-vue-console .gpc-dialog-close span {
    background: transparent;
    transform: translate(-50%, -50%)
}

#app .gpc-vue-console .gpc-dialog-close span:before {
    transform: translate(-50%, -50%) rotate(45deg)
}

#app .gpc-vue-console .gpc-dialog-close span:after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

#app .gpc-vue-console .gpc-subscribe-input-group {
    display: flex;
    align-items: stretch;
    margin-top: 8px
}

#app .gpc-vue-console .gpc-subscribe-input-group input {
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

#app .gpc-vue-console .gpc-subscribe-input-group .gpc-button {
    flex: 0 0 auto;
    min-height: 46px;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    white-space: nowrap
}

#app .gpc-vue-console .gpc-client-imports {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px
}

#app .gpc-vue-console .gpc-client-icon {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px;
    background: #fff;
    color: #202020;
    text-decoration: none
}

#app .gpc-vue-console .gpc-client-icon:hover {
    border-color: #7d39ff59;
    background: #7d39ff14
}

#app .gpc-vue-console .gpc-client-icon img {
    width: 42px;
    height: 42px;
    display: block;
    object-fit: contain;
    border-radius: 8px
}

#app .gpc-vue-console .gpc-client-icon strong {
    max-width: 100%;
    overflow: hidden;
    color: #202020;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

#app .gpc-vue-console .gpc-plan-card .gpc-plan-description {
    margin: 0 0 24px
}

#app .gpc-vue-console .gpc-card,
#app .gpc-vue-console .gpc-plan-card,
#app .gpc-vue-console .gpc-plan-detail-card,
#app .gpc-vue-console .gpc-order-card {
    background: #fff !important
}

#app .gpc-vue-console .gpc-plan-description {
    color: #3f3f46;
    font-size: 14px;
    line-height: 1.75
}

#app .gpc-vue-console .gpc-plan-description p,
#app .gpc-vue-console .gpc-plan-description ul {
    margin: 0 0 12px
}

#app .gpc-vue-console .gpc-plan-description ul {
    padding-left: 0
}

#app .gpc-vue-console .gpc-plan-description li+li {
    margin-top: 6px
}

#app .gpc-vue-console .gpc-plan-description h3,
#app .gpc-vue-console .gpc-plan-description h4,
#app .gpc-vue-console .gpc-plan-description h5,
#app .gpc-vue-console .gpc-plan-description h6 {
    margin: 16px 0 8px;
    color: #202020;
    font-size: 16px;
    line-height: 1.35
}

#app .gpc-vue-console .gpc-plan-description strong {
    color: #202020;
    font-weight: 700
}

#app .gpc-vue-console .gpc-plan-description code {
    border-radius: 4px;
    background: #f4f2ff;
    color: #7d39ff;
    padding: 2px 5px;
    font-size: 12px
}

#app .gpc-vue-console .gpc-plan-card .gpc-button {
    width: 100%;
    margin-top: auto
}

#app .gpc-vue-console .gpc-order-card .gpc-button {
    width: 100%;
    margin-top: 24px
}

#app .gpc-vue-console .gpc-info-grid .gpc-card h3 {
    margin: 18px 0 0
}

#app .gpc-vue-console .gpc-dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .36fr);
    gap: 28px;
    align-items: start
}

#app .gpc-vue-console .gpc-dashboard-main,
#app .gpc-vue-console .gpc-dashboard-aside {
    min-width: 0
}

#app .gpc-vue-console .gpc-dashboard-main .gpc-workspace-section:first-of-type,
#app .gpc-vue-console .gpc-dashboard-aside .gpc-workspace-section:first-child {
    margin-top: 0
}

#app .gpc-vue-console .gpc-dashboard-main .gpc-kpi-grid+.gpc-workspace-section {
    margin-top: 36px
}

#app .gpc-vue-console .gpc-dashboard-layout .gpc-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

#app .gpc-vue-console .gpc-client-download-section {
    margin-top: 36px;
    margin-bottom: 36px;
}

#app .gpc-vue-console .gpc-client-download-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px
}

#app .gpc-vue-console .gpc-client-download-card {
    --gpc-client-grad: linear-gradient(145deg, #7d39ff 0%, #5eead4 100%);
    position: relative;
    min-height: 218px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    overflow: hidden;
    border-radius: 28px;
    background: var(--gpc-client-grad) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform-style: preserve-3d;
    perspective: 900px;
    box-shadow: 0 24px 44px rgba(32, 32, 32, .22);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1), box-shadow .48s ease
}

#app .gpc-vue-console .gpc-client-download-card:before {
    content: "";
    position: absolute;
    inset: -40% -20% auto auto;
    width: 150px;
    aspect-ratio: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
    filter: blur(2px);
    transform: translate3d(0, 0, 34px)
}

#app .gpc-vue-console .gpc-client-download-card:hover {
    color: #fff !important;
    transform: translateY(-8px) rotate3d(1, -1, 0, 12deg);
    box-shadow: 0 34px 62px rgba(32, 32, 32, .28), 0 0 42px rgba(125, 57, 255, .24)
}

#app .gpc-vue-console .gpc-client-download-card.is-ios {
    --gpc-client-grad: linear-gradient(145deg, #202020 0%, #7d39ff 64%, #a78bfa 100%)
}

#app .gpc-vue-console .gpc-client-download-card.is-android {
    --gpc-client-grad: linear-gradient(145deg, #0f766e 0%, #22c55e 52%, #bef264 100%)
}

#app .gpc-vue-console .gpc-client-download-card.is-macos {
    --gpc-client-grad: linear-gradient(145deg, #111827 0%, #2563eb 52%, #22d3ee 100%)
}

#app .gpc-vue-console .gpc-client-download-card.is-disabled {
    cursor: default
}

#app .gpc-vue-console .gpc-client-download-glass {
    position: absolute;
    inset: 8px;
    border-radius: 26px;
    border-top-right-radius: 56px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
    transform: translate3d(0, 0, 22px);
    pointer-events: none
}

#app .gpc-vue-console .gpc-client-download-orbit {
    position: absolute;
    right: -12px;
    top: -10px;
    width: 124px;
    height: 124px;
    transform-style: preserve-3d;
    pointer-events: none
}

#app .gpc-vue-console .gpc-client-download-orbit span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .08);
    transition: transform .48s ease
}

#app .gpc-vue-console .gpc-client-download-orbit span:nth-child(2) {
    inset: 18px
}

#app .gpc-vue-console .gpc-client-download-orbit span:nth-child(3) {
    inset: 36px
}

#app .gpc-vue-console .gpc-client-download-orbit span:nth-child(4) {
    inset: 54px;
    background: rgba(255, 255, 255, .72)
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-orbit span:nth-child(2) {
    transform: translate3d(0, 0, 32px)
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-orbit span:nth-child(3) {
    transform: translate3d(0, 0, 54px)
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-orbit span:nth-child(4) {
    transform: translate3d(0, 0, 76px)
}

#app .gpc-vue-console .gpc-client-download-content,
#app .gpc-vue-console .gpc-client-download-action {
    position: relative;
    z-index: 2;
    transform: translate3d(0, 0, 30px)
}

#app .gpc-vue-console .gpc-client-download-content em {
    display: block;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .08em
}

#app .gpc-vue-console .gpc-client-download-content strong {
    display: block;
    margin-top: 46px;
    color: #fff !important;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.12
}

#app .gpc-vue-console .gpc-client-download-content span {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5
}

#app .gpc-vue-console .gpc-client-download-action {
    width: fit-content;
    margin-top: 22px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff !important;
    font-size: 12px;
    font-weight: 900
}

#app .gpc-vue-console .gpc-dashboard-aside {
    display: grid;
}

@media(max-width:1280px) {
    #app .gpc-vue-console .gpc-dashboard-layout .gpc-client-download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-list {
    grid-template-columns: 1fr
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-card {
    min-height: 0
}

#app .gpc-vue-console .gp-notice-carousel {
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease
}

#app .gpc-vue-console .gp-notice-carousel:hover,
#app .gpc-vue-console .gp-notice-carousel:focus-visible {
    border-color: #7d39ff6b;
    background: #fcfbff !important;
    outline: none
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-content {
    max-height: 84px
}

#app .gpc-vue-console .gp-notice-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px
}

#app .gpc-vue-console .gp-notice-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #2020202e
}

#app .gpc-vue-console .gp-notice-dots span.is-active {
    width: 18px;
    background: #7d39ff
}

#app .gpc-vue-console .gpc-invite-promo-card {
    display: grid;
    gap: 18px
}

#app .gpc-vue-console .gpc-invite-promo-card h2 {
    margin: 0;
    color: #202020;
    font-family: Arial Black, Microsoft YaHei UI, Microsoft YaHei, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.08
}

#app .gpc-vue-console .gpc-invite-promo-card p {
    margin: 0;
    color: #575757;
    font-size: 14px;
    line-height: 1.65
}

#app .gpc-vue-console .gpc-invite-rate {
    min-height: 96px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(125, 57, 255, .2);
    border-radius: 8px;
    background: #7d39ff14
}

#app .gpc-vue-console .gpc-invite-rate span,
#app .gpc-vue-console .gpc-invite-stats span,
#app .gpc-vue-console .gpc-invite-code span {
    color: #66615b;
    font-size: 12px;
    font-weight: 700
}

#app .gpc-vue-console .gpc-invite-rate strong {
    color: #7d39ff;
    font-family: Arial Black, Microsoft YaHei UI, Microsoft YaHei, sans-serif;
    font-size: 42px;
    line-height: 1
}

#app .gpc-vue-console .gpc-invite-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px;
    overflow: hidden
}

#app .gpc-vue-console .gpc-invite-stats div {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid rgba(32, 32, 32, .12);
    border-left: 1px solid rgba(32, 32, 32, .12);
    background: #fff
}

#app .gpc-vue-console .gpc-invite-stats div:nth-child(-n+2) {
    border-top: 0
}

#app .gpc-vue-console .gpc-invite-stats div:nth-child(odd) {
    border-left: 0
}

#app .gpc-vue-console .gpc-invite-stats strong,
#app .gpc-vue-console .gpc-invite-code strong {
    color: #202020;
    font-size: 20px;
    line-height: 1.1
}

#app .gpc-vue-console .gpc-invite-code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px;
    background: #f9f7f3
}

#app .gpc-vue-console .gpc-invite-code span {
    grid-column: 1 / -1
}

#app .gpc-vue-console .gpc-invite-code strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#app .gpc-vue-console .gpc-invite-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

#app .gpc-vue-console .gp-notice-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px
}

#app .gpc-vue-console .gp-notice-card {
    display: grid;
    gap: 14px
}

#app .gpc-vue-console .gp-notice-card h3 {
    margin: 14px 0 0;
    color: #202020;
    font-size: 18px;
    line-height: 1.35
}

#app .gpc-vue-console .gp-notice-card p {
    margin: 6px 0 0;
    color: #66615b;
    font-size: 12px
}

#app .gpc-vue-console .gp-notice-content,
#app .gpc-vue-console .gp-notice-dialog-body {
    color: #3f3f46;
    font-size: 14px;
    line-height: 1.75
}

#app .gpc-vue-console .gp-notice-content {
    max-height: 96px;
    overflow: hidden
}

#app .gpc-vue-console .gp-notice-content :where(p, ul, ol),
#app .gpc-vue-console .gp-notice-dialog-body :where(p, ul, ol) {
    margin: 0 0 12px
}

#app .gpc-vue-console .gp-notice-content :where(ul, ol),
#app .gpc-vue-console .gp-notice-dialog-body :where(ul, ol) {
    padding-left: 18px
}

#app .gpc-vue-console .gp-notice-dialog-body {
    margin-top: 20px
}

html,
body,
#app {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    background: var(--gp-canvas);
    color: var(--gp-ink);
    font-family: var(--gp-ui);
    letter-spacing: 0
}

* {
    box-sizing: border-box
}

button,
input,
select,
textarea {
    font: inherit;
    letter-spacing: 0
}

button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    background: #fff;
    color: var(--gp-ink);
    cursor: pointer
}

button:hover {
    border-color: #7d39ff59;
    background: var(--gp-accent-soft)
}

button:disabled {
    cursor: not-allowed;
    opacity: .58
}

input,
select,
textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    background: #fff;
    color: var(--gp-ink)
}

textarea {
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--gp-accent);
    outline: 3px solid rgba(125, 57, 255, .18)
}

.gp-primary {
    border-color: var(--gp-accent);
    background: var(--gp-accent);
    color: #fff;
    font-weight: 800
}

.gp-primary:hover {
    border-color: var(--gp-accent-deep);
    background: var(--gp-accent-deep)
}

.gp-login-native {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 32px;
    background: var(--gp-canvas)
}

.gp-login-card {
    width: min(100%, 440px);
    display: grid;
    gap: 18px;
    padding: 36px;
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    background: var(--gp-card)
}

.gp-login-logo {
    width: 150px;
    height: 38px;
    object-fit: contain;
    object-position: left center
}

.gp-login-card h1,
.gp-topbar h1,
.gp-card h2,
.gp-plan h2 {
    margin: 0;
    color: var(--gp-ink);
    font-family: var(--gp-display);
    font-weight: 800;
    line-height: 1.05
}

.gp-login-card h1 {
    font-size: 42px
}

.gp-login-card p,
.gp-topbar p,
.gp-card p,
.gp-plan p {
    margin: 0;
    color: var(--gp-muted);
    font-size: 14px;
    line-height: 1.55
}

.gp-login-card label {
    display: grid;
    gap: 8px;
    color: var(--gp-ink);
    font-size: 13px;
    font-weight: 800
}

.gp-user-shell {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    background: var(--gp-canvas)
}

.gp-sidebar {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 18px 16px;
    border-right: 1px solid var(--gp-line);
    background: var(--gp-bone)
}

.gp-brand {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 8px
}

.gp-brand img {
    width: 138px;
    height: 32px;
    object-fit: contain;
    object-position: left center
}

.gp-sidebar nav {
    display: grid;
    gap: 6px
}

.gp-sidebar nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border-radius: 8px;
    color: var(--gp-muted);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none
}

.gp-sidebar nav a span {
    width: 22px;
    color: #8a8580;
    text-align: center
}

.gp-sidebar nav a:hover {
    background: #fff;
    color: var(--gp-ink)
}

.gp-sidebar nav a.active {
    background: var(--gp-accent);
    color: #fff
}

.gp-sidebar nav a.active span {
    color: #fff
}

.gp-main {
    min-width: 0;
    padding: 34px 40px 64px
}

.gp-topbar {
    min-height: 76px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px
}

.gp-topbar h1 {
    font-size: 32px
}

.gp-topbar p {
    margin-top: 8px
}

.gp-account {
    display: flex;
    align-items: center;
    gap: 12px
}

.gp-account strong {
    max-width: 240px;
    overflow: hidden;
    color: var(--gp-ink);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.gp-grid,
.gp-checkout,
.gp-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px
}

.gp-page-stack {
    display: grid;
    gap: 18px
}

.gp-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.gp-profile-page .gp-profile-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.gp-profile-page .gp-profile-masonry-grid .gp-card {
    width: 100%;
    display: block;
    margin: 0;
    break-inside: avoid
}

#app .gpc-vue-console .gp-profile-page .gp-profile-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start
}

#app .gpc-vue-console .gp-profile-page .gp-profile-masonry-grid .gp-card {
    display: block;
    margin: 0
}

.gp-form-grid.compact {
    grid-template-columns: minmax(0, 1fr) 180px
}

.gp-card,
.gp-plan,
.gp-table-card {
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    background: var(--gp-card)
}

.gp-span-2 {
    grid-column: span 2
}

.gp-card h2,
.gp-plan h2 {
    margin-top: 16px;
    font-size: 34px
}

.gp-section-title {
    margin: 0 0 18px;
    color: var(--gp-ink);
    font-family: var(--gp-display);
    font-size: 22px !important;
    line-height: 1.1
}

.gp-card p,
.gp-plan p {
    margin-top: 12px
}

.gp-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--gp-accent-soft);
    color: var(--gp-accent-deep);
    font-size: 12px;
    font-weight: 800
}

.gp-progress {
    height: 10px;
    overflow: hidden;
    margin-top: 18px;
    border-radius: 999px;
    background: #ece7dd
}

.gp-progress i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--gp-accent)
}

.gp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

.gp-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.gp-plan {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.gp-plan strong {
    margin-top: auto;
    color: var(--gp-ink);
    font-family: var(--gp-display);
    font-size: 30px;
    line-height: 1
}

.gp-periods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px
}

.gp-periods button {
    min-height: 76px;
    display: grid;
    justify-items: start;
    gap: 8px;
    padding: 14px;
    text-align: left
}

.gp-periods button.active {
    border-color: var(--gp-accent);
    box-shadow: 0 0 0 3px #7d39ff24
}

.gp-table-card {
    overflow-x: auto
}

.gp-table {
    min-width: 920px;
    overflow: hidden;
    border: 1px solid var(--gp-line);
    border-radius: 8px
}

.gp-table .head,
.gp-table .row {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(110px, .6fr) minmax(120px, .7fr) minmax(120px, .7fr) minmax(180px, 1fr) minmax(100px, .6fr);
    gap: 14px;
    align-items: center;
    min-height: 58px;
    padding: 12px 18px;
    border-top: 1px solid var(--gp-line);
    color: var(--gp-muted);
    font-size: 14px
}

.gp-table.node .head,
.gp-table.node .row {
    grid-template-columns: minmax(240px, 1.4fr) minmax(100px, .6fr) minmax(100px, .6fr) minmax(240px, 1fr)
}

.gp-table.invite .head,
.gp-table.invite .row {
    grid-template-columns: minmax(160px, .8fr) minmax(360px, 1.8fr) minmax(120px, .6fr) minmax(100px, .5fr)
}

.gp-table.commission .head,
.gp-table.commission .row {
    grid-template-columns: minmax(220px, 1fr) minmax(160px, .7fr)
}

.gp-table.traffic .head,
.gp-table.traffic .row {
    grid-template-columns: minmax(180px, 1fr) minmax(140px, .8fr) minmax(140px, .8fr) minmax(110px, .6fr) minmax(140px, .8fr)
}

.gp-table .head {
    min-height: 48px;
    border-top: 0;
    background: #f3f0e8;
    color: var(--gp-muted);
    font-size: 13px;
    font-weight: 800
}

.gp-table strong {
    color: var(--gp-ink)
}

.gp-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.gp-list-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 16px;
    flex: 1 1 auto
}

.gp-list-summary span,
.gp-profile-list span,
.gp-profile-list dt,
.gp-field span {
    display: block;
    color: var(--gp-muted);
    font-size: 12px;
    font-weight: 800
}

.gp-list-summary strong {
    display: block;
    margin-top: 6px;
    color: var(--gp-ink);
    font-size: 20px;
    line-height: 1
}

.gp-wallet {
    background: var(--gp-bone)
}

.gp-wallet h2 {
    font-size: 64px
}

.gp-wallet-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px
}

.gp-wallet-metric {
    min-width: 0
}

.gp-wallet-metric+.gp-wallet-metric {
    padding-left: 18px;
    border-left: 1px solid var(--gp-line)
}

.gp-wallet-metric span {
    display: block;
    margin-bottom: 8px;
    color: var(--gp-muted);
    font-size: 12px;
    font-weight: 800
}

.gp-wallet-metric strong {
    display: block;
    min-width: 0;
    color: var(--gp-ink);
    font-family: "Arial Black", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    overflow-wrap: anywhere
}

.gp-traffic-gauge {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--gp-line)
}

.gp-traffic-gauge-visual {
    position: relative;
    max-width: 320px;
    margin: 0 auto
}

.gp-traffic-gauge svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible
}

.gp-traffic-gauge-track,
.gp-traffic-gauge-fill {
    fill: none;
    stroke-width: 18;
    stroke-linecap: round
}

.gp-traffic-gauge-track {
    stroke: rgba(32, 32, 32, .1)
}

.gp-traffic-gauge-fill {
    stroke: var(--gp-accent);
    stroke-dasharray: 100;
    stroke-dashoffset: 100
}

.gp-traffic-gauge-center {
    position: absolute;
    left: 50%;
    top: 58%;
    min-width: 150px;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none
}

.gp-traffic-gauge-center span,
.gp-traffic-gauge-footer span {
    display: block;
    color: var(--gp-muted);
    font-size: 14px;
    font-weight: 800
}

.gp-traffic-gauge-center strong {
    display: block;
    margin-top: 6px;
    color: var(--gp-ink);
    font-size: 26px;
    font-weight: 800;
    line-height: 1
}

.gp-traffic-gauge-center em {
    display: block;
    margin-top: 8px;
    color: var(--gp-accent);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    line-height: 1
}

.gp-traffic-gauge-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: -2px
}

.gp-traffic-gauge-footer strong {
    min-width: 0;
    color: var(--gp-ink);
    font-size: 16px;
    font-weight: 800;
    overflow-wrap: anywhere
}

.gp-traffic-gauge-footer span {
    flex: 0 0 auto;
    text-align: right
}

.gp-profile-list {
    display: grid;
    gap: 0;
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--gp-line);
    border-radius: 8px
}

.gp-profile-list div {
    display: grid;
    grid-template-columns: minmax(150px, .6fr) minmax(220px, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 54px;
    padding: 12px 16px;
    border-top: 1px solid var(--gp-line)
}

.gp-profile-list div:first-child {
    border-top: 0
}

.gp-profile-list strong {
    color: var(--gp-ink)
}

.gp-wallet .gp-profile-list {
    grid-template-columns: minmax(150px, .6fr) minmax(0, 1fr);
    gap: 10px 16px;
    margin: 22px 0 0;
    padding-top: 18px;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--gp-line);
    border-radius: 0
}

.gp-wallet .gp-profile-list dt {
    margin: 0
}

.gp-wallet .gp-profile-list dd {
    min-width: 0;
    margin: 0;
    color: var(--gp-ink);
    font-weight: 800;
    overflow-wrap: anywhere
}

.gp-field {
    display: grid;
    gap: 8px;
    margin-top: 16px
}

.gp-ticket-combo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    overflow: hidden;
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease
}

.gp-ticket-combo:hover {
    border-color: rgba(32, 32, 32, .3)
}

.gp-ticket-combo:focus-within {
    border-color: var(--gp-accent);
    box-shadow: 0 0 0 3px rgba(125, 57, 255, .18)
}

.gp-ticket-combo input,
.gp-ticket-combo select,
.gp-ticket-combo input:focus,
.gp-ticket-combo select:focus {
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: 0;
    box-shadow: none
}

.gp-ticket-combo select {
    width: auto;
    min-width: max-content;
    padding-right: 32px;
    border-left: 1px solid var(--gp-line)
}

.gp-check {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gp-ink);
    font-size: 14px
}

.gp-check input {
    width: 18px;
    min-height: 18px
}

#app .gpc-vue-console .gp-check input,
#app .gpc-vue-console .gpc-toggle-row input {
    width: 46px;
    height: 26px;
    min-height: 26px;
    flex: 0 0 46px;
    appearance: none;
    position: relative;
    padding: 0;
    border: 1px solid rgba(32, 32, 32, .14);
    border-radius: 999px;
    outline: 0;
    background: #e8e2d8;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease
}

#app .gpc-vue-console .gp-check input::after,
#app .gpc-vue-console .gpc-toggle-row input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(32, 32, 32, .18);
    transition: transform .16s ease
}

#app .gpc-vue-console .gp-check input:checked,
#app .gpc-vue-console .gpc-toggle-row input:checked {
    border-color: var(--gp-accent);
    background: var(--gp-accent)
}

#app .gpc-vue-console .gp-check input:checked::after,
#app .gpc-vue-console .gpc-toggle-row input:checked::after {
    transform: translateX(20px)
}

#app .gpc-vue-console .gp-check input:focus-visible,
#app .gpc-vue-console .gpc-toggle-row input:focus-visible {
    box-shadow: 0 0 0 3px rgba(125, 57, 255, .18)
}

.gp-messages {
    display: grid;
    gap: 14px
}

.gp-message {
    max-width: 760px;
    padding: 14px 16px;
    border: 1px solid var(--gp-line);
    border-radius: 8px;
    background: var(--gp-bone)
}

.gp-message.me {
    justify-self: end;
    background: var(--gp-accent-soft)
}

.gp-message p {
    margin: 0;
    color: var(--gp-ink);
    white-space: pre-wrap
}

.gp-message span {
    display: block;
    margin-top: 8px;
    color: var(--gp-muted);
    font-size: 12px
}

.gp-doc-list {
    display: grid;
    gap: 16px;
    margin-top: 18px
}

.gp-doc-list article {
    padding-top: 16px;
    border-top: 1px solid var(--gp-line)
}

.gp-doc-list article:first-child {
    padding-top: 0;
    border-top: 0
}

.gp-doc-list h2 {
    margin: 0 0 10px;
    color: var(--gp-ink);
    font-family: var(--gp-display);
    font-size: 22px
}

.gp-doc-list :where(p, ul, ol) {
    color: var(--gp-muted);
    font-size: 14px;
    line-height: 1.65
}

#app .gpc-vue-console .gp-doc-body {
    color: var(--gp-muted);
    font-size: 14px;
    line-height: 1.7
}

#app .gpc-vue-console .gp-doc-body :where(p, ul, ol, pre, blockquote) {
    margin: 12px 0 0
}

#app .gpc-vue-console .gp-doc-body :where(h1, h2, h3, h4) {
    margin: 18px 0 8px;
    color: var(--gp-ink);
    font-family: var(--gp-display);
    font-weight: 800;
    line-height: 1.18
}

#app .gpc-vue-console .gp-doc-body h1 {
    font-size: 28px
}

#app .gpc-vue-console .gp-doc-body h2 {
    font-size: 24px
}

#app .gpc-vue-console .gp-doc-body h3,
#app .gpc-vue-console .gp-doc-body h4 {
    font-size: 18px
}

#app .gpc-vue-console .gp-doc-body ul,
#app .gpc-vue-console .gp-doc-body ol {
    padding-left: 1.2em
}

#app .gpc-vue-console .gp-doc-body code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--gp-bone);
    color: var(--gp-ink)
}

#app .gpc-vue-console .gp-doc-body a {
    color: var(--gp-accent);
    font-weight: 700
}

.gp-notice,
.gp-error,
.gp-loading {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 14px
}

.gp-notice {
    background: #1b92521a;
    color: #137044
}

.gp-error {
    background: #cd2c2c1a;
    color: #b32626
}

.gp-loading {
    background: var(--gp-accent-soft);
    color: var(--gp-accent-deep)
}

#app .gpc-vue-console .gp-order-page,
#app .gpc-vue-console .gp-node-page,
#app .gpc-vue-console .gp-traffic-page {
    display: block
}

#app .gpc-vue-console .gp-ticket-table-wrap {
    min-width: 0;
    overflow-x: auto
}

#app .gpc-vue-console .gp-ticket-submit {
    margin-top: 18px
}

#app .gpc-vue-console .gpc-period-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important
}

#app .gpc-vue-console .gpc-period-option {
    border-radius: 8px !important
}

#app .gpc-vue-console .gp-order-no,
#app .gpc-vue-console .gp-record-time {
    color: #3a3a3a;
    font-weight: 400
}

#app .gpc-vue-console .gp-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

#app .gpc-vue-console .gp-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #202020;
    font-weight: 600
}

#app .gpc-vue-console .gpc-row .gp-status-dot {
    min-width: 0
}

#app .gpc-vue-console .gp-status-dot:before {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #8a8580;
    content: ""
}

#app .gpc-vue-console .gp-status-dot.is-complete:before,
#app .gpc-vue-console .gp-status-dot.is-online:before {
    background: #1b9252;
    box-shadow: 0 0 0 4px #1b92521f
}

#app .gpc-vue-console .gp-status-dot.is-pending:before,
#app .gpc-vue-console .gp-status-dot.is-offline:before {
    background: #ff3958;
    box-shadow: 0 0 0 4px #ff39581f
}

#app .gpc-vue-console .gp-status-dot.is-cancelled:before {
    background: #a3a3a3;
    box-shadow: 0 0 0 4px #a3a3a324
}

#app .gpc-vue-console .gp-status-dot.is-processing:before {
    background: #7d39ff;
    box-shadow: 0 0 0 4px #7d39ff1f
}

#app .gpc-vue-console .gp-status-dot.is-pulse:before {
    animation: gpStatusPulse 1.5s ease-in-out infinite
}

@keyframes gpStatusPulse {

    0%,
    to {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(.72);
        opacity: .55
    }
}

#app .gpc-vue-console .gpc-card,
#app .gpc-vue-console .gp-card,
#app .gpc-vue-console .gp-plan,
#app .gpc-vue-console .gp-table-card,
#app .gpc-vue-console .gp-table,
#app .gpc-vue-console .gpc-plan-card,
#app .gpc-vue-console .gpc-plan-detail-card,
#app .gpc-vue-console .gpc-order-card,
#app .gpc-vue-console .gpc-kpi-card {
    background: #fff !important
}

@media(max-width:900px) {
    #app .gpc-vue-console .gp-profile-page .gp-profile-masonry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:980px) {
    #app .gpc-vue-console {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr
    }

    #app .gpc-vue-console.is-sidebar-collapsed {
        grid-template-columns: 1fr !important
    }

    #app .gpc-vue-console .gpc-nav {
        grid-column: 1;
        grid-row: 1
    }

    #app .gpc-vue-console .gpc-nav-leading {
        flex: 1 1 auto
    }

    #app .gpc-vue-console .gpc-nav-title {
        font-size: 15px
    }

    #app .gpc-vue-console .gpc-workspace {
        grid-column: 1;
        grid-row: 3
    }

    #app .gpc-vue-console .gpc-shell {
        display: contents !important
    }

    #app .gpc-vue-console .gpc-sidebar {
        grid-column: 1;
        grid-row: 2;
        display: block;
        position: relative;
        inset: auto;
        z-index: auto;
        width: auto;
        min-height: 0;
        padding: 18px;
        border-right: 0;
        border-bottom: 1px solid rgba(32, 32, 32, .12);
        opacity: 1;
        overflow: visible;
        transform: none;
        box-shadow: none;
        transition: opacity .18s ease
    }

    #app .gpc-vue-console .gpc-sidebar-group {
        display: grid;
        gap: 4px
    }

    #app .gpc-vue-console .gpc-sidebar-group+.gpc-sidebar-group {
        margin-top: 20px
    }

    #app .gpc-vue-console .gpc-sidebar-label {
        display: block;
        margin: 4px 14px 10px
    }

    #app .gpc-vue-console .gpc-side-link {
        width: 100%;
        flex: 0 1 auto;
        margin-top: 0;
        padding: 10px 14px;
        white-space: normal
    }

    #app .gpc-vue-console .gpc-dashboard-layout {
        grid-template-columns: 1fr;
        gap: 24px
    }

    #app .gpc-vue-console .gpc-dashboard-layout .gpc-kpi-grid,
    #app .gpc-vue-console .gpc-dashboard-layout .gpc-client-download-grid,
    #app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut-grid,
    #app .gpc-vue-console .gpc-invite-actions {
        grid-template-columns: 1fr
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-workspace-section:first-child {
        margin-top: 24px
    }

    #app .gpc-vue-console .gpc-invite-promo-card h2 {
        font-size: 26px
    }

    #app .gpc-vue-console .gpc-invite-rate strong {
        font-size: 34px
    }

    #app .gpc-vue-console .gpc-client-imports {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    #app .gpc-vue-console .gp-notice-list {
        grid-template-columns: 1fr
    }

    #app .gpc-vue-console.is-sidebar-collapsed .gpc-shell {
        grid-template-columns: 1fr !important
    }

    #app .gpc-vue-console.is-sidebar-collapsed .gpc-sidebar {
        display: none;
        width: auto;
        min-width: 0;
        padding-right: 0 !important;
        padding-left: 0 !important;
        opacity: 0;
        transform: none;
        pointer-events: none
    }

    #app .gpc-vue-console.is-sidebar-collapsed .gpc-sidebar>* {
        visibility: visible
    }

    #app .gpc-vue-console .gpc-subscribe-input-group {
        display: grid
    }

    #app .gpc-vue-console .gpc-subscribe-input-group input,
    #app .gpc-vue-console .gpc-subscribe-input-group .gpc-button {
        border-radius: 8px !important
    }

    .gp-user-shell {
        grid-template-columns: 1fr
    }

    .gp-sidebar {
        position: static;
        height: auto
    }

    .gp-sidebar nav {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .gp-main {
        padding: 24px 18px 48px
    }

    .gp-grid,
    .gp-checkout,
    .gp-form-grid,
    .gp-form-grid.compact,
    .gp-plans {
        grid-template-columns: 1fr
    }

    .gp-list-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .gp-list-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .gp-span-2 {
        grid-column: auto
    }

    .gp-topbar {
        flex-direction: column
    }
}

#app .gpc-vue-console .gp-notice-carousel {
    position: relative
}

#app .gpc-vue-console .gp-notice-speaker {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(125, 57, 255, .12)
}

#app .gpc-vue-console .gp-notice-speaker:before {
    position: absolute;
    inset: 6px;
    background: #7d39ff;
    content: "";
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E") center/contain no-repeat
}

#app .gpc-vue-console .gp-notice-dots span {
    cursor: pointer;
    transition: width .16s ease, background-color .16s ease
}

#app .gpc-vue-console .gpc-workspace-section {
    margin-bottom: 36px !important
}

#app .gpc-vue-console .gp-notice-carousel,
#app .gpc-vue-console .gpc-invite-promo-card {
    border-top: 3px solid #7d39ff !important
}

@media(max-width:900px) {
    #app .gpc-vue-console .gp-profile-page .gp-form-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        min-width: 0
    }

    #app .gpc-vue-console .gp-profile-page .gp-card {
        width: 100%;
        min-width: 0
    }

    #app .gpc-vue-console .gp-profile-page .gp-profile-list div {
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        gap: 12px
    }

    #app .gpc-vue-console .gp-profile-page .gp-wallet .gp-profile-list {
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        gap: 10px 12px
    }
}

@media(max-width:520px) {
    #app .gpc-vue-console .gp-profile-page .gp-wallet-balance-grid {
        gap: 14px
    }

    #app .gpc-vue-console .gp-profile-page .gp-wallet-metric+.gp-wallet-metric {
        padding-left: 14px
    }

    #app .gpc-vue-console .gp-profile-page .gp-traffic-gauge-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px
    }

    #app .gpc-vue-console .gp-profile-page .gp-traffic-gauge-footer span {
        text-align: left
    }

    #app .gpc-vue-console .gp-profile-page .gp-profile-list div {
        grid-template-columns: 1fr;
        align-items: start
    }

    #app .gpc-vue-console .gp-profile-page .gp-wallet .gp-profile-list {
        grid-template-columns: 1fr;
        gap: 4px;
        align-items: start
    }

    #app .gpc-vue-console .gp-profile-page .gp-wallet .gp-profile-list dd {
        margin-bottom: 8px
    }

    #app .gpc-vue-console .gp-profile-page .gp-wallet .gp-profile-list dd:last-child {
        margin-bottom: 0
    }
}

@media(max-width:980px) {
    #app .gpc-vue-console .gp-table-section {
        min-width: 0
    }

    #app .gpc-vue-console .gp-table-section .gp-section-title {
        margin-bottom: 18px
    }

    #app .gpc-vue-console .gp-table.invite,
    #app .gpc-vue-console .gp-table.commission,
    #app .gpc-vue-console .gp-ticket-table-wrap {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch
    }

    #app .gpc-vue-console .gp-table.invite .head,
    #app .gpc-vue-console .gp-table.invite .row {
        width: 800px;
        min-width: 800px;
        max-width: none;
        grid-template-columns: 140px 360px 140px 96px !important
    }

    #app .gpc-vue-console .gp-table.commission .head,
    #app .gpc-vue-console .gp-table.commission .row {
        width: 420px;
        min-width: 420px;
        max-width: none;
        grid-template-columns: 240px 140px !important
    }

    #app .gpc-vue-console .gp-table.ticket {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow: visible !important
    }

    #app .gpc-vue-console .gp-table.ticket .head,
    #app .gpc-vue-console .gp-table.ticket .row {
        width: 800px;
        min-width: 800px;
        max-width: none;
        grid-template-columns: 210px 86px 106px 146px 146px 106px !important
    }

    #app .gpc-vue-console .gp-table.ticket .head>:last-child,
    #app .gpc-vue-console .gp-table.ticket .row>:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        box-shadow: -1px 0 0 rgba(32, 32, 32, .1)
    }

    #app .gpc-vue-console .gp-table.ticket .head>:last-child {
        z-index: 3;
        background: #f3f0e8
    }

    #app .gpc-vue-console .gp-table.ticket .row>.gp-row-actions button {
        white-space: nowrap
    }
}

@media(max-width:980px) {
    #app .gpc-vue-console .gp-order-page {
        min-width: 0;
        max-width: 100%;
        overflow: visible
    }

    #app .gpc-vue-console .gp-order-page .gp-table {
        position: relative;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch
    }

    #app .gpc-vue-console .gp-order-page .gp-table .head,
    #app .gpc-vue-console .gp-order-page .gp-table .row {
        width: 800px;
        min-width: 800px;
        max-width: none;
        grid-template-columns: 210px 86px 106px 106px 156px 136px !important
    }

    #app .gpc-vue-console .gp-order-page .gp-table .head>:last-child,
    #app .gpc-vue-console .gp-order-page .gp-table .row>:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        box-shadow: -1px 0 0 rgba(32, 32, 32, .1)
    }

    #app .gpc-vue-console .gp-order-page .gp-table .head>:last-child {
        z-index: 3;
        background: #f3f0e8
    }

    #app .gpc-vue-console .gp-order-page .gp-table .row>.gp-row-actions {
        gap: 8px;
        flex-wrap: wrap
    }

    #app .gpc-vue-console .gp-order-page .gp-table .row>.gp-row-actions button {
        white-space: nowrap
    }
}

@media(max-width:980px) {
    #app .gpc-vue-console .gp-traffic-page {
        min-width: 0;
        max-width: 100%;
        overflow: visible
    }

    #app .gpc-vue-console .gp-traffic-page .gp-table.traffic {
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch
    }

    #app .gpc-vue-console .gp-traffic-page .gp-table.traffic .head,
    #app .gpc-vue-console .gp-traffic-page .gp-table.traffic .row {
        width: 600px;
        min-width: 600px;
        max-width: none;
        grid-template-columns: 150px 92px 92px 76px 110px !important
    }
}

@media(max-width:980px) {
    #app .gpc-vue-console .gp-node-page {
        min-width: 0;
        overflow: visible
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent !important
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .head {
        display: none
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row {
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
        align-items: stretch;
        padding: 16px;
        border: 1px solid rgba(32, 32, 32, .12);
        border-radius: 8px;
        background: #fff !important
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>* {
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>strong,
    #app .gpc-vue-console .gp-node-page .gp-table.node .row>span:not(.gp-status-dot) {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
        align-items: center
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>strong:before,
    #app .gpc-vue-console .gp-node-page .gp-table.node .row>span:not(.gp-status-dot):before {
        color: #66615b;
        font-size: 12px;
        font-weight: 700
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>strong:before {
        content: "节点"
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>span:nth-child(3):before {
        content: "倍率"
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>span:nth-child(4):before {
        content: "线路"
    }

    #app .gpc-vue-console .gp-node-page .gp-table.node .row>.gp-status-dot {
        justify-content: flex-start
    }
}

#app .gpc-vue-console .gpc-client-download-card {
    --glass-edge: rgba(255, 255, 255, .85);
    --ux-grad: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
    --ux-title: #00894d;
    --ux-body: rgba(0, 137, 78, .82);
    --ux-cta: #00c37b;
    --ux-orbit: rgba(0, 249, 203, .22);
    height: 300px;
    max-width: 400px;
    margin-inline: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50px !important;
    background: var(--ux-grad) !important;
    color: var(--ux-title) !important;
    filter: drop-shadow(0 28px 50px rgba(0, 40, 30, .45));
    perspective: 1000px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease;
    box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, .28) 0 25px 25px -5px
}

#app .gpc-vue-console .gpc-client-download-card:before {
    display: none
}

#app .gpc-vue-console .gpc-client-download-card:hover {
    transform: rotate3d(1, 1, 0, 28deg);
    box-shadow: rgba(5, 71, 17, .45) 28px 48px 28px -38px, rgba(0, 255, 214, .12) 0 0 60px -10px, rgba(5, 71, 17, .15) 0 25px 35px 0
}

#app .gpc-vue-console .gpc-client-download-card.is-ios {
    --ux-grad: linear-gradient(145deg, #a855f7 0%, #6366f1 40%, #ec4899 100%);
    --ux-title: #3b0764;
    --ux-body: rgba(59, 7, 100, .85);
    --ux-cta: #7c3aed;
    --ux-orbit: rgba(216, 180, 254, .35)
}

#app .gpc-vue-console .gpc-client-download-card.is-android {
    --ux-grad: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #dc2626 100%);
    --ux-title: #7c2d12;
    --ux-body: rgba(124, 45, 18, .88);
    --ux-cta: #c2410c;
    --ux-orbit: rgba(254, 243, 199, .4)
}

#app .gpc-vue-console .gpc-client-download-card.is-macos {
    --ux-grad: linear-gradient(155deg, #22d3ee 0%, #0284c7 50%, #1e3a8a 100%);
    --ux-title: #0c4a6e;
    --ux-body: rgba(12, 74, 110, .88);
    --ux-cta: #0369a1;
    --ux-orbit: rgba(125, 211, 252, .35)
}

#app .gpc-vue-console .gpc-client-download-logo {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    z-index: 2;
    transform-style: preserve-3d;
    pointer-events: none
}

#app .gpc-vue-console .gpc-client-download-logo span {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ux-orbit);
    box-shadow: rgba(100, 100, 111, .25) -10px 10px 24px 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all .5s ease-in-out
}

#app .gpc-vue-console .gpc-client-download-logo span:nth-child(1) {
    width: 170px;
    top: 8px;
    inset-inline-end: 8px;
    transform: translate3d(0, 0, 20px)
}

#app .gpc-vue-console .gpc-client-download-logo span:nth-child(2) {
    width: 140px;
    top: 10px;
    inset-inline-end: 10px;
    transform: translate3d(0, 0, 40px);
    backdrop-filter: blur(4px);
    transition-delay: .05s
}

#app .gpc-vue-console .gpc-client-download-logo span:nth-child(3) {
    width: 110px;
    top: 17px;
    inset-inline-end: 17px;
    transform: translate3d(0, 0, 60px);
    transition-delay: .1s
}

#app .gpc-vue-console .gpc-client-download-logo span:nth-child(4) {
    width: 80px;
    top: 23px;
    inset-inline-end: 23px;
    transform: translate3d(0, 0, 80px);
    transition-delay: .15s
}

#app .gpc-vue-console .gpc-client-download-logo span:nth-child(5) {
    width: 50px;
    top: 30px;
    inset-inline-end: 30px;
    display: grid;
    place-content: center;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    transform: translate3d(0, 0, 100px);
    transition-delay: .2s
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-logo span:nth-child(2) {
    transform: translate3d(0, 0, 60px)
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-logo span:nth-child(3) {
    transform: translate3d(0, 0, 80px)
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-logo span:nth-child(4) {
    transform: translate3d(0, 0, 100px)
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-logo span:nth-child(5) {
    transform: translate3d(0, 0, 120px)
}

#app .gpc-vue-console .gpc-client-download-glass {
    inset: 8px;
    border-radius: 55px;
    border-top-right-radius: 100%;
    border: 0;
    border-inline-start: 1px solid var(--glass-edge);
    border-bottom: 1px solid rgba(255, 255, 255, .75);
    background: linear-gradient(0deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .82) 100%);
    transform: translate3d(0, 0, 25px);
    transition: all .5s ease-in-out
}

#app .gpc-vue-console .gpc-client-download-content {
    position: relative;
    z-index: 3;
    display: block;
    padding: 100px 3.75rem 0 1.85rem;
    transform: translate3d(0, 0, 26px)
}

#app .gpc-vue-console .gpc-client-download-content strong {
    display: block;
    margin: 0;
    color: var(--ux-title) !important;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2
}

#app .gpc-vue-console .gpc-client-download-content span {
    display: block;
    margin-top: 1.05rem;
    color: var(--ux-body);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5
}

#app .gpc-vue-console .gpc-client-download-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    transform: translate3d(0, 0, 26px);
    transform-style: preserve-3d
}

#app .gpc-vue-console .gpc-client-download-dots {
    display: flex;
    gap: 10px;
    transform-style: preserve-3d
}

#app .gpc-vue-console .gpc-client-download-dots i {
    width: 32px;
    aspect-ratio: 1;
    display: block;
    border-radius: 50%;
    background: #fff;
    box-shadow: rgba(5, 71, 17, .45) 0 8px 6px -5px;
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, background .2s
}

#app .gpc-vue-console .gpc-client-download-dots i:nth-child(1) {
    transition-delay: .05s
}

#app .gpc-vue-console .gpc-client-download-dots i:nth-child(2) {
    transition-delay: .1s
}

#app .gpc-vue-console .gpc-client-download-dots i:nth-child(3) {
    transition-delay: .15s
}

#app .gpc-vue-console .gpc-client-download-card:hover .gpc-client-download-dots i {
    transform: translate3d(0, 0, 50px);
    box-shadow: rgba(5, 71, 17, .25) -5px 20px 12px 0
}

#app .gpc-vue-console .gpc-client-download-more {
    width: 42%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--ux-cta);
    transition: transform .2s ease
}

#app .gpc-vue-console .gpc-client-download-more:hover {
    transform: translate3d(0, 0, 10px)
}

#app .gpc-vue-console .gpc-client-download-more em {
    color: var(--ux-cta);
    font-size: .75rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

#app .gpc-vue-console .gpc-client-download-more svg {
    width: 18px;
    max-height: 15px;
    fill: none;
    stroke: var(--ux-cta);
    stroke-width: 3px
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-card {
    min-height: 230px !important;
    height: 230px;
    overflow: hidden
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-content {
    max-height: 86px;
    overflow: hidden
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-section {
    margin-top: 0;
    margin-bottom: 36px;
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card {
    height: 230px;
    min-height: 230px;
    max-width: none;
    border-radius: 34px !important
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-glass {
    border-radius: 38px;
    border-top-right-radius: 100%
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(1) {
    width: 122px;
    top: 8px;
    right: 8px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(2) {
    width: 100px;
    top: 10px;
    right: 10px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(3) {
    width: 78px;
    top: 16px;
    right: 16px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(4) {
    width: 56px;
    top: 22px;
    right: 22px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(5) {
    width: 38px;
    top: 27px;
    right: 27px;
    font-size: 17px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-system-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-content {
    padding: 78px 1.35rem 0 1.2rem
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-content strong {
    font-size: 1rem
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-content span {
    margin-top: .65rem;
    font-size: .78rem;
    line-height: 1.35
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-bottom {
    left: 14px;
    right: 14px;
    bottom: 14px;
    justify-content: center;
    padding: 0
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-dots {
    display: none !important
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-more {
    width: auto;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: rgba(5, 71, 17, .14) 0 10px 22px -14px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-more em {
    font-size: .66rem;
    letter-spacing: .04em;
    white-space: nowrap
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-more svg {
    width: 14px
}

@media (max-width: 900px) {
    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card {
        height: 210px;
        min-height: 210px
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-content {
        padding: 72px 1rem 0
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-content strong {
        font-size: .92rem
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-content span {
        font-size: .72rem
    }
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-carousel {
    cursor: grab;
    touch-action: pan-y;
    user-select: none
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-carousel:active {
    cursor: grabbing
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-dots {
    gap: 8px
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-dots span {
    min-width: 10px;
    width: 10px;
    height: 10px
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-dots span.is-active {
    width: 24px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(1) {
    width: 126px;
    top: 8px;
    right: 8px;
    transform: translate3d(0, 0, 24px)
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(2) {
    width: 96px;
    top: 12px;
    right: 12px;
    transform: translate3d(0, 0, 52px)
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(3) {
    width: 64px;
    top: 22px;
    right: 22px;
    display: grid;
    place-content: center;
    color: #fff;
    transform: translate3d(0, 0, 86px);
    transition-delay: .12s
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(n+4) {
    display: none !important
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-system-icon svg {
    width: 34px;
    height: 34px
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card:hover .gpc-client-download-logo span:nth-child(2) {
    transform: translate3d(0, 0, 72px)
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card:hover .gpc-client-download-logo span:nth-child(3) {
    transform: translate3d(0, 0, 112px)
}

@media (max-width: 900px) {
    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(1) {
        width: 104px;
        top: 8px;
        right: 8px
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(2) {
        width: 80px;
        top: 11px;
        right: 11px
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-logo span:nth-child(3) {
        width: 54px;
        top: 19px;
        right: 19px
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-system-icon svg {
        width: 29px;
        height: 29px
    }
}

#app .gpc-vue-console .gp-notice-slide {
    min-width: 0;
    display: grid;
    gap: 14px;
    will-change: transform, opacity
}

#app .gpc-vue-console .gpc-subscribe-hub {
    --gpc-border-angle: 0deg;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 28px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--gpc-border-angle), rgba(125, 57, 255, .2) 0deg, rgba(125, 57, 255, .2) 210deg, rgba(180, 139, 255, .82) 258deg, #fff 284deg, #7d39ff 306deg, rgba(125, 57, 255, .24) 340deg, rgba(125, 57, 255, .2) 360deg) border-box;

}

#app .gpc-vue-console .gpc-subscribe-hub-main {
    min-width: 0
}

#app .gpc-vue-console .gpc-subscribe-hub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px
}

#app .gpc-vue-console .gpc-subscribe-hub-head h2 {
    margin: 8px 0 0;
    color: #202020;
    font-size: 30px;
    line-height: 1.15
}

#app .gpc-vue-console .gpc-subscribe-hub-head p {
    max-width: 460px;
    margin: 0;
    color: #66615b;
    font-size: 13px;
    line-height: 1.65
}

#app .gpc-vue-console .gpc-subscribe-hub .gpc-subscribe-field {
    margin-top: 22px
}

#app .gpc-vue-console .gpc-subscribe-hub .gpc-client-imports {
    margin-top: 18px
}

#app .gpc-vue-console .gpc-subscribe-qr {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border-left: 1px solid rgba(32, 32, 32, .1);
    text-align: center
}

#app .gpc-vue-console .gpc-subscribe-qr-code {
    width: 166px;
    height: 166px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(32, 32, 32, .12);
    border-radius: 8px;
    background: #fff
}

#app .gpc-vue-console .gpc-subscribe-qr-code canvas,
#app .gpc-vue-console .gpc-subscribe-qr-code img {
    width: 148px !important;
    height: 148px !important;
    display: block
}

#app .gpc-vue-console .gpc-subscribe-qr-placeholder {
    width: 100%;
    color: #8d8d8d;
    font-size: 12px;
    line-height: 1.5
}

#app .gpc-vue-console .gpc-subscribe-qr strong {
    color: #202020;
    font-size: 14px;
    line-height: 1.35
}

#app .gpc-vue-console .gpc-subscribe-qr > span {
    color: #66615b;
    font-size: 12px;
    line-height: 1.45
}

#app .gpc-vue-console .gpc-subscribe-hub + .gpc-shortcut-grid {
    margin-top: 24px
}

@media (max-width: 1100px) {
    #app .gpc-vue-console .gpc-subscribe-hub {
        grid-template-columns: minmax(0, 1fr) 190px;
        padding: 24px
    }

    #app .gpc-vue-console .gpc-subscribe-hub-head {
        display: block
    }

    #app .gpc-vue-console .gpc-subscribe-hub-head p {
        margin-top: 10px
    }

    #app .gpc-vue-console .gpc-subscribe-hub .gpc-client-imports {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 640px) {
    #app .gpc-vue-console .gpc-subscribe-hub {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 20px
    }

    #app .gpc-vue-console .gpc-subscribe-hub-head h2 {
        font-size: 25px
    }

    #app .gpc-vue-console .gpc-subscribe-qr {
        padding: 20px 0 0;
        border-top: 1px solid rgba(32, 32, 32, .1);
        border-left: 0
    }

    #app .gpc-vue-console .gpc-subscribe-hub .gpc-subscribe-input-group {
        display: flex
    }

    #app .gpc-vue-console .gpc-subscribe-hub .gpc-subscribe-input-group input {
        border-radius: 8px 0 0 8px !important
    }

    #app .gpc-vue-console .gpc-subscribe-hub .gpc-subscribe-input-group .gpc-button {
        border-radius: 0 8px 8px 0 !important
    }
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-card {
    --gpc-notice-border-angle: 0deg;
    height: 280px !important;
    min-height: 280px !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--gpc-notice-border-angle), rgba(125, 57, 255, .2) 0deg, rgba(125, 57, 255, .2) 210deg, rgba(180, 139, 255, .82) 258deg, #fff 284deg, #7d39ff 306deg, rgba(125, 57, 255, .24) 340deg, rgba(125, 57, 255, .2) 360deg) border-box !important;
    box-shadow: 0 0 22px rgba(125, 57, 255, .14)
}

#app .gpc-vue-console .gpc-dashboard-aside .gp-notice-content {
    height: 7em;
    max-height: 7em;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4
}

#app .gpc-vue-console .gpc-subscribe-hub-main,
#app .gpc-vue-console .gpc-subscribe-qr {
    position: relative;
    z-index: 1
}

#app .gpc-vue-console .gpc-subscribe-hub .gpc-client-icon img {
    transform-origin: 50% 50%;
    will-change: transform
}

#app .gpc-vue-console .gpc-client-icon.is-disabled {
    cursor: not-allowed;
    opacity: .48
}

#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut:hover,
#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut:focus-visible {
    background: #7d39ff !important;
    color: #fff !important;
    outline: none
}

#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut:hover .gpc-shortcut-index,
#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut:hover > span:last-child,
#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut:focus-visible .gpc-shortcut-index,
#app .gpc-vue-console .gpc-dashboard-layout .gpc-shortcut:focus-visible > span:last-child {
    color: #fff !important
}

#app .gpc-vue-console .gpc-alert-stack,
#app .gpc-vue-console .gpc-status {
    max-height: 240px;
    overflow: hidden
}

#app .gpc-vue-console .gpc-feedback-enter-active,
#app .gpc-vue-console .gpc-feedback-leave-active {
    transition: opacity .38s ease, transform .46s cubic-bezier(.22, 1, .36, 1), max-height .46s cubic-bezier(.22, 1, .36, 1), margin .46s cubic-bezier(.22, 1, .36, 1), padding .46s cubic-bezier(.22, 1, .36, 1)
}

#app .gpc-vue-console .gpc-feedback-enter-from,
#app .gpc-vue-console .gpc-feedback-leave-to {
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    transform: translate3d(0, -10px, 0)
}

#app .gpc-vue-console .gpc-node-subscribe-empty {
    max-width: 620px
}

#app .gpc-vue-console .gpc-node-subscribe-empty h2 {
    margin: 22px 0 10px;
    color: #202020;
    font-size: 30px;
    line-height: 1.2
}

#app .gpc-vue-console .gpc-node-subscribe-empty p {
    margin: 0 0 24px;
    color: #66615b;
    font-size: 14px;
    line-height: 1.65
}

@media (prefers-reduced-motion: reduce) {
    #app .gpc-vue-console .gpc-feedback-enter-active,
    #app .gpc-vue-console .gpc-feedback-leave-active {
        transition-duration: .01ms
    }
}

#app .gpc-vue-console .gpc-notice-trigger {
    position: relative;
    width: 40px;
    min-width: 40px;
    padding: 0;
    transform-origin: 50% 50%;
    will-change: transform
}

#app .gpc-vue-console .gpc-notice-trigger svg {
    width: 19px;
    height: 19px;
    flex-basis: 19px
}

#app .gpc-vue-console .gpc-notice-trigger.is-unread {
    border-color: rgba(125, 57, 255, .42);
    color: #7d39ff
}

#app .gpc-vue-console .gpc-notice-unread-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff3d5f;
    box-shadow: 0 0 0 2px rgba(255, 61, 95, .12);
    pointer-events: none
}

#app .gpc-vue-console .gpc-notice-dialog-backdrop,
#app .gpc-vue-console .gp-notice-dialog {
    will-change: opacity, transform
}

#app .gpc-vue-console .gp-notice-dialog {
    transform-origin: 50% 50%
}

#app .gpc-vue-console .gp-notice-dialog-switch-content {
    min-width: 0;
    will-change: transform, opacity
}

#app .gpc-vue-console .gp-notice-dialog-meta {
    margin: 0;
    color: #77716b;
    font-size: 12px
}

#app .gpc-vue-console .gp-notice-dialog-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(32, 32, 32, .1)
}

#app .gpc-vue-console .gp-notice-dialog-nav button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid rgba(32, 32, 32, .14);
    border-radius: 7px;
    background: #fff;
    color: #202020;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease
}

#app .gpc-vue-console .gp-notice-dialog-nav button:hover:not(:disabled),
#app .gpc-vue-console .gp-notice-dialog-nav button:focus-visible:not(:disabled) {
    border-color: #7d39ff;
    background: #7d39ff;
    color: #fff;
    outline: none
}

#app .gpc-vue-console .gp-notice-dialog-nav button:disabled {
    cursor: not-allowed;
    opacity: .38
}

#app .gpc-vue-console .gp-notice-dialog-nav svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}

#app .gpc-vue-console .gp-notice-dialog-count {
    color: #77716b;
    font-size: 12px;
    white-space: nowrap
}

#app .gpc-vue-console .gpc-shortcut:disabled {
    cursor: not-allowed;
    opacity: .52
}

@media (max-width: 720px) {
    #app .gpc-vue-console .gpc-notice-trigger {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        box-sizing: border-box
    }

    #app .gpc-vue-console .gpc-redeem-trigger {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        box-sizing: border-box
    }

    #app .gpc-vue-console .gpc-redeem-trigger .gpc-nav-action-label {
        display: none
    }

    #app .gpc-vue-console .gpc-notice-unread-dot {
        top: 5px;
        right: 5px
    }

    #app .gpc-vue-console .gpc-notice-dialog-backdrop {
        padding: 12px
    }

    #app .gpc-vue-console .gp-notice-dialog {
        max-height: calc(100svh - 24px);
        display: flex;
        flex-direction: column;
        overflow: hidden
    }

    #app .gpc-vue-console .gp-notice-dialog .gpc-dialog-head,
    #app .gpc-vue-console .gp-notice-dialog-nav {
        flex: 0 0 auto
    }

    #app .gpc-vue-console .gp-notice-dialog-main {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 5px;
        scrollbar-color: #7d39ff rgba(32, 32, 32, .08);
        scrollbar-width: thin;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch
    }

    #app .gpc-vue-console .gp-notice-dialog-main::-webkit-scrollbar {
        width: 5px
    }

    #app .gpc-vue-console .gp-notice-dialog-main::-webkit-scrollbar-track {
        background: rgba(32, 32, 32, .08);
        border-radius: 999px
    }

    #app .gpc-vue-console .gp-notice-dialog-main::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #7d39ff
    }

    #app .gpc-vue-console .gp-notice-dialog-nav {
        gap: 8px
    }

    #app .gpc-vue-console .gp-notice-dialog-nav button {
        min-height: 42px;
        padding: 0 10px;
        font-size: 12px
    }
}

@media (prefers-reduced-motion: reduce) {
    #app .gpc-vue-console .gpc-notice-trigger,
    #app .gpc-vue-console .gpc-notice-dialog-backdrop,
    #app .gpc-vue-console .gp-notice-dialog,
    #app .gpc-vue-console .gp-notice-dialog-switch-content {
        will-change: auto
    }
}
/* Keep client download cards stable when translated labels change length. */
#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-section {
    min-width: 0;
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 230px;
    min-width: 0;
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 230px;
    height: 230px;
    box-sizing: border-box;
    filter: none;
    box-shadow: none;
}

#app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card:hover {
    box-shadow: none;
}

@media (max-width: 900px) {
    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 210px;
    }

    #app .gpc-vue-console .gpc-dashboard-aside .gpc-client-download-card {
        min-height: 210px;
        height: 210px;
    }
}