.friends-body{
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 50% 20%,rgba(126,47,255,.14),transparent 34%),
        #07070d;
}

.friends-page{
    width:100%;
    min-height:100vh;
    padding:14px 16px 145px;
}

.friends-header{
    display:flex;
    align-items:center;
    gap:13px;
}

.friends-header-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#14131d;
    color:white;
    text-decoration:none;
}

.friends-header-btn{
    cursor:pointer;
}

.friends-header > .friends-header-btn:first-of-type{
    margin-left:auto;
}

.friends-add-btn{
    margin-left:8px;
    font-size:28px;
    font-weight:300;
}

.friends-header-btn svg{
    width:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}

.friends-request-btn {
    position: relative;
}

.friends-request-btn span {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #08070e;
    border-radius: 999px;
    background: #ff2d81;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 15px;
}

.friend-request-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.friend-request-tabs button {
    padding: 11px;
    border: 1px solid #2c2939;
    border-radius: 12px;
    background: #15131e;
    color: #8f8b9e;
    font-weight: 800;
}

.friend-request-tabs button.active {
    border-color: #ff2d81;
    background: rgba(255, 45, 129, 0.14);
    color: #fff;
}

.friend-request-list {
    display: grid;
    gap: 10px;
    max-height: min(55vh, 520px);
    overflow-y: auto;
}

.friend-request-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #292635;
    border-radius: 16px;
    background: #11101a;
}

.friend-request-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.friend-request-copy strong,
.friend-request-copy small {
    display: block;
}

.friend-request-copy small {
    margin-top: 3px;
    color: #898596;
}

.friend-request-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.friend-request-actions button {
    flex: 1;
    padding: 10px;
    border: 1px solid #363244;
    border-radius: 11px;
    background: #1a1824;
    color: #fff;
    font-weight: 800;
}

.friend-request-actions .accept {
    border-color: #ff2d81;
    background: linear-gradient(135deg, #a842de, #ff2d81);
}

.friend-request-empty {
    padding: 28px 16px;
    color: #8f8b9e;
    text-align: center;
}

.friends-kicker{
    color:#ff3d91;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.friends-header h1{
    font-size:30px;
    line-height:1;
}

.friend-stories{
    display:flex;
    gap:13px;
    margin:20px 0 18px;
    padding:0 0 5px;
    overflow-x:auto;
    scrollbar-width:none;
}

.accepted-friends-list {
    display: contents;
}

.chat-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: min(100%, 430px);
    margin: 0 auto 14px;
}

.chat-view-tabs button {
    padding: 11px 8px;
    border: 1px solid #2d2939;
    border-radius: 12px;
    background: #15131e;
    color: #918c9e;
    font-weight: 800;
}

.chat-view-tabs button.active {
    border-color: #ff2d81;
    background: rgba(255, 45, 129, 0.13);
    color: #fff;
}

.chat-view-tabs span {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 999px;
    background: #ff2d81;
    color: #fff;
    font-size: 10px;
}

.friend-stories::-webkit-scrollbar{
    display:none;
}

.story-card{
    position:relative;
    min-width:58px;
    border:0;
    background:transparent;
    color:#aaa6b7;
    cursor:pointer;
}

.story-avatar{
    width:54px;
    height:54px;
    margin:auto;
    border:2px solid #ff2d81;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#282537,#111019);
    color:white;
    font-size:18px;
    font-weight:800;
    box-shadow:0 0 0 3px #08070d;
    overflow:hidden;
}

.story-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.add-story .story-avatar{
    border-style:dashed;
    border-color:#514c63;
    color:#ff2d81;
    font-size:28px;
    font-weight:400;
}

