.mem { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: inherit; max-width: 1000px; margin: 0 auto; padding: 20px; }
  .mem-lead { opacity: .8; margin-bottom: 1.5rem; }
  .mem-banner { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(46,160,67,.12); color: #2ea043; font-weight: 600; margin-bottom: 1.25rem; }
  .mem-banner.pending { background: rgba(210,153,34,.14); color: #d29922; }
  .mem-banner.expired, .mem-banner.cancelled { background: rgba(248,81,73,.12); color: #f85149; }
  .mem-banner.scheduled { background: rgba(88,110,215,.14); color: #586ed7; }
  .mem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
  .mem-card { border: 1px solid rgba(128,128,128,.22); border-radius: 16px; padding: 1.5rem 1.35rem; background: var(--bg-card, transparent); display: flex; flex-direction: column; position: relative; transition: transform .12s, border-color .12s, box-shadow .12s; }
  .mem-card:hover { transform: translateY(-3px); box-shadow: 0 12px 20px -8px rgba(0,0,0,.15); }
  .mem-card.is-current { border-color: #2ea043; }
  .mem-card.is-top { border-color: var(--accent-color, #1d475a); }
  .mem-tier { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }
  .mem-price { font-size: 2rem; font-weight: 800; margin: .35rem 0 .1rem; }
  .mem-price small { font-size: .95rem; font-weight: 500; opacity: .6; }
  .mem-benefits { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
  .mem-benefits li { display: flex; gap: .55rem; font-size: .93rem; }
  .mem-benefits li::before { content: "✓"; color: #2ea043; font-weight: 800; flex-shrink: 0; }
  .mem-pill { position: absolute; top: 1rem; right: 1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .55rem; border-radius: 999px; }
  .mem-pill.current { background: rgba(46,160,67,.15); color: #2ea043; }
  .mem-pill.popular { background: rgba(29,71,90,.15); color: var(--accent-color, #1d475a); }
  .mem-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .75rem; border: 1px solid rgba(128,128,128,.3); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .2s; }
  .mem-btn:hover { background: rgba(128,128,128,.06); }
  .mem-btn:disabled { opacity: .5; cursor: default; }
  .mem-btn--primary { background: #1d475a; color: #fff; border-color: transparent; }
  .mem-btn--primary:hover { background: #153744; }
  .mem-btn--danger { background: transparent; color: #f85149; border-color: rgba(248,81,73,.4); }
  .mem-btn--danger:hover { background: rgba(248,81,73,.08); }
  .mem-account { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; }
  .mem-account-main { flex: 1; min-width: 300px; }
  .mem-side { width: 300px; flex-shrink: 0; }
  .mem-panel { border: 1px solid rgba(128,128,128,.22); border-radius: 16px; padding: 1.4rem; background: var(--bg-card, transparent); }
  .mem-status-pill { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; padding: .15rem .6rem; border-radius: 999px; }
  .mem-status-pill.active { background: rgba(46,160,67,.15); color: #2ea043; }
  .mem-status-pill.pending { background: rgba(210,153,34,.15); color: #d29922; }
  .mem-status-pill.expired, .mem-status-pill.cancelled { background: rgba(248,81,73,.15); color: #f85149; }
  .mem-facts { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .9rem; }
  .mem-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid rgba(128,128,128,.12); }
  .mem-facts .k { opacity: .6; }
  .mem-total { display: flex; justify-content: space-between; font-weight: 700; margin-top: .8rem; padding-top: .8rem; border-top: 2px solid rgba(128,128,128,.2); }
  .mem-empty { text-align: center; padding: 2.5rem 1rem; opacity: .7; border: 1px dashed rgba(128,128,128,.3); border-radius: 12px; }
  .mem-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
  .mem-gate { text-align: center; padding: 3rem 1.5rem; border: 1px dashed rgba(128,128,128,.35); border-radius: 16px; max-width: 560px; margin: 2rem auto; }
  .mem-gate-icon { font-size: 2.8rem; margin-bottom: .5rem; }
  .mem-gate h2 { margin: 0 0 .4rem; }
  .mem-gate p { opacity: .75; }
  .mem-gate .mem-benefits { display: inline-flex; text-align: left; margin: 1.25rem auto; }
  .mem-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 99999; backdrop-filter: blur(2px); padding: 1rem; }
  .mem-modal-card { background: var(--general-background, #fff); border: 1px solid rgba(128,128,128,.2); border-radius: 14px; padding: 2.5rem; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; box-shadow: 0 16px 40px rgba(0,0,0,.3); box-sizing: border-box; }
  .mem-modal-card h3 { margin: 0 0 1rem; }
  .mem-f { display: block; margin-bottom: .8rem; font-size: .85rem; }
  .mem-f input, .mem-f select, .mem-f textarea { width: 100%; margin-top: .3rem; padding: .6rem; border: 1px solid rgba(128,128,128,.3); border-radius: 9px; background: transparent; color: inherit; font: inherit; box-sizing: border-box; }
  .mem-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
  .mem-modal-err { color: #f85149; font-size: .85rem; min-height: 1em; margin-top: .4rem; }
  .mem-payment-detail { margin-top: .5rem; padding: .6rem; background: rgba(128,128,128,.08); border-radius: 8px; font-size: .85rem; display: none; }
  .mem-payment-detail.show { display: block; }

  /* Payment-not-confirmed lock */
  .mem-lock { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid rgba(210,153,34,.35); background: rgba(210,153,34,.08); border-radius: 14px; padding: 1.25rem 1.35rem; margin-bottom: 1.5rem; }
  .mem-lock-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
  .mem-lock h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
  .mem-lock p { margin: 0 0 .5rem; font-size: .92rem; opacity: .85; line-height: 1.55; }
  .mem-lock p:last-child { margin-bottom: 0; }
  .mem-lock-detail { margin-top: .6rem; padding: .7rem .85rem; background: rgba(128,128,128,.1); border-radius: 9px; font-size: .86rem; line-height: 1.5; }
  .mem-lock-detail strong { display: block; margin-bottom: .2rem; }
  .mem-locked-list { opacity: .45; }
  .mem-locked-list li::before { content: "🔒"; color: inherit; font-size: .8em; }
  .mem-locked-note { font-size: .8rem; opacity: .6; margin: .4rem 0 0; }
  .mem-chip { display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
  .mem-chip.ok { background: rgba(46,160,67,.15); color: #2ea043; }
  .mem-chip.awaiting { background: rgba(210,153,34,.16); color: #d29922; }

  /* Admin styles */
  .mem-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
  .mem-stat-card { border: 1px solid rgba(128,128,128,.2); border-radius: 12px; padding: 1rem; text-align: center; background: var(--bg-card, transparent); }
  .mem-stat-value { font-size: 1.8rem; font-weight: 800; }
  .mem-stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; }

  /* Custom Delete Modal */
  .mem-delete-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 99999; backdrop-filter: blur(2px); padding: 1rem; }
  .mem-delete-modal-card { background: var(--general-background, #fff); border: 1px solid rgba(128,128,128,.2); border-radius: 14px; padding: 1.5rem; width: 100%; max-width: 400px; max-height: 90vh; overflow: auto; box-shadow: 0 16px 40px rgba(0,0,0,.3); box-sizing: border-box; text-align: center; }
  .mem-delete-modal-card h3 { margin: 0 0 0.5rem; color: #dc3545; }
  .mem-delete-modal-card p { margin: 0 0 1.5rem; opacity: 0.85; font-size: 0.95rem; line-height: 1.5; }
  .mem-delete-modal-actions { display: flex; justify-content: center; gap: 0.75rem; }
  .mem-delete-modal-actions .mem-btn { width: auto; padding: 0.5rem 1.5rem; }

  /* Override table styles for membership */
  .mem .sp-table th, .mem .sp-table td { padding: .6rem .5rem; }
  @media (max-width: 820px) { .mem-account { flex-direction: column; } .mem-side { width: 100%; } .mem-lock { flex-direction: column; } }