/*
 * CSF Group Buy Display Stylesheet
 * Version: 4.1.0
 * Author: CSF001
 * Last Updated: 2025-07-15
 *
 * 全新卡片 UI — 与子比主题 .pay-box 风格统一
 * 使用子比 CSS 变量，支持暗色模式
 *
 * --- STRUCTURE ---
 * 1. Card Container & Top Bar
 * 2. Tabs (equal-width)
 * 3. Price Section
 * 4. Info Bar (3-column)
 * 5. Progress Bar
 * 6. Avatars
 * 7. Actions & Footer
 * 8. My Group Card (header, badge, members)
 * 9. Empty State & Notices
 * 10. Card Product Form
 * 11. Responsive
 * 12. Legacy compat
 */

/* ============================================= */
/* 1. Card Container & Top Bar                   */
/* ============================================= */

.csf-gc {
    background: var(--main-bg-color);
    border-radius: 0;
    border: 1px solid var(--main-border-color);
    box-shadow: 0 1px 8px var(--main-shadow, rgba(116,116,116,0.08));
    overflow: hidden;
    margin: 16px 0;
}

.csf-gc-topbar {
    height: 3px;
    background: linear-gradient(90deg, #ff9a00, #fb403f, #ff9a00);
}

.csf-gc-topbar-green {
    background: linear-gradient(90deg, #52c41a, #73d13d, #52c41a);
}

.csf-gc-inner {
    padding: 12px 16px;
}

/* ============================================= */
/* 2. Tabs (equal-width)                         */
/* ============================================= */

.csf-gc-tabs {
    display: flex;
    border-bottom: 1px solid var(--main-border-color);
    margin-bottom: 6px;
}

.csf-gc-tab {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-color);
    padding: 8px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.csf-gc-tab:hover {
    color: var(--key-color);
}

.csf-gc-tab.active {
    font-weight: 600;
    color: #fb403f;
    border-bottom-color: #fb403f;
}

/* ============================================= */
/* 3. Price Section                              */
/* ============================================= */

.csf-gc-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 2px 0 0;
}

.csf-gc-price-del {
    font-size: 13px;
    color: var(--muted-2-color);
    text-decoration: line-through;
}

.csf-gc-price-now {
    display: flex;
    align-items: baseline;
}

.csf-gc-yen {
    font-size: 15px;
    color: #fb403f;
    font-weight: 700;
}

.csf-gc-price-val {
    font-size: 26px;
    font-weight: 800;
    color: #fb403f;
    line-height: 1;
    letter-spacing: -1px;
}

.csf-gc-price-hint {
    text-align: center;
    font-size: 12px;
    color: var(--muted-color);
    margin-bottom: 4px;
}

/* ============================================= */
/* 4. Info Bar (3-column)                        */
/* ============================================= */

.csf-gc-infobar {
    display: flex;
    background: var(--body-bg-color);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.csf-gc-info {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    position: relative;
}

.csf-gc-info:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--main-border-color);
}

.csf-gc-info-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--key-color, #333);
}

.csf-gc-info-label {
    font-size: 11px;
    color: var(--muted-color);
    margin-top: 1px;
}

.csf-text-green {
    color: #52c41a !important;
}

/* ============================================= */
/* 5. Progress Bar                               */
/* ============================================= */

.csf-gc-progress {
    height: 3px;
    background: var(--main-border-color, #e8e8e8);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.csf-gc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff9a00, #fb403f);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.csf-gc-progress-green {
    background: linear-gradient(90deg, #52c41a, #73d13d);
}

/* ============================================= */
/* 6. Avatars                                    */
/* ============================================= */

.csf-gc-avatars {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.csf-gc-av-stack {
    display: flex;
    margin-right: 8px;
}

.csf-gc-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--main-bg-color, #fff);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.csf-gc-av:not(:first-child) {
    margin-left: -8px;
}

.csf-gc-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csf-gc-av-hint {
    font-size: 12px;
    color: var(--muted-color);
}

/* ============================================= */
/* 7. Actions & Footer                           */
/* ============================================= */

.csf-gc-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.csf-gc-actions .but,
.csf-gc-actions > a {
    flex: 0 1 auto;
    text-align: center;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.csf-gc-footer {
    text-align: center;
    margin-top: 6px;
    padding-top: 0;
}

.csf-gc-footer a {
    font-size: 12px;
    color: var(--muted-color);
    text-decoration: none;
    transition: color 0.2s;
}

.csf-gc-footer a:hover {
    color: var(--key-color);
}

.csf-gc-exit-hint {
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
    color: var(--muted-2-color);
    width: 100%;
}

/* 退出团购按钮 — 红色空心 */
.csf-btn-outline-red {
    background: transparent !important;
    border: 1px solid #fb403f !important;
    color: #fb403f !important;
}

.csf-btn-outline-red:hover {
    background: #fb403f !important;
    color: #fff !important;
}

.csf-group-start-form {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex: 1;
    width: auto;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    min-width: 0;
}

.csf-group-start-form-field,
.csf-card-contact-section {
    flex: 1;
    min-width: 220px;
}

.csf-group-start-form-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: none;
}

.csf-group-contact-label {
    display: block;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--key-color);
    white-space: nowrap;
}

.csf-group-contact-input {
    width: 100%;
    height: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--key-color);
    font-size: 13px;
}

.csf-group-start-form-field .csf-group-contact-input {
    flex: 1 1 auto;
    min-width: 0;
}

.csf-group-contact-input:focus {
    outline: none;
    box-shadow: none;
}

.csf-group-start-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 8px;
    width: 100%;
}

.csf-group-start-row.no-primary-action .csf-group-start-form {
    flex: 1;
}

.csf-group-start-row .csf-group-start-form {
    margin-top: 0;
}

.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact {
    flex: 0 0 164px;
    margin-top: 0;
    text-align: center;
}

.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted-color);
    white-space: nowrap;
    text-decoration: none;
}

.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a:hover {
    color: var(--key-color);
}

.csf-group-start-row .csf-group-row-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 164px;
    width: 164px;
    min-width: 164px;
    min-height: 48px;
    padding: 0 16px !important;
    border-radius: 0 !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none !important;
    transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.csf-group-start-row .csf-group-row-btn-primary {
    background: linear-gradient(180deg, #ff9448, #ff6a2a) !important;
    border: 1px solid #ff7a31 !important;
    color: #fff !important;
}

.csf-group-start-row .csf-group-row-btn-primary:hover {
    opacity: 0.92;
    color: #fff !important;
}

.csf-group-start-row .csf-group-row-btn-secondary {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    color: var(--muted-color) !important;
}

.csf-group-start-row .csf-group-row-btn-secondary:hover {
    color: var(--key-color) !important;
    border-color: rgba(15, 23, 42, 0.16) !important;
    background: rgba(255, 255, 255, 0.34) !important;
}

.csf-group-contact-box {
    margin: 10px 0 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 244, 230, 0.78);
    border: 1px solid rgba(255, 185, 108, 0.35);
}

.dark-theme .csf-group-contact-box {
    background: rgba(82, 59, 28, 0.34);
    border-color: rgba(255, 185, 108, 0.22);
}

.csf-group-contact-box .csf-group-contact-label {
    margin-bottom: 4px;
    color: #d46b08;
}

.csf-group-contact-value {
    font-size: 13px;
    line-height: 1.6;
    color: var(--key-color);
    word-break: break-word;
}

/* ============================================= */
/* 8. My Group Card                              */
/* ============================================= */

.csf-gc-myheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.csf-gc-mytitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--key-color, #333);
}

