/* Shared member pages: readable cards, long references and narrow-screen forms. */
.reference-mobile-body { line-height: 1.6; }
.reference-mobile-body .mobile-main > * { min-width: 0; }
.reference-mobile-body .back-link { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 8px; line-height: 1.5; }
.reference-mobile-body .process-panel { padding: 16px; }
.reference-mobile-body .process-panel h2 { line-height: 1.5; }
.reference-mobile-body .stack-form { gap: 16px; }
.reference-mobile-body .stack-form > p { margin: 0; color: #52635e; font-size: 14px; line-height: 1.7; }
.reference-mobile-body .stack-form label { gap: 8px; font-size: 14px; }
.reference-mobile-body .stack-form input,
.reference-mobile-body .stack-form select,
.reference-mobile-body .stack-form textarea { min-width: 0; width: 100%; max-width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; background: #fff; border: 1px solid #dce5e2; border-radius: 9px; }
.reference-mobile-body .stack-form textarea { min-height: 112px; resize: vertical; }
.reference-mobile-body .stack-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.reference-mobile-body .stack-form input[type="file"] { font-size: 13px; }
.reference-mobile-body .stack-form .receipt-image-input { min-height: 0 !important; }
.reference-mobile-body .payment-action { min-height: 46px; line-height: 1.5; }
.reference-mobile-body .process-panel > form + form { margin-top: 14px; }
.reference-mobile-body .process-panel > .result-list { margin: 14px 0; }
.reference-mobile-body .result-list > div { gap: 16px; align-items: baseline; flex-wrap: wrap; }
.reference-mobile-body .member-summary-card { padding: 16px; box-shadow: none; }
.member-summary-card > h2 { margin: 0 0 16px; font-size: 18px; line-height: 1.5; }
.member-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.member-card-heading > h2,
.member-card-heading > strong { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.member-status { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 24px; padding: 2px 8px; color: #276c5c; font-size: 12px; line-height: 20px; white-space: nowrap; background: #eaf5f0; border-radius: 6px; }
.member-reference { display: grid; gap: 3px; margin: 12px 0; color: #596b65; font-size: 12px; line-height: 1.65; }
.member-reference > :last-child { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.member-summary-card .listing-price { display: block; margin-top: 16px; padding-top: 14px; color: var(--primary); font-size: 17px; line-height: 1.5; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.member-balance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.member-balance-grid > div { display: grid; gap: 6px; padding: 12px; background: #f1f7f5; border-radius: 10px; }
.member-balance-grid span { color: #52635e; font-size: 13px; }
.member-balance-grid strong { color: var(--primary-dark); font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.member-balance-grid > div:last-child { background: #f8f5ed; }
.member-balance-grid > div:last-child strong { color: #7a6229; }
.member-summary-card .member-help { margin: 12px 0 0; color: #52635e; font-size: 13px; }
.member-records > h2 { margin-bottom: 4px; }
.member-record { padding: 16px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.member-record:last-of-type { padding-bottom: 0; border-bottom: 0; }
.member-record > :first-child { margin-top: 0; }
.member-record > :last-child { margin-bottom: 0; }
.record-change { flex: 0 0 auto; font-size: 19px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.record-change.positive { color: var(--primary); }
.member-record-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: #64756e; font-size: 12px; line-height: 1.7; }
.member-record-formula { margin: 10px 0; color: #52635e; font-size: 13px; }
.member-record-times { display: grid; gap: 5px; margin: 12px 0 0; color: #64756e; font-size: 12px; }
.member-record-times > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
.member-record-times dt,
.member-record-times dd { margin: 0; }
.member-record-link { display: grid; gap: 12px; }
.member-record-link > strong { font-size: 16px; }
.member-record-link .member-reference { margin: 0; }
.member-record-date { color: #64756e; font-size: 12px; }
.member-records .member-empty { margin: 14px 0 0; }
.member-records > .stack-form { margin-top: 18px; }
.reference-mobile-body .workflow-status p,
.reference-mobile-body .process-panel p { overflow-wrap: anywhere; }
.reference-mobile-body .reference-warehouse-list article > header { align-items: flex-start; gap: 12px; }
.reference-warehouse-list article > header strong { flex: 1; min-width: 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.reference-warehouse-list article > header span { flex: 0 0 auto; white-space: nowrap; line-height: 1.6; }
.reference-warehouse-list article > div { grid-template-columns: 76px minmax(0, 1fr); }
.reference-warehouse-list article > footer { gap: 12px; flex-wrap: wrap; }
.reference-warehouse-list footer a { flex-shrink: 0; min-height: 40px; display: inline-flex; align-items: center; }
.reference-order-product { grid-template-columns: 68px minmax(0, 1fr) auto; }
.reference-order-product > div,
.payment-product > div { min-width: 0; }
.reference-order-product p,
.reference-order-product h3,
.payment-product h2 { overflow-wrap: anywhere; }
.reference-order-product > section strong,
.payment-product > strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.reference-order-list > article > footer { flex-wrap: wrap; row-gap: 10px; }
.payment-product { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; padding: 16px; }
.payment-product .order-product-visual { width: 60px; height: 60px; }
.reference-wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reference-wallet-grid a { grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; padding: 10px 8px; }
.reference-wallet-grid a > span { width: 32px; height: 32px; }
.reference-wallet-grid strong { font-size: 17px; overflow-wrap: anywhere; }
.flash-privilege-strip > span { flex: 0 0 auto; white-space: nowrap; }
.flash-product-list > a { grid-template-columns: 66px minmax(0, 1fr) auto; gap: 8px; }
.flash-product-list img { width: 66px; height: 66px; }
.flash-product-list h3 { overflow-wrap: anywhere; }
.reference-mobile-body .mobile-bottom-action { flex: 0 0 auto; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.mobile-bottom-action .sticky-purchase { position: static; width: 100%; gap: 12px; padding: 12px 16px; transform: none; border-radius: 12px; box-shadow: none; }
.mobile-bottom-action .sticky-purchase > div { min-width: 0; }
.mobile-bottom-action .sticky-purchase > a { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.mobile-bottom-action .sticky-purchase > [role="status"] { max-width: 55%; color: #fff; font-size: 13px; }
@media (max-width: 360px) {
    .reference-order-product { grid-template-columns: 60px minmax(0, 1fr); }
    .reference-order-product img { grid-row: 1 / 3; width: 60px; height: 60px; }
    .reference-order-product > section { grid-column: 2; flex-direction: row; gap: 10px; align-items: baseline; }
    .payment-product { grid-template-columns: 54px minmax(0, 1fr); }
    .payment-product .order-product-visual { grid-row: 1 / 3; width: 54px; height: 54px; }
    .payment-product > strong { grid-column: 2; }
    .reference-wallet-grid strong { font-size: 15px; }
    .reference-profile-shortcuts { gap: 8px; }
}