.page-header{margin-bottom:2.5rem}.page-title{font-size:1.75rem;font-weight:600;color:var(--color-text-strong);margin-bottom:.5rem;letter-spacing:-.02em}.page-description{font-size:.9375rem;color:var(--color-text-subtle);line-height:var(--line-height-zh)}.friends-container{margin-bottom:3rem}.friends-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.friend-item{border:1px solid var(--color-border);border-radius:8px;transition:border-color .2s ease,box-shadow .2s ease}.friend-item:hover{border-color:var(--color-link-underline);box-shadow:0 2px 8px #0000000a}.friend-link{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;text-decoration:none;color:inherit;border-radius:8px;outline:none;border-bottom:none}.friend-link:hover,.friend-link:focus,.friend-link:focus-visible,.friend-link:active{outline:none;border-bottom:none}.friend-avatar{width:48px;height:48px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--color-code-bg);display:flex;align-items:center;justify-content:center}.friend-avatar img{width:100%;height:100%;object-fit:cover}.friend-avatar-placeholder{font-size:1.25rem;font-weight:600;color:var(--color-text-subtle);text-transform:uppercase}.friend-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}.friend-name{font-size:1rem;font-weight:500;color:var(--color-text-strong);letter-spacing:.01em}.friend-desc{font-size:.8125rem;color:var(--color-meta);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-external-icon{width:16px;height:16px;flex-shrink:0;stroke:var(--color-meta);stroke-width:2;fill:none;opacity:0;transform:translate(-4px);transition:opacity .2s ease,transform .2s ease}.friend-link:hover .friend-external-icon{opacity:1;transform:translate(0)}.friends-empty{text-align:center;padding:3rem 1.5rem;color:var(--color-meta);font-size:.9375rem}.friends-apply{border-top:1px solid var(--color-border);padding-top:2rem;margin-top:2rem}.friends-apply h2{font-size:1.125rem;font-weight:600;color:var(--color-text-strong);margin-bottom:.75rem}.friends-apply p{font-size:.9375rem;color:var(--color-text-subtle);line-height:var(--line-height-zh)}.friends-apply .apply-info-text{text-align:center}.friends-my-card{border-top:1px solid var(--color-border);padding-top:2rem;margin-top:2rem}.friends-my-card h2{font-size:1.125rem;font-weight:600;color:var(--color-text-strong);margin-bottom:.75rem}.my-card-hint{font-size:.875rem;color:var(--color-meta);margin-bottom:1rem}.my-card-box{border:1px solid var(--color-border);border-radius:12px;padding:1.5rem;background:var(--color-bg);display:flex;align-items:center;gap:1.25rem}.my-card-avatar{width:72px;height:72px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--color-code-bg);border:1px solid var(--color-border)}.my-card-avatar img{width:100%;height:100%;object-fit:cover}.my-card-content{flex:1;min-width:0;border:1px solid var(--color-border);border-radius:8px;overflow:hidden;background:var(--color-bg)}.my-card-row{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;border-bottom:1px solid var(--color-border);transition:background-color .15s ease}.my-card-row:last-child{border-bottom:none}.my-card-row:hover{background-color:var(--color-code-bg)}.my-card-label{font-size:.8125rem;color:var(--color-meta);min-width:3rem;flex-shrink:0}.my-card-value{flex:1;font-size:.9375rem;color:var(--color-text-strong);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.my-card-copy-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;margin-left:.5rem;border:1px solid var(--color-border);background:var(--color-bg);border-radius:6px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;color:var(--color-meta);flex-shrink:0}.my-card-copy-btn:hover{background-color:var(--color-code-bg);border-color:var(--color-link-underline);color:var(--color-text-strong)}.my-card-copy-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}.my-card-copy-all{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;margin-top:1rem;font-size:.875rem;font-weight:500;color:var(--color-text-strong);background-color:var(--color-code-bg);border:1px solid var(--color-border);border-radius:6px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}.my-card-copy-all:hover{background-color:var(--color-border);border-color:var(--color-link-underline)}.my-card-copy-all svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}.my-card-copy-btn,.my-card-copy-all{position:relative}.copy-success{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--color-accent);white-space:nowrap;opacity:0;transition:opacity .2s ease;pointer-events:none}.copy-success.show{opacity:1}.copy-success svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.my-card-copy-all .copy-success{left:calc(100% + 12px)}@media(max-width:600px){.page-title{font-size:1.5rem}.friend-link{padding:.875rem 1rem;gap:.875rem}.friend-avatar{width:44px;height:44px}.friend-name{font-size:.9375rem}.friend-desc{font-size:.75rem}.friend-external-icon{opacity:1;transform:none}.my-card-box{padding:1.25rem}.my-card-avatar{width:64px;height:64px;margin-bottom:1rem}.my-card-row{padding:.75rem .875rem}.my-card-value{font-size:.875rem}.copy-success{left:auto;right:calc(100% + 10px);top:50%}.my-card-copy-all .copy-success{left:auto;right:calc(100% + 12px)}}
