*{
    box-sizing:border-box;
}

:root{
    --bg:#080a0d;
    --panel:#11151b;
    --panel-soft:#171c24;
    --line:rgba(255,255,255,.09);
    --text:#f7f8fb;
    --muted:#9aa3af;
    --muted-strong:#c7ced8;
    --accent:#ffb000;
    --brand-pink:#ff347e;
    --brand-blue:#20aef7;
    --brand-violet:#9b5cff;
    --accent-blue:#1f8bff;
    --danger:#ff5d6c;
    --online:#35d075;
    --nav-height:70px;
}

html{
    background:var(--bg);
}

body{
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a,
button{
    -webkit-tap-highlight-color:transparent;
}

.topbar{
    min-height:56px;
    background:rgba(8,10,13,.86) !important;
    border-bottom:1px solid var(--line) !important;
    backdrop-filter:blur(18px);
}

.logo{
    color:var(--text);
    letter-spacing:0 !important;
}

.auth-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    margin:10px 0 10px;
    text-align:center;
}

.auth-brand img{
    width:112px;
    height:112px;
    border-radius:28px;
    display:block;
    box-shadow:0 18px 54px rgba(31,139,255,.22), 0 8px 26px rgba(255,52,126,.16);
}

.auth-brand span{
    color:var(--text);
    font-size:36px;
    font-weight:900;
    line-height:1;
    letter-spacing:0;
}

.brand-gradient-text{
    background:linear-gradient(100deg, var(--brand-pink), var(--brand-violet), var(--brand-blue));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.logo-with-mark{
    display:inline-flex;
    align-items:center;
    gap:9px;
}

.logo-with-mark img{
    width:30px;
    height:30px;
    border-radius:8px;
    display:block;
    box-shadow:0 6px 18px rgba(31,139,255,.18);
}

.topbar a,
.top-actions a{
    color:var(--muted-strong) !important;
    font-weight:700;
}

.wrap{
    width:100%;
}

.card{
    background:var(--panel) !important;
    border:1px solid var(--line) !important;
    border-radius:8px !important;
    box-shadow:none !important;
}

.btn,
.cta,
button,
.filter-toggle{
    border-radius:8px !important;
}

.bottom-nav{
    min-height:var(--nav-height);
    background:rgba(8,10,13,.92) !important;
    border-top:1px solid var(--line) !important;
    backdrop-filter:blur(18px);
    z-index:300;
}

.bottom-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:58px;
    min-height:44px;
    color:var(--muted) !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
}

.bottom-nav a.active{
    color:var(--accent) !important;
}

.bottom-nav .nav-icon{
    width:25px;
    height:25px;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.bottom-nav a.active .nav-icon{
    filter:drop-shadow(0 0 10px rgba(255,176,0,.28));
}

.bottom-nav .badge{
    position:absolute;
    top:1px;
    right:6px;
    min-width:16px;
    padding:2px 5px;
    font-size:10px;
    line-height:1;
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.badge,
.unread{
    background:var(--accent) !important;
    color:#111 !important;
    font-weight:900;
}

.empty-state,
.empty,
.loader{
    border-radius:8px !important;
}

body.page-nearby{
    overflow-y:scroll;
}

.page-nearby .topbar{
    position:fixed;
    left:0;
    right:0;
}

.page-nearby .logo{
    font-size:24px !important;
}

.page-nearby .top-actions{
    align-items:center;
    gap:10px;
}

.page-nearby .wrap{
    max-width:1160px !important;
    padding:72px 8px calc(var(--nav-height) + 18px) !important;
}

.page-nearby .discovery-intro{
    display:none;
}

.page-nearby .filter-card{
    position:sticky;
    top:56px;
    z-index:80;
    margin:0 -8px 8px !important;
    padding:8px !important;
    background:rgba(8,10,13,.92) !important;
    border-width:0 0 1px !important;
    border-radius:0 !important;
    backdrop-filter:blur(18px);
}

.page-nearby .toolbar{
    justify-content:flex-start;
}

.page-nearby .filter-toggle{
    min-height:38px;
    padding:9px 13px;
    background:var(--panel-soft) !important;
    color:var(--text);
    border:1px solid var(--line);
}

.page-nearby .filter-panel{
    border-top-color:var(--line) !important;
}

.page-nearby .results-meta{
    margin:0 0 8px;
    padding:0 2px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}

.page-nearby #nearbyGrid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:6px !important;
}

.page-nearby .nearby-card{
    position:relative;
    background:#050607 !important;
    border:0 !important;
    border-radius:6px !important;
    transform:translateZ(0);
}

.page-nearby .nearby-photo-wrap{
    aspect-ratio:3 / 4 !important;
}

.page-nearby .nearby-photo,
.page-nearby .nearby-photo-placeholder{
    aspect-ratio:auto !important;
}

.page-nearby .nearby-photo-placeholder{
    background:#000 !important;
}

.page-nearby .nearby-body{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    min-height:46%;
    justify-content:flex-end;
    padding:34px 8px 8px !important;
    background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.42) 55%, rgba(0,0,0,0));
}

