.member-screen { background:#fff; }
.member-page { max-width:none; min-height:100dvh; background:#fff; }
.member-shell { min-height:calc(100dvh - 80px); }
.member-screen .store-content { background:#fff; }
.member-subnav { display:flex; flex-direction:column; gap:4px; }
.member-subnav a { padding:10px 12px; font-size:13px; border-radius:6px; color:#4e6155; }
.member-subnav a[aria-current] { background:#d9e9df; color:var(--primary-dark); font-weight:600; }
.member-main { min-width:0; }
.member-order-filters { display:flex; gap:6px; padding:16px 32px 0; overflow-x:auto; }
.member-order-filters a { flex-shrink:0; padding:8px 12px; font-size:13px; border-radius:6px; color:#657169; }
.member-order-filters a:hover { background:#edf4f0; }
.member-order-filters a[aria-current] { background:#d9e9df; color:var(--primary-dark); font-weight:600; }
.member-header { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:100px; padding:20px 32px; border-bottom:1px solid #e7ebe8; }
.member-header small { color:#758078; font-size:12px; }
.member-header h1 { font-size:22px; line-height:1.4; margin:4px 0 0; }
.member-logout { display:inline-flex; align-items:center; gap:7px; padding:8px 0 8px 8px; color:#7b807c; font-size:13px; white-space:nowrap; }
.member-view { padding:28px 32px 40px; min-width:0; }
.member-view h2 { font-size:16px; margin:0; font-weight:600; }
.member-identity { display:flex; align-items:center; gap:14px; padding-bottom:26px; }
.member-picture { display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#e5efe8; color:var(--primary); font-size:24px; font-weight:600; flex-shrink:0; overflow:hidden; }
.member-picture img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.member-identity > div { min-width:0; }
.member-identity-info { flex:1; max-width:480px; }
.member-name-row { display:flex; align-items:center; gap:8px; min-height:40px; }
.member-user-name { display:block; font-size:18px; overflow-wrap:anywhere; }
.member-nickname-display { padding:6px 0; min-width:0; font-weight:600; text-align:left; color:var(--text); line-height:1.5; }
.member-nickname-display:hover { color:var(--primary); }
.member-nickname-input { min-width:0; width:20ch; max-width:100%; padding:5px 8px; border:1px solid #72a287; border-radius:6px; font-size:18px; font-weight:600; line-height:1.5; }
.member-nickname-input:focus { outline:2px solid #2d6a4f18; outline-offset:1px; }
.member-nickname-input[readonly] { color:#657169; background:#f5f7f5; }
.member-identity p { margin:5px 0 0; font-size:13px; color:#778078; }
.member-status { display:inline-block; font-size:11px; color:var(--primary); background:#eaf2ec; padding:2px 7px; border-radius:4px; margin-left:8px; font-weight:400; vertical-align:middle; }
.member-name-row .member-status { margin-left:0; flex-shrink:0; }
.member-identity .member-avatar-button { overflow:visible; }
.member-identity .member-avatar-button > img { border-radius:50%; }
.member-identity .member-avatar-edit { border:1px solid #dfe5e1; }
.member-nickname-status { display:flex; align-items:center; gap:6px; min-height:20px; margin-top:4px; font-size:12px; color:var(--primary); overflow-wrap:anywhere; }
.member-nickname-status svg { width:16px; height:16px; flex-shrink:0; }
.member-nickname-status[data-state=success] svg { animation:member-save-arrive 180ms ease-out; }
.member-nickname-status[data-state=error] { color:#a2473e; }
.member-nickname-status button { padding:4px 8px; color:var(--primary); flex-shrink:0; border-radius:4px; }
.member-nickname-status button:hover { background:#edf4f0; }
.member-totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #e7ebe8; border-bottom:1px solid #e7ebe8; padding:24px 0; margin:0; }
.member-total { padding-right:24px; min-width:0; }
.member-total + .member-total { border-left:1px solid #e7ebe8; padding:0 0 0 32px; }
.member-total dt { font-size:13px; color:#778078; }
.member-total dd { margin:8px 0 0; font-size:32px; color:#253e30; font-weight:600; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.member-total dd small { font-size:18px; font-weight:400; margin-right:4px; }
.member-total a { display:inline-flex; align-items:center; gap:4px; margin-top:10px; color:var(--primary); font-size:12px; }
.member-section { margin-top:30px; }
.member-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.member-section-heading a { display:inline-flex; align-items:center; gap:3px; color:#778078; font-size:12px; }
.member-recharge-note { font-size:12px; color:#8a8e89; margin:12px 0 0; }
.member-order-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:1px solid #e7ebe8; padding:4px 0 22px; gap:8px; }
.member-order-shortcuts a { display:flex; flex-direction:column; align-items:center; gap:7px; padding:10px 2px; font-size:13px; color:#737b75; }
.member-order-shortcuts b { font-size:20px; color:#354c3d; font-weight:500; font-variant-numeric:tabular-nums; }
.member-order { display:block; padding:18px 0; border-bottom:1px solid #e7ebe8; }
.member-order-top,.member-order-bottom { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; color:#879087; }
.member-order-status { color:var(--primary); flex-shrink:0; }
.member-order-status[data-status=pending_payment] { color:#986c37; }
.member-order-status[data-status=shipped] { color:#53798e; }
.member-order-status[data-status=cancelled] { color:#879087; }
.member-order-title { margin:10px 0; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.member-order-bottom span { min-width:0; overflow-wrap:anywhere; }
.member-order-bottom b { font-size:16px; font-weight:600; color:#3c443e; white-space:nowrap; }
.member-empty { padding:40px 0; color:#8a918b; font-size:14px; }
.member-error { padding:24px 0; color:#a2473e; font-size:14px; }
.member-error button { margin-left:12px; text-decoration:underline; }
.member-ledger-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid #e7ebe8; }
.member-ledger-row p { margin:0 0 5px; overflow-wrap:anywhere; font-size:14px; }
.member-ledger-row time { font-size:12px; color:#879087; }
.member-ledger-row strong { font-size:16px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.member-ledger-row .plus { color:var(--primary); }
.member-login-actions a { width:auto; min-width:110px; padding:11px 22px; font-size:14px; border-radius:6px; }
.member-login-actions { display:flex; gap:12px; margin-top:22px; }
.member-login-actions a { text-align:center; }
.member-screen .sfooter { margin-top:0; border-top-color:#e7ebe8; }
.member-screen a:focus-visible,.member-screen button:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.member-screen button:disabled { opacity:.55; cursor:default; }

/* Keep feedback on interactive surfaces without moving the page layout. */
.member-subnav a,.member-order,.member-order-shortcuts a,.member-logout,
.member-login-actions a,.member-nickname-display,.member-nickname-input {
  transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 140ms ease;
}
.member-total a,.member-section-heading a { transition:color 180ms ease; }
.member-total a svg,.member-section-heading a svg,.member-order-shortcuts [data-member-icon] {
  display:inline-flex; transition:transform 180ms ease;
}
.member-identity .member-picture { transition:scale 220ms ease,box-shadow 220ms ease; }
.member-identity .member-picture:active { box-shadow:0 0 0 4px #2d6a4f16; }
.member-identity .member-picture:focus-visible { scale:1.035; box-shadow:0 0 0 3px #2d6a4f18,0 0 16px #2d6a4f14; animation:member-identity-aura 2.8s ease-in-out infinite; }
.member-screen.member-motion-paused .member-identity .member-picture,
.member-screen:has(dialog[open]) .member-identity .member-picture { animation-play-state:paused; }
.member-subnav a:active,.member-order-shortcuts a:active,
.member-login-actions a:active { transform:translateY(1px); }
.member-order:active { background:#eef5f0; }
.member-subnav a:active { background:#d3e5da; }
@media (hover:hover) and (pointer:fine) {
  .member-identity .member-picture:hover { scale:1.035; box-shadow:0 0 0 3px #2d6a4f18,0 0 16px #2d6a4f14; animation:member-identity-aura 2.8s ease-in-out infinite; }
  .member-subnav a:hover { background:#e1ebe5; }
  .member-subnav a[aria-current]:hover { background:#d0e4d7; }
  .member-order:hover { background:#f3f8f4; }
  .member-order-shortcuts a:hover { background:#f1f7f3; border-radius:6px; color:var(--primary); }
  .member-order-shortcuts a:hover [data-member-icon] { transform:translateY(-2px); }
  .member-total a:hover,.member-section-heading a:hover { color:var(--primary-dark); }
  .member-total a:hover svg,.member-section-heading a:hover svg { transform:translateX(2px); }
  .member-logout:hover { color:#a2473e; }
  .member-login-actions .btn-primary:hover { background:#245b42; box-shadow:0 3px 9px #2d6a4f16; }
}
@keyframes member-save-arrive { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes member-identity-aura {
  0%,100% { box-shadow:0 0 0 3px #2d6a4f18,0 0 10px #2d6a4f0a; }
  50% { box-shadow:0 0 0 9px #2d6a4f06,0 0 20px #2d6a4f1c; }
}
@media (prefers-reduced-motion:reduce) {
  .member-screen .member-shell *,.member-screen .member-subnav * { animation:none !important; transition:none !important; }
  .member-screen .member-shell a:active,.member-screen .member-shell button:active,
  .member-screen .member-shell a:hover [data-member-icon],.member-screen .member-shell a:hover svg { transform:none; }
  .member-identity .member-picture:hover,.member-identity .member-picture:focus-visible { scale:1; }
}
@media (min-width:1000px) {
  .member-page.with-tabbar { padding-bottom:0; }
}
@media (max-width:999px) {
  .member-subnav { flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:6px; }
  .store-secondary .member-subnav a { flex-shrink:0; padding:9px 8px; font-size:12px; }
  .member-order-filters { padding:12px 20px 0; }
  .member-header { min-height:84px; padding:16px 20px; }
  .member-header h1 { font-size:20px; }
  .member-view { padding:22px 20px 32px; }
  .member-total dd { font-size:28px; }
  .member-total + .member-total { padding-left:20px; }
  .member-recharge-note { line-height:1.7; }
}
@media (max-width:360px) {
  .member-view { padding-left:16px; padding-right:16px; }
  .member-total dd { font-size:24px; }
}