/* css/components/viewer/viewer-header.css */
.viewer-header { 
    background-color: color-mix(in srgb, var(--surface-color) 80%, transparent); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); 
    border-bottom: 1px solid var(--border-color); 
    height: var(--header-height); 
    display: flex; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}
.viewer-header .header-content { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; box-sizing: border-box; }
.header-brand { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--primary-text); flex: 1; text-align: left; }
.header-title { flex: 2; text-align: center; font-weight: 500; color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.viewer-header .icon-button { background: none; border: 1px solid transparent; cursor: pointer; color: var(--secondary-text); padding: 8px; border-radius: 99px; display: grid; place-items: center; }
.viewer-header .icon-button:hover { background-color: var(--border-color); color: var(--primary-text); }