*{box-sizing:border-box}.jo-wrap{align-items:center;display:grid;gap:2.5rem;grid-template-columns:1fr 260px;margin:0 auto;max-width:1200px;padding:2rem 0}.jo-text{color:#1a1a1a;font-size:16px;line-height:1.8}.jo-card{background:#fff;border:1px solid #e4e4e4;border-radius:12px;overflow:hidden}.jo-card-head{border-bottom:1px solid #f0f0f0;gap:10px;padding:14px 16px 12px}.jo-avatar,.jo-card-head{align-items:center;display:flex}.jo-avatar{background:#f5f5f5;border:1px solid #e4e4e4;border-radius:50%;color:#666;flex-shrink:0;font-size:11px;font-weight:500;height:30px;justify-content:center;width:30px}.jo-head-info .name{color:#111;display:block;font-size:13px;font-weight:500}.jo-head-info .role{color:#888;display:block;font-size:11px}.jo-steps{display:flex;flex-direction:column;gap:2px;padding:12px}.jo-step{align-items:center;border-radius:8px;display:flex;gap:10px;padding:8px 10px;transition:background .3s ease}.jo-step.active{background:#f7f7f7}.jo-step-num{align-items:center;border:1px solid #ddd;border-radius:50%;color:#999;display:flex;flex-shrink:0;font-size:10px;height:20px;justify-content:center;transition:all .3s ease;width:20px}.jo-step.active .jo-step-num{background:#111;border-color:#111;color:#fff}.jo-step-label{color:#999;display:block;font-size:12px;font-weight:500;transition:color .3s ease}.jo-step.active .jo-step-label{color:#111}.jo-step-sub{color:#bbb;display:block;font-size:11px}.jo-arrow{color:#ccc;font-size:11px;margin-left:auto;opacity:0;transition:opacity .3s ease}.jo-step.active .jo-arrow{opacity:1}.jo-footer{border-top:1px solid #f0f0f0;display:flex;gap:14px;padding:10px 16px}.jo-pain{align-items:center;color:#aaa;display:flex;font-size:10px;gap:5px}.jo-dot{border-radius:50%;flex-shrink:0;height:5px;width:5px}@media (max-width:640px){.jo-wrap{gap:1.5rem;grid-template-columns:1fr}}