.portrait-card{background-color:var(--card-background);border:2px solid var(--card-separator-color);border-radius:var(--card-border-radius);padding:var(--card-padding);margin:20px 0;box-shadow:var(--shadow-l1);position:relative}.portrait-card::before{content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:2px dashed #dab3a5;border-radius:calc(var(--card-border-radius));pointer-events:none}.portrait-card::after{content:'';position:absolute;bottom:20px;right:20px;width:20px;height:20px;background:url("/img/star.svg") no-repeat center center;background-size:contain;pointer-events:none}.portrait-card-header{border-bottom:1px solid var(--card-separator-color);padding-bottom:10px;margin-bottom:15px}.content-container{display:flex;flex-direction:column;gap:20px}#group-buttons{display:flex;gap:10px;margin-bottom:20px}#character-list{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}.group-container{display:flex;flex-wrap:wrap;gap:0}.character-item{cursor:pointer;text-align:center;width:100px;height:100px;display:flex;justify-content:center;align-items:center;border:none;padding:0;margin-right:-25px}.character-item img{max-width:100%;max-height:100%;object-fit:contain}#export-button{padding:10px 20px;cursor:pointer}#frame{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:20px;border:5px solid black;border-radius:33px;padding:10px;width:700px;height:300px;overflow:hidden;background-color:#242424}#inner-card{position:relative;width:660px;height:260px;background-color:white;border-radius:20px;overflow:hidden;display:flex;justify-content:center;align-items:center;border:5px solid #0E0E0E;background:linear-gradient(to right, rgba(0,0,0,0.1), rgba(255,255,255,0.1)),url("/img/zzzbg.png") no-repeat center center;background-size:150%;background-position:center}.frame-item{position:absolute;width:210px;height:210px;display:flex;justify-content:center;align-items:center}.frame-item{width:210px;height:210px;display:flex;justify-content:center;align-items:center;margin:20px}#button-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}#filters{display:flex;gap:10px}.styled-button{display:flex;align-items:center;padding:10px 20px;background-color:#dfae91;color:white;border:none;border-radius:5px;cursor:pointer;font-size:16px;text-decoration:none;transition:background-color 0.3s ease;margin-left:10px;box-shadow:var(--shadow-l1)}.styled-button:hover{background-color:#c89a7b}.group-label{display:flex;align-items:center;margin-bottom:0px}.group-icon{width:24px;height:24px;margin-right:8px}.group-name{font-size:18px;font-weight:bold;color:#333}@media (max-width: 600px){.group-label{flex-direction:column;align-items:flex-start}.group-icon{margin-right:0;margin-bottom:4px}.group-name{font-size:16px}}.rank-container{margin-bottom:20px}.rank-label{font-size:16px;font-weight:bold;margin-bottom:10px}.bangboo-row{display:flex;flex-wrap:wrap}.character-item.small{width:50px;height:50px;margin:5px}.character-item.small img{width:100%;height:100%}.selected-bangboo{position:absolute;bottom:30px;right:10px;width:80px;height:80px;border-radius:50%;background-color:#060706;z-index:2;display:flex;align-items:center;justify-content:center;border:2px solid #292a29;overflow:hidden}.selected-bangboo img{width:96%;height:96%;object-fit:cover;border-radius:50%}.frame-item{position:absolute}.frame-item .note{position:absolute;top:-10px;left:-5px;background-color:#060706;border:2px solid #292a29;color:white;padding:2px 5px;border-radius:3px;font-size:18px;pointer-events:none}