:root { --app-topbar-height: 56px; }

.app-topbar {
    position: fixed;
    z-index: 1300;
    top: 0;
    right: 0;
    left: var(--site-navigation-safe-left, 94px);
    border-bottom: 1px solid rgba(0,255,117,.18);
    background: rgba(2,10,6,.42);
    color: #eaffed;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.app-topbar__main {
    position: relative;
    display: grid;
    min-height: var(--app-topbar-height);
    grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}
.app-topbar__main>strong { overflow:hidden; font:800 14px/1 Unbounded,sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.app-topbar__back,.app-topbar__search-button { display:grid; width:38px; height:38px; place-items:center; border:0; background:transparent; color:#00ff75; text-decoration:none; cursor:pointer; }
.app-topbar__back { font:700 27px/1 Manrope,sans-serif; }
.app-topbar__search-icon { position:relative; display:block; width:14px; height:14px; border:2px solid currentColor; border-radius:50%; }
.app-topbar__search-icon::after { position:absolute; right:-6px; bottom:-3px; width:7px; height:2px; background:currentColor; content:""; transform:rotate(-48deg); transform-origin:left center; }
.profile-search { position:absolute; z-index:2; inset:6px 8px; display:grid; grid-template-columns:minmax(0,1fr) 42px; gap:6px; background:rgba(2,10,6,.96); }
.profile-search[hidden],.profile-search-results[hidden] { display:none!important; }
.profile-search input { width:100%; min-width:0; border:1px solid rgba(0,255,117,.28); border-radius:0; outline:0; background:rgba(1,7,4,.9); color:#eaffed; padding:12px 14px; font:500 13px/1.2 Manrope,sans-serif; }
.profile-search input:focus { border-color:#00ff75; box-shadow:0 0 22px rgba(0,255,117,.12); }
.profile-search button { border:1px solid rgba(0,255,117,.28); background:transparent; color:#00ff75; font:22px/1 Manrope,sans-serif; }
.profile-search-results { position:absolute; z-index:50; top:100%; right:0; width:min(680px,100%); max-height:min(62svh,620px); overflow:auto; border:1px solid rgba(0,255,117,.28); border-top:0; background:rgba(2,9,5,.985); box-shadow:0 30px 70px rgba(0,0,0,.7); }
.profile-search-group+.profile-search-group { border-top:1px solid rgba(0,255,117,.12); }
.profile-search-group>strong { display:block; padding:10px 14px 6px; color:#00ff75; font:800 9px/1 Unbounded,sans-serif; text-transform:lowercase; }
.profile-search-result { display:grid; min-height:56px; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 12px; color:#dff7e6; }
.profile-search-result:hover { background:rgba(0,255,117,.07); }
.profile-search-result__image { display:grid; width:40px; height:40px; place-items:center; overflow:hidden; border:1px solid rgba(0,255,117,.28); background:#07120b; color:#00ff75; }
.profile-search-result__image img { width:100%; height:100%; object-fit:cover; }
.profile-search-result__copy { min-width:0; color:inherit; text-decoration:none; }
.profile-search-result b,.profile-search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-search-result b { font:700 12px/1.2 Manrope,sans-serif; }
.profile-search-result small { margin-top:4px; color:#8da695; font:10px/1.1 ui-monospace,Consolas,monospace; }
.profile-search-result .profile-person__action { border:1px solid rgba(0,255,117,.28); background:transparent; color:#00ff75; padding:8px; font:700 9px/1 Manrope,sans-serif; }
.profile-social>.app-topbar,.profile-section-page>.app-topbar { position:relative; top:auto; right:auto; left:auto; }

@media (max-width:700px) {
    :root { --app-topbar-height:54px; }
    .app-topbar { right:0; left:0; }
    .app-topbar__main { padding:0 8px; }
    .app-topbar__main>strong { font-size:13px; }
    .profile-social>.app-topbar,.profile-section-page>.app-topbar { position:sticky; top:0; }
    .profile-search { inset:5px 7px; }
    .profile-search-results { position:fixed; top:var(--app-topbar-height); right:0; left:0; width:100%; max-height:calc(100svh - var(--app-topbar-height) - var(--site-mobile-dock-height,70px)); }
}
