.friends-page{display:grid;gap:24px}.friend-directory{padding:clamp(26px,4vw,48px)}.friend-directory-header{display:flex;align-items:flex-start;gap:16px}.friend-heading-icon,.friend-application-heading>span{width:50px;height:50px;display:grid;flex:0 0 50px;place-items:center;border-radius:14px;color:var(--accent-ink);background:var(--accent)}.friend-heading-icon .lucide,.friend-application-heading .lucide{width:26px;height:26px}.friend-directory h1{margin:0;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.1}.friend-directory-header p{margin:10px 0 0;color:var(--muted);font-size:1.05rem}.friend-grid{margin-top:28px;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}.friend-card{min-width:0;padding:15px;display:grid;grid-template-columns:72px minmax(0, 1fr) auto;align-items:center;gap:14px;border:1px solid var(--line);border-radius:16px;background:var(--control-soft);transition:border-color .2s ease,transform .2s ease}.friend-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}.friend-avatar{width:72px;height:72px;overflow:hidden;display:block;border:2px solid var(--line-strong);border-radius:15px;background:var(--bg-soft)}.friend-avatar img{width:100%;height:100%;display:block;object-fit:cover}.friend-card-content{min-width:0;display:grid;gap:3px}.friend-card-content strong{overflow:hidden;color:var(--text);font-size:1.08rem;text-overflow:ellipsis;white-space:nowrap}.friend-card-content small{overflow:hidden;display:-webkit-box;color:var(--muted);line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.friend-card>.lucide{width:18px;height:18px;color:var(--accent)}.friend-empty{margin-top:28px;min-height:150px;display:grid;place-items:center;align-content:center;gap:10px;border:1px dashed var(--line-strong);border-radius:16px;color:var(--muted);background:var(--control-soft)}.friend-empty .lucide{width:30px;height:30px;color:var(--accent)}.friend-empty p{margin:0}.friend-requirements{padding:clamp(24px,3.5vw,38px)}.friend-requirements-heading{margin-bottom:20px;display:flex;align-items:center;gap:11px}.friend-requirements-heading .lucide{width:23px;height:23px;color:var(--accent)}.friend-requirements-heading h2{margin:0;color:var(--text);font-size:1.35rem}.friend-requirements ul{margin:0;padding:0;display:grid;gap:13px;list-style:none}.friend-requirements li{position:relative;padding-left:22px;color:var(--text-soft);line-height:1.7}.friend-requirements li::before{position:absolute;top:.72em;left:2px;width:7px;height:7px;border-radius:50%;background:var(--accent);content:""}.friend-requirements strong{color:var(--text)}.friend-application-grid{display:grid;grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);gap:24px}.friend-own-site,.friend-application{min-width:0;padding:clamp(24px,3.5vw,38px)}.friend-own-header{margin-bottom:24px;display:flex;align-items:center;gap:16px}.friend-own-avatar{position:relative;width:82px;height:82px;flex:0 0 82px}.friend-own-avatar img{width:100%;height:100%;display:block;border:2px solid var(--accent);border-radius:18px;object-fit:cover}.friend-own-avatar .lucide{position:absolute;right:-5px;bottom:-5px;width:26px;height:26px;padding:4px;border-radius:50%;color:var(--accent-ink);background:var(--accent);stroke-width:3}.friend-own-header h2,.friend-own-header p{margin:0}.friend-own-header h2{color:var(--text);font-size:1.45rem}.friend-own-header p{margin-top:4px;color:var(--muted)}.friend-field-list{display:grid;gap:11px}.friend-field{min-width:0;padding:12px 13px 12px 16px;display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;background:var(--control-soft)}.friend-field>span{min-width:0;display:grid}.friend-field small{color:var(--muted)}.friend-field strong{overflow:hidden;color:var(--text-soft);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.friend-copy-button{position:relative;flex:0 0 auto;color:var(--accent);background:var(--accent-soft)}.friend-copy-button::after{position:absolute;z-index:2;right:0;bottom:calc(100% + 8px);padding:5px 8px;border-radius:6px;color:var(--accent-ink);background:var(--accent);box-shadow:var(--shadow-soft);content:"已复制";font-size:.72rem;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;white-space:nowrap}.friend-copy-button.is-copied::after{opacity:1;transform:translateY(0)}.friend-application-heading{margin-bottom:24px;display:flex;align-items:center;gap:14px}.friend-application-heading h2{margin:0;color:var(--text);font-size:1.45rem}.friend-steps{margin:0;padding:0;display:grid;list-style:none}.friend-steps li{position:relative;padding-bottom:24px;display:grid;grid-template-columns:42px minmax(0, 1fr);gap:14px}.friend-steps li:last-child{padding-bottom:0}.friend-steps li:not(:last-child)::after{position:absolute;top:42px;bottom:0;left:20px;width:2px;background:var(--line);content:""}.friend-step-number{position:relative;z-index:1;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--accent-ink);background:var(--accent);font-weight:800}.friend-steps h3,.friend-steps p{margin:0}.friend-steps h3{color:var(--text);font-size:1.05rem}.friend-steps p{margin-top:4px;color:var(--muted);line-height:1.65}.friend-steps a{color:var(--accent)}.friend-request-template{position:relative;margin-top:12px}.friend-request-template textarea{width:100%;min-height:122px;padding:14px 54px 14px 15px;resize:none;border:1px solid var(--line);border-radius:12px;color:var(--text-soft);background:var(--control-soft);font:inherit;font-size:.88rem;line-height:1.55}.friend-request-template .friend-copy-button{position:absolute;top:10px;right:10px}@media (max-width: 920px){.friend-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}.friend-application-grid{grid-template-columns:minmax(0, 1fr)}}@media (max-width: 680px){.friend-directory{padding:22px 18px}.friend-directory-header{align-items:center}.friend-heading-icon{width:44px;height:44px;flex-basis:44px}.friend-grid{grid-template-columns:minmax(0, 1fr)}.friend-card{grid-template-columns:62px minmax(0, 1fr) auto}.friend-avatar{width:62px;height:62px}.friend-own-site,.friend-application,.friend-requirements{padding:22px 18px}}