.member-main { min-height: calc(100vh - 50px); padding: 108px 20px 84px; background: radial-gradient(circle at 8% 12%,rgba(0,212,255,.07),transparent 24rem),radial-gradient(circle at 92% 88%,rgba(63,185,80,.06),transparent 24rem),#fff; }
.member-shell { width: min(100%,900px); margin: 0 auto; }
.member-heading { max-width: 690px; margin-bottom: 30px; }
.member-eyebrow { margin: 0 0 10px; color: #00d4ff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.member-heading h1 { margin: 0 0 12px; color: #0b1d2a; font-size: clamp(36px,6vw,56px); line-height: 1.06; letter-spacing: -.04em; }
.member-heading > p:last-child { color: #476575; font-size: 16px; line-height: 1.7; }
.member-loading,.member-error,.member-profile { border: 1px solid #dce8eb; border-radius: 18px; background: #fff; box-shadow: 0 20px 56px rgba(31,66,78,.1); }
.member-loading[hidden],.member-error[hidden],.member-profile[hidden] { display: none !important; }
.member-loading { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 12px; color: #476575; }
.member-spinner { width: 20px; height: 20px; border: 2px solid #b8d8df; border-top-color: #00aeca; border-radius: 50%; animation: member-spin .8s linear infinite; }
@keyframes member-spin { to { transform: rotate(360deg); } }
.member-profile { padding: clamp(24px,5vw,44px); }
.member-profile-header { display: flex; align-items: center; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #d7eaee; }
.member-profile-avatar { display: grid; width: 56px; height: 56px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #071218; background: linear-gradient(135deg,#00d4ff,#3fb950); font-weight: 800; line-height: 1; }
.member-profile-header h2 { margin: 0 0 3px; color: #0b1d2a; font-size: 23px; }
.member-profile-header p { color: #607987; font-size: 13px; }
.member-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 24px 0 0; overflow: hidden; border: 1px solid #dce7ea; border-radius: 12px; background: #dce7ea; }
.member-details > div { min-width: 0; padding: 17px 18px; background: #f8fafb; }
.member-details dt { margin-bottom: 4px; color: #607987; font-size: 12px; font-weight: 700; }
.member-details dd { overflow-wrap: anywhere; color: #14313e; font-size: 15px; font-weight: 650; }
.member-note { margin-top: 17px; color: #607987; font-size: 12px; line-height: 1.6; }
.member-error { padding: 34px; }
.member-error h2 { margin-bottom: 8px; color: #0b1d2a; font-size: 23px; }
.member-error p { margin-bottom: 18px; color: #476575; }
.member-error button { min-height: 42px; padding: 0 16px; border: 1px solid #00b9da; border-radius: 8px; color: #071218; background: #00d4ff; font-weight: 800; cursor: pointer; }
@media (prefers-reduced-motion:reduce) { .member-spinner { animation: none; } }
@media (max-width:640px) { .member-main { padding: 82px 12px 50px; } .member-heading { padding: 0 8px; } .member-details { grid-template-columns: 1fr; } .member-profile { border-radius: 15px; } }