.topbar {
    position: fixed;
    top:0; left:0; right:0;
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 6px #e0e0e0;
    display: flex;
    align-items: center;
    z-index: 1000;
    padding: 0 32px;
    font-family: 'Segoe UI', Arial, sans-serif;
}
.topbar-left {
    display: flex; align-items: center; flex: 1;
}
.topbar-logo {
    height: 42px;
    margin-right: 15px;
}
.topbar-title {
    font-weight: bold; font-size: 22px; color: #22313f; letter-spacing: 1px;
}
.topbar-company {
    margin-left:12px; color:#16a085; font-size: 15px;
}
.topbar-center {
    flex: 2; display: flex; justify-content: center;
}
.topbar-search {
    width: 260px; padding:7px 14px; border:1px solid #e0e0e0; border-radius: 6px; font-size: 15px;
    background: #f7fafc;
    outline: none;
}
.topbar-search:focus { border-color: #16a085; }
.topbar-right {
    flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
}
.topbar-icon {
    font-size: 22px;
    color: #22313f;
    background: #f7fafc;
    border-radius: 50%;
    padding: 7px;
    transition: background .15s;
}
.topbar-icon:hover { background: #e8f9f1; color:#16a085; }
.topbar-user {
    display: flex; align-items: center; background: #f7fafc; padding: 3px 11px 3px 6px; border-radius: 14px;
    cursor:pointer; font-size: 16px;
}
.topbar-userimg {
    height: 28px; width: 28px; border-radius: 50%; margin-right: 8px; border: 2px solid #fff; box-shadow: 0 0 4px #bbb3;
}
.topbar-username {
    font-weight: 500; margin-right: 5px; color:#22313f;
}
.topbar-menu {
    font-size: 16px; color: #888;
}
@media (max-width:800px) {
    .topbar-center { display:none;}
    .topbar-company { display:none;}
    .main-content { padding:15px;}
}