.mfc-topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:900;
    padding:12px 18px;
    background:
        radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 24%),
        linear-gradient(180deg, rgba(15,23,42,.96), rgba(30,41,59,.96));
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 28px rgba(2,6,23,.28);
    transition:background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease;
}

.mfc-topbar--transparent{
    background:transparent;
    border-bottom:none;
    box-shadow:none;
    backdrop-filter:none;
}

.mfc-topbar.is-scrolled{
    background:
        radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 24%),
        linear-gradient(180deg, rgba(15,23,42,.98), rgba(30,41,59,.98));
    border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(2,6,23,.35);
    backdrop-filter:blur(12px);
}

.mfc-topbar-offset{
    height:20px;
}

.mfc-topbar__inner{
    width:100%;
    display:grid;
    grid-template-columns:minmax(300px, 1.2fr) auto minmax(220px, .8fr);
    align-items:center;
    gap:18px;
}

.mfc-topbar__left{
    min-width:0;
    display:flex;
    align-items:center;
    gap:16px;
}

.mfc-topbar__center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.mfc-topbar__right{
    min-width:0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

.mfc-topbar__brand{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    min-width:0;
}

.mfc-topbar__brand-link{
    display:flex;
    align-items:center;
}

.mfc-topbar__logo-default,
.mfc-topbar__logo-hover{
    height:34px;
    transition:all .22s ease;
}

.mfc-topbar__logo-hover{
    display:none;
}

.mfc-topbar__brand:hover .mfc-topbar__logo-default{
    display:none;
}

.mfc-topbar__brand:hover .mfc-topbar__logo-hover{
    display:block;
}

.mfc-topbar__site-title{
    text-decoration:none;
    color:#fff;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}

.mfc-topbar__site-title:hover{
    color:#7dd3fc;
}

.mfc-topbar__search-form{
    flex:1;
    min-width:0;
}

.mfc-topbar__search-shell{
    position:relative;
    display:flex;
    align-items:center;
}

.mfc-topbar__search-input{
    width:100%;
    height:44px;
    padding:0 14px 0 42px;
    border:none;
    outline:none;
    border-radius:16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:.88rem;
    font-weight:600;
    transition:all .22s ease;
}

.mfc-topbar__search-input::placeholder{
    color:#94a3b8;
    font-size:.82rem;
}

.mfc-topbar__search-input:focus{
    background:rgba(255,255,255,.09);
    border-color:rgba(56,189,248,.32);
    box-shadow:0 0 0 4px rgba(56,189,248,.08);
}

.mfc-topbar__search-icon{
    position:absolute;
    left:14px;
    color:#94a3b8;
    font-size:.9rem;
    pointer-events:none;
}

.mfc-topbar__dropdown{
    position:absolute;
    top:50px;
    left:0;
    width:100%;
    max-height:320px;
    overflow-y:auto;
    z-index:950;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(30,41,59,.98));
    box-shadow:0 18px 40px rgba(2,6,23,.45);
    backdrop-filter:blur(12px);
}

.mfc-topbar__dropdown-item{
    padding:10px 14px;
    color:#dbe7f3;
    cursor:pointer;
    font-size:.86rem;
    transition:background .18s ease;
}

.mfc-topbar__dropdown-item:hover{
    background:rgba(255,255,255,.05);
}

.mfc-topbar__dropdown-title{
    padding:8px 14px;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#7dd3fc;
}

.mfc-topbar__dropdown-clear{
    padding:10px 14px;
    text-align:right;
    font-size:.75rem;
    color:#fb7185;
    font-weight:700;
    cursor:pointer;
}

.mfc-is-hidden{
    display:none !important;
}

.mfc-topbar__filters{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:6px 10px;
    border-radius:18px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
}

.mfc-topbar__filter{
    position:relative;
    width:42px;
    height:42px;
    border:none;
    outline:none;
    cursor:pointer;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.04);
    color:#dbe7f3;
    font-size:1rem;
    transition:all .20s ease;
}

.mfc-topbar__filter:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.09);
}

.mfc-topbar__filter.is-active{
    background:linear-gradient(135deg, #2563eb, #22d3ee);
    box-shadow:0 10px 20px rgba(14,165,233,.22);
}

.mfc-topbar__filter:hover::after{
    content:attr(title);
    position:absolute;
    bottom:-36px;
    left:50%;
    transform:translateX(-50%);
    background:#0f172a;
    color:#fff;
    padding:5px 9px;
    font-size:12px;
    border-radius:8px;
    white-space:nowrap;
    z-index:20;
    border:1px solid rgba(255,255,255,.08);
}

.mfc-topbar__filter:hover::before{
    content:"";
    position:absolute;
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-width:6px;
    border-style:solid;
    border-color:#0f172a transparent transparent transparent;
    z-index:20;
}

.mfc-topbar__action{
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    color:#e5eef8;
    text-decoration:none;
    font-size:1rem;
    transition:all .22s ease;
    position:relative;
}

.mfc-topbar__action:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.10);
    color:#7dd3fc;
}

.mfc-topbar__action--messages:hover{
    color:#60a5fa;
}

.mfc-topbar__badge{
    position:absolute;
    top:-5px;
    right:-4px;
    min-width:20px;
    height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(90deg,#f43f5e,#ef4444);
    color:#fff;
    font-size:.64rem;
    font-weight:800;
    border-radius:999px;
    box-shadow:0 8px 16px rgba(239,68,68,.25);
}

.mfc-topbar__btn{
    height:42px;
    padding:0 14px;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:700;
    font-size:.84rem;
    white-space:nowrap;
    transition:all .22s ease;
}

.mfc-topbar__btn--ghost{
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.03);
}

.mfc-topbar__btn--ghost:hover{
    background:rgba(255,255,255,.08);
    color:#7dd3fc;
}

.mfc-topbar__btn--primary{
    color:#fff;
    background:linear-gradient(90deg,#ec4899,#8b5cf6);
    box-shadow:0 10px 22px rgba(168,85,247,.20);
}

.mfc-topbar__btn--primary:hover{
    transform:translateY(-2px);
    color:#fff;
}

@media (max-width: 1200px){
    .mfc-topbar__inner{
        grid-template-columns:minmax(260px, 1fr) auto auto;
        gap:14px;
    }

    .mfc-topbar__filters{
        display:none;
    }
}

@media (max-width: 1080px){
    .mfc-topbar__logo-default,
    .mfc-topbar__logo-hover{
        width:76px;
        object-fit:none;
        object-position:left;
        height:44px;
    }

    .mfc-topbar__site-title{
        display:none;
    }
}

@media (max-width: 720px){
    .mfc-topbar{
        padding:10px 12px;
    }

    .mfc-topbar-offset{
        height:66px;
    }

    .mfc-topbar__inner{
        grid-template-columns:1fr auto;
        gap:12px;
    }

    .mfc-topbar__center{
        display:none;
    }

    .mfc-topbar__search-form{
        max-width:230px;
    }
}

@media (max-width: 620px){
    .mfc-topbar__search-form{
        display:none;
    }

    .mfc-topbar__action{
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .mfc-topbar__btn{
        height:40px;
        padding:0 12px;
        font-size:.8rem;
    }
}

@media (max-width: 420px){
    .mfc-topbar__btn--ghost{
        display:none;
    }

    .mfc-topbar__logo-default,
    .mfc-topbar__logo-hover{
        height:30px;
    }
}