.header {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--header-height);
    padding: 0 24px;
    box-sizing: border-box;
    background: var(--surface-color);
    color: var(--text-primary);
    border-bottom: 2px solid transparent;
    border-image: var(--brand-gradient) 1;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 10;
    transition: var(--transition-theme);
}

.header-logo {
    display: flex;
    align-items: center;
    margin-right: 24px;
    flex-shrink: 0;
    color: var(--primary-color);
}

.header-logo svg {
    width: 32px;
    height: 32px;
    transition: transform var(--transition-duration) var(--md-easing);
}

.header-logo:hover svg {
    transform: scale(1.05);
}

.theme-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    margin-left: 16px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: background-color var(--transition-duration), color var(--transition-duration);
}

.theme-toggle:hover {
    background-color: var(--hover-overlay);
    color: var(--primary-color);
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.header-menu {
    display: flex;
    justify-content: flex-end;
}