/* Friends page */
.friends-page{display:grid;gap:14px}
.fr-card{border:1px solid #2b434d;border-radius:14px;background:#111f27;padding:16px}
.fr-card h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:17px;color:#f1f7f4}
.fr-muted{margin:10px 0 0;font-size:12px;line-height:1.6;color:#8ea6b1}
.fr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fr-add-form{display:flex;gap:10px}
.fr-add-form input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:10px;border:1px solid #4a6878;background:#0b1820;color:#eaf4f8;font:700 16px ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase}
.fr-add-form button{min-height:48px;white-space:nowrap}
.fr-myid{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:12px;padding-top:12px;border-top:1px solid #1f3540;font-size:13px;color:#b9cdd6}
.fr-myid code{font-size:15px;font-weight:800;letter-spacing:1px;color:#bff6dc}
.fr-myid button,.fr-wa{min-height:38px}
.fr-wa{display:inline-flex;align-items:center;padding:0 12px;border-radius:9px;background:#25d366;color:#06240f;font-weight:800;text-decoration:none}
.fr-count,.fr-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:#e5484d;color:#fff;font-size:11px;font-weight:800}
.fr-badge{margin-inline-start:auto}
.mobile-nav [data-page="friends"]{position:relative}
.mobile-nav [data-page="friends"] .fr-badge{position:absolute;top:4px;inset-inline-end:18%;min-width:16px;height:16px;font-size:10px}
.fr-requests ul,.fr-sent ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fr-requests li,.fr-sent li{display:flex;align-items:center;gap:10px}
.fr-requests li button,.fr-sent li button{min-height:40px}
.fr-who{flex:1;min-width:0;display:grid;gap:2px}
.fr-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-who small{color:#8ea6b1;font-size:11px}
.fr-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2d5961;color:#bff6dc;font-weight:800}
.fr-table-wrap{overflow-x:auto}
.fr-table{width:100%;border-collapse:collapse;font-size:14px}
.fr-table th{font-size:11px;font-weight:700;color:#8ea6b1;text-align:start;padding:6px 8px;border-bottom:1px solid #24404b}
.fr-table td{padding:10px 8px;border-bottom:1px solid #1b313b;vertical-align:middle;color:#dce9ee}
.fr-table tr.is-me td{background:#16301f}
.fr-table em{font-style:normal;font-size:11px;color:#abe96b;margin-inline-start:4px}
.fr-rank{font-weight:800;color:#8ea6b1;width:24px}
.fr-name{display:flex;align-items:center;gap:10px;min-width:0}
.fr-name>span:last-child{display:grid;gap:2px;min-width:0}
.fr-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.fr-name small{font-size:11px;color:#8ea6b1}
.fr-level{display:inline-block;padding:3px 8px;border-radius:20px;background:#22402c;color:#c9f3a8;font-size:12px;white-space:nowrap}
.fr-remove{font-size:20px;line-height:1;color:#8ea6b1;min-height:36px;min-width:36px}
@media (max-width:600px){
  .fr-add-form{flex-direction:column}
  .fr-hide-sm{display:none}
  .fr-name strong{max-width:110px}
  .fr-card{padding:14px}
}
.fr-remove{border:0!important;background:none!important;box-shadow:none!important}
@media (max-width:600px){.fr-table .fr-name small{display:none}.fr-table td,.fr-table th{padding-inline:6px}.fr-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}