.inx-dashboard-page .inx-welcome {
    margin: 35px 0 42px;
}

.inx-dashboard-page .inx-welcome h1 {
    margin: 0 0 6px;
    font-size: clamp(22px, 2.1vw, 27px);
    line-height: 1.2;
}

.inx-dashboard-page .inx-welcome p {
    margin: 0;
    color: var(--ggz-muted);
    font-size: 14px;
    font-weight: 600;
}

.inx-dashboard-page .inx-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 20px;
}

.inx-dashboard-page .inx-stat-card {
    display: grid;
    min-height: 127px;
    padding: 16px 15px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    border-radius: 10px;
    background: var(--ggz-panel);
    box-shadow: 0 5px 20px rgba(64, 61, 106, .025);
}

.inx-dashboard-page .inx-stat-icon {
    display: grid;
    width: 51px;
    height: 51px;
    place-items: center;
    align-self: start;
    border-radius: 50%;
    color: #fff;
}

.inx-dashboard-page .inx-stat-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inx-dashboard-page .inx-purple { background: #6c60ff; }
.inx-dashboard-page .inx-green  { background: #42bf79; }
.inx-dashboard-page .inx-orange { background: #ffac3e; }
.inx-dashboard-page .inx-blue   { background: #3893f4; }

.inx-dashboard-page .inx-stat-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.inx-dashboard-page .inx-stat-copy > span {
    margin-top: 2px;
    color: #5B5F71;
    font-size: 12px;
    white-space: nowrap;
}

.inx-dashboard-page .inx-stat-copy > strong {
    margin-top: 4px;
    font-size: 23px;
    line-height: 1.05;
}

.inx-dashboard-page .inx-stat-copy > a {
    display: inline-flex;
    margin-top: auto;
    align-items: center;
    gap: 11px;
    color: #3F3CFB;
    font-size: 13px;
    font-weight: 500;
}

.inx-dashboard-page .inx-stat-copy > a b {
    font-size: 19px;
    font-weight: 400;
}

.inx-dashboard-page .inx-progress-row {
    display: flex;
    width: 100%;
    margin: 8px 0 2px;
    align-items: center;
    gap: 5px;
}

.inx-dashboard-page .inx-progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9e4ff;
}

.inx-dashboard-page .inx-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ggz-primary);
}

.inx-dashboard-page .inx-progress-row small {
    color: #5a5872;
    font-size: 12px;
    font-weight: 700;
}

.inx-dashboard-page .inx-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 12px;
}

.inx-dashboard-page .inx-panel {
    min-width: 0;
    border: 1px solid #E2F0FF;
    border-radius: 11px;
    background: var(--ggz-panel);
}

.inx-dashboard-page .inx-panel-head {
    display: flex;
    padding: 27px 23px 17px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inx-dashboard-page .inx-panel-head h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    color: #28235A;
    font-weight: 600;
}

.inx-dashboard-page .inx-panel-head > a {
    color: #3F3CFB;
    font-size: 13px;
    font-weight: 700;
}

.inx-dashboard-page .inx-panel-badge,
.inx-dashboard-page .inx-period-button {
    line-height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 5px;
    color: #333333;
    background: #fafafe;
    font-size: 12px;
    font-weight: 700;
}

.inx-dashboard-page .inx-period-button {
    cursor: pointer;
}

/* ========== 动态图表公共区域 ========== */
.inx-dashboard-page .inx-live-chart {
    position: relative;
    min-width: 0;
}

.inx-dashboard-page .inx-chart-empty {
    display: grid;
    min-height: 230px;
    place-items: center;
    color: #9997ab;
    font-size: 13px;
}

.inx-dashboard-page .inx-chart-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 92px;
    padding: 8px 10px;
    border: 1px solid #dfdfeb;
    border-radius: 5px;
    color: #777593;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 24px rgba(33, 31, 69, .1);
    font-size: 11px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));
    transition: opacity .15s ease;
    white-space: nowrap;
}

.inx-dashboard-page .inx-chart-tooltip.inx-visible {
    opacity: 1;
}

.inx-dashboard-page .inx-chart-tooltip strong {
    display: block;
    color: var(--ggz-text);
    font-size: 12px;
}

/* 折线图 */
.inx-dashboard-page .inx-line-chart {
    min-height: 250px;
    padding: 4px 24px 0;
}

.inx-dashboard-page .inx-line-chart svg,
.inx-dashboard-page .inx-bar-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.inx-dashboard-page .inx-chart-grid-line {
    stroke: #e3e4eb;
    stroke-width: 1;
}

.inx-dashboard-page .inx-chart-axis-label {
    fill: #95949f;
    font-size: 18px;
}

