body.member-page-body{
  margin:0;
  min-height:100vh;
  color:#0f172a;
  background:
    radial-gradient(circle at 12% 6%,rgba(219,234,254,.88) 0,rgba(219,234,254,0) 32%),
    radial-gradient(circle at 86% 2%,rgba(237,233,254,.9) 0,rgba(237,233,254,0) 34%),
    radial-gradient(circle at 56% 82%,rgba(249,115,22,.10) 0,rgba(249,115,22,0) 30%),
    linear-gradient(180deg,#f8fbff 0%,#ffffff 42%,#f8fafc 100%);
}

.member-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
}

.member-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:18px 14px 22px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.94));
  border-right:1px solid rgba(191,219,254,.62);
  box-shadow:12px 0 36px rgba(37,99,235,.05);
  z-index:30;
}

.member-side-brand{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:58px;
  padding:8px 10px 16px;
  text-decoration:none;
  color:#0f172a;
  border-bottom:1px solid rgba(226,232,240,.8);
  margin-bottom:16px;
}
.member-brand-mark{
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:linear-gradient(135deg,#eff6ff 0%,#f5f3ff 100%);
  border:1px solid rgba(191,219,254,.82);
  box-shadow:0 14px 28px rgba(79,70,229,.12);
  flex-shrink:0;
}
.member-brand-mark img{width:46px;height:46px;object-fit:contain;}
.member-side-brand strong{display:block;font-size:17px;font-weight:950;line-height:1.2;}
.member-side-brand small{display:block;margin-top:4px;color:#64748b;font-size:12px;font-weight:750;}

.member-side-nav{display:flex;flex-direction:column;gap:18px;}
.member-nav-group{display:flex;flex-direction:column;gap:6px;}
.member-nav-label{
  padding:0 12px 4px;
  color:#94a3b8;
  font-size:11px;
  font-weight:900;
}
.member-side-nav a,
.member-nav-action{
  position:relative;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:0 12px 0 14px;
  color:#475569;
  text-decoration:none;
  text-align:left;
  border-radius:15px;
  border:0;
  background:transparent;
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s;
}
.member-side-nav a::before,
.member-nav-action::before{
  content:"";
  width:4px;
  height:20px;
  border-radius:999px;
  background:transparent;
  position:absolute;
  left:0;
}
.member-side-nav a iconify-icon,
.member-nav-action iconify-icon{font-size:19px;color:#64748b;}
.member-side-nav a:hover,
.member-nav-action:hover{
  color:#6366f1;
  background:rgba(239,246,255,.78);
  transform:translateX(1px);
}
.member-side-nav a.active{
  color:#7c3aed;
  background:linear-gradient(135deg,#f5f3ff 0%,#eff6ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 24px rgba(79,70,229,.08);
}
.member-side-nav a.active::before{background:linear-gradient(180deg,#7c3aed,#2563eb);}
.member-side-nav a.active iconify-icon{color:#7c3aed;}
.member-nav-logout{color:#b91c1c;}
.member-nav-logout iconify-icon{color:#dc2626;}
.member-nav-logout:hover{
  color:#dc2626;
  background:rgba(255,241,242,.82);
}
.member-nav-logout:hover iconify-icon{color:#dc2626;}

.member-content{
  min-width:0;
  min-height:100vh;
  background:linear-gradient(180deg,rgba(239,246,255,.72) 0%,rgba(255,255,255,.96) 250px,rgba(248,250,252,.98) 100%);
}

.member-topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 30px;
  border-bottom:1px solid rgba(226,232,240,.84);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.member-topbar-title{min-width:240px;}
.member-title-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#eff6ff,#f5f3ff);
  border:1px solid rgba(191,219,254,.78);
  color:#6366f1;
  font-size:12px;
  font-weight:900;
}
.member-title-chip iconify-icon{font-size:16px;color:#7c3aed;}
.member-topbar-title h1{
  margin:8px 0 0;
  font-size:25px;
  line-height:1.16;
  font-weight:950;
}
.member-topbar-title p{
  max-width:780px;
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
  line-height:1.6;
}
.member-topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.member-page-body .btn.secondary{color:#6366f1;background:#fff;border-color:rgba(196,181,253,.9);}
.member-page-body .btn.secondary:hover{background:#f5f3ff;border-color:#c4b5fd;}

.member-main{
  width:min(1240px,calc(100% - 48px));
  margin:24px auto 56px;
}

.member-view{display:none;}
.member-view.active{display:block;}

.member-hero-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px;
  margin-bottom:20px;
  border-radius:28px;
  border:1px solid rgba(191,219,254,.78);
  background:
    linear-gradient(135deg,rgba(255,255,255,.94) 0%,rgba(239,246,255,.74) 56%,rgba(255,251,235,.58) 100%);
  box-shadow:0 28px 80px rgba(37,99,235,.14);
}
.member-hero-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  color:#6366f1;
  font-size:12px;
  font-weight:900;
}
.member-hero-kicker span{
  width:28px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#7c3aed,#f59e0b);
}
.member-hero-card h2{
  margin:9px 0 8px;
  font-size:25px;
  line-height:1.24;
  font-weight:950;
}
.member-hero-card p{
  max-width:780px;
  margin:0;
  color:#64748b;
  font-size:14px;
  line-height:1.75;
}
.member-hero-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;}
.member-page-body .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.member-page-body .badge.purple{background:#f5f3ff;color:#7c3aed;border:1px solid rgba(124,58,237,.12);}
.member-page-body .badge.amber{background:#fffbeb;color:#b45309;border:1px solid #fde68a;}
.member-page-body .badge.green{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;}

.member-overview{
  display:grid;
  grid-template-columns:minmax(320px,.75fr) minmax(0,1.45fr);
  gap:18px;
  margin-bottom:20px;
}
.member-current-card,
.member-assets-card,
.member-section-card{
  position:relative;
  padding:22px;
  border-radius:28px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(124,58,237,.10);
  box-shadow:0 18px 50px rgba(15,23,42,.06);
  overflow:hidden;
}
.member-current-card::before,
.member-assets-card::before,
.member-section-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#6366f1,#7c3aed);
}
.member-section-card.section-amber::before{background:linear-gradient(90deg,#f59e0b,#fbbf24,#f97316);}
.member-section-card.section-purple::before{background:linear-gradient(90deg,#7c3aed,#6366f1,#2563eb);}
.member-section-card{margin-bottom:20px;}
.member-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.member-section-head.compact{margin-bottom:14px;}
.member-section-kicker{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  border:1px solid #bfdbfe;
  font-size:11px;
  font-weight:950;
}
.section-amber .member-section-kicker{background:#fffbeb;color:#b45309;border-color:#fde68a;}
.section-purple .member-section-kicker{background:#f5f3ff;color:#7c3aed;border-color:rgba(124,58,237,.16);}
.member-section-head h2{
  margin:8px 0 5px;
  font-size:20px;
  line-height:1.25;
  font-weight:950;
}
.member-section-head p{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.65;
}

.member-metric-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.member-metric{
  --accent:#6366f1;
  --soft:#eef2ff;
  min-height:118px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg,#fff,rgba(248,251,255,.78));
  border:1px solid rgba(226,232,240,.88);
  box-shadow:0 12px 30px rgba(15,23,42,.035);
}
.member-metric.accent-blue{--accent:#2563eb;--soft:#eff6ff;}
.member-metric.accent-purple{--accent:#7c3aed;--soft:#f5f3ff;}
.member-metric.accent-green{--accent:#10b981;--soft:#ecfdf5;}
.member-metric.accent-amber{--accent:#f59e0b;--soft:#fffbeb;background:linear-gradient(180deg,#fff,rgba(255,251,235,.66));border-color:rgba(245,158,11,.18);}
.member-metric .metric-label{font-size:12px;color:#64748b;font-weight:900;margin-bottom:18px;}
.member-metric .metric-value{
  color:var(--accent);
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  font-size:28px;
  line-height:1;
  font-weight:950;
}
.member-metric .metric-sub{margin-top:14px;color:#64748b;font-size:12px;font-weight:750;}

.member-page-body .item-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border-color:rgba(226,232,240,.92);
  box-shadow:0 14px 34px rgba(15,23,42,.045);
}
.member-page-body .item-card.active{
  border-color:rgba(124,58,237,.25);
  background:linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);
}
.member-page-body .item-card.active::before,
.membership-plan-grid .item-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#7c3aed,#6366f1);
}
.member-page-body .price{
  color:transparent;
  background:linear-gradient(135deg,#2563eb,#6366f1,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
}
.member-page-body .right-chip{
  color:#4f46e5;
  background:#eef2ff;
  border-color:rgba(99,102,241,.14);
}
.member-page-body .period-actions .btn:not(.primary){
  color:#6366f1;
  border-color:rgba(196,181,253,.9);
}
.member-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.member-page-body .entry-card{
  border-radius:22px;
  border-color:rgba(191,219,254,.82);
}
.member-page-body .entry-card:hover{border-color:#c4b5fd;}
.member-page-body .amber-entry{
  background:linear-gradient(135deg,#fff 0%,#fffbeb 100%);
  border-color:rgba(245,158,11,.2);
}
.member-page-body .amber-entry iconify-icon{color:#f59e0b;}

.profile-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:18px;
  align-items:start;
}
.profile-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.profile-form label{
  display:block;
  color:#475569;
  font-size:12px;
  font-weight:900;
  line-height:1.55;
}
.profile-form label:first-of-type{grid-column:span 2;}
.profile-form input{
  display:block;
  width:100%;
  margin-top:6px;
  min-height:46px;
}
.profile-form .btn{grid-column:span 2;justify-self:start;}
.profile-msg{
  display:none;
  grid-column:span 2;
  min-height:40px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  font-size:13px;
  font-weight:800;
}
.profile-msg.show{display:flex;}
.profile-msg.success{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0;}
.profile-msg.error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;}
.profile-summary{
  display:grid;
  gap:10px;
}
.profile-summary div{
  padding:14px;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#f8fbff);
}
.profile-summary span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:850;
  margin-bottom:6px;
}
.profile-summary strong{
  display:block;
  color:#0f172a;
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.member-package-grid{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.recharge-card{
  background:linear-gradient(180deg,#fff 0%,#fffdf7 100%)!important;
  border-color:rgba(245,158,11,.18)!important;
}
.recharge-card::before{
  background:linear-gradient(90deg,#f59e0b,#fbbf24)!important;
}
.amber-pill{
  background:#fffbeb!important;
  color:#b45309!important;
  border-color:#fde68a!important;
}
.amber-price{
  color:#b45309!important;
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
}

.finance-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}
.member-record-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}
.member-payment-layout{
  margin-bottom:18px;
}
.member-page-body .payment-main,
.member-page-body .payment-side{
  border-color:rgba(124,58,237,.10);
  box-shadow:0 18px 50px rgba(15,23,42,.06);
}
.payment-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.payment-benefits div{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(226,232,240,.9);
  background:linear-gradient(135deg,#fff,#f8fbff);
}
.payment-benefits span{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:850;
  margin-bottom:5px;
}
.payment-benefits strong{
  color:#0f172a;
  font-size:14px;
}
.member-table-wrap{overflow-x:auto;}
.member-table-wrap table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12.5px;
}
.member-table-wrap th,
.member-table-wrap td{
  text-align:left;
  padding:12px 11px;
  border-bottom:1px solid rgba(226,232,240,.86);
  background:#fff;
  vertical-align:top;
}
.member-table-wrap th{
  color:#64748b;
  font-size:12px;
  font-weight:950;
  background:linear-gradient(180deg,#f8fbff,#f8fafc);
}
.member-table-wrap tr:hover td{background:#fbfdff;}
.member-table-wrap td.amount-pos{color:#047857;font-weight:950;}
.member-table-wrap td.amount-neg{color:#dc2626;font-weight:950;}
.member-status{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#f1f5f9;
  color:#475569;
  border:1px solid #e2e8f0;
}
.member-status.status-paid{background:#ecfdf5;color:#047857;border-color:#bbf7d0;}
.member-status.status-pending{background:#fffbeb;color:#b45309;border-color:#fde68a;}
.member-status.status-failed{background:#fff1f2;color:#be123c;border-color:#fecdd3;}
.member-status.status-refunded,
.member-status.status-closed,
.member-status.status-cancelled{background:#f8fafc;color:#64748b;border-color:#e2e8f0;}

@media(max-width:1180px){
  .member-shell{grid-template-columns:246px minmax(0,1fr);}
  .member-topbar{align-items:flex-start;flex-direction:column;}
  .member-topbar-actions{width:100%;justify-content:flex-start;}
  .member-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .finance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .member-record-grid{grid-template-columns:1fr;}
  .profile-layout{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .member-shell{display:block;}
  .member-sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid rgba(191,219,254,.7);}
  .member-side-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .member-main{width:calc(100% - 24px);margin:16px auto 36px;}
  .member-hero-card,.member-section-head{flex-direction:column;align-items:flex-start;}
  .member-hero-badges{justify-content:flex-start;}
  .member-overview{grid-template-columns:1fr;}
  .member-entry-grid{grid-template-columns:1fr;}
  .finance-grid{grid-template-columns:1fr;}
  .payment-benefits{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .member-topbar{padding:14px;}
  .member-side-nav{grid-template-columns:1fr;}
  .member-hero-card,.member-current-card,.member-assets-card,.member-section-card{border-radius:22px;padding:18px;}
  .member-metric-grid{grid-template-columns:1fr;}
  .profile-form{grid-template-columns:1fr;}
  .profile-form label:first-of-type,.profile-form .btn,.profile-msg{grid-column:auto;}
  .member-topbar-actions{width:100%;}
  .member-topbar-actions .btn{flex:1;}
}

/* Homepage-style membership polish */
body.member-page-body{
  --member-blue:#2563eb;
  --member-indigo:#4f46e5;
  --member-violet:#7c3aed;
  --member-orange:#f97316;
  --member-orange-2:#fb923c;
  --member-ink:#0f172a;
  --member-muted:#64748b;
  --member-line:rgba(203,213,225,.82);
  --member-card-shadow:0 18px 45px rgba(15,23,42,.06);
  --member-card-shadow-hover:0 26px 70px rgba(37,99,235,.12);
  background:
    radial-gradient(circle at 12% 4%,rgba(219,234,254,.74),rgba(219,234,254,0) 30%),
    radial-gradient(circle at 88% 0%,rgba(237,233,254,.68),rgba(237,233,254,0) 32%),
    radial-gradient(circle at 72% 78%,rgba(255,237,213,.28),rgba(255,237,213,0) 30%),
    linear-gradient(180deg,#f8fbff 0%,#ffffff 42%,#f8fafc 100%);
}
.member-shell{
  grid-template-columns:288px minmax(0,1fr);
}
.member-sidebar{
  padding:0 16px 22px;
  background:rgba(255,255,255,.84);
  border-right:1px solid rgba(226,232,240,.9);
  box-shadow:14px 0 46px rgba(37,99,235,.055);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.member-side-brand{
  min-height:88px;
  padding:0 12px;
  margin-bottom:18px;
  border-bottom-color:rgba(226,232,240,.9);
}
.member-brand-mark{
  width:56px;
  height:56px;
  border-radius:17px;
  background:linear-gradient(135deg,#eef6ff 0%,#f6f3ff 100%);
  box-shadow:0 16px 34px rgba(79,70,229,.14);
}
.member-brand-mark img{width:50px;height:50px;}
.member-side-brand strong{
  font-size:18px;
  letter-spacing:0;
}
.member-side-brand small{
  color:#64748b;
  font-weight:800;
}
.member-workbench-btn{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:0 4px 18px;
  border:1px solid rgba(251,146,60,.88);
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#f97316 0%,#fb923c 100%);
  font-size:13.5px;
  font-weight:950;
  text-decoration:none;
  box-shadow:0 18px 36px rgba(249,115,22,.22),0 6px 12px rgba(15,23,42,.08);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.member-content-quickbar .member-workbench-btn{
  min-width:172px;
  margin:0;
  padding:0 22px;
}
.member-workbench-btn iconify-icon{
  font-size:18px;
  color:#fff;
}
.member-workbench-btn:hover{
  color:#fff;
  transform:translateY(-2px);
  filter:saturate(1.04);
  box-shadow:0 24px 48px rgba(249,115,22,.28),0 8px 16px rgba(15,23,42,.1);
}
.member-side-nav{
  gap:20px;
}
.member-nav-label{
  padding:0 12px 6px;
  color:#94a3b8;
  letter-spacing:0;
}
.member-side-nav a,
.member-nav-action{
  min-height:46px;
  padding:0 14px;
  border-radius:18px;
  color:#475569;
  font-size:13.5px;
  border:1px solid transparent;
}
.member-side-nav a::before,
.member-nav-action::before{
  left:-1px;
  width:3px;
  height:22px;
}
.member-side-nav a iconify-icon,
.member-nav-action iconify-icon{
  font-size:20px;
  color:#64748b;
}
.member-side-nav a:hover,
.member-nav-action:hover{
  color:var(--member-blue);
  background:rgba(239,246,255,.78);
  border-color:rgba(191,219,254,.72);
  transform:translateX(2px);
}
.member-side-nav a.active{
  color:var(--member-indigo);
  background:linear-gradient(135deg,#eef6ff 0%,#f5f3ff 100%);
  border-color:rgba(191,219,254,.78);
  box-shadow:0 14px 34px rgba(79,70,229,.1);
}
.member-side-nav a.active::before{
  background:linear-gradient(180deg,var(--member-blue),var(--member-violet));
}
.member-side-nav a.active iconify-icon{
  color:var(--member-indigo);
}
.member-nav-logout{
  color:#b91c1c;
}
.member-nav-logout iconify-icon{
  color:#dc2626;
}
.member-nav-logout:hover{
  color:#dc2626;
  background:rgba(255,241,242,.86);
  border-color:rgba(254,202,202,.9);
}
.member-nav-logout:hover iconify-icon{
  color:#dc2626;
}
.member-content{
  background:
    radial-gradient(circle at 18% 0%,rgba(219,234,254,.42),rgba(219,234,254,0) 32%),
    radial-gradient(circle at 92% 4%,rgba(237,233,254,.36),rgba(237,233,254,0) 30%),
    linear-gradient(180deg,rgba(248,251,255,.9) 0%,rgba(255,255,255,.96) 290px,rgba(248,250,252,.98) 100%);
}
.member-content-quickbar{
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:16px max(28px,calc((100% - 1320px) / 2 + 28px));
  background:rgba(255,255,255,.58);
  border-bottom:1px solid rgba(226,232,240,.82);
  box-shadow:0 14px 34px rgba(37,99,235,.035);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.member-topbar{
  min-height:106px;
  padding:20px 32px;
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(226,232,240,.86);
  box-shadow:0 14px 38px rgba(37,99,235,.055);
}
.member-title-chip{
  min-height:28px;
  padding:0 12px;
  background:rgba(239,246,255,.86);
  border-color:#bfdbfe;
  color:var(--member-indigo);
}
.member-title-chip iconify-icon{
  color:var(--member-violet);
}
.member-topbar-title h1{
  margin-top:9px;
  color:var(--member-ink);
  font-size:24px;
  font-weight:950;
}
.member-topbar-title p{
  color:var(--member-muted);
  font-size:13px;
}
.member-main{
  width:min(1320px,calc(100% - 56px));
  margin:28px auto 64px;
}
.member-hero-card,
.member-current-card,
.member-assets-card,
.member-section-card,
.member-page-body .item-card,
.member-metric{
  border-color:rgba(226,232,240,.92);
  box-shadow:var(--member-card-shadow);
}
.member-hero-card{
  padding:28px;
  margin-bottom:24px;
  border-radius:28px;
  background:
    radial-gradient(circle at 14% 16%,rgba(219,234,254,.62),rgba(219,234,254,0) 36%),
    radial-gradient(circle at 86% 20%,rgba(255,237,213,.42),rgba(255,237,213,0) 34%),
    linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(248,251,255,.92) 58%,rgba(255,253,250,.92) 100%);
}
.member-hero-kicker{
  color:var(--member-indigo);
}
.member-hero-card h2{
  color:var(--member-ink);
  font-size:22px;
  line-height:1.22;
}
.member-hero-card p{
  color:var(--member-muted);
  font-size:13.5px;
}
.member-page-body .badge{
  min-height:30px;
  padding:0 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
.member-overview{
  gap:20px;
  margin-bottom:22px;
}
.member-current-card,
.member-assets-card,
.member-section-card{
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.94);
}
.member-current-card::before,
.member-assets-card::before,
.member-section-card::before{
  height:3px;
  background:linear-gradient(90deg,var(--member-blue),var(--member-indigo),var(--member-violet));
}
.member-section-card.section-amber::before,
.recharge-card::before{
  background:linear-gradient(90deg,var(--member-orange),var(--member-orange-2))!important;
}
.member-section-head{
  margin-bottom:20px;
}
.member-section-kicker{
  min-height:26px;
  padding:0 10px;
  background:#eff6ff;
  border-color:#bfdbfe;
  color:var(--member-blue);
  letter-spacing:0;
}
.section-amber .member-section-kicker{
  background:#fff7ed;
  color:#ea580c;
  border-color:#fed7aa;
}
.member-section-head h2{
  color:var(--member-ink);
  font-size:19px;
}
.member-section-head p{
  color:var(--member-muted);
  font-size:13.5px;
}
.member-metric{
  position:relative;
  min-height:124px;
  border-radius:22px;
  background:
    radial-gradient(circle at 86% 18%,var(--soft),rgba(255,255,255,0) 48%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  overflow:hidden;
}
.member-metric::after{
  content:"";
  position:absolute;
  right:16px;
  top:16px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px var(--soft);
  opacity:.9;
}
.member-metric .metric-label{
  color:#64748b;
  margin-bottom:20px;
}
.member-metric .metric-value{
  font-size:28px;
  letter-spacing:0;
}
.member-metric .metric-sub{
  color:#64748b;
}
.member-page-body .item-card{
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.member-page-body .item-card:hover{
  transform:translateY(-3px);
  border-color:rgba(191,219,254,.98);
  box-shadow:var(--member-card-shadow-hover);
}
.member-page-body .item-card.active{
  border-color:rgba(124,58,237,.24);
  background:
    radial-gradient(circle at 92% 8%,rgba(237,233,254,.52),rgba(237,233,254,0) 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfaff 100%);
}
.member-page-body .item-name{
  color:var(--member-ink);
  font-size:14.5px;
}
.member-page-body .pill,
.member-page-body .right-chip{
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.member-page-body .right-chip{
  color:var(--member-indigo);
  background:#eef2ff;
  border-color:rgba(99,102,241,.16);
}
.member-page-body .price{
  font-size:26px;
  color:transparent;
  background:linear-gradient(135deg,var(--member-blue),var(--member-indigo),var(--member-violet));
  -webkit-background-clip:text;
  background-clip:text;
}
.recharge-card{
  background:
    radial-gradient(circle at 92% 10%,rgba(255,237,213,.58),rgba(255,237,213,0) 34%),
    linear-gradient(180deg,#ffffff 0%,#fffdf8 100%)!important;
  border-color:rgba(251,146,60,.24)!important;
}
.amber-pill{
  background:#fff7ed!important;
  color:#ea580c!important;
  border-color:#fed7aa!important;
}
.amber-price{
  color:#c2410c!important;
  font-size:26px!important;
}
.member-page-body .btn.primary{
  background:linear-gradient(135deg,var(--member-orange),var(--member-orange-2))!important;
  color:#fff!important;
  border:1px solid rgba(251,146,60,.85)!important;
  border-radius:16px;
  box-shadow:0 16px 34px rgba(249,115,22,.2);
}
.member-page-body .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 48px rgba(249,115,22,.26);
}
.member-page-body .btn:not(.primary){
  border-color:rgba(191,219,254,.88);
  color:var(--member-indigo);
  background:rgba(255,255,255,.88);
  border-radius:16px;
}
.member-page-body .btn:not(.primary):hover{
  background:#eff6ff;
  border-color:#bfdbfe;
}
.profile-form input{
  min-height:48px;
  padding:0 14px;
  border-color:rgba(203,213,225,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.profile-form input:focus{
  border-color:#bfdbfe;
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
}
.profile-summary div,
.payment-benefits div{
  border-color:rgba(226,232,240,.92);
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  box-shadow:0 10px 24px rgba(15,23,42,.035);
}
.member-table-wrap{
  border:1px solid rgba(226,232,240,.9);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.045);
}
.member-table-wrap table{
  min-width:760px;
}
.member-table-wrap th{
  background:linear-gradient(180deg,#f8fbff,#f8fafc);
  color:#64748b;
}
.member-table-wrap th,
.member-table-wrap td{
  padding:14px 13px;
}
.member-table-wrap tr:last-child td{
  border-bottom:0;
}
.member-page-body .empty{
  color:#64748b;
  border-color:rgba(191,219,254,.78);
  background:
    radial-gradient(circle at 50% 0%,rgba(219,234,254,.35),rgba(219,234,254,0) 45%),
    #fbfdff;
}

.profile-layout-rich{
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr);
}
.profile-layout-rich .profile-form{
  grid-template-columns:1fr;
  gap:16px;
}
.profile-form-section{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:16px;
  border:1px solid rgba(191,219,254,.72);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(237,233,254,.62),rgba(237,233,254,0) 34%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,251,255,.92));
  box-shadow:0 14px 34px rgba(15,23,42,.035);
}
.profile-form-title{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  color:#0f172a;
  font-size:14px;
  font-weight:950;
}
.profile-form-title iconify-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef2ff;
  color:#6366f1;
  font-size:18px;
}
.profile-form label:first-of-type{grid-column:auto;}
.profile-form .profile-field-wide{grid-column:1 / -1;}
.profile-form input,
.profile-form select,
.profile-form textarea{
  display:block;
  width:100%;
  margin-top:6px;
  border:1px solid rgba(203,213,225,.9);
  border-radius:16px;
  background:#fff;
  color:#0f172a;
  outline:none;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.profile-form select{
  min-height:48px;
  padding:0 38px 0 14px;
}
.profile-form textarea{
  min-height:104px;
  resize:vertical;
  padding:12px 14px;
  line-height:1.6;
}
.profile-form input:focus,
.profile-form select:focus,
.profile-form textarea:focus{
  border-color:#bfdbfe;
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
}
.profile-check-grid{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.profile-check-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px;
  border:1px solid rgba(196,181,253,.58);
  border-radius:16px;
  background:#fff;
  color:#334155;
  font-size:12px;
  font-weight:900;
}
.profile-check-grid input{
  width:16px;
  height:16px;
  min-height:auto;
  margin:0;
  accent-color:#7c3aed;
}
.profile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.profile-form .profile-actions .btn{
  grid-column:auto;
}
.profile-summary{
  position:sticky;
  top:118px;
}
.profile-summary .profile-summary-card.highlight{
  border-color:rgba(124,58,237,.18);
  background:
    radial-gradient(circle at 100% 0%,rgba(245,158,11,.16),rgba(245,158,11,0) 36%),
    linear-gradient(135deg,#fff,#f5f3ff);
}
.profile-summary small{
  display:block;
  margin-top:8px;
  color:#64748b;
  font-size:12px;
  line-height:1.5;
}
.profile-summary small b{
  color:#334155;
}

@media(max-width:1180px){
  .member-shell{grid-template-columns:252px minmax(0,1fr);}
  .member-main{width:calc(100% - 36px);}
}
@media(max-width:860px){
  .member-sidebar{
    padding:16px;
    box-shadow:none;
  }
  .member-topbar{
    position:relative;
    min-height:auto;
    padding:18px;
  }
  .member-main{
    width:calc(100% - 24px);
  }
  .profile-layout-rich{grid-template-columns:1fr;}
  .profile-summary{position:relative;top:auto;}
}
@media(max-width:560px){
  .member-topbar-title h1{font-size:23px;}
  .member-hero-card h2{font-size:21px;}
  .member-page-body .price,
  .amber-price,
  .member-metric .metric-value{font-size:25px!important;}
  .profile-form-section,
  .profile-check-grid{grid-template-columns:1fr;}
}

/* Remove duplicated page header; section cards carry their own titles. */
.member-topbar{
  display:none!important;
}
.member-content{
  background:
    radial-gradient(circle at 18% 0%,rgba(219,234,254,.38),rgba(219,234,254,0) 30%),
    radial-gradient(circle at 92% 0%,rgba(237,233,254,.28),rgba(237,233,254,0) 30%),
    linear-gradient(180deg,rgba(248,251,255,.84) 0%,rgba(255,255,255,.96) 240px,rgba(248,250,252,.98) 100%);
}
.member-main{
  margin-top:28px;
}
[data-member-view="recharge"] .member-section-card{
  margin-top:0;
}
@media(max-width:860px){
  .member-content-quickbar{
    min-height:68px;
    justify-content:stretch;
    padding:12px 16px;
  }
  .member-content-quickbar .member-workbench-btn{
    width:100%;
  }
}
