.friend-page{position:relative;isolation:isolate;width:min(100%,51.25rem);margin-inline:auto;padding-bottom:2rem}.friend-page__header{margin-bottom:1.2rem;text-align:center}.friend-page__header h1{color:#202733;font-size:clamp(2.2rem,6vw,3.6rem);font-weight:900;line-height:1}.friend-page__header p{margin-top:.8rem;color:#586a82;line-height:1.8}.friend-page__actions{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;justify-content:center}.friend-sort-switch{display:inline-flex;flex-wrap:wrap;gap:.45rem;justify-content:center;margin-top:.9rem;border:1px solid rgba(255,255,255,.68);border-radius:9999px;background:#ffffff57;padding:.28rem;box-shadow:inset 0 1px #ffffffb8}.friend-sort-switch__button{position:relative;display:inline-flex;min-height:2rem;align-items:center;gap:.35rem;border-radius:9999px;padding:.32rem .75rem;color:#6f849d;font-size:.78rem;font-weight:900;transition:background .18s ease,color .18s ease,transform .18s ease}.friend-sort-switch__button[aria-pressed=true],.friend-sort-switch__button:hover{background:#ffe8eedb;color:#9f6d7e;transform:translateY(-.05rem)}.friend-sort-switch__button[aria-pressed=true]{box-shadow:0 0 0 3px #e8b8c833}.friend-sort-switch__button[aria-pressed=true]:before{width:.42rem;height:.42rem;border-radius:9999px;background:currentColor;content:""}.friend-page[data-admin=false] [data-admin-only]{display:none}.friend-submit-button{display:inline-flex;min-height:2.65rem;align-items:center;justify-content:center;margin-top:1rem;border:1px solid rgba(255,255,255,.86);border-radius:9999px;background:linear-gradient(145deg,#ffffffb8,#ffe8ee6b),radial-gradient(circle at 30% 10%,rgba(255,255,255,.9),transparent 42%);padding:.55rem 1.25rem;color:#9f6d7e;font-size:.9rem;font-weight:900;box-shadow:inset 0 1px #ffffffdb,0 14px 34px #9f1d4e2e;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.friend-submit-button:hover{border-color:#e8b8c8e6;box-shadow:inset 0 1px #ffffffe6,0 18px 42px #9f1d4e3d;transform:translateY(-.12rem)}.friend-admin-check-all{display:inline-flex;min-height:2.65rem;align-items:center;justify-content:center;margin-top:1rem;border:1px solid rgba(159,210,249,.64);border-radius:9999px;background:#ffffff6b;padding:.55rem 1rem;color:#2d719f;font-size:.86rem;font-weight:900;box-shadow:inset 0 1px #ffffffb8,0 12px 28px #4a94d224;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.friend-admin-check-all:hover{border-color:#9fd2f9f0;box-shadow:inset 0 1px #ffffffdb,0 16px 34px #4a94d233;transform:translateY(-.12rem)}.friend-admin-message{margin:0;min-height:1.3rem;color:#9f6d7e;font-size:.82rem;font-weight:700}.friend-notice,.friend-section{border:1px solid var(--glass-border);border-radius:.5rem;background:linear-gradient(145deg,#ffffff9e,#ffffff47),var(--surface);box-shadow:inset 0 1px #ffffffbd,inset 0 -1px #ffffff2e,0 18px 50px #57314a24}.friend-notice{margin-bottom:1.25rem;padding:clamp(1.1rem,3vw,1.5rem);background:linear-gradient(145deg,#ffffff94,#ffffff3d)}.friend-notice h2,.friend-section h2{color:#202733;font-size:1.55rem;font-weight:900}.friend-notice p{margin-top:.55rem;color:#586a82;line-height:1.8}.friend-site-info{display:grid;gap:.35rem;margin-top:.85rem;border:1px solid rgba(255,255,255,.62);border-radius:.45rem;background:#ffffff57;padding:.85rem;color:#48566b;font-size:.88rem;line-height:1.65;overflow-wrap:anywhere;box-shadow:inset 0 1px #ffffffb8}.friend-section{margin-top:1.25rem;padding:clamp(1rem,2.5vw,1.25rem)}.friend-link-items{display:inline-flex;width:100%;flex-wrap:wrap;gap:1.25rem;justify-content:center;margin-top:1rem}.friend-link-item{position:relative;width:11.85rem;min-height:12.05rem;max-height:18rem;opacity:1;overflow:hidden;transform:translateY(0) scale(1);transition:opacity .22s ease,transform .22s ease,max-height .26s ease,min-height .26s ease,margin .26s ease}.friend-link-item[data-friend-hidden=true]{min-height:0;max-height:0;margin:0;opacity:0;pointer-events:none;transform:translateY(.35rem) scale(.98)}.friend-section__toggle{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;margin:1rem auto 0;border:1px solid rgba(255,255,255,.82);border-radius:9999px;background:linear-gradient(145deg,#ffffffad,#ffe8ee5c),radial-gradient(circle at 30% 10%,rgba(255,255,255,.86),transparent 42%);padding:.48rem 1.05rem;color:#9f6d7e;font-size:.82rem;font-weight:900;box-shadow:inset 0 1px #ffffffd1,0 12px 28px #9f1d4e24;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}.friend-section__toggle:hover{border-color:#e8b8c8e0;background:linear-gradient(145deg,#ffffffc7,#ffe8ee7a),radial-gradient(circle at 30% 10%,rgba(255,255,255,.9),transparent 42%);box-shadow:inset 0 1px #ffffffe6,0 16px 36px #9f1d4e33;transform:translateY(-.1rem)}.friend-link-inner{position:relative;display:grid;height:100%;justify-items:center;align-content:start;border:1px solid rgba(255,255,255,.9);border-radius:.625rem;background:linear-gradient(180deg,#ffffff94,#ffffff42);padding:1.25rem .75rem .85rem;color:#202733;text-align:center;box-shadow:inset 0 1px #ffffffc7,0 1px 30px -4px #9e859280;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.friend-link-inner:hover{border-color:#fffffff5;box-shadow:inset 0 1px #ffffffe0,0 18px 42px #57314a33;transform:translateY(-.18rem)}.friend-card__avatar-wrap{display:inline-flex;width:5.625rem;height:5.625rem;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.84);border-radius:9999px;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.92),transparent 34%),linear-gradient(135deg,#ffc9d8,#62a9d8);box-shadow:0 12px 28px #57314a29;overflow:hidden}.friend-card__avatar-wrap img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.friend-card__availability{--friend-availability-dot: #f6c945;position:absolute;top:.45rem;right:.45rem;z-index:2;display:inline-flex;min-width:2.85rem;height:1.2rem;align-items:center;justify-content:center;gap:.22rem;border:1px solid color-mix(in srgb,var(--friend-availability-dot) 28%,rgba(255,255,255,.9));border-radius:9999px;padding-inline:.38rem;background:linear-gradient(180deg,#ffffffb8,#ffffff57),color-mix(in srgb,var(--friend-availability-dot) 7%,transparent);color:#596c82;font-size:.62rem;font-weight:900;line-height:1;box-shadow:inset 0 1px #ffffffb8,0 5px 14px color-mix(in srgb,var(--friend-availability-dot) 12%,transparent)}.friend-card__availability:before{width:.36rem;height:.36rem;border:1px solid rgba(255,255,255,.86);border-radius:9999px;background:var(--friend-availability-dot);box-shadow:0 0 0 .16rem color-mix(in srgb,var(--friend-availability-dot) 18%,transparent);content:""}.friend-card__availability--ok{--friend-availability-dot: #2fbf71;color:#2f6f51}.friend-card__availability--error{--friend-availability-dot: #ff4f7b;color:#9f4f68}.friend-card__availability--unknown{--friend-availability-dot: #f6c945;color:#725b12}.friend-admin-actions{position:absolute;right:.45rem;bottom:.45rem;left:.45rem;z-index:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;opacity:0;pointer-events:none;transform:translateY(.4rem);transition:opacity .18s ease,transform .18s ease}.friend-page[data-admin=true] .friend-link-item:hover .friend-admin-actions,.friend-page[data-admin=true] .friend-link-item:focus-within .friend-admin-actions{opacity:1;pointer-events:auto;transform:translateY(0)}.friend-admin-actions button,.friend-admin-actions a{display:inline-flex;min-height:1.85rem;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.72);border-radius:9999px;background:#ffffffc2;color:#7a5261;font-size:.68rem;font-weight:900;line-height:1;text-align:center;box-shadow:0 8px 20px #57314a24}.friend-admin-actions button:hover,.friend-admin-actions a:hover{background:#ffe8eeeb;color:#9f6d7e}.friend-card__name{width:100%;margin-top:.68rem;overflow:hidden;color:#202733;font-size:.98rem;font-weight:900;text-overflow:ellipsis;white-space:nowrap}.friend-card__desc{display:-webkit-box;min-height:2.6rem;margin-top:.35rem;overflow:hidden;color:#586a82;font-size:.8rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.friend-link-inner--error .friend-card__desc{color:#8b3a52}.friend-modal-open{overflow:hidden}.friend-modal-open .smooth-scroll-viewport{overflow-y:hidden}.friend-modal[hidden]{display:none}.friend-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:.75rem;overflow:hidden;animation:friend-modal-fade .22s ease both}.friend-modal__backdrop{position:absolute;inset:0;background:#fff9fb61}@keyframes friend-modal-fade{0%{opacity:0}to{opacity:1}}.friend-modal[data-friend-modal]{align-items:center;justify-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain}.friend-modal[data-friend-modal] .friend-modal__backdrop{inset:0;width:auto;height:auto;border:0;border-radius:0;background:#fff9fb7a;box-shadow:none}.friend-modal__panel{position:relative;width:min(100%,42rem);max-height:min(86vh,44rem);overflow:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.78);border-radius:.9rem;background:radial-gradient(circle at 50% 8%,rgba(244,248,252,.72),transparent 18rem),#ffffffd6;padding:clamp(.75rem,2vw,1.1rem);color:#505050;box-shadow:inset 0 1px #ffffffe6,0 24px 80px #2027332e}.friend-modal__panel--edit{width:min(100%,32rem);max-height:min(86vh,38rem);overflow:auto;padding:clamp(1.05rem,2.8vw,1.45rem)}.friend-modal__panel--edit .friend-modal__close{top:1.1rem;right:1.1rem}.friend-modal__panel--edit h2{font-size:clamp(1.45rem,3vw,1.8rem)}.friend-modal__panel--edit .friend-modal__intro{margin-top:.45rem;font-size:.88rem;line-height:1.55}.friend-modal__panel--edit .friend-form{grid-template-columns:1fr;gap:.62rem;margin-top:1rem}.friend-modal__panel--edit .friend-form label{gap:.32rem;font-size:.82rem}.friend-modal__panel--edit .friend-form input,.friend-modal__panel--edit .friend-form textarea,.friend-modal__panel--edit .friend-form select{min-height:2.45rem;border-radius:.55rem;padding:.52rem .72rem;font-size:.86rem}.friend-modal__panel--edit .friend-form textarea{min-height:3.45rem;resize:none}.friend-modal__close{position:absolute;top:.8rem;right:.85rem;display:inline-grid;width:2rem;height:2rem;place-items:center;color:#8b8b8b;transition:color .18s ease,transform .18s ease}.friend-modal__close:hover{color:#9f6d7e;transform:rotate(4deg)}.friend-modal__close span{grid-area:1 / 1;width:1.8rem;height:.12rem;border-radius:9999px;background:currentColor}.friend-modal__close span:first-child{transform:rotate(45deg)}.friend-modal__close span:last-child{transform:rotate(-45deg)}.friend-modal__panel h2{padding-right:2.5rem;color:#505050;font-size:clamp(1.25rem,2.4vw,1.55rem);font-weight:900;line-height:1.1}.friend-modal__intro{margin-top:.28rem;color:#666;font-size:.82rem;line-height:1.35}.friend-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.48rem .65rem;margin-top:.65rem}.friend-form label{display:grid;gap:.22rem;color:#666;font-size:.78rem;font-weight:700}.friend-form input,.friend-form textarea,.friend-form select{width:100%;min-height:2.25rem;border:1px solid rgba(232,232,232,.72);border-radius:.55rem;background:#ffffff94;padding:.42rem .62rem;color:#505050;font-size:.9rem;outline:none;box-shadow:inset 0 1px #fffc;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.friend-form textarea{min-height:3rem;resize:none}.friend-form label:has(textarea){grid-column:1 / -1}.friend-form .captcha-field{grid-column:1 / -1}.friend-form input::-moz-placeholder{color:#50505085}.friend-form input::placeholder{color:#50505085}.friend-form input:focus,.friend-form textarea:focus,.friend-form select:focus{border-color:#9fd2f9eb;background:#ffffffc2;box-shadow:inset 0 1px #ffffffeb,0 0 0 3px #9fd2f92e}.friend-form__captcha{display:grid;grid-template-columns:minmax(9rem,13.2rem) minmax(0,1fr);gap:.85rem;align-items:end}.friend-form__captcha-image{display:flex;min-height:3.55rem;align-items:center;justify-content:center;gap:.35rem;border-radius:.55rem;background:repeating-linear-gradient(18deg,#9fd2f947 0 .2rem,#ffffff80 .2rem .42rem),#ffffff9e;color:#5f6c9f;font-family:Georgia,Times New Roman,serif;font-size:1.6rem;font-weight:900;letter-spacing:0;overflow:hidden;transform:skew(-4deg)}.friend-form__captcha-image span:nth-child(1),.friend-form__captcha-image span:nth-child(4){color:#3a9c61;transform:rotate(-12deg)}.friend-form__captcha-image span:nth-child(2),.friend-form__captcha-image span:nth-child(6){color:#9f6d7e;transform:rotate(13deg)}.friend-form__captcha-image span:nth-child(3),.friend-form__captcha-image span:nth-child(5){color:#566fb8;transform:rotate(-4deg)}.friend-form__send{justify-self:end;grid-column:1 / -1;display:inline-flex;width:5rem;height:2.75rem;align-items:center;justify-content:center;border-radius:2.5rem;background:#9fd2f9;color:#fff;box-shadow:0 16px 30px #4a94d238;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}.friend-form__send:hover{background:#88c5f4;box-shadow:0 20px 38px #4a94d247;transform:translateY(-.12rem)}.friend-form__send svg{width:1.5rem;height:1.5rem;fill:currentColor;transform:translate(-.05rem)}.friend-form__save{justify-self:end;grid-column:1 / -1;display:inline-flex;min-height:2.65rem;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.86);border-radius:9999px;background:linear-gradient(145deg,#ffffffbd,#ffe8ee85),radial-gradient(circle at 30% 10%,rgba(255,255,255,.9),transparent 42%);padding:.62rem 1.35rem;color:#9f6d7e;font-size:.9rem;font-weight:900;box-shadow:inset 0 1px #ffffffdb,0 14px 34px #9f1d4e2e}:root[data-theme=dark] .friend-notice,:root[data-theme=dark] .friend-section{border-color:var(--night-border);background:linear-gradient(145deg,var(--night-surface),rgba(18,24,34,.66)),var(--night-surface)}:root[data-theme=dark] .friend-page__header h1,:root[data-theme=dark] .friend-notice h2,:root[data-theme=dark] .friend-section h2,:root[data-theme=dark] .friend-card__name{color:var(--night-text)}:root[data-theme=dark] .friend-page__header p,:root[data-theme=dark] .friend-notice p,:root[data-theme=dark] .friend-card__desc{color:var(--night-muted)}:root[data-theme=dark] .friend-site-info,:root[data-theme=dark] .friend-link-inner{border-color:var(--night-border);background:linear-gradient(180deg,var(--night-surface-soft),rgba(18,24,34,.54))}:root[data-theme=dark] .friend-site-info{color:var(--night-muted)}:root[data-theme=dark] .friend-submit-button{border-color:#ffffff2e;background:linear-gradient(145deg,#2027339e,#6c183b57),radial-gradient(circle at 30% 10%,rgba(255,255,255,.12),transparent 42%);color:#ffe8ee}:root[data-theme=dark] .friend-admin-check-all{border-color:#9fd2f938;background:#20273385;color:#d9efff}:root[data-theme=dark] .friend-sort-switch{border-color:#ffffff24;background:#2027336b}:root[data-theme=dark] .friend-sort-switch__button{color:#d8e0ea}:root[data-theme=dark] .friend-sort-switch__button[aria-pressed=true],:root[data-theme=dark] .friend-sort-switch__button:hover{background:#6c183b75;color:#ffe8ee}:root[data-theme=dark] .friend-section__toggle{border-color:#ffffff29;background:linear-gradient(145deg,#2027339e,#6c183b4d),radial-gradient(circle at 30% 10%,rgba(255,255,255,.12),transparent 42%);color:#ffe8ee;box-shadow:inset 0 1px #ffffff1f,0 12px 28px #00000038}:root[data-theme=dark] .friend-section__toggle:hover{border-color:#ffe8ee52;background:linear-gradient(145deg,#202733b8,#6c183b6b),radial-gradient(circle at 30% 10%,rgba(255,255,255,.14),transparent 42%)}:root[data-theme=dark] .friend-admin-actions button,:root[data-theme=dark] .friend-admin-actions a{border-color:#ffffff24;background:#202733d1;color:#ffe8ee}:root[data-theme=dark] .friend-modal__backdrop{background:#0f121875}:root[data-theme=dark] .friend-modal[data-friend-modal] .friend-modal__backdrop{background:#0f121894}:root[data-theme=dark] .friend-modal__panel{border-color:#ffffff29;background:radial-gradient(circle at 50% 8%,rgba(98,169,216,.1),transparent 18rem),#202733e0;color:#d8e0ea}:root[data-theme=dark] .friend-modal__panel h2,:root[data-theme=dark] .friend-modal__intro,:root[data-theme=dark] .friend-form label{color:#f8fafc}:root[data-theme=dark] .friend-form input,:root[data-theme=dark] .friend-form textarea,:root[data-theme=dark] .friend-form select{border-color:#ffffff24;background:#0f12185c;color:#f8fafc}:root[data-theme=dark] .friend-form input::-moz-placeholder{color:#d8e0ea8f}:root[data-theme=dark] .friend-form input::placeholder{color:#d8e0ea8f}@media(prefers-reduced-motion:reduce){.friend-sort-switch__button,.friend-submit-button,.friend-admin-check-all,.friend-link-item,.friend-link-inner,.friend-card__avatar,.friend-section__toggle,.friend-modal,.friend-modal__close,.friend-form__send{transition:none}.friend-modal{animation:none}.friend-sort-switch__button:hover,.friend-submit-button:hover,.friend-admin-check-all:hover,.friend-link-inner:hover,.friend-section__toggle:hover{transform:none}}@media(max-width:640px){.friend-link-items{gap:.8rem}.friend-link-item{width:calc((100% - .8rem)/2);min-width:8.75rem}.friend-modal{padding:.75rem}.friend-modal[data-friend-modal]{padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.friend-modal__panel{width:100%;max-height:min(88vh,42rem);min-height:auto;border-radius:.85rem}.friend-modal__panel--edit{width:min(100%,22rem);max-height:min(88vh,36rem);min-height:auto;border-radius:.85rem}.friend-modal__close{top:1.35rem;right:1.25rem}.friend-form__captcha{grid-template-columns:1fr}.friend-form__send{width:6.8rem;height:4.3rem}}