.page-nearby .nearby-name{
    min-height:0 !important;
    margin:0 0 3px !important;
    font-size:15px !important;
    line-height:1.12 !important;
    text-shadow:0 1px 10px rgba(0,0,0,.75);
}

.page-nearby .nearby-meta{
    color:rgba(255,255,255,.82) !important;
    font-size:11px !important;
    line-height:1.2 !important;
    margin:0 !important;
    min-height:0 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.page-nearby .nearby-helper-row{
    display:none !important;
}

.page-nearby .online-dot{
    right:8px !important;
    bottom:auto !important;
    top:8px;
    width:10px !important;
    height:10px !important;
    border-color:rgba(0,0,0,.72) !important;
}

body.page-profile .wrap{
    max-width:820px !important;
    padding-bottom:calc(var(--nav-height) + 18px) !important;
}

.page-profile .hero{
    min-height:min(72vh,620px) !important;
    background:#050607 !important;
}

.page-profile .hero img,
.page-profile .hero-placeholder{
    height:min(72vh,620px) !important;
}

.page-profile .hero-overlay{
    padding:72px 116px 22px 18px !important;
    background:linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.34) 62%, rgba(0,0,0,0)) !important;
}

.page-profile .hero-name{
    font-size:clamp(30px, 8vw, 48px) !important;
    letter-spacing:0 !important;
}

.page-profile .content{
    padding:10px 10px 18px !important;
}

.page-profile .actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px !important;
}

.page-profile .actions .btn,
.page-profile .actions .btn-secondary,
.page-profile .actions button{
    width:100%;
    text-align:center;
    min-height:46px;
    margin:0 !important;
    padding:13px 10px !important;
}

.page-profile .actions .btn{
    background:var(--accent) !important;
    color:#111 !important;
}

.page-profile .content > .card:first-child{
    position:sticky;
    bottom:calc(var(--nav-height) + 8px);
    z-index:90;
}

body.page-chat{
    min-height:100vh;
}

.page-chat .topbar{
    position:fixed;
    left:0;
    right:0;
}

.page-chat .wrap{
    max-width:780px !important;
    padding:74px 10px 104px !important;
}

.page-chat #messages{
    gap:8px !important;
}

.page-chat .bubble{
    max-width:82%;
    border-radius:18px !important;
    padding:10px 12px !important;
}

.page-chat .msg-row.mine .bubble{
    background:var(--accent-blue) !important;
}

.page-chat .msg-row.theirs .bubble{
    background:var(--panel-soft) !important;
    border-color:var(--line) !important;
}

.page-chat .composer{
    background:rgba(8,10,13,.94) !important;
    border-top:1px solid var(--line) !important;
    backdrop-filter:blur(18px);
    z-index:240;
}

.page-chat .composer-inner{
    gap:8px !important;
    align-items:center !important;
}

.page-chat textarea{
    min-height:44px !important;
    max-height:112px !important;
    resize:none !important;
    padding:12px 14px !important;
    border-radius:22px !important;
    background:var(--panel-soft) !important;
    border:1px solid var(--line) !important;
}

.page-chat #imageBtn,
.page-chat #sendBtn{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 !important;
    border-radius:50% !important;
}

.page-chat #imageBtn{
    background:var(--panel-soft) !important;
}

.page-chat #sendBtn{
    background:var(--accent) !important;
    color:#111 !important;
    font-size:0 !important;
}

.page-chat #sendBtn:before{
    content:"Send";
    font-size:12px;
    font-weight:900;
}

@media (min-width:760px){
    .page-nearby #nearbyGrid{
        grid-template-columns:repeat(4, minmax(0,1fr)) !important;
        gap:8px !important;
    }
}

@media (max-width:420px){
    .page-nearby #nearbyGrid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    }
}