.story-cyan{background:linear-gradient(145deg,#07cbd9,#17355a)}
.story-pink{background:linear-gradient(145deg,#ff398f,#782b78)}
.story-orange{background:linear-gradient(145deg,#ff8a2d,#71371f)}
.story-purple{background:linear-gradient(145deg,#a646ff,#34245f)}

.story-card small{
    display:block;
    margin-top:8px;
    font-size:11px;
}

.story-live{
    position:absolute;
    top:42px;
    left:50%;
    padding:2px 5px;
    border-radius:999px;
    background:#ff2d81;
    color:white;
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
    transform:translateX(-50%);
}

.friends-tabs{
    height:46px;
    padding:4px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    display:flex;
    background:#14131d;
}

.friends-tabs button{
    flex:1;
    border:0;
    border-radius:999px;
    background:transparent;
    color:#8c8899;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.friends-tabs button.active{
    background:linear-gradient(90deg,#a746de,#ff2d81);
    color:white;
}

.friends-activity-view[hidden],
.friends-simple-view[hidden],
.friends-people-view[hidden]{
    display:none;
}

.activity-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
    margin-top:18px;
}

.activity-summary-card{
    min-height:135px;
    padding:17px 10px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:#15131e;
    color:white;
    cursor:pointer;
    transition:transform .2s ease,border-color .2s ease;
}

.activity-summary-card:hover,
.activity-summary-card.active{
    transform:translateY(-2px);
}

.activity-summary-card.at-flare{
    background:linear-gradient(145deg,rgba(111,49,19,.72),rgba(44,23,22,.9));
    color:#ff8139;
}

.activity-summary-card.on-way{
    background:linear-gradient(145deg,rgba(16,75,96,.75),rgba(17,37,58,.92));
    color:#20dce7;
}

.activity-summary-card.looking{
    background:linear-gradient(145deg,rgba(103,21,78,.72),rgba(48,20,57,.92));
    color:#ff3d9d;
}

.activity-summary-card.tickets{
    background:linear-gradient(145deg,rgba(81,23,99,.72),rgba(36,18,61,.92));
    color:#c65aff;
}

.activity-summary-card.active{
    border-color:currentColor;
    box-shadow:0 0 28px color-mix(in srgb,currentColor 25%,transparent);
}

.activity-summary-icon{
    min-height:28px;
    font-size:25px;
}

.activity-summary-card strong{
    margin-top:5px;
    color:white;
    font-size:25px;
}

.activity-summary-card small{
    max-width:85px;
    margin-top:6px;
    color:#beb8c6;
    font-size:10px;
    font-weight:900;
    line-height:1.35;
    letter-spacing:.08em;
    text-align:center;
    text-transform:uppercase;
}

.activity-list-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin:28px 3px 13px;
}

.activity-list-heading > div{
    display:flex;
    align-items:center;
    gap:10px;
}

.activity-heading-icon{
    color:#ff782f;
    font-size:22px;
}

.activity-list-heading small{
    color:#7e798a;
    font-size:9px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.activity-list-heading h2{
    margin-top:3px;
    font-size:20px;
}

.activity-list-heading > span{
    color:#898495;
    font-size:11px;
    font-weight:800;
}

.activity-list{
    display:grid;
    gap:10px;
}

.friend-activity-card{
    width:100%;
    min-height:94px;
    padding:12px 17px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:26px;
    display:flex;
    align-items:center;
    gap:14px;
    background:
        radial-gradient(circle at 70% 20%,rgba(137,44,196,.08),transparent 30%),
        #12111a;
    color:white;
    text-align:left;
    cursor:pointer;
}

.friend-activity-card[hidden]{
    display:none;
}

.friend-activity-card img{
    width:60px;
    height:60px;
    flex:0 0 60px;
    border:2px solid rgba(255,255,255,.75);
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

.friend-activity-copy{
    min-width:0;
    flex:1;
}

.friend-activity-copy strong,
.friend-activity-copy small{
    display:block;
}

.friend-activity-copy strong{
    font-size:17px;
}

.friend-activity-copy small{
    margin-top:4px;
    overflow:hidden;
    color:#8f8a9b;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.friend-activity-place{
    max-width:160px;
    color:#ff7b31;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-align:right;
    text-transform:uppercase;
}

.friend-activity-place.cyan{color:#23dce8}
.friend-activity-place.pink{color:#ff4a9e}
.friend-activity-place.purple{color:#c45cff}

.friends-simple-view{
    min-height:430px;
    margin-top:18px;
    padding:60px 20px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:28px;
    background:linear-gradient(145deg,rgba(169,63,226,.08),rgba(255,45,129,.035));
    text-align:center;
}

.friends-simple-icon{
    color:#ff3d96;
    font-size:42px;
}

.friends-simple-view h2{
    margin-top:13px;
    font-size:27px;
}

.friends-simple-view p{
    margin-top:8px;
    color:#8e899a;
    font-size:13px;
}

.friends-simple-view button{
    height:43px;
    margin-top:20px;
    padding:0 19px;
    border:0;
    border-radius:999px;
    background:linear-gradient(90deg,#aa45df,#ff2d81);
    color:white;
    font-weight:900;
    cursor:pointer;
}

.friends-chat-list{
    display:grid;
    gap:9px;
    width:min(100%,650px);
    margin:24px auto 0;
    text-align:left;
}

.friends-chat-list:empty{
    display:none;
}

.chat-preview{
    width:100%;
    min-height:76px !important;
    height:auto !important;
    margin:0 !important;
    padding:10px 14px !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:20px !important;
    display:flex;
    align-items:center;
    gap:12px;
    background:#111019 !important;
    color:white !important;
    text-align:left;
}

.chat-preview img{
    width:50px;
    height:50px;
    flex:0 0 50px;
    border:2px solid #ff2d81;
    border-radius:50%;
    object-fit:cover;
}

.chat-preview-copy{
    min-width:0;
    flex:1;
}

.chat-preview-copy strong,
.chat-preview-copy small{
    display:block;
}

.chat-preview-copy small{
    margin-top:4px;
    overflow:hidden;
    color:#918c9c;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chat-preview-time{
    color:#777282;
    font-size:9px;
    font-weight:800;
}

.nearby-row{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.nearby-label{
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    background:#14131d;
    font-size:11px;
    font-weight:900;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.nearby-label::before{
    content:"\2723";
    margin-right:7px;
    color:#ff2d81;
}

.nearby-label i{
    display:inline-block;
    width:6px;
    height:6px;
    margin-left:6px;
    border-radius:50%;
    background:#ff2d81;
}

.nearby-tools{
    display:flex;
    gap:8px;
}

.nearby-tools button{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#14131d;
    color:#9995aa;
    cursor:pointer;
}

.nearby-tools svg{
    width:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.discover-tabs{
    height:43px;
    padding:4px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    display:flex;
    background:#14131d;
}

.discover-tabs button{
    flex:1;
    border:0;
    border-radius:999px;
    background:transparent;
    color:white;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
}

.discover-tabs button.active{
    background:linear-gradient(90deg,#a746de,#ff2d81);
}

.friends-filters{
    display:flex;
    gap:8px;
    margin:14px 0;
    overflow-x:auto;
    scrollbar-width:none;
}

.friends-filters button{
    padding:10px 15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:#111019;
    color:#a8a4b5;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
}

.friends-filters button.active{
    border-color:transparent;
    background:linear-gradient(90deg,#ac48db,#ff2d81);
    color:white;
}

.swipe-stage{
    position:relative;
    height:clamp(380px,54vh,610px);
    min-height:380px;
    margin-top:20px;
    perspective:1000px;
}

.swipe-card{
    position:absolute;
    inset:0;
    border:1px solid rgba(255,255,255,.12);
    border-radius:31px;
    overflow:hidden;
    background:#17151f;
    box-shadow:0 24px 70px rgba(0,0,0,.55),0 14px 35px rgba(144,45,255,.18);
    touch-action:none;
    user-select:none;
    cursor:grab;
    transition:transform .28s ease,opacity .28s ease;
}

.swipe-card.dragging{
    cursor:grabbing;
    transition:none;
}

.swipe-card-back{
    inset:11px 30px -10px;
    background:linear-gradient(145deg,#231a35,#15141e);
    transform:scale(.97);
    opacity:.72;
}

.swipe-card img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center 35%;
    pointer-events:none;
}

.swipe-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to bottom,rgba(5,5,9,.02) 25%,rgba(5,5,9,.12) 52%,rgba(5,5,9,.82) 100%),
        linear-gradient(to right,rgba(5,5,9,.74),transparent 38%);
}

.profile-photo-progress{
    position:absolute;
    top:12px;
    left:18px;
    right:18px;
    z-index:5;
    display:flex;
    gap:6px;
}

.profile-photo-progress span{
    height:4px;
    flex:1;
    border-radius:999px;
    background:rgba(255,255,255,.35);
    box-shadow:0 1px 5px rgba(0,0,0,.3);
}

.profile-photo-progress span.active{
    background:white;
}

.profile-photo-nav{
    position:absolute;
    top:0;
    bottom:0;
    z-index:4;
    width:38%;
    border:0;
    background:transparent;
    cursor:pointer;
    pointer-events:none;
}

.profile-photo-nav.previous{
    left:0;
}

.profile-photo-nav.next{
    right:0;
}

.profile-photo-nav::after{
    position:absolute;
    top:50%;
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(8,7,14,.48);
    color:white;
    font-size:25px;
    opacity:0;
    transition:opacity .2s ease;
}

.profile-photo-nav.previous::after{
    content:"\2039";
    left:14px;
}

.profile-photo-nav.next::after{
    content:"\203A";
    right:14px;
}

.swipe-card:hover .profile-photo-nav::after{
    opacity:1;
}

.profile-badge,
.profile-match{
    display:inline-flex;
    padding:7px 11px;
    border:1px solid #ff792b;
    border-radius:999px;
    background:rgba(8,8,12,.64);
    color:#ffd0b2;
    font-size:11px;
    font-weight:800;
}

.profile-badge{
    position:absolute;
    top:17px;
    left:17px;
}

.profile-content{
    position:absolute;
    left:22px;
    right:22px;
    bottom:27px;
    max-width:520px;
}

.profile-match{
    border-color:#ff2d81;
    color:#ff86bc;
}

.profile-content h2{
    margin-top:10px;
    font-size:40px;
    line-height:1;
}

.profile-content > p{
    margin-top:7px;
    color:#d0ccd6;
    font-size:13px;
    font-weight:700;
}

.profile-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:13px;
}

.profile-tags span{
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.09);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
}

.profile-tonight{
    width:max-content;
    max-width:100%;
    padding:8px 11px;
    border-radius:999px;
    background:rgba(6,5,10,.72);
    color:white !important;
}

.swipe-hint{
    position:absolute;
    right:17px;
    bottom:14px;
    color:#777382;
    font-size:9px;
    font-weight:700;
}

.swipe-stamp{
    position:absolute;
    top:75px;
    z-index:3;
    padding:8px 12px;
    border:3px solid;
    border-radius:10px;
    font-size:24px;
    font-weight:900;
    text-transform:uppercase;
    opacity:0;
}

.swipe-stamp-like{
    left:24px;
    color:#29e6b3;
    transform:rotate(-12deg);
}

.swipe-stamp-pass{
    right:24px;
    color:#ff3c72;
    transform:rotate(12deg);
}

.swipe-actions{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:19px;
}

.swipe-action{
    width:54px;
    height:54px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#15141e;
    color:#9a96a9;
    font-size:28px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.32);
}

.swipe-action.favorite{
    color:#24dfe8;
    font-size:24px;
}

.swipe-action.sparkle{
    color:#b94cff;
    font-size:26px;
}

.swipe-action.flare{
    width:70px;
    height:70px;
    border-color:#ff74c6;
    background:linear-gradient(145deg,#ff6a37,#ff2d98,#a83eff);
    box-shadow:0 0 28px rgba(255,45,129,.48);
}

.swipe-action.flare img{
    width:66px;
    height:66px;
    object-fit:contain;
}

.swipe-action.message svg{
    width:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.swipe-action.message{
    color:#ddd9e8;
}

.friends-panel-backdrop{
    position:fixed;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(4,3,10,.72);
    backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
}

.friends-panel-backdrop.open{
    opacity:1;
    visibility:visible;
}

.friends-panel{
    position:relative;
    display:none;
    width:min(100%,430px);
    padding:28px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:28px;
    background:#15131e;
    box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 45px rgba(255,45,129,.1);
}

.friends-panel.active{
    display:block;
}

.friends-panel-close{
    position:absolute;
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#252230;
    color:#a9a5b5;
    font-size:27px;
    cursor:pointer;
}

.friends-panel-kicker{
    color:#ff3d91;
    font-size:10px;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.friends-panel h2{
    margin-top:7px;
    font-size:28px;
}

.friends-search-field{
    height:52px;
    margin-top:22px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:17px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#0e0d15;
}

.friends-search-field svg{
    width:21px;
    fill:none;
    stroke:#23dfe9;
    stroke-width:1.8;
}

.friends-search-field input,
.add-friend-field input,
.message-panel textarea{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:white;
    font:inherit;
}

.friend-search-results{
    display:grid;
    gap:8px;
    margin-top:14px;
    max-height:280px;
    overflow:auto;
}

.friends-search-empty{
    padding:22px 14px;
    border:1px dashed #363143;
    border-radius:16px;
    color:#858092;
    text-align:center;
    font-size:12px;
    line-height:1.5;
}

.friend-search-result{
    width:100%;
    padding:9px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:11px;
    background:#0e0d15;
    color:white;
    text-align:left;
    cursor:pointer;
}

.friend-search-result img{
    width:44px;
    height:44px;
    border:2px solid #ff2d81;
    border-radius:50%;
    object-fit:cover;
}

.friend-search-result strong,
.friend-search-result small{
    display:block;
}

.friend-search-result small{
    margin-top:2px;
    color:#888495;
}

.add-friend-field{
    display:block;
    margin-top:22px;
}

.add-friend-field span{
    display:block;
    margin-bottom:8px;
    color:#aaa6b5;
    font-size:12px;
    font-weight:700;
}

.add-friend-field input,
.message-panel textarea{
    padding:15px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px;
    background:#0e0d15;
}

.message-panel textarea{
    min-height:130px;
    margin-top:20px;
    resize:vertical;
}

.message-history{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:260px;
    margin-top:18px;
    padding:14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow-y:auto;
    background:#0d0c13;
}

.message-history:empty::before{
    content:"No messages yet. Start the conversation.";
    padding:18px 5px;
    color:#777282;
    font-size:11px;
    text-align:center;
}

.message-bubble{
    align-self:flex-end;
    max-width:82%;
    padding:10px 12px;
    border-radius:16px 16px 4px 16px;
    background:linear-gradient(135deg,#a743df,#ff2d81);
    color:white;
    font-size:12px;
    line-height:1.45;
    overflow-wrap:anywhere;
}

.message-bubble.incoming{
    justify-self:start;
    border-color:#343040;
    background:#1a1823;
}

.message-bubble time{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.65);
    font-size:8px;
    text-align:right;
}

.send-friend-request{
    width:100%;
    height:50px;
    margin-top:16px;
    border:0;
    border-radius:999px;
    background:linear-gradient(90deg,#a746de,#ff2d81);
    color:white;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}

.friends-toast{
    position:fixed;
    left:50%;
    bottom:25px;
    z-index:20;
    padding:13px 20px;
    border-radius:999px;
    background:linear-gradient(90deg,#ff762d,#ff2d81);
    box-shadow:0 0 28px rgba(255,45,129,.35);
    font-size:13px;
    font-weight:800;
    opacity:0;
    transform:translate(-50%,20px);
    pointer-events:none;
    transition:.2s ease;
}

.friends-toast.open{
    opacity:1;
    transform:translate(-50%,0);
}

@media (min-width:700px){
    .friends-page{
        padding:14px 16px 145px;
    }
}

@media (max-width:699px){
    .friends-body{
        min-height:100dvh;
    }

    .friends-page{
        min-height:100dvh;
        padding:calc(var(--safe-top) + 14px) 13px calc(var(--safe-bottom) + 112px);
    }

    .friend-stories{
        margin-left:-13px;
        margin-right:-13px;
        padding-left:13px;
        padding-right:13px;
    }

    .swipe-stage{
        min-height:390px;
        height:min(52dvh,520px);
        margin-top:12px;
    }

    .swipe-card-back{
        inset:12px 14px -10px;
    }

    .swipe-shade{
        background:
            linear-gradient(to bottom,rgba(5,5,9,.02) 38%,rgba(5,5,9,.22) 58%,rgba(5,5,9,.96) 100%),
            linear-gradient(to right,rgba(255,45,129,.12),transparent 28%);
    }

    .profile-content h2{
        font-size:32px;
    }

    .swipe-hint{
        display:none;
    }

    .activity-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .activity-summary-card{
        min-height:105px;
        padding:14px 5px;
        border-radius:21px;
    }

    .friend-activity-card{
        min-height:88px;
        padding:11px 13px;
        border-radius:23px;
    }

    .friend-activity-card img{
        width:54px;
        height:54px;
        flex-basis:54px;
    }

    .swipe-actions{
        gap:9px;
        margin-top:14px;
    }

    .swipe-action{
        width:48px;
        height:48px;
    }

    .swipe-action.flare{
        width:64px;
        height:64px;
    }

    .swipe-action.flare img{
        width:60px;
        height:60px;
    }

    .friends-panel-backdrop{
        align-items:flex-end;
        padding:calc(var(--safe-top) + 10px) 10px calc(var(--safe-bottom) + 8px);
    }

    .friends-panel{
        width:100%;
        max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 18px);
        padding:25px 18px 20px;
        border-radius:28px 28px 18px 18px;
        overflow-y:auto;
    }

    .friends-toast{
        bottom:calc(var(--safe-bottom) + 94px);
        max-width:calc(100vw - 28px);
        text-align:center;
    }
}

@media (max-width:460px){
    .friends-tabs button,
    .discover-tabs button{
        font-size:9px;
    }

    .friends-header h1{
        font-size:27px;
    }

    .activity-summary-card small{
        font-size:8px;
    }

    .friend-activity-place{
        max-width:90px;
        font-size:9px;
    }
}
.story-card[data-profile],
.friend-activity-card {
    display: none;
}

.friends-clean-state {
    margin: 40px auto 140px;
    max-width: 420px;
    padding: 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    background: rgba(14, 13, 24, 0.82);
    color: #8f8b9e;
    text-align: center;
}

.friends-clean-state strong,
.friends-clean-state span {
    display: block;
}

.friends-clean-state strong {
    margin-bottom: 8px;
    color: #fff;
    font-size: 20px;
}