/* ARBOR_INDEX_CSS_EXTERNALIZE_TRIAL_V1
   Source: index.html style block #4
   Original attributes: 
*/
/* ARBOR_HOME_ANN_MODAL_STYLE_V1 */
.feature-ann-tag{
    display:inline-flex;
    align-items:center;
    height:20px;
    padding:0 7px;
    margin-right:7px;
    border-radius:999px;
    background:rgba(0,122,255,.08);
    color:var(--apple-blue, #007AFF);
    font-size:11px;
    font-weight:760;
    vertical-align:1px;
}
.updates-modal .feature-row + .feature-row{
    margin-top:10px;
}
.updates-modal .feature-desc a{
    color:var(--apple-blue, #007AFF);
    text-decoration:none;
    font-weight:700;
}


/* ARBOR_HOME_CAROUSEL_IMAGE_ONLY_V11 */
.arbor-home-carousel-v11{margin:14px 0 18px;}
.arbor-home-carousel-v11 .arbor-home-carousel-viewport{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:var(--ios-card, #ffffff);
    border:1px solid var(--line-light, rgba(60,60,67,.10));
    box-shadow:0 10px 28px rgba(15,23,42,.045);
}
.arbor-home-carousel-v11 .arbor-home-carousel-track{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    background:#f6f7fb;
}
.arbor-home-carousel-v11 .arbor-home-slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .36s ease;
    pointer-events:none;
}
.arbor-home-carousel-v11 .arbor-home-slide.is-active{
    opacity:1;
    pointer-events:auto;
}
.arbor-home-carousel-v11 .arbor-home-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    background:#f6f7fb;
}
.arbor-home-carousel-v11 .arbor-home-carousel-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:10px;
}
.arbor-home-carousel-v11 .arbor-home-carousel-dots button{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(60,60,67,.22);
    transition:width .22s ease, background .22s ease, transform .22s ease;
}
.arbor-home-carousel-v11 .arbor-home-carousel-dots button.is-active{
    width:22px;
    background:var(--apple-blue, #0A84FF);
    transform:translateZ(0);
}
html[data-theme="dark"] .arbor-home-carousel-v11 .arbor-home-carousel-viewport,
body.dark .arbor-home-carousel-v11 .arbor-home-carousel-viewport{box-shadow:none;}
@media(max-width:768px){
    .arbor-home-carousel-v11{margin-top:12px;}
    .arbor-home-carousel-v11 .arbor-home-carousel-viewport{border-radius:24px;}
}


/* ARBOR_HOME_NAV_BADGE_UNREAD_V20 */
.nav-badge{
    display: none !important;
}
.nav-badge.is-visible{
    display: block !important;
}
/* ARBOR_HOME_NAV_BADGE_UNREAD_V20_END */

/* ARBOR_FRONTEND_COMMON_CARD_WIDTH_CLIP_BASE_V1_BEGIN */
:root{
    --arbor-unified-card-max:600px;
    --arbor-unified-shell-max:632px;
    --arbor-unified-side-pad:16px;
    --arbor-unified-radius:24px;
    --arbor-unified-inner-radius:18px;
}

html,
body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    background:var(--ios-bg, #f5f5f7) !important;
}

*,
*::before,
*::after{
    box-sizing:border-box !important;
}

:where(.app-container,.page-shell,.mobile-shell,.wrap,.site-wrap,.container,.main-shell){
    width:100% !important;
    max-width:var(--arbor-unified-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow-x:hidden !important;
}

:where(.page,.main,.content,.main-content){
    width:100% !important;
    max-width:var(--arbor-unified-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--arbor-unified-side-pad) !important;
    padding-right:var(--arbor-unified-side-pad) !important;
}

:where(.nav-bar,.bottom-nav){
    max-width:var(--arbor-unified-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

:where(.section,.cta-area,.bottom-note,.footer-note,.top,.stats,.actions){
    width:100% !important;
    max-width:var(--arbor-unified-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

:where(
    .app-container > .card,
    .app-container > .summary-card,
    .app-container > .hero-card,
    .app-container > .intro-card,
    .app-container > .form-card,
    .app-container > .list-group,
    .app-container > .empty-card,
    .app-container > .empty-state,
    .app-container > .cta-card,
    .app-container > .section,
    .page > .card,
    .page > .summary-card,
    .page > .hero-card,
    .page > .intro-card,
    .page > .form-card,
    .page > .account-card,
    .page > .security-card,
    .page > .asset-card,
    .page > .list-group,
    .page > .empty-card,
    .page > .empty-state,
    .page > .segment-wrap,
    .page > .record-list,
    .page > .section,
    .section > .card,
    .section > .summary-card,
    .section > .hero-card,
    .section > .intro-card,
    .section > .form-card,
    .section > .list-card,
    .section > .list-group,
    .section > .empty-card,
    .section > .empty-state,
    .section > .notice-card,
    .section > .plain-card,
    .section > .cta-card,
    .section > .faq-card,
    .section > .category-card,
    .section > .info-card,
    .section > .textarea-card,
    .section > .record-list,
    .section > .rule-card,
    .section > .compare-card,
    .section > .segment-wrap
){
    width:100% !important;
    max-width:var(--arbor-unified-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

:where(
    .card,
    .summary-card,
    .hero-card,
    .intro-card,
    .form-card,
    .account-card,
    .security-card,
    .asset-card,
    .list-card,
    .list-group,
    .empty-card,
    .empty-state,
    .notice-card,
    .plain-card,
    .cta-card,
    .faq-card,
    .category-card,
    .info-card,
    .textarea-card,
    .rule-card,
    .compare-card,
    .record-list,
    .sheet-group,
    .sheet-text-card
){
    background:var(--ios-card, #fff) !important;
    background-image:none !important;
    border:1px solid var(--line-light, rgba(0,0,0,.06)) !important;
    border-radius:var(--arbor-unified-radius) !important;
    box-shadow:0 2px 12px rgba(0,0,0,.022) !important;
}

html[data-theme="dark"] :where(
    .card,
    .summary-card,
    .hero-card,
    .intro-card,
    .form-card,
    .account-card,
    .security-card,
    .asset-card,
    .list-card,
    .list-group,
    .empty-card,
    .empty-state,
    .notice-card,
    .plain-card,
    .cta-card,
    .faq-card,
    .category-card,
    .info-card,
    .textarea-card,
    .rule-card,
    .compare-card,
    .record-list,
    .sheet-group,
    .sheet-text-card
){
    background:var(--ios-card, #1c1c1e) !important;
    background-image:none !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
}

:where(
    .item-content,
    .list-main,
    .list-title-wrap,
    .asset-main,
    .detail-main,
    .summary-main,
    .info-main,
    .form-main,
    .field-main,
    .modal-main,
    .card-main,
    .text-main,
    .content-main
){
    min-width:0 !important;
    max-width:100% !important;
}

:where(
    .item-title,
    .item-desc,
    .list-title,
    .list-desc,
    .list-summary-text,
    .summary-title,
    .summary-desc,
    .hero-title,
    .hero-desc,
    .intro-title,
    .intro-desc,
    .section-title,
    .section-sub,
    .section-note,
    .card-title,
    .card-desc,
    .notice-title,
    .notice-text,
    .plain-title,
    .plain-text,
    .faq-question,
    .faq-answer,
    .empty-title,
    .empty-desc,
    .field-label,
    .field-value,
    .asset-label,
    .asset-desc,
    .asset-value,
    .detail-label,
    .detail-value,
    .summary-label,
    .summary-value,
    .info-label,
    .info-value,
    .meta-name,
    .meta-value,
    .price-label,
    .price-value,
    .price-sub,
    .form-label,
    .label-hint,
    .inline-help,
    .inline-error,
    .modal-title,
    .modal-sub,
    .sheet-title,
    .sheet-sub,
    .sheet-label,
    .sheet-value,
    .sheet-text
){
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-overflow:clip !important;
}

:where(
    .item-title,
    .item-desc,
    .list-title,
    .list-desc,
    .summary-title,
    .summary-desc,
    .hero-title,
    .hero-desc,
    .section-title,
    .section-sub,
    .section-note,
    .card-title,
    .card-desc,
    .empty-title,
    .empty-desc
){
    overflow:visible !important;
}

:where(
    .list-item,
    .asset-row,
    .detail-row,
    .summary-row,
    .info-row,
    .meta-row,
    .form-row,
    .account-field,
    .security-row,
    .result-row,
    .sheet-row,
    .modal-row,
    .choice-item,
    .target-card,
    .upload-item,
    .preview-item,
    .mode-card,
    .right-mini,
    .quick-item,
    .stat,
    .benefit-row
){
    min-width:0 !important;
    max-width:100% !important;
}

:where(
    input,
    textarea,
    select,
    button,
    img,
    svg,
    video,
    canvas
){
    max-width:100% !important;
}

:where(.form-input,.input,.textarea,textarea,input,select){
    min-width:0 !important;
    width:100% !important;
}

:where(.primary,.btn,.btn-main,.btn-primary,.primary-btn,.modal-btn,.modal-btn-main,.sheet-btn-main,.cta-btn,.empty-btn){
    max-width:100% !important;
}

:where(.pill,.status-badge,.status-text,.tag,.badge,.nav-action,.nav-right,.list-side,.item-right,.asset-value,.detail-value,.summary-value){
    flex-shrink:0;
}

@media (max-width:420px){
    :where(.page,.main,.content,.main-content){
        padding-left:14px !important;
        padding-right:14px !important;
    }

    :where(.section,.cta-area,.bottom-note,.footer-note){
        max-width:100% !important;
    }

    :where(.summary-title,.hero-title,.intro-title){
        font-size:min(28px, 7.2vw) !important;
        line-height:1.16 !important;
    }

    :where(.list-item,.asset-row,.detail-row,.summary-row,.info-row,.meta-row,.security-row){
        align-items:flex-start !important;
    }
}
/* ARBOR_FRONTEND_COMMON_CARD_WIDTH_CLIP_BASE_V1_END */


/* ARBOR_FRONTEND_SPACING_ONLY_PRESERVE_GRID_V3_BEGIN */
:root{
    --arbor-spacing-shell-max:632px;
    --arbor-spacing-card-max:600px;
    --arbor-spacing-side:16px;
}

/*
 * This layer intentionally preserves original multi-card grids.
 * Do not convert .arbor-path-grid-v5 / .choice-grid / .mode-grid into single column.
 */

html,
body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
}

body .app-container,
body .page-shell,
body .mobile-shell,
body .wrap,
body .site-wrap,
body .container,
body .main-shell{
    width:100% !important;
    max-width:var(--arbor-spacing-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow-x:hidden !important;
}

body .nav-bar,
body .bottom-nav{
    width:100% !important;
    max-width:var(--arbor-spacing-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

body .page,
body .main,
body .content,
body .main-content{
    width:100% !important;
    max-width:var(--arbor-spacing-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--arbor-spacing-side) !important;
    padding-right:var(--arbor-spacing-side) !important;
    overflow-x:hidden !important;
}

/* Hero / carousel outer rhythm */
body .arbor-home-carousel-v11,
body .shop-hero-card-section-p112,
body .cooperate-hero-poster-section-p112{
    width:100% !important;
    max-width:var(--arbor-spacing-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--arbor-spacing-side) !important;
    padding-right:var(--arbor-spacing-side) !important;
    box-sizing:border-box !important;
}

body .arbor-home-carousel-viewport,
body .shop-hero-card-p112,
body .cooperate-hero-poster-card-p112{
    width:100% !important;
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* General section rhythm: same side margin feel as me.html */
body .section,
body .cta-area,
body .bottom-note,
body .footer-note,
body .arbor-path-section-v5,
body .shop-section,
body .cooperate-section,
body .balance-section,
body .check-section,
body .verify-section,
body .confirm-section,
body .detail-section{
    width:100% !important;
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

body .section{
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Preserve original index 3-card row, but place the entire row inside me.html-like side spacing */
body .arbor-path-grid-v5{
    width:100% !important;
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
}

body .arbor-path-card-v5{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

/* Preserve original shop 2-card rows */
body .choice-grid{
    width:100% !important;
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
}

body .choice-item{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

/* Preserve original cooperate 2-card rows */
body .mode-grid{
    width:100% !important;
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
}

body .mode-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

/* Other card groups keep their original columns where possible; only constrain group width */
body .advanced-grid,
body .preview-grid,
body .metric-grid,
body .recharge-grid,
body .reason-grid,
body .upload-grid,
body .rights-grid,
body .quick-grid,
body .entry-grid,
body .service-grid,
body .benefit-grid,
body .category-grid,
body .option-grid,
body .scenario-grid,
body .product-grid,
body .cards-grid,
body .stats-grid,
body .feature-grid,
body .target-grid,
body .package-grid,
body .coupon-grid,
body .grid-2,
body .grid-3{
    width:100% !important;
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* Card items: keep existing layout, only prevent overflow and clipping */
body .arbor-path-card-v5,
body .choice-item,
body .mode-card,
body .advanced-item,
body .preview-item,
body .metric-item,
body .meta-item,
body .pay-item,
body .reason-item,
body .upload-item,
body .right-mini,
body .quick-item,
body .quick-card,
body .entry-card,
body .service-card,
body .benefit-card,
body .category-card,
body .option-card,
body .scenario-card,
body .product-card,
body .target-card,
body .package-card,
body .coupon-card,
body .stat,
body .stat-card,
body .feature-card{
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Single full-width cards keep me.html-like width */
body .card,
body .summary-card,
body .hero-card,
body .intro-card,
body .form-card,
body .account-card,
body .security-card,
body .asset-card,
body .list-card,
body .list-group,
body .empty-card,
body .empty-state,
body .notice-card,
body .plain-card,
body .cta-card,
body .faq-card,
body .info-card,
body .textarea-card,
body .rule-card,
body .compare-card,
body .record-list,
body .sheet-group,
body .sheet-text-card{
    max-width:var(--arbor-spacing-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* Anti clipping: text content can wrap, but no grid conversion */
body .item-content,
body .list-main,
body .list-title-wrap,
body .asset-main,
body .detail-main,
body .summary-main,
body .info-main,
body .form-main,
body .field-main,
body .modal-main,
body .card-main,
body .text-main,
body .content-main,
body .recommend-title-wrap,
body .section-title-row{
    min-width:0 !important;
    max-width:100% !important;
}

body .item-title,
body .item-desc,
body .list-title,
body .list-desc,
body .list-summary-text,
body .summary-title,
body .summary-desc,
body .hero-title,
body .hero-desc,
body .intro-title,
body .intro-desc,
body .section-title,
body .section-sub,
body .section-note,
body .card-title,
body .card-desc,
body .notice-title,
body .notice-text,
body .plain-title,
body .plain-text,
body .faq-question,
body .faq-answer,
body .empty-title,
body .empty-desc,
body .field-label,
body .field-value,
body .asset-label,
body .asset-desc,
body .asset-value,
body .detail-label,
body .detail-value,
body .summary-label,
body .summary-value,
body .info-label,
body .info-value,
body .meta-name,
body .meta-value,
body .price-label,
body .price-value,
body .price-sub,
body .form-label,
body .label-hint,
body .inline-help,
body .inline-error,
body .modal-title,
body .modal-sub,
body .sheet-title,
body .sheet-sub,
body .sheet-label,
body .sheet-value,
body .sheet-text,
body .recommend-title,
body .recommend-body,
body .recommend-desc,
body .details-content{
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-overflow:clip !important;
}

/* Icons/images must not push card width */
body img,
body svg,
body video,
body canvas{
    max-width:100% !important;
}

body input,
body textarea,
body select{
    max-width:100% !important;
    min-width:0 !important;
}

/* Mobile keeps original one-row card count, with the same side margin as me.html */
@media (max-width:420px){
    body .page,
    body .main,
    body .content,
    body .main-content,
    body .arbor-home-carousel-v11,
    body .shop-hero-card-section-p112,
    body .cooperate-hero-poster-section-p112{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    body .arbor-path-section-v5,
    body .section,
    body .shop-section,
    body .cooperate-section,
    body .balance-section,
    body .check-section,
    body .verify-section,
    body .confirm-section,
    body .detail-section{
        width:100% !important;
        max-width:var(--arbor-spacing-card-max) !important;
    }

    body .arbor-path-grid-v5{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:10px !important;
    }

    body .choice-grid,
    body .mode-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
    }
}
/* ARBOR_FRONTEND_SPACING_ONLY_PRESERVE_GRID_V3_END */


/* ARBOR_FRONTEND_EDGE_INSET_SPACING_FIX_V4_BEGIN */
:root{
    --arbor-edge-inset:16px;
    --arbor-edge-width:calc(100% - 32px);
    --arbor-edge-card-max:600px;
    --arbor-edge-shell-max:632px;
}

/*
 * Edge inset fix:
 * Keep original grid columns. Only pull escaped full-width modules inward.
 * Do NOT use grid-template-columns:1fr here.
 */

html,
body{
    overflow-x:hidden !important;
}

/* Keep shell centered but don't rely on max-width alone for mobile spacing */
body .app-container,
body .page-shell,
body .mobile-shell,
body .wrap,
body .site-wrap,
body .container,
body .main-shell{
    width:100% !important;
    max-width:var(--arbor-edge-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow-x:hidden !important;
}

/* Page content should have the same side breathing as me.html */
body .page,
body .main,
body .content,
body .main-content{
    width:100% !important;
    max-width:var(--arbor-edge-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--arbor-edge-inset) !important;
    padding-right:var(--arbor-edge-inset) !important;
    overflow-x:hidden !important;
}

/*
 * Top visual cards already looked close, but these guarantee the visible card itself
 * uses the same inset rhythm instead of edge-to-edge wrappers.
 */
body .arbor-home-carousel-v11,
body .shop-hero-card-section-p112,
body .cooperate-hero-poster-section-p112{
    width:100% !important;
    max-width:var(--arbor-edge-shell-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--arbor-edge-inset) !important;
    padding-right:var(--arbor-edge-inset) !important;
    box-sizing:border-box !important;
}

body .arbor-home-carousel-viewport,
body .shop-hero-card-p112,
body .cooperate-hero-poster-card-p112{
    width:100% !important;
    max-width:var(--arbor-edge-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/*
 * These are the modules visible in your screenshots.
 * Their wrappers were still using the full viewport width.
 */
body .arbor-path-section-v5,
body .arbor-path-head-v5,
body .arbor-path-header-v5,
body .arbor-path-title-row-v5,
body .arbor-path-grid-v5,
body .shop-section,
body .shop-section-head,
body .shop-section-header,
body .shop-title-row,
body .shop-tabs,
body .shop-tabbar,
body .shop-tab-wrap,
body .shop-segment,
body .shop-segment-wrap,
body .shop-filter-tabs,
body .choice-grid,
body .cooperate-section,
body .cooperate-section-head,
body .cooperate-section-header,
body .cooperate-title-row,
body .mode-grid,
body .cooperate-mode-grid,
body .cooperate-mode-section,
body .segment-wrap,
body .tabs,
body .tabbar,
body .tab-wrap,
body .tab-section{
    width:var(--arbor-edge-width) !important;
    max-width:var(--arbor-edge-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* Preserve original row counts, only constrain the group width */
body .arbor-path-grid-v5{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:10px !important;
}

body .choice-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
}

body .mode-grid,
body .cooperate-mode-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
}

/* Cards inside the preserved grids must not overflow their column */
body .arbor-path-card-v5,
body .choice-item,
body .mode-card,
body .cooperate-mode-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

/*
 * Generic escaped sections: only wrappers, not grid columns.
 * This helps pages with section blocks outside .page padding.
 */
body .section,
body .section-wrap,
body .section-block,
body .section-group,
body .section-panel,
body .section-list,
body .section-grid,
body .section-body,
body .section-title-row,
body .section-header,
body .section-head,
body .title-row,
body .filter-row,
body .toolbar-row,
body .cta-area,
body .bottom-note,
body .footer-note{
    max-width:var(--arbor-edge-card-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
}

/* If these section wrappers are direct edge-level blocks, give them actual side inset. */
body > .section,
body .app-container > .section,
body .page-shell > .section,
body .mobile-shell > .section,
body .app-container > .section-head,
body .app-container > .section-title-row,
body .app-container > .title-row{
    width:var(--arbor-edge-width) !important;
}

/* Text clipping guard remains, but it does not alter column count. */
body .item-content,
body .list-main,
body .list-title-wrap,
body .asset-main,
body .detail-main,
body .summary-main,
body .info-main,
body .form-main,
body .field-main,
body .modal-main,
body .card-main,
body .text-main,
body .content-main,
body .recommend-title-wrap{
    min-width:0 !important;
    max-width:100% !important;
}

body .item-title,
body .item-desc,
body .list-title,
body .list-desc,
body .summary-title,
body .summary-desc,
body .hero-title,
body .hero-desc,
body .section-title,
body .section-sub,
body .section-note,
body .card-title,
body .card-desc,
body .plain-title,
body .plain-text,
body .empty-title,
body .empty-desc,
body .field-label,
body .field-value,
body .asset-label,
body .asset-desc,
body .asset-value,
body .detail-label,
body .detail-value,
body .summary-label,
body .summary-value,
body .info-label,
body .info-value,
body .meta-name,
body .meta-value,
body .price-label,
body .price-value,
body .price-sub,
body .form-label,
body .label-hint,
body .inline-help,
body .inline-error,
body .modal-title,
body .modal-sub,
body .sheet-title,
body .sheet-sub,
body .sheet-label,
body .sheet-value,
body .sheet-text,
body .recommend-title,
body .recommend-body,
body .recommend-desc{
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-overflow:clip !important;
}

body img,
body svg,
body video,
body canvas{
    max-width:100% !important;
}

@media (max-width:420px){
    body .arbor-path-section-v5,
    body .arbor-path-head-v5,
    body .arbor-path-header-v5,
    body .arbor-path-title-row-v5,
    body .arbor-path-grid-v5,
    body .shop-section,
    body .shop-section-head,
    body .shop-section-header,
    body .shop-title-row,
    body .shop-tabs,
    body .shop-tabbar,
    body .shop-tab-wrap,
    body .shop-segment,
    body .shop-segment-wrap,
    body .shop-filter-tabs,
    body .choice-grid,
    body .cooperate-section,
    body .cooperate-section-head,
    body .cooperate-section-header,
    body .cooperate-title-row,
    body .mode-grid,
    body .cooperate-mode-grid,
    body .cooperate-mode-section,
    body .segment-wrap,
    body .tabs,
    body .tabbar,
    body .tab-wrap,
    body .tab-section{
        width:var(--arbor-edge-width) !important;
        max-width:var(--arbor-edge-card-max) !important;
    }

    body .arbor-path-grid-v5{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    }

    body .choice-grid,
    body .mode-grid,
    body .cooperate-mode-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}
/* ARBOR_FRONTEND_EDGE_INSET_SPACING_FIX_V4_END */

/* ARBOR_FRONTEND_FAQ_SUBSCRIPTION_UNIFY_V2_CSS_BEGIN */
/* 基础：只作用于前台 HTML，保持现有业务结构，不改接口、不改商品 code、不改价格 */
:root{
    --arbor-v2-card-radius:24px;
    --arbor-v2-inner-radius:18px;
    --arbor-v2-side:16px;
    --arbor-v2-title:15px;
    --arbor-v2-body:13px;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue",Arial,sans-serif !important;
    color:var(--text-main) !important;
    background:var(--ios-bg) !important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* 卡片、文字、留白：做最后收口层，避免页面之间粗细和留白漂移 */
:where(.card,.summary-card,.hero-card,.intro-card,.form-card,.account-card,.security-card,.asset-card,.list-card,.list-group,.empty-card,.empty-state,.notice-card,.plain-card,.cta-card,.faq-card,.info-card,.textarea-card,.rule-card,.compare-card,.record-list,.sheet-group,.sheet-text-card,.service-card,.save-card,.detail-card,.subscription-card){
    background:var(--ios-card) !important;
    border:1px solid var(--line-light) !important;
    border-radius:var(--arbor-v2-card-radius) !important;
    box-shadow:0 2px 12px rgba(0,0,0,.022) !important;
}
html[data-theme="dark"] :where(.card,.summary-card,.hero-card,.intro-card,.form-card,.account-card,.security-card,.asset-card,.list-card,.list-group,.empty-card,.empty-state,.notice-card,.plain-card,.cta-card,.faq-card,.info-card,.textarea-card,.rule-card,.compare-card,.record-list,.sheet-group,.sheet-text-card,.service-card,.save-card,.detail-card,.subscription-card){
    box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
}

:where(.section-title,.card-title,.group-title,.list-title,.coupon-name,.security-title,.linked-title,.active-title,.service-title,.fold-title,.compare-title,.rule-title){
    font-size:15px !important;
    line-height:1.36 !important;
    font-weight:740 !important;
    letter-spacing:-.14px !important;
    color:var(--text-main) !important;
}
:where(.card-desc,.list-desc,.coupon-meta,.security-desc,.linked-summary,.active-summary,.sheet-sub,.summary-desc,.hero-desc,.account-note,.password-note,.compare-desc,.rule-item,.details-content,.fold-summary,.fold-sub){
    font-size:13px !important;
    line-height:1.58 !important;
    font-weight:400 !important;
    color:var(--text-sub) !important;
}

/* 统一折叠：凡是 FAQ / fold / details 都尽量按 faq.html 的结构和手感显示 */
:where(.faq-card){
    padding:0 18px !important;
    overflow:hidden !important;
}

:where(.faq-item,.fold-item,details){
    border-bottom:.5px solid var(--separator) !important;
    background:transparent !important;
    box-shadow:none !important;
}
:where(.faq-item:last-child,.fold-item:last-child,details:last-child,details:last-of-type){
    border-bottom:none !important;
}

:where(.faq-question,.fold-head,summary){
    width:100% !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:18px 0 !important;
    margin:0 !important;
    list-style:none !important;
    text-align:left !important;
    cursor:pointer !important;
    color:var(--text-main) !important;
    font-size:15px !important;
    line-height:1.4 !important;
    font-weight:700 !important;
    letter-spacing:-.12px !important;
    background:transparent !important;
    border:none !important;
}
summary::-webkit-details-marker{display:none !important;}

:where(.faq-question > span,.fold-head > div,.fold-title,summary > span){
    min-width:0 !important;
}

:where(.faq-icon,.faq-question svg){
    width:18px !important;
    height:18px !important;
    color:var(--text-sub) !important;
    flex-shrink:0 !important;
    transition:transform .2s ease,color .2s ease !important;
}
:where(.faq-item.active,.faq-item.open) :where(.faq-icon,.faq-question svg){
    transform:rotate(180deg) !important;
    color:var(--apple-blue) !important;
}
:where(.faq-item.active,.faq-item.open) .faq-question{
    color:var(--apple-blue) !important;
}

:where(.faq-answer,.fold-body,.details-content){
    font-size:13px !important;
    color:var(--text-sub) !important;
    line-height:1.62 !important;
}
:where(.faq-answer){
    display:block !important;
    max-height:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    padding:0 !important;
    transition:max-height .28s ease,padding .28s ease,opacity .28s ease !important;
}
:where(.faq-item.active,.faq-item.open) .faq-answer{
    max-height:520px !important;
    padding:0 0 18px !important;
    opacity:1 !important;
}

:where(.fold-card){
    overflow:hidden !important;
}
:where(.fold-card .fold-head){
    padding:18px !important;
}
:where(.fold-card .fold-body){
    display:none !important;
    padding:0 18px 18px !important;
    border-top:0 !important;
    margin-top:0 !important;
}
:where(.fold-card.open .fold-body,.fold-item.open > .fold-body){
    display:block !important;
}
:where(.fold-toggle){
    color:var(--text-sub) !important;
    font-size:0 !important;
    width:18px !important;
    height:18px !important;
    flex-shrink:0 !important;
    position:relative !important;
}
:where(.fold-toggle)::after{
    content:"⌄" !important;
    font-size:18px !important;
    line-height:18px !important;
    color:var(--text-sub) !important;
    display:block !important;
    transition:transform .2s ease,color .2s ease !important;
}
:where(.fold-card.open,.fold-item.open) :where(.fold-toggle)::after{
    transform:rotate(180deg) !important;
    color:var(--apple-blue) !important;
}

:where(details){
    padding:0 18px !important;
}
:where(details > summary)::after{
    content:"⌄" !important;
    width:18px !important;
    height:18px !important;
    line-height:18px !important;
    text-align:center !important;
    color:var(--text-sub) !important;
    font-size:18px !important;
    font-weight:500 !important;
    flex-shrink:0 !important;
    transition:transform .2s ease,color .2s ease !important;
}
:where(details[open] > summary){
    color:var(--apple-blue) !important;
}
:where(details[open] > summary)::after{
    transform:rotate(180deg) !important;
    color:var(--apple-blue) !important;
}
:where(details > .details-content){
    padding:0 0 18px !important;
}

/* shop 等局部“展开详情”按钮也降成 FAQ 手感，不再像外来胶囊按钮 */
:where(.detail-toggle,.guide-toggle){
    width:100% !important;
    min-height:0 !important;
    padding:16px 18px !important;
    border:1px solid var(--line-light) !important;
    border-radius:var(--arbor-v2-inner-radius) !important;
    background:var(--ios-card) !important;
    color:var(--text-main) !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    box-shadow:none !important;
}
:where(.detail-toggle span:last-child,.guide-toggle span:last-child){
    color:var(--text-sub) !important;
    font-size:13px !important;
    font-weight:650 !important;
}

/* subscription.html 定点修正：取消突兀圆圈/胶囊感，回到全站白卡 + 普通文字层级 */
.subscription-p3-visual-v3 .hero-label,
.subscription-p3-visual-v3 .card-kicker,
.subscription-p3-visual-v3 .sub-kicker{
    display:block !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 0 9px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--apple-blue) !important;
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:720 !important;
    letter-spacing:0 !important;
}
.subscription-p3-visual-v3 .hero-status,
.subscription-p3-visual-v3 .status-badge,
.subscription-p3-visual-v3 .sub-status,
.subscription-p3-visual-v3 .pill,
.subscription-p3-visual-v3 .badge{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:var(--text-sub) !important;
    font-size:12px !important;
    line-height:1.35 !important;
    font-weight:680 !important;
    white-space:normal !important;
}
.subscription-p3-visual-v3 .hero-status.active,
.subscription-p3-visual-v3 .status-badge.green,
.subscription-p3-visual-v3 .sub-status.green,
.subscription-p3-visual-v3 .pill.green,
.subscription-p3-visual-v3 .badge.green{
    background:transparent !important;
    color:var(--apple-green) !important;
}
.subscription-p3-visual-v3 .hero-title,
.subscription-p3-visual-v3 .main-title,
.subscription-p3-visual-v3 .subscription-title{
    font-size:26px !important;
    line-height:1.14 !important;
    font-weight:800 !important;
    letter-spacing:-.68px !important;
    color:var(--text-main) !important;
}
.subscription-p3-visual-v3 .hero-card{
    padding:22px 20px 18px !important;
    background:var(--ios-card) !important;
    background-image:none !important;
}
.subscription-p3-visual-v3 .price-card{
    border-radius:18px !important;
    background:var(--soft-card) !important;
    border:1px solid var(--line-light) !important;
    box-shadow:none !important;
}
.subscription-p3-visual-v3 .btn-primary,
.subscription-p3-visual-v3 .primary-btn,
.subscription-p3-visual-v3 .main-btn,
.subscription-p3-visual-v3 button.primary{
    border-radius:15px !important;
    min-height:44px !important;
    height:44px !important;
    padding:0 18px !important;
    background:var(--apple-blue) !important;
    border:1px solid var(--apple-blue) !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:720 !important;
    box-shadow:none !important;
}
.subscription-p3-visual-v3 .right-mini,
.subscription-p3-visual-v3 .benefit-card,
.subscription-p3-visual-v3 .compare-box{
    border-radius:18px !important;
    background:var(--soft-card) !important;
    background-image:none !important;
    border:1px solid var(--line-light) !important;
    box-shadow:none !important;
}
.subscription-p3-visual-v3 .right-number,
.subscription-p3-visual-v3 .right-number.blue,
.subscription-p3-visual-v3 .right-number.green,
.subscription-p3-visual-v3 .metric-number,
.subscription-p3-visual-v3 .count-number{
    color:var(--text-main) !important;
    font-size:19px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    letter-spacing:-.28px !important;
}
.subscription-p3-visual-v3 .list-side,
.subscription-p3-visual-v3 .list-side.green,
.subscription-p3-visual-v3 .list-side.blue,
.subscription-p3-visual-v3 .list-side.link,
.subscription-p3-visual-v3 .guide-result,
.subscription-p3-visual-v3 .guide-tag{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--apple-blue) !important;
    font-size:12px !important;
    font-weight:720 !important;
    box-shadow:none !important;
    padding-top:1px !important;
}
.subscription-p3-visual-v3 .list-card,
.subscription-p3-visual-v3 .compare-card,
.subscription-p3-visual-v3 .rule-card,
.subscription-p3-visual-v3 .record-list{
    border-radius:24px !important;
    background:var(--ios-card) !important;
    background-image:none !important;
}
.subscription-p3-visual-v3 .section-title{
    font-size:17px !important;
    line-height:1.28 !important;
    font-weight:760 !important;
    letter-spacing:-.22px !important;
}

@media (max-width:390px){
    .subscription-p3-visual-v3 .hero-title,
    .subscription-p3-visual-v3 .main-title,
    .subscription-p3-visual-v3 .subscription-title{
        font-size:25px !important;
    }
}
@media (max-width:360px){
    .subscription-p3-visual-v3 .price-card{
        grid-template-columns:1fr !important;
    }
    .subscription-p3-visual-v3 .btn-primary{
        width:100% !important;
    }
}
/* ARBOR_FRONTEND_FAQ_SUBSCRIPTION_UNIFY_V2_CSS_END */

/* ARBOR_FRONTEND_FAQ_ARROW_UNIFY_V3_CSS_BEGIN */
/*
 * Purpose: after v2 unified accordion cards, force every accordion arrow to the same FAQ-style chevron.
 * Scope: front HTML only. No business logic, no api.js, no admin page mutation.
 */
body :where(.faq-question,.fold-head,details > summary){
    position:relative !important;
}

/* Hide mixed historical arrow implementations: inline svg, text glyphs, fold-toggle spans. */
body :where(.faq-icon,.faq-arrow,.accordion-arrow,.collapse-arrow,.toggle-arrow,.question-arrow,.fold-toggle),
body :where(.faq-question,.fold-head,details > summary) > svg:last-child{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

/* Replace all arrows with one CSS-drawn chevron, matching faq.html size and motion. */
body :where(.faq-question,.fold-head,details > summary)::after{
    content:"" !important;
    display:block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    flex:0 0 8px !important;
    margin-left:auto !important;
    border:0 !important;
    border-right:1.8px solid var(--text-sub) !important;
    border-bottom:1.8px solid var(--text-sub) !important;
    border-radius:1px !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:rotate(45deg) !important;
    transform-origin:50% 50% !important;
    transition:transform .2s ease,border-color .2s ease !important;
}

body :where(.faq-item.active,.faq-item.open) > .faq-question,
body :where(.fold-card.open,.fold-item.open) > .fold-head,
body details[open] > summary{
    color:var(--apple-blue) !important;
}

body :where(.faq-item.active,.faq-item.open) > .faq-question::after,
body :where(.fold-card.open,.fold-item.open) > .fold-head::after,
body details[open] > summary::after{
    border-right-color:var(--apple-blue) !important;
    border-bottom-color:var(--apple-blue) !important;
    transform:rotate(225deg) !important;
}

/* Keep spacing stable when a summary contains plain text instead of a span. */
body :where(.faq-question,.fold-head,details > summary){
    padding-right:2px !important;
}
/* ARBOR_FRONTEND_FAQ_ARROW_UNIFY_V3_CSS_END */