.header {

    position: sticky;

    top: 0;

    z-index: 999;

    background: var(--glass);

    backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--border);

}

.header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 18px 0;

}

.logo {

    display: flex;

    align-items: center;

    gap: 12px;

}

.logo-icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: var(--accent);

    display: flex;

    justify-content: center;

    align-items: center;

    font-weight: 700;

    font-size: 20px;

    box-shadow: 0 0 20px rgba(123, 97, 255, .4);

}

.logo-title {

    font-size: 24px;

    font-weight: 800;

}

.search-wrapper {

    position: relative;

    width: 350px;

}

.search-input {

    width: 100%;

    padding: 13px 18px;

    padding-right: 45px;

    border-radius: 40px;

    border: 1px solid var(--border);

    background: #111827;

    color: #fff;

    outline: none;

    transition: .3s;

}

.search-input:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(123, 97, 255, .2);

}

.search-wrapper i {

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: #999;

}