.inx-dashboard-page .inx-chart-area {
    fill: url(#inxLineAreaGradient);
}

.inx-dashboard-page .inx-chart-line-path {
    fill: none;
    stroke: var(--ggz-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inx-dashboard-page .inx-chart-point {
    fill: var(--ggz-primary);
    stroke: #fff;
    stroke-width: 2;
    cursor: pointer;
}

.inx-dashboard-page .inx-chart-point.inx-chart-point-active {
    r: 6;
}

.inx-dashboard-page .inx-chart-hover-line {
    stroke: #aaa8c0;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0;
}

.inx-dashboard-page .inx-chart-hover-line.inx-visible {
    opacity: 1;
}

/* 图表下方统计 */
.inx-dashboard-page .inx-summary-row {
    display: grid;
    margin: 0 23px 21px;
    padding-top: 10px;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #e2e5ed;
}

.inx-dashboard-page .inx-summary-row > div {
    display: grid;
    min-height: 63px;
    place-content: center;
    gap: 7px;
    text-align: center;
}

.inx-dashboard-page .inx-summary-row > div + div {
    border-left: 1px solid #e4e7ef;
}

.inx-dashboard-page .inx-summary-row span {
    color: #8181A5;
    font-size: 15px;
}

.inx-dashboard-page .inx-summary-row strong {
    font-size: 18px;
}

.inx-dashboard-page .inx-summary-row strong small {
    font-size: 13px;
    color: #5B5F71;
    font-weight: 600;
}

.inx-dashboard-page .inx-summary-row .inx-success {
    color: #08a44f;
}

.inx-dashboard-page .inx-summary-row .inx-primary {
    color: var(--ggz-primary);
}

/* 最近任务 */
.inx-dashboard-page .inx-recent-panel {
    padding-bottom: 12px;
}

.inx-dashboard-page .inx-task-list {
    padding: 0 23px;
}

.inx-dashboard-page .inx-task-item {
    display: grid;
    min-height: 80px;
    padding: 10px 0;
    grid-template-columns: 64px minmax(0, 1fr) 115px 18px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e7e7ee;
}

.inx-dashboard-page .inx-task-item:last-child {
    border-bottom: 0;
}

.inx-dashboard-page .inx-product-image {
    display: grid;
    width: 62px;
    height: 60px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background: #f8f8fb;
}

.inx-dashboard-page .inx-product-image img {
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.inx-dashboard-page .inx-task-info {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.inx-dashboard-page .inx-task-info strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inx-dashboard-page .inx-task-info small {
    color: #3F3CFB;
    font-size: 11px;
    font-weight: 700;
}

.inx-dashboard-page .inx-task-meta {
    display: grid;
    justify-items: center;
    gap: 7px;
}

.inx-dashboard-page .inx-task-meta small {
    color: #5B5F71;
    font-size: 11px;
    white-space: nowrap;
}

.inx-dashboard-page .inx-status {
    display: inline-grid;
    min-width: 91px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
}

.inx-dashboard-page .inx-status.inx-completed {
    color: #16a454;
    background: #e9f8ef;
}

.inx-dashboard-page .inx-status.inx-review {
    color: #f39a2e;
    background: #fff4e6;
}

.inx-dashboard-page .inx-status.inx-pending {
    color: #87879b;
    background: #f1f1f7;
}

.inx-dashboard-page .inx-task-chevron {
    color: #8a88a0;
    font-size: 28px;
    font-weight: 300;
}

/* 柱状图 */
.inx-dashboard-page .inx-monthly-total {
    display: flex;
    padding: 0 23px 7px;
    align-items: end;
    justify-content: space-between;
}

.inx-dashboard-page .inx-monthly-total > strong {
    font-size: 24px;
}

.inx-dashboard-page .inx-monthly-total > span {
    display: grid;
    gap: 3px;
    justify-items: end;
}

.inx-dashboard-page .inx-monthly-total b {
    color: #00AC4F;
    font-size: 12px;
}

.inx-dashboard-page .inx-monthly-total small {
    color: #5B5F71;
    font-size: 12px;
}

.inx-dashboard-page .inx-bar-chart {
    min-height: 230px;
    margin: 13px 23px 20px;
}

.inx-dashboard-page .inx-chart-bar {
    fill: #d4d3ff;
    cursor: pointer;
    transition: opacity .15s ease;
}

.inx-dashboard-page .inx-chart-bar:hover,
.inx-dashboard-page .inx-chart-bar.inx-chart-bar-active {
    fill: #7169ff;
}

/* 环形图 */
.inx-dashboard-page .inx-breakdown-chart {
    display: grid;
    min-height: 267px;
    padding: 25px 26px 28px;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 30px;
}

.inx-dashboard-page .inx-donut {
    display: grid;
    width: 185px;
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
}

.inx-dashboard-page .inx-donut-hole {
    display: grid;
    width: 61%;
    aspect-ratio: 1;
    place-content: center;
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.inx-dashboard-page .inx-donut-hole small {
    font-size: 12px;
    font-weight: 700;
}

.inx-dashboard-page .inx-donut-hole strong {
    margin-top: 3px;
    font-size: 17px;
}

.inx-dashboard-page .inx-legend {
    display: grid;
    gap: 15px;
}

.inx-dashboard-page .inx-legend-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 10px;
    font-size: 15px;
}

.inx-dashboard-page .inx-legend-title {
    grid-column: 1 / -1;
    font-weight: 700;
}

.inx-dashboard-page .inx-legend-value {
    padding-left: 13px;
}

.inx-dashboard-page .inx-legend-percent {
    color: #55536b;
    font-size: 13px;
}

.inx-dashboard-page .inx-legend-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
}

/* 响应式 */
@media (max-width: 1180px) {
    .inx-dashboard-page .inx-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inx-dashboard-page .inx-content-grid {
        grid-template-columns: 1fr;
    }

    .inx-dashboard-page .inx-task-item {
        grid-template-columns: 64px minmax(0, 1fr) 130px 18px;
    }
}

@media (max-width: 860px) {
    .inx-dashboard-page .inx-welcome {
        margin-top: 26px;
    }
}

@media (max-width: 600px) {
    .inx-dashboard-page .inx-welcome {
        display: none;
    }

    .inx-dashboard-page .inx-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 41px;
        margin-bottom: 16px;
    }

    .inx-dashboard-page .inx-stat-card {
        display: flex;
        min-height: 176px;
        padding: 17px 16px 15px;
        flex-direction: column;
        gap: 11px;
        border-radius: 7px;
    }

    .inx-dashboard-page .inx-stat-icon {
        width: 40px;
        height: 40px;
    }

    .inx-dashboard-page .inx-stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .inx-dashboard-page .inx-stat-copy {
        width: 100%;
        flex: 1;
    }

    .inx-dashboard-page .inx-stat-copy > span {
        font-size: 12px;
    }

    .inx-dashboard-page .inx-stat-copy > strong {
        margin-top: 6px;
        font-size: 18px;
    }

    .inx-dashboard-page .inx-progress-row {
        margin-top: 10px;
    }

    .inx-dashboard-page .inx-stat-copy > a {
        font-size: 12px;
    }

    .inx-dashboard-page .inx-content-grid {
        gap: 16px;
    }

    .inx-dashboard-page .inx-panel {
        border-radius: 10px;
    }

    .inx-dashboard-page .inx-panel-head {
        padding: 27px 23px 18px;
    }

    .inx-dashboard-page .inx-panel-head h2 {
        font-size: 16px;
        color: #28235A;
        font-weight: 600;
    }

    .inx-dashboard-page .inx-panel-badge,
    .inx-dashboard-page .inx-period-button {
        line-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .inx-dashboard-page .inx-line-chart {
        min-height: 188px;
        padding: 19px 17px 0;
    }

    .inx-dashboard-page .inx-summary-row {
        margin: 4px 23px 22px;
    }

    .inx-dashboard-page .inx-summary-row > div {
        min-height: 63px;
    }

    .inx-dashboard-page .inx-summary-row span {
        font-size: 12px;
    }

    .inx-dashboard-page .inx-summary-row strong {
        font-size: 17px;
    }

    .inx-dashboard-page .inx-task-list {
        padding: 0 23px 13px;
    }

    .inx-dashboard-page .inx-task-item {
        min-height: 88px;
        padding: 10px 0;
        grid-template-columns: 67px minmax(0, 1fr) auto;
        grid-template-areas:
            "image info chevron"
            "image meta chevron";
        gap: 3px 9px;
    }

    .inx-dashboard-page .inx-product-image {
        grid-area: image;
        width: 67px;
        height: 67px;
    }

    .inx-dashboard-page .inx-task-info {
        grid-area: info;
        align-self: end;
        gap: 4px;
    }

    .inx-dashboard-page .inx-task-info strong {
        overflow: visible;
        font-size: 14px;
        line-height: 1.22;
        white-space: normal;
    }

    .inx-dashboard-page .inx-task-info small {
        font-size: 11px;
    }

    .inx-dashboard-page .inx-task-meta {
        grid-area: meta;
        display: flex;
        align-self: start;
        justify-content: space-between;
        gap: 8px;
    }

    .inx-dashboard-page .inx-status {
        min-width: 75px;
        height: 20px;
        font-size: 8px;
    }

    .inx-dashboard-page .inx-task-meta small {
        align-self: center;
        font-size: 11px;
    }

    .inx-dashboard-page .inx-task-chevron {
        grid-area: chevron;
        align-self: center;
        font-size: 22px;
    }

    .inx-dashboard-page .inx-monthly-total {
        padding: 0 23px;
    }

    .inx-dashboard-page .inx-monthly-total > strong {
        font-size: 23px;
    }

    .inx-dashboard-page .inx-bar-chart {
        min-height: 150px;
        margin-top: 20px;
    }

    .inx-dashboard-page .inx-breakdown-chart {
        min-height: 245px;
        padding: 17px 22px 28px;
        grid-template-columns: 145px minmax(0, 1fr);
        gap: 7px;
    }

    .inx-dashboard-page .inx-donut {
        width: 143px;
    }

    .inx-dashboard-page .inx-donut-hole small {
        font-size: 9px;
    }

    .inx-dashboard-page .inx-donut-hole strong {
        font-size: 13px;
    }

    .inx-dashboard-page .inx-legend {
        gap: 12px;
    }

    .inx-dashboard-page .inx-legend-item {
        gap: 4px 5px;
        font-size: 12px;
    }

    .inx-dashboard-page .inx-legend-value {
        padding-left: 12px;
        font-size: 12px;
    }

    .inx-dashboard-page .inx-legend-percent {
        font-size: 13px;
    }
}

@media (max-width: 390px) {
    .inx-dashboard-page .inx-stat-card {
        padding-right: 13px;
        padding-left: 13px;
    }

    .inx-dashboard-page .inx-panel-head,
    .inx-dashboard-page .inx-task-list,
    .inx-dashboard-page .inx-monthly-total {
        padding-right: 18px;
        padding-left: 18px;
    }

    .inx-dashboard-page .inx-summary-row {
        margin-right: 18px;
        margin-left: 18px;
    }

    .inx-dashboard-page .inx-breakdown-chart {
        padding-right: 17px;
        padding-left: 17px;
        grid-template-columns: 135px minmax(0, 1fr);
    }

    .inx-dashboard-page .inx-donut {
        width: 132px;
    }
}


/* =========================================================
 * GGZ 手机端公共头部补充
 * =========================================================
 * 说明：
 * 1. 根据最新手机端设计图补充。
 * 2. 样式追加在 inx-dashboard.css。
 * 3. 不修改 ggz-layout.css。
 * 4. 600px 以下显示：菜单 + Logo + 通知 + 头像 + 搜索框。
 */

.ggz-mobile-logo {
    display: none;
}

@media (max-width: 600px) {
    .ggz-main {
        padding-top: 0;
    }

    .ggz-topbar {
        display: grid !important;
        height: auto;
        margin: 0px -20px 0;
        padding: calc(20px + env(safe-area-inset-top))
            20px
            20px;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "ggz-menu ggz-logo ggz-actions"
            "ggz-search ggz-search ggz-search";
        align-items: center;
        column-gap: 17px;
        row-gap: 20px;
        background: #fff;
    }

    .ggz-menu-button {
        display: grid !important;
        grid-area: ggz-menu;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 5px 1px;
        justify-self: start;
    }

    .ggz-menu-button span {
        width: 26px;
        height: 2px;
    }

    .ggz-mobile-logo {
        display: flex;
        min-width: 0;
        grid-area: ggz-logo;
        align-items: center;
        gap: 9px;
        overflow: hidden;
        justify-self: start;
        color: #1f2d62;
        font-size: 17px;
        font-weight: 800;
        white-space: nowrap;
    }

    .ggz-mobile-logo-mark {
        display: grid;
        width: 31px;
        height: 31px;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        color: #fff;
        background: var(--ggz-primary);
        box-shadow: 8px 0 0 -5px #1c8ff6;
        font-size: 13px;
    }

    .ggz-mobile-logo-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ggz-profile-area {
        display: flex !important;
        grid-area: ggz-actions;
        align-items: center;
        justify-self: end;
        gap: 14px;
    }

    .ggz-profile-copy,
    .ggz-profile-arrow {
        display: none !important;
    }

    .ggz-notification {
        width: 34px;
        height: 34px;
    }

    .ggz-notification svg {
        width: 27px;
        height: 27px;
    }

    .ggz-notification span {
        top: -1px;
        right: -1px;
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .ggz-avatar {
        width: 36px;
        height: 36px;
        font-size: 11px;
    }

    .ggz-search {
        width: 100%;
        height: 42px;
        grid-area: ggz-search;
        padding: 0 16px;
        border-color: #e0e2ea;
        background: #F5F7FA;
    }

    .ggz-search svg {
        width: 20px;
        height: 20px;
    }

    .ggz-search input {
        font-size: 14px;
    }

    .inx-dashboard-page .inx-stat-grid {
        margin-top: 22px;
    }
}

@media (max-width: 390px) {
    .ggz-topbar {
        margin-right: -16px;
        margin-left: -16px;
        padding-right: 16px;
        padding-left: 16px;
        column-gap: 12px;
    }

    .ggz-mobile-logo {
        font-size: 15px;
    }

    .ggz-mobile-logo-mark {
        width: 29px;
        height: 29px;
    }

    .ggz-profile-area {
        gap: 10px;
    }
}

/* =========================================================
 * PRJ Project 页面专属样式
 * =========================================================
 * 页面：All Projects
 * 公共布局仍由 ggz-layout.css 提供。
 * 本页面所有独有类名使用 prj- 前缀。
 *
 * V5 调整：
 * 1. 移除项目列表上方的独立搜索框和筛选框。
 * 2. 移除分页区域及分页样式。
 * 3. 移除对应的前端筛选、排序和分页脚本。
 * 4. 手机端顶部固定显示 All Projects 标题。
 */

.prj-project-page {
    --prj-purple: #3523ff;
    --prj-green: #00b864;
    --prj-orange: #ff8200;
    --prj-blue: #168cf5;
    --prj-border: #d9eaff;
    --prj-text: #28235A;
    --prj-muted: #77758d;
}

.prj-project-page .prj-page-head {
    margin: 38px 0 42px;
}

.prj-project-page .prj-page-head h1 {
    margin: 0 0 5px;
    color: var(--prj-text);
    font-size: 27px;
    line-height: 1.2;
}

.prj-project-page .prj-page-head p {
    margin: 0;
    color: #85839f;
    font-size: 15px;
    font-weight: 600;
}

.prj-project-page .prj-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 21px;
}

.prj-project-page .prj-stat-card {
    display: grid;
    min-height: 138px;
    padding: 17px 16px;
    grid-template-columns: 55px minmax(0, 1fr);
    gap: 16px;
    border-radius: 10px;
    background: #fff;
}

.prj-project-page .prj-stat-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    align-self: start;
    border-radius: 50%;
    color: #fff;
}

.prj-project-page .prj-stat-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.prj-project-page .prj-stat-purple { background: var(--prj-purple); }
.prj-project-page .prj-stat-green  { background: var(--prj-green); }
.prj-project-page .prj-stat-orange { background: var(--prj-orange); }
.prj-project-page .prj-stat-blue   { background: var(--prj-blue); }

.prj-project-page .prj-stat-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.prj-project-page .prj-stat-copy > span {
    margin-top: 3px;
    color: #5B5F71;
    font-size: 12px;
    white-space: nowrap;
}

.prj-project-page .prj-stat-copy > strong {
    margin-top: 5px;
    color: var(--prj-text);
    font-size: 24px;
    line-height: 1;
}

.prj-project-page .prj-stat-copy > a {
    display: inline-flex;
    margin-top: auto;
    align-items: center;
    gap: 12px;
    color: #3F3CFB;
    font-size: 12px;
    font-weight: 700;
}

.prj-project-page .prj-stat-copy > a b {
    font-size: 21px;
    font-weight: 400;
}

.prj-project-page .prj-project-panel {
    overflow: hidden;
    border: 1px solid var(--prj-border);
    border-radius: 11px;
    background: #fff;
}

.prj-project-page .prj-mobile-list-head {
    display: none;
}

.prj-project-page .prj-table {
    padding: 22px 23px 18px;
}

.prj-project-page .prj-table-head,
.prj-project-page .prj-project-row {
    display: grid;
    grid-template-columns: minmax(310px, 2.25fr) .8fr .78fr .95fr .86fr;
    align-items: center;
    column-gap: 16px;
}

.prj-project-page .prj-table-head {
    min-height: 45px;
    padding: 0 0 12px;
    border-bottom: 1px solid #dedfe7;
    color: var(--prj-text);
    font-size: 14px;
    font-weight: 700;
}

.prj-project-page .prj-project-row {
    min-height: 74px;
    border-bottom: 1px solid #e2e3ea;
}

.prj-project-page .prj-project-row:last-child {
    border-bottom: 0;
}

.prj-project-page .prj-project-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.prj-project-page .prj-project-image {
    display: grid;
    width: 49px;
    height: 49px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background: #f7f7fa;
}

.prj-project-page .prj-project-image img {
    display: block;
    max-width: 78%;
    max-height: 78%;
}

.prj-project-page .prj-project-info {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.prj-project-page .prj-project-status-mobile {
    display: none;
}

.prj-project-page .prj-project-info strong {
    overflow: hidden;
    color: var(--prj-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prj-project-page .prj-project-category {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5B5F71;
    font-size: 11px;
}

.prj-project-page .prj-project-category svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #7d8293;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.prj-project-page .prj-status {
    display: inline-grid;
    min-width: 91px;
    height: 30px;
    padding: 0 10px;
    place-items: center;
    justify-self: start;
    border-radius: 4px;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.prj-project-page .prj-completed { color: #16a454; background: #e8f8ee; }
.prj-project-page .prj-review    { color: #f49a31; background: #fff3e4; }
.prj-project-page .prj-pending   { color: #85879b; background: #f0f1f7; }
.prj-project-page .prj-active    { color: #3f31ff; background: #f0efff; }

.prj-project-page .prj-money,
.prj-project-page .prj-gains {
    color: var(--prj-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.prj-project-page .prj-gains {
    color: #00AC4F;
}

.prj-project-page .prj-mobile-label {
    display: none;
}

.prj-project-page .prj-submit-button {
    display: grid;
    width: 119px;
    min-height: 31px;
    place-items: center;
    justify-self: start;
    border-radius: 4px;
    color: #fff;
    background: #3523ff;
    font-size: 11px;
    font-weight: 700;
    transition: transform .2s ease, opacity .2s ease;
}

.prj-project-page .prj-submit-button:hover {
    opacity: .9;
    transform: translateY(-1px);
}

@media (max-width: 1180px) {
    .prj-project-page .prj-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prj-project-page .prj-table-head,
    .prj-project-page .prj-project-row {
        grid-template-columns: minmax(260px, 2fr) .8fr .72fr .88fr .8fr .9fr;
        column-gap: 10px;
    }
}

@media (max-width: 760px) {
    .prj-project-page .prj-page-head {
        display: none;
    }

    .prj-project-page .prj-page-content {
        padding-top: 22px;
    }

    .prj-project-page .prj-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 17px;
    }

    .prj-project-page .prj-stat-card {
        display: flex;
        min-height: 188px;
        padding: 17px 16px 15px;
        flex-direction: column;
        gap: 16px;
        border-radius: 7px;
    }

    .prj-project-page .prj-stat-icon {
        width: 43px;
        height: 43px;
    }

    .prj-project-page .prj-stat-icon svg {
        width: 23px;
        height: 23px;
    }

    .prj-project-page .prj-stat-copy {
        width: 100%;
        flex: 1;
    }

    .prj-project-page .prj-stat-copy > span {
        font-size: 12px;
    }

    .prj-project-page .prj-stat-copy > strong {
        margin-top: 7px;
        font-size: 21px;
    }

    .prj-project-page .prj-stat-copy > a {
        font-size: 11px;
    }

    .prj-project-page .prj-project-panel {
        border-radius: 10px;
    }

    .prj-project-page .prj-mobile-list-head {
        display: flex;
        padding: 28px 25px 17px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .prj-project-page .prj-mobile-list-head h2 {
        margin: 0;
        color: var(--prj-text);
        font-size: 16px;
        font-weight: 600;
    }

    .prj-project-page .prj-mobile-list-head a {
        color: #3F3CFB;
        font-size: 12px;
        font-weight: 700;
    }

    .prj-project-page .prj-table {
        padding: 0 25px 14px;
    }

    .prj-project-page .prj-table-head {
        display: none;
    }

    .prj-project-page .prj-project-row {
        display: grid;
        min-height: 0;
        padding: 14px 0 17px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "main main main"
            "price gains total"
            "submit submit submit";
        gap: 13px 0;
    }

    .prj-project-page .prj-project-row:last-child {
        padding-bottom: 0;
    }

    .prj-project-page .prj-project-main {
        grid-area: main;
        grid-template-columns: 73px minmax(0, 1fr);
        gap: 9px;
    }

    .prj-project-page .prj-project-image {
        width: 73px;
        height: 73px;
    }

    .prj-project-page .prj-project-info {
        align-content: center;
        gap: 5px;
    }

    .prj-project-page .prj-project-status-mobile {
        display: inline-grid;
        width: max-content;
        min-width: 0;
        height: 20px;
        padding: 0 10px;
        place-items: center;
        border-radius: 2px;
        font-size: 9px;
        font-style: normal;
        font-weight: 700;
    }

    .prj-project-page .prj-project-info strong {
        overflow: visible;
        font-size: 15px;
        line-height: 1.28;
        white-space: normal;
    }

    .prj-project-page .prj-project-category {
        font-size: 10px;
    }

    .prj-project-page .prj-status-desktop {
        display: none;
    }

    .prj-project-page .prj-price-cell,
    .prj-project-page .prj-gains-cell,
    .prj-project-page .prj-total-cell {
        display: grid;
        min-height: 50px;
        place-content: center;
        gap: 8px;
        text-align: center;
    }

    .prj-project-page .prj-price-cell {
        grid-area: price;
    }

    .prj-project-page .prj-gains-cell {
        grid-area: gains;
        border-right: 1px solid #e7e7ed;
        border-left: 1px solid #e7e7ed;
    }

    .prj-project-page .prj-total-cell {
        grid-area: total;
    }

    .prj-project-page .prj-mobile-label {
        display: block;
        color: #8181A5;
        font-size: 10px;
        font-weight: 400;
    }

    .prj-project-page .prj-money,
    .prj-project-page .prj-gains {
        font-size: 14px;
    }

    .prj-project-page .prj-submit-cell {
        grid-area: submit;
    }

    .prj-project-page .prj-submit-button {
        width: 100%;
        min-height: 39px;
        border-radius: 3px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .prj-project-page .prj-stat-card {
        padding-right: 14px;
        padding-left: 14px;
    }

    .prj-project-page .prj-mobile-list-head,
    .prj-project-page .prj-table {
        padding-right: 18px;
        padding-left: 18px;
    }
}

/* =========================================================
 * PRJ V5.2 手机端标题隔离修复
 * =========================================================
 * Dashboard：首页继续显示公共 Logo。
 * Project：仅 Project 页面显示 All Projects 标题。
 * 不修改 ggzheader.html，不修改 ggz-layout.css。
 */

.prj-project-page .prj-mobile-top-title {
    display: none;
}

@media (max-width: 600px) {
    .prj-mobile-title-page .ggz-main {
        position: relative;
    }

    /* 只隐藏 Project 页自己的 Logo */
    .prj-mobile-title-page .ggz-mobile-logo {
        display: none !important;
    }

    /* 只调整 Project 页的手机头部网格 */
    .prj-mobile-title-page .ggz-topbar {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-areas:
            "ggz-menu ggz-title ggz-actions"
            "ggz-search ggz-search ggz-search";
    }

    /* Project 页自己的真实标题节点 */
    .prj-mobile-title-page .prj-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(20px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 150px);
        margin: 0;
        overflow: hidden;
        color: #28235A;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    /* Project 设计图只保留右侧头像 */
    .prj-mobile-title-page .ggz-notification,
    .prj-mobile-title-page .ggz-profile-copy,
    .prj-mobile-title-page .ggz-profile-arrow {
        display: none !important;
    }

    .prj-mobile-title-page .ggz-profile-area {
        gap: 0;
    }
}

@media (max-width: 390px) {
    .prj-mobile-title-page .prj-mobile-top-title {
        top: calc(24px + env(safe-area-inset-top));
        max-width: calc(100% - 135px);
        font-size: 19px;
    }
}

 
.sub-submitted-page {
    --sub-red: #ff4852;
}

.sub-submitted-page .sub-stat-red {
    background: var(--sub-red);
}

.sub-submitted-page .sub-stat-red svg {
    width: 25px;
    height: 25px;
}

 
.sub-submitted-page .sub-list-head {
    display: none;
}

 
.sub-submitted-page .sub-table-head,
.sub-submitted-page .sub-submission-row {
    grid-template-columns:
        minmax(300px, 2.05fr)
        .78fr
        .72fr
        .88fr
        .82fr
        1fr
        .95fr;
    column-gap: 14px;
}

.sub-submitted-page .sub-date-cell {
    display: grid;
    gap: 3px;
    color: #28235A;
    line-height: 1.15;
}

.sub-submitted-page .sub-date-cell strong {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.sub-submitted-page .sub-date-cell small {
    color: #8181A5;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

 
.sub-submitted-page .sub-project-main {
    min-width: 0;
}

@media (max-width: 1180px) {
    .sub-submitted-page .sub-table-head,
    .sub-submitted-page .sub-submission-row {
        grid-template-columns:
            minmax(250px, 1.9fr)
            .78fr
            .7fr
            .86fr
            .8fr
            .95fr
            .9fr;
        column-gap: 9px;
    }
}

@media (max-width: 760px) {
    .sub-submitted-page .sub-list-head {
        display: flex;
    }

    
    .sub-submitted-page .sub-submission-row {
        position: relative;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "main main main"
            "price gains total"
            "submit submit submit";
    }

    .sub-submitted-page .sub-project-main {
        padding-right: 0px;
    }

    .sub-submitted-page .sub-date-cell {
        position: absolute;
        top: 18px;
        right: 0;
        display: block;
        text-align: right;
    }

    .sub-submitted-page .sub-date-cell strong,
    .sub-submitted-page .sub-date-cell small {
        display: inline;
        color: #5B5F71;
        font-size: 9px;
        font-weight: 500;
    }

    .sub-submitted-page .sub-date-cell strong::after {
        content: " ";
    }
}

 
.sub-submitted-page .sub-mobile-top-title {
    display: none;
}

@media (max-width: 600px) {
    .sub-mobile-title-page .ggz-main {
        position: relative;
    }

    .sub-mobile-title-page .ggz-mobile-logo {
        display: none !important;
    }

    .sub-mobile-title-page .ggz-topbar {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-areas:
            "ggz-menu ggz-title ggz-actions"
            "ggz-search ggz-search ggz-search";
    }

    .sub-mobile-title-page .sub-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(20px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 145px);
        margin: 0;
        overflow: hidden;
        color: #28235A;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    /* Submitted 设计图右侧只显示头像 */
    .sub-mobile-title-page .ggz-notification,
    .sub-mobile-title-page .ggz-profile-copy,
    .sub-mobile-title-page .ggz-profile-arrow {
        display: none !important;
    }

    .sub-mobile-title-page .ggz-profile-area {
        gap: 0;
    }
}

@media (max-width: 390px) {
    .sub-submitted-page .sub-project-main {
        padding-right: 0px;
    }

    .sub-mobile-title-page .sub-mobile-top-title {
        top: calc(20px + env(safe-area-inset-top));
        max-width: calc(100% - 130px);
        font-size: 19px;
    }
}
 .sub-submitted-page  .prj-stat-card {
     min-height: auto;
}

@media (max-width: 760px) {
    .sub-submitted-page   .prj-stat-card {
         min-height: auto;
    }
}

 
 

.subm-modal,
.subm-modal *,
.subm-modal *::before,
.subm-modal *::after {
    box-sizing: border-box;
}

.subm-modal[hidden] {
    display: none !important;
}

.subm-modal {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: grid;
    padding: 32px;
    place-items: center;
    color: #28235A;
    font-family: Inter, "Segoe UI", Arial, "Microsoft YaHei", sans-serif;
}

.subm-mask {
    position: absolute;
    inset: 0;
    background: rgba(24, 25, 34, .52);
}

.subm-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 408px);
    max-height: calc(100vh - 64px);
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(26, 26, 51, .20);
}

.subm-head {
    display: flex;
    min-height: 66px;
    padding: 0 25px;
    align-items: center;
    justify-content: space-between;
}

.subm-title {
    margin: 0;
    color: #28235A;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.subm-close {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 0;
    place-items: center;
    cursor: pointer;
    color: #28235A;
    background: transparent;
}

.subm-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.subm-body {
    max-height: calc(100vh - 130px);
    padding: 0 25px 25px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* 顶部商品信息 */
.subm-product {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.subm-product-image {
    display: grid;
    width: 76px;
    height: 76px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background: #f7f7fa;
}

.subm-product-image img {
    display: block;
    max-width: 74%;
    max-height: 74%;
}

.subm-product-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.subm-product-name {
    overflow: hidden;
    color: #28235A;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subm-product-category {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5B5F71;
    font-size: 10px;
}

.subm-product-category svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #7d8293;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.subm-status {
    display: inline-grid;
    width: max-content;
    min-height: 21px;
    padding: 0 10px;
    place-items: center;
    border-radius: 3px;
    color: #16a454;
    background: #e8f8ee;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

/* 通用区块 */
.subm-section {
    margin-top: 20px;
}

.subm-label,
.subm-section-title {
    display: block;
    margin: 0 0 10px;
    color: #5B5F71;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* 截止日期 */
.subm-date-control {
    display: inline-flex;
    height: 34px;
    padding: 0 9px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dfe2ec;
    border-radius: 5px;
    background: #fff;
}

.subm-date-control svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: #77758d;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.subm-date-control select,
.subm-date-control input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #77758d;
    background: transparent;
    font: inherit;
    font-size: 10px;
}

/* Submission Requirements 金额区域 */
.subm-price-card {
    display: grid;
    padding: 17px 15px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 12px;
    border-radius: 8px;
    background: #fff5f6;
}

.subm-price-item {
    display: grid;
    gap: 8px;
}

.subm-price-name {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ff3152;
    font-size: 12px;
}

.subm-price-name svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.subm-price-value {
    color: #ff3152;
    font-size: 15px;
    font-weight: 700;
}

.subm-price-total {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Like / Not Like / Share */
.subm-actions {
    margin-top: 22px;
}

.subm-vote-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.subm-action-button {
    display: inline-flex;
    min-height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
}

.subm-action-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

 
.subm-vote-button {
    color: #28235A;
    background: #f8f7fb;
    box-shadow: inset 0 0 0 1px transparent;
    transition:
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .15s ease;
}

/* Like / Not Like 当前选中状态 */
.subm-vote-button.subm-selected {
    color: #ff3152;
    background: #fff3f5;
    box-shadow: inset 0 0 0 1px rgba(255, 49, 82, .12);
}

.subm-vote-button:active {
    transform: scale(.97);
}

.subm-vote-button:focus-visible {
    outline: 2px solid rgba(255, 49, 82, .28);
    outline-offset: 2px;
}

/* Share Product 保持原样 */
.subm-share {
    width: 100%;
    margin-top: 10px;
    color: #ff3152;
    background: #fff3f5;
}

/* 底部提示 */
.subm-notice {
    display: grid;
    margin-top: 22px;
    padding: 16px 15px;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border-radius: 12px;
    background: #f6f4ff;
}

.subm-notice-icon {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #3F3CFB;
    font-size: 11px;
    font-weight: 700;
}

.subm-notice p {
    margin: 0;
    color: #5B5F71;
    font-size: 11px;
    line-height: 1.45;
}

/* 手机端全屏 */
@media (max-width: 600px) {
    .subm-modal {
        display: block;
        padding: 0;
    }

    .subm-dialog {
        width: 100%;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }

    .subm-head {
        position: sticky;
        top: 0;
        z-index: 5;
        min-height: calc(62px + env(safe-area-inset-top));
        padding:
            env(safe-area-inset-top)
            22px
            0;
        background: #ffffff00;
    }

    .subm-body {
        max-height: calc(100dvh - 62px - env(safe-area-inset-top));
        padding:
            0
            22px
            calc(28px + env(safe-area-inset-bottom));
    }

    .subm-mask {
        display: none;
    }
}

@media (max-width: 390px) {
    .subm-head,
    .subm-body {
        padding-right: 18px;
        padding-left: 18px;
    }

    .subm-product {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .subm-product-image {
        width: 68px;
        height: 68px;
    }

    .subm-price-card {
        padding-right: 13px;
        padding-left: 13px;
    }
}

/* =========================================================
 * EAR Earnings 页面专属样式
 * =========================================================
 * 页面：Earnings
 * 前缀：ear-
 * 数据和图表均为静态，不需要页面 JavaScript。
 * 公共头部、侧边栏和统计卡片继续复用现有样式。
 */

.ear-earnings-page {
    --ear-border: #dbeaff;
    --ear-text: #28235A;
    --ear-muted: #8181A5;
    --ear-green: #12b95d;
    --ear-purple: #4535ff;
    --ear-lilac: #8c7cff;
    --ear-blue: #3b95f5;
}

.ear-earnings-page .ear-page-content {
    min-width: 0;
}

.ear-earnings-page .ear-stat-card {
    min-height: 112px;
}

.ear-earnings-page .ear-stat-card .prj-stat-copy > strong {
    margin-top: 7px;
    font-size: 24px;
}

.ear-earnings-page .ear-stat-note {
    margin-top: auto;
    color: #5B5F71;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.ear-earnings-page .ear-stat-purple {
    background: #4535ff;
}

.ear-earnings-page .ear-stat-green {
    background: #00b865;
}

.ear-earnings-page .ear-stat-orange {
    background: #ff8500;
}

.ear-earnings-page .ear-stat-blue {
    background: #158df5;
}

/* 主体面板布局 */
.ear-earnings-page .ear-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px 12px;
}

.ear-earnings-page .ear-panel,
.ear-earnings-page .ear-help-card {
    min-width: 0;
    border: 1px solid var(--ear-border);
    border-radius: 11px;
    background: #fff;
}

.ear-earnings-page .ear-panel-head {
    display: flex;
    min-height: 69px;
    padding: 0 22px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ear-earnings-page .ear-panel-head h2 {
    margin: 0;
    color: var(--ear-text);
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
}

.ear-earnings-page .ear-panel-head > a {
    color: #3F3CFB;
    font-size: 12px;
    font-weight: 700;
}

.ear-earnings-page .ear-weekly {
    display: inline-grid;
    min-height: 37px;
    padding: 0 12px;
    place-items: center;
    border-radius: 4px;
    color: #333;
    background: #fafafe;
    font-size: 11px;
    font-weight: 700;
}

/* Earnings Overview 静态折线图 */
.ear-earnings-page .ear-overview-panel {
    overflow: hidden;
}

.ear-earnings-page .ear-line-chart {
    position: relative;
    padding: 0 22px 24px;
}

.ear-earnings-page .ear-line-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.ear-earnings-page .ear-grid-line {
    stroke: #e1e3ea;
    stroke-width: 1;
}

.ear-earnings-page .ear-axis-label {
    fill: #8f8d9e;
    font-size: 12px;
}

.ear-earnings-page .ear-area {
    fill: url(#earLineAreaGradient);
}

.ear-earnings-page .ear-line {
    fill: none;
    stroke: #4535ff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ear-earnings-page .ear-point {
    fill: #4535ff;
    stroke: #fff;
    stroke-width: 2;
}

.ear-earnings-page .ear-hover-line {
    stroke: #aaa8c0;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.ear-earnings-page .ear-chart-tooltip {
    position: absolute;
    top: 20px;
    left: 49%;
    min-width: 112px;
    padding: 10px 12px;
    border: 1px solid #dedfeb;
    border-radius: 4px;
    color: #777593;
    background: #fff;
    box-shadow: 0 7px 17px rgba(36, 34, 80, .08);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    transform: translateX(-50%);
}

.ear-earnings-page .ear-chart-tooltip strong {
    display: block;
    margin-top: 3px;
    color: var(--ear-text);
    font-size: 12px;
}

/* Earnings Breakdown */
.ear-earnings-page .ear-breakdown-body {
    display: grid;
    min-height: 267px;
    padding: 10px 25px 28px;
    grid-template-columns: 215px minmax(0, 1fr);
    align-items: center;
    gap: 27px;
}

.ear-earnings-page .ear-donut {
    display: grid;
    width: 182px;
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background:
        conic-gradient(
            #4535ff 0 50%,
            #8c7cff 50% 75%,
            #16bd61 75% 90%,
            #3b95f5 90% 100%
        );
}

.ear-earnings-page .ear-donut-hole {
    display: grid;
    width: 64%;
    aspect-ratio: 1;
    place-content: center;
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.ear-earnings-page .ear-donut-hole span {
    color: #5B5F71;
    font-size: 12px;
    font-weight: 700;
}

.ear-earnings-page .ear-donut-hole strong {
    margin-top: 2px;
    color: var(--ear-text);
    font-size: 17px;
}

.ear-earnings-page .ear-breakdown-list {
    display: grid;
    gap: 15px;
}

.ear-earnings-page .ear-breakdown-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    color: var(--ear-text);
    font-size: 13px;
}

.ear-earnings-page .ear-breakdown-name {
    grid-column: 1 / -1;
    font-weight: 700;
}

.ear-earnings-page .ear-breakdown-name i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
}

.ear-earnings-page .ear-dot-purple {
    background: #4535ff;
}

.ear-earnings-page .ear-dot-lilac {
    background: #8c7cff;
}

.ear-earnings-page .ear-dot-green {
    background: #16bd61;
}

.ear-earnings-page .ear-dot-blue {
    background: #3b95f5;
}

.ear-earnings-page .ear-breakdown-value {
    padding-left: 14px;
    font-weight: 700;
}

.ear-earnings-page .ear-breakdown-percent {
    color: #5B5F71;
    font-size: 12px;
}

/* Recent Transactions */
.ear-earnings-page .ear-transactions-panel {
    overflow: hidden;
}

.ear-earnings-page .ear-transaction-list {
    padding: 0 22px 10px;
}

.ear-earnings-page .ear-transaction-head,
.ear-earnings-page .ear-transaction-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1.65fr) 118px 85px 90px;
    align-items: center;
    gap: 10px;
}

.ear-earnings-page .ear-transaction-head {
    min-height: 33px;
    border-top: 1px solid #e5e6ed;
    border-bottom: 1px solid #e5e6ed;
    color: #8181A5;
    font-size: 10px;
}

.ear-earnings-page .ear-transaction-row {
    min-height: 66px;
    border-bottom: 1px solid #e7e7ee;
}

.ear-earnings-page .ear-transaction-date {
    color: #5B5F71;
    font-size: 11px;
}

.ear-earnings-page .ear-transaction-description {
    color: var(--ear-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.ear-earnings-page .ear-transaction-type,
.ear-earnings-page .ear-transaction-status {
    display: inline-grid;
    width: max-content;
    min-height: 25px;
    padding: 0 9px;
    place-items: center;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.ear-earnings-page .ear-type-review {
    color: #4b37ff;
    background: #f3f0ff;
}

.ear-earnings-page .ear-type-survey {
    color: #1c80ff;
    background: #edf6ff;
}

.ear-earnings-page .ear-type-referral {
    color: #14a758;
    background: #e9f8ef;
}

.ear-earnings-page .ear-transaction-amount {
    color: var(--ear-green);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ear-earnings-page .ear-transaction-status {
    color: #14a758;
    background: #e9f8ef;
}

.ear-earnings-page .ear-transaction-footer {
    display: flex;
    min-height: 59px;
    padding: 0 22px;
    align-items: center;
}

.ear-earnings-page .ear-transaction-footer a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #3F3CFB;
    font-size: 12px;
    font-weight: 600;
}

.ear-earnings-page .ear-transaction-footer b {
    font-size: 20px;
    font-weight: 400;
}

/* Payout History */
.ear-earnings-page .ear-right-stack {
    display: grid;
    gap: 18px;
}

.ear-earnings-page .ear-payout-list {
    padding: 0 22px 12px;
}

.ear-earnings-page .ear-payout-row {
    display: grid;
    min-height: 83px;
    padding: 10px 0;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e7e7ee;
}

.ear-earnings-page .ear-payout-row:last-child {
    border-bottom: 0;
}

.ear-earnings-page .ear-payout-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 8px;
    color: #85839f;
    background: #f7f6fb;
}

.ear-earnings-page .ear-payout-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ear-earnings-page .ear-paypal-icon svg {
    width: 32px;
    height: 32px;
    fill: #0b4ea2;
    stroke: none;
}

.ear-earnings-page .ear-payout-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
}

.ear-earnings-page .ear-payout-copy small {
    color: #5B5F71;
    font-size: 10px;
}

.ear-earnings-page .ear-payout-copy strong {
    overflow: hidden;
    color: var(--ear-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ear-earnings-page .ear-payout-money {
    display: grid;
    justify-items: end;
    gap: 7px;
}

.ear-earnings-page .ear-payout-money strong {
    color: var(--ear-text);
    font-size: 14px;
}

.ear-earnings-page .ear-payout-money small {
    color: #14a758;
    font-size: 10px;
    font-weight: 700;
}

/* Help Center 卡片 */
.ear-earnings-page .ear-help-card {
    display: grid;
    min-height: 142px;
    padding: 22px 25px;
    grid-template-columns: minmax(0, 1fr) 105px;
    align-items: center;
    gap: 20px;
    background: #f6f3ff;
}

.ear-earnings-page .ear-help-copy {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.ear-earnings-page .ear-help-copy strong {
    color: var(--ear-text);
    font-size: 15px;
}

.ear-earnings-page .ear-help-copy p {
    margin: 0;
    color: #8a87a2;
    font-size: 13px;
    line-height: 1.45;
}

.ear-earnings-page .ear-help-copy a {
    display: inline-grid;
    min-height: 37px;
    padding: 0 15px;
    place-items: center;
    border: 1px solid #e3e0ed;
    border-radius: 5px;
    color: #3F3CFB;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}

.ear-earnings-page .ear-help-art {
    display: grid;
    place-items: center;
}

.ear-earnings-page .ear-help-art svg {
    width: 100px;
    height: 100px;
}

/* 手机端标题：仅 Earnings 页面生效 */
.ear-earnings-page .ear-mobile-top-title {
    display: none;
}

@media (max-width: 1180px) {
    .ear-earnings-page .ear-breakdown-body {
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 15px;
    }

    .ear-earnings-page .ear-donut {
        width: 156px;
    }

    .ear-earnings-page .ear-transaction-head,
    .ear-earnings-page .ear-transaction-row {
        grid-template-columns: 72px minmax(0, 1.4fr) 105px 72px 82px;
        gap: 8px;
    }
}

@media (max-width: 860px) {
    .ear-earnings-page .ear-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .ear-earnings-page .ear-page-content {
        padding-top: 22px;
    }

    .ear-earnings-page .ear-stat-card {
        min-height: 142px;
        gap: 10px;
    }

    .ear-earnings-page .ear-stat-card .prj-stat-copy > strong {
        margin-top: 6px;
        font-size: 20px;
    }

    .ear-earnings-page .ear-stat-note {
        font-size: 10px;
    }

    .ear-earnings-page .ear-dashboard-grid {
        gap: 16px;
    }

    .ear-earnings-page .ear-panel-head {
        min-height: 65px;
        padding: 0 20px;
    }

    .ear-earnings-page .ear-panel-head h2 {
        font-size: 16px;
    }

    .ear-earnings-page .ear-weekly {
        min-height: 31px;
        padding: 0 10px;
        font-size: 10px;
    }

    .ear-earnings-page .ear-line-chart {
        padding: 0 16px 20px;
    }

    .ear-earnings-page .ear-axis-label {
        font-size: 10px;
    }

    .ear-earnings-page .ear-chart-tooltip {
        top: 7px;
        min-width: 92px;
        padding: 8px 9px;
        font-size: 9px;
    }

    .ear-earnings-page .ear-chart-tooltip strong {
        font-size: 10px;
    }

    .ear-earnings-page .ear-breakdown-body {
        min-height: 245px;
        padding: 5px 20px 25px;
        grid-template-columns: 142px minmax(0, 1fr);
        gap: 8px;
    }

    .ear-earnings-page .ear-donut {
        width: 136px;
    }

    .ear-earnings-page .ear-donut-hole span {
        font-size: 10px;
    }

    .ear-earnings-page .ear-donut-hole strong {
        font-size: 13px;
    }

    .ear-earnings-page .ear-breakdown-list {
        gap: 12px;
    }

    .ear-earnings-page .ear-breakdown-item {
        gap: 4px 5px;
        font-size: 14px;
    }

    .ear-earnings-page .ear-breakdown-value,
    .ear-earnings-page .ear-breakdown-percent {
        font-size: 10px;
    }

    .ear-earnings-page .ear-transaction-list {
        padding: 0 20px;
    }

    .ear-earnings-page .ear-transaction-head {
        display: none;
    }

    .ear-earnings-page .ear-transaction-row {
        display: grid;
        min-height: 89px;
        padding: 12px 0;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "date amount"
            "description amount"
            "tags amount";
        gap: 4px 10px;
    }

    .ear-earnings-page .ear-transaction-date {
        grid-area: date;
        font-size: 11px;
    }

    .ear-earnings-page .ear-transaction-description {
        grid-area: description;
        font-size: 14px;
    }

    .ear-earnings-page .ear-transaction-type {
        grid-area: tags;
        min-height: 23px;
        font-size: 11px;
    }

    .ear-earnings-page .ear-transaction-amount {
        grid-area: amount;
        align-self: center;
        font-size: 16px;
    }

    .ear-earnings-page .ear-transaction-status {
        grid-area: tags;
        justify-self: start;
        margin-left: 108px;
        min-height: 23px;
        font-size: 11px;
    }

    .ear-earnings-page .ear-transaction-footer {
        display: none;
    }

    .ear-earnings-page .ear-payout-list {
        padding: 0 20px 10px;
    }

    .ear-earnings-page .ear-payout-row {
        min-height: 73px;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 10px;
    }

    .ear-earnings-page .ear-payout-icon {
        width: 44px;
        height: 44px;
    }

    .ear-earnings-page .ear-payout-icon svg {
        width: 24px;
        height: 24px;
    }

    .ear-earnings-page .ear-payout-copy strong {
        font-size: 12px;
    }

    .ear-earnings-page .ear-payout-money strong {
        font-size: 12px;
    }

    .ear-earnings-page .ear-help-card {
        min-height: 138px;
        padding: 20px 22px;
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .ear-earnings-page .ear-help-art {
        grid-column: 1;
        grid-row: 1;
    }

    .ear-earnings-page .ear-help-copy {
        grid-column: 2;
        grid-row: 1;
    }

    .ear-earnings-page .ear-help-art svg {
        width: 82px;
        height: 82px;
    }

    .ear-earnings-page .ear-help-copy strong {
        font-size: 12px;
    }

    .ear-earnings-page .ear-help-copy p {
        font-size: 11px;
    }

    .ear-earnings-page .ear-help-copy a {
        min-height: 31px;
        padding: 0 11px;
        font-size: 10px;
    }
}

@media (max-width: 600px) {
    .ear-mobile-title-page .ggz-main {
        position: relative;
    }

    .ear-mobile-title-page .ggz-mobile-logo {
        display: none !important;
    }

    .ear-mobile-title-page .ggz-topbar {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-areas:
            "ggz-menu ggz-title ggz-actions"
            "ggz-search ggz-search ggz-search";
    }

    .ear-mobile-title-page .ear-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(20px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 145px);
        margin: 0;
        overflow: hidden;
        color: #28235A;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .ear-mobile-title-page .ggz-notification,
    .ear-mobile-title-page .ggz-profile-copy,
    .ear-mobile-title-page .ggz-profile-arrow {
        display: none !important;
    }

    .ear-mobile-title-page .ggz-profile-area {
        gap: 0;
    }
}

@media (max-width: 390px) {
    .ear-earnings-page .ear-panel-head,
    .ear-earnings-page .ear-transaction-list,
    .ear-earnings-page .ear-payout-list {
        padding-right: 16px;
        padding-left: 16px;
    }

    .ear-earnings-page .ear-breakdown-body {
        padding-right: 16px;
        padding-left: 16px;
        grid-template-columns: 126px minmax(0, 1fr);
    }

    .ear-earnings-page .ear-donut {
        width: 120px;
    }

    .ear-earnings-page .ear-transaction-status {
        margin-left: 96px;
    }

    .ear-earnings-page .ear-help-card {
        padding-right: 17px;
        padding-left: 17px;
        grid-template-columns: 80px minmax(0, 1fr);
        gap: 12px;
    }

    .ear-mobile-title-page .ear-mobile-top-title {
        max-width: calc(100% - 130px);
        font-size: 19px;
    }
}

/* =========================================================
 * EAR V7.2 Earning Overview 图表交互
 * ========================================================= */
.ear-earnings-page .ear-line-chart { cursor: crosshair; }
.ear-earnings-page .ear-point {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: r .16s ease, transform .16s ease, filter .16s ease, opacity .16s ease;
}
.ear-earnings-page .ear-point:hover,
.ear-earnings-page .ear-point:focus,
.ear-earnings-page .ear-point.ear-active {
    r: 7;
    filter: drop-shadow(0 3px 5px rgba(69, 53, 255, .28));
    outline: none;
}
.ear-earnings-page .ear-point:not(.ear-active) { opacity: .82; }
.ear-earnings-page .ear-chart-tooltip {
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 11px));
    transition: left .18s ease, top .18s ease, opacity .14s ease;
}
.ear-earnings-page .ear-chart-tooltip.ear-visible { opacity: 1; }
.ear-earnings-page .ear-hover-line { transition: x1 .18s ease, x2 .18s ease; }

/* =========================================================
 * EAR V7.3 动态图表数据
 * ========================================================= */

.ear-earnings-page .ear-chart-empty,
.ear-earnings-page .ear-breakdown-empty {
    width: 100%;
    min-height: 220px;
    place-items: center;
    color: #9997ab;
    font-size: 13px;
    text-align: center;
}

.ear-earnings-page .ear-chart-empty:not([hidden]),
.ear-earnings-page .ear-breakdown-empty:not([hidden]) {
    display: grid;
}

.ear-earnings-page .ear-breakdown-empty {
    grid-column: 1 / -1;
}

.ear-earnings-page .ear-breakdown-name i {
    flex: 0 0 auto;
}


@media (max-width: 760px) {
    .ear-earnings-page .ear-axis-label {
        font-size: 18px;
        font-weight: 500;
    }

    .ear-earnings-page .ear-chart-tooltip {
        min-width: 105px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .ear-earnings-page .ear-chart-tooltip strong {
        font-size: 13px;
    }
}
 
@media (max-width: 760px) {
    /* 折线图、柱状图坐标文字 */
    .inx-dashboard-page .inx-chart-axis-label {
        font-size: 18px;
        font-weight: 500;
    }

    /* 图表提示框 */
    .inx-dashboard-page .inx-chart-tooltip {
        min-width: 105px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .inx-dashboard-page .inx-chart-tooltip strong {
        font-size: 13px;
    }
}


/* =========================================================
 * REP Reports 页面专属样式
 * =========================================================
 * 页面：Reports
 * 说明：
 * 1. 本页不制作顶部标签/日期筛选区域。
 * 2. 公共区域继续使用 GGZ 头部、侧边栏。
 * 3. 本页面专属类名统一使用 rep- 前缀。
 */

.rep-reports-page {
    --rep-purple: #493cff;
    --rep-purple-soft: #8d80ff;
    --rep-green: #31c173;
    --rep-blue: #2f8ef6;
    --rep-orange: #f9a11b;
    --rep-text: #28235A;
    --rep-muted: #85839f;
    --rep-border: #deedff;
}

.rep-reports-page .rep-page-head {
    margin: 38px 0 24px;
}

.rep-reports-page .rep-page-head h1 {
    margin: 0 0 5px;
    color: var(--rep-text);
    font-size: 27px;
    line-height: 1.2;
}

.rep-reports-page .rep-page-head p {
    margin: 0;
    color: #85839f;
    font-size: 15px;
    font-weight: 600;
}

.rep-reports-page .rep-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.rep-reports-page .rep-stat-card {
    display: grid;
    min-height: 88px;
    padding: 16px 15px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 13px;
    border-radius: 10px;
    background: #fff;
}

.rep-reports-page .rep-stat-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    align-self: start;
    border-radius: 50%;
    color: #fff;
}

.rep-reports-page .rep-stat-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    /* stroke: currentColor; */
    /* stroke-width: 1.9; */
    /* stroke-linecap: round; */
    /* stroke-linejoin: round; */
}

.rep-reports-page .rep-purple { background: #4a3fff; }
.rep-reports-page .rep-blue { background: #2f8ef6; }
.rep-reports-page .rep-green { background: #31c173; }
.rep-reports-page .rep-orange { background: #f7a115; }

.rep-reports-page .rep-stat-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.rep-reports-page .rep-stat-copy > span {
    margin-top: 3px;
    color: #5b5f71;
    font-size: 12px;
    white-space: nowrap;
}

.rep-reports-page .rep-stat-copy > strong {
    margin-top: 5px;
    color: var(--rep-text);
    font-size: 24px;
    line-height: 1.05;
}

.rep-reports-page .rep-stat-copy > small {
    margin-top: auto;
    color: #59b66f;
    font-size: 12px;
    font-weight: 700;
}

.rep-reports-page .rep-stat-copy > small b {
    color: #5b5f71;
    font-weight: 700;
}

.rep-reports-page .rep-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 12px;
}

.rep-reports-page .rep-panel,
.rep-reports-page .rep-info-card {
    min-width: 0;
    border: 1px solid var(--rep-border);
    border-radius: 11px;
    background: #fff;
}

.rep-reports-page .rep-panel-head {
    display: flex;
    padding: 22px 23px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rep-reports-page .rep-panel-head h2,
.rep-reports-page .rep-panel-head h3 {
    margin: 0;
    color: var(--rep-text);
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
}

.rep-reports-page .rep-panel-head a {
    color: #3f3cfb;
    font-size: 13px;
    font-weight: 700;
}

.rep-reports-page .rep-panel-badge {
    line-height: 38px;
    padding: 0 12px;
    border-radius: 5px;
    color: #333;
    background: #fafafe;
    font-size: 12px;
    font-weight: 700;
}

.rep-reports-page .rep-legend {
    display: flex;
    padding: 0 23px 6px;
    gap: 28px;
    color: var(--rep-text);
    font-size: 14px;
    font-weight: 700;
}

.rep-reports-page .rep-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rep-reports-page .rep-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rep-reports-page .rep-legend .rep-completed-dot { background: #4a3fff; }
.rep-reports-page .rep-legend .rep-submitted-dot { background: #9692b4; }

.rep-reports-page .rep-chart-wrap {
    position: relative;
    padding: 4px 22px 18px;
}

.rep-reports-page .rep-overview-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.rep-reports-page .rep-axis-line {
    stroke: #e6e8ee;
    stroke-width: 1;
}

.rep-reports-page .rep-axis-label {
    fill: #9997ab;
    font-size: 12px;
}

.rep-reports-page .rep-area-completed {
    fill: rgba(74, 63, 255, .08);
}

.rep-reports-page .rep-area-submitted {
    fill: rgba(150, 146, 180, .09);
}

.rep-reports-page .rep-line-completed {
    fill: none;
    stroke: #4a3fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rep-reports-page .rep-line-submitted {
    fill: none;
    stroke: #9390af;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 5 5;
}

.rep-reports-page .rep-point-completed,
.rep-reports-page .rep-point-submitted {
    stroke: #fff;
    stroke-width: 2;
}

.rep-reports-page .rep-point-completed { fill: #4a3fff; }
.rep-reports-page .rep-point-submitted { fill: #9390af; }

.rep-reports-page .rep-activities-panel .rep-panel-head .rep-mobile-only-title {
    display: none;
}

.rep-reports-page .rep-breakdown {
    display: grid;
    min-height: 270px;
    padding: 16px 24px 26px;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.rep-reports-page .rep-donut {
    display: grid;
    width: 180px;
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    background: conic-gradient(#4535ff 0 42.9%, #8d80ff 42.9% 67.9%, #20c161 67.9% 89.3%, #378ef4 89.3% 100%);
}

.rep-reports-page .rep-donut-hole {
    display: grid;
    width: 62%;
    aspect-ratio: 1;
    place-content: center;
    border-radius: 50%;
    background: #fff;
    text-align: center;
}

.rep-reports-page .rep-donut-hole span {
    color: #5b5f71;
    font-size: 12px;
    font-weight: 700;
}

.rep-reports-page .rep-donut-hole strong {
    margin-top: 4px;
    color: var(--rep-text);
    font-size: 17px;
}

.rep-reports-page .rep-breakdown-list {
    display: grid;
    gap: 16px;
}

.rep-reports-page .rep-breakdown-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.rep-reports-page .rep-breakdown-item strong,
.rep-reports-page .rep-breakdown-item span {
    color: var(--rep-text);
    font-size: 14px;
    font-weight: 700;
}

.rep-reports-page .rep-breakdown-item small {
    color: #5b5f71;
    font-size: 13px;
    font-weight: 700;
}

.rep-reports-page .rep-breakdown-item b {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.rep-reports-page .rep-performance-panel {
    overflow: hidden;
}

.rep-reports-page .rep-performance-table {
    padding: 0 14px 10px;
}

.rep-reports-page .rep-performance-head,
.rep-reports-page .rep-performance-row {
    display: grid;
    grid-template-columns: minmax(250px, 2.2fr) .95fr .95fr .8fr .8fr 20px;
    align-items: center;
    column-gap: 10px;
}

.rep-reports-page .rep-performance-head {
    min-height: 38px;
    padding: 0 10px;
    border-top: 1px solid #e5e7ef;
    border-bottom: 1px solid #e5e7ef;
    color: #9997ab;
    font-size: 11px;
    font-weight: 700;
}

.rep-reports-page .rep-performance-row {
    min-height: 74px;
    padding: 10px;
    border-bottom: 1px solid #e5e7ef;
}

.rep-reports-page .rep-performance-row:last-child {
    border-bottom: 0;
}

.rep-reports-page .rep-project-main {
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.rep-reports-page .rep-project-image {
    display: grid;
    width: 49px;
    height: 49px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background: #f7f7fa;
}

.rep-reports-page .rep-project-image img {
    display: block;
    max-width: 78%;
    max-height: 78%;
}

.rep-reports-page .rep-project-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.rep-reports-page .rep-project-copy small {
    color: #9a98af;
    font-size: 11px;
    font-weight: 600;
}

.rep-reports-page .rep-project-copy strong {
    overflow: hidden;
    color: var(--rep-text);
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rep-reports-page .rep-tag,
.rep-reports-page .rep-status {
    display: inline-grid;
    min-width: 86px;
    height: 28px;
    padding: 0 10px;
    place-items: center;
    justify-self: start;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.rep-reports-page .rep-tag-review { color: #3f31ff; background: #f0efff; }
.rep-reports-page .rep-tag-survey { color: #3f7cff; background: #eef6ff; }
.rep-reports-page .rep-tag-project { color: #f49a31; background: #fff3e4; }
.rep-reports-page .rep-tag-refund { color: #2e9b57; background: #e7f7ec; }
.rep-reports-page .rep-status-completed { color: #2e9b57; background: #e7f7ec; }
.rep-reports-page .rep-status-progress { color: #2f81f7; background: #eef5ff; }

.rep-reports-page .rep-metric {
    color: var(--rep-text);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.rep-reports-page .rep-earnings {
    color: #20b45d;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.rep-reports-page .rep-row-arrow {
    color: #8c89a7;
    font-size: 18px;
    text-align: center;
}

.rep-reports-page .rep-performance-footer {
    padding: 11px 24px 20px;
}

.rep-reports-page .rep-performance-footer a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #3f3cfb;
    font-size: 13px;
    font-weight: 500;
}

.rep-reports-page .rep-right-stack {
    display: grid;
    gap: 12px;
}

.rep-reports-page .rep-category-panel {
    padding-bottom: 24px;
}

.rep-reports-page .rep-category-list {
    display: grid;
    padding: 2px 24px 0;
    gap: 20px;
}

.rep-reports-page .rep-category-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.rep-reports-page .rep-category-item strong,
.rep-reports-page .rep-category-item span {
    color: #5b5f71;
    font-size: 13px;
    font-weight: 700;
}

.rep-reports-page .rep-category-item span:last-child {
    color: var(--rep-text);
    font-size: 13px;
}

.rep-reports-page .rep-bar-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #eae7ff;
}

.rep-reports-page .rep-bar-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #4a3fff;
}

.rep-reports-page .rep-bar-track .rep-bar-soft {
    background: #9c8fff;
}

.rep-reports-page .rep-insight-card {
    display: grid;
    min-height: 141px;
    padding: 22px 22px 20px;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    background: #fbf7ff;
}

.rep-reports-page .rep-insight-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #4a3fff;
}

.rep-reports-page .rep-insight-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rep-reports-page .rep-insight-copy {
    display: grid;
    gap: 7px;
}

.rep-reports-page .rep-insight-copy strong {
    color: var(--rep-text);
    font-size: 17px;
    line-height: 1.2;
}

.rep-reports-page .rep-insight-copy p {
    margin: 0;
    color: #8b88a7;
    font-size: 13px;
    line-height: 1.45;
}

.rep-reports-page .rep-insight-copy a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #3f3cfb;
    font-size: 13px;
    font-weight: 500;
}

.rep-reports-page .rep-mobile-top-title {
    display: none;
}

@media (max-width: 1180px) {
    .rep-reports-page .rep-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rep-reports-page .rep-grid {
        grid-template-columns: 1fr;
    }

    .rep-reports-page .rep-performance-head,
    .rep-reports-page .rep-performance-row {
        grid-template-columns: minmax(220px, 2fr) .9fr .9fr .7fr .72fr 18px;
        column-gap: 8px;
    }
}

@media (max-width: 760px) {
    .rep-reports-page .rep-page-head {
        display: none;
    }

    .rep-reports-page .rep-page-content {
        padding-top: 21px;
    }

    .rep-reports-page .rep-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .rep-reports-page .rep-stat-card {
        display: flex;
        min-height: 138px;
        padding: 16px 14px 14px;
        flex-direction: column;
        gap: 14px;
        border-radius: 7px;
    }

    .rep-reports-page .rep-stat-icon {
        width: 42px;
        height: 42px;
    }

    .rep-reports-page .rep-stat-icon svg {
        width: 21px;
        height: 21px;
    }

    .rep-reports-page .rep-stat-copy {
        width: 100%;
        flex: 1;
    }

    .rep-reports-page .rep-stat-copy > strong {
        margin-top: 6px;
        font-size: 19px;
    }

    .rep-reports-page .rep-stat-copy > small {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.4;
    }

    .rep-reports-page .rep-grid {
        gap: 16px;
    }

    .rep-reports-page .rep-panel,
    .rep-reports-page .rep-info-card {
        border-radius: 10px;
    }

    .rep-reports-page .rep-panel-head {
        padding: 23px 21px 16px;
    }

    .rep-reports-page .rep-panel-head h2,
    .rep-reports-page .rep-panel-head h3 {
        font-size: 16px;
    }

    .rep-reports-page .rep-panel-badge {
        line-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .rep-reports-page .rep-legend {
        padding: 0 21px 2px;
        gap: 22px;
        font-size: 12px;
    }

    .rep-reports-page .rep-chart-wrap {
        padding: 4px 16px 14px;
    }

    .rep-reports-page .rep-axis-label {
        font-size: 10px;
    }

    .rep-reports-page .rep-activities-panel .rep-panel-head .rep-desktop-only-title {
        display: none;
    }

    .rep-reports-page .rep-activities-panel .rep-panel-head .rep-mobile-only-title {
        display: block;
    }

    .rep-reports-page .rep-breakdown {
        min-height: 210px;
        padding: 6px 20px 22px;
        grid-template-columns: 135px minmax(0, 1fr);
        gap: 6px;
    }

    .rep-reports-page .rep-donut {
        width: 126px;
    }

    .rep-reports-page .rep-donut-hole span {
        font-size: 10px;
    }

    .rep-reports-page .rep-donut-hole strong {
        font-size: 15px;
    }

    .rep-reports-page .rep-breakdown-list {
        gap: 12px;
    }

    .rep-reports-page .rep-breakdown-item strong,
    .rep-reports-page .rep-breakdown-item span,
    .rep-reports-page .rep-breakdown-item small {
        font-size: 12px;
    }

    .rep-reports-page .rep-performance-table {
        padding: 0 20px 14px;
    }

    .rep-reports-page .rep-performance-head {
        display: none;
    }

    .rep-reports-page .rep-performance-row {
        display: grid;
        min-height: 0;
        padding: 14px 0 17px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "main main"
            "stats stats"
            "earn earn";
        row-gap: 12px;
        column-gap: 0;
    }

    .rep-reports-page .rep-project-main {
        grid-area: main;
        grid-template-columns: 60px minmax(0, 1fr);
        align-items: start;
        gap: 11px;
    }

    .rep-reports-page .rep-project-image {
        width: 60px;
        height: 60px;
    }

    .rep-reports-page .rep-project-copy {
        gap: 6px;
    }

    .rep-reports-page .rep-project-copy strong {
        overflow: visible;
        font-size: 14px;
        white-space: normal;
    }

    .rep-reports-page .rep-mobile-pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .rep-reports-page .rep-project-type-cell,
    .rep-reports-page .rep-project-status-cell,
    .rep-reports-page .rep-row-arrow {
        display: none;
    }

    .rep-reports-page .rep-stats-row {
        grid-area: stats;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid #e6e7ef;
        border-bottom: 1px solid #e6e7ef;
    }

    .rep-reports-page .rep-stats-row > div {
        display: grid;
        min-height: 50px;
        place-content: center;
        gap: 7px;
        text-align: center;
    }

    .rep-reports-page .rep-stats-row > div + div {
        border-left: 1px solid #e6e7ef;
    }

    .rep-reports-page .rep-stats-row span {
        color: #9997ab;
        font-size: 10px;
    }

    .rep-reports-page .rep-stats-row strong {
        font-size: 15px;
    }

    .rep-reports-page .rep-stats-row .rep-earnings {
        font-size: 15px;
    }

    .rep-reports-page .rep-performance-footer {
        padding: 6px 21px 18px;
    }

    .rep-reports-page .rep-category-panel {
        padding-bottom: 18px;
    }

    .rep-reports-page .rep-category-list {
        padding: 0 21px 2px;
        gap: 18px;
    }

    .rep-reports-page .rep-category-item {
        grid-template-columns: 55px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .rep-reports-page .rep-category-item strong,
    .rep-reports-page .rep-category-item span:last-child {
        font-size: 12px;
    }

    .rep-reports-page .rep-insight-card {
        min-height: 124px;
        padding: 22px 20px 18px;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 12px;
    }

    .rep-reports-page .rep-insight-icon {
        width: 46px;
        height: 46px;
    }

    .rep-reports-page .rep-insight-icon svg {
        width: 24px;
        height: 24px;
    }

    .rep-reports-page .rep-insight-copy strong {
        font-size: 15px;
    }

    .rep-reports-page .rep-insight-copy p {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .rep-mobile-title-page .ggz-main {
        position: relative;
    }

    .rep-mobile-title-page .ggz-mobile-logo {
        display: none !important;
    }

    .rep-mobile-title-page .ggz-topbar {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-areas:
            "ggz-menu ggz-title ggz-actions"
            "ggz-search ggz-search ggz-search";
    }

    .rep-mobile-title-page .rep-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(20px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 145px);
        margin: 0;
        overflow: hidden;
        color: #28235A;
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .rep-mobile-title-page .ggz-notification,
    .rep-mobile-title-page .ggz-profile-copy,
    .rep-mobile-title-page .ggz-profile-arrow {
        display: none !important;
    }

    .rep-mobile-title-page .ggz-profile-area {
        gap: 0;
    }
}

@media (max-width: 390px) {
    .rep-reports-page .rep-stat-card {
        padding-right: 13px;
        padding-left: 13px;
    }

    .rep-reports-page .rep-panel-head,
    .rep-reports-page .rep-category-list,
    .rep-reports-page .rep-performance-table,
    .rep-reports-page .rep-performance-footer,
    .rep-reports-page .rep-legend {
        padding-right: 18px;
        padding-left: 18px;
    }

    .rep-reports-page .rep-breakdown {
        padding-right: 17px;
        padding-left: 17px;
        grid-template-columns: 122px minmax(0, 1fr);
    }

    .rep-reports-page .rep-donut {
        width: 116px;
    }

    .rep-mobile-title-page .rep-mobile-top-title {
        top: calc(20px + env(safe-area-inset-top));
        max-width: calc(100% - 130px);
        font-size: 19px;
    }
}

/* =========================================================
 * REP V8.1 动态图表
 * ========================================================= */

.rep-reports-page .rep-overview-chart {
    cursor: crosshair;
}

.rep-reports-page .rep-chart-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 112px;
    padding: 8px 10px;
    border: 1px solid #dfdfeb;
    border-radius: 5px;
    color: #777593;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 24px rgba(33, 31, 69, .1);
    font-size: 11px;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 10px));
    transition: left .18s ease, top .18s ease, opacity .15s ease;
    white-space: nowrap;
}

.rep-reports-page .rep-chart-tooltip.rep-visible {
    opacity: 1;
}

.rep-reports-page .rep-chart-tooltip > span {
    display: block;
    margin-bottom: 3px;
    color: var(--rep-text);
    font-weight: 700;
}

.rep-reports-page .rep-chart-tooltip small {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 10px;
}

.rep-reports-page .rep-chart-tooltip strong {
    color: var(--rep-text);
    font-size: 11px;
}

.rep-reports-page .rep-chart-empty,
.rep-reports-page .rep-breakdown-empty {
    width: 100%;
    min-height: 220px;
    place-items: center;
    color: #9997ab;
    font-size: 13px;
    text-align: center;
}

.rep-reports-page .rep-chart-empty:not([hidden]),
.rep-reports-page .rep-breakdown-empty:not([hidden]) {
    display: grid;
}

.rep-reports-page .rep-breakdown-empty {
    grid-column: 1 / -1;
}

.rep-reports-page .rep-hover-line {
    stroke: #aaa8c0;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0;
    transition: x1 .18s ease, x2 .18s ease, opacity .15s ease;
}

.rep-reports-page .rep-hover-line.rep-visible {
    opacity: 1;
}

.rep-reports-page .rep-point-completed,
.rep-reports-page .rep-point-submitted {
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
    transition: r .16s ease, filter .16s ease, opacity .16s ease;
}

.rep-reports-page .rep-point-completed:hover,
.rep-reports-page .rep-point-completed:focus,
.rep-reports-page .rep-point-completed.rep-active,
.rep-reports-page .rep-point-submitted:hover,
.rep-reports-page .rep-point-submitted:focus,
.rep-reports-page .rep-point-submitted.rep-active {
    r: 6;
    filter: drop-shadow(0 3px 5px rgba(69, 53, 255, .24));
    outline: none;
}

@media (max-width: 760px) {
    .rep-reports-page .rep-axis-label {
        font-size: 18px;
        font-weight: 500;
    }

    .rep-reports-page .rep-chart-tooltip {
        min-width: 116px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .rep-reports-page .rep-chart-tooltip small,
    .rep-reports-page .rep-chart-tooltip strong {
        font-size: 12px;
    }
}

/* =========================================================
 * REP V8.2 设计图对齐修复
 * =========================================================
 * 1. Activities by Type：缩小环形图与分类列表之间的空隙。
 * 2. Performance by Project：桌面端隐藏手机专用标签和统计区。
 * 3. Insights：恢复白色背景并禁止被网格纵向拉伸。
 */

/* 桌面端默认隐藏手机专用结构 */
.rep-reports-page .rep-mobile-pill-row,
.rep-reports-page .rep-stats-row {
    display: none;
}

/* 环形图和右侧分类靠近，匹配设计图 */
.rep-reports-page .rep-breakdown {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 2px;
    padding-right: 28px;
    padding-left: 18px;
}

.rep-reports-page .rep-donut {
    justify-self: start;
}

/* 右侧卡片按内容高度排列，不再强行拉高 */
.rep-reports-page .rep-right-stack {
    align-self: start;
    align-content: start;
    grid-template-rows: auto auto;
}

/* Insights 与设计图一致：白底、浅蓝边框、紧凑高度 */
.rep-reports-page .rep-insight-card {
    min-height: 141px;
    align-self: start;
    background: #fff;
}

@media (max-width: 760px) {
    /* 手机端重新显示手机专用结构 */
    .rep-reports-page .rep-mobile-pill-row {
        display: flex;
    }

    .rep-reports-page .rep-stats-row {
        display: grid;
    }

    /* 手机端保持原设计尺寸 */
    .rep-reports-page .rep-breakdown {
        grid-template-columns: 135px minmax(0, 1fr);
        gap: 6px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .rep-reports-page .rep-donut {
        justify-self: center;
    }
}

@media (max-width: 390px) {
    .rep-reports-page .rep-breakdown {
        grid-template-columns: 122px minmax(0, 1fr);
        padding-right: 17px;
        padding-left: 17px;
    }
}

 

@media (max-width: 760px) {
    .rep-reports-page .rep-performance-row {
        padding-bottom: 0;
        grid-template-areas:
            "main main"
            "stats stats";
    }

   
    .rep-reports-page .rep-performance-row > .rep-metric,
    .rep-reports-page .rep-performance-row > .rep-earnings {
        display: none;
    }

    .rep-reports-page .rep-stats-row {
        width: 100%;
    }

    .rep-reports-page .rep-performance-row:last-child .rep-stats-row {
        border-bottom: 0;
    }
}
 

.hlp-help-page {
    --hlp-primary: #493cff;
    --hlp-text: #28235a;
    --hlp-muted: #85839f;
    --hlp-border: #deedff;
    --hlp-soft: #f6f3ff;
}

.hlp-help-page .hlp-page-head {
    margin: 37px 0 46px;
}

.hlp-help-page .hlp-page-head h1 {
    margin: 0 0 4px;
    color: var(--hlp-text);
    font-size: 27px;
    line-height: 1.2;
}

.hlp-help-page .hlp-page-head p {
    margin: 0;
    color: var(--hlp-muted);
    font-size: 15px;
    font-weight: 600;
}

.hlp-help-page .hlp-support-panel,
.hlp-help-page .hlp-contact-panel {
    border: 1px solid var(--hlp-border);
    border-radius: 11px;
    background: #fff;
}

.hlp-help-page .hlp-support-panel {
    min-height: 347px;
}

.hlp-help-page .hlp-support-head {
    padding: 27px 25px 0;
}

.hlp-help-page .hlp-support-head h2,
.hlp-help-page .hlp-contact-head h2 {
    margin: 0;
    color: var(--hlp-text);
    font-size: 20px;
    line-height: 1.25;
}

.hlp-help-page .hlp-support-body {
    display: grid;
    min-height: 286px;
    padding: 20px 29px 28px;
    grid-template-columns: minmax(0, 1.75fr) 1px minmax(310px, .95fr);
    align-items: center;
    gap: 30px;
}

.hlp-help-page .hlp-support-main {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
}

.hlp-help-page .hlp-support-art {
    display: grid;
    min-width: 0;
    place-items: center;
}

.hlp-help-page .hlp-support-art img {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
}

.hlp-help-page .hlp-support-copy {
    display: grid;
    justify-items: start;
}

.hlp-help-page .hlp-support-copy h3 {
    margin: 0 0 8px;
    color: var(--hlp-text);
    font-size: 20px;
    line-height: 1.25;
}

.hlp-help-page .hlp-support-copy p {
    margin: 0 0 20px;
    color: var(--hlp-muted);
    font-size: 15px;
    line-height: 1.45;
}

.hlp-help-page .hlp-primary-button {
    display: inline-flex;
    min-width: 223px;
    height: 46px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 4px;
    color: #fff;
    background: var(--hlp-primary);
    font-size: 16px;
    font-weight: 700;
}

.hlp-help-page .hlp-primary-button svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hlp-help-page .hlp-support-divider {
    width: 1px;
    height: 225px;
    background: #e4e5ec;
}

.hlp-help-page .hlp-benefit-list {
    display: grid;
    gap: 22px;
}

.hlp-help-page .hlp-benefit-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.hlp-help-page .hlp-round-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: var(--hlp-primary);
    background: var(--hlp-soft);
}

.hlp-help-page .hlp-round-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hlp-help-page .hlp-benefit-item strong {
    display: block;
    margin-bottom: 6px;
    color: var(--hlp-text);
    font-size: 15px;
    line-height: 1.25;
}

.hlp-help-page .hlp-benefit-item p {
    margin: 0;
    color: var(--hlp-muted);
    font-size: 15px;
    line-height: 1.4;
}

.hlp-help-page .hlp-contact-panel {
    margin-top: 21px;
    padding: 28px 24px 40px;
}

.hlp-help-page .hlp-contact-head p {
    margin: 5px 0 0;
    color: var(--hlp-muted);
    font-size: 15px;
    font-weight: 600;
}

.hlp-help-page .hlp-contact-grid {
    display: grid;
    margin-top: 27px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.hlp-help-page .hlp-contact-card {
    display: grid;
    min-height: 218px;
    padding: 22px 20px 19px;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    border: 1px solid #e1e2e9;
    border-radius: 11px;
    background: #fff;
}

.hlp-help-page .hlp-contact-icon {
    width: 46px;
    height: 46px;
}

.hlp-help-page .hlp-contact-icon svg {
    width: 23px;
    height: 23px;
}

.hlp-help-page .hlp-contact-copy {
    display: flex;
    min-height: 176px;
    flex-direction: column;
    align-items: flex-start;
}

.hlp-help-page .hlp-contact-copy h3 {
    margin: 3px 0 8px;
    color: var(--hlp-text);
    font-size: 16px;
    line-height: 1.25;
}

.hlp-help-page .hlp-contact-copy p {
    margin: 0;
    color: #626176;
    font-size: 14px;
    line-height: 1.45;
}

.hlp-help-page .hlp-email-link {
    margin-top: 20px;
    color: #3428ff;
    font-size: 14px;
    font-weight: 700;
}

.hlp-help-page .hlp-availability {
    margin-top: 20px;
    color: var(--hlp-text);
    font-size: 13px;
    line-height: 1.35;
}

.hlp-help-page .hlp-soft-button {
    display: inline-grid;
    min-width: 88px;
    min-height: 34px;
    margin-top: auto;
    padding: 0 16px;
    place-items: center;
    border-radius: 4px;
    color: #3b2fff;
    background: #f6f3ff;
    font-size: 11px;
    font-weight: 700;
}

.hlp-help-page .hlp-mobile-top-title {
    display: none;
}

@media (max-width: 1180px) {
    .hlp-help-page .hlp-support-body {
        grid-template-columns: minmax(0, 1.45fr) 1px minmax(275px, 1fr);
        gap: 22px;
    }

    .hlp-help-page .hlp-support-main {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 14px;
    }

    .hlp-help-page .hlp-support-art img {
        width: 205px;
    }
}

@media (max-width: 900px) {
    .hlp-help-page .hlp-support-body {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hlp-help-page .hlp-support-divider {
        width: 100%;
        height: 1px;
    }

    .hlp-help-page .hlp-benefit-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .hlp-help-page .hlp-benefit-item {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }

    .hlp-help-page .hlp-round-icon {
        width: 42px;
        height: 42px;
    }

    .hlp-help-page .hlp-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hlp-help-page .hlp-page-head {
        display: none;
    }

    .hlp-help-page .hlp-page-content {
        padding-top: 20px;
    }

    .hlp-help-page .hlp-support-panel {
        min-height: 0;
    }

    .hlp-help-page .hlp-support-head {
        display: none;
    }

    .hlp-help-page .hlp-support-body {
        display: block;
        min-height: 0;
        padding: 27px 27px 40px;
    }

    .hlp-help-page .hlp-support-main {
        display: block;
    }

    .hlp-help-page .hlp-support-art img {
        width: 190px;
        margin: 0 auto;
    }

    .hlp-help-page .hlp-support-copy {
        margin-top: 23px;
        justify-items: center;
        text-align: center;
    }

    .hlp-help-page .hlp-support-copy h3 {
        margin-bottom: 8px;
        font-size: 19px;
    }

    .hlp-help-page .hlp-support-copy p {
        margin-bottom: 21px;
        font-size: 14px;
    }

    .hlp-help-page .hlp-primary-button {
        width: 220px;
        min-width: 0;
        height: 48px;
        padding: 0 16px;
        font-size: 15px;
    }

    .hlp-help-page .hlp-support-divider {
        height: 1px;
        margin: 30px 0 38px;
        background: #e1e2e9;
    }

    .hlp-help-page .hlp-benefit-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .hlp-help-page .hlp-benefit-item {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 18px;
    }

    .hlp-help-page .hlp-round-icon {
        width: 50px;
        height: 50px;
    }

    .hlp-help-page .hlp-benefit-item strong {
        margin-bottom: 7px;
        font-size: 15px;
    }

    .hlp-help-page .hlp-benefit-item p {
        font-size: 14px;
    }

    .hlp-help-page .hlp-contact-panel {
        margin-top: 20px;
        padding: 29px 27px 47px;
    }

    .hlp-help-page .hlp-contact-head h2 {
        font-size: 20px;
    }

    .hlp-help-page .hlp-contact-head p {
        max-width: 280px;
        font-size: 14px;
        line-height: 1.45;
    }

    .hlp-help-page .hlp-contact-grid {
        margin-top: 30px;
        gap: 20px;
    }

    .hlp-help-page .hlp-contact-card {
        display: block;
        min-height: 306px;
        padding: 25px 20px 21px;
    }

    .hlp-help-page .hlp-contact-icon {
        width: 56px;
        height: 56px;
    }

    .hlp-help-page .hlp-contact-icon svg {
        width: 28px;
        height: 28px;
    }

    .hlp-help-page .hlp-contact-copy {
        min-height: 204px;
        margin-top: 25px;
    }

    .hlp-help-page .hlp-contact-copy h3 {
        margin: 0 0 9px;
        font-size: 18px;
    }

    .hlp-help-page .hlp-contact-copy p {
        font-size: 16px;
        line-height: 1.45;
    }

    .hlp-help-page .hlp-email-link {
        margin-top: 25px;
        font-size: 14px;
    }

    .hlp-help-page .hlp-availability {
        margin-top: 26px;
        font-size: 13px;
    }

    .hlp-help-page .hlp-soft-button {
        min-width: 104px;
        min-height: 39px;
        padding: 0 17px;
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .hlp-mobile-title-page .ggz-main {
        position: relative;
    }

    .hlp-mobile-title-page .ggz-mobile-logo {
        display: none !important;
    }

    .hlp-mobile-title-page .ggz-topbar {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-areas:
            "ggz-menu ggz-title ggz-actions"
            "ggz-search ggz-search ggz-search";
        row-gap: 19px;
    }

    .hlp-mobile-title-page .ggz-menu-button {
        /* display: grid; */
        /* grid-area: ggz-menu; */
        /* justify-self: start; */
    }

    .hlp-mobile-title-page .ggz-search {
        /* grid-area: ggz-search; */
        /* height: 50px; */
        /* padding: 0 18px; */
    }

    .hlp-mobile-title-page .ggz-search input {
        /* font-size: 16px; */
    }

    .hlp-mobile-title-page .ggz-profile-area {
        display: flex;
        grid-area: ggz-actions;
        justify-self: end;
        gap: 0;
    }

    .hlp-mobile-title-page .ggz-avatar {
        width: 38px;
        height: 38px;
    }

    .hlp-mobile-title-page .hlp-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(18px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 145px);
        margin: 0;
        overflow: hidden;
        color: var(--hlp-text);
        font-size: 20px;
        font-weight: 700;
        line-height: 38px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .hlp-mobile-title-page .ggz-notification,
    .hlp-mobile-title-page .ggz-profile-copy,
    .hlp-mobile-title-page .ggz-profile-arrow {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .hlp-help-page .hlp-support-body {
        padding-right: 25px;
        padding-left: 25px;
    }

    .hlp-help-page .hlp-contact-panel {
        padding-right: 25px;
        padding-left: 25px;
    }

    .hlp-help-page .hlp-contact-card {
        padding-right: 18px;
        padding-left: 18px;
    }

    .hlp-mobile-title-page .hlp-mobile-top-title {
        max-width: calc(100% - 130px);
        font-size: 22px;
    }
}


 
@media (max-width: 760px) {
    .hlp-help-page .hlp-contact-card {
        min-height: 0;
    }

    .hlp-help-page .hlp-contact-copy {
        min-height: 0;
    }

    .hlp-help-page .hlp-soft-button {
        margin-top: 24px;
    }
}

@media (max-width: 600px) {
    .hlp-mobile-title-page .ggz-main {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 390px) {
    .hlp-mobile-title-page .ggz-main {
        padding-right: 20px;
        padding-left: 20px;
    }
}

 
.pro-mobile-top-title {
    display: none;
    margin: 14px 0 10px;
    color: #2b2762;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
}

.pro-page-content {
    padding-top: 20px;
}

.pro-page-head {
    margin-bottom: 16px;
}

.pro-page-head h1 {
    margin: 0;
    color: #2b2762;
    font-size: 29px;
    line-height: 1.18;
}

.pro-page-head p {
    margin: 8px 0 0;
    color: #8a86aa;
    font-size: 16px;
    font-weight: 600;
}

.pro-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    margin-bottom: 18px;
}

.pro-profile-card,
.pro-completion-card,
.pro-panel {
    border: 1px solid #e3e9f7;
    border-radius: 18px;
    background: #ffffff;
}

.pro-profile-card {
    padding: 24px 24px 18px;
}

.pro-profile-top {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}

.pro-avatar-wrap {
    position: relative;
    width: 144px;
    max-width: 100%;
}

.pro-avatar-art {
    position: relative;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    background: #1f1c4a;
}

.pro-avatar-head,
.pro-avatar-body {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
}

.pro-avatar-head {
    top: 28px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.pro-avatar-body {
    bottom: 22px;
    width: 72px;
    height: 72px;
    border-radius: 50% 50% 42% 42%;
}

.pro-avatar-camera {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ececf4;
    place-items: center;
    border-radius: 50%;
    color: #7b7895;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(35, 30, 90, .08);
}

.pro-avatar-camera svg,
.pro-verified-badge svg,
.pro-edit-button svg,
.pro-contact-list svg,
.pro-achievement-icon svg,
.pro-activity-icon svg,
.pro-completion-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    /* stroke: currentColor; */
    /* stroke-width: 1.8; */
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pro-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.pro-name-row h2 {
    margin: 0;
    color: #2b2762;
    font-size: 25px;
    line-height: 1.15;
}

.pro-job-title {
    margin: 8px 0 18px;
    color: #4f4c6d;
    font-size: 15px;
    font-weight: 700;
}

.pro-verified-badge {
    display: inline-flex;
    height: 34px;
    padding: 0 12px;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    color: #4535ff;
    background: #f3f0ff;
    font-size: 14px;
    font-weight: 700;
}

.pro-contact-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pro-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #5e5a7b;
    font-size: 14px;
}

.pro-contact-list svg,
.pro-edit-button svg {
    color: #6c6a84;
}

.pro-edit-button {
    display: inline-flex;
    min-width: 139px;
    height: 42px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e8e9f0;
    border-radius: 10px;
    color: #5f5c77;
    background: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.pro-profile-stats {
    display: flex;
    gap: 0;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eceef6;
}

.pro-profile-stats > div {
    flex: 1;
    min-width: 0;
}

.pro-gain-block {
    padding-left: 34px;
    margin-left: 34px;
    border-left: 1px solid #eceef6;
}

.pro-profile-stats span {
    display: block;
    color: #2d295f;
    font-size: 14px;
    font-weight: 700;
}

.pro-profile-stats strong {
    display: block;
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.2;
}

.pro-balance-block strong {
    color: #4535ff;
}

.pro-gain-block strong {
    color: #19c25f;
}

.pro-profile-stats small {
    display: block;
    margin-top: 8px;
    color: #5f5c77;
    font-size: 13px;
    font-weight: 700;
}

.pro-profile-stats small b {
    color: #19c25f;
    font-size: 18px;
}

.pro-completion-card {
    padding: 24px 18px 18px;
}

.pro-card-head,
.pro-card-head--simple {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pro-card-head h2,
.pro-card-head--simple h2 {
    margin: 0;
    color: #2b2762;
    font-size: 24px;
    line-height: 1.2;
}

.pro-card-head p,
.pro-card-head--simple p {
    margin: 6px 0 0;
    color: #66627f;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.pro-card-head a {
    color: #4535ff;
    font-size: 14px;
    font-weight: 700;
}

.pro-update-chip {
    display: inline-flex;
    height: 38px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #262626;
    background: #f7f7fa;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.pro-completion-wrap {
    display: flex;
    align-items: center;
    gap: 22px;
    padding-top: 18px;
}

.pro-completion-donut {
    position: relative;
    display: grid;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#4535ff 0% 80%, #edf0f8 80% 100%);
}

.pro-completion-hole {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    border-radius: 50%;
    color: #35323f;
    background: #ffffff;
}

.pro-completion-hole strong {
    font-size: 17px;
}

.pro-completion-list {
    display: grid;
    gap: 12px;
    flex: 1;
}

.pro-completion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2c295b;
    font-size: 14px;
    font-weight: 700;
}

.pro-completion-icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
}

.pro-completion-item.is-done .pro-completion-icon {
    color: #31b864;
    background: #f4fbf7;
    box-shadow: inset 0 0 0 1px #dcefe4;
}

.pro-completion-item.is-pending .pro-completion-icon {
    color: #d2d4dd;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px #e5e8ef;
}

.pro-tabs {
    display: flex;
    align-items: center;
    gap: 36px;
    margin: 0 0 18px;
    border-bottom: 1px solid #eceef6;
}

.pro-tab {
    position: relative;
    padding: 0 0 12px;
    color: #6c6986;
    font-size: 14px;
    font-weight: 700;
}

.pro-tab-active {
    color: #4535ff;
}

.pro-tab-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: #4535ff;
}

.pro-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 360px;
    gap: 20px 16px;
    align-items: start;
}

.pro-left-stack {
    display: grid;
    gap: 18px;
}

.pro-panel {
    padding: 24px;
}

.pro-activity-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.pro-activity-item {
    min-height: 106px;
    padding: 18px 16px 16px;
    border: 1px solid #e9ebf3;
    border-radius: 14px;
}

.pro-activity-icon,
.pro-achievement-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
}

.pro-activity-icon svg,
.pro-achievement-icon svg {
    width: 22px;
    height: 22px;
}

.pro-icon-purple,
.pro-achievement-purple { background: #7d6eff; }
.pro-icon-green { background: #16bd62; }
.pro-icon-orange,
.pro-achievement-gold { background: #ff9f1a; }
.pro-icon-blue { background: #2d92f7; }
.pro-achievement-red { background: #ff3856; }

.pro-activity-item strong {
    display: block;
    margin-top: 16px;
    color: #2b2762;
    font-size: 18px;
}

.pro-activity-item span:last-child {
    display: block;
    margin-top: 10px;
    color: #5f5b77;
    font-size: 13px;
    font-weight: 700;
}

.pro-month-select {
    position: relative;
    display: inline-block;
}

.pro-month-select::after {
    content: '⌄';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-54%);
    color: #6c6986;
    font-size: 14px;
    pointer-events: none;
}

.pro-month-select select {
    height: 38px;
    padding: 0 34px 0 16px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    color: #35323f;
    background: #f7f7fa;
    font-size: 13px;
    font-weight: 800;
    appearance: none;
    -webkit-appearance: none;
}

.pro-earning-wrap {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px;
    margin-top: 20px;
    align-items: stretch;
}

.pro-earning-summary {
    padding: 24px 18px;
    border: 1px solid #e8ebf4;
    border-radius: 14px;
    background: #fbfbff;
}

.pro-earning-summary span {
    display: block;
    color: #2c295b;
    font-size: 14px;
    font-weight: 700;
}

.pro-earning-summary strong {
    display: block;
    margin-top: 18px;
    color: #2b2762;
    font-size: 20px;
}

.pro-earning-summary p {
    margin: 42px 0 0;
}

.pro-earning-summary b {
    display: block;
    color: #16bd62;
    font-size: 14px;
}

.pro-earning-summary small {
    display: block;
    margin-top: 8px;
    color: #5f5b77;
    font-size: 13px;
    font-weight: 700;
}

.pro-earning-chart {
    position: relative;
    min-height: 280px;
}

.pro-earning-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.pro-chart-grid-line {
    stroke: #e9edf5;
    stroke-width: 1;
}

.pro-chart-axis-label {
    fill: #91909d;
    font-size: 13px;
    font-weight: 600;
}

.pro-chart-bar {
    fill: #d8d8fb;
    transition: fill .2s ease, opacity .2s ease;
}

.pro-chart-bar:hover,
.pro-chart-bar.is-active {
    fill: #7570f8;
}

.pro-chart-tooltip {
    position: absolute;
    z-index: 10;
    min-width: 110px;
    padding: 10px 12px;
    border: 1px solid #e8eaf3;
    border-radius: 12px;
    color: #58556d;
    background: #ffffff;
    box-shadow: 0 12px 24px rgba(43, 39, 98, .08);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -110%);
    transition: opacity .16s ease;
}

.pro-chart-tooltip.is-visible {
    opacity: 1;
}

.pro-chart-tooltip span {
    display: block;
    font-size: 13px;
}

.pro-chart-tooltip strong {
    display: block;
    margin-top: 4px;
    color: #2b2762;
    font-size: 16px;
}

.pro-chart-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: #8d8aa5;
    font-size: 14px;
}

.pro-achievement-list {
    display: grid;
    gap: 0;
    margin-top: 10px;
}

.pro-achievement-item {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #eceef6;
}

.pro-achievement-item:first-child {
    padding-top: 14px;
}

.pro-achievement-item:last-child {
    padding-bottom: 6px;
    border-bottom: 0;
}

.pro-achievement-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    flex: 0 0 auto;
}

.pro-achievement-copy strong {
    display: block;
    color: #2b2762;
    font-size: 18px;
    line-height: 1.2;
}

.pro-achievement-copy p {
    margin: 6px 0 10px;
    color: #5e5a7b;
    font-size: 13px;
    line-height: 1.35;
}

.pro-achievement-copy small {
    color: #84819a;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 1280px) {
    .pro-hero-grid,
    .pro-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    .pro-profile-top {
        grid-template-columns: 116px minmax(0, 1fr);
    }

    .pro-edit-button {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .pro-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pro-earning-wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .pro-page-content {
        padding-top: 12px;
    }

    .pro-page-head,
    .pro-tabs {
        display: none;
    }

    .pro-mobile-title-page .ggz-mobile-logo,
    .pro-mobile-title-page .ggz-notification,
    .pro-mobile-title-page .ggz-profile-copy,
    .pro-mobile-title-page .ggz-profile-arrow {
        display: none;
    }

    .pro-mobile-title-page .ggz-topbar {
        display: grid;
        grid-template-columns: 36px 1fr 36px;
        align-items: center;
        gap: 12px;
    }

    .pro-mobile-title-page .ggz-menu-button,
    .pro-mobile-title-page .ggz-profile-area {
        display: grid;
    }

    .pro-mobile-title-page .ggz-profile-area {
        justify-content: end;
    }

   

    .pro-mobile-title-page .ggz-avatar::before,
    .pro-mobile-title-page .ggz-avatar::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: #ffffff;
    }

    .pro-mobile-title-page .ggz-avatar::before {
        top: 7px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

    .pro-mobile-title-page .ggz-avatar::after {
        bottom: 6px;
        width: 18px;
        height: 18px;
        border-radius: 50% 50% 40% 40%;
    }

    .pro-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(18px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 145px);
        margin: 0;
        overflow: hidden;
        color: var(--hlp-text);
        font-size: 20px;
        font-weight: 700;
        line-height: 38px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    

    .pro-hero-grid {
        gap: 16px;
        margin-bottom: 16px;
    }

    .pro-profile-card,
    .pro-completion-card,
    .pro-panel {
        padding: 22px 20px;
        border-radius: 18px;
    }

    .pro-profile-top {
        grid-template-columns: 1fr auto;
        gap: 14px;
    }

    .pro-avatar-wrap {
        width: 76px;
        order: 1;
    }

    .pro-avatar-art {
        width: 76px;
        height: 76px;
    }

    .pro-avatar-head {
        top: 15px;
        width: 21px;
        height: 21px;
    }

    .pro-avatar-body {
        bottom: 12px;
        width: 37px;
        height: 37px;
    }

    .pro-avatar-camera {
        width: 22px;
        height: 22px;
        right: -2px;
        bottom: -1px;
    }

    .pro-profile-main {
        order: 3;
        grid-column: 1 / -1;
    }

    .pro-name-row h2 {
        font-size: 22px;
    }

    .pro-job-title {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .pro-edit-button {
        order: 2;
        grid-column: auto;
        min-width: auto;
        height: 40px;
        padding: 0 14px;
        justify-self: end;
    }

    .pro-profile-stats {
        display: flex;
        margin-top: 18px;
    }

    .pro-gain-block {
        padding-left: 20px;
        margin-left: 20px;
    }

    .pro-completion-wrap {
        display: flex;
        align-items: center;
        gap: 18px;
        padding-top: 14px;
    }

    .pro-completion-donut {
        width: 110px;
        height: 110px;
    }

    .pro-completion-hole {
        width: 76px;
        height: 76px;
    }

    .pro-card-head h2,
    .pro-card-head--simple h2 {
        font-size: 18px;
    }

    .pro-card-head p,
    .pro-card-head--simple p {
        font-size: 12px;
    }

    .pro-activity-grid {
        gap: 10px;
        margin-top: 16px;
    }

    .pro-activity-item {
        min-height: 120px;
        padding: 16px 14px 14px;
        border-radius: 10px;
    }

    .pro-activity-item strong {
        font-size: 18px;
    }

    .pro-activity-item span:last-child {
        font-size: 12px;
    }

    .pro-earning-summary {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        align-items: start;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .pro-earning-summary strong {
        margin-top: 4px;
        font-size: 18px;
    }

    .pro-earning-summary p {
        margin: 0;
        text-align: right;
    }

    .pro-earning-chart {
        min-height: 240px;
    }

    .pro-chart-axis-label {
        font-size: 16px;
    }

    .pro-achievement-item {
        align-items: flex-start;
        padding: 16px 0;
    }

    .pro-achievement-icon {
        width: 72px;
        height: 72px;
    }

    .pro-achievement-copy strong {
        font-size: 18px;
    }
}

@media (max-width: 390px) {
    .pro-completion-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .pro-profile-stats {
        flex-direction: column;
        gap: 18px;
    }

    .pro-gain-block {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        border-top: 1px solid #eceef6;
        padding-top: 18px;
    }
}

 
/* =========================================================
 * WDR Withdraw 页面专属样式 V10
 * =========================================================
 * 页面：Wallet / Withdraw
 * 说明：
 * 1. 公共头部、侧边栏继续由 GGZ 公共文件提供。
 * 2. 本页面专属类名统一使用 wdr- 前缀。
 * 3. 桌面端按 PC 设计图双栏布局；手机端改为单栏顺序布局。
 */
.wdr-withdraw-page {
    --wdr-primary: #493cff;
    --wdr-text: #28235A;
    --wdr-muted: #85839f;
    --wdr-line: #ddecff;
    --wdr-soft: #f8f7ff;
    --wdr-green: #2dbf69;
}

.wdr-withdraw-page .wdr-page-content {
    padding-top: 52px;
}

.wdr-withdraw-page .wdr-page-head {
    margin-bottom: 20px;
}

.wdr-withdraw-page .wdr-page-head h1 {
    margin: 0 0 6px;
    color: var(--wdr-text);
    font-size: 27px;
    line-height: 1.2;
}

.wdr-withdraw-page .wdr-page-head p {
    margin: 0;
    color: var(--wdr-muted);
    font-size: 15px;
    font-weight: 600;
}

.wdr-withdraw-page .wdr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(310px, .95fr);
    gap: 14px;
    align-items: start;
}

.wdr-withdraw-page .wdr-main-column,
.wdr-withdraw-page .wdr-side-column {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.wdr-withdraw-page .wdr-card {
    min-width: 0;
    border: 1px solid var(--wdr-line);
    border-radius: 12px;
    background: #fff;
}

.wdr-withdraw-page .wdr-currency-card,
.wdr-withdraw-page .wdr-details-card {
    padding: 25px 23px 22px;
}

.wdr-withdraw-page .wdr-card h2,
.wdr-withdraw-page .wdr-section-block h2,
.wdr-withdraw-page .wdr-card-header h2,
.wdr-withdraw-page .wdr-tips-card h2 {
    margin: 0;
    color: var(--wdr-text);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-currency-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 20px;
}

.wdr-withdraw-page .wdr-currency-option,
.wdr-withdraw-page .wdr-network-option {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid #e1e3eb;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--wdr-text);
    background: #fff;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.wdr-withdraw-page .wdr-currency-option:hover,
.wdr-withdraw-page .wdr-network-option:hover {
    border-color: #aaa4ff;
    transform: translateY(-1px);
}

.wdr-withdraw-page .wdr-currency-option.is-active,
.wdr-withdraw-page .wdr-network-option.is-active {
    border-color: var(--wdr-primary);
    box-shadow: 0 0 0 1px rgba(73, 60, 255, .04);
}

.wdr-withdraw-page .wdr-option-check {
    position: absolute;
    top: -8px;
    right: -7px;
    display: none;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--wdr-primary);
    font-size: 12px;
    font-weight: 800;
}

.wdr-withdraw-page .is-active > .wdr-option-check {
    display: grid;
}

.wdr-withdraw-page .wdr-coin-icon,
.wdr-withdraw-page .wdr-network-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
}

.wdr-withdraw-page .wdr-coin-icon svg,
.wdr-withdraw-page .wdr-network-icon svg,
.wdr-withdraw-page .wdr-summary-currency-icon svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
    stroke: none;
}

.wdr-withdraw-page .wdr-coin-icon b,
.wdr-withdraw-page .wdr-network-icon b,
.wdr-withdraw-page .wdr-summary-currency-icon b {
    font-size: 23px;
    line-height: 1;
}

.wdr-withdraw-page .wdr-coin-eth {
    color: #353535;
    background: #f2f2f4;
}

.wdr-withdraw-page .wdr-coin-btc,
.wdr-withdraw-page .wdr-network-btc {
    background: #ff9419;
}

.wdr-withdraw-page .wdr-coin-usdt {
    background: #55b6a4;
}

.wdr-withdraw-page .wdr-coin-usdc {
    background: #3189d8;
}

.wdr-withdraw-page .wdr-network-erc {
    color: #5146ff;
    background: #f2f0ff;
}

.wdr-withdraw-page .wdr-network-trc {
    color: #fff;
    background: #f31b2c;
}

.wdr-withdraw-page .wdr-network-trc svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
}

.wdr-withdraw-page .wdr-option-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.wdr-withdraw-page .wdr-option-copy strong {
    overflow: hidden;
    color: var(--wdr-text);
    font-size: 16px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdr-withdraw-page .wdr-option-copy small {
    overflow: hidden;
    color: #5f5c77;
    font-size: 12px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdr-withdraw-page .wdr-details-card {
    display: grid;
    gap: 28px;
}

.wdr-withdraw-page .wdr-section-block {
    min-width: 0;
}

.wdr-withdraw-page .wdr-network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.wdr-withdraw-page .wdr-network-option {
    min-height: 70px;
}

.wdr-withdraw-page .wdr-network-note {
    display: flex;
    min-height: 40px;
    margin-top: 14px;
    padding: 8px 12px;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    color: #55536c;
    background: #f8f7ff;
}

.wdr-withdraw-page .wdr-network-note > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    flex: 0 0 auto;
    border: 1.5px solid var(--wdr-primary);
    border-radius: 50%;
    color: var(--wdr-primary);
    font-size: 12px;
    font-weight: 800;
}

.wdr-withdraw-page .wdr-network-note p {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

.wdr-withdraw-page .wdr-withdrawal-details {
    display: grid;
}

.wdr-withdraw-page .wdr-field-label {
    margin-top: 18px;
    margin-bottom: 9px;
    color: #5b5872;
    font-size: 14px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-input-row {
    display: grid;
    min-height: 46px;
    overflow: hidden;
    border: 1px solid #e0e2ea;
    align-items: center;
    border-radius: 8px;
    background: #fff;
}

.wdr-withdraw-page .wdr-address-row {
    grid-template-columns: minmax(0, 1fr) auto 52px;
}

.wdr-withdraw-page .wdr-amount-row {
    grid-template-columns: minmax(0, 1fr) auto 64px;
}

.wdr-withdraw-page .wdr-input-row input {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 0;
    outline: 0;
    color: var(--wdr-text);
    background: transparent;
    font-size: 14px;
}

.wdr-withdraw-page .wdr-input-row input::placeholder {
    color: #9a97ae;
}

.wdr-withdraw-page .wdr-inline-action,
.wdr-withdraw-page .wdr-copy-button {
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid #e8e9ef;
    cursor: pointer;
    color: var(--wdr-primary);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-copy-button {
    display: grid;
    width: 52px;
    padding: 0;
    place-items: center;
    color: #85829b;
}

.wdr-withdraw-page .wdr-copy-button svg,
.wdr-withdraw-page .wdr-clock-icon svg,
.wdr-withdraw-page .wdr-tip-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wdr-withdraw-page .wdr-input-unit {
    padding: 0 10px;
    color: #5c5971;
    font-size: 12px;
    font-weight: 600;
}

.wdr-withdraw-page .wdr-balance-hint {
    margin: 9px 0 0;
    color: #85819d;
    font-size: 12px;
}

.wdr-withdraw-page .wdr-balance-hint b {
    font-weight: 500;
}

.wdr-withdraw-page .wdr-inline-summary {
    display: grid;
    min-height: 105px;
    padding: 20px 16px;
    grid-template-columns: 1.25fr repeat(3, minmax(0, .85fr));
    align-items: center;
    gap: 18px;
    border: 1px solid #e6e3f2;
    border-radius: 8px;
    background: #f8f7ff;
}

.wdr-withdraw-page .wdr-inline-summary > div {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.wdr-withdraw-page .wdr-inline-summary small {
    color: #777491;
    font-size: 10px;
    font-weight: 600;
}

.wdr-withdraw-page .wdr-inline-summary strong {
    overflow: hidden;
    color: var(--wdr-text);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdr-withdraw-page .wdr-inline-summary-main small {
    color: var(--wdr-text);
    font-size: 12px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-inline-summary-main strong {
    font-size: 23px;
}

.wdr-withdraw-page .wdr-confirm-button {
    position: relative;
    display: grid;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    place-items: center;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background: var(--wdr-primary);
    font-size: 13px;
    font-weight: 700;
    transition: opacity .18s ease, transform .18s ease;
}

.wdr-withdraw-page .wdr-confirm-button:hover {
    opacity: .94;
    transform: translateY(-1px);
}

.wdr-withdraw-page .wdr-confirm-button:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
}

.wdr-withdraw-page .wdr-confirm-button.is-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wdr-spin .8s linear infinite;
}

.wdr-withdraw-page .wdr-confirm-button.is-loading {
    display: flex;
}

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

.wdr-withdraw-page .wdr-summary-card,
.wdr-withdraw-page .wdr-tips-card {
    padding: 25px 22px;
}

.wdr-withdraw-page .wdr-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wdr-withdraw-page .wdr-card-header button {
    padding: 0;
    border: 0;
    cursor: pointer;
    color: var(--wdr-primary);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-summary-list {
    display: grid;
    margin: 22px 0 0;
    gap: 21px;
}

.wdr-withdraw-page .wdr-summary-list > div {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.wdr-withdraw-page .wdr-summary-list dt {
    color: #8986a3;
    font-size: 13px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-summary-list dd {
    display: flex;
    min-width: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #74718c;
    font-size: 12px;
    text-align: right;
}

.wdr-withdraw-page .wdr-summary-list dd b {
    color: #8c89a5;
    font-size: 14px;
}

.wdr-withdraw-page .wdr-summary-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdr-withdraw-page .wdr-summary-currency-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #353535;
    background: #f2f2f4;
}

.wdr-withdraw-page .wdr-summary-currency-icon svg {
    width: 19px;
    height: 19px;
}

.wdr-withdraw-page .wdr-summary-currency-icon b {
    font-size: 16px;
}

.wdr-withdraw-page .wdr-summary-btc { color: #fff; background: #ff9419; }
.wdr-withdraw-page .wdr-summary-usdt { color: #fff; background: #55b6a4; }
.wdr-withdraw-page .wdr-summary-usdc { color: #fff; background: #3189d8; }

.wdr-withdraw-page .wdr-network-pill {
    display: inline-grid;
    min-height: 28px;
    padding: 0 10px;
    place-items: center;
    border-radius: 5px;
    color: var(--wdr-primary);
    background: #f3f1ff;
    font-size: 11px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-receive-row {
    display: flex;
    margin-top: 28px;
    padding-top: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e7e8ef;
}

.wdr-withdraw-page .wdr-receive-row span {
    color: var(--wdr-text);
    font-size: 12px;
    font-weight: 700;
}

.wdr-withdraw-page .wdr-receive-row strong {
    color: var(--wdr-green);
    font-size: 16px;
}

.wdr-withdraw-page .wdr-processing-box {
    display: flex;
    margin-top: 34px;
    padding: 16px 14px;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    color: #7d7997;
    background: #f8f7ff;
}

.wdr-withdraw-page .wdr-clock-icon {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    flex: 0 0 auto;
}

.wdr-withdraw-page .wdr-processing-box strong {
    color: #5c5971;
    font-size: 12px;
}

.wdr-withdraw-page .wdr-processing-box p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.55;
}

.wdr-withdraw-page .wdr-tips-card {
    min-height: 292px;
}

.wdr-withdraw-page .wdr-tips-card header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wdr-withdraw-page .wdr-tip-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    flex: 0 0 auto;
    color: #111;
}

.wdr-withdraw-page .wdr-tips-card ul {
    display: grid;
    margin: 20px 0 0;
    padding-left: 24px;
    gap: 17px;
    color: #8a87a4;
}

.wdr-withdraw-page .wdr-tips-card li {
    padding-left: 2px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.wdr-mobile-top-title {
    display: none;
}

.wdr-toast {
    position: fixed;
    z-index: 8000;
    right: 24px;
    bottom: 24px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    background: #292657;
    box-shadow: 0 14px 34px rgba(30, 29, 68, .2);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    opacity: 0;
    transform: translateY(16px);
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.wdr-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.wdr-toast.is-success { background: #1ca85b; }
.wdr-toast.is-warning { background: #d98d1c; }
.wdr-toast.is-error { background: #d94a55; }

@media (max-width: 1240px) {
    .wdr-withdraw-page .wdr-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr);
    }

    .wdr-withdraw-page .wdr-currency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wdr-withdraw-page .wdr-network-grid {
        grid-template-columns: 1fr;
    }

    .wdr-withdraw-page .wdr-inline-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .wdr-withdraw-page .wdr-layout {
        grid-template-columns: 1fr;
    }

    .wdr-withdraw-page .wdr-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .wdr-withdraw-page .wdr-page-content {
        padding-top: 22px;
    }

    .wdr-withdraw-page .wdr-page-head {
        display: none;
    }

    .wdr-withdraw-page .wdr-layout,
    .wdr-withdraw-page .wdr-main-column,
    .wdr-withdraw-page .wdr-side-column {
        gap: 16px;
    }

    .wdr-withdraw-page .wdr-side-column {
        grid-template-columns: 1fr;
    }

    .wdr-withdraw-page .wdr-currency-card,
    .wdr-withdraw-page .wdr-details-card,
    .wdr-withdraw-page .wdr-summary-card,
    .wdr-withdraw-page .wdr-tips-card {
        padding: 26px 23px 22px;
        border-radius: 12px;
    }

    .wdr-withdraw-page .wdr-card h2,
    .wdr-withdraw-page .wdr-section-block h2,
    .wdr-withdraw-page .wdr-card-header h2,
    .wdr-withdraw-page .wdr-tips-card h2 {
        font-size: 17px;
    }

    .wdr-withdraw-page .wdr-currency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
    }

    .wdr-withdraw-page .wdr-currency-option {
        min-height: 64px;
        padding: 10px 12px;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
    }

    .wdr-withdraw-page .wdr-network-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .wdr-withdraw-page .wdr-network-option {
        min-height: 64px;
        padding: 10px 12px;
    }

    .wdr-withdraw-page .wdr-coin-icon,
    .wdr-withdraw-page .wdr-network-icon {
        width: 34px;
        height: 34px;
    }

    .wdr-withdraw-page .wdr-coin-icon svg,
    .wdr-withdraw-page .wdr-network-icon svg {
        width: 24px;
        height: 24px;
    }

    .wdr-withdraw-page .wdr-option-copy strong {
        font-size: 15px;
    }

    .wdr-withdraw-page .wdr-option-copy small {
        font-size: 11px;
    }

    .wdr-withdraw-page .wdr-network-note {
        display: none;
    }

    .wdr-withdraw-page .wdr-details-card {
        gap: 28px;
    }

    .wdr-withdraw-page .wdr-field-label {
        font-size: 12px;
    }

    .wdr-withdraw-page .wdr-address-row {
        grid-template-columns: minmax(0, 1fr) auto 52px;
    }

    .wdr-withdraw-page .wdr-input-row input {
        padding: 0 10px;
        font-size: 11px;
    }

    .wdr-withdraw-page .wdr-inline-action {
        padding: 0 10px;
        font-size: 11px;
    }

    .wdr-withdraw-page .wdr-inline-summary {
        min-height: 184px;
        padding: 19px 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }

    .wdr-withdraw-page .wdr-inline-summary-main {
        grid-column: 1 / -1;
    }

    .wdr-withdraw-page .wdr-inline-summary-main strong {
        font-size: 22px;
    }

    .wdr-withdraw-page .wdr-inline-summary > div:nth-child(4) {
        grid-column: 2;
    }

    .wdr-withdraw-page .wdr-confirm-button {
        min-height: 40px;
    }

    .wdr-withdraw-page .wdr-summary-list > div {
        grid-template-columns: 1fr auto;
    }

    .wdr-withdraw-page .wdr-tips-card {
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .wdr-mobile-title-page .ggz-main {
        position: relative;
    }

    .wdr-mobile-title-page .ggz-mobile-logo {
        display: none !important;
    }

    .wdr-mobile-title-page .ggz-topbar {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
        grid-template-areas:
            "ggz-menu ggz-title ggz-actions"
            "ggz-search ggz-search ggz-search";
    }

    .wdr-mobile-title-page .wdr-mobile-top-title {
        position: absolute;
        z-index: 10;
        top: calc(20px + env(safe-area-inset-top));
        left: 50%;
        display: block;
        width: max-content;
        max-width: calc(100% - 145px);
        margin: 0;
        overflow: hidden;
        color: var(--wdr-text);
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translateX(-50%);
        pointer-events: none;
    }

    .wdr-mobile-title-page .ggz-notification,
    .wdr-mobile-title-page .ggz-profile-copy,
    .wdr-mobile-title-page .ggz-profile-arrow {
        display: none !important;
    }

    .wdr-mobile-title-page .ggz-profile-area {
        gap: 0;
    }

    .wdr-withdraw-page .wdr-page-content {
        padding-top: 13px;
    }

    .wdr-withdraw-page .wdr-inline-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wdr-withdraw-page .wdr-summary-card {
        order: 1;
    }

    .wdr-withdraw-page .wdr-tips-card {
        order: 2;
    }

    .wdr-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 390px) {
    .wdr-withdraw-page .wdr-currency-card,
    .wdr-withdraw-page .wdr-details-card,
    .wdr-withdraw-page .wdr-summary-card,
    .wdr-withdraw-page .wdr-tips-card {
        padding-right: 20px;
        padding-left: 20px;
    }

    .wdr-withdraw-page .wdr-currency-option {
        padding-right: 10px;
        padding-left: 10px;
    }

    .wdr-withdraw-page .wdr-currency-option,
    .wdr-withdraw-page .wdr-network-option {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .wdr-withdraw-page .wdr-coin-icon,
    .wdr-withdraw-page .wdr-network-icon {
        width: 32px;
        height: 32px;
    }

    .wdr-withdraw-page .wdr-address-row {
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .wdr-withdraw-page .wdr-address-row .wdr-inline-action {
        display: none;
    }

    .wdr-withdraw-page .wdr-inline-summary {
        grid-template-columns: 1fr;
    }

    .wdr-withdraw-page .wdr-inline-summary-main,
    .wdr-withdraw-page .wdr-inline-summary > div:nth-child(4) {
        grid-column: auto;
    }

    .wdr-withdraw-page .wdr-summary-list > div {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wdr-withdraw-page .wdr-summary-list dd {
        justify-content: flex-start;
        text-align: left;
    }

    .wdr-mobile-title-page .wdr-mobile-top-title {
        max-width: calc(100% - 130px);
        font-size: 19px;
    }
}
.wdr-bind-page .wdr-radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.wdr-bind-page .wdr-bind-form {
    display: block;
}

.wdr-bind-page .wdr-bind-address-help {
    margin: 9px 0 0;
    color: #85819d;
    font-size: 12px;
}

.wdr-bind-page .wdr-summary-address {
    word-break: break-all;
    white-space: normal;
}

.wdr-bind-page .wdr-confirm-button {
    width: 100%;
}

.wdr-bind-page .wdr-tips-card {
    min-height: 260px;
}

@media (max-width: 600px) {
    .wdr-bind-page .wdr-currency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wdr-bind-page .wdr-network-grid {
        grid-template-columns: 1fr;
    }

    .wdr-bind-page .wdr-details-card {
        gap: 26px;
    }
}

 

.wdr-static-withdraw-page {
    --wdr-static-primary: #3523ff;
    --wdr-static-text: #28235a;
    --wdr-static-muted: #81819a;
    --wdr-static-border: #dcecff;
    --wdr-static-green: #00ac5a;
}

.wdr-static-withdraw-page .wdr-static-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(285px, .75fr);
    align-items: start;
    gap: 20px;
}

.wdr-static-withdraw-page .wdr-static-main,
.wdr-static-withdraw-page .wdr-static-side {
    display: grid;
    min-width: 0;
    gap: 20px;
}

.wdr-static-withdraw-page .wdr-card {
    min-width: 0;
    border: 1px solid var(--wdr-static-border);
    border-radius: 11px;
    background: #fff;
}

.wdr-static-withdraw-page .wdr-static-wallet-card,
.wdr-static-withdraw-page .wdr-static-details-card,
.wdr-static-withdraw-page .wdr-static-summary-card,
.wdr-static-withdraw-page .wdr-static-tips-card {
    padding: 25px 24px;
}

.wdr-static-withdraw-page .wdr-static-card-head {
    display: flex;
    margin-bottom: 22px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.wdr-static-withdraw-page .wdr-static-card-head h2,
.wdr-static-withdraw-page .wdr-static-details-card > h2,
.wdr-static-withdraw-page .wdr-static-summary-card > h2 {
    margin: 0;
    color: var(--wdr-static-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.wdr-static-withdraw-page .wdr-static-card-head p {
    margin: 6px 0 0;
    color: var(--wdr-static-muted);
    font-size: 12px;
    line-height: 1.5;
}

.wdr-static-withdraw-page .wdr-static-change-link {
    flex: 0 0 auto;
    color: var(--wdr-static-primary);
    font-size: 12px;
    font-weight: 700;
}

.wdr-static-withdraw-page .wdr-static-wallet-info {
    display: grid;
    min-height: 96px;
    padding: 18px;
    grid-template-columns:
        minmax(160px, .8fr)
        minmax(110px, .5fr)
        minmax(240px, 1.4fr);
    align-items: center;
    gap: 20px;
    border: 1px solid #e0e4ef;
    border-radius: 9px;
    background: #fafbfe;
}

.wdr-static-withdraw-page .wdr-static-wallet-currency {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.wdr-static-withdraw-page .wdr-static-coin-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: #26a17b;
    font-size: 25px;
    font-weight: 700;
}

.wdr-static-withdraw-page .wdr-static-wallet-currency > div,
.wdr-static-withdraw-page .wdr-static-wallet-item {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.wdr-static-withdraw-page .wdr-static-wallet-currency strong,
.wdr-static-withdraw-page .wdr-static-wallet-item strong {
    color: var(--wdr-static-text);
    font-size: 14px;
}

.wdr-static-withdraw-page .wdr-static-wallet-currency small,
.wdr-static-withdraw-page .wdr-static-wallet-item small {
    color: var(--wdr-static-muted);
    font-size: 11px;
}

.wdr-static-withdraw-page .wdr-static-network-pill {
    display: inline-grid;
    width: max-content;
    min-height: 27px;
    padding: 0 10px;
    place-items: center;
    border-radius: 5px;
    color: var(--wdr-static-primary);
    background: #eeecff;
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
}

.wdr-static-withdraw-page .wdr-static-address strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wdr-static-withdraw-page .wdr-static-details-card > h2 {
    margin-bottom: 22px;
}

.wdr-static-withdraw-page .wdr-static-balance {
    display: flex;
    min-height: 52px;
    margin-bottom: 22px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-radius: 7px;
    background: #f4f3ff;
}

.wdr-static-withdraw-page .wdr-static-balance span {
    color: #77758d;
    font-size: 12px;
}

.wdr-static-withdraw-page .wdr-static-balance strong {
    color: var(--wdr-static-primary);
    font-size: 15px;
}

.wdr-static-withdraw-page .wdr-static-label {
    display: block;
    margin-bottom: 9px;
    color: #5b5f71;
    font-size: 12px;
    font-weight: 600;
}

.wdr-static-withdraw-page .wdr-static-input-wrap {
    display: grid;
    height: 48px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    border: 1px solid #dfe2ec;
    border-radius: 6px;
    background: #fff;
}

.wdr-static-withdraw-page .wdr-static-input-wrap:focus-within {
    border-color: #8b83ff;
    box-shadow: 0 0 0 3px rgba(75, 69, 255, .08);
}

.wdr-static-withdraw-page .wdr-static-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 14px;
    border: 0;
    outline: 0;
    color: var(--wdr-static-text);
    background: transparent;
    font-size: 14px;
}

.wdr-static-withdraw-page .wdr-static-input-currency {
    padding: 0 12px;
    color: var(--wdr-static-text);
    font-size: 12px;
    font-weight: 700;
}

.wdr-static-withdraw-page .wdr-static-max-button {
    height: 32px;
    margin-right: 8px;
    padding: 0 13px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    color: var(--wdr-static-primary);
    background: #eeecff;
    font-size: 11px;
    font-weight: 700;
}

.wdr-static-withdraw-page .wdr-static-help {
    margin: 9px 0 0;
    color: var(--wdr-static-muted);
    font-size: 11px;
}

.wdr-static-withdraw-page .wdr-static-preview {
    display: grid;
    margin-top: 25px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #e2e5ef;
    border-radius: 8px;
}

.wdr-static-withdraw-page .wdr-static-preview > div {
    display: grid;
    min-height: 88px;
    padding: 16px 10px;
    place-content: center;
    gap: 8px;
    text-align: center;
}

.wdr-static-withdraw-page .wdr-static-preview > div + div {
    border-left: 1px solid #e2e5ef;
}

.wdr-static-withdraw-page .wdr-static-preview span {
    color: var(--wdr-static-muted);
    font-size: 11px;
}

.wdr-static-withdraw-page .wdr-static-preview strong {
    color: var(--wdr-static-text);
    font-size: 14px;
}

.wdr-static-withdraw-page .wdr-static-preview-receive strong {
    color: var(--wdr-static-green);
}

.wdr-static-withdraw-page .wdr-static-confirm-button {
    width: 100%;
    min-height: 46px;
    margin-top: 22px;
    padding: 0 20px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    background: var(--wdr-static-primary);
    font-size: 13px;
    font-weight: 700;
    transition: opacity .2s ease;
}

.wdr-static-withdraw-page .wdr-static-confirm-button:hover {
    opacity: .9;
}

.wdr-static-withdraw-page .wdr-static-summary-card > h2 {
    margin-bottom: 23px;
}

.wdr-static-withdraw-page .wdr-static-summary-list {
    display: grid;
}

.wdr-static-withdraw-page .wdr-static-summary-list > div {
    display: grid;
    min-height: 55px;
    padding: 12px 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #e9eaf0;
}

.wdr-static-withdraw-page .wdr-static-summary-list span {
    color: var(--wdr-static-muted);
    font-size: 11px;
}

.wdr-static-withdraw-page .wdr-static-summary-list strong {
    min-width: 0;
    color: var(--wdr-static-text);
    font-size: 12px;
    text-align: right;
}

.wdr-static-withdraw-page .wdr-static-summary-currency {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.wdr-static-withdraw-page .wdr-static-summary-currency i {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #26a17b;
    font-size: 14px;
    font-style: normal;
}

.wdr-static-withdraw-page .wdr-static-summary-address {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.wdr-static-withdraw-page .wdr-static-summary-receive {
    border-bottom: 0 !important;
}

.wdr-static-withdraw-page .wdr-static-summary-receive strong {
    color: var(--wdr-static-green);
    font-size: 14px;
}

.wdr-static-withdraw-page .wdr-static-processing {
    display: grid;
    margin-top: 18px;
    padding: 14px;
    grid-template-columns: 35px minmax(0, 1fr);
    gap: 10px;
    border-radius: 7px;
    background: #f8f8fd;
}

.wdr-static-withdraw-page .wdr-static-processing-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: var(--wdr-static-primary);
    background: #e9e7ff;
}

.wdr-static-withdraw-page .wdr-static-processing-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wdr-static-withdraw-page .wdr-static-processing > div {
    display: grid;
    gap: 4px;
}

.wdr-static-withdraw-page .wdr-static-processing strong {
    color: var(--wdr-static-text);
    font-size: 11px;
}

.wdr-static-withdraw-page .wdr-static-processing p {
    margin: 0;
    color: var(--wdr-static-muted);
    font-size: 10px;
    line-height: 1.5;
}

.wdr-static-withdraw-page .wdr-static-tips-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wdr-static-withdraw-page .wdr-static-tips-head > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #ff9b2f;
    background: #fff3e4;
}

.wdr-static-withdraw-page .wdr-static-tips-head svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wdr-static-withdraw-page .wdr-static-tips-head h2 {
    margin: 0;
    color: var(--wdr-static-text);
    font-size: 17px;
}

.wdr-static-withdraw-page .wdr-static-tips-card ul {
    margin: 19px 0 0;
    padding-left: 18px;
    color: var(--wdr-static-muted);
}

.wdr-static-withdraw-page .wdr-static-tips-card li {
    padding-left: 4px;
    font-size: 11px;
    line-height: 1.65;
}

.wdr-static-withdraw-page .wdr-static-tips-card li + li {
    margin-top: 8px;
}


 

@media (max-width: 1050px) {
    .wdr-static-withdraw-page .wdr-static-layout {
        grid-template-columns: 1fr;
    }

    .wdr-static-withdraw-page .wdr-static-side {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

 

@media (max-width: 600px) {
    .wdr-static-withdraw-page .wdr-static-layout,
    .wdr-static-withdraw-page .wdr-static-main,
    .wdr-static-withdraw-page .wdr-static-side {
        gap: 16px;
    }

    .wdr-static-withdraw-page .wdr-static-side {
        grid-template-columns: 1fr;
    }

    .wdr-static-withdraw-page .wdr-static-wallet-card,
    .wdr-static-withdraw-page .wdr-static-details-card,
    .wdr-static-withdraw-page .wdr-static-summary-card,
    .wdr-static-withdraw-page .wdr-static-tips-card {
        padding: 22px 20px;
    }

    .wdr-static-withdraw-page .wdr-static-card-head {
        margin-bottom: 19px;
        align-items: center;
    }

    .wdr-static-withdraw-page .wdr-static-card-head h2,
    .wdr-static-withdraw-page .wdr-static-details-card > h2,
    .wdr-static-withdraw-page .wdr-static-summary-card > h2 {
        font-size: 16px;
    }

    .wdr-static-withdraw-page .wdr-static-wallet-info {
        grid-template-columns: 1fr 1fr;
        gap: 18px 12px;
    }

    .wdr-static-withdraw-page .wdr-static-wallet-currency {
        grid-column: 1 / -1;
    }

    .wdr-static-withdraw-page .wdr-static-address {
        grid-column: 1 / -1;
    }

    .wdr-static-withdraw-page .wdr-static-address strong {
        white-space: normal;
        word-break: break-all;
    }

    .wdr-static-withdraw-page .wdr-static-preview {
        grid-template-columns: 1fr;
    }

    .wdr-static-withdraw-page .wdr-static-preview > div {
        min-height: 70px;
    }

    .wdr-static-withdraw-page .wdr-static-preview > div + div {
        border-top: 1px solid #e2e5ef;
        border-left: 0;
    }

    .wdr-static-withdraw-page .wdr-static-input-wrap {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
}


 

@media (max-width: 390px) {
    .wdr-static-withdraw-page .wdr-static-wallet-card,
    .wdr-static-withdraw-page .wdr-static-details-card,
    .wdr-static-withdraw-page .wdr-static-summary-card,
    .wdr-static-withdraw-page .wdr-static-tips-card {
        padding-right: 17px;
        padding-left: 17px;
    }

    .wdr-static-withdraw-page .wdr-static-wallet-info {
        grid-template-columns: 1fr;
    }

    .wdr-static-withdraw-page .wdr-static-wallet-currency,
    .wdr-static-withdraw-page .wdr-static-address {
        grid-column: auto;
    }

    .wdr-static-withdraw-page .wdr-static-balance {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
    }

    .wdr-static-withdraw-page .wdr-static-input-currency {
        padding-right: 8px;
        padding-left: 8px;
    }

    .wdr-static-withdraw-page .wdr-static-max-button {
        padding-right: 10px;
        padding-left: 10px;
    }
}