/* public/member-profile.css */
#app .member-profile {background:#fff;border:1px solid #dfdfdf;border-radius:16px;padding:24px;margin:16px 0;color:#171717}
#app .member-profile h2 {margin:0 0 20px;--tl-size:16px;--tl-weight:700}
#app .profile-person {display:flex;align-items:center;gap:16px;margin-bottom:24px}
#app .profile-avatar {display:block;width:72px;height:72px;border-radius:50%;object-fit:cover;background:#fafafa;border:1px solid #dfdfdf;flex-shrink:0}
#app .profile-initial {display:grid;place-items:center;--tl-size:24px;--tl-weight:700}
#app .profile-nickname {--tl-size:16px;--tl-weight:700}
#app .profile-muted {color:#707070;--tl-size:11px;--tl-weight:400;margin:5px 0;line-height:1.6}
#app .profile-photo-label {position:relative;display:inline-flex;border:1px solid #dfdfdf;border-radius:8px;padding:7px 12px;margin-top:8px;cursor:pointer;--tl-weight:500;overflow:hidden}
#app .profile-photo-label input {position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
#app .profile-photo-label:focus-within {outline:2px solid #6b01c2;outline-offset:2px}
#app .profile-field {display:grid;gap:9px;margin:20px 0;--tl-weight:700}
#app .profile-field-title {display:flex;justify-content:space-between;align-items:center}
#app .profile-field-title strong {--tl-weight:700}
#app .profile-field :is(input,textarea,select) {width:100%;box-sizing:border-box;background:#fff;border:1px solid #dfdfdf;border-radius:10px;color:#171717;padding:12px;--tl-weight:400;min-width:0;box-shadow:none}
#app .profile-field textarea {resize:vertical}
#app .profile-field input[type="checkbox"] {width:20px;height:20px;min-height:20px;padding:0;vertical-align:middle;accent-color:#4ade80}
#app .profile-counter {text-align:right;margin:0}
#app .profile-chips {display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#app .profile-chip {display:inline-flex;align-items:center;gap:5px;width:auto;min-height:36px;max-width:100%;padding:7px 12px;border:1px solid #dfdfdf;border-radius:8px;background:#fafafa;color:#171717;--tl-weight:500;white-space:normal;overflow-wrap:anywhere;box-shadow:none}
#app .profile-chip small {--tl-size:10px;color:#707070}
#app button.profile-chip:hover {border-color:#4ade80;background:#fff}
#app .profile-chip-popup {max-width:260px;width:max-content;margin:auto;padding:18px;background:#fff;border:1px solid #dfdfdf;border-radius:12px;box-shadow:0 5px 20px #dfdfdf;position-area:bottom;position-try-fallbacks:flip-block,flip-inline;color:#171717}
#app .profile-chip-popup::backdrop {background:transparent}
#app .profile-chip-popup strong {--tl-weight:700}
#app .profile-chip-popup button {background:#fff;border:1px solid #dfdfdf;border-radius:8px;color:#171717;padding:9px 14px;min-height:40px;margin-top:10px}
#app .profile-results {display:grid;gap:5px}
#app .profile-results button {display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left;min-height:44px;background:#fff;border:1px solid #dfdfdf;border-radius:8px;padding:10px 12px;color:#171717;--tl-weight:500}
#app .profile-results button.profile-request {border:0;color:#707070;--tl-size:11px;--tl-weight:400}
#app .profile-save {display:block;width:100%;min-height:48px;margin-top:20px;border:1px solid #4ade80;border-radius:10px;background:#4ade80;color:#171717;--tl-weight:700;box-shadow:none;padding:12px}
#app .profile-save:disabled {opacity:.55;cursor:wait}
#app .profile-bio {white-space:pre-wrap;overflow-wrap:anywhere;--tl-weight:400;margin:20px 0}
#app .profile-status {color:#707070;min-height:18px;--tl-size:11px;--tl-weight:400;margin:8px 0 0}
#app .profile-admin-tabs {display:flex;gap:8px;flex-wrap:wrap}
#app .profile-admin-tabs button {border:1px solid #dfdfdf;border-radius:8px;background:#fff;color:#171717;padding:10px 14px}
#app .profile-admin-tabs button[aria-pressed="true"] {border-color:#4ade80;--tl-weight:700}
#app .profile-admin-item {border-top:1px solid #dfdfdf;padding:14px 0}
#app .profile-admin-item summary {display:flex;gap:10px;justify-content:space-between;cursor:pointer;min-height:32px;align-items:center}
#app .profile-admin-item summary span {color:#707070;white-space:nowrap;--tl-size:11px}
#app .pass-rank-person {display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0}
#app .pass-rank-avatar {display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;object-fit:cover;border-radius:50%;border:1px solid #dfdfdf;background:#fafafa;color:#171717;--tl-size:12px;--tl-weight:700;overflow:hidden}
#app .pass-rank-name {min-width:0}
#app .pass-rank-name strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
@media(max-width:360px){#app .member-profile{padding:18px}#app .pass-rank-person{gap:5px}#app .pass-rank-avatar{width:26px;height:26px;flex-basis:26px}}

#app .pass-ranking .pass-rank-list .pass-rank-row.is-me {background:#fff}

#app .has-activity-ranks .pass-rank-name {flex-wrap:wrap;gap:3px 4px}
#app .has-activity-ranks .pass-rank-nickname {display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}
#app .rank-activity-badge {padding:1px 3px;border-radius:3px;background:var(--primary-soft);color:var(--ink);white-space:nowrap;--tl-size:11px;--tl-weight:500}
@media(max-width:380px){#app .pass-rank-person.has-activity-ranks{flex-wrap:wrap;gap:3px 5px}#app .has-activity-ranks .pass-rank-name{display:contents}#app .has-activity-ranks .pass-rank-nickname{flex:1;min-width:0}#app .has-activity-ranks .pass-rank-name strong{flex:1;min-width:0}}

#app .pass-ranking .rank-activity-badge {position:relative;isolation:isolate;display:inline-flex;align-items:center;box-sizing:border-box;overflow:hidden;flex:none;height:18px;padding:0 5px;border:1px solid;--tl-size:11px;--tl-weight:600;--tl-leading:14px}
#app .pass-ranking .rank-activity-badge.is-help {background:#edf6ce;color:#435525;border-color:#c8db91;border-radius:20px}
#app .pass-ranking .rank-activity-badge.is-pick {background:#f1eafa;color:#604b7d;border-color:#d7c8eb;border-radius:3px;padding-left:7px}
#app .pass-ranking .rank-activity-badge.is-pick::before {content:"";position:absolute;left:2px;top:4px;bottom:4px;width:2px;border-radius:1px;background:#b6a0d5}
#app .pass-ranking .rank-activity-badge::after {content:"";position:absolute;pointer-events:none;inset:-60% auto -60% -65%;width:42%;background:linear-gradient(110deg,transparent,#fff,transparent);opacity:.48;transform:translateX(-150%) skewX(-16deg);animation:rank-activity-glint 5.4s ease-in-out infinite}
#app .pass-ranking .rank-activity-badge.is-pick::after {animation-delay:.6s}
#app .pass-ranking .pass-rank-list .pass-rank-points small {--tl-size:11px;--tl-weight:400;color:var(--muted)}
@keyframes rank-activity-glint {0%{transform:translateX(-150%) skewX(-16deg)}22%,100%{transform:translateX(530%) skewX(-16deg)}}
@media(prefers-reduced-motion:reduce){#app .pass-ranking .rank-activity-badge::after{animation:none;opacity:0}}