.csf-gc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.csf-badge-running  { background: #fff7e6; color: #fa8c16; }
.csf-badge-pending  { background: #e6f7ff; color: #1890ff; }
.csf-badge-success  { background: #f6ffed; color: #52c41a; }
.csf-badge-failed   { background: #fff1f0; color: #f5222d; }

/* Success Message */
.csf-gc-success-msg {
    text-align: center;
    padding: 8px;
    background: #f6ffed;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #52c41a;
    font-weight: 600;
}

/* Members */
.csf-gc-members {
    margin-bottom: 10px;
}

.csf-gc-members-hd {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--key-color, #333);
    margin-bottom: 6px;
}

.csf-gc-members-hd span:last-child {
    color: var(--muted-2-color);
    font-weight: 400;
}

.csf-gc-members-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.csf-gc-member {
    flex-shrink: 0;
    width: 68px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--main-border-color);
    background: var(--main-bg-color);
}

.csf-gc-member-me {
    border-color: #fb403f;
    border-width: 2px;
}

.csf-gc-member-me-paid {
    border-color: #52c41a;
    border-width: 2px;
}

.csf-gc-member-empty {
    border-style: dashed;
    border-color: var(--muted-2-color);
}

.csf-gc-member-av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 3px;
}

.csf-gc-member-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csf-gc-member-av-ph {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px dashed var(--muted-2-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-2-color);
    font-size: 13px;
    margin: 0 auto 3px;
}

.csf-gc-member-name {
    font-size: 11px;
    color: var(--main-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csf-gc-member-st {
    font-size: 10px;
    margin-top: 1px;
}

.csf-gc-member-st.paid {
    color: #52c41a;
}

.csf-gc-member-st.unpaid {
    color: #fa8c16;
}

/* ============================================= */
/* 9. Empty State & Notices                      */
/* ============================================= */

.csf-gc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
}

.csf-gc-empty-icon {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.csf-gc-empty-text {
    font-size: 13px;
    color: var(--muted-color);
}

.csf-group-notice {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin: 8px 0;
    background: var(--body-bg-color);
    border: 1px solid var(--main-border-color);
    color: var(--main-color);
}

.csf-group-notice.warning {
    background: #fffbe6;
    border-color: #ffe58f;
    color: #d46b08;
}

.csf-group-notice.error {
    background: #fff2f0;
    border-color: #ffccc7;
    color: #cf1322;
}

.csf-group-notice a {
    color: #1890ff;
    text-decoration: none;
}

.csf-group-notice a:hover {
    text-decoration: underline;
}

.csf-group-notice-highlight {
    background: #fff7e6;
    border-color: #ffd591;
    color: #d46b08;
}

.csf-group-paid-text {
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #52c41a;
}

/* ============================================= */
/* 10. Card Product Form (发卡商品)              */
/* ============================================= */

.csf-card-form-bar {
    background: var(--main-bg-color);
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid var(--main-border-color);
    box-shadow: 0 2px 8px var(--main-shadow);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.csf-card-form-bar::after {
    content: "";
    display: table;
    clear: both;
}

.csf-card-price-section,
.csf-card-stock-section,
.csf-card-quantity-section {
    display: flex;
    flex-direction: column;
    padding-right: 14px;
    border-right: 1px solid var(--main-border-color);
}

.csf-card-quantity-section {
    border-right: none;
    padding-right: 0;
}

.csf-card-label {
    color: var(--muted-2-color);
    font-size: 11px;
    margin-bottom: 3px;
}

.csf-card-price-value {
    color: #fb403f;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.csf-card-price-value span {
    font-size: 11px;
    color: var(--muted-2-color);
    font-weight: 400;
}

.csf-card-save-amount {
    color: #52c41a;
    font-size: 11px;
    margin-top: 2px;
}

.csf-card-stock-value {
    color: #52c41a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.csf-card-stock-value span {
    font-size: 11px;
    color: var(--muted-2-color);
    font-weight: 400;
}

.csf-card-quantity-controls {
    display: flex;
    align-items: center;
}

.csf-card-qty-minus,
.csf-card-qty-plus {
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid var(--main-border-color);
    background: var(--main-bg-color);
    color: var(--key-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.csf-card-qty-input {
    width: 54px;
    height: 32px;
    text-align: center;
    border-radius: 4px;
    margin: 0 5px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--main-border-color);
    background: var(--main-bg-color);
    color: var(--key-color);
}

.csf-card-total-section {
    padding-right: 14px;
    border-right: 1px solid var(--main-border-color);
}

.csf-card-total-value {
    color: #fb403f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.csf-card-contact-section {
    display: flex;
    flex-direction: column;
}

.csf-card-actions-section {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    margin: 0 0 0 auto;
}

.csf-card-actions-section .but {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto;
    border-radius: 6px;
}

.csf-card-actions-section .but.padding-lg {
    padding: 0 10px !important;
    min-height: 30px !important;
}

/* ============================================= */
/* 11. Responsive                                */
/* ============================================= */

@media (max-width: 767px) {
    .csf-gc-inner {
        padding: 10px 10px 12px;
    }

    .csf-gc-price-val {
        font-size: 20px;
    }

    .csf-gc-info-val {
        font-size: 12px;
    }

    .csf-gc-info-label {
        font-size: 10px;
    }

    .csf-gc-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .csf-gc-actions .but,
    .csf-gc-actions > a {
        width: auto;
        flex: 0 1 auto;
    }

    /* 沟通方式单独一行；发起新团 + 查看所有团购 并排；紧凑；无圆角 */
    .csf-group-start-form {
        display: contents;
    }

    .csf-group-start-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .csf-group-start-form-field,
    .csf-card-contact-section {
        min-width: 0;
        width: 100%;
    }

    .csf-group-start-row .csf-group-start-form-field {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 32px;
        padding: 0 8px;
        gap: 6px;
        border-radius: 0 !important;
    }

    .csf-group-contact-label {
        font-size: 11.5px;
    }

    .csf-group-contact-input {
        min-height: 32px;
        padding: 0 8px;
        font-size: 11px;
    }

    .csf-group-start-row .csf-group-row-btn,
    .csf-group-start-row a.csf-group-row-btn,
    .csf-group-start-row a.but.csf-group-row-btn {
        min-width: 0;
        width: 100%;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
        border-radius: 0 !important;
        line-height: 32px !important;
    }

    .csf-group-start-row .csf-group-row-btn-start {
        grid-column: 1;
        grid-row: 2;
    }

    /* 预留：含参与按钮时 join 占左、start 占右、footer 换行 */
    .csf-group-start-row.has-primary-action .csf-group-row-btn-join {
        grid-column: 1;
        grid-row: 2;
    }

    .csf-group-start-row.has-primary-action .csf-group-row-btn-start {
        grid-column: 2;
        grid-row: 2;
    }

    .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact {
        grid-column: 2;
        grid-row: 2;
        flex: none;
        width: 100%;
    }

    .csf-group-start-row.has-primary-action .csf-gc-footer.csf-gc-footer-compact {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* 未登录：登录按钮 + 查看所有团购 并排在同一行 */
    .csf-group-start-row.no-primary-action > .csf-group-row-btn-primary {
        grid-column: 1;
        grid-row: 1;
    }

    .csf-group-start-row.no-primary-action > .csf-group-row-btn-primary ~ .csf-gc-footer.csf-gc-footer-compact {
        grid-column: 2;
        grid-row: 1;
    }

    .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a {
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
        border-radius: 0 !important;
        line-height: 32px !important;
    }

    .csf-gc-members-list {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .csf-gc-member {
        width: 62px;
        padding: 6px 4px;
    }

    /* 发卡表单移动端：信息项压缩为一行，减少垂直空间 */
    .csf-card-form-bar {
        padding: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 8px;
    }

    .csf-card-price-section,
    .csf-card-stock-section,
    .csf-card-quantity-section,
    .csf-card-total-section {
        width: auto;
        padding-bottom: 0;
        border-bottom: none;
        border-right: 1px solid var(--main-border-color);
        padding-right: 10px;
        align-items: center;
        text-align: center;
        min-width: 0;
    }

    .csf-card-price-section { flex: 1 1 70px; }
    .csf-card-stock-section { flex: 1 1 56px; }
    .csf-card-quantity-section { flex: 1 1 110px; }
    .csf-card-total-section {
        flex: 1 1 76px;
        border-right: none;
        padding-right: 0;
    }

    .csf-card-contact-section {
        flex: 1 0 100%;
        min-width: 0;
    }

    .csf-card-quantity-controls {
        justify-content: center;
    }

    .csf-card-qty-minus,
    .csf-card-qty-plus {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .csf-card-qty-input {
        width: 42px;
        height: 28px;
        margin: 0 4px;
        font-size: 13px;
    }

    .csf-card-actions-section {
        flex: 1 0 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 2px;
    }

    .csf-card-actions-section .but {
        width: auto;
        min-width: 102px;
        height: 28px;
        min-height: 28px;
        padding: 0 8px;
        font-size: 11px;
        flex: 0 0 auto;
    }

    .csf-card-actions-section .but.padding-lg {
        padding: 0 8px !important;
        min-height: 28px !important;
    }
}

@media (max-width: 420px) {
    .csf-card-form-bar {
        gap: 6px;
    }

    .csf-card-price-section,
    .csf-card-stock-section,
    .csf-card-total-section {
        flex: 1 1 auto;
        min-width: 54px;
        padding-right: 6px;
    }

    .csf-card-quantity-section {
        flex: 0 1 102px;
        padding-right: 6px;
    }

    .csf-card-actions-section .but {
        min-width: 94px;
    }
}

/* ============================================= */
/* 12. Legacy compat & Wrappers                  */
/* ============================================= */

.csf-group-fallback-wrapper {
    margin: 24px 0;
}

/* Tab panel visibility */
.csf-gc-panel {
    display: none;
}

.csf-gc-panel.active {
    display: block;
}

.csf-gc-panel[data-panel="group"].active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
}

.csf-gc-panel[data-panel="group"] > * {
    grid-column: 1 / -1;
}

.csf-gc-panel[data-panel="group"] > .csf-gc-actions {
    grid-column: 1;
}

.csf-gc-panel[data-panel="group"] > .csf-gc-footer {
    grid-column: 2;
    align-self: stretch;
    display: flex;
    margin-top: 6px;
    padding-top: 0;
}

.csf-gc-panel[data-panel="group"] > .csf-gc-footer a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #ff8a5b, #ff4d6d) !important;
    color: #fff !important;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0 !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.csf-gc-panel[data-panel="group"] > .csf-gc-footer a:hover {
    opacity: 0.9;
}

.csf-gc-panel[data-panel="group"].csf-gc-panel-card.active {
    display: block;
}

.csf-gc-panel[data-panel="group"].csf-gc-panel-card > * {
    grid-column: auto;
}

.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer {
    display: block;
    margin-top: 12px;
    text-align: center;
}

.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a {
    display: inline-flex;
    min-height: 0;
    padding: 0;
    background: transparent !important;
    border: none;
    border-left: none;
    border-radius: 0 !important;
    color: var(--muted-color) !important;
    font-size: 12px;
    font-weight: 500;
}

.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a:hover {
    color: var(--key-color) !important;
    opacity: 1;
}

/* Thumbnail + Info Layout */
.csf-gc-group-layout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.csf-gc-thumb {
    flex: 0 0 auto;
    width: 172px;
    height: 120px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.csf-gc-thumb-standalone {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 5;
    margin-bottom: 14px;
}

.csf-gc-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
}

.csf-gc-group-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0;
}

/* Message styles */
.csf-group-message {
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 6px;
}

.csf-group-warning {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #d46b08;
}

.csf-group-error {
    background: #fff2f0;
    border: 1px solid #ffccc7;
    color: #cf1322;
}

/* ============================================= */
/* 13. Glass Polish                              */
/* ============================================= */

.csf-gc {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 20px 44px -18px rgba(15, 23, 42, 0.18),
        0 4px 10px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.dark-theme .csf-gc {
    background: linear-gradient(135deg, rgba(40, 42, 48, 0.78), rgba(28, 30, 36, 0.6));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 20px 44px -18px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.csf-gc::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(110% 60% at 0% 0%, rgba(255, 255, 255, 0.5), transparent 65%),
        radial-gradient(120% 70% at 100% 100%, rgba(255, 200, 200, 0.16), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.dark-theme .csf-gc::before {
    background:
        radial-gradient(110% 60% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 65%),
        radial-gradient(120% 70% at 100% 100%, rgba(255, 120, 120, 0.05), transparent 60%);
}

.csf-gc-topbar {
    display: none;
}

.csf-gc-inner {
    position: relative;
    z-index: 1;
    padding: 10px 14px 12px;
}

.csf-gc-tabs {
    padding: 3px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    margin-bottom: 8px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-gc-tabs {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.csf-gc-tab {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding: 7px 0;
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.28s ease;
}

.csf-gc-tab.active {
    color: #ff4d6d;
    border-bottom-color: transparent;
    background: linear-gradient(135deg, rgba(255, 96, 108, 0.22), rgba(255, 45, 85, 0.1));
    box-shadow:
        0 8px 20px rgba(255, 77, 109, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.csf-gc-infobar,
.csf-gc-empty,
.csf-gc-members {
    background: rgba(255, 255, 255, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 6px 18px -10px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-gc-infobar,
.dark-theme .csf-gc-empty,
.dark-theme .csf-gc-members {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.csf-gc-infobar {
    border-radius: 0;
    margin-bottom: 8px;
}

.csf-gc-info {
    padding: 6px 0;
}

.csf-gc-price {
    margin-bottom: 2px;
}

.csf-gc-price-del {
    font-size: 13px;
}

.csf-gc-price-val {
    font-size: 23px;
    letter-spacing: -0.5px;
}

.csf-gc-price-hint {
    margin-bottom: 2px;
}

.csf-gc-progress {
    height: 3px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.32);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.dark-theme .csf-gc-progress {
    background: rgba(255, 255, 255, 0.08);
}

.csf-gc-progress-fill {
    box-shadow: 0 4px 12px rgba(251, 64, 63, 0.3);
}

.csf-gc-avatars {
    padding: 5px 10px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark-theme .csf-gc-avatars {
    background: rgba(255, 255, 255, 0.04);
}

.csf-gc-actions {
    gap: 8px;
    margin-top: 6px;
}

.csf-gc-actions .but,
.csf-gc-actions > a {
    min-height: 32px;
    border-radius: 0 !important;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity 0.2s ease;
    font-size: 12px;
    padding: 0 14px;
    white-space: nowrap;
}

.csf-gc-actions .but:hover,
.csf-gc-actions > a:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.9;
}

.csf-gc-actions .jb-blue {
    background: linear-gradient(135deg, #3b82f6, #38bdf8) !important;
    color: #fff !important;
}

.csf-gc-actions .jb-yellow {
    background: linear-gradient(135deg, #ff8a5b, #ff4d6d) !important;
    color: #fff !important;
}

.csf-btn-outline-red {
    background: rgba(255, 255, 255, 0.16) !important;
    border: 1px solid rgba(251, 64, 63, 0.28) !important;
    color: #fb403f !important;
}

.csf-btn-outline-red:hover {
    background: linear-gradient(135deg, #ff8a5b, #ff4d6d) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.csf-gc-footer {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
}

.csf-gc-footer a {
    color: var(--muted-color);
}

/* ============================================= */
/* 13.5 Compact Layout Patch (高度收敛 + 玻璃质感) */
/* ============================================= */

.csf-gc-empty {
    padding: 6px 12px;
    gap: 6px;
}

.csf-gc-empty-icon {
    font-size: 16px;
}

.csf-gc-empty-text {
    font-size: 12.5px;
}

/* 缩略图与右侧信息区拉伸对齐，避免缩略图把整张卡撑高 */
.csf-gc-group-layout {
    gap: 10px;
    align-items: stretch;
}

.csf-gc-thumb {
    flex: 0 0 auto;
    width: 172px;
    height: 120px;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    align-self: flex-start;
    box-shadow: 0 8px 18px -8px rgba(15, 23, 42, 0.18);
}

.csf-gc-group-info {
    padding: 0;
    gap: 4px;
    justify-content: center;
}

/* 已成团/进行中模式：内容较多，回到顶部对齐避免重心下沉 */
.csf-gc-group-info:has(.csf-gc-infobar),
.csf-gc-group-info:has(.csf-gc-progress) {
    justify-content: flex-start;
    gap: 6px;
}

/* 价格行可换行，避免在窄列中溢出 */
.csf-gc-price {
    flex-wrap: wrap;
    row-gap: 2px;
}

/* 底部「沟通方式 + 操作 + 查看所有」整体收紧到 40px */
.csf-group-start-row {
    margin-top: 6px;
    gap: 10px;
}

.csf-group-start-form {
    gap: 10px;
}

.csf-group-start-form-field {
    min-height: 40px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.dark-theme .csf-group-start-form-field {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.csf-group-contact-input {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12.5px;
}

.csf-group-contact-label {
    font-size: 12.5px;
}

.csf-group-start-row .csf-group-row-btn {
    flex: 0 0 150px;
    width: 150px;
    min-width: 150px;
    min-height: 40px;
    font-size: 12.5px;
}

.csf-group-start-row .csf-group-row-btn-primary {
    box-shadow: 0 10px 22px -10px rgba(255, 92, 60, 0.55) !important;
}

.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact {
    flex: 0 0 150px;
}

.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a {
    min-height: 40px;
    font-size: 12.5px;
    background: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.dark-theme .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a {
    background: rgba(255, 255, 255, 0.04);
}

/* 双列底部 footer (group panel 自带) 同步收紧 */
.csf-gc-panel[data-panel="group"] > .csf-gc-footer a {
    min-height: 36px;
    font-size: 12.5px;
}

/* —— 子比 pay-box 紧凑化 —— */
.csf-group-allow-display .pay-box {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(248, 250, 252, 0.34));
    border: 0.8px solid rgba(226, 232, 240, 0.42);
    border-radius: 10px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    padding: 12px 14px 14px;
}


.csf-group-allow-display .pay-flexbox {
    align-items: stretch;
    gap: 16px;
}

.csf-group-allow-display .pay-thumb {
    margin-right: 0 !important;
    width: 34%;
    max-width: 240px;
}

.csf-group-allow-display .pay-thumb .graphic {
    overflow: hidden;
    border-radius: 8px;
}

.csf-group-allow-display .vip-price-buts.inline,
.csf-group-allow-display .vip-price-buts,
.csf-group-allow-display .dependency-box {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.csf-group-allow-display .dependency-box {
    margin-top: 12px;
    flex-direction: column;
}



.csf-group-allow-display .pay-price-text {
    margin-left: 10px;
}

.csf-group-allow-display .actual-price-number {
    font-weight: 800;
}


.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb {
    gap: 6px;
}

.csf-group-allow-display .text-right.mt10 {
    margin-top: 10px !important;
}

.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px 10px;
}

.csf-group-allow-display .pay-title,
.csf-group-allow-display .pay-title + div,
.csf-group-allow-display .price-box,
.csf-group-allow-display .visible-xs-block.badg.c-red.px12.mb6 {
    grid-column: 1 / -1;
}

.csf-group-allow-display .vip-price-buts.inline,
.csf-group-allow-display .vip-price-buts {
    grid-column: 1 / span 2;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.csf-group-allow-display .vip-price {
    width: auto;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(129, 140, 248, 0.06));
    border: 0.8px solid rgba(129, 140, 248, 0.16) !important;
    border-radius: 6px !important;
    padding: 4px 8px;
    color: rgb(79, 70, 229) !important;
    font-size: 11px;
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csf-group-allow-display .vip-price .vip-price-text {
    white-space: nowrap;
    color: rgb(79, 70, 229);
}

.csf-group-allow-display .text-right.mt10 {
    grid-column: 3 / 4;
    margin-top: 0 !important;
    align-self: stretch;
    width: 100%;
}

.csf-group-allow-display .text-right.mt10 form,
.csf-group-allow-display .text-right.mt10 .dependency-box {
    height: 100%;
}

.csf-group-allow-display .text-right.mt10 .dependency-box {
    margin-top: 0;
}

.csf-gc-my .csf-gc-inner {
    padding: 12px 14px 14px;
}

.csf-gc-my-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: center;
    margin-bottom: 8px;
}

.csf-gc-my-top-main,
.csf-gc-my-top-price {
    min-width: 0;
}

.csf-gc-my-top-price {
    text-align: right;
}

.csf-gc-my .csf-gc-myheader {
    margin-bottom: 0;
}

.csf-gc-my .csf-gc-mytitle {
    font-size: 14px;
}

.csf-gc-my .csf-gc-badge {
    padding: 2px 9px;
    font-size: 10px;
}

.csf-gc-my .csf-gc-price {
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 2px;
}

.csf-gc-my .csf-gc-price-val {
    font-size: 22px;
}

.csf-gc-my .csf-gc-price-hint {
    margin-bottom: 0;
    font-size: 11px;
    text-align: right;
}

.csf-gc-my .csf-gc-infobar {
    margin-bottom: 8px;
}

.csf-gc-my .csf-gc-info {
    padding: 8px 0;
}

.csf-gc-my .csf-gc-info-val {
    font-size: 13px;
}

.csf-gc-my .csf-gc-info-label {
    font-size: 10px;
}

.csf-gc-my .csf-gc-progress {
    margin-bottom: 8px;
}

.csf-gc-my .csf-gc-success-msg {
    margin-bottom: 8px;
}

.csf-gc-my-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 10px;
    align-items: start;
}

.csf-gc-my .csf-gc-members {
    padding: 10px 12px;
    margin-bottom: 0;
    border-radius: 14px;
}

.csf-gc-my .csf-gc-members-hd {
    margin-bottom: 6px;
    font-size: 12px;
}

.csf-gc-my .csf-gc-members-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
}

.csf-gc-my .csf-gc-member {
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 112px;
    max-width: 100%;
    padding: 7px 9px;
    border-radius: 12px;
    text-align: left;
}

.csf-gc-my .csf-gc-member-av,
.csf-gc-my .csf-gc-member-av-ph {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin: 0;
}

.csf-gc-my .csf-gc-member-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.csf-gc-my .csf-gc-member-name {
    font-size: 10px;
    line-height: 1.25;
}

.csf-gc-my .csf-gc-member-st {
    font-size: 9px;
    margin-top: 0;
}

.csf-gc-my-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.csf-gc-my .csf-gc-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 0;
}

.csf-gc-my .csf-gc-actions .but,
.csf-gc-my .csf-gc-actions > a {
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
    font-size: 13px;
}

.csf-gc-my .csf-gc-exit-hint {
    margin-top: 0;
    font-size: 11px;
    text-align: center;
}

.csf-gc-my .csf-gc-footer {
    margin-top: 8px;
    padding-top: 8px;
}

.csf-gc-my .csf-gc-footer a {
    font-size: 11px;
}


@media (max-width: 767px) {
    .csf-gc-group-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        align-items: start;
    }

    .csf-gc-thumb {
        display: none;
    }

    .csf-card-inline-layout {
        flex-direction: column;
        gap: 10px;
    }

    .csf-gc-thumb-card-inline {
        flex: none;
        width: 100%;
        max-height: 180px;
    }

    .csf-gc-thumb img {
        max-height: none;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }

    .csf-gc-tabs {
        margin-bottom: 8px;
    }

    .csf-gc-group-info {
        gap: 6px;
        padding: 0;
    }

    .csf-gc-price {
        justify-content: flex-start;
        gap: 6px;
    }

    .csf-gc-price-del {
        font-size: 12px;
    }

    .csf-gc-price-hint {
        text-align: left;
        font-size: 11px;
        margin-bottom: 2px;
    }

    .csf-gc-infobar {
        margin-bottom: 6px;
    }

    .csf-gc-info {
        padding: 6px 0;
    }

    .csf-gc-progress {
        margin-bottom: 6px;
    }

    .csf-gc-avatars {
        padding: 4px 0;
        background: transparent;
        border: none;
    }

    .csf-gc-av-hint {
        font-size: 11px;
    }


    .csf-gc-my .csf-gc-inner {
        padding: 11px 12px 12px;
    }

    .csf-gc-my-top {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .csf-gc-my-top-price {
        text-align: left;
    }

    .csf-gc-my .csf-gc-price {
        justify-content: flex-start;
    }

    .csf-gc-my .csf-gc-price-hint {
        text-align: left;
    }

    .csf-gc-my-body {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .csf-group-allow-display .pay-flexbox {
        gap: 10px;
    }

    .csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }


    .csf-group-allow-display .vip-price-buts.inline,
    .csf-group-allow-display .vip-price-buts {
        grid-column: 1 / span 2;
        gap: 6px;
    }

    .csf-group-allow-display .vip-price {
        width: 100%;
        justify-content: center;
    }

    .csf-group-allow-display .text-right.mt10 {
        grid-column: 3 / 4;
    }


    .csf-gc-my .csf-gc-member {
        min-width: 104px;
        padding: 6px 8px;
    }

    .csf-gc-my .csf-gc-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .csf-gc-my .csf-gc-actions > :only-child {
        grid-column: 1 / -1;
    }

    .csf-gc-my .csf-gc-actions .but,
    .csf-gc-my .csf-gc-actions > a {
        min-height: 36px;
        font-size: 12px;
    }
}

/* 购买卡片最终布局 */
.csf-group-allow-display .pay-flexbox {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.csf-group-allow-display .pay-thumb {
    margin-right: 0 !important;
    width: 172px;
    max-width: 172px;
}

.csf-group-allow-display .pay-thumb .graphic {
    overflow: hidden;
    border-radius: 8px;
}

.csf-group-allow-display .pay-thumb .graphic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csf-group-allow-display .pay-tag {
    display: none;
}

.csf-group-allow-display .pay-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.csf-group-allow-display .pay-title::before {
    content: '付费资源';
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff8a5b, #ff4d6d);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "title title title"
        "desc desc desc"
        "price vip button";
    gap: 6px 10px;
    align-items: center;
}

.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb > dt {
    grid-area: title;
}

.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb > div.mt6 {
    grid-area: desc;
    margin-top: 0 !important;
}

.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb > div:has(> .price-box) {
    grid-area: price;
    display: flex;
    align-items: center;
}

.csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb > div:has(> .vip-price-buts) {
    grid-area: vip;
    min-width: 0;
}

.csf-group-allow-display .price-box {
    margin-top: 0;
}

.csf-group-allow-display .vip-price-buts.inline,
.csf-group-allow-display .vip-price-buts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.csf-group-allow-display .vip-price {
    width: auto;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(129, 140, 248, 0.06));
    border: 0.8px solid rgba(129, 140, 248, 0.16) !important;
    border-radius: 6px !important;
    padding: 3px 8px;
    color: rgb(79, 70, 229) !important;
    font-size: 11px;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csf-group-allow-display .text-right.mt10 {
    grid-area: button;
    width: 100%;
    min-width: 0;
    margin-top: 0 !important;
    align-self: center;
}

.csf-group-allow-display .text-right.mt10 form,
.csf-group-allow-display .text-right.mt10 .dependency-box {
    height: auto !important;
    width: 100%;
    margin-top: 0;
}

.csf-group-allow-display .text-right.mt10 .but,
.csf-group-allow-display .text-right.mt10 .cashier-link {
    width: 100%;
}

.csf-group-allow-display .text-right.mt10 .pay-extra-hide {
    display: none !important;
}

.csf-group-allow-display .initiate-pay,
.csf-group-allow-display .pay-box .but.btn-block,
.csf-group-allow-display .cashier-link.but {
    width: 100%;
    background: linear-gradient(135deg, rgb(255, 106, 99) 0%, rgb(255, 77, 79) 48%, rgb(255, 106, 42) 100%) !important;
    border: 0.8px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(255, 88, 88, 0.18);
    color: #fff !important;
    font-size: 12.5px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    .csf-group-allow-display .pay-flexbox {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .csf-group-allow-display .pay-thumb {
        width: 100%;
        max-width: 100%;
    }

    .csf-group-allow-display .pay-box .flex-auto-h.flex.xx.jsb {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "desc"
            "price"
            "vip"
            "button";
        gap: 10px;
    }

    .csf-group-allow-display .vip-price-buts.inline,
    .csf-group-allow-display .vip-price-buts {
        flex-wrap: wrap;
    }

    .csf-group-allow-display .initiate-pay,
    .csf-group-allow-display .pay-box .but.btn-block,
    .csf-group-allow-display .cashier-link.but {
        font-size: 12px;
        min-height: 30px;
    }
}

/* ============================================= */
/* 12. 用户中心 - 我的卡密                       */
/* ============================================= */

.csf-mycards-group-header {
    border-bottom: 1px solid var(--main-border-color, #eee);
}

.csf-mycards-list {
    padding: 0;
}

.csf-mycards-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--main-border-color, #f0f0f0);
}

.csf-mycards-item:last-child {
    border-bottom: none;
}

.csf-mycards-field {
    margin-bottom: 4px;
}

.csf-mycards-label {
    color: var(--muted-2-color, #999);
    font-size: 12px;
    margin-right: 4px;
}

.csf-mycards-value {
    font-weight: 600;
    word-break: break-all;
}

.csf-mycards-time {
    margin-top: 4px;
}

.csf-mycards-copy-btn {
    flex-shrink: 0;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 4px;
    background: var(--focus-color, #ff4d4f);
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.csf-mycards-copy-btn:hover {
    opacity: 0.85;
}

.csf-mycards-arrow-open {
    transform: rotate(90deg);
}

/* ============================================= */
/* 14. 淘宝商品页风格（团购卡价格 / 促销 / CTA）  */
/* ============================================= */

/* —— 14.0 缩略图模式右侧信息区：PDD 商品标题 + 促销标签 —— */

/* 信息区顶部对齐，紧凑排列 */
.csf-gc-group-layout .csf-gc-group-info {
    justify-content: flex-start;
    gap: 3px;
}

/* 商品标题 */
.csf-gc-info-title {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.4;
    margin-bottom: 2px;
}

.csf-gc-info-tag {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 5px;
    border-radius: 2px;
    background: linear-gradient(135deg, #ff5e3a, #ff2400);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.dark-theme .csf-gc-info-tag {
    box-shadow: 0 2px 6px rgba(255, 36, 0, 0.3);
}

.csf-gc-info-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--key-color, #1f2329);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.dark-theme .csf-gc-info-name {
    color: rgba(255, 255, 255, 0.9);
}

/* 促销标签行 */
.csf-gc-promo-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.csf-gc-promo-discount {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 2px;
    background: rgba(255, 68, 0, 0.1);
    border: 1px solid rgba(255, 68, 0, 0.25);
    color: #ff4400;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.dark-theme .csf-gc-promo-discount {
    background: rgba(255, 68, 0, 0.15);
    border-color: rgba(255, 68, 0, 0.35);
    color: #ff8a5b;
}

.csf-gc-promo-members {
    font-size: 11px;
    color: #999;
    font-weight: 500;
}

.csf-gc-promo-hot {
    font-size: 11px;
    color: #ff4d6d;
    font-weight: 600;
}

/* 缩略图模式下去除价格区多余左 padding */
.csf-gc-panel[data-panel="group"] .csf-gc-group-layout .csf-gc-price {
    padding: 0;
    margin-bottom: 2px;
}

.csf-gc-panel[data-panel="group"] .csf-gc-group-layout .csf-gc-price-hint {
    margin-left: 0;
    margin-bottom: 0;
}

/* 移动端：缩略图隐藏后标题仍可见 */
@media (max-width: 767px) {
    .csf-gc-info-title {
        margin-bottom: 4px;
    }
    .csf-gc-promo-row {
        margin-top: 0;
    }
}

/* —— 14.1 右侧价格区：左对齐、巨型红价 + 团购价徽章 + 划线原价 —— */
.csf-gc-panel[data-panel="group"] .csf-gc-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 4px 14px 0;
    margin-bottom: 4px;
}

.csf-gc-panel[data-panel="group"] .csf-gc-price-now {
    order: 1;
    display: inline-flex;
    align-items: baseline;
    position: relative;
}

.csf-gc-panel[data-panel="group"] .csf-gc-yen {
    font-size: 16px;
    font-weight: 800;
    color: #ff2e00;
    margin-right: 1px;
    line-height: 1;
}

.csf-gc-panel[data-panel="group"] .csf-gc-price-val {
    font-size: 30px;
    font-weight: 900;
    color: #ff2e00;
    letter-spacing: -0.5px;
    line-height: 1;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", Arial, "DIN Alternate", sans-serif;
}

/* 团购价徽章：跟随在现价右侧 */
.csf-gc-panel[data-panel="group"] .csf-gc-price-now::after {
    content: '团购价';
    align-self: center;
    margin-left: 6px;
    padding: 2px 7px 3px;
    border-radius: 3px 9px 3px 9px;
    background: linear-gradient(135deg, #ff5e3a, #ff2400);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px -4px rgba(255, 36, 0, 0.4);
    white-space: nowrap;
}

/* 划线原价：放在现价右后方，淡灰 */
.csf-gc-panel[data-panel="group"] .csf-gc-price-del {
    order: 2;
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

.dark-theme .csf-gc-panel[data-panel="group"] .csf-gc-price-del {
    color: rgba(255, 255, 255, 0.42);
}

/* —— 14.2 价格提示 → 淘宝促销胶囊（含「2人成团 · 省¥1101」） —— */
.csf-gc-panel[data-panel="group"] .csf-gc-price-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 8px 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 94, 58, 0.14), rgba(255, 36, 0, 0.06));
    border: 1px solid rgba(255, 94, 58, 0.22);
    color: #ff4400;
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    width: max-content;
    max-width: calc(100% - 28px);
    line-height: 1.4;
}

.dark-theme .csf-gc-panel[data-panel="group"] .csf-gc-price-hint {
    background: linear-gradient(135deg, rgba(255, 94, 58, 0.18), rgba(255, 36, 0, 0.08));
    border-color: rgba(255, 94, 58, 0.3);
    color: #ff8a5b;
}

/* —— 14.3 空状态卡 → 淘宝橘黄促销提示条 —— */
.csf-gc-panel[data-panel="group"] .csf-gc-empty {
    margin: 0 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 233, 219, 0.92), rgba(255, 217, 192, 0.62));
    border: 1px solid rgba(255, 132, 64, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 16px -10px rgba(255, 88, 0, 0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    justify-content: flex-start;
    gap: 8px;
}

.dark-theme .csf-gc-panel[data-panel="group"] .csf-gc-empty {
    background: linear-gradient(135deg, rgba(120, 60, 30, 0.42), rgba(80, 40, 20, 0.34));
    border-color: rgba(255, 132, 64, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.csf-gc-panel[data-panel="group"] .csf-gc-empty-icon {
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(255, 88, 0, 0.18));
}

.csf-gc-panel[data-panel="group"] .csf-gc-empty-text {
    color: #b8460a;
    font-weight: 600;
    font-size: 12.5px;
}

.dark-theme .csf-gc-panel[data-panel="group"] .csf-gc-empty-text {
    color: #ffb988;
}

/* —— 14.4 沟通方式输入框 → 淘宝表单风格 —— */
.csf-group-start-row .csf-group-start-form-field {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 132, 64, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark-theme .csf-group-start-row .csf-group-start-form-field {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 132, 64, 0.24);
}

.csf-group-start-row .csf-group-start-form-field:focus-within {
    border-color: #ff6a00;
    box-shadow:
        0 0 0 3px rgba(255, 106, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.92);
}

.csf-group-start-row .csf-group-contact-label {
    color: #ff4400;
    font-weight: 700;
    font-size: 12.5px;
}

.dark-theme .csf-group-start-row .csf-group-contact-label {
    color: #ff8a5b;
}

.csf-group-start-row .csf-group-contact-input::placeholder {
    color: rgba(15, 23, 42, 0.42);
}

.dark-theme .csf-group-start-row .csf-group-contact-input::placeholder {
    color: rgba(255, 255, 255, 0.36);
}

/* —— 14.5 主按钮：淘宝「立即购买」橙红渐变 + 高光扫光 —— */
.csf-group-start-row .csf-group-row-btn-primary {
    background: linear-gradient(180deg, #ff8a00 0%, #ff5a00 50%, #ff3d00 100%) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    box-shadow:
        0 8px 18px -8px rgba(255, 64, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 0 rgba(180, 36, 0, 0.18) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.csf-group-start-row .csf-group-row-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.csf-group-start-row .csf-group-row-btn-primary:hover::before {
    left: 130%;
}

.csf-group-start-row .csf-group-row-btn-primary:hover {
    background: linear-gradient(180deg, #ff9a1a 0%, #ff6919 50%, #ff4a16 100%) !important;
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px -10px rgba(255, 64, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -2px 0 rgba(180, 36, 0, 0.18) !important;
    color: #fff !important;
}

.csf-group-start-row .csf-group-row-btn-primary:active {
    transform: translateY(0);
    box-shadow:
        0 4px 10px -6px rgba(255, 64, 0, 0.5),
        inset 0 1px 2px rgba(180, 36, 0, 0.28) !important;
}

/* —— 14.6 次按钮：白底橙边「查看所有团购」 —— */
.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a,
.csf-group-start-row .csf-group-row-btn-secondary {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 106, 0, 0.55) !important;
    color: #ff4400 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.dark-theme .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a,
.dark-theme .csf-group-start-row .csf-group-row-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 132, 64, 0.4) !important;
    color: #ff8a5b !important;
}

.csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a:hover,
.csf-group-start-row .csf-group-row-btn-secondary:hover {
    background: linear-gradient(135deg, #fff5ed, #ffe4d2) !important;
    border-color: #ff4400 !important;
    color: #ff2e00 !important;
    box-shadow: 0 6px 16px -8px rgba(255, 64, 0, 0.28) !important;
    transform: translateY(-1px);
}

.dark-theme .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a:hover,
.dark-theme .csf-group-start-row .csf-group-row-btn-secondary:hover {
    background: rgba(255, 132, 64, 0.18) !important;
    color: #ffb988 !important;
}

/* 移动端：按钮排版与字号微调 */
@media (max-width: 767px) {
    .csf-gc-panel[data-panel="group"] .csf-gc-price-val {
        font-size: 26px;
    }

    .csf-gc-panel[data-panel="group"] .csf-gc-price-now::after {
        font-size: 9px;
        padding: 2px 6px;
    }

    .csf-gc-panel[data-panel="group"] .csf-gc-price,
    .csf-gc-panel[data-panel="group"] .csf-gc-price-hint,
    .csf-gc-panel[data-panel="group"] .csf-gc-empty {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* 覆盖 14.5/14.6 节的按钮/链接圆角，移动端统一直角 */
    .csf-group-start-row .csf-group-row-btn-primary,
    .csf-group-start-row .csf-group-row-btn-secondary,
    .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact a {
        border-radius: 0 !important;
    }
}

/* ============================================= */
/* 14.7 「我的团购」卡片 - 淘宝风格           */
/* ============================================= */

/* —— 头部：标题 + 状态徽章 —— */
.csf-gc-my .csf-gc-myheader {
    display: flex;
    align-items: center;
    gap: 8px;
}

.csf-gc-my .csf-gc-mytitle {
    font-size: 15px;
    font-weight: 800;
    color: #1f2329;
    letter-spacing: 0.3px;
}

.dark-theme .csf-gc-my .csf-gc-mytitle {
    color: #fff;
}

.csf-gc-my .csf-gc-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
}

.csf-gc-my .csf-badge-running {
    background: linear-gradient(135deg, #ffb01a, #ff7a00);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(255, 122, 0, 0.45);
}

.csf-gc-my .csf-badge-pending {
    background: linear-gradient(135deg, #4a90e2, #2967c0);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(41, 103, 192, 0.45);
}

.csf-gc-my .csf-badge-success {
    background: linear-gradient(135deg, #73d13d, #389e0d);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(56, 158, 13, 0.4);
}

.csf-gc-my .csf-badge-failed {
    background: linear-gradient(135deg, #ff5e3a, #e22424);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(226, 36, 36, 0.45);
}

/* —— 价格区（保持右对齐，与右侧 CTA 同色系） —— */
.csf-gc-my .csf-gc-price-now {
    display: inline-flex;
    align-items: baseline;
}

.csf-gc-my .csf-gc-yen {
    font-size: 16px;
    font-weight: 800;
    color: #ff2e00;
    margin-right: 1px;
    line-height: 1;
}

.csf-gc-my .csf-gc-price-val {
    font-size: 26px;
    font-weight: 900;
    color: #ff2e00;
    letter-spacing: -0.5px;
    line-height: 1;
}

.csf-gc-my .csf-gc-price-del {
    font-size: 13px;
    color: #999;
    text-decoration: line-through;
    font-weight: 500;
}

.csf-gc-my .csf-gc-price-hint {
    font-size: 11px;
    color: #ff4400;
    font-weight: 600;
}

.dark-theme .csf-gc-my .csf-gc-price-hint {
    color: #ff8a5b;
}

/* —— 信息栏（剩余时间 / 已参团 / 已支付） —— */
.csf-gc-my .csf-gc-infobar {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 132, 64, 0.18);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 6px 16px -10px rgba(255, 88, 0, 0.12);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-gc-my .csf-gc-infobar {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 132, 64, 0.2);
}

.csf-gc-my .csf-gc-info {
    padding: 10px 0;
}

.csf-gc-my .csf-gc-info-val {
    font-size: 15px;
    font-weight: 800;
    color: #1f2329;
    letter-spacing: 0.3px;
}

.dark-theme .csf-gc-my .csf-gc-info-val {
    color: rgba(255, 255, 255, 0.92);
}

.csf-gc-my .csf-gc-info-val.csf-countdown {
    color: #ff4400;
    font-family: -apple-system, "DIN Alternate", "Helvetica Neue", monospace;
    letter-spacing: 1px;
}

.csf-gc-my .csf-gc-info-val.csf-text-green,
.csf-gc-my .csf-text-green {
    color: #389e0d !important;
}

.csf-gc-my .csf-gc-info-label {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* —— 进度条（替换为橙红渐变；成功时绿色） —— */
.csf-gc-my .csf-gc-progress {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 132, 64, 0.14);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.dark-theme .csf-gc-my .csf-gc-progress {
    background: rgba(255, 255, 255, 0.08);
}

.csf-gc-my .csf-gc-progress-fill {
    background: linear-gradient(90deg, #ff8a00, #ff3d00);
    box-shadow: 0 4px 10px -2px rgba(255, 64, 0, 0.32);
}

.csf-gc-my .csf-gc-progress-fill.csf-gc-progress-green {
    background: linear-gradient(90deg, #73d13d, #389e0d);
    box-shadow: 0 4px 10px -2px rgba(56, 158, 13, 0.32);
}

/* —— 成功提示横幅 —— */
.csf-gc-my .csf-gc-success-msg {
    background: linear-gradient(135deg, rgba(220, 252, 224, 0.95), rgba(195, 247, 215, 0.65));
    color: #389e0d;
    border: 1px solid rgba(115, 209, 61, 0.32);
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.dark-theme .csf-gc-my .csf-gc-success-msg {
    background: linear-gradient(135deg, rgba(56, 158, 13, 0.22), rgba(56, 158, 13, 0.1));
    color: #b7eb8f;
    border-color: rgba(115, 209, 61, 0.3);
}

/* —— 拼团沟通方式：淘宝橙色提示卡（左侧重点条） —— */
.csf-gc-my .csf-group-contact-box {
    margin: 10px 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 233, 219, 0.95), rgba(255, 217, 192, 0.6));
    border: 1px solid rgba(255, 132, 64, 0.28);
    border-left: 3px solid #ff6a00;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 16px -10px rgba(255, 88, 0, 0.16);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-gc-my .csf-group-contact-box {
    background: linear-gradient(135deg, rgba(120, 60, 30, 0.42), rgba(80, 40, 20, 0.32));
    border-color: rgba(255, 132, 64, 0.28);
    border-left-color: #ff8a5b;
}

.csf-gc-my .csf-group-contact-box .csf-group-contact-label {
    color: #ff4400;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.dark-theme .csf-gc-my .csf-group-contact-box .csf-group-contact-label {
    color: #ff8a5b;
}

.csf-gc-my .csf-group-contact-box .csf-group-contact-value {
    font-size: 13px;
    font-weight: 600;
    color: #1f2329;
    word-break: break-all;
}

.dark-theme .csf-gc-my .csf-group-contact-box .csf-group-contact-value {
    color: rgba(255, 255, 255, 0.85);
}

/* —— 团购成员区 —— */
.csf-gc-my .csf-gc-members {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 132, 64, 0.16);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 16px -10px rgba(255, 88, 0, 0.1);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-gc-my .csf-gc-members {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 132, 64, 0.18);
}

.csf-gc-my .csf-gc-members-hd {
    font-size: 12px;
    font-weight: 700;
    color: #1f2329;
}

.dark-theme .csf-gc-my .csf-gc-members-hd {
    color: rgba(255, 255, 255, 0.9);
}

.csf-gc-my .csf-gc-members-hd span:last-child {
    color: #999;
    font-weight: 600;
    font-size: 11px;
}

.csf-gc-my .csf-gc-member {
    border-radius: 10px;
    border: 1px solid rgba(255, 132, 64, 0.22);
    background: rgba(255, 255, 255, 0.78);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dark-theme .csf-gc-my .csf-gc-member {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 132, 64, 0.22);
}

.csf-gc-my .csf-gc-member:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(255, 88, 0, 0.22);
}

.csf-gc-my .csf-gc-member-me {
    border-color: #ff4400 !important;
    background: linear-gradient(135deg, rgba(255, 233, 219, 0.95), rgba(255, 217, 192, 0.6)) !important;
    box-shadow: 0 6px 16px -8px rgba(255, 64, 0, 0.32);
}

.csf-gc-my .csf-gc-member-me-paid {
    border-color: #389e0d !important;
    background: linear-gradient(135deg, rgba(220, 252, 224, 0.95), rgba(195, 247, 215, 0.6)) !important;
    box-shadow: 0 6px 16px -8px rgba(56, 158, 13, 0.28);
}

.csf-gc-my .csf-gc-member-empty {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.32);
}

.dark-theme .csf-gc-my .csf-gc-member-empty {
    background: rgba(255, 255, 255, 0.02);
}

.csf-gc-my .csf-gc-member-name {
    font-weight: 700;
    color: #1f2329;
}

.dark-theme .csf-gc-my .csf-gc-member-name {
    color: rgba(255, 255, 255, 0.9);
}

.csf-gc-my .csf-gc-member-st.unpaid {
    color: #ff8a00;
    font-weight: 700;
}

.csf-gc-my .csf-gc-member-st.paid {
    color: #389e0d;
    font-weight: 700;
}

/* —— 操作按钮：「立即支付」 淘宝橙红渐变 + 扫光 —— */
.csf-gc-my .csf-gc-actions .but.jb-yellow,
.csf-gc-my .csf-gc-actions .but.jb-blue {
    background: linear-gradient(180deg, #ff8a00 0%, #ff5a00 50%, #ff3d00 100%) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    box-shadow:
        0 8px 18px -8px rgba(255, 64, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 0 rgba(180, 36, 0, 0.18) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.csf-gc-my .csf-gc-actions .but.jb-yellow::before,
.csf-gc-my .csf-gc-actions .but.jb-blue::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.csf-gc-my .csf-gc-actions .but.jb-yellow:hover::before,
.csf-gc-my .csf-gc-actions .but.jb-blue:hover::before {
    left: 130%;
}

.csf-gc-my .csf-gc-actions .but.jb-yellow:hover,
.csf-gc-my .csf-gc-actions .but.jb-blue:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ff9a1a 0%, #ff6919 50%, #ff4a16 100%) !important;
    box-shadow:
        0 12px 24px -10px rgba(255, 64, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -2px 0 rgba(180, 36, 0, 0.18) !important;
    color: #fff !important;
}

/* —— 退出团购：白底红边 —— */
.csf-gc-my .csf-btn-outline-red {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(245, 34, 45, 0.55) !important;
    color: #f5222d !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.18s ease;
}

.csf-gc-my .csf-btn-outline-red:hover {
    background: linear-gradient(135deg, #fff5f5, #ffe4e4) !important;
    border-color: #cf1322 !important;
    color: #cf1322 !important;
    box-shadow: 0 6px 16px -8px rgba(245, 34, 45, 0.32) !important;
    transform: translateY(-1px);
}

.dark-theme .csf-gc-my .csf-btn-outline-red {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(245, 34, 45, 0.42) !important;
    color: #ff7875 !important;
}

.dark-theme .csf-gc-my .csf-btn-outline-red:hover {
    background: rgba(245, 34, 45, 0.18) !important;
    color: #ff9c9c !important;
}

/* 退出提示 */
.csf-gc-my .csf-gc-exit-hint {
    color: #999;
    font-size: 11px;
    font-weight: 500;
    margin-top: 6px;
}

/* —— 底部「查看所有团购」 链接 —— */
.csf-gc-my .csf-gc-footer {
    text-align: center;
    border-top: 1px dashed rgba(255, 132, 64, 0.2);
    margin-top: 10px;
    padding-top: 10px;
}

.csf-gc-my .csf-gc-footer a {
    font-size: 12.5px;
    color: #ff4400;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease;
}

.csf-gc-my .csf-gc-footer a:hover {
    color: #ff2e00;
}

.dark-theme .csf-gc-my .csf-gc-footer a {
    color: #ff8a5b;
}

.dark-theme .csf-gc-my .csf-gc-footer a:hover {
    color: #ffb988;
}

/* 移动端：我的团购卡片 */
@media (max-width: 767px) {
    .csf-gc-my .csf-gc-price-val {
        font-size: 22px;
    }

    .csf-gc-my .csf-gc-info-val {
        font-size: 13px;
    }

    .csf-gc-my .csf-gc-actions .but.jb-yellow,
    .csf-gc-my .csf-gc-actions .but.jb-blue,
    .csf-gc-my .csf-btn-outline-red {
        min-height: 38px;
        font-size: 12.5px;
    }
}

/* ============================================= */
/* 14.8 「我的团购」 紧凑重排 + 合并细节         */
/* ============================================= */

/* —— inner 改为 Grid 区域布局：让底部 footer 与操作列合并到右下 —— */
.csf-gc-my .csf-gc-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas:
        "top       top"
        "info      info"
        "success   success"
        "contact   contact"
        "members   actions"
        "members   footer";
    column-gap: 14px;
    row-gap: 10px;
}

.csf-gc-my .csf-gc-my-top        { grid-area: top; margin-bottom: 0; }
.csf-gc-my .csf-gc-infobar       { grid-area: info; margin-bottom: 0; }
/* 信息条已文字化展示进度（如「0/2 已支付」），独立进度条冗余，隐藏避免多余横线 */
.csf-gc-my .csf-gc-progress      { display: none; }
.csf-gc-my .csf-gc-success-msg   { grid-area: success; margin-bottom: 0; }
.csf-gc-my .csf-group-contact-box{ grid-area: contact; }
.csf-gc-my .csf-gc-members       { grid-area: members; margin-bottom: 0; }
.csf-gc-my .csf-gc-my-actions-wrap { grid-area: actions; }
.csf-gc-my .csf-gc-footer        { grid-area: footer; }

/* my-body 用 display: contents 让其子元素提升为 inner 的直接 grid 项 */
.csf-gc-my .csf-gc-my-body {
    display: contents;
}

/* —— 拼团沟通方式：去重点条 / 去圆角 / 横向 label-value，合并到一行 —— */
.csf-gc-my .csf-group-contact-box {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 0;
    border: 0;
    border-left: 0;
    background: linear-gradient(135deg, rgba(255, 233, 219, 0.78), rgba(255, 217, 192, 0.5));
    box-shadow: none;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.dark-theme .csf-gc-my .csf-group-contact-box {
    background: linear-gradient(135deg, rgba(120, 60, 30, 0.4), rgba(80, 40, 20, 0.32));
}

.csf-gc-my .csf-group-contact-box .csf-group-contact-label {
    flex: 0 0 auto;
    margin: 0;
    color: #ff4400;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.csf-gc-my .csf-group-contact-box .csf-group-contact-label::after {
    content: '：';
    margin-left: -2px;
    color: rgba(255, 68, 0, 0.6);
}

.csf-gc-my .csf-group-contact-box .csf-group-contact-value {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2329;
    line-height: 1.4;
    word-break: break-all;
}

.dark-theme .csf-gc-my .csf-group-contact-box .csf-group-contact-value {
    color: rgba(255, 255, 255, 0.85);
}

/* —— 退出团购：把 exit-hint 合并为按钮内副标题，节省一行 —— */
.csf-gc-my .csf-gc-exit-hint {
    display: none;
}

.csf-gc-my .csf-gc-actions .csf-btn-outline-red {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 5px 10px !important;
    line-height: 1.15;
    min-height: 40px;
}

.csf-gc-my .csf-gc-actions .csf-btn-outline-red::after {
    content: '退出后才可直接购买';
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    color: rgba(245, 34, 45, 0.55);
    letter-spacing: 0;
    margin-top: 1px;
    line-height: 1.1;
}

.dark-theme .csf-gc-my .csf-gc-actions .csf-btn-outline-red::after {
    color: rgba(255, 120, 117, 0.6);
}

.csf-gc-my .csf-gc-actions .csf-btn-outline-red:hover::after {
    color: rgba(207, 19, 34, 0.7);
}

/* —— footer 紧凑化：作为操作列下方紧贴的小链接，不再整宽独占 —— */
.csf-gc-my .csf-gc-footer {
    margin: 0;
    padding: 4px 0 0;
    border-top: 0;
    text-align: center;
}

.csf-gc-my .csf-gc-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    font-size: 11.5px;
    font-weight: 600;
    color: #ff6a00;
    border-radius: 6px;
    background: rgba(255, 132, 64, 0.06);
    transition: background 0.18s ease, color 0.18s ease;
}

.csf-gc-my .csf-gc-footer a:hover {
    background: rgba(255, 132, 64, 0.14);
    color: #ff2e00;
}

.dark-theme .csf-gc-my .csf-gc-footer a {
    background: rgba(255, 132, 64, 0.1);
    color: #ff8a5b;
}

.dark-theme .csf-gc-my .csf-gc-footer a:hover {
    background: rgba(255, 132, 64, 0.2);
    color: #ffb988;
}

/* 操作列内部按钮间距更紧凑 */
.csf-gc-my .csf-gc-my-actions-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.csf-gc-my .csf-gc-my-actions-wrap .csf-gc-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}

/* 移动端：恢复单列堆叠（grid 区域回退） */
@media (max-width: 767px) {
    .csf-gc-my .csf-gc-inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "top"
            "info"
            "progress"
            "success"
            "contact"
            "members"
            "actions"
            "footer";
    }

    .csf-gc-my .csf-group-contact-box {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .csf-gc-my .csf-gc-footer a {
        width: auto;
        padding: 0 14px;
    }
}

/* ============================================= */
/* 14.9 发卡商品横条卡 - 淘宝风格              */
/* ============================================= */

/* —— 顶部警示横幅：从黄底警告 → 淘宝橙红促销条（文案的 📦 emoji 来自 PHP，不再追加 ::before） —— */
.csf-gc .csf-group-notice.warning {
    margin: 0 0 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 233, 219, 0.92), rgba(255, 217, 192, 0.65));
    border: 1px solid rgba(255, 132, 64, 0.28);
    color: #b8460a;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 6px 16px -10px rgba(255, 88, 0, 0.18);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-gc .csf-group-notice.warning {
    background: linear-gradient(135deg, rgba(120, 60, 30, 0.42), rgba(80, 40, 20, 0.34));
    border-color: rgba(255, 132, 64, 0.28);
    color: #ffb988;
}

/* —— 提示文字：购买后自动发放卡密... —— */
.csf-card-inline-body .csf-card-inline-text {
    color: #ff4400;
    font-size: 12.5px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255, 233, 219, 0.6), rgba(255, 217, 192, 0.32));
    border-left: 3px solid #ff6a00;
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
}

.dark-theme .csf-card-inline-body .csf-card-inline-text {
    color: #ff8a5b;
    background: linear-gradient(135deg, rgba(120, 60, 30, 0.4), rgba(80, 40, 20, 0.32));
    border-left-color: #ff8a5b;
}

/* —— 缩略图占位框美化 —— */
.csf-gc-thumb-card-inline {
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 8px 18px -8px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
}

/* —— 表单横条：卡片化 + 玻璃感 —— */
.csf-card-form-bar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(248, 250, 255, 0.42)) !important;
    border: 1px solid rgba(255, 132, 64, 0.18) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 22px -12px rgba(15, 23, 42, 0.1) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    padding: 12px 14px !important;
    gap: 16px !important;
}

.dark-theme .csf-card-form-bar {
    background: linear-gradient(135deg, rgba(40, 42, 48, 0.66), rgba(28, 30, 36, 0.42)) !important;
    border-color: rgba(255, 132, 64, 0.18) !important;
}

/* 列分隔线改为浅橙 */
.csf-card-price-section,
.csf-card-stock-section,
.csf-card-quantity-section,
.csf-card-total-section {
    border-right-color: rgba(255, 132, 64, 0.18) !important;
}

.dark-theme .csf-card-price-section,
.dark-theme .csf-card-stock-section,
.dark-theme .csf-card-quantity-section,
.dark-theme .csf-card-total-section {
    border-right-color: rgba(255, 132, 64, 0.2) !important;
}

/* —— Label 统一字号 + 颜色 —— */
.csf-card-form-bar .csf-card-label {
    color: #999;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}

/* —— 团购价：橙红巨字 + 省金额徽章 —— */
.csf-card-form-bar .csf-card-price-value {
    color: #ff2e00;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -0.3px;
    line-height: 1;
}

.csf-card-form-bar .csf-card-price-value span {
    color: rgba(255, 46, 0, 0.55);
    font-size: 11px;
    font-weight: 600;
    margin-left: 1px;
}

.csf-card-form-bar .csf-card-save-amount {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 94, 58, 0.16), rgba(255, 36, 0, 0.08));
    border: 1px solid rgba(255, 94, 58, 0.24);
    color: #ff4400;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
}

.dark-theme .csf-card-form-bar .csf-card-save-amount {
    background: linear-gradient(135deg, rgba(255, 94, 58, 0.22), rgba(255, 36, 0, 0.1));
    color: #ff8a5b;
}

/* —— 库存数值：绿色加重 —— */
.csf-card-form-bar .csf-card-stock-value {
    color: #389e0d;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.csf-card-form-bar .csf-card-stock-value span {
    color: rgba(56, 158, 13, 0.6);
    font-size: 11px;
    font-weight: 600;
}

/* —— 数量控件：圆角胶囊 + 玻璃 —— */
.csf-card-form-bar .csf-card-qty-minus,
.csf-card-form-bar .csf-card-qty-plus {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 132, 64, 0.32);
    background: rgba(255, 255, 255, 0.78);
    color: #ff4400;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.18s ease;
}

.csf-card-form-bar .csf-card-qty-minus:hover,
.csf-card-form-bar .csf-card-qty-plus:hover {
    background: linear-gradient(135deg, #fff5ed, #ffe4d2);
    border-color: #ff6a00;
    color: #ff2e00;
    box-shadow: 0 4px 12px -4px rgba(255, 64, 0, 0.22);
}

.dark-theme .csf-card-form-bar .csf-card-qty-minus,
.dark-theme .csf-card-form-bar .csf-card-qty-plus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 132, 64, 0.32);
    color: #ff8a5b;
}

.csf-card-form-bar .csf-card-qty-input {
    width: 50px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 132, 64, 0.24);
    background: rgba(255, 255, 255, 0.78);
    color: #1f2329;
    font-size: 13px;
    font-weight: 700;
    margin: 0 4px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.csf-card-form-bar .csf-card-qty-input:focus {
    border-color: #ff6a00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
    outline: none;
}

.dark-theme .csf-card-form-bar .csf-card-qty-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 132, 64, 0.28);
    color: rgba(255, 255, 255, 0.92);
}

/* —— 合计金额：橙红 —— */
.csf-card-form-bar .csf-card-total-value {
    color: #ff2e00;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.3px;
    line-height: 1;
}

/* —— 沟通方式区域：淘宝输入框 —— */
.csf-card-form-bar .csf-card-contact-section {
    border-right: 1px solid rgba(255, 132, 64, 0.18);
    padding-right: 14px;
    min-width: 200px;
}

.dark-theme .csf-card-form-bar .csf-card-contact-section {
    border-right-color: rgba(255, 132, 64, 0.2);
}

.csf-card-form-bar .csf-card-contact-section .csf-group-contact-label {
    color: #ff4400;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.dark-theme .csf-card-form-bar .csf-card-contact-section .csf-group-contact-label {
    color: #ff8a5b;
}

.csf-card-form-bar .csf-card-contact-section .csf-group-contact-input {
    width: 100%;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255, 132, 64, 0.24);
    background: rgba(255, 255, 255, 0.78);
    padding: 0 10px;
    color: #1f2329;
    font-size: 12.5px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.csf-card-form-bar .csf-card-contact-section .csf-group-contact-input:focus {
    border-color: #ff6a00;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.14);
    outline: none;
}

.csf-card-form-bar .csf-card-contact-section .csf-group-contact-input::placeholder {
    color: rgba(15, 23, 42, 0.42);
}

.dark-theme .csf-card-form-bar .csf-card-contact-section .csf-group-contact-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 132, 64, 0.28);
    color: rgba(255, 255, 255, 0.92);
}

/* —— 操作按钮：发起新团（淘宝橙红） + 直接购买（蓝渐变） —— */
.csf-card-form-bar .csf-card-actions-section {
    gap: 8px;
}

.csf-card-form-bar .csf-card-actions-section .but.jb-yellow {
    background: linear-gradient(180deg, #ff8a00 0%, #ff5a00 50%, #ff3d00 100%) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    box-shadow:
        0 8px 18px -8px rgba(255, 64, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -2px 0 rgba(180, 36, 0, 0.18) !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.csf-card-form-bar .csf-card-actions-section .but.jb-yellow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.csf-card-form-bar .csf-card-actions-section .but.jb-yellow:hover::before {
    left: 130%;
}

.csf-card-form-bar .csf-card-actions-section .but.jb-yellow:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #ff9a1a 0%, #ff6919 50%, #ff4a16 100%) !important;
    box-shadow:
        0 12px 22px -10px rgba(255, 64, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
    color: #fff !important;
}

.csf-card-form-bar .csf-card-actions-section .but.jb-blue {
    background: linear-gradient(180deg, #4a90e2 0%, #2967c0 100%) !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    box-shadow:
        0 8px 18px -8px rgba(41, 103, 192, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.csf-card-form-bar .csf-card-actions-section .but.jb-blue:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #5aa0f2 0%, #3477d0 100%) !important;
    box-shadow:
        0 12px 22px -10px rgba(41, 103, 192, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
    color: #fff !important;
}

/* —— 发卡卡片底部「查看所有团购」 —— */
.csf-gc-panel-card > .csf-gc-footer a,
.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 30px;
    min-height: 30px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255, 132, 64, 0.06);
    color: #ff6a00 !important;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease;
}

.csf-gc-panel-card > .csf-gc-footer a:hover,
.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a:hover {
    background: rgba(255, 132, 64, 0.14);
    color: #ff2e00 !important;
}

.dark-theme .csf-gc-panel-card > .csf-gc-footer a,
.dark-theme .csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a {
    background: rgba(255, 132, 64, 0.1);
    color: #ff8a5b !important;
}

.dark-theme .csf-gc-panel-card > .csf-gc-footer a:hover,
.dark-theme .csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a:hover {
    background: rgba(255, 132, 64, 0.2);
    color: #ffb988 !important;
}

/* 移动端：横条变两行（保持紧凑） */
@media (max-width: 767px) {
    .csf-card-form-bar {
        padding: 10px !important;
        gap: 10px !important;
    }

    .csf-card-form-bar .csf-card-price-value,
    .csf-card-form-bar .csf-card-stock-value {
        font-size: 16px;
    }

    .csf-card-form-bar .csf-card-total-value {
        font-size: 18px;
    }
}

/* ============================================= */
/* 14.10 发卡商品横条卡 · 最终布局（统一管理）  */
/* ---------------------------------------------- */
/* 设计目标：                                       */
/* - 缩略图与右侧主体同高对齐                       */
/* - 信息列（价格/库存/数量/合计）紧凑单行           */
/* - 沟通方式独立成行充分扩展                       */
/* - 操作按钮组右下贴齐                             */
/* ============================================= */

/* 1) 顶部 warning 与下方 inline-text 信息重复，发卡卡片场景统一隐藏 */
.csf-gc:has(.csf-gc-panel-card) .csf-gc-inner > .csf-group-notice.warning,
.csf-gc:has(.csf-card-inline-layout) .csf-gc-inner > .csf-group-notice.warning {
    display: none !important;
}

/* 2) 顶部说明条：📦 + 文案 */
.csf-card-inline-body .csf-card-inline-text {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 30px;
    margin: 0 0 8px;
    padding: 4px 12px 4px 32px;
    border-radius: 0 6px 6px 0;
    line-height: 1.3;
}

.csf-card-inline-body .csf-card-inline-text::before {
    content: '📦';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    filter: drop-shadow(0 2px 4px rgba(255, 88, 0, 0.18));
}

/* 3) 容器：缩略图 + 主体 合并成统一卡片（消除割裂感） */
.csf-card-inline-layout {
    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(248, 250, 255, 0.42)) !important;
    border: 1px solid rgba(255, 132, 64, 0.18) !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 22px -12px rgba(15, 23, 42, 0.1) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.dark-theme .csf-card-inline-layout {
    background: linear-gradient(135deg, rgba(40, 42, 48, 0.66), rgba(28, 30, 36, 0.42)) !important;
    border-color: rgba(255, 132, 64, 0.18) !important;
}

/* 4) 缩略图：与卡片同高（stretch 填满左侧） */
.csf-gc-thumb-card-inline {
    flex: none !important;
    width: 130px !important;
    max-width: 130px !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto;
    align-self: stretch;
    margin: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.csf-gc-thumb-card-inline img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 5) 主体：纵向 flex（提示条 + 表单） */
.csf-card-inline-body {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

/* 6) 表单：两行 grid 布局
 *    第一行：price/stock/qty/total 信息列
 *    第二行：沟通方式（左半） + 按钮组（右半）同行
 *    视觉容器由父级 inline-layout 承担
 */
.csf-card-inline-body .csf-card-form-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 0.95fr) minmax(0, 0.7fr);
    grid-template-areas:
        "price stock qty total"
        "contact contact actions actions";
    align-items: end;
    gap: 10px 14px;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.csf-card-inline-body .csf-card-form-bar > * {
    min-width: 0;
}

.csf-card-inline-body .csf-card-price-section { grid-area: price; }
.csf-card-inline-body .csf-card-stock-section { grid-area: stock; }
.csf-card-inline-body .csf-card-quantity-section { grid-area: qty; }
.csf-card-inline-body .csf-card-total-section { grid-area: total; }
.csf-card-inline-body .csf-card-contact-section { grid-area: contact; }
.csf-card-inline-body .csf-card-actions-section { grid-area: actions; }

/* 7) 信息列：移除默认右边框，统一基线对齐 */
.csf-card-inline-body .csf-card-price-section,
.csf-card-inline-body .csf-card-stock-section,
.csf-card-inline-body .csf-card-quantity-section,
.csf-card-inline-body .csf-card-total-section {
    border-right: 0 !important;
    padding-right: 0 !important;
    align-items: flex-start;
    text-align: left;
}

/* 库存：恢复独立列形式（label 在上 + 大字数值） */
.csf-card-inline-body .csf-card-stock-section .csf-card-label {
    display: block !important;
    margin: 0 0 3px !important;
    font-size: 11px !important;
    font-weight: 600;
    color: var(--muted-2-color, #999) !important;
}

.csf-card-inline-body .csf-card-stock-section .csf-card-stock-value {
    display: inline-flex !important;
    align-items: baseline;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #389e0d !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.csf-card-inline-body .csf-card-stock-section .csf-card-stock-value span {
    display: inline-block !important;
    color: rgba(56, 158, 13, 0.6) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-left: 2px;
}

.csf-card-inline-body .csf-card-stock-section .csf-card-stock-value::before {
    content: none !important;
}

/* 8) 沟通方式：label + input 同行（横向 flex） */
.csf-card-inline-body .csf-card-contact-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    border-right: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
}

.csf-card-inline-body .csf-card-contact-section .csf-group-contact-label {
    display: inline-block !important;
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
    line-height: 1;
}

.csf-card-inline-body .csf-card-contact-section .csf-group-contact-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 12px !important;
}

/* 9) 按钮组：右下贴齐 */
.csf-card-inline-body .csf-card-actions-section {
    display: flex !important;
    align-items: flex-end;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: auto !important;
    margin: 0 !important;
    overflow: visible !important;
}

.csf-card-inline-body .csf-card-actions-section .but {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 96px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
    flex: 0 0 auto !important;
}

.csf-card-inline-body .csf-card-actions-section .csf-card-direct-buy {
    min-width: 132px !important;
}

/* 「所有团购」次级按钮 */
.csf-card-form-bar .csf-card-actions-section .csf-card-list-link,
.csf-card-inline-body .csf-card-actions-section .csf-card-list-link {
    min-width: 92px !important;
    background: rgba(255, 255, 255, 0.62) !important;
    border: 1px solid rgba(255, 106, 0, 0.32) !important;
    color: #ff5a00 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.csf-card-form-bar .csf-card-actions-section .csf-card-list-link:hover,
.csf-card-inline-body .csf-card-actions-section .csf-card-list-link:hover {
    background: rgba(255, 106, 0, 0.12) !important;
    color: #ff2e00 !important;
}

.dark-theme .csf-card-form-bar .csf-card-actions-section .csf-card-list-link,
.dark-theme .csf-card-inline-body .csf-card-actions-section .csf-card-list-link {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 132, 64, 0.32) !important;
    color: #ff8a5b !important;
}

/* 10) Footer：发卡卡片底部链接已并入按钮组，这里只兜底兼容 */
.csf-gc-panel[data-panel="group"].csf-gc-panel-card.active {
    display: block !important;
}

.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
    display: block !important;
}

.csf-gc-panel-card > .csf-gc-footer a,
.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a {
    display: inline-flex !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 10px !important;
    background: transparent !important;
    color: #ff6a00 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
}

.csf-gc-panel-card > .csf-gc-footer a:hover,
.csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a:hover {
    background: transparent !important;
    color: #ff2e00 !important;
    text-decoration: underline !important;
}

.dark-theme .csf-gc-panel-card > .csf-gc-footer a,
.dark-theme .csf-gc-panel[data-panel="group"].csf-gc-panel-card > .csf-gc-footer a {
    background: transparent !important;
    color: #ff8a5b !important;
}

/* === 响应式 === */

/* 中等宽度：信息列保持单行；如果空间不够会自动挤压 */
@media (max-width: 980px) {
    .csf-card-inline-body .csf-card-form-bar {
        grid-template-areas:
            "price stock qty total"
            "contact contact actions actions";
    }

    .csf-card-inline-body .csf-card-actions-section {
        justify-content: flex-end !important;
    }
}

/* 移动端：缩略图变 16:9 横幅 + 信息列两两并排 + 按钮分两行 */
@media (max-width: 767px) {
    .csf-card-inline-layout {
        grid-template-columns: 1fr !important;
    }

    .csf-gc-thumb-card-inline {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 200px !important;
        aspect-ratio: 16 / 9;
    }

    .csf-card-inline-body .csf-card-form-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "price stock"
            "qty total"
            "contact contact"
            "actions actions";
    }

    .csf-card-inline-body .csf-card-price-section,
    .csf-card-inline-body .csf-card-stock-section,
    .csf-card-inline-body .csf-card-quantity-section,
    .csf-card-inline-body .csf-card-total-section {
        text-align: center;
        align-items: center;
    }

    /* 按钮组：单行不换行，按比例压缩 */
    .csf-card-inline-body .csf-card-actions-section {
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
        gap: 6px !important;
    }

    .csf-card-inline-body .csf-card-actions-section .but {
        flex: 1 1 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        min-width: 0 !important;
        padding: 0 6px !important;
        font-size: 11.5px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* "直接购买(¥xx.xx)" 文字稍长，分到稍多空间 */
    .csf-card-inline-body .csf-card-actions-section .csf-card-direct-buy {
        min-width: 0 !important;
        flex: 1.4 1 0 !important;
    }

    .csf-card-inline-body .csf-card-actions-section .csf-card-list-link {
        flex: 0.85 1 0 !important;
    }
}

/* 小屏（≤420）：缩略图缩为 4:3，按钮进一步收紧但仍单行 */
@media (max-width: 420px) {
    .csf-gc-thumb-card-inline {
        aspect-ratio: 4 / 3;
        max-height: 180px !important;
    }

    .csf-card-inline-body .csf-card-actions-section {
        gap: 4px !important;
    }

    .csf-card-inline-body .csf-card-actions-section .but {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
    }
}

/* ============================================= */
/* 14. PDD 式拼团滚动队列                          */
/* ============================================= */

.csf-gc-queue-wrap {
    margin-top: 8px;
    margin-bottom: 8px;
}

.csf-gc-queue-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 6px;
    font-size: 12.5px;
    color: var(--muted-color, #6b7280);
}

.csf-gc-queue-flame {
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(255, 92, 60, 0.35));
}

.csf-gc-queue-title {
    color: var(--key-color, #1f2937);
    font-weight: 600;
}

.csf-gc-queue-title strong {
    color: #ff4d6d;
    font-weight: 800;
    font-size: 14px;
    margin: 0 1px;
}

.csf-gc-queue-hint {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--muted-2-color, #9ca3af);
}

.csf-gc-queue {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dark-theme .csf-gc-queue {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 同屏 1 条 × 单条 44px；逐条滚动，前后无缝 */
.csf-gc-queue-scrolling {
    height: 44px;
}

.csf-gc-queue-track {
    display: flex;
    flex-direction: column;
}

/* 滚动由 JS 定时器驱动（逐条 transition），此处仅保留 GPU 提示 */
.csf-gc-queue-scrolling .csf-gc-queue-track {
    will-change: transform;
}

.csf-gc-queue-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background-color 0.15s ease;
}

.csf-gc-queue-item:last-child {
    border-bottom: none;
}

.csf-gc-queue-item:hover {
    background: rgba(255, 102, 0, 0.04);
}

.dark-theme .csf-gc-queue-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.csf-gc-q-av {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    background: #f5f5f5;
}

.csf-gc-q-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csf-gc-q-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1.25;
}

.csf-gc-q-name {
    font-size: 13px;
    color: var(--key-color, #222);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csf-gc-q-meta {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

.csf-gc-q-need em {
    font-style: normal;
    color: #ff4d6d;
    font-weight: 700;
}

.csf-gc-q-dot {
    color: var(--muted-2-color, #9ca3af);
}

.csf-gc-q-time {
    flex: 0 0 auto;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: #ff4d00;
    font-weight: 600;
    min-width: auto;
    text-align: center;
    padding: 0;
    background: none;
    border: none;
    letter-spacing: -0.3px;
}

.csf-gc-q-time.csf-countdown-ended {
    color: #ccc;
}

.csf-gc-q-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: opacity 0.15s ease;
}

.csf-gc-q-btn-join {
    background: linear-gradient(180deg, #ff6a00, #ff4400) !important;
    color: #fff !important;
    box-shadow: none;
}

.csf-gc-q-btn-join:hover {
    opacity: 0.88;
}

.csf-gc-q-btn-joined {
    background: rgba(82, 196, 26, 0.1) !important;
    color: #52c41a !important;
    border: 1px solid rgba(82, 196, 26, 0.25);
}

.csf-gc-q-btn-joined:hover {
    background: rgba(82, 196, 26, 0.18) !important;
}

/* 主信息区紧凑化（与队列一起出现时缩缩略图，让队列有空间） */
.csf-gc-queue-wrap ~ .csf-gc-actions {
    margin-top: 8px;
}

/* 队列模式下，缩略图布局收缩——只保留紧凑的"图+价"表头 */
.csf-gc-group-layout:has(+ .csf-gc-queue-wrap) {
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.csf-gc-group-layout:has(+ .csf-gc-queue-wrap) .csf-gc-thumb {
    width: 96px;
    height: 96px;
    align-self: center;
    border-radius: 8px;
}

.csf-gc-group-layout:has(+ .csf-gc-queue-wrap) .csf-gc-group-info {
    padding: 0;
    gap: 4px;
    justify-content: center;
}

.csf-gc-group-layout:has(+ .csf-gc-queue-wrap) .csf-gc-price {
    justify-content: flex-start;
    padding: 0;
}

.csf-gc-group-layout:has(+ .csf-gc-queue-wrap) .csf-gc-price-hint {
    text-align: left;
    margin-bottom: 0;
}

/* 缩略图模式下，队列出现时把信息区主价格往左压实 */
.csf-gc-group-info:has(+ .csf-gc-queue-wrap),
.csf-gc-group-layout:has(.csf-gc-queue-wrap) .csf-gc-group-info {
    gap: 2px;
}

/* ============================================= */
/* 左右布局：缩略图+价格 | 拼团队列              */
/* 当面板内同时存在 group-layout 与 queue-wrap   */
/* 时，把 layout 放到左列、queue 放到右列         */
/* ============================================= */
.csf-gc-panel[data-panel="group"].active:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 14px;
    row-gap: 10px;
    align-items: stretch;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-group-layout {
    grid-column: 1;
    align-self: center;
    margin-bottom: 0;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-queue-wrap {
    grid-column: 2;
    align-self: stretch;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-queue-wrap .csf-gc-queue {
    flex: none;
}

/* 队列在右列时，保持固定高度以确保 overflow:hidden + translateY 滚动正常 */
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) .csf-gc-queue-scrolling {
    height: 44px;
}

/* 队列两列布局下：操作行与底部 start-row 也并入右列，与队列垂直堆叠；左列缩略图跨行居中 */
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row,
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-actions {
    grid-column: 2;
    margin-top: 0;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-group-layout {
    grid-row: 1 / span 3;
    align-self: center;
}

/* 右列宽度有限，让沟通方式表单优先占据剩余空间，按钮固定宽度收紧 */
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row .csf-group-start-form {
    flex: 1 1 auto;
    min-width: 0;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row .csf-group-start-form-field {
    min-width: 0;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row .csf-group-row-btn,
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact {
    flex: 0 0 120px;
    width: 120px;
    min-width: 120px;
}

/* ============================================= */
/* 左右布局：空团状态（无活跃团购时）              */
/* ============================================= */
.csf-gc-panel[data-panel="group"].active:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: 1fr auto;
    column-gap: 16px;
    row-gap: 14px;
    align-items: stretch;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-group-layout {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    margin-bottom: 0;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-empty-wrap {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: stretch;
}

/* 右列空状态卡：去除原有左右 margin，撑满右列宽度，加大内边距 */
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-empty-wrap > .csf-gc-empty {
    margin: 0;
    width: 100%;
    padding: 14px 16px;
    gap: 10px;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-empty-wrap .csf-gc-empty-icon {
    font-size: 20px;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-empty-wrap .csf-gc-empty-text {
    font-size: 13px;
}

.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row,
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-footer {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    align-self: end;
}

/* 右列宽度有限，按钮固定宽度收紧 */
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row .csf-group-row-btn,
.csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact {
    flex: 0 0 120px;
    width: 120px;
    min-width: 120px;
}

/* ≤767px 折叠回单列堆叠（与现有 thumb 隐藏行为保持一致） */
@media (max-width: 767px) {
    .csf-gc-panel[data-panel="group"].active:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap),
    .csf-gc-panel[data-panel="group"].active:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) {
        grid-template-columns: minmax(0, 1fr);
    }

    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-group-layout,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-queue-wrap,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-actions,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-group-layout,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-empty-wrap,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-footer {
        grid-column: 1 / -1;
    }

    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-gc-group-layout,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-group-layout,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-empty-wrap,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-gc-footer {
        grid-row: auto;
    }

    /* 清除桌面端的固定宽度，移动端按钮跟随网格自适应 */
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row .csf-group-row-btn,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-empty-wrap) > .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row .csf-group-row-btn,
    .csf-gc-panel[data-panel="group"]:has(> .csf-gc-group-layout):has(> .csf-gc-queue-wrap) > .csf-group-start-row .csf-gc-footer.csf-gc-footer-compact {
        flex: none;
        width: 100%;
        min-width: 0;
    }

    /* 移动端隐藏倒计时，腾出空间给信息+按钮（PDD 移动端同做法） */
    .csf-gc-q-time {
        display: none;
    }
}

/* 响应式：≤640 队列单条紧凑、按钮收紧 */
@media (max-width: 640px) {
    .csf-gc-queue-item {
        gap: 8px;
        padding: 0 10px;
    }

    .csf-gc-q-name {
        font-size: 12px;
    }

    .csf-gc-q-meta {
        font-size: 10.5px;
    }

    .csf-gc-q-time {
        font-size: 11.5px;
        min-width: 60px;
        padding: 2px 4px;
    }

    .csf-gc-q-btn {
        height: 28px;
        padding: 0 10px;
        font-size: 11.5px;
    }

    .csf-gc-queue-hint {
        display: none;
    }
}

/* 极小屏（≤420）：进一步收紧 */
@media (max-width: 420px) {
    .csf-gc-queue-item {
        gap: 6px;
        padding: 0 8px;
    }

    .csf-gc-q-av {
        width: 26px;
        height: 26px;
    }

    .csf-gc-q-time {
        min-width: 54px;
        font-size: 10.5px;
    }

    .csf-gc-q-btn {
        padding: 0 8px;
        font-size: 11px;
        border-radius: 12px;
    }
}