.admin-navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 74px;
    align-items: center;
    gap: 28px;
    padding: 10px max(24px, calc((100vw - 1480px) / 2));
    color: #fff;
    background: #03224c;
    box-shadow: 0 8px 28px rgba(3, 34, 76, .16);
}

.admin-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.admin-brand-mark { display: grid; width: 46px; height: 46px; place-items: center; color: #03224c; background: #f59e0b; border-radius: 12px; font-size: .77rem; font-weight: 900; letter-spacing: .06em; }
.admin-brand-text strong, .admin-brand-text small { display: block; }
.admin-brand-text strong { font-size: .94rem; }
.admin-brand-text small { margin-top: 3px; color: rgba(255, 255, 255, .65); font-size: .72rem; }

.admin-navigation { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; }
.admin-nav-link { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 9px 13px; color: rgba(255, 255, 255, .76); border-radius: 9px; font-size: .88rem; font-weight: 700; text-decoration: none; transition: color .15s ease, background .15s ease; }
.admin-nav-link:hover, .admin-nav-link.is-active { color: #fff; background: rgba(255, 255, 255, .11); }
.admin-nav-link.is-active { box-shadow: inset 0 -2px 0 #f59e0b; }
.admin-nav-icon { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 4px; opacity: .9; }
.admin-nav-icon-photos { border-radius: 3px; }
.admin-nav-icon-diapos { box-shadow: 4px 4px 0 -2px #03224c, 4px 4px 0 0 currentColor; }
.admin-nav-icon-users { border-radius: 50%; }

.admin-account { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.admin-account-avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #03224c; background: #fff; border-radius: 50%; font-size: .78rem; font-weight: 850; }
.admin-account-name { max-width: 150px; overflow: hidden; font-size: .82rem; font-weight: 700; text-overflow: ellipsis; }
.admin-logout { margin-left: 5px; padding: 8px 10px; color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; font-size: .78rem; text-decoration: none; }
.admin-logout:hover { background: rgba(255, 255, 255, .1); }
.admin-nav-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; color: #fff; background: rgba(255, 255, 255, .1); border: 0; border-radius: 9px; cursor: pointer; }
.admin-nav-toggle span:not(.sr-only) { width: 20px; height: 2px; background: currentColor; }

@media (max-width: 1080px) {
    .admin-navbar { grid-template-columns: auto auto; gap: 15px; padding: 10px 18px; }
    .admin-nav-toggle { display: flex; justify-self: end; }
    .admin-navigation { display: none; grid-column: 1 / -1; align-items: stretch; flex-direction: column; padding: 8px 0 4px; }
    .admin-navigation.is-open { display: flex; }
    .admin-nav-link { justify-content: flex-start; }
    .admin-account { position: absolute; top: 20px; right: 76px; }
    .admin-account-name { display: none; }
}

@media (max-width: 620px) {
    .admin-brand-text { display: none; }
    .admin-account-avatar { display: none; }
    .admin-account { right: 70px; }
    .admin-logout { margin: 0; }
}